/* ===================================================================
   B01 岗位能力 · Phase 1A/1B 页面样式（员工端 + 管理端 + 弹窗 + 验证队列）
   =================================================================== */
.cap-page { padding: 18px 4px 48px; box-sizing: border-box; }
.cap-inner { max-width: 1120px; margin: 0 auto; }

.cap-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.cap-title { margin: 0 0 6px; font-size: 22px; font-weight: 800; color: #25372f; line-height: 1.25; }
.cap-sub { margin: 0; color: #86868b; font-size: 12.5px; line-height: 1.6; }
.cap-state { text-align: right; max-width: 60%; }

.cap-summary { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-bottom: 8px; }
.cap-summary > span { background: #eef3ee; border-radius: 999px; padding: 5px 12px; font-size: 12px; color: #455c4e; }
.cap-summary b { font-size: 14px; color: #25372f; }
.cap-summary .cap-sum-att { background: #fff4e0; color: #8a5a00; }
.cap-sum-att b { color: #8a5a00; }
.cap-sum-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.cap-sum-item { font-size: 12px; border-radius: 999px; padding: 4px 11px; background: #eef3ee; color: #455c4e; }
.cap-sum-item b { margin-left: 4px; }

.cap-body { min-height: 200px; }
.cap-loading { padding: 60px 0; text-align: center; color: #aeaeb2; font-size: 13px; }
.cap-empty { padding: 46px 20px; text-align: center; color: #86868b; font-size: 13.5px; background: #ffffff; border-radius: 16px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04); }

/* ---- 徽标 ---- */
.cap-chip { display: inline-block; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 600; line-height: 1.4; white-space: nowrap; vertical-align: middle; }
.cap-st-ns { background: #e5ece4; color: #5b5b60; }
.cap-st-learning { background: #e3efff; color: #355944; }
.cap-st-pending { background: #fff0d6; color: #9a6200; }
.cap-st-review { background: #ffe3e0; color: #b33a2e; }
.cap-st-qualified { background: #e2f4e6; color: #1e7a3d; }
.cap-st-source { background: #ececef; color: #4b5563; font-weight: 500; }

/* ---- 员工能力卡 ---- */
.cap-card { background: #ffffff; border-radius: 16px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); padding: 18px 20px 16px; margin-bottom: 14px; box-sizing: border-box; }
.cap-card-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cap-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: #8e8e93; background: #eef3ee; padding: 2px 8px; border-radius: 6px; }
.cap-name { margin: 0; font-size: 17px; font-weight: 700; color: #25372f; flex: 1; }
.cap-desc { margin: 8px 0 6px; color: #455c4e; font-size: 13px; line-height: 1.65; }
.cap-meta { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: 12px; color: #86868b; margin-bottom: 6px; }
.cap-meta span { display: inline-flex; align-items: center; }

.cap-improve { background: #fff4f2; border: 1px solid #ffd9d4; color: #a03427; border-radius: 10px; padding: 8px 12px; font-size: 12.5px; line-height: 1.6; margin: 8px 0; }
.cap-improve b { font-weight: 700; }

.cap-ev-block { border-top: 1px dashed #e6e6ea; margin-top: 10px; padding-top: 10px; }
.cap-ev-title { font-size: 12px; font-weight: 700; color: #6b6b70; margin-bottom: 8px; }
.cap-ev-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid #f4f4f6; font-size: 12.5px; }
.cap-ev-row:last-child { border-bottom: 0; }
.cap-ev-ref { flex: 1; min-width: 120px; color: #455c4e; word-break: break-all; }
.cap-ev-note2 { color: #aeaeb2; font-size: 11.5px; }
.cap-ev-scope { color: #86868b; font-size: 12px; margin-top: 6px; }
.cap-ev-time { color: #aeaeb2; font-size: 11.5px; white-space: nowrap; }
.cap-ev-none { color: #aeaeb2; font-size: 12px; padding: 4px 0 6px; }

.cap-card-act { margin-top: 12px; display: flex; justify-content: flex-end; }
.cap-waiting { font-size: 12.5px; color: #86868b; padding: 8px 2px; }

/* ---- 按钮 ---- */
.cap-btn { display: inline-block; border: 0; cursor: pointer; border-radius: 9px; padding: 8px 16px; font-size: 13px; font-weight: 600; transition: background 0.15s, opacity 0.15s, color 0.15s; line-height: 1.4; }
.cap-btn:disabled { opacity: 0.5; cursor: default; }
.cap-btn-primary { background: #355944; color: #ffffff; }
.cap-btn-primary:hover:not(:disabled) { background: #355944; }
.cap-btn-ghost { background: #eef3ee; color: #455c4e; }
.cap-btn-ghost:hover:not(:disabled) { background: #e5e5e8; }

/* ---- 管理端：工具条 / 定义卡 / 队列 ---- */
.cap-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cap-toolbar-note { font-size: 12px; color: #aeaeb2; }
.card-w { background: #ffffff; border-radius: 16px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); padding: 16px 18px; margin-bottom: 16px; box-sizing: border-box; }

.cap-queue { background: #fffbf2; border: 1px solid #f3e3c0; }
.cap-table-title { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: #25372f; }
.cap-queue-list { display: flex; flex-direction: column; gap: 8px; }
.cap-queue-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #ffffff; border: 1px solid #f0e6cd; border-radius: 12px; padding: 10px 14px; }
.cap-queue-main { flex: 1; min-width: 0; }
.cap-queue-title { font-size: 13.5px; color: #455c4e; margin-bottom: 4px; }

.cap-defs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-bottom: 16px; }
.cap-def-card { background: #ffffff; border-radius: 14px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04); padding: 14px 16px; box-sizing: border-box; }
.cap-def-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cap-def-head h4 { margin: 0; font-size: 14.5px; color: #25372f; }
.cap-def-card p { margin: 0 0 6px; font-size: 12px; color: #6b6b70; line-height: 1.6; }
.cap-def-meta { font-size: 11.5px; color: #aeaeb2; }

/* ---- 员工×能力矩阵 ---- */
.cap-table-card { overflow: hidden; }
.cap-table-scroll { overflow-x: auto; }
.cap-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 760px; }
.cap-table th { background: #f7f7f9; color: #455c4e; font-weight: 600; padding: 9px 10px; text-align: left; border-bottom: 1px solid #e5ece4; white-space: nowrap; }
.cap-table th:first-child { border-radius: 10px 0 0 0; }
.cap-th-sub { display: block; font-weight: 400; color: #86868b; font-size: 11px; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cap-table td { padding: 9px 10px; border-bottom: 1px solid #f4f4f6; color: #455c4e; vertical-align: middle; }
.cap-table tbody tr:hover td { background: #fafafa; }
.cap-emp-name { font-weight: 600; color: #25372f; white-space: nowrap; }
.cap-td-state { text-align: center; }
.cap-cell-btn { border: 0; background: none; cursor: pointer; font-size: 11.5px; color: #aeaeb2; padding: 4px 6px; border-radius: 6px; display: block; margin: 4px auto 0; }
.cap-cell-btn:hover { background: #eef3ee; color: #355944; }
.cap-table-note { margin: 10px 0 0; font-size: 12px; color: #aeaeb2; line-height: 1.6; }

/* ---- 弹窗 ---- */
.cap-modal-overlay { position: fixed; inset: 0; background: rgba(20, 20, 24, 0.44); display: flex; align-items: center; justify-content: center; z-index: 9990; padding: 20px; box-sizing: border-box; }
.cap-modal { width: 100%; max-width: 560px; max-height: 86vh; background: #ffffff; border-radius: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; overflow: hidden; }
.cap-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 10px; }
.cap-modal-head h4 { margin: 0; font-size: 16px; font-weight: 700; color: #25372f; }
.cap-modal-x { border: 0; background: #eef3ee; color: #455c4e; width: 28px; height: 28px; border-radius: 50%; font-size: 16px; line-height: 1; cursor: pointer; }
.cap-modal-x:hover { background: #e3e3e7; }
.cap-modal-body { padding: 6px 20px 14px; overflow-y: auto; }
.cap-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 20px 16px; border-top: 1px solid #eef3ee; }
.cap-modal-tip { background: #f7f7f9; border-radius: 10px; padding: 10px 12px; font-size: 13px; color: #455c4e; line-height: 1.7; margin: 4px 0 12px; }

.cap-f-label { display: block; font-size: 12.5px; font-weight: 600; color: #455c4e; margin: 12px 0 6px; }
.cap-f-input { width: 100%; box-sizing: border-box; border: 1px solid #dcdce0; border-radius: 9px; padding: 8px 10px; font-size: 13px; color: #25372f; background: #fff; }
.cap-f-input:focus { outline: none; border-color: #8e8e93; }
.cap-f-ta { resize: vertical; line-height: 1.6; }
.cap-nr-meta { font-size: 12px; color: #86868b; margin-top: 6px; }
.cap-radio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cap-radio { display: flex; align-items: center; gap: 7px; border: 1px solid #e2e2e6; border-radius: 9px; padding: 8px 10px; font-size: 13px; color: #455c4e; cursor: pointer; }
.cap-radio:has(input:checked) { border-color: #355944; background: #fafafa; }

/* ---- 轻提示 ---- */
.cap-toast-wrap { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 10000; }
.cap-toast { background: #355944; color: #ffffff; padding: 10px 16px; border-radius: 10px; font-size: 13px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16); transition: opacity 0.25s, transform 0.25s; }
.cap-toast-err { background: #c0392b; }
.cap-toast-out { opacity: 0; transform: translateY(6px); }

@media (max-width: 720px) {
  .cap-state { text-align: left; max-width: none; }
  .cap-summary { justify-content: flex-start; }
  .cap-queue-row { flex-direction: column; align-items: stretch; }
}

/* ===================================================================
   Phase 1C · 验证可信度增强：学习前置 / 标准清单 / 分节弹窗 / 手动需复核
   =================================================================== */
.cap-chip-mini { padding: 1px 8px; font-size: 11px; }

/* 警示按钮（手动转需复核等） */
.cap-btn-warn { background: #fff0d6; color: #8a5a00; }
.cap-btn-warn:hover:not(:disabled) { background: #ffe3b3; }

/* 键值行 */
.cap-kv { display: flex; gap: 10px; font-size: 12.5px; padding: 3px 0; line-height: 1.55; }
.cap-kv-k { flex: 0 0 auto; color: #86868b; min-width: 108px; }
.cap-kv-v { flex: 1; color: #25372f; word-break: break-all; }
.cap-kv-auto { display: inline-block; font-size: 11.5px; color: #86868b; margin-top: 2px; }
.cap-f-note { font-size: 12px; color: #86868b; line-height: 1.6; margin: 2px 0 8px; }
.cap-legal-note { font-size: 11.5px; color: #aeaeb2; line-height: 1.6; margin-top: 10px; }

/* 学习前置（员工卡 + 提交弹窗） */
.cap-gate { border: 1px solid #e3f0e5; background: #f4faf5; border-radius: 12px; padding: 10px 12px; margin: 10px 0 4px; }
.cap-gate-warn { border-color: #ffe1bd; background: #fff8ee; }
.cap-gate-title { font-size: 12.5px; font-weight: 700; color: #1e7a3d; margin-bottom: 8px; }
.cap-gate-warn .cap-gate-title { color: #9a6200; }
.cap-gate-dot { display: inline-block; width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 50%; background: #ffc46b; color: #7a4d00; font-weight: 800; margin-right: 6px; font-size: 12px; }
.cap-gate-dot-ok { background: #2f9e56; color: #fff; }
.cap-req-list { display: flex; flex-direction: column; gap: 6px; }
.cap-req-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 5px 10px; border-radius: 9px; background: #ffffff; }
.cap-req-ok { color: #25372f; }
.cap-req-warn { color: #8a5a00; border: 1px solid #ffe1bd; background: #fffdf7; }
.cap-req-name { flex: 1; min-width: 0; }
.cap-req-tip { color: #b35b00; font-size: 11px; white-space: nowrap; }
.cap-gate-go { display: inline-block; margin-top: 8px; font-size: 12.5px; color: #355944; font-weight: 600; text-decoration: underline; cursor: pointer; }
.cap-gate-go:hover { color: #084a96; }

/* 手动标记需复核提示 */
.cap-mrg { background: #fff0ed; border: 1px solid #ffd5ce; border-radius: 10px; color: #a03427; padding: 8px 12px; font-size: 12.5px; line-height: 1.6; margin: 8px 0; }
.cap-mrg b { font-weight: 700; }
.cap-cell-manual { font-size: 10.5px; color: #b33a2e; margin-top: 2px; }
.cap-manual-note { color: #86868b; font-size: 12px; line-height: 1.7; display: inline-block; margin-top: 2px; }
/* Phase 3C-02：SVC-C03 无订单权限引导 / 管理端「待开放订单真实工作范围」标识 */
.cap-perm-warn { background: #fff8e6; border: 1px solid #f4d9a0; border-radius: 10px; color: #8a6114; padding: 8px 12px; font-size: 12.5px; line-height: 1.7; margin: 8px 0; }
.cap-perm-warn b { font-weight: 700; }
.cap-perm-mini { margin: 6px 0 2px; padding: 5px 9px; border-radius: 8px; font-size: 11.5px; }
.cap-cell-pend { font-size: 10.5px; color: #9a6b10; background: #fff8e6; display: inline-block; padding: 1px 6px; border-radius: 6px; margin-top: 3px; }

/* 证据明细（承担动作/说明/范围/版本） */
.cap-ev-item { border-bottom: 1px dashed #e6e6ea; padding: 4px 0; }
.cap-ev-item:last-child { border-bottom: 0; }
.cap-ev-more { border-left: 2px solid #eef0f3; padding: 2px 0 6px 10px; margin: 2px 0 4px 6px; }

/* 标准清单 */
.cap-std-list { margin: 4px 0 6px; padding-left: 18px; }
.cap-std-list li { font-size: 12.5px; color: #455c4e; line-height: 1.7; margin-bottom: 2px; }
.cap-std-meta { font-size: 11.5px; color: #86868b; margin: 2px 0 4px; }
.cap-std-hint { font-size: 11.5px; color: #aeaeb2; margin-top: 4px; }
.cap-empty-inline { font-size: 12px; color: #aeaeb2; padding: 4px 0; }

/* 能力定义卡：验证标准折叠 */
.cap-details { margin-top: 8px; }
.cap-details summary { cursor: pointer; font-size: 12px; font-weight: 600; color: #355944; outline: none; }
.cap-details summary::-webkit-details-marker { color: #355944; }

/* 分节弹窗 */
.cap-modal-lg { max-width: 760px; }
.cap-sec { border: 1px solid #e5ece4; border-radius: 12px; padding: 10px 12px; margin: 10px 0; background: #fff; }
.cap-sec-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #25372f; margin-bottom: 8px; }
.cap-sec-n { display: inline-block; width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 50%; background: #355944; color: #fff; font-size: 11.5px; font-weight: 700; }

/* ===================================================================
   Phase 2A · 订单业务证据接入（只读订单引用：校验+快照+履约轨迹展示）
   =================================================================== */
.cap-oe-row { display: flex; gap: 8px; align-items: center; margin: 2px 0 8px; }
.cap-oe-row .cap-f-input { flex: 1; min-width: 0; }
.cap-oe-panel-ok { background: #eef8f0; border: 1px solid #cfe9d5; color: #1e6b34; border-radius: 8px; padding: 6px 10px; font-size: 12.5px; margin: 2px 0 6px; }
.cap-oe-panel-err { background: #fff0ed; border: 1px solid #ffd5ce; color: #a03427; border-radius: 8px; padding: 6px 10px; font-size: 12.5px; margin: 2px 0 6px; }
.cap-ev-order { border: 1px dashed #c9d8f2; background: #f6f9ff; border-radius: 10px; padding: 8px 10px 6px; margin: 4px 0 6px; }
.cap-ev-order-h { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12.5px; color: #25372f; margin-bottom: 6px; }
.cap-oe-tag { display: inline-block; background: #123a75; color: #fff; font-size: 11px; font-weight: 700; border-radius: 5px; padding: 1px 7px; letter-spacing: 0.5px; }
.cap-ev-order .cap-kv { padding: 2px 0; }
.cap-ev-order .cap-kv-k { min-width: 108px; color: #6b7280; }
.cap-ev-order-flow { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.cap-flow-chip { display: inline-block; background: #eef1f6; border: 1px solid #e0e5ec; color: #4b5563; font-size: 11.5px; border-radius: 20px; padding: 2px 10px; }
.cap-flow-chip b { color: #123a75; }

/* Phase 2B · 工作推进与闭环证据（C01） */
.cap-ev-work { border: 1px dashed #d9e3c8; background: #fbfdf7; border-radius: 10px; padding: 8px 10px 6px; margin: 4px 0 6px; }
.cap-ev-work .cap-kv { padding: 2px 0; }
.cap-ev-work .cap-kv-k { min-width: 118px; color: #6b7280; }
.cap-kv-line { padding: 2px 0; }
.cap-kv-line + .cap-kv-line { border-top: 1px dashed #eef1ea; }
.cap-ev-work-ref { border: 1px solid #e6e2d6; background: #fffdf6; border-radius: 8px; padding: 6px 8px 4px; margin: 6px 0 0; }
.cap-ev-order-ok { background: #eef8f0; border: 1px solid #cfe9d5; color: #1e6b34; border-radius: 6px; padding: 3px 8px; font-size: 12px; margin-top: 4px; display: inline-block; }
.cap-ev-order-warn { background: #fff7e6; border: 1px solid #f4e3bd; color: #7a5b12; border-radius: 6px; padding: 3px 8px; font-size: 12px; margin-top: 4px; }

/* Phase 2C · 当班交接证据（C07） */
.cap-ev-handoff { border-color: #ccd7ef; background: #f8faff; }
.cap-hd-item { display: block; border: 1px solid #e3e8f2; background: #fff; border-radius: 8px; padding: 5px 9px; margin: 5px 0; }
.cap-hd-no { display: inline-block; min-width: 18px; height: 18px; line-height: 18px; text-align: center; background: #123a75; color: #fff; border-radius: 9px; font-size: 11px; margin-right: 6px; }
.cap-hd-st { display: inline-block; background: #fff3e0; color: #8a5a00; border: 1px solid #f3dcae; border-radius: 4px; font-size: 11px; padding: 0 6px; margin-left: 8px; }
.cap-hd-reason { margin-top: 3px; color: #6b7280; font-size: 12px; padding-left: 26px; }
.cap-hd-recv { margin: 4px 0; }
.cap-hd-check { display: block; margin: 8px 0 2px; font-size: 12.5px; color: #5a5f66; line-height: 1.5; }
.cap-hd-check input { margin-right: 6px; }

/* ===================================================================
   Phase 3A · 客服岗位能力地图（能力展示与汇总，不自动改权限/评级）
   =================================================================== */
.cap-chip-btn { cursor: pointer; border: 1px solid transparent; padding: 3px 10px; border-radius: 20px; font-size: 12px; line-height: 1.5; font-family: inherit; }
.cap-chip-btn:hover { box-shadow: 0 0 0 2px rgba(90, 90, 240, 0.16); filter: brightness(0.97); }
.cap-chip-btn:focus-visible { outline: 2px solid #5b5bf0; outline-offset: 1px; }
.cap-home { margin-top: 8px; }
.cap-home-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.cap-home-head h4 { margin: 0; font-size: 16px; }
.cap-home-sub { color: #7a8499; font-size: 12px; }
.cap-home-sub2 { margin: 2px 0 8px; font-weight: 600; color: #333f57; font-size: 13px; }
.cap-emp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; margin-bottom: 14px; }
.cap-emp-mini { border: 1px solid #e7eaf2; border-radius: 12px; padding: 10px 12px; background: #fff; }
.cap-emp-mini-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cap-emp-mini-top b { font-size: 14px; }
.cap-emp-mini-tag { background: #f0f1f7; color: #5a6478; font-size: 11px; padding: 1px 8px; border-radius: 10px; }
.cap-emp-mini-done { margin-left: auto; font-size: 12px; color: #475069; }
.cap-emp-mini-sub { color: #8b93a7; font-size: 12px; margin-top: 2px; }
.cap-emp-mini-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cap-attn-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-bottom: 6px; }
.cap-attn-col { border: 1px dashed #dfe3ee; border-radius: 12px; padding: 10px 12px; background: #fafbfe; }
.cap-attn-title { font-weight: 600; font-size: 13px; margin-bottom: 8px; color: #333f57; }
.cap-attn-list { display: flex; flex-direction: column; gap: 6px; }
.cap-attn-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cap-attn-who { font-weight: 600; font-size: 12px; color: #5a6478; min-width: 56px; }
.cap-attn-why { color: #a0653a; font-size: 11px; }
.cap-ov-divider { text-align: center; color: #8b93a7; margin: 18px 0 10px; font-size: 12px; letter-spacing: 2px; }
.cap-ov-cap b { color: #5b5bf0; }
.cap-ov-name { color: #5a6478; font-weight: 400; margin-left: 6px; }
.cap-ov-next { color: #3f4a63; line-height: 1.5; }
.cap-next { background: #f6f7ff; border: 1px solid #e3e6fb; border-radius: 10px; padding: 8px 10px; margin: 10px 0; font-size: 13px; color: #3f4a63; }
.cap-recent { margin-top: 10px; background: #fafbfe; border: 1px solid #e9ecf4; border-radius: 10px; padding: 8px 10px; font-size: 13px; color: #3f4a63; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }