/* workbench.css — 工作台统一配色与布局规范
   规范来源：《需求规格说明书》4.1/4.2 节
   断点：≥768 桌面 / 576-767 平板 / ≤575 手机 */
:root {
  --wb-primary: #4A90D9;
  --wb-primary-dark: #2B7CBF;
  --wb-bg: #F5F9FD;
  --wb-panel: #FFFFFF;
  --wb-text: #333333;
  --wb-text-sub: #888888;
  --wb-border: #E3EDF5;
  --wb-success: #52A852;
  --wb-warning: #E6A23C;
  --wb-danger: #E05A4E;
}

html, body { height: 100%; }
body.wb {
  background: var(--wb-bg);
  color: var(--wb-text);
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}
a { color: var(--wb-primary-dark); }

/* ---------- 登录页 ---------- */
.wb-login-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #DCEBF8 0%, var(--wb-bg) 55%, #FFFFFF 100%);
  padding: 16px;
}
.wb-login-card {
  background: var(--wb-panel);
  border: 1px solid var(--wb-border);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(74, 144, 217, .12);
  padding: 32px 28px;
  width: 100%; max-width: 380px;
}
.wb-login-card h1 { font-size: 24px; color: var(--wb-primary-dark); text-align: center; margin-bottom: 4px; }
.wb-login-card .sub { text-align: center; color: var(--wb-text-sub); font-size: 13px; margin-bottom: 22px; }
.wb-login-tabs { display: flex; border-bottom: 1px solid var(--wb-border); margin-bottom: 18px; }
.wb-login-tabs button {
  flex: 1; background: none; border: none; padding: 10px 0; font-size: 14px;
  color: var(--wb-text-sub); border-bottom: 2px solid transparent;
}
.wb-login-tabs button.active { color: var(--wb-primary-dark); border-bottom-color: var(--wb-primary); font-weight: bold; }
.btn-wb { background: var(--wb-primary); border-color: var(--wb-primary); color: #fff; }
.btn-wb:hover, .btn-wb:focus { background: var(--wb-primary-dark); border-color: var(--wb-primary-dark); color: #fff; }
.wb-msg { color: var(--wb-danger); font-size: 13px; min-height: 18px; margin-top: 8px; }

/* ---------- 主框架 ---------- */
.wb-header {
  position: fixed; top: 0; left: 0; right: 0; height: 52px; z-index: 1030;
  background: var(--wb-panel); border-bottom: 1px solid var(--wb-border);
  display: flex; align-items: center; padding: 0 16px; gap: 12px;
}
.wb-header .brand { font-weight: bold; color: var(--wb-primary-dark); font-size: 16px; white-space: nowrap; }
.wb-header .spacer { flex: 1; }
.wb-header .user { color: var(--wb-text-sub); font-size: 13px; white-space: nowrap; }
.wb-header .btn-home {
  border: 1px solid var(--wb-border); background: #fff; color: var(--wb-text);
  border-radius: 6px; font-size: 13px; padding: 3px 10px;
}
.wb-header .btn-home.active { background: var(--wb-primary); color: #fff; border-color: var(--wb-primary); }

.wb-body { padding-top: 52px; height: 100vh; display: flex; flex-direction: row; }
.wb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* 左侧模块快速导航：进入模块后仍保留，支持一键切换。 */
.wb-side-nav {
  width: 224px; flex: 0 0 224px; height: 100%; overflow-y: auto; overflow-x: hidden;
  padding: 14px 10px; border-right: 1px solid #D9E8F3; background: #FFFFFF;
  scrollbar-width: thin;
}
.wb-side-nav-head {
  padding: 2px 9px 10px; color: #315A7D; font-size: 16px; font-weight: 700;
  border-bottom: 1px solid #E4EFF6; margin-bottom: 10px;
}
.wb-side-cat { margin-bottom: 9px; }
.wb-side-cat-toggle {
  width: 100%;
  display: flex; align-items: center; gap: 6px; padding: 4px 9px;
  border: 0; border-radius: 6px; background: transparent;
  color: #71859A; font-size: 13px; font-weight: 600; text-align: left;
}
.wb-side-cat-toggle:hover { background: #F5F9FC; color: #46657F; }
.wb-side-cat-toggle::before {
  content: ''; width: 7px; height: 7px; flex: none; border-radius: 50%;
  background: var(--nav-icon-color, #8295A8); box-shadow: 0 0 0 2px var(--nav-icon-ring, rgba(130,149,168,.18));
}
.wb-side-cat-toggle::after {
  content: ''; width: 6px; height: 6px; margin-left: auto; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .15s;
}
.wb-side-cat.open .wb-side-cat-toggle::after { transform: rotate(225deg) translate(-1px, -1px); }
.wb-side-items { display: none; gap: 2px; margin-top: 2px; }
.wb-side-cat.open .wb-side-items { display: grid; }
.wb-side-fav-empty { padding: 5px 9px 7px; color: #8295A8; font-size: 12px; line-height: 1.45; }
.wb-side-item {
  width: 100%; min-width: 0; display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border: 0; border-radius: 7px; background: transparent;
  color: #4F687D; text-align: left; font-size: 15px; line-height: 1.25;
  transition: background .15s, color .15s, box-shadow .15s;
}
.wb-side-item:hover { background: #F2F8FC; color: #2E6F9D; }
.wb-side-item.active {
  background: var(--nav-card-bg, #EEF3F7); color: var(--nav-icon-color, #315A7D);
  font-weight: 700; box-shadow: inset 3px 0 0 var(--nav-icon-color, #4FA8E8);
}
.wb-side-icon {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  border-radius: 8px; background: var(--nav-icon-bg, #E7EEF4); color: var(--nav-icon-color, #60758A);
  font-size: 15px; box-shadow: inset 0 0 0 1px var(--nav-icon-ring, rgba(96,117,138,.16));
}
.wb-side-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-side-loading { padding: 8px 9px; font-size: 13px; }

/* 模块入口（主页网格） */
.wb-home { flex: 1; overflow: auto; padding: 28px 20px; display: flex; flex-direction: column; }
/* 分组纵向均分撑满整屏：空间富余时间距自动拉大铺满视口；超出时 auto margin 归零、padding 保底间距、正常滚动 */
.wb-home #moduleGrid { flex: 1; display: flex; flex-direction: column; width: 100%; }
.wb-home .wb-cat { margin-block: auto; padding-block: 13px; }

/* 导航页业务总览 */
.wb-overview {
  width: 100%; max-width: 1100px; margin: 0 auto 18px;
  padding: 18px 20px;
  border: 1px solid #D9E8F3; border-radius: 9px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 100%);
  box-shadow: 0 4px 14px rgba(54, 116, 163, .07);
}
.wb-overview-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 15px; padding-bottom: 11px; border-bottom: 1px solid #E4EFF6;
}
.wb-overview-head strong { color: #315A7D; font-size: 17px; }
.wb-overview-head span { color: #71859A; font-size: 12px; }
.wb-overview-head .wb-overview-refresh {
  margin-left: auto; border: 1px solid #BBD9ED; border-radius: 6px;
  background: #F7FCFF; color: #3D6E93; font-size: 12px; padding: 4px 12px;
}
.wb-overview-head .wb-overview-refresh:hover { background: #EAF6FD; color: #2378B0; border-color: #8DC5E9; }
.wb-overview-head .wb-overview-refresh:disabled { opacity: .55; }
.wb-overview-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(290px, .7fr); gap: 16px; align-items: stretch; }
.wb-overview-rows { display: grid; grid-template-rows: 1fr 1fr; gap: 14px; min-width: 0; }
.wb-overview-metric-row { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wb-overview-row-head { min-height: 28px; display: flex; align-items: center; gap: 10px; }
.wb-overview-row-head > strong { color: #456D8D; font-size: 14px; white-space: nowrap; }
.wb-overview-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; min-width: 0; align-items: stretch; }
.wb-overview-step {
  min-width: 0; min-height: 108px; padding: 15px 13px;
  border: 1px solid #DFEBF4; border-top: 3px solid var(--step-color);
  border-radius: 8px; background: #FFFFFF;
  box-shadow: 0 2px 7px rgba(54, 116, 163, .045);
  display: flex; flex-direction: column; justify-content: center;
  transition: transform .15s, box-shadow .15s;
}
.wb-overview-step:hover { transform: translateY(-1px); box-shadow: 0 5px 12px rgba(54, 116, 163, .09); }
.wb-overview-step[data-overview-detail="unfinished"] { background: #FFF2DF; }
.wb-overview-step[data-overview-detail="unfinished"] span { color: #9A6518; }
.wb-overview-step[data-overview-detail="unfinished"] b { color: #C77800; }
.wb-overview-step[data-overview-detail="completed"] { background: #EAF5FF; }
.wb-overview-step[data-overview-detail="completed"] span { color: #3B6E9A; }
.wb-overview-step[data-overview-detail="completed"] b { color: #2F6F9F; }
.wb-overview-step[data-overview-detail="overdue"] { background: #FDEBEC; }
.wb-overview-step[data-overview-detail="overdue"] span { color: #A84C52; }
.wb-overview-step[data-overview-detail="overdue"] b { color: #C05D5D; }
.wb-overview-clickable { cursor: pointer; }
.wb-overview-clickable:focus-visible { outline: 2px solid #78B7DF; outline-offset: 2px; }
.wb-overview-record-row { cursor: pointer; }
.wb-overview-record-row:hover > td { background: #F0F7FF !important; }
.wb-overview-record-row:focus-visible { outline: 2px solid #78B7DF; outline-offset: -2px; }
.wb-overview-items { display: block; width: 220px; max-width: 220px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wb-overview-step span { display: block; color: #657A8F; font-size: 12px; }
.wb-overview-step b { display: inline-block; margin-top: 7px; color: #315A7D; font-size: 25px; line-height: 1; }
.wb-overview-step small { margin-left: 4px; color: #8295A8; font-size: 12px; }
.wb-operator-bar {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 7px 14px; border-bottom: 1px solid #DCEAF4; background: #F8FCFF;
  color: #547087; font-size: 12px;
}
.wb-operator-bar label { margin: 0; font-weight: 600; color: #315A7D; }
.wb-operator-picker { position: relative; width: 320px; max-width: 42vw; }
.wb-operator-picker input { width: 100%; }
.wb-operator-picker input[readonly] { cursor: pointer; background: #FFF; }
.wb-operator-menu {
  position: absolute; z-index: 1080; top: calc(100% + 4px); right: 0; width: 360px; max-width: 80vw;
  max-height: 280px; overflow: auto; padding: 4px; border: 1px solid #C9DCEB; border-radius: 7px;
  background: #FFF; box-shadow: 0 10px 24px rgba(45, 86, 121, .18); display: none;
}
.wb-operator-menu.show { display: block; }
.wb-operator-menu button {
  display: block; width: 100%; padding: 7px 9px; border: 0; border-radius: 5px;
  background: transparent; color: #315A7D; text-align: left; font-size: 12px;
}
.wb-operator-menu button:hover,
.wb-operator-menu button.active { background: #EAF5FC; }
.wb-operator-menu .empty { padding: 8px; color: #8295A8; font-size: 12px; text-align: center; }
.wb-operator-confirm-mask {
  position: fixed; inset: 0; z-index: 20000; display: none; align-items: center; justify-content: center;
  padding: 18px; background: rgba(24, 48, 70, .34);
}
.wb-operator-confirm-mask.show { display: flex; }
body.wb-operator-open > *:not(.wb-operator-confirm-mask):not(.wb-operator-confirm-dialog) { pointer-events: none !important; }
body.wb-operator-open .wb-operator-confirm-mask,
body.wb-operator-open .wb-operator-confirm-mask *,
body.wb-operator-open .wb-operator-confirm-dialog,
body.wb-operator-open .wb-operator-confirm-dialog * { pointer-events: auto !important; }
.wb-operator-confirm-dialog {
  max-width: none; max-height: none; margin: auto; padding: 0; border: 0;
  background: transparent; overflow: visible;
}
.wb-operator-confirm-dialog::backdrop { background: rgba(24, 48, 70, .34); }
.wb-operator-confirm {
  width: min(720px, calc(100vw - 28px)); border: 1px solid #C9DCEB; border-radius: 9px;
  background: #FFF; box-shadow: 0 18px 48px rgba(25, 57, 84, .25); overflow: visible;
}
.wb-operator-confirm .head { display: flex; align-items: center; padding: 10px 13px; border-bottom: 1px solid #E0EBF3; color: #315A7D; }
.wb-operator-confirm .head b { font-size: 14px; }
.wb-operator-confirm .head button { margin-left: auto; border: 0; background: transparent; color: #7D91A4; font-size: 20px; line-height: 1; }
.wb-operator-confirm .body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 13px; }
.wb-operator-confirm .body > label,
.wb-operator-confirm .body > .msg { grid-column: 1 / -1; }
.wb-operator-confirm .body > label { display: block; margin-bottom: 6px; color: #60788E; font-size: 12px; }
.wb-operator-confirm .body .wb-operator-picker { width: 100%; max-width: none; }
.wb-operator-pane { padding: 9px; margin-bottom: 8px; border: 1px solid #DCEAF4; border-radius: 7px; background: #FBFDFF; }
.wb-operator-pane .pane-title { margin-bottom: 6px; color: #315A7D; font-size: 12px; font-weight: 700; }
.wb-operator-pane .lookup-result { min-height: 17px; margin-top: 5px; color: #678097; font-size: 11px; }
.wb-operator-pane .lookup-result:not(:empty) { color: #2F6F9F; }
.wb-operator-pane .lookup-result .match-tip { margin-bottom: 4px; color: #7D91A4; }
.wb-operator-pane .lookup-result .match-item {
  display: block; width: 100%; margin-top: 3px; padding: 4px 6px; border: 1px solid #D3E4F0;
  border-radius: 4px; background: #FFF; color: #315A7D; text-align: left; font-size: 11px;
}
.wb-operator-pane .lookup-result .match-item:hover { background: #EAF5FC; border-color: #9DCBEA; }
.wb-operator-confirm .msg { min-height: 18px; margin-top: 6px; color: #C0392B; font-size: 12px; }
.wb-operator-confirm .foot { display: flex; justify-content: flex-end; gap: 8px; padding: 9px 13px; border-top: 1px solid #E0EBF3; background: #F9FCFE; }
@media (max-width: 700px) {
  .wb-operator-confirm .body { grid-template-columns: 1fr; }
}
.wb-operator-bar .hint { margin-right: auto; color: #7D91A4; }
.wb-overview-chart {
  min-width: 0; padding: 12px 14px;
  border: 1px solid #E0EDF6; border-radius: 8px;
  background: #F8FCFE;
  display: flex; flex-direction: column; justify-content: center;
}
.wb-overview-chart-title { margin-bottom: 6px; color: #456D8D; font-size: 13px; font-weight: 600; }
#navOverviewChart > div {
  flex-direction: column; justify-content: center; align-items: center; gap: 8px; flex-wrap: nowrap;
}
#navOverviewChart svg { width: 220px !important; height: 220px; flex: 0 0 220px; }
#navOverviewChart .dash-legend {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; margin-top: 0;
}
#navOverviewChart .dash-legend span { display: inline-flex; align-items: center; gap: 5px; color: #657A8F; font-size: 12px; }
#navOverviewChart .dash-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
#navOverviewChart .dash-empty { color: #8295A8; font-size: 12px; padding: 34px 0; text-align: center; }
.wb-overview-range-tabs { display: flex; flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin-left: 0; }
.wb-overview-range-tabs button {
  border: 1px solid #C7DCEA; border-radius: 5px; background: #F8FCFE;
  color: #55758F; font-size: 12px; padding: 3px 10px;
}
.wb-overview-range-tabs button:hover { background: #EDF7FD; color: #2879AE; }
.wb-overview-range-tabs button.active { background: #DCEEF9; border-color: #83BEE3; color: #1F6694; font-weight: 600; }
.wb-overview-main-chart { align-self: stretch; justify-content: center; }
.wb-overview-main-chart .wb-overview-chart-title { text-align: center; }

/* 模块桌面快捷方式 */
.wb-module-card, .wb-fav-card { position: relative; }
.wb-shortcut {
  position: absolute; top: 8px; right: 8px;
  width: 25px; height: 25px; display: grid; place-items: center;
  border: 1px solid rgba(74, 118, 151, .22); border-radius: 6px;
  background: rgba(255, 255, 255, .88); color: #456C88;
  font-size: 14px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity .15s, background .15s, color .15s;
}
.wb-module-card:hover .wb-shortcut,
.wb-fav-card:hover .wb-shortcut { opacity: 1; }
.wb-shortcut:hover { background: #EAF5FC; color: #2778AD; border-color: #9BCDEC; }
.wb-fav-card .wb-shortcut { top: 6px; right: 34px; }
.wb-nav-toast {
  position: fixed; right: 20px; bottom: 24px; z-index: 2000;
  max-width: min(420px, calc(100vw - 32px)); padding: 10px 14px;
  border: 1px solid #B9DDF4; border-radius: 7px; background: #F1F9FE;
  color: #315A7D; box-shadow: 0 10px 28px rgba(55, 103, 139, .16);
  font-size: 13px; opacity: 0; transform: translateY(8px);
  pointer-events: none; transition: opacity .2s, transform .2s;
}
.wb-nav-toast.show { opacity: 1; transform: translateY(0); }

.wb-module-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  max-width: 1100px; margin: 0 auto;
}
.wb-module-card {
  background: var(--nav-card-bg, var(--wb-panel)); border: 1px solid var(--nav-card-border, var(--wb-border)); border-radius: 10px;
  padding: 22px 16px; text-align: center; cursor: pointer; user-select: none;
  transition: box-shadow .15s, transform .15s, background .15s;
}
.wb-module-card:hover { background:var(--nav-card-hover, var(--nav-card-bg, var(--wb-panel))); box-shadow: 0 6px 18px rgba(74,144,217,.14); transform: translateY(-2px); }
.wb-module-card .icon { font-size: 34px; line-height: 1; }
.wb-module-card .name { margin-top: 10px; font-size: 14px; }
.wb-module-card .ver { margin-top: 4px; font-size: 12px; color: var(--wb-text-sub); }
.wb-module-card,
.wb-fav-card,
.wb-fav-pick {
  --nav-icon-bg: #DCE6EE;
  --nav-icon-color: #60758A;
  --nav-icon-ring: rgba(96,117,138,.22);
  --nav-card-bg: #EEF3F7;
  --nav-card-border: #CAD7E1;
  --nav-card-hover: #E5EDF3;
}
[data-cat="lab"] {
  --nav-icon-bg:#F7C2CA; --nav-icon-color:#A64A5D; --nav-icon-ring:rgba(166,74,93,.22);
  --nav-card-bg:#FCE9EC; --nav-card-border:#F0B5BE; --nav-card-hover:#FADCE1;
}
[data-cat="supply"] {
  --nav-icon-bg:#C3E3FA; --nav-icon-color:#236CA8; --nav-icon-ring:rgba(35,108,168,.24);
  --nav-card-bg:#DFF0FC; --nav-card-border:#A9D4F2; --nav-card-hover:#D2E9FA;
}
[data-cat="business"] {
  --nav-icon-bg:#FFE096; --nav-icon-color:#9C6508; --nav-icon-ring:rgba(156,101,8,.24);
  --nav-card-bg:#FFF0C9; --nav-card-border:#F2CE75; --nav-card-hover:#FBE5AE;
}
[data-cat="hr"] {
  --nav-icon-bg:#A9E6A0; --nav-icon-color:#2A6F35; --nav-icon-ring:rgba(42,111,53,.27);
  --nav-card-bg:#DFF6D8; --nav-card-border:#94D98B; --nav-card-hover:#D2F0C9;
}
[data-cat="system"] {
  --nav-icon-bg:#D8C8F4; --nav-icon-color:#624897; --nav-icon-ring:rgba(98,72,151,.24);
  --nav-card-bg:#EBE3FA; --nav-card-border:#C4B0E8; --nav-card-hover:#E1D6F7;
}
[data-cat="favs"] {
  --nav-icon-bg:#FFE39A; --nav-icon-color:#8C620D; --nav-icon-ring:rgba(140,98,13,.22);
  --nav-card-bg:#FFF3CC; --nav-card-border:#EACB75; --nav-card-hover:#FBE8AF;
}
/* 帮助中心：「其他」分类下的集中查阅入口，用蓝色调与普通模块卡区分 */
.wb-module-card.is-help,
.wb-side-item[data-module-id="help-center"] {
  --nav-icon-bg:#C3E3FA; --nav-icon-color:#1E5F94; --nav-icon-ring:rgba(35,108,168,.24);
  --nav-card-bg:#EDF6FD; --nav-card-border:#A9D4F2; --nav-card-hover:#DCEBFA;
}
.wb-module-card .icon,
.wb-fav-card .fi {
  width:54px; height:54px; display:grid; place-items:center;
  border-radius:14px; background:var(--nav-icon-bg); color:var(--nav-icon-color);
  box-shadow:inset 0 0 0 1px var(--nav-icon-ring);
}
.wb-fav-pick .fi {
  width:30px; height:30px; flex:none; display:grid; place-items:center;
  border-radius:8px; background:var(--nav-icon-bg); color:var(--nav-icon-color);
  box-shadow:inset 0 0 0 1px var(--nav-icon-ring);
}

/* 分类分组标题（外层容器改块级，分组内各自成网格） */
/* #moduleGrid 布局由上方 .wb-home 作用域规则接管 */
.wb-cat-title {
  font-size: 13px; color: var(--wb-text-sub); font-weight: 600;
  margin: 0 0 12px; padding-left: 10px; border-left: 3px solid var(--wb-primary);
  letter-spacing: 1px;
}

/* 页签区 */
.wb-tabs {
  display: none; align-items: center; gap: 2px;
  background: var(--wb-panel); border-bottom: 1px solid var(--wb-border);
  padding: 0 8px; overflow-x: auto; min-height: 40px;
}
.wb-tabs.show { display: flex; }
.wb-tab {
  border: none; background: none; padding: 9px 14px; font-size: 14px;
  color: var(--wb-text-sub); border-bottom: 2px solid transparent; white-space: nowrap;
}
.wb-tab.active { color: var(--wb-primary-dark); border-bottom-color: var(--wb-primary); font-weight: bold; }
.wb-tab .close-x { margin-left: 6px; color: var(--wb-text-sub); cursor: pointer; }

/* 主页时空的 frames 区不占高度，打开模块页签后才撑满剩余空间 */
.wb-frames { display: none; position: relative; background: var(--wb-bg); }
.wb-frames.show { display: block; flex: 1; }
.wb-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: none; }
.wb-frame.active { display: block; }

.wb-footer {
  background: var(--wb-panel); border-top: 1px solid var(--wb-border);
  padding: 4px 16px; font-size: 12px; color: var(--wb-text-sub);
  display: flex; gap: 16px; flex-wrap: wrap;
}

/* ---------- 响应式断点 ---------- */
@media (max-width: 767px) {
  .wb-body { flex-direction: column; }
  .wb-side-nav {
    width: 100%; flex: 0 0 auto; height: auto; max-height: 148px;
    padding: 8px 10px; border-right: 0; border-bottom: 1px solid #D9E8F3;
    overflow-x: auto; overflow-y: hidden;
  }
  .wb-side-nav-head { display: none; }
  .wb-side-nav-list { display: flex; gap: 8px; width: max-content; }
  .wb-side-cat { flex: none; min-width: 150px; margin: 0; }
  .wb-side-cat:not(.open) { min-width: 112px; }
  .wb-side-items { gap: 2px; }
  .wb-side-item { padding: 5px 7px; }
  .wb-main { min-height: 0; }
  .wb-module-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .wb-fav-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .wb-header .brand { font-size: 14px; }
  .wb-header .company-name { display: none; }
  .wb-overview-grid { grid-template-columns: 1fr; }
  .wb-overview-chart { border: 1px solid #E0EDF6; padding: 12px 14px; }
  .wb-overview-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .wb-side-nav { max-height: 132px; }
  .wb-module-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .wb-fav-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .wb-home { padding: 16px 12px; }
  .wb-header .user .uname { display: none; }
  .wb-footer { font-size: 12px; }
  .wb-overview { padding: 13px 12px; }
  .wb-overview-flow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wb-overview-arrow { display: none; }
  .wb-overview-step b { font-size: 21px; }
  .wb-shortcut { opacity: .72; }
}

/* ---------- 模块内通用（帮助选项卡 / 版本信息） ---------- */
.app-tabs { display: flex; border-bottom: 1px solid var(--wb-border); background: var(--wb-panel); padding: 0 10px; }
.app-tab {
  border: none; background: none; padding: 10px 16px; font-size: 14px;
  color: var(--wb-text-sub); border-bottom: 2px solid transparent;
}
.app-tab.active { color: var(--wb-primary-dark); border-bottom-color: var(--wb-primary); font-weight: bold; }
.app-pane { display: none; padding: 16px; }
.app-pane.active { display: block; }
.app-about { font-size: 12px; color: var(--wb-text-sub); padding: 6px 16px; }
.app-table thead th { background: #EAF3FB; color: var(--wb-text); font-size: 13px; }

/* ===== 表格吸附表头：滚动时保持当前表格列标题可见 ===== */
.table-responsive,
.calc-table-wrap {
  position: relative;
  max-height: calc(100vh - 180px);
  overflow: auto !important;
  overscroll-behavior: contain;
}
.table-responsive > table > thead > tr > th,
.calc-table-wrap > table > thead > tr > th,
.modal-body[style*="overflow"] > table > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #EAF3FB !important;
  background-clip: padding-box;
  box-shadow: inset 0 -1px 0 #D7E3EF, 0 2px 5px rgba(44, 72, 104, .08);
}
.app-card {
  background: var(--wb-panel); border: 1px solid var(--wb-border);
  border-radius: 8px; padding: 16px; margin-bottom: 14px;
}

/* ===== 区域醒目边框（2026-10-03 用户要求：参考检测数据管理，为每个窗口区域设置醒目边框、使区域界线清晰）=====
   口径与检测数据管理的区块一致（.dd-sec / .dd-hd）：2px 边框 #A9C3DE；
   区块顶部若为「标题行（含 strong）」，则加浅蓝标题条（背景 #E7F1FB、下边框 2px #C6DAEC），
   与检测数据管理页的「① 含水率/灼减、② 化学成分结果…」区块观感一致。
   说明：仅在卡片首行为标题行时加标题条，避免把纯筛选工具栏也涂成标题条。 */
body.wb .app-card {
  border: 2px solid #A9C3DE;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(31, 95, 169, .07);
}
body.wb .app-card > strong:first-child { display: block; }
body.wb .app-card:has(> .d-flex:first-child > strong) > .d-flex:first-child,
body.wb .app-card:has(> strong:first-child) > strong:first-child {
  background: #E7F1FB;
  border: 1px solid #C6DAEC;
  border-bottom: 2px solid #C6DAEC;
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 10px;
  color: #24557C;
}
.text-sub { color: var(--wb-text-sub); }

/* ===== 全模块字体字号令牌（统一层级：页面标题16 / 正文表单14 / 表格13 / 标签辅助12 / 指标大数24） ===== */
:root {
  --wb-font: "Microsoft YaHei", "PingFang SC", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --wb-fs-xs: 12px; --wb-fs-sm: 13px; --wb-fs-md: 14px; --wb-fs-lg: 16px; --wb-fs-xl: 24px;
}
body { font-family: var(--wb-font); font-size: var(--wb-fs-md); }

/* ===== 可见滚动条（内容超出视口时右侧显示） ===== */
.wb-home::-webkit-scrollbar,
body::-webkit-scrollbar,
iframe { scrollbar-width: auto; }
.wb-home::-webkit-scrollbar { width: 12px; }
.wb-home::-webkit-scrollbar-track { background: #EEF3F9; border-radius: 6px; }
.wb-home::-webkit-scrollbar-thumb { background: #B8C7D9; border-radius: 6px; border: 2px solid #EEF3F9; }
.wb-home::-webkit-scrollbar-thumb:hover { background: #9DB4CC; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #F1F5FA; }
::-webkit-scrollbar-thumb { background: #C3D2E2; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #A6BCD3; }
h6, .h6 { font-size: var(--wb-fs-lg); }
.table { font-size: var(--wb-fs-sm); }
.form-control, .form-select { font-size: var(--wb-fs-md); }
.form-label { font-size: var(--wb-fs-xs); }

/* 帮助视图返回按钮（页签栏内，帮助视图激活时显示） */
.wb-help-back { color: var(--wb-primary, #2563eb); font-weight: 600; }
.wb-help-back:hover { background: rgba(37, 99, 235, 0.08); }

/* ---------- 常用模块区（导航页顶部） ---------- */
.wb-fav { max-width: 1100px; width: 100%; margin: 0 auto 18px; }
.wb-fav-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wb-fav-head .wb-cat-title { margin: 0; }
.wb-fav-mode { font-size: 12px; color: var(--wb-text-sub); }
.wb-fav-head .wb-flex { flex: 1; }
/* 常用区网格与下方分类区（wb-module-grid）同规格：每行 5 个、同间距，列位上下对齐 */
.wb-fav-grid { display: grid; gap: 16px; margin-top: 10px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); max-width: 1100px; margin-left: auto; margin-right: auto; }
.wb-fav-card {
  position: relative; display: flex; flex-direction: column; align-items: center;
  background: var(--nav-card-bg, var(--wb-panel)); border: 1px solid var(--nav-card-border, var(--wb-border)); border-radius: 10px;
  padding: 22px 16px 16px; cursor: pointer; user-select: none; text-align: center;
  transition: box-shadow .15s, transform .15s, background .15s;
}
.wb-fav-card:hover { background:var(--nav-card-hover, var(--nav-card-bg, var(--wb-panel))); box-shadow: 0 6px 18px rgba(74,144,217,.14); transform: translateY(-2px); }
.wb-fav-card .fi { font-size: 34px; line-height: 1; }
.wb-fav-card .fn {
  margin-top: 10px; font-size: 14px; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wb-fav-card .fv { margin-top: 4px; font-size: 12px; color: var(--wb-text-sub); }
.wb-fav-card .fx {
  position: absolute; top: 6px; right: 8px;
  color: var(--wb-text-sub); font-size: 14px; padding: 0 3px; border-radius: 4px;
  opacity: 0; transition: opacity .15s;
}
.wb-fav-card:hover .fx { opacity: 1; }
.wb-fav-card .fx:hover { color: var(--wb-danger); background: rgba(224,90,78,.1); }
.wb-fav-pick-list { max-height: 52vh; overflow: auto; display: grid; gap: 4px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.wb-fav-pick { display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 5px 6px; border-radius: 6px; cursor: pointer;
  background:var(--nav-card-bg); border:1px solid var(--nav-card-border); }
.wb-fav-pick:hover { background:var(--nav-card-hover); }
.wb-fav-pick .fi { font-size: 17px; }

/* ---------- 注册页：经营身份（类别双篮 + 资质材料 + 非贸易商声明） ---------- */
.wb-login-card.wide { max-width: 900px; }
.wb-alert-danger {
  background: #FDF1F0; border: 1px solid #F5C9C5; color: #8C3129;
  border-radius: 8px; padding: 8px 10px; font-size: 12px; line-height: 1.65; margin-bottom: 10px;
}
.wb-alert-danger b { color: #B03A2E; }
.wb-declare {
  display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.6;
  background: #F7FAFD; border: 1px solid var(--wb-border); border-radius: 8px; padding: 8px 10px; cursor: pointer;
}
.wb-declare input { margin-top: 2px; flex: none; }
.sd-sec-title {
  font-size: 13px; font-weight: 600; color: var(--wb-primary-dark);
  margin: 0 0 6px; padding-left: 8px; border-left: 3px solid var(--wb-primary);
}

/* 类别双篮 */
.sd-basket { border: 1px solid var(--wb-border); border-radius: 8px; padding: 8px; background: #FBFDFF; }
.sd-bk-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.sd-target {
  border: 1px solid var(--wb-border); background: #fff; color: var(--wb-text-sub);
  border-radius: 14px; padding: 2px 12px; font-size: 13px; cursor: pointer;
}
.sd-target.active { background: var(--wb-primary); border-color: var(--wb-primary); color: #fff; font-weight: bold; }
.sd-bk-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 8px; }
@media (max-width: 768px) { .sd-bk-grid { grid-template-columns: 1fr; } }
.sd-bk-col { border: 1px dashed var(--wb-border); border-radius: 8px; background: #fff; min-height: 112px; padding: 6px 8px; }
.sd-bk-sup { border-color: #BBD9F2; }
.sd-bk-buy { border-color: #CFE8CF; }
.sd-bk-hd { font-size: 12px; font-weight: 600; color: var(--wb-text-sub); margin-bottom: 6px; }
.sd-bk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sd-chip {
  display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--wb-border);
  background: #F3F8FD; color: var(--wb-text); border-radius: 6px; padding: 3px 6px;
  font-size: 13px; cursor: pointer; user-select: none;
}
.sd-chip:hover { border-color: var(--wb-primary); }
.sd-chip.in { cursor: default; background: #fff; }
.sd-bk-sup .sd-chip.in { background: #EAF3FB; border-color: #BBD9F2; }
.sd-bk-buy .sd-chip.in { background: #EDF7ED; border-color: #CFE8CF; }
.sd-chip-act {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; border-radius: 4px; font-size: 11px;
  background: var(--wb-primary); color: #fff;
}
.sd-chip-act[data-to="demand"] { background: var(--wb-success); }
.sd-chip-act.rm { background: transparent; color: var(--wb-text-sub); font-size: 14px; cursor: pointer; }
.sd-chip-act.rm:hover { background: var(--wb-danger); color: #fff; }
.sd-empty { font-size: 12px; color: var(--wb-text-sub); }
.sd-bk-tip { font-size: 12px; margin-top: 6px; }
.sd-mats .sd-mat-msg { margin-top: 2px; }
.sd-mat-strip { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; font-size: 12px; }
.sd-mat-strip a { color: var(--wb-primary-dark); text-decoration: none; }
.sd-mat-strip a:hover { text-decoration: underline; }

/* ===== 统一操作界面视觉规范（亮色蓝白、清晰边界、突出主操作） ===== */
:root {
  --wb-primary: #4FA8E8;
  --wb-primary-dark: #3285C2;
  --wb-bg: #F6FAFD;
  --wb-panel: #FFFFFF;
  --wb-card: #FFFFFF;
  --wb-text: #33475B;
  --wb-text-sub: #71859A;
  --wb-border: #D9E8F3;
  --wb-success: #45A870;
  --wb-warning: #D99B36;
  --wb-danger: #D46A6A;
  --wb-radius: 7px;
  --wb-type-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --wb-type-body: 14px;
  --wb-type-label: 12px;
  --wb-type-table: 13px;
  --wb-type-card-title: 15px;
  --wb-type-page-title: 20px;
  --wb-type-modal-title: 16px;
}
body.wb {
  --primary: #4FA8E8;
  --primary-dark: #3285C2;
  --bg: #F6FAFD;
  --card: #FFFFFF;
  --panel: #FFFFFF;
  --border: #D9E8F3;
  --text: #33475B;
  --text-2: #71859A;
  --muted: #8295A8;
  --success: #45A870;
  --warn: #D99B36;
  --warning: #D99B36;
  --danger: #D46A6A;
  --shadow: 0 2px 8px rgba(54, 116, 163, .07);
  --font-family: var(--wb-type-family);
}
body.wb {
  background: var(--wb-bg); color: var(--wb-text);
  font-family: var(--wb-type-family) !important;
  font-size: var(--wb-type-body) !important;
  line-height: 1.5;
}
body.wb h1 { font-size:24px !important; font-weight:600 !important; color:#315A7D !important; line-height:1.3; }
body.wb h2 { font-size:var(--wb-type-page-title) !important; font-weight:600 !important; color:#315A7D !important; line-height:1.3; }
body.wb h3 { font-size:var(--wb-type-card-title) !important; font-weight:600 !important; color:#315A7D !important; line-height:1.35; }
body.wb h4,
body.wb h5,
body.wb h6,
body.wb .h6 { font-size:var(--wb-type-card-title) !important; font-weight:600 !important; color:#315A7D !important; line-height:1.35; }
body.wb .modal-title { font-size:var(--wb-type-modal-title) !important; font-weight:600 !important; color:#315A7D !important; }
body.wb .app-card > strong:first-child,
body.wb .app-card > .d-flex > strong:first-child,
body.wb .card-title { font-size:var(--wb-type-card-title) !important; font-weight:600 !important; color:#315A7D !important; }
body.wb label,
body.wb .form-label { font-size:var(--wb-type-label) !important; font-weight:500; color:#5F758A !important; }
body.wb .form-control,
body.wb .form-select,
body.wb .btn,
body.wb .app-tab,
body.wb .nav-link,
body.wb .dropdown-item { font-size:var(--wb-type-body) !important; font-family:var(--wb-type-family) !important; }
body.wb .table { font-size:var(--wb-type-table) !important; }
body.wb .table th { font-size:var(--wb-type-label) !important; }
body.wb .table td { font-size:var(--wb-type-table) !important; }
body.wb small,
body.wb .small,
body.wb .text-sub { font-size:var(--wb-type-label) !important; }
body.wb code,
body.wb pre,
body.wb kbd { font-family:Consolas, "SFMono-Regular", Menlo, monospace; font-size:var(--wb-type-label); }
.app-tabs {
  position: sticky; top: 0; z-index: 20;
  min-height: 43px; padding: 0 14px;
  border-bottom: 1px solid #D6E8F5;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(66, 132, 178, .045);
}
.app-tab { color:#6E8296; border-bottom-width:2px; transition:color .15s, background .15s; }
.app-tab:hover { color:var(--wb-primary-dark); background:#F2F9FE; }
.app-tab.active { color:var(--wb-primary-dark); background:#ECF7FE; }
.table-responsive > table > thead > tr > th { top:0; }
.table-responsive[style*="max-height"] > table > thead > tr > th {
  top:0;
}
.calc-table-wrap > table > thead > tr > th { top:0; }
.modal .table-responsive > table > thead > tr > th,
.modal-body[style*="overflow"] > table > thead > tr > th { top:0; }
.app-pane { padding: 18px 20px 24px; }
/* 页面级明细表：外层滚动时停在视口顶部，内部滚动时由 thead 继续吸顶。 */
.app-pane > .app-card > .table-responsive,
.app-pane > .table-responsive {
  position: sticky;
  top: 0;
  z-index: 18;
  background: #FFF;
}
.app-card, .card {
  border: 1px solid #D9E8F3; border-radius: 7px; background:#fff;
  box-shadow: 0 2px 7px rgba(54, 116, 163, .05);
}
.app-card { padding: 16px 17px; margin-bottom: 14px; }
.app-card > strong:first-child,
.app-card > .d-flex > strong:first-child { color:#315A7D; }
.app-table {
  --bs-table-border-color:#DFEBF4;
  --bs-table-hover-bg:#F5FAFE;
  vertical-align: middle;
  width: max-content !important;
  max-width: 100% !important;
  table-layout: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.wb table { margin-left:auto !important; margin-right:auto !important; }
.app-table th { min-width: 48px; white-space: nowrap; }
.app-table td { min-width: 48px; white-space: normal; }
.app-table thead th,
.table-responsive > table > thead > tr > th {
  background:#EAF5FC !important;
  color:#45647F !important;
  font-weight:600;
  border-color:#D6E7F3 !important;
}
.app-table td { border-color:#E2EDF5; }
.app-table tbody tr:hover > td { background:#F6FBFE; }
/* 明细表列宽：默认按内容撑开；公司/客户/单位及检测项目保留换行空间。 */
.app-table.wb-auto-cols {
  width: max-content !important;
  min-width: 100% !important;
  max-width: none !important;
  table-layout: auto !important;
}
.app-table.wb-auto-cols th.wb-col-nowrap,
.app-table.wb-auto-cols td.wb-col-nowrap {
  width: auto !important;
  min-width: 0;
  white-space: nowrap !important;
}
.app-table.wb-auto-cols th.wb-col-wrap,
.app-table.wb-auto-cols td.wb-col-wrap {
  white-space: normal !important;
}
.app-table.wb-auto-cols th.wb-col-wrap.wb-col-party,
.app-table.wb-auto-cols td.wb-col-wrap.wb-col-party { min-width: 220px; }
.app-table.wb-auto-cols th.wb-col-wrap.wb-col-items,
.app-table.wb-auto-cols td.wb-col-wrap.wb-col-items { width: 240px; min-width: 200px; }
.app-table.wb-cols-manual {
  min-width: 0 !important;
  max-width: none !important;
  table-layout: fixed !important;
}
.app-table.wb-cols-manual td.wb-col-nowrap {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 「检测项目」列：列宽被手工缩窄后，内容改为省略号显示（鼠标悬停由单元格内的 items 提示显示全文）；
   同时强制单元格内的长文本容器跟随列宽（2026-09-30 用户要求：不要与右侧单元格文字重叠）。 */
.app-table.wb-cols-manual td.wb-col-items {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.app-table td.wb-col-items > div,
.app-table td.wb-col-wrap.wb-col-items > div {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.wb-col-resizer {
  position: absolute;
  z-index: 36;
  top: 0;
  right: -4px;
  width: 9px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
}
.wb-col-resizer::after {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: 1px;
  background: transparent;
  transition: background .12s;
}
/* 显式标注 data-col-resize 的表（如补录台账）同样支持拖动列宽：表头需可定位，悬停时显示手柄 */
table[data-col-resize] > thead > tr > th { position: relative; }
.app-table thead th:hover > .wb-col-resizer::after,
table[data-col-resize] thead th:hover > .wb-col-resizer::after,
.wb-col-resizer:active::after { background: #69A9D4; }
body.wb-col-resizing,
body.wb-col-resizing * { cursor: col-resize !important; user-select: none !important; }
@media (pointer: coarse) {
  .wb-col-resizer { right: -6px; width: 14px; }
  .wb-col-resizer::after { left: 6px; }
}
@media print {
  .wb-col-resizer { display: none !important; }
}
.btn { border-radius:5px; font-weight:500; }
.btn-sm { padding:4px 10px; }
.btn-wb { background:#4FA8E8; border-color:#4FA8E8; box-shadow:0 1px 3px rgba(50,133,194,.16); }
.btn-wb:hover,.btn-wb:focus { background:#3285C2; border-color:#3285C2; }
.btn-light,.btn-outline-secondary {
  background:#fff; border-color:#CDE0ED; color:#46657F;
}
.btn-light:hover,.btn-light:focus,.btn-outline-secondary:hover {
  background:#F2F9FE; border-color:#8EC2E6; color:#3285C2;
}
.form-control,.form-select {
  border-color:#CDE0ED; border-radius:5px; color:#33475B; background-color:#fff;
}
.form-control:focus,.form-select:focus {
  border-color:#74B9E8; box-shadow:0 0 0 2px rgba(79,168,232,.14);
}
.form-label { color:#5F758A; }
.modal-content { border:1px solid #D5E5F1; border-radius:8px; box-shadow:0 18px 48px rgba(55,103,139,.13); overflow:hidden; }
.modal-header { background:#F7FCFF; border-bottom:1px solid #DCEAF4; }
.modal-footer { background:#FBFDFF; border-top:1px solid #DCEAF4; }
.dropdown-menu { border-color:#D5E5F1; border-radius:6px; box-shadow:0 10px 28px rgba(55,103,139,.1); }
.badge { font-weight:500; }
.wb-msg { color:#C05D5D; }
.text-sub { color:#71859A !important; }
.table-responsive { border-radius:6px; }
.app-about { border-top:1px solid #DCEAF4; background:#F8FCFF; }
.wb-pager {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  margin-top: 10px; color: #71859A; font-size: 12px; flex-wrap: wrap;
}
.wb-pager button {
  border: 1px solid #CDE0ED; border-radius: 5px; background: #FFF;
  color: #46657F; padding: 3px 10px; font-size: 12px;
}
.wb-pager button:hover:not(:disabled) { background: #F2F9FE; color: #3285C2; }
.wb-pager button:disabled { opacity: .45; cursor: not-allowed; }

/* ===== 检测记录台账：固定高度滚动、顶部吸附表头、按内容展开关键列 ===== */
.ss-records-wrap {
  overflow: auto;
  border: 1px solid #E1EDF5;
}
.ss-records-table { min-width: 1960px; }
.ss-records-table th:nth-child(3),
.ss-records-table td:nth-child(3) {
  min-width: 260px;
  white-space: nowrap;
}
.ss-records-table th:nth-child(4),
.ss-records-table td:nth-child(4) { min-width: 140px; }
.ss-records-table th:nth-child(6),
.ss-records-table td:nth-child(6),
.ss-records-table th:nth-child(7),
.ss-records-table td:nth-child(7),
.ss-records-table th:nth-child(8),
.ss-records-table td:nth-child(8) {
  min-width: 150px;
  white-space: nowrap;
}
.ss-records-table td:nth-child(5) { min-width: 260px; }
.ss-records-table thead th {
  position: sticky;
  top: 0;
  z-index: 12;
}

/* ===== 全模块帮助页统一排版 ===== */
#paneHelp {
  --help-title: #315A7D;
  --help-heading: #3D6788;
  --help-body: #3D5368;
  --help-sub: #70859A;
  --help-accent: #5DAFE5;
  --help-accent-soft: #EAF5FC;
  --help-line: #DFEBF4;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  color: var(--help-body);
  font-family: var(--wb-type-family) !important;
  font-size: var(--wb-type-body) !important;
  line-height: 1.72 !important;
}
#paneHelp > h5,
#paneHelp > h6 {
  margin: 0 0 14px !important;
  padding: 0 0 10px 13px !important;
  border-bottom: 1px solid var(--help-line);
  border-left: 4px solid var(--help-accent);
  color: var(--help-title) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}
#paneHelp > h5:first-child,
#paneHelp > h6:first-child {
  font-size: var(--wb-type-page-title) !important;
}
#paneHelp > div:not(.app-card) {
  margin-bottom: 14px;
  padding: 20px 22px;
  border: 1px solid var(--help-line);
  border-radius: 7px;
  background: #FFF;
  box-shadow: 0 1px 4px rgba(54, 116, 163, .04);
}
#paneHelp > .app-card > h6:first-child,
#paneHelp > div:not(.app-card) > h6:first-child {
  margin: 0 0 14px !important;
  padding: 0 0 9px 11px !important;
  border-bottom: 1px solid var(--help-line);
  border-left: 3px solid var(--help-accent);
  color: var(--help-title) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}
#paneHelp > .app-card:first-child > h6:first-child,
#paneHelp > div:not(.app-card) > h6:first-child {
  padding-left: 13px !important;
  border-left-width: 4px;
  font-size: var(--wb-type-page-title) !important;
  line-height: 1.35 !important;
}
#paneHelp h1,
#paneHelp h2,
#paneHelp h3,
#paneHelp h4 {
  margin: 18px 0 9px !important;
  color: var(--help-title) !important;
  font-family: var(--wb-type-family) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}
#paneHelp p,
#paneHelp li,
#paneHelp div:not(.app-card) {
  font-family: var(--wb-type-family) !important;
  font-size: var(--wb-type-body) !important;
  line-height: 1.72 !important;
}
#paneHelp p {
  margin: 0 0 10px !important;
  color: var(--help-body);
}
#paneHelp p > b:only-child,
#paneHelp p > strong:only-child {
  display: block;
  margin: 0 0 5px;
  color: var(--help-heading);
  font-size: 15px;
  font-weight: 600;
}
#paneHelp p:has(> b:only-child),
#paneHelp p:has(> strong:only-child) {
  margin: 17px 0 9px !important;
  padding-left: 10px;
  border-left: 3px solid #A9D7F2;
}
#paneHelp .app-card > strong {
  display: block;
  margin: 17px 0 7px;
  padding-left: 10px;
  border-left: 3px solid #A9D7F2;
  color: var(--help-heading);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}
#paneHelp .app-card > strong:first-child {
  margin-top: 0;
}
#paneHelp ul,
#paneHelp ol {
  margin: 0 0 14px !important;
  padding: 0 !important;
  list-style: none !important;
}
#paneHelp > ul,
#paneHelp > ol {
  display: grid;
  gap: 10px;
}
#paneHelp li {
  position: relative;
  min-width: 0;
  padding: 10px 0 10px 24px;
  border-bottom: 1px solid #E7F0F6;
  color: var(--help-body);
}
#paneHelp li:last-child {
  border-bottom: 0;
}
#paneHelp li::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9FD1F1;
}
#paneHelp > ul > li {
  padding: 14px 16px 14px 33px;
  border: 1px solid var(--help-line);
  border-left: 3px solid var(--help-accent);
  border-radius: 6px;
  background: #FFF;
  box-shadow: 0 1px 3px rgba(54, 116, 163, .035);
}
#paneHelp > ul > li::before {
  top: 21px;
  left: 15px;
}
#paneHelp li > b:first-child,
#paneHelp li > strong:first-child {
  display: block;
  margin: 0 0 5px;
  color: var(--help-heading);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
}
#paneHelp ol {
  counter-reset: help-step;
}
#paneHelp ol > li {
  counter-increment: help-step;
  padding-left: 42px;
}
#paneHelp ol > li::before {
  content: counter(help-step);
  top: 10px;
  left: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid #B9DDF4;
  border-radius: 50%;
  background: var(--help-accent-soft);
  color: #2F76A8;
  font-size: 12px;
  font-weight: 600;
}
#paneHelp b,
#paneHelp strong {
  color: var(--help-heading);
  font-weight: 600;
}
#paneHelp .text-sub,
#paneHelp small,
#paneHelp .small {
  color: var(--help-sub) !important;
  font-size: var(--wb-type-label) !important;
  line-height: 1.65 !important;
}
#paneHelp code {
  display: inline-block;
  margin: 0 2px;
  padding: 1px 5px;
  border: 1px solid #D7E9F5;
  border-radius: 4px;
  background: #F2F8FC;
  color: #2F6E9D;
  font-family: Consolas, "SFMono-Regular", Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
}
#paneHelp a {
  color: #3285C2;
  text-decoration: none;
}
#paneHelp a:hover {
  text-decoration: underline;
}
#paneHelp .app-card {
  margin-bottom: 14px;
  padding: 20px 22px;
  border-color: #A9C3DE;   /* 区域醒目边框（2026-10-03 用户要求）：帮助页签的说明卡同样用醒目边框 */
  border-radius: 7px;
  box-shadow: 0 1px 4px rgba(54, 116, 163, .04);
}
#paneHelp .app-card + .app-card {
  margin-top: 14px;
}
#paneHelp > .text-sub:last-child,
#paneHelp .app-card > .text-sub:last-child {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--help-line);
}

@media (max-width: 575px) {
  .app-pane { padding: 12px 10px 18px; }
  .app-card { padding: 13px 12px; }
  #paneHelp > h5,
  #paneHelp > h6 { font-size: 18px !important; }
  #paneHelp .app-card { padding: 15px 14px; }
  #paneHelp > ul > li { padding: 12px 12px 12px 28px; }
  #paneHelp > ul > li::before { left: 11px; }
}