* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --primary: #245cbb;
  --primary-bg: #edf3fe;
  --navy: #183b6b;
  --green: #237447;
  --green-bg: #edf7f0;
  --red: #b92c3b;
  --red-bg: #fceff0;
  --orange: #9a5b10;
  --orange-bg: #fff6e8;
  --grey-bg: #f6f8fb;
  --border: #dfe5ed;
  --text: #203047;
  --text-2: #627188;
  --footer-h: calc(36px + env(safe-area-inset-bottom, 0px));
  --topbar-h: 72px;
}
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  color: var(--text);
  background: #f2f4f7;
  font-size: 14px;
  line-height: 1.6;
}
button, input, textarea { font: inherit; }
button { touch-action: manipulation; }
input::placeholder, textarea::placeholder { color: #8a96a7; }

/* 顶栏 */
.topbar {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 0 32px;
  min-height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.logo { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.brand-copy { display: flex; flex-direction: column; }
.title { font-size: 16px; font-weight: 700; color: var(--navy); line-height: 1.5; }
.brand-caption { font-size: 11px; color: var(--text-2); }
.beta-badge { font-size: 10px; font-weight: 600; letter-spacing: 1px; padding: 2px 6px; border: 1px solid var(--border); border-radius: 4px; color: var(--text-2); }
.role-switch { display: flex; gap: 8px; align-items: center; }
.account-label { font-size: 12px; color: var(--text-2); margin-right: 8px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-btn {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-2);
  padding: 7px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}
.role-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* 布局 */
.container { max-width: 1152px; margin: 32px auto; padding: 0 24px calc(var(--footer-h) + 32px); }

/* 卡片 */
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}
.card h2 { font-size: 16px; margin-bottom: 14px; }
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.page-head h2 { margin: 0; }
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); background: #fff; color: var(--text);
  padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 14px;
}
.btn:hover { background: var(--grey-bg); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: #1858c7; }
.btn-ghost { border: none; background: transparent; color: var(--primary); }
.btn-sm { padding: 5px 10px; font-size: 13px; }

/* 列表 */
.list-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px;
  margin-bottom: 10px; background: #fff;
}
.list-item .li-main { flex: 1; min-width: 0; }
.list-item .li-title { font-weight: 600; margin-bottom: 4px; }
.list-item .li-meta { color: var(--text-2); font-size: 12px; }
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 12px;
  margin-left: 8px;
}
.badge-draft { background: var(--grey-bg); color: var(--text-2); }
.badge-published { background: var(--green-bg); color: var(--green); }
.empty { color: var(--text-2); text-align: center; padding: 40px 0; }

/* 表单 */
.field { margin-bottom: 14px; }
.field label { display: block; margin-bottom: 6px; font-weight: 600; color: var(--text); }
.field input[type=text], .field textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 14px; font-family: inherit;
}
.field textarea { min-height: 72px; resize: vertical; }
.field .hint { color: var(--text-2); font-size: 12px; margin-top: 4px; }

/* 标准树：手风琴板块，一级项为独立板块，逐级点开 */
.std-tree { max-height: 560px; overflow: auto; padding: 6px; max-width: 760px; margin: 0 auto; }
.std-node { user-select: none; }
.std-row {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 8px;
}
.std-row.clickable { cursor: pointer; }
.std-row.clickable:hover { background: var(--primary-bg); }
.std-row .arrow { width: 18px; flex-shrink: 0; color: var(--text-2); font-size: 13px; text-align: center; }
.std-row input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; margin-left: auto; accent-color: var(--primary); }
.std-row .std-code { color: var(--text-2); font-size: 12px; flex-shrink: 0; min-width: 42px; }
.std-row .std-name { flex: 1; }

/* 一级项：独立板块卡片 */
.std-level1 {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: 12px;
  box-shadow: none;
  margin: 12px 0;
  overflow: hidden;
}
.std-level1 > .std-row {
  background: transparent;
  border-radius: 0;
  padding: 14px 16px;
}
.std-level1 > .std-row .std-code { color: var(--primary); font-weight: 700; font-size: 13px; }
.std-level1 > .std-row .std-name { font-weight: 700; font-size: 15px; }
.std-level1 > .std-row .arrow { color: var(--primary); font-weight: 700; }

/* 二级项：板块内分组，点击展开 */
.std-level2 > .std-row {
  background: var(--grey-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 6px 0;
  padding: 8px 12px;
}
.std-level2 > .std-row .std-name { font-weight: 600; }

/* 三级项：checkbox 行 */
.std-level3 > .std-row { padding: 7px 12px 7px 20px; }
.std-level3 > .std-row:hover { background: var(--grey-bg); }
.std-level3 > .std-row .std-code { min-width: 54px; }

/* 板块内容缩进 */
.std-level1 > .std-children { padding: 6px 14px 12px; }
.std-level2 > .std-children { padding-left: 18px; }

/* 对比结果 */
.compare-stats { display: flex; gap: 12px; margin-bottom: 16px; }
.stat-box { flex: 1; text-align: center; padding: 14px; border-radius: 10px; }
.stat-box .num { font-size: 26px; font-weight: 700; }
.stat-box .lbl { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.stat-hit { background: var(--green-bg); color: var(--green); }
.stat-miss { background: var(--red-bg); color: var(--red); }
.stat-fp { background: var(--orange-bg); color: var(--orange); }
.compare-section { margin-bottom: 14px; }
.compare-section h3 { font-size: 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  padding: 5px 12px; border-radius: 8px; font-size: 13px;
  background: var(--grey-bg); border: 1px solid var(--border);
}
.tag.hit { background: var(--green-bg); border-color: #b7dfc0; color: var(--green); }
.tag.miss { background: var(--red-bg); border-color: #f2c2c2; color: var(--red); }
.tag.fp { background: var(--orange-bg); border-color: #f0d4ad; color: var(--orange); }

/* 图片预览 */
.media-preview { max-width: 100%; max-height: 320px; border-radius: 10px; border: 1px solid var(--border); margin-top: 8px; }
.media-upload { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* 弹窗 */
.modal-mask {
  position: fixed; inset: 0 0 var(--footer-h); background: rgba(18,35,58,.4);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px;
}
.modal-box {
  background: #fff; border-radius: 14px; width: 100%; max-width: 1100px;
  max-height: 90vh; overflow: auto; padding: 24px;
}
.modal-box h2 { font-size: 16px; margin-bottom: 16px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--footer-h) + 16px); transform: translateX(-50%);
  background: #1f2328; color: #fff; padding: 10px 20px; border-radius: 8px;
  z-index: 200; font-size: 14px; max-width: 80%;
}
.hidden { display: none !important; }

/* 盲测提示 */
.blind-banner {
  background: var(--orange-bg); border: 1px solid #f0d4ad; color: var(--orange);
  padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-weight: 600;
}

/* 响应式 */
@media (max-width: 640px) {
  .compare-stats { flex-direction: column; }
  .list-item { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ============ 质检配置页（左右分栏） ============ */
.qc-page {
  position: fixed;
  top: var(--topbar-h); left: 0; right: 0; bottom: var(--footer-h);
  display: flex; flex-direction: column;
  overflow: hidden;
  background: #fff;
  z-index: 5;
}
.qc-page-bar {
  height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid #ececec;
  flex-shrink: 0;
}
.qc-page-bar .qc-bar-title { font-size: 16px; font-weight: 700; }
.qc-page-bar .qc-bar-meta { font-size: 12px; color: var(--text-2); margin-left: 12px; }
.qc-layout {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

/* 左侧导航：固定占位，自身不随右栏滚动 */
.qc-sidebar {
  flex: 0 0 200px;
  min-height: 0;
  border-right: 1px solid #ececec;
  background: #fafafa;
  padding: 16px 0;
  overflow-y: auto;
}
.qc-search {
  display: block;
  width: calc(100% - 24px);
  margin: 0 12px 14px;
  height: 32px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 0 10px;
  font-size: 13px; color: #333;
  outline: none; box-sizing: border-box;
}
.qc-search:focus { border-color: #2f6fed; }
.qc-nav-item {
  position: relative;
  height: 38px;
  padding: 0 12px 0 16px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; color: #666;
  cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qc-nav-item:hover { color: #2f6fed; }
.qc-nav-item.active { color: #2f6fed; background: #eef3ff; }
.qc-nav-item .chevron { font-size: 12px; color: #999; flex-shrink: 0; }
.qc-nav-item.active .chevron { color: #2f6fed; }

/* 子菜单卡片（hover 弹出） */
.qc-submenu {
  position: absolute;
  left: 100%; top: 0;
  min-width: 160px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  padding: 4px 0;
  display: none;
  z-index: 60;
}
.qc-nav-item:hover .qc-submenu { display: block; }
.qc-submenu-item {
  height: 32px; line-height: 32px;
  padding: 0 16px;
  font-size: 13px; color: #333;
  cursor: pointer; white-space: nowrap;
}
.qc-submenu-item:hover { background: #f5f5f5; }

/* 右侧内容区：全页唯一滚动容器 */
.qc-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 24px 24px;
  position: relative;
}
.qc-content::before,
.qc-content::after {
  content: "";
  position: sticky;
  display: block;
  height: 16px;
  pointer-events: none;
  z-index: 10;
}
.qc-content::before { top: 0; background: linear-gradient(#fff, rgba(255,255,255,0)); }
.qc-content::after { bottom: 0; background: linear-gradient(rgba(255,255,255,0), #fff); }

/* 分组：grid，轻量行横向 3 列 */
.qc-section {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 16px;
  align-items: start;
}

/* 分组标题：跨满整行 */
.qc-section-title {
  grid-column: 1 / -1;
  font-size: 14px; font-weight: 700;
  color: #8a3a2a;
  margin: 16px 0 0;
  text-align: left;
  line-height: 22px;
}
.qc-section:first-child .qc-section-title { margin-top: 0; }

/* 重行：整行独占，两列布局；项名与首行选项基线对齐 */
.qc-row-heavy {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
}
.qc-row-heavy .qc-row-name {
  width: 180px; flex-shrink: 0;
  font-size: 13px; color: #333;
  line-height: 22px;
  padding-right: 16px; box-sizing: border-box;
}
.qc-row-heavy .qc-row-options {
  flex: 1;
  display: flex; flex-wrap: wrap;
  gap: 8px 24px;
  align-items: center;
}

/* 轻量行：grid 单元，项名 + 勾选框紧凑横排 */
.qc-row-light {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}
.qc-row-light .qc-row-name {
  font-size: 13px; color: #333;
  white-space: nowrap;
  line-height: 22px;
}
.qc-row-light .qc-row-options {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* 响应式降列 */
@media (max-width: 900px) {
  .qc-section { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .qc-section { grid-template-columns: 1fr; }
}

/* 选项原子 */
.qc-option {
  display: inline-flex; align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 12.5px; color: #444;
  line-height: 22px;
}
.qc-option:hover { color: #2f6fed; }
.qc-option input[type=radio] {
  appearance: none; -webkit-appearance: none;
  width: 14px; height: 14px;
  border: 1.5px solid #c0c0c0;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  margin: 0; padding: 0;
}
.qc-option input[type=radio]:checked {
  border-color: #2f6fed;
  background: #2f6fed;
}
.qc-option input[type=radio]:checked::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 4px; height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: #fff;
}
.qc-option input[type=checkbox] {
  appearance: none; -webkit-appearance: none;
  width: 14px; height: 14px;
  border: 1.5px solid #c0c0c0;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  margin: 0; padding: 0;
  background: #fff;
}
.qc-option input[type=checkbox]:checked {
  border-color: #2f6fed;
  background: #2f6fed;
}
.qc-option input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.qc-option input[type=checkbox]:disabled {
  opacity: .4; cursor: not-allowed;
}
.qc-option .qc-info {
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 1px solid #aaa;
  color: #aaa;
  font-size: 10px; line-height: 11px;
  text-align: center;
  cursor: help;
  flex-shrink: 0;
}

/* 响应式：窄屏时项名独立成行 */
@media (max-width: 720px) {
  .qc-row-heavy { flex-direction: column; }
  .qc-row-heavy .qc-row-name { width: 100%; padding-right: 0; margin-bottom: 8px; }
}

/* ============ 企业浅色工作台 ============ */
body { background: #f5f7fa; min-height: 100vh; }
.topbar { box-shadow: none; }
.btn { min-height: 40px; justify-content: center; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.btn-primary { box-shadow: none; }
.btn-primary:hover { transform: none; box-shadow: none; }
.card { box-shadow: none; border-radius: 12px; }
.stat-box { border-radius: 8px; }
.btn-block { width: 100%; justify-content: center; padding: 12px 16px; font-size: 14px; }
.eyebrow { display: block; color: var(--primary); font-size: 11px; font-weight: 600; letter-spacing: 1.4px; margin-bottom: 8px; }
.workspace-head { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 24px; }
.workspace-head h1 { font-size: 28px; line-height: 1.4; color: var(--navy); font-weight: 650; }
.workspace-head p { margin-top: 8px; color: var(--text-2); font-size: 14px; }
.workspace-status { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 12px; white-space: nowrap; }
.security-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: var(--green); flex-shrink: 0; }
.workspace-status.auth-pending { color: var(--orange); }
.auth-pending .security-dot { background: var(--orange); }
.pending-metric { color: var(--text-2); font-size: 12px; font-weight: 400; }
.stat-caption { color: var(--text-2); font-size: 12px; margin: -8px 0 16px; }
.home-workspace { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: 24px; align-items: start; }
.home-workspace .card { margin-bottom: 0; }
.task-card { padding: 32px; }
.section-heading { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 32px; }
.section-marker { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; color: var(--primary); background: var(--primary-bg); font-size: 14px; font-weight: 600; flex-shrink: 0; }
.section-heading h2, .guide-card h2, .learning-card h2 { font-size: 18px; font-weight: 600; margin: 0 0 4px; }
.section-heading p { color: var(--text-2); font-size: 13px; }
.task-card .field { margin-bottom: 24px; }
.task-card .field label { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.task-card .field input { min-height: 48px; padding: 12px 16px; background: #fff; }
.task-card .field input[readonly] { background: var(--grey-bg); color: var(--text-2); cursor: default; }
.task-card .field .hint { font-size: 12px; margin-top: 8px; font-weight: 400; }
.required-mark { color: var(--primary); }
.task-actions { display: flex; gap: 12px; margin-top: 32px; }
.task-actions .btn { min-height: 48px; flex: 1; padding: 12px 16px; }
.task-actions .btn-primary { flex: 1.25; justify-content: space-between; }
.task-mode-note { border-top: 1px solid var(--border); margin-top: 32px; padding-top: 24px; }
.task-mode-note strong { font-size: 12px; font-weight: 600; }
.task-mode-note p { color: var(--text-2); font-size: 12px; margin-top: 8px; line-height: 1.8; }
.workspace-side { display: grid; gap: 24px; }
.guide-card, .learning-card { padding: 24px; }
.guide-steps { list-style: none; display: grid; gap: 24px; margin-top: 24px; }
.guide-steps li { display: flex; align-items: flex-start; gap: 12px; }
.guide-steps li > span { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--primary); background: var(--primary-bg); border-radius: 50%; font-size: 11px; font-weight: 600; flex-shrink: 0; }
.guide-steps strong { font-size: 13px; font-weight: 600; }
.guide-steps p { color: var(--text-2); font-size: 12px; margin-top: 4px; }
.records-hint { color: var(--text-2); font-size: 12px; margin-top: 12px; }
.secondary-links { display: grid; gap: 8px; margin-top: 16px; }
.secondary-link { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; text-align: left; background: var(--grey-bg); border: 1px solid transparent; border-radius: 8px; color: var(--text); cursor: pointer; }
.secondary-link strong { font-size: 13px; font-weight: 600; display: block; }
.secondary-link small { display: block; color: var(--text-2); font-size: 11px; margin-top: 4px; }
.secondary-link > span:last-child { color: var(--primary); margin-left: 16px; }
.secondary-link:hover { background: var(--primary-bg); border-color: #d5e2f7; }
.secondary-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.page-subtitle { color: var(--text-2); font-size: 13px; margin-top: 8px; }
.page-head h2 { font-size: 24px; color: var(--navy); line-height: 1.4; }

/* 企业会话登录：品牌说明与安全登录双栏 */
.login-container { max-width: 1152px; margin: 40px auto; }
.login-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: 560px; background: #fff; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.login-story { padding: 48px 40px; background: #eff4fb; position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.login-story > .eyebrow { font-size: 10px; margin-bottom: 24px; color: #526c91; }
.login-story h1 { color: var(--navy); font-size: 32px; font-weight: 650; line-height: 1.5; letter-spacing: -.5px; }
.login-intro { color: #5d708b; font-size: 14px; line-height: 1.9; margin-top: 16px; }
.story-flow { display: grid; gap: 24px; margin-top: 40px; }
.story-flow > div { display: flex; gap: 16px; align-items: flex-start; }
.step-number { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid #cbd9ec; border-radius: 8px; font-size: 11px; color: var(--navy); flex-shrink: 0; }
.story-flow strong { font-size: 13px; font-weight: 600; color: var(--navy); }
.story-flow p { margin-top: 4px; font-size: 12px; color: #697c96; }
.story-note { padding-top: 40px; margin-top: auto; color: #71839c; font-size: 11px; }
.login-panel { padding: 56px 48px; display: flex; flex-direction: column; justify-content: center; }
.login-mark { width: 48px; height: 48px; background: var(--navy); color: #fff; border-radius: 12px; display: flex; justify-content: center; align-items: center; font-size: 18px; font-weight: 600; letter-spacing: 1px; margin-bottom: 32px; }
.login-panel > .eyebrow { font-size: 10px; color: var(--text-2); }
.login-panel h2 { font-size: 26px; color: var(--navy); line-height: 1.4; font-weight: 650; }
.login-subtitle { font-size: 13px; color: var(--text-2); margin-top: 12px; }
.login-button { margin-top: 40px; min-height: 48px; position: relative; }
.login-button > span { position: absolute; right: 16px; }
.login-button:disabled { background: #dce3ed; color: #748298; border-color: #dce3ed; opacity: 1; }
.login-config-hint { font-size: 12px; color: var(--text-2); margin-top: 12px; text-align: center; line-height: 1.8; }
.login-security { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 11px; color: #6d7c91; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); }
.login-help { font-size: 11px; color: #7c889a; text-align: center; margin-top: 12px; }
.login-notice { background: var(--primary-bg); color: var(--navy); padding: 12px 16px; font-size: 12px; border-radius: 8px; margin-top: 24px; }
.login-retry { margin-top: 16px; font-size: 12px; }
.session-loading { text-align: center; padding: 120px 16px; }
.session-loading h2 { font-size: 18px; color: var(--navy); margin-top: 24px; }
.session-loading p { font-size: 13px; color: var(--text-2); margin-top: 8px; }
.loading-indicator { display: inline-block; width: 24px; height: 24px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: loading-spin .8s linear infinite; }
@keyframes loading-spin { to { transform: rotate(360deg); } }
.connection-error { margin-top: 64px; text-align: center; padding: 40px; }
.connection-error p { color: var(--text-2); margin-bottom: 24px; }
.rank-label { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; background: var(--grey-bg); color: var(--text-2); border-radius: 4px; font-size: 12px; }

@media (max-width: 900px) {
  .home-workspace { grid-template-columns: minmax(0, 1.25fr) minmax(260px, 1fr); gap: 16px; }
  .task-card { padding: 24px; }
  .workspace-side { gap: 16px; }
  .login-story { padding: 40px 32px; }
  .login-story h1 { font-size: 28px; }
  .login-panel { padding: 40px 32px; }
  .login-panel h2 { font-size: 23px; }
  .account-label { max-width: 150px; }
}
@media (max-width: 720px) {
  :root { --topbar-h: 88px; }
  .topbar { height: var(--topbar-h); padding: 8px 16px; gap: 8px; flex-wrap: wrap; align-content: center; }
  .brand { gap: 8px; }
  .brand-caption { display: none; }
  .title { font-size: 14px; }
  .logo { width: 28px; height: 28px; }
  .beta-badge { font-size: 8px; }
  .role-switch { gap: 6px; margin-left: auto; }
  .role-btn { padding: 6px 10px; font-size: 12px; min-height: 32px; }
  .account-label { display: none; }
  .container { margin: 24px auto; padding: 0 16px calc(var(--footer-h) + 24px); }
  .workspace-head { align-items: flex-start; gap: 12px; }
  .workspace-head h1 { font-size: 24px; }
  .workspace-head p { font-size: 12px; }
  .workspace-status { font-size: 10px; padding-top: 8px; }
  .home-workspace { grid-template-columns: 1fr; gap: 16px; }
  .workspace-side { grid-template-columns: 1fr 1fr; align-items: start; }
  .guide-card, .learning-card { padding: 20px; }
  .section-heading { margin-bottom: 24px; }
  .task-actions { margin-top: 24px; }
  .task-mode-note { margin-top: 24px; padding-top: 16px; }
  .login-layout { grid-template-columns: 1fr; min-height: auto; }
  .login-story { padding: 32px; }
  .login-story > .eyebrow { margin-bottom: 16px; }
  .login-story h1 { font-size: 26px; }
  .login-intro { font-size: 13px; }
  .story-flow, .story-note { display: none; }
  .login-panel { padding: 32px; }
  .login-mark { width: 40px; height: 40px; font-size: 16px; margin-bottom: 24px; }
  .login-button { margin-top: 24px; }
  .page-head { gap: 16px; align-items: flex-start; }
  .page-head h2 { font-size: 20px; }
  .qc-page-bar { height: auto; min-height: 72px; padding: 12px 16px; gap: 12px; }
  .qc-page-bar .qc-bar-meta { display: block; margin-left: 0; font-size: 11px; }
  .qc-sidebar { flex-basis: 144px; padding-top: 12px; }
  .qc-nav-item { padding: 0 8px 0 12px; font-size: 12px; }
  .qc-content { padding: 0 16px 24px; }
  .qc-option { font-size: 13px; min-height: 32px; }
  .qc-option input[type=radio], .qc-option input[type=checkbox] { width: 16px; height: 16px; }
  .qc-option input[type=checkbox]:checked::after { left: 5px; top: 2px; }
  .modal-mask { padding: 16px; }
  .modal-box { padding: 20px; max-height: calc(100dvh - var(--footer-h) - 32px); }
}
@media (max-width: 480px) {
  .workspace-side { grid-template-columns: 1fr; }
  .workspace-status { display: none; }
  .task-card, .guide-card, .learning-card { padding: 24px; }
  .task-actions { flex-direction: column; gap: 8px; }
  .task-actions .btn-primary { justify-content: center; gap: 12px; }
  .login-story, .login-panel { padding: 24px; }
  .login-story h1 { font-size: 23px; }
  .login-panel h2 { font-size: 22px; }
  .desktop-break { display: none; }
  .qc-sidebar { flex-basis: 112px; }
  .qc-search { font-size: 11px; padding: 0 6px; width: calc(100% - 16px); margin: 0 8px 12px; }
  .qc-page-bar { flex-wrap: wrap; }
  .qc-page-bar > div:last-child { width: 100%; justify-content: flex-end; }
  .qc-row-light { flex-wrap: wrap; gap: 8px; }
}

/* 输入框聚焦高亮 */
.field input[type=text]:focus, .field textarea:focus, .qc-search:focus {
  border-color: #2f6fed;
  box-shadow: 0 0 0 3px rgba(47,111,237,.10);
}

/* ============ 数据看板 ============ */
.dash-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.kpi-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  box-shadow: none;
  display: flex; align-items: center; gap: 14px;
}
.kpi-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.kpi-num { font-size: 28px; font-weight: 650; line-height: 1.3; margin-top: 8px; }
.kpi-lbl { font-size: 12px; color: var(--text-2); }

.dash-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.dash-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  box-shadow: none;
  margin-bottom: 16px;
}
.dash-panel h3 { font-size: 14px; margin-bottom: 16px; }

/* 环形图 */
.donut-wrap { display: flex; align-items: center; gap: 24px; }
.donut {
  width: 120px; height: 120px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
.donut::after {
  content: "";
  position: absolute;
  inset: 28px;
  background: #fff;
  border-radius: 50%;
}
.donut-legend { flex: 1; }
.lg-item { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; }
.lg-item .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.lg-item .lg-n { margin-left: auto; color: #59636e; }

/* 条形图 */
.bar-row { margin-bottom: 14px; }
.bar-lbl { display: flex; justify-content: space-between; font-size: 12px; color: #333; margin-bottom: 5px; gap: 12px; }
.bar-lbl span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-lbl span:last-child { flex-shrink: 0; color: #59636e; }
.bar-track { height: 8px; background: #eef1f5; border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 4px; transition: width .3s ease; }

@media (max-width: 800px) {
  .dash-charts { grid-template-columns: 1fr; }
}

/* ============ 点击反馈优化 ============ */
/* 按钮：涟漪容器（overflow 裁剪涟漪，box-shadow 不受裁剪影响） */
.btn, .role-btn { position: relative; overflow: hidden; }

/* 涟漪动画 */
.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple .5s ease-out;
  pointer-events: none;
  background: rgba(47, 111, 237, .16);
}
.btn-primary .ripple { background: rgba(255, 255, 255, .5); }
@keyframes ripple {
  to { transform: scale(1); opacity: 0; }
}

/* 按钮按压态：保持布局稳定，仅调整底色 */
.btn:active { transform: none; }
.btn-primary:active { transform: none; box-shadow: none; background: #194b9e; }
.btn:disabled, .btn:disabled:hover, .btn:disabled:active { transform: none; box-shadow: none; }
.login-button:disabled, .login-button:disabled:hover, .login-button:disabled:active { background: #dce3ed; border-color: #dce3ed; color: #748298; opacity: 1; }
.btn:focus-visible, .role-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* 顶栏角色切换按钮 */
.role-btn { transition: all .18s ease; }
.role-btn:hover { border-color: var(--primary); color: var(--primary); }
.role-btn:active { transform: none; background: var(--primary-bg); }
.role-btn.active:hover, .role-btn.active:active { color: #fff; background: #194b9e; }

/* 标准树展开/收起行：平滑过渡 + 按压反馈 */
.std-row { transition: background .15s ease; }
.std-row.clickable:active { background: #d9e6ff; }

/* 列表项：轻量描边反馈 */
.list-item { transition: border-color .15s ease; }
.list-item:hover { box-shadow: none; border-color: #bdcde5; }
.list-item .btn-danger { margin-left: 6px; }

/* 侧边导航 + 子菜单：按压反馈 */
.qc-nav-item { transition: background .15s ease, color .15s ease; }
.qc-nav-item:active { background: #e4edff; }
.qc-submenu-item { transition: background .12s ease, color .12s ease; }
.qc-submenu-item:active { background: #e4edff; }

/* 质检选项（radio / checkbox 行）：点击反馈 */
.qc-option { transition: color .15s ease; }
.qc-option:active { color: var(--primary); }
.qc-option input[type=radio],
.qc-option input[type=checkbox] {
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.qc-option input[type=radio]:active,
.qc-option input[type=checkbox]:active { transform: scale(1.18); }

/* 危险按钮（删除） */
.btn-danger { border-color: #f2c2c2; color: var(--red); }
.btn-danger:hover { background: var(--red-bg); border-color: #f0a3a3; }
.btn-danger:active { background: #f5cccc; transform: none; }
.btn-danger .ripple { background: rgba(207, 34, 46, .14); }

/* 学员首页次要入口（我的作答记录） */
.btn-records { margin-top: 10px; border: none; color: var(--text-2); background: transparent; }
.btn-records:hover { color: var(--primary); background: var(--grey-bg); }

/* 学员首页数据看板入口 */
.btn-board { margin-top: 10px; border-style: solid; border-color: var(--primary); color: var(--primary); background: var(--primary-bg); }
.btn-board:hover { background: #d9e6ff; }

/* ============ 质检报告弹窗 ============ */
.btn-report { margin-top: 6px; }
.report-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.report-head h2 { font-size: 16px; margin: 0; }
.report-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; margin-bottom: 18px;
}
.report-kv { background: var(--grey-bg); border-radius: 8px; padding: 8px 12px; }
.report-kv span { display: block; font-size: 11px; color: var(--text-2); margin-bottom: 2px; }
.report-kv b { font-size: 13px; font-weight: 600; }
.report-section h3 { font-size: 14px; margin-bottom: 10px; }
.report-item {
  border: 1px solid #f2c2c2; background: var(--red-bg);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 10px;
}
.report-item-name { font-weight: 600; color: var(--red); }
.report-item-path { font-size: 12px; color: var(--text-2); margin: 2px 0 6px; }
.report-item-img { max-width: 100%; max-height: 220px; border-radius: 8px; border: 1px solid var(--border); display: block; }
.report-ok { background: var(--green-bg); color: var(--green); border-radius: 10px; padding: 14px; text-align: center; font-weight: 600; }
.report-loading { text-align: center; color: var(--text-2); padding: 40px 0; }

/* ============ 确认弹窗（替代原生 confirm） ============ */
.confirm-modal-box { max-width: 420px; }
.confirm-box h2 { font-size: 16px; margin-bottom: 10px; }
.confirm-msg { color: var(--text-2); font-size: 14px; line-height: 1.6; margin-bottom: 20px; white-space: pre-line; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }
.confirm-error { color: var(--red); background: var(--red-bg); border-radius: 8px; padding: 8px 12px; font-size: 13px; margin-bottom: 12px; }
.btn:disabled { opacity: .6; cursor: not-allowed; }

/* 报告异常项摘要（固化到题目，供导师手动勾选参考） */
.report-summary-box {
  background: var(--orange-bg);
  border: 1px solid #f0d4ad;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-line;
  color: var(--orange);
  max-height: 220px;
  overflow-y: auto;
}

/* 技能培训入口按钮（次级：主题色描边 + 浅底） */
.btn-train { border-style: solid; border-color: var(--primary); color: var(--primary); background: var(--primary-bg); }
.btn-train:hover { background: #d9e6ff; }

/* 技能培训：填写标准依据弹窗 */
.note-item-name {
  background: var(--grey-bg);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}
.note-input {
  width: 100%;
  min-height: 72px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  margin-bottom: 16px;
  box-sizing: border-box;
}
.note-input:focus { border-color: var(--primary); outline: none; }

/* 对比结果里的学员备注 */
.tag-note {
  display: block;
  font-size: 11px;
  color: var(--text-2);
  margin-top: 3px;
  line-height: 1.4;
}

/* 导师端多维统计 */
.dash-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.stat-table-wrap { overflow-x: auto; }
.stat-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.stat-table th, .stat-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #eef1f5;
  white-space: nowrap;
}
.stat-table thead th {
  color: var(--text-2); font-weight: 600; font-size: 12px;
  background: var(--grey-bg);
}
.stat-table tbody tr:hover { background: var(--grey-bg); }
.c-green { color: var(--green); }
.c-red { color: var(--red); }
.c-orange { color: var(--orange); }

@media (max-width: 800px) {
  .dash-stats { grid-template-columns: 1fr; }
}

/* 作答列表概览 + 每条作答迷你统计 */
.attempt-summary {
  display: flex; gap: 14px; margin-bottom: 16px; flex-wrap: wrap;
}
.as-item {
  flex: 1; min-width: 120px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 16px; text-align: center;
  box-shadow: none;
}
.as-item b { display: block; font-size: 22px; font-weight: 700; }
.as-item span { font-size: 12px; color: var(--text-2); }
.attempt-mini-stats { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.mini-hit, .mini-miss, .mini-fp { font-size: 12px; padding: 2px 8px; border-radius: 20px; }
.mini-hit { background: var(--green-bg); color: var(--green); }
.mini-miss { background: var(--red-bg); color: var(--red); }
.mini-fp { background: var(--orange-bg); color: var(--orange); }
.mini-pending { font-size: 12px; color: var(--text-2); margin-top: 6px; }

/* ============ 全局页脚：ICP 备案号（合规要求，全站固定展示） ============ */
.site-footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--footer-h);
  display: flex; align-items: center; justify-content: center;
  padding: 0 16px env(safe-area-inset-bottom, 0px);
  background: #fff;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-2);
  z-index: 150;
}
.site-footer a {
  color: var(--text-2);
  text-decoration: none;
  transition: color .15s ease;
}
.site-footer a:hover { color: var(--primary); text-decoration: underline; }

/* ============ 导师端：待办聚合 ============ */
.todo-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px rgba(31, 65, 120, .05);
}
.todo-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.todo-head h3 { font-size: 15px; margin: 0; }
.todo-total {
  font-size: 12px; color: var(--text-2);
  background: var(--grey-bg); border-radius: 20px; padding: 2px 10px;
}
.todo-total-active { background: var(--primary-bg); color: var(--primary); font-weight: 600; }
.todo-empty { color: var(--text-2); font-size: 13px; padding: 6px 0; }
.todo-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.todo-group { background: var(--grey-bg); border-radius: 10px; padding: 12px 14px; }
.todo-group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.todo-group-label { font-size: 13px; font-weight: 600; }
.todo-group-num {
  font-size: 12px; font-weight: 600; color: #fff; background: var(--primary);
  border-radius: 20px; padding: 1px 8px;
}
.todo-group-hint { font-size: 11.5px; color: var(--text-2); }
.todo-item {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; margin-bottom: 6px;
}
.todo-item-title {
  flex: 1; min-width: 0; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.todo-item-code { font-size: 11.5px; color: var(--text-2); flex-shrink: 0; }
.todo-more { font-size: 12px; color: var(--text-2); margin-top: 4px; }

/* ============ 导师端：行内操作收敛 ============ */
.row-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; position: relative; }
.row-more { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.btn-more { color: var(--text-2); }
.badge-pending-reveal { background: var(--orange-bg); color: var(--orange); }
.filter-bar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.cell-note { display: block; font-size: 11px; color: var(--orange); margin-top: 2px; }

@media (max-width: 720px) {
  .todo-item { flex-wrap: wrap; }
  .todo-item-title { flex-basis: 100%; }
  .list-item .row-actions { width: 100%; }
}

/* ============ 响应式与触控优化 ============
   实测发现（375/768/1440 三档审计）：
   1) 导师端 .dash-panel 在 375px 下宽 386px 撑破视口 —— grid 子项 min-width:auto 所致；
   2) 质检作答页 438 个可点元素高度 < 32px，手机难以点中；
   3) 质检作答页侧栏固定 200px，在 375px 屏上占掉一半以上。
   以下为针对性修复。 */

/* 1. 栅格子项允许收缩，消除横向溢出 */
.dash-kpis > *,
.dash-charts > *,
.dash-stats > *,
.todo-groups > *,
.qc-section > * { min-width: 0; }
.dash-panel, .kpi-card, .todo-group, .stat-table-wrap { min-width: 0; max-width: 100%; }
.li-main { min-width: 0; }

/* 2. 触控目标：放大可点区域（视觉尺寸不变，避免影响勾选样式）
   平板也常触屏操作，故放宽到 900px */
@media (max-width: 900px) {
  .qc-option { min-height: 40px; padding: 6px 4px; gap: 10px; }
  .qc-row-light { min-height: 40px; }
  .qc-row-heavy .qc-row-options { gap: 2px 18px; }
}
@media (max-width: 720px) {
  .btn { min-height: 40px; }
  .btn-sm { min-height: 34px; padding: 7px 12px; }
  .field input[type=text], .field textarea, .note-input { min-height: 44px; }
  .role-btn { min-height: 38px; padding: 8px 12px; }
}

/* 3. 质检作答页：侧栏改为横向可滑动导航，内容区占满宽度 */
@media (max-width: 900px) {
  .qc-row-heavy .qc-row-options { min-width: 0; }
  .qc-option { max-width: 100%; }
  .qc-option span { overflow-wrap: anywhere; }
  .qc-row-heavy .qc-row-name { min-width: 0; }
}
@media (max-width: 720px) {
  .qc-layout { flex-direction: column; }
  /* 侧栏是嵌套树结构，改横向 chip 会退化成竖排；改为限高 + 内部滚动 */
  .qc-sidebar {
    flex: 0 0 auto; width: 100%; max-height: 148px;
    overflow-y: auto; overflow-x: hidden;
    padding: 10px 0; border-right: none; border-bottom: 1px solid #ececec;
    -webkit-overflow-scrolling: touch;
  }
  .qc-nav-item { height: 36px; }
  .qc-submenu { display: none; }
  .qc-content { padding: 0 12px 24px; }
  .qc-section { grid-template-columns: 1fr; }
  .qc-row-heavy .qc-row-name { width: 100%; padding-right: 0; margin-bottom: 6px; }
  .qc-page-bar { padding: 0 14px; }
  .qc-page-bar .qc-bar-meta { display: block; margin: 2px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}