/* B01 管理端「工作手册」页面 — 第一阶段样式 */
/* 延续管理端风格：浅灰背景 / 白色卡片 / 黑白灰 / 大圆角 / 无彩色元素 */

/* 页面容器：工作手册采用「左侧目录固定 + 右侧阅读区独立滚动」。
   - 本容器自身不滚动（overflow: hidden），外层页面不产生第二套纵向滚动；
   - 高度由 flex 链按浏览器可视高度计算（.admin-content → 本容器 → .wm-page → .wm-layout → .wm-reading），
     窗口高度变化时自动跟随，不写死像素高度。 */
#adminPageWorkManual {
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.wm-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ---- 目录卡 + 阅读区布局 ----
   固定目录 + 独立阅读：
   - align-items 默认 stretch：左侧目录卡与右侧阅读卡等高、顶部严格对齐；
   - 左侧目录固定在视觉位置（外层无滚动，不会随右侧正文上移消失）；
   - 右侧阅读卡高度 = 视口高度 - 顶部间距(28px) - 底部间距(28px)。 */
.wm-layout {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 20px;
}

/* ---- 左侧白色目录卡片 ----
   高度与右侧阅读卡一致（stretch），不随右侧文章长度变化；
   内容超出可视高度时才允许内部滚动，当前目录内容未超出时不出现滚动条。 */
.wm-menu-card {
  width: 282px;
  flex-shrink: 0;
  padding: 24px 24px 28px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  overflow-y: auto;
}

/* 章节目录（当前岗位标题 + 章节项；岗位切换由左侧菜单「工作手册」完成） */
.wm-menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wm-group {
  border-radius: 12px;
}

.wm-group-header {
  width: 100%;
  height: 36px;
  padding: 0 14px 0 22px;
  border-radius: 10px;
  background: #ecece9;
  color: #55554f;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
}

.wm-group-header .wm-arrow {
  font-size: 10px;
  opacity: 0.75;
  transition: transform 0.2s ease;
}

.wm-group.open .wm-group-header .wm-arrow {
  transform: rotate(180deg);
}

.wm-submenu {
  display: flex;
  flex-direction: column;
  padding: 8px 0 0 22px;
  gap: 2px;
}

.wm-submenu-item {
  position: relative;
  display: block;
  width: 100%;
  padding: 8px 0;
  text-align: left;
  font-size: 15px;
  color: #40403d;
  background: transparent;
}

.wm-submenu-item.active {
  font-weight: 700;
  color: #000;
}

.wm-submenu-item.active::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: #355944;
}

/* ---- 右侧白色阅读卡片 ----
   独立纵向滚动：长文章只在卡内滚动，左侧目录保持固定；
   高度由 flex 链按浏览器可视高度计算，窗口高度变化时自动跟随；
   外层页面不产生第二套纵向滚动。 */
.wm-reading {
  flex: 1;
  min-width: 0;
  padding: 28px 32px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  overflow-y: auto;
}

/* 正文阅读宽度：正文靠左排列，右侧保留自然留白，不横向铺满整张白色卡片 */
.wm-doc {
  max-width: 820px;
}

/* 空态 */
.wm-reading-empty {
  padding: 20px 0;
}

.wm-empty-title {
  font-size: 20px;
  font-weight: 700;
  color: #1b1b1a;
}

.wm-empty-desc {
  margin-top: 10px;
  font-size: 15px;
  color: #6a6a66;
}

/* 正文 */
/* 路径：正文最顶部，小字号、灰色、不抢标题视觉 */
.wm-doc-location {
  margin: 0 0 14px;
  font-size: 14px;
  color: #8a8a84;
}

.wm-doc-title {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  color: #111;
  letter-spacing: 0.5px;
}

.wm-doc-section {
  margin-top: 30px;
}

.wm-doc-h {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #1b1b1a;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.wm-doc-p {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.9;
  color: #333;
}

/* 做到什么程度：每篇末尾的独立浅灰重点区，比普通正文更醒目 */
.wm-standard {
  margin-top: 40px;
  padding: 24px 26px 26px;
  border-radius: 18px;
  background: #f4f4f1;
}

.wm-standard-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #1b1b1a;
}

/* ---------------------------------------------------------------------------
   阅读态右上角「编辑」按钮（仅管理端显示；克制，不抢正文视觉）
--------------------------------------------------------------------------- */
.wm-reading-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 0;
  overflow: visible;
  display: flex;
  justify-content: flex-end;
}

.wm-edit-btn {
  height: 30px;
  margin: -6px 0 0;
  padding: 0 14px;
  border-radius: 9px;
  border: 1px solid #d9d9d4;
  background: #fff;
  color: #55554f;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.wm-edit-btn:hover {
  border-color: #355944;
  color: #1b1b1a;
}

/* ---------------------------------------------------------------------------
   岗位标准正文 · 统一内容容器
   阅读态（.wm-richtext）与 TinyMCE 编辑器 iframe（body.wm-tinymce）共用同一套排版。
   正文以富文本 HTML 保存，阅读直接渲染同一份 HTML，保证「编辑看到的效果 = 保存后的显示效果」。
--------------------------------------------------------------------------- */
.wm-richtext,
body.wm-tinymce {
  font-size: 15px;
  line-height: 1.9;
  color: #333;
  word-break: break-word;
}

.wm-richtext > *:first-child,
body.wm-tinymce > *:first-child {
  margin-top: 0;
}

.wm-richtext p,
body.wm-tinymce p {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.9;
  color: #333;
}

.wm-richtext h2,
body.wm-tinymce h2 {
  margin: 30px 0 0;
  font-size: 17px;
  font-weight: 700;
  color: #1b1b1a;
}

/* 重点块：核心结论 / 引用（浅灰圆角，字号明显大于普通正文） */
.wm-richtext blockquote,
body.wm-tinymce blockquote {
  margin: 24px 0 0;
  padding: 22px 26px;
  border: none;
  border-radius: 18px;
  background: #f4f4f1;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.7;
  color: #1b1b1a;
}

.wm-richtext blockquote p,
body.wm-tinymce blockquote p {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

.wm-richtext blockquote p + p,
body.wm-tinymce blockquote p + p {
  margin-top: 12px;
}

/* 重点块：浅灰圆角卡片（顶部核心结论 / 重点提醒 / 强调段落）。
   与引用块同底色、同圆角、同内边距；字号继承正文排版（15px），不放大不加粗。
   编辑态（body.wm-tinymce）与阅读态（.wm-richtext）共用同一规则 → 所见即所得。 */
.wm-richtext .wm-focus,
body.wm-tinymce .wm-focus {
  margin: 24px 0 0;
  padding: 22px 26px;
  border-radius: 18px;
  background: #f4f4f1;
  font-size: 15px;
  line-height: 1.9;
  color: #333;
}

.wm-richtext .wm-focus > *:first-child,
body.wm-tinymce .wm-focus > *:first-child {
  margin-top: 0;
}

.wm-richtext .wm-focus p,
body.wm-tinymce .wm-focus p {
  margin: 12px 0 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.wm-richtext ul,
.wm-richtext ol,
body.wm-tinymce ul,
body.wm-tinymce ol {
  margin: 12px 0 0;
  padding-left: 22px;
}

.wm-richtext ul,
body.wm-tinymce ul {
  list-style: disc;
}

.wm-richtext ol,
body.wm-tinymce ol {
  list-style: decimal;
}

.wm-richtext li,
body.wm-tinymce li {
  margin: 8px 0 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.9;
  color: #333;
}

.wm-richtext li::marker,
body.wm-tinymce li::marker {
  color: #b0b0a8;
}

.wm-richtext li p,
body.wm-tinymce li p {
  margin: 0;
}

.wm-richtext strong,
body.wm-tinymce strong {
  font-weight: 700;
  /* 不在此设 color：否则会覆盖用户在富文本里设置的 span 颜色（加粗 + 自定义颜色组合失效） */
}

.wm-richtext a,
body.wm-tinymce a {
  /* color 同样由继承/内联决定，保证用户设置的链接文字颜色优先生效 */
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 正文插图：最大宽度不超出正文容器、高度自适应，不拉伸变形、不产生横向滚动。
   仅作用于工作手册正文作用域（阅读态 .wm-richtext 与编辑态 body.wm-tinymce 共用），不影响全站图片。
   编辑态拖动调整尺寸产生内联 width/height 时按内联值显示，max-width:100% 仍保证不撑破容器。 */
.wm-richtext img,
body.wm-tinymce img {
  max-width: 100%;
  height: auto;
  margin: 20px 0 0;
  border-radius: 8px;
}

/* 标准块：做到什么程度（浅灰圆角盒子，标题 + 01/02 编号条目） */
.wm-richtext .wm-standard ol,
body.wm-tinymce .wm-standard ol {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: wm-std;
}

.wm-richtext .wm-standard li,
body.wm-tinymce .wm-standard li {
  list-style: none;
  counter-increment: wm-std;
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin-top: 14px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  color: #333;
}

.wm-richtext .wm-standard li:first-child,
body.wm-tinymce .wm-standard li:first-child {
  margin-top: 0;
}

.wm-richtext .wm-standard li::before,
body.wm-tinymce .wm-standard li::before {
  content: counter(wm-std, decimal-leading-zero);
  flex-shrink: 0;
  min-width: 24px;
  font-size: 14px;
  font-weight: 700;
  color: #8a8a84;
  letter-spacing: 0.5px;
}

.wm-richtext .wm-standard .wm-standard-title,
.wm-richtext .wm-standard > h2,
body.wm-tinymce .wm-standard .wm-standard-title,
body.wm-tinymce .wm-standard > h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #1b1b1a;
}

.wm-richtext .wm-standard li p,
body.wm-tinymce .wm-standard li p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  font-weight: inherit;
}

/* ---------------------------------------------------------------------------
   编辑态外壳：动作条（取消/保存）+ 提示条 + TinyMCE
--------------------------------------------------------------------------- */
.wm-richtext-editor {
  display: flex;
  flex-direction: column;
}

.wm-ed-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.wm-ed-actions-hint {
  margin-right: auto;
  font-size: 13px;
  color: #8a8a84;
}

.wm-ed-actions button {
  height: 32px;
  padding: 0 16px;
  border-radius: 9px;
  border: 1px solid #d9d9d4;
  background: #fff;
  color: #44443f;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.wm-ed-actions button:hover {
  border-color: #355944;
  color: #1b1b1a;
}

.wm-ed-actions button.wm-ed-cancel {
  color: #8a8a84;
}

.wm-ed-actions button.wm-ed-save {
  background: #355944;
  border-color: #355944;
  color: #fff;
  font-weight: 600;
}

.wm-ed-actions button.wm-ed-save:disabled {
  opacity: 0.45;
  cursor: default;
}

/* 顶部提示条：保存中 / 保存失败 / 取消确认 */
.wm-ed-banner {
  margin-top: 0;
  margin-bottom: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.wm-ed-banner-info {
  background: #f0f0ec;
  color: #55554f;
}

.wm-ed-banner-error {
  background: #fbeeec;
  color: #b33a2c;
}

.wm-ed-banner-confirm {
  background: #f4f4f1;
  color: #333;
  border: 1px solid #e2e2de;
}

.wm-ed-banner-text {
  flex: 1;
}

.wm-ed-banner button {
  height: 30px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid #d9d9d4;
  background: #fff;
  color: #44443f;
  font-size: 13px;
  cursor: pointer;
}

.wm-ed-banner button.wm-ed-confirm-yes {
  border-color: #b33a2c;
  color: #b33a2c;
}

/* TinyMCE 界面适配：黑白灰、圆角、克制（默认 oxide 皮肤微调） */
.tox-tinymce {
  border: 1px solid #e2e2de !important;
  border-radius: 14px;
  overflow: hidden;
}

.tox .tox-toolbar,
.tox .tox-toolbar__primary,
.tox .tox-toolbar-overlord,
.tox .tox-editor-header {
  background: #fafaf8;
  box-shadow: none;
}

.tox .tox-toolbar__group {
  border-right: 1px solid #e8e8e4;
}

.tox .tox-tbtn {
  color: #44443f;
  border-radius: 8px;
}

.tox .tox-tbtn:hover {
  background: #efefec;
}

.tox .tox-tbtn--enabled {
  background: #e6e6e1;
}

.tox .tox-tbtn svg {
  fill: #44443f;
}

.tox .tox-statusbar {
  border-top: 1px solid #e2e2de;
  background: #fafaf8;
  color: #8a8a84;
}

/* 保存成功轻提示 */
.wm-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  padding: 9px 18px;
  border-radius: 10px;
  background: #355944;
  color: #fff;
  font-size: 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

/* ===================================================================
   移动端响应式（≤768px）
   桌面端（≥769px）现有布局、尺寸、滚动逻辑全部保持不变。
   本区域仅当视口 ≤768px 时生效：
   - 左侧目录默认隐藏，改为「目录」按钮打开独立抽屉；
   - 正文阅读区单栏占满可视宽度，独立纵向滚动；
   - 选择目录项后自动收起抽屉并显示对应正文；
   - 第一阶段移动端仅阅读（编辑按钮隐藏，编辑入口兜底拦截）。
   不使用 transform: scale() 或整体缩小页面。
   =================================================================== */
/* 目录按钮与抽屉遮罩：桌面端始终隐藏（不影响现有布局） */
.wm-dir-btn,
.wm-dir-backdrop {
  display: none;
}

@media (max-width: 768px) {
  .wm-page {
    position: relative;
  }

  /* 目录卡：改为左侧抽屉，默认隐藏在屏幕外 */
  .wm-menu-card {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1200;
    width: min(320px, 84vw);
    max-width: 320px;
    padding: 20px 20px 28px;
    border-radius: 0 22px 22px 0;
    box-shadow: none;
    transform: translateX(-100%);
    transition: transform 0.28s ease;
  }
  .wm-page.wm-dir-open .wm-menu-card {
    transform: translateX(0);
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.2);
  }

  /* 抽屉遮罩：点按任意处关闭 */
  .wm-dir-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(20, 20, 18, 0.38);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
  }
  .wm-page.wm-dir-open .wm-dir-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* 布局：单栏，无左右分栏 */
  .wm-layout {
    display: block;
  }

  /* 阅读区：占满可视宽度，独立纵向滚动，无横向滚动。
     必须约束自身高度（height:100%），否则块级布局下内容溢出会被外层
     overflow:hidden 直接裁剪，长文无法滚动。 */
  .wm-reading {
    height: 100%;
    padding: 14px 16px 28px;
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .wm-doc {
    max-width: 100%;
  }

  /* 顶部工具栏：右上角放「目录」按钮（桌面端原「编辑」按钮位置），左侧让位给汉堡按钮 */
  .wm-reading-topbar {
    gap: 8px;
  }

  /* 第一阶段移动端仅阅读：隐藏「编辑」 */
  .wm-edit-btn {
    display: none;
  }

  /* 目录按钮 */
  .wm-dir-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    margin: -8px 0 0;
    padding: 0 16px;
    border-radius: 11px;
    border: 1px solid #d9d9d4;
    background: #fff;
    color: #1b1b1a;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    cursor: pointer;
  }
  .wm-dir-btn:active {
    background: #f2f2ef;
  }

  /* 正文排版：字号 / 重点块 / 标准块 / 列表全部按手机宽度自动换行 */
  .wm-richtext,
  body.wm-tinymce {
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .wm-richtext img,
  .wm-richtext table {
    max-width: 100%;
  }
  .wm-richtext .wm-focus,
  body.wm-tinymce .wm-focus,
  .wm-richtext blockquote,
  body.wm-tinymce blockquote {
    padding: 16px 18px;
  }
  .wm-standard {
    padding: 18px 18px 20px;
  }

  /* 标题字号略微收窄，避免大字号溢出 */
  .wm-doc-title {
    font-size: 24px;
  }
  .wm-doc-location {
    font-size: 13px;
  }

}

/* ================= 本章学习小测（工作手册正文底部，2026-09 新增） ================= */
.wq-card {
  margin: 18px 0 6px;
  padding: 18px 22px;
  background: #fdfcfb;
  border: 1px solid #ece7df;
  border-radius: 14px;
}
.wq-head { margin-bottom: 8px; }
.wq-title-line { display: flex; align-items: center; gap: 10px; }
.wq-title { font-size: 16px; color: #25372f; margin: 0; }
.wq-desc { margin: 8px 0 0; font-size: 13px; color: #7c7c80; line-height: 1.65; }
.wq-chip {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}
.wq-chip.none { color: #8e8e93; background: #f4f7f3; border: 1px solid #e5ece4; }
.wq-chip.learning { color: #4a5f6b; background: #eef4f6; border: 1px solid #d8e4e9; }
.wq-chip.pending { color: #8a5f2a; background: #f9f3e9; border: 1px solid #ecdfc9; }
.wq-chip.failed { color: #8c4444; background: #f9eeee; border: 1px solid #ecd9d9; }
.wq-chip.passed { color: #55684a; background: #f3f6ef; border: 1px solid #dfe7d8; }
.wq-attempt { margin: 6px 0 0; font-size: 12px; color: #aeaeb2; }
.wq-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.wq-btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 600;
  border-radius: 999px;
  padding: 10px 20px;
  transition: background 0.15s ease, color 0.15s ease;
}
.wq-btn.primary { color: #fff; background: #355944; }
.wq-btn.primary:hover { background: #455c4e; }
.wq-btn.primary:active { background: #355944; }
.wq-btn.ghost { color: #25372f; background: #eef3ee; font-weight: 500; }
.wq-btn.ghost:hover { background: #e7e7ea; }
.wq-btn.ghost:active { background: #dddee2; }
.wq-btn:disabled,
.wq-btn.disabled {
  cursor: default;
  opacity: 0.55;
  pointer-events: none;
}
.wq-loading { padding: 8px 2px; font-size: 13px; color: #aeaeb2; }
.wq-noquiz { margin: 4px 0; font-size: 13px; color: #8e8e93; }
.wq-pending-tip { margin: 8px 0 0; font-size: 13px; color: #8a5f2a; line-height: 1.6; }
.wq-passed-tip { margin: 8px 0 0; font-size: 13px; color: #55684a; line-height: 1.6; }
.wq-reason {
  margin-top: 10px;
  padding: 10px 12px;
  background: #f9eeee;
  border: 1px solid #ecd9d9;
  border-radius: 10px;
}
.wq-reason-label { display: block; font-size: 12px; color: #b97a7a; margin-bottom: 4px; }
.wq-reason p { margin: 0; font-size: 13px; color: #8c4444; line-height: 1.6; }
.wq-form { margin-top: 8px; }
.wq-item { padding: 20px 2px 26px; border-bottom: 1px solid #f0ede7; }
.wq-item:last-of-type { border-bottom: 0; padding-bottom: 22px; }
.wq-q-text { margin: 0 0 12px; font-size: 14px; color: #25372f; line-height: 1.65; }
.wq-q-text b { color: #7c6a3a; }
.wq-answer {
  display: block;
  width: 100%;
  height: 200px;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  resize: none;
  font: inherit;
  font-size: 14px;
  color: #25372f;
  line-height: 1.7;
  background: #fff;
  border: 1px solid #d9d9de;
  border-radius: 12px;
  padding: 14px 16px;
}
.wq-answer:focus { outline: none; border-color: #6e6e73; box-shadow: 0 0 0 3px rgba(29, 29, 31, 0.06); }
.wq-answer::placeholder { color: #c7c7cc; }
/* 窄屏：答题框高度适当降低，仍保持整宽、不可拖拽、不横向溢出 */
@media (max-width: 768px) {
  .wq-answer { height: 170px; padding: 12px 14px; }
}

/* 工作手册内二次确认 / 提交记录浮层：fixed 覆盖视口，页面中央单实例 modal */
.wq-mask {
  position: fixed;
  inset: 0;
  z-index: 9000;
  margin: 0;
  background: rgba(0, 0, 0, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: auto;
}
.wq-dialog {
  width: 100%;
  max-width: min(460px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
  padding: 20px 22px;
}
.wq-dialog-lg { max-width: 720px; }
.wq-dialog h4 { margin: 0 0 8px; font-size: 16px; color: #25372f; }
.wq-dialog p { margin: 4px 0; font-size: 13.5px; color: #6d6d71; line-height: 1.6; }
.wq-dialog-btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.wq-h-list { max-height: 60vh; overflow: auto; }
.wq-h-row { padding: 12px 0; border-bottom: 1px solid #eef3ee; }
.wq-h-row:last-child { border-bottom: 0; }
.wq-h-meta { font-size: 12.5px; color: #6d6d71; margin-bottom: 8px; }
.wq-h-reason { color: #8c4444 !important; background: #f9eeee; border-radius: 8px; padding: 6px 10px; margin: 0 0 8px !important; }
.wq-h-q { padding: 4px 0 8px; }
.wq-h-q-text { font-size: 13px !important; color: #25372f !important; margin-bottom: 6px !important; }
.wq-h-a {
  font-size: 12.5px;
  color: #455c4e;
  background: #fbfbfa;
  border: 1px solid #edf2ec;
  border-radius: 8px;
  padding: 8px 10px;
  white-space: pre-wrap;
  line-height: 1.6;
}

/* ===========================================================================
   5S考核（员工本人岗位「5S现场标准」章节正文底部；完全复用学习体系黑白灰视觉）
   =========================================================================== */
.s5q-card {
  margin: 18px 0 6px;
  padding: 18px 22px;
  background: #fdfcfb;
  border: 1px solid #ece7df;
  border-radius: 14px;
}
.s5q-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.s5q-title {
  font-size: 16px;
  font-weight: 600;
  color: #25372f;
}
.s5q-subtle { font-size: 12px; color: #aeaeb2; }
.s5q-chip-tag {
  font-size: 12px;
  color: #6d6d71;
  background: #eef3ee;
  border: 1px solid #e5ece4;
  border-radius: 999px;
  padding: 3px 10px;
}
.s5q-meta { margin: 10px 0 0; font-size: 13px; color: #7c7c80; }
.s5q-ch-line {
  margin: 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.s5q-ch {
  display: inline-flex;
  padding: 4px 12px;
  font-size: 12.5px;
  color: #455c4e;
  background: #eef3ee;
  border-radius: 999px;
}
.s5q-chs-note { font-size: 12.5px; color: #aeaeb2; }
.s5q-rule {
  margin-top: 12px;
  padding: 12px 14px;
  background: #f7f7f8;
  border: 1px solid #efeff1;
  border-radius: 10px;
}
.s5q-rule-title {
  font-size: 12px;
  color: #6d6d71;
  font-weight: 600;
  margin-bottom: 6px;
  letter-spacing: 0.03em;
}
.s5q-rule-line { font-size: 13px; color: #455c4e; line-height: 1.7; }
.s5q-pend {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.s5q-pend-text { font-size: 12.5px; color: #6d6d71; }
.s5q-last-title { margin-top: 14px; font-size: 13px; color: #6d6d71; font-weight: 600; }
.s5q-end-note { margin-top: 10px; font-size: 12.5px; color: #aeaeb2; line-height: 1.6; }
.s5q-fail { padding: 4px 2px; font-size: 13px; color: #8c4444; line-height: 1.6; }
/* 管理端浏览岗位手册时的考核/小测入口预览提示（管理端不代考） */
.wm-mgmt-note {
  margin-top: 10px;
  padding: 8px 12px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #55684a;
  background: #f3f6ef;
  border: 1px solid #e0e9d7;
  border-radius: 8px;
}

.s5q-count {
  font-size: 12.5px;
  color: #6d6d71;
  background: #eef3ee;
  border: 1px solid #e5ece4;
  border-radius: 999px;
  padding: 3px 10px;
}
.s5q-progress { margin: 12px 0 0; font-size: 13px; color: #25372f; font-weight: 600; }
.s5q-steps { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.s5q-step {
  font-size: 12.5px;
  color: #aeaeb2;
  background: #eef3ee;
  border: 1px solid #e5ece4;
  border-radius: 999px;
  padding: 4px 10px;
  line-height: 1.4;
}
.s5q-step.done { color: #6d6d71; }
.s5q-step.cur {
  color: #25372f;
  font-weight: 600;
  background: #ececee;
  border-color: #b9b9bf;
}
.s5q-q {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #f0ede7;
}
.s5q-q-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.s5q-q-ch {
  font-size: 12px;
  color: #6d6d71;
  background: #eef3ee;
  padding: 2px 10px;
  border-radius: 999px;
}
.s5q-q-no { font-size: 12px; color: #aeaeb2; }
.s5q-q-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: #25372f;
}
.s5q-opts {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.s5q-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  box-sizing: border-box;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e3e3e7;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.7;
  color: #25372f;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.s5q-opt:hover { border-color: #b9b9bf; background: #fafafa; }
.s5q-opt .s5q-key {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #6d6d71;
  border: 1px solid #d9d9de;
  background: #fbfbfc;
}
.s5q-opt .s5q-txt { flex: 1 1 auto; white-space: normal; word-break: break-word; }
.s5q-opt.is-sel {
  background: #355944;
  border-color: #355944;
  color: #fff;
}
.s5q-opt.is-sel .s5q-key {
  background: #fff;
  color: #25372f;
  border-color: #fff;
}
.s5q-nav {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.s5q-nav .wq-btn[disabled],
.s5q-nav .wq-btn.disabled {
  cursor: default;
  opacity: 0.55;
  pointer-events: none;
}

.s5q-summary { margin-top: 14px; }
.s5q-score-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.s5q-score {
  font-size: 40px;
  line-height: 1;
  font-weight: 700;
  color: #25372f;
}
.s5q-score-unit {
  font-size: 13px;
  color: #6d6d71;
  margin-right: 6px;
}
.s5q-sum-rule { margin-top: 8px; font-size: 12.5px; color: #7c7c80; }
.s5q-rows { margin-top: 14px; border-top: 1px solid #f0ede7; }
.s5q-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #f0ede7;
  font-size: 13.5px;
}
.s5q-row:last-child { border-bottom: 0; }
.s5q-row-label { color: #455c4e; }
.s5q-row-val { color: #25372f; font-weight: 600; }
.s5q-reason {
  margin-top: 12px;
  padding: 10px 12px;
  background: #f9eeee;
  border: 1px solid #ecd9d9;
  border-radius: 10px;
  font-size: 13px;
  color: #8c4444;
  line-height: 1.7;
}
.s5q-reason > div + div { margin-top: 4px; }

/* =====================================================================
   客服「5S现场标准」图文章节页专用排版
   仅作用于该章节正文中的 wm5s-* 结构，不影响其它章节。
   风格延续 B01 工作手册：白底卡片、圆角、留白、黑白灰 + 米白浅色。
   ===================================================================== */
.wm-richtext .wm5s,
body.wm-tinymce .wm5s {
  margin: 6px 0 0;
}

/* —— 页面标题区 —— */
.wm-richtext .wm5s-head,
body.wm-tinymce .wm5s-head {
  padding: 4px 2px 22px;
  border-bottom: 1px solid #eae6dc;
}
.wm-richtext .wm5s-head h2,
body.wm-tinymce .wm5s-head h2 {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.35;
  color: #232220;
  letter-spacing: 0.3px;
}
.wm-richtext .wm5s-head p,
body.wm-tinymce .wm5s-head p {
  margin: 10px 0 0;
  font-size: 14.5px;
  color: #837d71;
}

/* —— Hero 引导卡 —— */
.wm-richtext .wm5s-hero,
body.wm-tinymce .wm5s-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
  align-items: center;
  margin-top: 24px;
  padding: 28px 30px;
  border-radius: 20px;
  background: #f5f1e8;
  box-sizing: border-box;
}
.wm-richtext .wm5s-hero-text,
body.wm-tinymce .wm5s-hero-text {
  min-width: 0;
}
.wm-richtext .wm5s-hero-text .wm5s-lead,
body.wm-tinymce .wm5s-hero-text .wm5s-lead {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 2.05;
  color: #2b2924;
}
.wm-richtext .wm5s-hero-text .wm5s-hero-note,
body.wm-tinymce .wm5s-hero-text .wm5s-hero-note {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.9;
  color: #847e70;
}
.wm-richtext .wm5s-hero-fig,
body.wm-tinymce .wm5s-hero-fig {
  min-width: 0;
}
.wm-richtext .wm5s-hero-fig .wm5s-slot,
body.wm-tinymce .wm5s-hero-fig .wm5s-slot {
  aspect-ratio: 4 / 3;
}

/* —— 通用图片占位框（后续替换为真实图片） —— */
.wm-richtext .wm5s-slot,
body.wm-tinymce .wm5s-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 12px;
  background: #f1ede2;
  border: 1px dashed #d6d0c0;
  border-radius: 12px;
  text-align: center;
  box-sizing: border-box;
  min-height: 84px;
}
.wm-richtext .wm5s-slot-mark,
body.wm-tinymce .wm5s-slot-mark {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #847d6f;
}
.wm-richtext .wm5s-slot-note,
body.wm-tinymce .wm5s-slot-note {
  font-size: 11px;
  color: #b3ada0;
}

/* —— 模块卡片区：第一排 3 卡 / 第二排 3 卡 —— */
.wm-richtext .wm5s-grid,
body.wm-tinymce .wm5s-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 16px;
  margin-top: 22px;
}
.wm-richtext .wm5s-card,
body.wm-tinymce .wm5s-card {
  display: flex;
  flex-direction: column;
  padding: 14px 15px 16px;
  background: #fff;
  border: 1px solid #ece7dc;
  border-radius: 16px;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(33, 31, 26, 0.04);
}
.wm-richtext .wm5s-card .wm5s-card-fig,
body.wm-tinymce .wm5s-card .wm5s-card-fig {
  margin: 0;
  overflow: hidden;
}
.wm-richtext .wm5s-card .wm5s-card-fig .wm5s-slot,
body.wm-tinymce .wm5s-card .wm5s-card-fig .wm5s-slot {
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  min-height: 0;
}
.wm-richtext .wm5s-card h3,
body.wm-tinymce .wm5s-card h3 {
  margin: 15px 0 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: #232220;
}
.wm-richtext .wm5s-card p,
body.wm-tinymce .wm5s-card p {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.85;
  color: #4c4a44;
}
.wm-richtext .wm5s-card ul,
body.wm-tinymce .wm5s-card ul {
  margin: 8px 0 0;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.9;
  color: #55524b;
}
.wm-richtext .wm5s-card .wm5s-cap,
body.wm-tinymce .wm5s-card .wm5s-cap {
  margin: 14px 0 0;
  padding-top: 11px;
  border-top: 1px dashed #e7e1d3;
  font-size: 12.5px;
  line-height: 1.8;
  color: #97917f;
}

/* —— 大模块（宽卡）通用 —— */
.wm-richtext .wm5s-wide,
body.wm-tinymce .wm5s-wide {
  margin-top: 22px;
  padding: 24px 26px 26px;
  background: #fff;
  border: 1px solid #ece7dc;
  border-radius: 18px;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(33, 31, 26, 0.04);
}
.wm-richtext .wm5s-wide h3,
body.wm-tinymce .wm5s-wide h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: #232220;
}
.wm-richtext .wm5s-wide p,
body.wm-tinymce .wm5s-wide p {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.9;
  color: #4c4a44;
}
.wm-richtext .wm5s-wide .wm5s-intro,
body.wm-tinymce .wm5s-wide .wm5s-intro {
  font-size: 14.5px;
  color: #5d5a52;
}

/* —— 模块7：九宫格 —— */
.wm-richtext .wm5s-grid9,
body.wm-tinymce .wm5s-grid9 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.wm-richtext .wm5s-g9,
body.wm-tinymce .wm5s-g9 {
  padding: 12px 14px 13px;
  background: #faf8f3;
  border: 1px solid #eee8dc;
  border-radius: 12px;
  box-sizing: border-box;
}
.wm-richtext .wm5s-g9-no,
body.wm-tinymce .wm5s-g9-no {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #c3baa6;
}
.wm-richtext .wm5s-g9-name,
body.wm-tinymce .wm5s-g9-name {
  margin-top: 5px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #33302b;
}
.wm-richtext .wm5s-g9-desc,
body.wm-tinymce .wm5s-g9-desc {
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.65;
  color: #8a857b;
}
.wm-richtext .wm5s-remind,
body.wm-tinymce .wm5s-remind {
  margin-top: 18px;
  padding: 13px 16px;
  background: #f2eee4;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.8;
  color: #6a6458;
}

/* —— 模块8：岗位责任（左右分栏） —— */
.wm-richtext .wm5s-m8-cols,
body.wm-tinymce .wm5s-m8-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 26px;
  align-items: stretch;
  margin-top: 14px;
}
.wm-richtext .wm5s-m8-text,
body.wm-tinymce .wm5s-m8-text {
  min-width: 0;
}
.wm-richtext .wm5s-m8-text h3,
body.wm-tinymce .wm5s-m8-text h3 {
  margin: 0;
}
.wm-richtext .wm5s-m8-text .wm5s-cap,
body.wm-tinymce .wm5s-m8-text .wm5s-cap {
  margin: 18px 0 0;
  font-size: 12.5px;
  line-height: 1.8;
  color: #97917f;
}
.wm-richtext .wm5s-excuses,
body.wm-tinymce .wm5s-excuses {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0 0;
}
.wm-richtext .wm5s-excuse,
body.wm-tinymce .wm5s-excuse {
  padding: 9px 16px;
  background: #f6f2e9;
  border-left: 3px solid #d6cfc0;
  border-radius: 8px;
  font-size: 14px;
  color: #6b6559;
}
.wm-richtext .wm5s-m8-fig,
body.wm-tinymce .wm5s-m8-fig {
  display: flex;
}
.wm-richtext .wm5s-m8-fig .wm5s-slot,
body.wm-tinymce .wm5s-m8-fig .wm5s-slot {
  flex: 1 1 auto;
  width: 100%;
  min-height: 220px;
}

/* —— 底部强调收尾卡 —— */
.wm-richtext .wm5s-final,
body.wm-tinymce .wm5s-final {
  margin-top: 26px;
  padding: 30px 34px;
  background: #2c2a25;
  border-radius: 20px;
  text-align: center;
}
.wm-richtext .wm5s-final-main,
body.wm-tinymce .wm5s-final-main {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.5px;
  color: #fff;
}
.wm-richtext .wm5s-final-sub,
body.wm-tinymce .wm5s-final-sub {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 2;
  color: #d9d4c9;
}

/* —— 窄屏自适应 —— */
@media (max-width: 720px) {
  .wm-richtext .wm5s-head h2,
  body.wm-tinymce .wm5s-head h2 {
    font-size: 24px;
  }
  .wm-richtext .wm5s-hero,
  body.wm-tinymce .wm5s-hero {
    padding: 22px 18px;
  }
  .wm-richtext .wm5s-wide,
  body.wm-tinymce .wm5s-wide {
    padding: 20px 16px;
  }
  .wm-richtext .wm5s-final,
  body.wm-tinymce .wm5s-final {
    padding: 24px 18px;
  }
}

/* =====================================================================
   客服「5S现场标准」真实图片接入（wm5s-photo 图框）
   仅作用于正文中带 wm5s-photo 的图框：占位虚线框收敛为图片框，
   不改变既有 wm5s-* 卡片布局、圆角、间距与文字。
   图片显示规格：1~6 模块图片区统一 4:3 + object-fit: cover，铺满无米白留白；
   02/03/04「前后对比图」原图即 4:3，不做 contain 裁剪/留白；
   07.png 为 1:1 九宫格，单独正方形图框（不改 4:3）；Hero 维持原 4:3 cover 不变。
   ===================================================================== */
.wm-richtext .wm5s-slot.wm5s-photo,
body.wm-tinymce .wm5s-slot.wm5s-photo {
  display: block;
  position: relative;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #f3efe6;
}
.wm-richtext .wm5s-slot.wm5s-photo img,
body.wm-tinymce .wm5s-slot.wm5s-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
/* 02/03/04「前后对比图」原图即 4:3：wm5s-contain 不再产生 contain，
   统一 cover 铺满（卡片已锁 4:3，cover 同时保证左右两侧完整、四周无米白留白） */
.wm-richtext .wm5s-slot.wm5s-photo.wm5s-contain img,
body.wm-tinymce .wm5s-slot.wm5s-photo.wm5s-contain img {
  object-fit: cover;
}
/* 模块8 岗位责任（左右分栏独立图区，不参与 1~6 的 4:3 铺满）：
   复用 04 对比图继续 contain，保证左右完整可见 */
.wm-richtext .wm5s-m8-fig .wm5s-slot.wm5s-photo.wm5s-contain img,
body.wm-tinymce .wm5s-m8-fig .wm5s-slot.wm5s-photo.wm5s-contain img {
  object-fit: contain;
}
/* 1~6 模块卡图片区统一 4:3（覆盖旧 16:10 占位比例），cover 铺满无留白 */
.wm-richtext .wm5s-card .wm5s-card-fig .wm5s-slot.wm5s-photo,
body.wm-tinymce .wm5s-card .wm5s-card-fig .wm5s-slot.wm5s-photo {
  aspect-ratio: 4 / 3;
}
/* 模块7 视觉参考图位（置于九宫格上方，下方文字检查标准保留） */
.wm-richtext .wm5s-m7-fig,
body.wm-tinymce .wm5s-m7-fig {
  margin-top: 18px;
}
/* 07.png 为 1:1 九宫格图，图位保持正方形，不强行改成 4:3 */
.wm-richtext .wm5s-m7-fig .wm5s-slot,
body.wm-tinymce .wm5s-m7-fig .wm5s-slot {
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 0;
}