/* ==========================================================================
   Modern Art & Shadcn Design System (综合高颜值后台与精美UI规范)
   灵感综合自：Light-Shadcn-Admin + Art Design Pro + Uiverse + Square UI
   ========================================================================== */

/* ==========================================================================
   GitHub Primer Design System Tokens
   ========================================================================== */
:root {
  /* GitHub Primer Color Canvas */
  --canvas-default: #f6f8fa;
  --canvas-overlay: #ffffff;
  --canvas-inset: #f6f8fa;
  --canvas-subtle: #f6f8fa;
  
  --border-default: #d0d7de;
  --border-muted: #d8dee4;
  --border-subtle: #e1e4e8;
  --border-focus: #0969da;

  --fg-default: #1f2328;
  --fg-muted: #656d76;
  --fg-subtle: #8c959f;
  --fg-on-emphasis: #ffffff;

  /* GitHub Accent (Blue) */
  --accent-fg: #0969da;
  --accent-emphasis: #0969da;
  --accent-muted: #ddf4ff;
  --accent-subtle: #f0f8ff;

  /* GitHub Success (Iconic Green - New Issue / Submit) */
  --success-fg: #1a7f37;
  --success-emphasis: #1f883d;
  --success-hover: #1a7f37;
  --success-active: #187431;
  --success-muted: #dafbe1;
  --success-subtle: #f0fff4;

  /* GitHub Attention / Warning */
  --attention-fg: #9a6700;
  --attention-emphasis: #9a6700;
  --attention-muted: #fff8c5;
  --attention-subtle: #fffdf5;

  /* GitHub Danger (Red) */
  --danger-fg: #cf222e;
  --danger-emphasis: #cf222e;
  --danger-hover: #a40e26;
  --danger-muted: #ffebe9;
  --danger-subtle: #fff8f8;

  /* GitHub Purples */
  --done-fg: #8250df;
  --done-emphasis: #8250df;
  --done-muted: #fbefff;

  /* GitHub Shadows & Radii */
  --shadow-btn: 0 1px 0 rgba(31, 35, 40, 0.04);
  --shadow-btn-primary: 0 1px 0 rgba(31, 35, 40, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --shadow-box: 0 1px 3px rgba(31, 35, 40, 0.12), 0 1px 2px rgba(31, 35, 40, 0.06);
  --shadow-overlay: 0 1px 3px rgba(31, 35, 40, 0.12), 0 8px 24px rgba(66, 74, 83, 0.12);

  --radius-sm: 4px;
  --radius-md: 6px;       /* GitHub Box standard radius */
  --radius-lg: 6px;
  --radius-full: 9999px;

  /* Compatibility bindings for existing app.js and templates */
  --bg-app: var(--canvas-default);
  --bg-card: #ffffff;
  --bg-card-hover: #f6f8fa;
  --bg-inset: #f6f8fa;
  --border: var(--border-default);
  --border-subtle: var(--border-muted);
  --fg-main: var(--fg-default);
  --primary: var(--accent-fg);
  --primary-hover: #085bc3;
  --primary-light: var(--accent-muted);
  --primary-border: #bfdbfe;
  --success: var(--success-emphasis);
  --success-text: var(--success-fg);
  --success-light: var(--success-muted);
  --warning: var(--attention-fg);
  --warning-text: var(--attention-fg);
  --warning-light: var(--attention-muted);
  --danger: var(--danger-emphasis);
  --danger-text: var(--danger-fg);
  --danger-light: var(--danger-muted);
  --line: var(--border-default);
  --muted: var(--fg-muted);
  --teal: var(--fg-default);

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--bg-app); font-size: 14px; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
input[type="file"].visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* 页面顶栏 (Shadcn Modern Glass Header) */
.page-shell { min-height: 100vh; padding-bottom: 120px; }
.topbar {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(28px, calc((100vw - 1360px) / 2));
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--shadow-xs);
}
.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  color: var(--fg-main);
  text-decoration: none;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  color: #ffffff;
  font-weight: 800;
  font-size: 16px;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
}
.brand strong { display: block; font-size: 15px; font-weight: 700; color: var(--fg-main); letter-spacing: -0.01em; }
.brand small { color: var(--fg-muted); font-size: 12px; margin-top: 1px; display: block; font-weight: 400; }
.topbar nav { display: flex; gap: 8px; align-items: center; }
.topbar nav a {
  color: var(--fg-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.topbar nav a:hover {
  background: var(--bg-card-hover);
  color: var(--primary);
}

/* 主内容容器 */
.content {
  max-width: 1360px;
  margin: 0 auto;
  padding: 28px 24px;
}

/* 顶部 Dashboard 形象横幅 (Shadcn + Art Design Gradient Card) */
.hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border: 1px solid #334155;
  border-radius: var(--radius-lg);
  color: #ffffff;
  padding: 26px 32px;
  display: flex;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  top: -50%;
  right: -10%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
}
.hero h1 { font-size: 24px; font-weight: 700; line-height: 1.25; margin: 4px 0 6px; color: #ffffff; letter-spacing: -0.02em; }
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
  color: #60a5fa;
}
.hero-summary { margin: 0; color: #94a3b8; font-size: 13px; }
.compact-hero { padding: 20px 28px; }

/* 现代化数据指标卡片 (Metrics Grid) */
.metrics { display: flex; gap: 12px; z-index: 1; }
.metrics div {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  min-width: 120px;
  text-align: center;
  transition: all 0.2s ease;
}
.metrics div:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}
.metrics span { display: block; font-size: 12px; color: #cbd5e1; font-weight: 500; }
.metrics strong { font-size: 20px; font-weight: 700; display: block; margin-top: 2px; color: #ffffff; font-family: ui-monospace, SFMono-Regular, monospace; }

/* 核心工作区两栏结构 */
.workspace {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 24px;
  margin-top: 20px;
}
.left-column { display: grid; gap: 20px; align-content: start; }

/* 核心面板卡片 (Shadcn Elevated Box) */
.panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease;
}
.panel:hover { box-shadow: var(--shadow-md); }
.panel-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 16px 22px;
  background: #ffffff;
  border-bottom: 1px solid var(--border-subtle);
}
.panel-heading h2, .panel h2 { font-size: 15px; font-weight: 700; margin: 0 0 2px; color: var(--fg-main); letter-spacing: -0.01em; }
.panel-heading p, .panel p { font-size: 12px; color: var(--fg-muted); margin: 0; line-height: 1.5; }

/* 待办提示任务条 (Task item) */
.task-list { padding: 0; }
.task {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transition: background 0.15s ease;
}
.task:hover { background: var(--bg-card-hover); }
.task:last-child { border: 0; }
.task strong { font-size: 13px; font-weight: 600; color: var(--fg-main); }
.task p { margin: 4px 0 0; font-size: 12px; color: var(--fg-muted); line-height: 1.45; }
.task-body { flex: 1; }

/* 状态标签徽标 (Shadcn Badges / Pills) */
.status {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.status.waiting {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}
.status.review {
  background: var(--primary-light);
  color: var(--primary);
  border: 1px solid var(--primary-border);
}
.status.passed {
  background: var(--success-light);
  color: var(--success-text);
  border: 1px solid var(--success-border);
}
.status.returned {
  background: var(--danger-light);
  color: var(--danger-text);
  border: 1px solid var(--danger-border);
}

/* 时间线流水推进 (Timeline) */
.timeline { list-style: none; padding: 18px 24px; margin: 0; }
.timeline li {
  display: flex;
  gap: 14px;
  position: relative;
  padding: 0 0 20px;
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li:not(:last-child):before {
  content: "";
  position: absolute;
  left: 7px;
  top: 16px;
  bottom: 0;
  border-left: 2px dashed #cbd5e1;
}
.timeline span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  background: #ffffff;
  z-index: 1;
  margin-top: 3px;
  transition: all 0.2s ease;
}
.timeline .done span {
  border-color: var(--success);
  background: var(--success);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}
.timeline .current span {
  border-color: var(--primary);
  background: #ffffff;
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.3);
}
.timeline strong { font-size: 13px; font-weight: 600; color: var(--fg-main); }
.timeline small { display: block; color: var(--fg-muted); margin-top: 2px; font-size: 12px; }

/* 步骤导航条 (Shadcn Segmented Control / Step Navigation) */
.step-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  background: #ffffff;
  padding: 6px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}
.step-btn {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 13px;
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.step-btn:hover:not(:disabled) {
  background: var(--bg-card-hover);
  color: var(--fg-main);
}
.step-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 进度条 */
.progress-line {
  height: 6px;
  background: var(--border-subtle);
  margin: 16px 20px 0;
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress-line span {
  height: 100%;
  display: block;
  background: linear-gradient(90deg, #10b981, #059669);
  width: 0;
  border-radius: var(--radius-full);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 材料网格 (Interactive Grid Cards) - 综合 Shadcn + Art Design Pro 高级质感 */
.materials-grid {
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.material-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  min-height: 250px;
  background: #ffffff;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-sm);
  position: relative;
}
.material-card:hover {
  border-color: var(--primary-border);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.material-card .card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.material-number {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  color: var(--fg-muted);
  font-weight: 700;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.material-card h3 { margin: 0; flex: 1; font-size: 15px; font-weight: 700; color: var(--fg-main); }
.material-card .requirement {
  font-size: 13px;
  color: var(--fg-muted);
  line-height: 1.55;
  margin: 14px 0;
  flex: 1;
}

/* 现代化美观上传槽位与文件展示区 (Shadcn Dropzone & File Pill) */
.file-list {
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: var(--radius-md);
  margin: 0 0 14px;
  padding: 12px 14px;
  min-height: 48px;
  display: flex;
  align-items: center;
  font-size: 13px;
  transition: all 0.2s ease;
}
.file-list.has-file {
  background: var(--success-light);
  border: 1px solid var(--success-border);
}
.file-list a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-main);
  text-decoration: none;
  font-weight: 600;
  word-break: break-all;
}
.file-list a:hover { color: var(--primary); text-decoration: underline; }
.file-badge-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #ffffff;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-xs);
  flex-shrink: 0;
  margin-right: 8px;
  font-size: 14px;
}
.feedback {
  font-size: 12px;
  color: var(--danger-text);
  line-height: 1.45;
  margin: 0 0 12px;
  padding: 8px 12px;
  background: var(--danger-light);
  border: 1px solid var(--danger-border);
  border-radius: var(--radius-sm);
}
.material-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}
.material-upload-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}
.material-upload-btn.ready {
  background: #f1f5f9;
  color: var(--fg-main);
  border: 1px solid var(--border);
}
.material-upload-btn.ready:hover {
  background: #e2e8f0;
  border-color: #cbd5e1;
}
.material-upload-btn.empty {
  background: #ffffff;
  color: var(--primary);
  border: 1px dashed var(--primary);
}
.material-upload-btn.empty:hover {
  background: var(--primary-light);
}
.feedback {
  font-size: 12px;
  color: var(--danger-text);
  line-height: 1.45;
  margin: 0 0 10px;
  padding: 6px 10px;
  background: var(--danger-light);
  border: 1px solid var(--danger-border);
  border-radius: var(--radius-sm);
}
.material-actions { display: flex; gap: 8px; margin-top: auto; }
.material-actions .button { flex: 1; }

/* 现代按钮系统 (Shadcn + Art Design Button Styles) */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  background: #ffffff;
  color: var(--fg-main);
  box-shadow: var(--shadow-xs);
}
.button:hover {
  background: var(--bg-card-hover);
  border-color: #cbd5e1;
}
.button.primary {
  color: #ffffff;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-color: #059669;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
}
.button.primary:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}
.button.secondary {
  color: var(--fg-main);
  background: #ffffff;
  border-color: var(--border);
}
.button.secondary:hover {
  background: var(--bg-card-hover);
  border-color: #cbd5e1;
}
.button.danger {
  color: #ffffff;
  background: var(--danger);
  border-color: var(--danger);
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.25);
}
.button.danger:hover {
  background: var(--danger-hover);
}
.button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

/* 管理端标签栏 (Shadcn Tabs) */
.admin-tabs {
  display: flex;
  gap: 8px;
  margin: 20px 0;
  background: #e2e8f0;
  padding: 4px;
  border-radius: var(--radius-md);
}
.tab {
  border: none;
  background: transparent;
  padding: 8px 18px;
  color: var(--fg-muted);
  font-weight: 600;
  font-size: 13px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.tab:hover {
  color: var(--fg-main);
}
.tab.active {
  background: #ffffff;
  color: var(--fg-main);
  box-shadow: var(--shadow-sm);
}

/* 管理端控制台工具条 */
.admin-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  background: #ffffff;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}

/* 通知面板与抽屉 (Alert bar) */
.notification-panel {
  margin-bottom: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #ffffff;
  box-shadow: var(--shadow-xs);
}
.notification-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  background: #ffffff;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  user-select: none;
}
.notification-head:hover { background: var(--bg-card-hover); }
.notification-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
}
.notification-badge.has-error {
  background: var(--danger-light);
  color: var(--danger-text);
  border: 1px solid var(--danger-border);
}
.notification-badge.normal {
  background: var(--primary-light);
  color: var(--primary);
  border: 1px solid var(--primary-border);
}
.notification-toggle-icon {
  font-size: 11px;
  color: var(--fg-muted);
  transition: transform 0.2s ease;
}
.notification-toggle-icon.open { transform: rotate(180deg); }
.notification-body { max-height: 280px; overflow-y: auto; }
.notification-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-subtle);
  background: #ffffff;
}
.notification-row:last-child { border-bottom: 0; }
.notification-row:hover { background: var(--bg-card-hover); }

/* 审核员工列表 (Employee Card) - 高级中台卡片化改造 */
.review-list { display: grid; gap: 20px; }
.review-employee {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}
.review-employee:hover {
  border-color: #cbd5e1;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}
.review-employee.archived {
  opacity: 0.8;
  background: #f8fafc;
}
.review-header {
  padding: 16px 22px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.review-header h2 { font-size: 16px; font-weight: 800; margin: 0; color: var(--fg-main); display: flex; align-items: center; gap: 8px; }
.review-header p { margin: 4px 0 0; font-size: 12px; color: var(--fg-muted); }
.review-materials {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.review-row {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
.review-row:hover {
  border-color: #93c5fd;
  box-shadow: 0 3px 8px rgba(37, 99, 235, 0.08);
}
.review-row .review-title { flex: 1; font-size: 13px; }
.review-row .review-title strong { font-size: 14px; font-weight: 700; color: var(--fg-main); display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.review-row small { color: var(--fg-muted); font-size: 12px; margin-top: 2px; display: block; }
.review-row .actions { display: flex; align-items: center; gap: 8px; }

/* 智能问答右下角浮窗 (现代化 Copilot AI 对话中心，支持全屏放大、拖拽缩放与思考卡片) */
.chat-dock {
  position: fixed;
  z-index: 100;
  right: 24px;
  bottom: 24px;
  width: 440px;
  height: 580px;
  max-width: 95vw;
  max-height: 90vh;
  min-width: 360px;
  min-height: 400px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  resize: none !important;
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1), height 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s ease;
}

.chat-dock.maximized {
  width: 92vw !important;
  height: 90vh !important;
  max-width: 92vw !important;
  max-height: 90vh !important;
  right: 4vw !important;
  bottom: 5vh !important;
}

.chat-heading {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  flex-shrink: 0;
  user-select: none;
}

.chat-heading strong { font-size: 14px; color: #ffffff; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.chat-heading small { font-size: 11px; color: #94a3b8; }
.chat-heading-actions { display: flex; align-items: center; gap: 6px; }

.chat-action-btn {
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.chat-action-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.chat-history {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-message {
  max-width: 90%;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  line-height: 1.6;
  word-break: break-word;
}

.chat-message.bot {
  background: #ffffff;
  border: 1px solid var(--border);
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  align-self: flex-start;
}

.chat-message.user {
  background: #2563eb;
  color: #ffffff;
  align-self: flex-end;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

/* AI 思考过程卡片 */
.chat-thought-card {
  background: #f1f5f9;
  border-left: 3px solid #3b82f6;
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 8px;
  font-size: 12px;
  color: #475569;
}

.chat-thought-header {
  font-weight: 700;
  color: #2563eb;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.chat-thought-body {
  line-height: 1.4;
  color: #64748b;
  font-family: ui-monospace, monospace;
}

/* 可点击的知识库来源原件卡片 */
.chat-source-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  margin: 3px 4px 0 0;
  cursor: pointer;
  transition: all 0.15s;
}

.chat-source-item:hover {
  background: #dbeafe;
  border-color: #93c5fd;
  text-decoration: underline;
}

.chat-form {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: #ffffff;
  flex-shrink: 0;
}

.chat-form input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}

.chat-form input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.chat-dock.collapsed {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 12px rgba(31, 35, 40, 0.15) !important;
  resize: none !important;
  overflow: hidden !important;
}

/* 现代视频剧场播放弹窗 (Video Theater Modal) */
.video-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.video-theater {
  width: min(960px, 92vw);
  height: min(640px, 86vh);
  min-width: 480px;
  min-height: 320px;
  max-width: 98vw;
  max-height: 96vh;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 10px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  resize: both;
  overflow: hidden;
  position: relative;
  transition: width 0.2s ease, height 0.2s ease;
}
.video-theater.maximized {
  width: 98vw !important;
  height: 96vh !important;
  max-width: 98vw !important;
  max-height: 96vh !important;
}
.video-theater-header {
  height: 48px;
  background: #161b22;
  border-bottom: 1px solid #30363d;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  flex-shrink: 0;
}
.video-theater-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.video-theater-badge {
  background: #238636;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}
.video-theater-title strong {
  color: #f0f6fc;
  font-size: 14px;
}
.video-theater-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.video-action-btn {
  background: #21262d;
  color: #c9d1d9;
  border: 1px solid #30363d;
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.15s;
}
.video-action-btn:hover {
  background: #30363d;
  color: #ffffff;
  border-color: #8b949e;
}
.video-action-btn.close:hover {
  background: #da3633;
  color: #ffffff;
  border-color: #da3633;
}
.video-theater-screen {
  flex: 1;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
#training-video-player {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  outline: none;
}
.video-theater-footer {
  height: 38px;
  background: #161b22;
  border-top: 1px solid #30363d;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  flex-shrink: 0;
  font-size: 12px;
  color: #8b949e;
}

/* 提示气泡 (Toast) */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  opacity: 0;
  z-index: 200;
  background: #0f172a;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-xl);
  transition: all 0.25s cubic-bezier(0.33, 1, 0.68, 1);
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: #dc2626; }

/* 弹窗与表单 (Modal Dialog) */
.registration-dialog {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  width: min(880px, calc(100vw - 32px));
  max-height: 88vh;
  box-shadow: var(--shadow-xl);
  background: #ffffff;
}
.registration-dialog::backdrop { background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px); }
.registration-dialog form { padding: 24px 28px; overflow: auto; max-height: 88vh; }
.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 16px;
}
.dialog-header h2 { font-size: 18px; font-weight: 700; margin: 0; color: var(--fg-main); }
.form-section { padding: 16px 0; border-bottom: 1px solid var(--border-subtle); }
.form-section h3 { font-size: 14px; font-weight: 700; margin: 0 0 12px; color: var(--fg-main); }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.form-grid label { display: grid; gap: 6px; font-size: 12px; font-weight: 600; color: var(--fg-main); }
.form-grid input, .form-grid textarea, .form-grid select {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  background: #ffffff;
  font-size: 13px;
  color: var(--fg-main);
  transition: border-color 0.15s;
}
.form-grid input:focus, .form-grid textarea:focus, .form-grid select:focus {
  border-color: var(--primary);
  outline: 2px solid rgba(37, 99, 235, 0.2);
}
.form-grid .wide { grid-column: span 3; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* 审计与保留期限控制中心样式 (问题1重点增强) */
.retention-control-card {
  padding: 24px;
  background: #ffffff;
  border-bottom: 1px solid var(--border-subtle);
}
.retention-metrics-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 18px 0;
}
.retention-stat-box {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
}
.retention-stat-box span { font-size: 12px; color: var(--fg-muted); display: block; }
.retention-stat-box strong { font-size: 22px; font-weight: 700; color: var(--fg-main); margin-top: 4px; display: block; }
.retention-stat-box.danger strong { color: var(--danger); }
.retention-actions-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 14px;
}

/* 知识库条目列表 */
.knowledge-row {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  box-shadow: var(--shadow-xs);
}

/* ==========================================================================
   参考设计像素级还原体系 (参考 p-KKUjW3 真实企业入职指引界面规范)
   ========================================================================== */

/* 顶部企业级导航条与总控大屏 */
.enterprise-header-banner {
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  padding: 20px max(24px, calc((100vw - 1360px) / 2));
  margin-bottom: 16px;
  box-shadow: var(--shadow-xs);
}

.enterprise-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.enterprise-header-title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 800;
  color: var(--fg-main);
  letter-spacing: -0.02em;
}

.enterprise-header-subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--fg-muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.enterprise-header-subtitle span.dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #cbd5e1;
}

/* 右侧 4 格核心状态指标卡 */
.kpi-four-grid {
  display: flex;
  gap: 12px;
}

.kpi-stat-box {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 18px;
  min-width: 105px;
  text-align: center;
  box-shadow: var(--shadow-xs);
  transition: all 0.15s ease;
}

.kpi-stat-box:hover {
  border-color: #cbd5e1;
  box-shadow: var(--shadow-sm);
}

.kpi-stat-label {
  font-size: 12px;
  color: #64748b;
  display: block;
  font-weight: 500;
  margin-bottom: 4px;
}

.kpi-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.2;
}

.kpi-stat-value.active { color: #2563eb; }
.kpi-stat-value.success { color: #059669; }

/* 中部高价值通栏（当前要处理提示与倒计时） */
.action-summary-banner {
  background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-lg);
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  box-shadow: var(--shadow-xs);
}

.action-summary-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.action-summary-date-tag {
  background: #2563eb;
  color: #ffffff;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.action-summary-date-tag small {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.9;
}

.action-summary-text h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: #1e3a8a;
}

.action-summary-text p {
  margin: 0;
  font-size: 13px;
  color: #475569;
}

.action-summary-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.action-summary-chip {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 16px;
  text-align: right;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.action-summary-chip span {
  font-size: 11px;
  color: #64748b;
  display: block;
}

.action-summary-chip strong {
  font-size: 16px;
  color: #0f172a;
  font-weight: 700;
}

/* 左侧任务清单与时间线卡片 (严格还原) */
.side-task-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-xs);
}

.side-task-item {
  padding: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 10px;
  transition: all 0.15s ease;
}

.side-task-item:last-child {
  margin-bottom: 0;
}

.side-task-item.active {
  background: #ffffff;
  border-color: #93c5fd;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.08);
}

.side-task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.side-task-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-main);
}

.side-task-desc {
  font-size: 12px;
  color: var(--fg-muted);
  line-height: 1.4;
  margin: 0;
}

/* 垂直流程时间线还原 */
.flow-timeline-box {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-xs);
}

.flow-timeline-step {
  display: flex;
  gap: 14px;
  position: relative;
  padding-bottom: 22px;
}

.flow-timeline-step:last-child {
  padding-bottom: 0;
}

.flow-timeline-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 20px;
  bottom: 0;
  width: 2px;
  background: #e2e8f0;
}

.flow-timeline-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #cbd5e1;
  display: grid;
  place-items: center;
  z-index: 1;
  font-size: 10px;
  color: transparent;
  flex-shrink: 0;
  margin-top: 1px;
}

.flow-timeline-step.done .flow-timeline-dot {
  border-color: #10b981;
  background: #10b981;
  color: #ffffff;
}

.flow-timeline-step.current .flow-timeline-dot {
  border-color: #2563eb;
  background: #eff6ff;
  color: #2563eb;
  font-weight: 700;
}

.flow-timeline-info {
  flex: 1;
}

.flow-timeline-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-main);
  display: flex;
  justify-content: space-between;
}

.flow-timeline-date {
  font-size: 11px;
  color: var(--fg-muted);
  font-family: ui-monospace, monospace;
}

.flow-timeline-badge {
  font-size: 11px;
  margin-top: 2px;
  color: var(--fg-muted);
}

/* 批量准备就绪与提交操作栏 */
.batch-submit-bar {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  box-shadow: var(--shadow-xs);
}

.batch-submit-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 核心材料卡片 (完全还原参考图的双列卡片) */
.doc-submit-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  min-height: 380px;
}

.doc-submit-card:hover {
  border-color: #93c5fd;
  box-shadow: 0 8px 16px -4px rgba(37, 99, 235, 0.1);
  transform: translateY(-2px);
}

.doc-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.doc-card-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.doc-card-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--fg-main);
  line-height: 1.3;
}

.doc-pill-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}

.doc-card-highlight {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  color: #92400e;
  font-weight: 600;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.doc-spec-list {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 12px;
  color: #475569;
  line-height: 1.6;
}

.doc-spec-list div {
  margin-bottom: 4px;
}

.doc-spec-list div:last-child {
  margin-bottom: 0;
}

.doc-spec-bullet {
  color: #2563eb;
  font-weight: 700;
  margin-right: 4px;
}

/* 真实文件状态预览槽位 */
.doc-file-status-slot {
  background: #ffffff;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  transition: all 0.2s ease;
}

.doc-file-status-slot.has-file {
  background: #f0fdf4;
  border: 1px solid #86efac;
}

/* 已上传文件逐行列表：身份证正反面分开上传时上下排列，避免横排挤在一起 */
.file-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  min-width: 0;
}

.file-row-name {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-row-btn {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  padding: 2px 8px;
  border: 1px solid rgba(9, 105, 218, 0.3);
  border-radius: 4px;
  background: #ffffff;
  cursor: pointer;
}

.file-row-btn:hover {
  background: #f0f7ff;
}

/* 删除入口就放在文件行右侧（对应文件位置），传错时直接点掉重传 */
.file-row-del {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  line-height: 1;
  font-size: 15px;
  font-weight: 600;
  color: #b42318;
  background: #ffffff;
  border: 1px solid #fecdca;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.15s ease;
}

.file-row-del:hover {
  background: #fef3f2;
  border-color: #f97066;
}

.file-row-del:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 双按钮操作底栏 (选择文件 + 加入待提交 / 上传审核) */
.doc-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border-top: 1px solid #f1f5f9;
  padding-top: 14px;
  margin-top: auto;
}

.doc-card-actions button,
.doc-card-actions label,
.doc-card-actions a {
  flex: 1 1 120px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  justify-content: center;
  box-sizing: border-box;
}

/* 统一高级卡片网格系统 */
.admin-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 16px;
}
.training-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 18px;
}
.exam-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 18px;
}

/* 统一现代化中台卡片 */
.pro-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.04), 0 1px 2px -1px rgba(15, 23, 42, 0.02);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.pro-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 10px 20px -5px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.03);
  transform: translateY(-2px);
}

/* 卡片徽标与图标 */
.pro-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.02em;
}

.pro-card-badge.blue {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #dbeafe;
}

.pro-card-badge.emerald {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.pro-card-badge.purple {
  background: #f5f3ff;
  color: #7c3aed;
  border: 1px solid #ddd6fe;
}

/* 高级信息槽位与路径预览框 */
.pro-info-slot {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px;
  margin-top: 14px;
}

.pro-info-slot-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pro-code-box {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  color: #0f172a;
  background: #ffffff;
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  word-break: break-all;
  line-height: 1.4;
}

/* 高级按钮规范（微质感） */
.btn-pro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.15s ease;
  cursor: pointer;
  border: 1px solid transparent;
  line-height: 1.2;
  white-space: nowrap;
}

.btn-pro.primary {
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2);
}

.btn-pro.primary:hover {
  background: #1d4ed8;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
}

.btn-pro.secondary {
  background: #ffffff;
  color: #334155;
  border-color: #e2e8f0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.btn-pro.secondary:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
}

.btn-pro.danger-ghost {
  background: transparent;
  color: #dc2626;
  border-color: transparent;
}

.btn-pro.danger-ghost:hover {
  background: #fef2f2;
  border-color: #fecaca;
}

/* 审计多层级手风琴结构专用样式 */
.audit-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.audit-accordion-item {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: border-color 0.2s;
}

.audit-accordion-item:hover {
  border-color: #cbd5e1;
}

.audit-accordion-header {
  padding: 14px 18px;
  background: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}

.audit-accordion-header:hover {
  background: #f8fafc;
}

.audit-accordion-header.expanded {
  background: #f8fafc;
  border-bottom-color: var(--border-subtle);
}

.audit-accordion-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  font-size: 11px;
  color: #64748b;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.audit-accordion-arrow.expanded {
  transform: rotate(90deg);
}

.audit-accordion-body {
  padding: 8px 18px;
  background: #ffffff;
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 知识库拖拽与上传卡片 */
.knowledge-drop-hero {
  border: 2px dashed #cbd5e1;
  background: #f8fafc;
  border-radius: var(--radius-lg);
  padding: 28px 20px;
  text-align: center;
  margin-bottom: 20px;
  transition: all 0.2s ease;
}

.knowledge-drop-hero:hover {
  border-color: #3b82f6;
  background: #eff6ff;
}

@media (max-width: 900px) {
  .admin-card-grid { grid-template-columns: 1fr; }
  .workspace { grid-template-columns: 1fr; }
  .materials-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: auto; }
  .retention-metrics-row { grid-template-columns: 1fr; }
}


/* ==========================================================================
   GitHub Primer Design System Overrides
   ========================================================================== */

/* 全局底色与字体 */
body {
  background-color: var(--canvas-default) !important;
  color: var(--fg-default) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji" !important;
}

/* 1. GitHub 官方现代浅色顶栏 (Header) */
.topbar {
  background: #f6f8fa !important;
  color: #1f2328 !important;
  border-bottom: 1px solid #d0d7de !important;
  min-height: 56px !important;
  height: auto !important;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.topbar-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.topbar .brand {
  color: #1f2328 !important;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.octocat-icon {
  fill: #1f2328 !important;
  vertical-align: middle;
  transition: opacity 0.15s ease;
}
.topbar .brand:hover .octocat-icon {
  opacity: 0.75;
}
.repo-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 14px;
}
.org-name {
  color: #0969da !important;
  font-weight: 500;
}
.path-divider {
  color: #656d76 !important;
}
.repo-name {
  color: #1f2328 !important;
  font-weight: 600 !important;
  display: inline !important;
}
.repo-badge {
  display: inline-block;
  padding: 0 7px;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  color: #656d76 !important;
  border: 1px solid #d0d7de !important;
  border-radius: var(--radius-full);
  background-color: #ffffff !important;
  margin-left: 6px;
}
.topbar-nav a,
.topbar nav a {
  color: #1f2328 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
}
.topbar-nav a:hover,
.topbar nav a:hover {
  background: #eaeef2 !important;
  color: #0969da !important;
  border-color: #d0d7de;
}

/* 2. GitHub 按钮体系 (Buttons) */
/* 标志性 GitHub 绿主按钮 */
.button.primary,
.btn-pro.primary,
button[type="submit"].button.primary,
#submit-all-materials-btn,
#submit-all-materials-bottom-btn {
  background-color: #1f883d !important;
  color: #ffffff !important;
  border: 1px solid rgba(31, 35, 40, 0.15) !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  line-height: 20px !important;
  padding: 5px 16px !important;
  box-shadow: 0 1px 0 rgba(31, 35, 40, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
  transition: 80ms cubic-bezier(0.33, 1, 0.68, 1) !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.button.primary:hover,
.btn-pro.primary:hover,
#submit-all-materials-btn:hover,
#submit-all-materials-bottom-btn:hover {
  background-color: #1a7f37 !important;
  border-color: rgba(31, 35, 40, 0.15) !important;
}
.button.primary:active,
.btn-pro.primary:active {
  background-color: #187431 !important;
  box-shadow: inset 0 1px 0 rgba(0, 45, 17, 0.2) !important;
}

/* GitHub 灰色默认按钮 (Secondary / Default) */
.button.secondary,
.btn-pro.secondary,
.button:not(.primary):not(.danger) {
  background-color: #f6f8fa !important;
  color: #24292f !important;
  border: 1px solid rgba(31, 35, 40, 0.15) !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  line-height: 20px !important;
  padding: 5px 14px !important;
  box-shadow: 0 1px 0 rgba(31, 35, 40, 0.04) !important;
  transition: 80ms cubic-bezier(0.33, 1, 0.68, 1) !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.button.secondary:hover,
.btn-pro.secondary:hover,
.button:not(.primary):not(.danger):hover {
  background-color: #f3f4f6 !important;
  border-color: rgba(31, 35, 40, 0.15) !important;
}

/* GitHub 危险按钮 (Danger) */
.button.danger,
.btn-pro.danger {
  background-color: #f6f8fa !important;
  color: #cf222e !important;
  border: 1px solid rgba(31, 35, 40, 0.15) !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  padding: 5px 14px !important;
}
.button.danger:hover,
.btn-pro.danger:hover {
  background-color: #cf222e !important;
  color: #ffffff !important;
  border-color: #cf222e !important;
}

/* 3. GitHub UnderlineNav (步骤与管理导航条) */
.step-nav,
.admin-tabs {
  display: flex !important;
  gap: 4px !important;
  border-bottom: 1px solid #d0d7de !important;
  margin-bottom: 20px !important;
  padding: 0 !important;
  background: transparent !important;
}
.step-btn,
.tab {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  color: #656d76 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 8px 16px !important;
  margin-bottom: -1px !important;
  border-radius: 0 !important;
  transition: color 0.15s ease, border-color 0.15s ease !important;
  cursor: pointer !important;
}
.step-btn:hover:not(:disabled),
.tab:hover:not(:disabled) {
  color: #1f2328 !important;
  border-bottom-color: #d0d7de !important;
}
.step-btn.active,
.tab.active {
  color: #1f2328 !important;
  font-weight: 600 !important;
  border-bottom-color: #fd8c73 !important; /* GitHub 经典暖橙色高亮标线 */
  background: transparent !important;
}
.step-btn:disabled,
.tab:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  border-bottom-color: transparent !important;
}

/* 4. GitHub Box 卡片与容器规范 */
.panel,
.enterprise-header-banner,
.action-summary-banner,
.side-task-card,
.flow-timeline-box,
.doc-submit-card,
.admin-card,
.review-card,
.batch-submit-bar {
  background: #ffffff !important;
  border: 1px solid #d0d7de !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 0 rgba(31, 35, 40, 0.04) !important;
}

.panel-heading,
.Box-header {
  background-color: #f6f8fa !important;
  border-bottom: 1px solid #d0d7de !important;
  padding: 12px 16px !important;
}
.panel-heading h2 {
  color: #1f2328 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
.panel-heading p {
  color: #656d76 !important;
}

/* 材料卡片精细适配 */
.doc-submit-card {
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  transform: none !important;
}
.doc-submit-card:hover {
  border-color: #0969da !important;
  box-shadow: 0 1px 3px rgba(31, 35, 40, 0.12) !important;
  transform: none !important;
}
.doc-card-title {
  color: #1f2328 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}
.doc-spec-bullet {
  color: #656d76 !important;
}

/* 5. GitHub StateLabels / Issue 标签体系 */
.status {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 18px !important;
  padding: 1px 8px !important;
  border-radius: 2em !important;
  white-space: nowrap !important;
  border: 1px solid transparent !important;
}
.status.passed,
.status.success,
.status.active {
  background-color: #dafbe1 !important;
  color: #1a7f37 !important;
  border-color: rgba(26, 127, 55, 0.3) !important;
}
.status.review,
.status.pending {
  background-color: #ddf4ff !important;
  color: #0969da !important;
  border-color: rgba(9, 105, 218, 0.3) !important;
}
.status.waiting {
  background-color: #fff8c5 !important;
  color: #9a6700 !important;
  border-color: rgba(212, 167, 44, 0.4) !important;
}
.status.rejected,
.status.danger {
  background-color: #ffebe9 !important;
  color: #cf222e !important;
  border-color: rgba(255, 129, 130, 0.4) !important;
}

/* 6. GitHub Copilot 风格问答浮窗 (Chat Dock) */
.chat-dock {
  border: 1px solid #d0d7de !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(66, 74, 83, 0.16), 0 1px 3px rgba(31, 35, 40, 0.12) !important;
  background: #ffffff !important;
  resize: none !important;
  transition: width 0.2s cubic-bezier(0.16, 1, 0.3, 1), height 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s ease, border-radius 0.2s ease !important;
}

/* 问答顶栏 */
.chat-heading {
  background: #f6f8fa !important;
  color: #1f2328 !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid #d0d7de !important;
  border-radius: 8px 8px 0 0 !important;
}
.chat-heading strong {
  color: #1f2328 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.chat-heading small {
  color: #656d76 !important;
  font-size: 11px !important;
}
.chat-action-btn {
  background: #ffffff !important;
  border: 1px solid #d0d7de !important;
  color: #656d76 !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  font-size: 12px !important;
  line-height: 18px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.chat-action-btn:hover {
  background: #eaeef2 !important;
  color: #1f2328 !important;
  border-color: #8c959f !important;
}

/* 收起状态：优雅的圆形悬浮 AI 助手入口 */
.chat-dock.collapsed {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;
  border-radius: 50% !important;
  border: 1px solid #d0d7de !important;
  box-shadow: 0 4px 12px rgba(31, 35, 40, 0.15), 0 8px 24px rgba(66, 74, 83, 0.12) !important;
  background: #ffffff !important;
  cursor: pointer !important;
  padding: 0 !important;
  overflow: hidden !important;
  resize: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.chat-dock.collapsed:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(31, 35, 40, 0.22) !important;
  border-color: #0969da !important;
}
.chat-dock.collapsed .chat-heading {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  cursor: pointer !important;
}
.chat-dock.collapsed .chat-title,
.chat-dock.collapsed .chat-history,
.chat-dock.collapsed .chat-form {
  display: none !important;
}
.chat-dock.collapsed .chat-heading-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}
.chat-dock.collapsed #chat-maximize,
.chat-dock.collapsed #chat-new {
  display: none !important;
}
.chat-dock.collapsed #chat-collapse {
  width: 100% !important;
  height: 100% !important;
  font-size: 0 !important;
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
}
.chat-dock.collapsed #chat-collapse::after {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  background-color: #0969da;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z'%3E%3C/path%3E%3C/svg%3E") no-repeat center;
}

.chat-history {
  background: #f6f8fa !important;
}
.chat-message {
  background: #ffffff !important;
  border: 1px solid #d0d7de !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  color: #1f2328 !important;
}
.chat-message.bot {
  border-left: 3px solid #0969da !important;
}
.chat-form {
  border-top: 1px solid #d0d7de !important;
  background: #ffffff !important;
}
.chat-form input {
  background-color: #f6f8fa !important;
  border: 1px solid #d0d7de !important;
  border-radius: 6px !important;
  padding: 5px 12px !important;
}
.chat-form input:focus {
  background-color: #ffffff !important;
  border-color: #0969da !important;
  box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.3) !important;
}

/* 7. GitHub Primer 经典表单输入框 */
input[type="text"],
input[type="date"],
input[type="password"],
input[type="email"],
select,
textarea {
  background-color: #ffffff !important;
  border: 1px solid #d0d7de !important;
  border-radius: 6px !important;
  color: #1f2328 !important;
  box-shadow: inset 0 1px 0 rgba(208, 215, 222, 0.2) !important;
  padding: 5px 12px !important;
}
input:focus,
select:focus,
textarea:focus {
  border-color: #0969da !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.3) !important;
}

/* 8. 对话框 (Dialog) - GitHub Primer 规范 */
dialog,
.registration-dialog {
  border: 1px solid #d0d7de !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(140, 149, 159, 0.2), 0 24px 54px rgba(140, 149, 159, 0.2) !important;
  background: #ffffff !important;
  padding: 0 !important;
  overflow: hidden !important;
  width: min(880px, calc(100vw - 32px)) !important;
  max-height: 90vh !important;
}
dialog::backdrop,
.registration-dialog::backdrop {
  background: rgba(31, 35, 40, 0.4) !important;
  backdrop-filter: blur(2px) !important;
}
.dialog-header {
  background: #f6f8fa !important;
  border-bottom: 1px solid #d0d7de !important;
  padding: 16px 20px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 16px !important;
}
.dialog-header h2 {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #1f2328 !important;
  margin: 0 0 4px 0 !important;
  letter-spacing: -0.01em !important;
}
.dialog-header p {
  font-size: 13px !important;
  color: #656d76 !important;
  margin: 0 !important;
}
.dialog-header .eyebrow {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: #0969da !important;
  margin-bottom: 2px !important;
}
.icon-button {
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #656d76 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}
.icon-button:hover {
  background: #eaeef2 !important;
  color: #1f2328 !important;
}
.dialog-actions {
  background: #f6f8fa !important;
  border-top: 1px solid #d0d7de !important;
  padding: 14px 20px !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-top: 0 !important;
}

#reg-photo-preview-box {
  width: 80px !important;
  height: 104px !important;
  max-width: 80px !important;
  max-height: 104px !important;
  border: 2px dashed #cbd5e1 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
#reg-photo-img {
  width: 80px !important;
  height: 104px !important;
  max-width: 80px !important;
  max-height: 104px !important;
  object-fit: cover !important;
  display: block !important;
}

/* 9. KPI 卡片与通知栏 */
.kpi-stat-box {
  background: #f6f8fa !important;
  border: 1px solid #d0d7de !important;
  border-radius: 6px !important;
}
.action-summary-banner {
  border-left: 4px solid #0969da !important;
  background: #ffffff !important;
}
.action-summary-date-tag {
  background: #f6f8fa !important;
  border: 1px solid #d0d7de !important;
  color: #1f2328 !important;
}
.action-summary-date-tag strong {
  color: #1f2328 !important;
}

/* 10. GitHub Blankslate (认证与引导卡片) */
.auth-error {
  max-width: 540px !important;
  margin: 64px auto 0 auto !important;
  padding: 44px 32px !important;
  background-color: #ffffff !important;
  border: 1px solid #d0d7de !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 3px rgba(31, 35, 40, 0.12), 0 8px 24px rgba(66, 74, 83, 0.08) !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  box-sizing: border-box !important;
}
.auth-error[hidden] {
  display: none !important;
}
.auth-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #f6f8fa;
  border: 1px solid #d0d7de;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: #656d76;
}
.auth-error h1 {
  font-size: 22px !important;
  font-weight: 600 !important;
  color: #1f2328 !important;
  margin: 0 0 10px 0 !important;
  letter-spacing: -0.01em !important;
}
.auth-error p {
  font-size: 14px !important;
  color: #656d76 !important;
  margin: 0 0 24px 0 !important;
  line-height: 1.6 !important;
  max-width: 440px !important;
}
.auth-error .button.primary {
  font-size: 14px !important;
  padding: 7px 22px !important;
  min-height: 34px !important;
}

/* 11. GitHub Pagehead (管理端工作台横幅) */
.admin .compact-hero {
  background: #f6f8fa !important;
  border: 1px solid #d0d7de !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  padding: 18px 24px !important;
  margin-bottom: 20px !important;
}
.admin .compact-hero::after {
  display: none !important;
}
.admin .compact-hero h1 {
  color: #1f2328 !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  margin: 2px 0 6px 0 !important;
}
.admin .compact-hero .eyebrow {
  color: #0969da !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}
.admin .compact-hero .hero-summary {
  color: #656d76 !important;
  font-size: 13px !important;
}

/* ==========================================================================
   12. 极简高辨识度配置卡片规范 (培训视频配置 & 考试题库管理)
   ========================================================================== */
.config-card-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.config-item-card {
  background: #ffffff;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 1px 2px rgba(31, 35, 40, 0.04);
  transition: all 0.15s ease-in-out;
  position: relative;
}

.config-item-card:hover {
  border-color: #0969da;
  box-shadow: 0 3px 8px rgba(31, 35, 40, 0.08);
  background: #fcfdfd;
}

.config-item-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.config-item-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  flex-shrink: 0;
}

.config-item-badge.video {
  background: #ddf4ff;
  color: #0969da;
  border: 1px solid rgba(9, 105, 218, 0.2);
}

.config-item-badge.exam {
  background: #dafbe1;
  color: #1a7f37;
  border: 1px solid rgba(26, 127, 55, 0.2);
}

.config-item-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.config-item-title {
  font-size: 15px;
  font-weight: 600;
  color: #1f2328;
  margin: 0;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.config-item-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.config-item-right .status {
  margin: 0;
  font-size: 12px;
  padding: 3px 10px;
}

.config-item-right .btn-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid #d0d7de;
  background: #ffffff;
  color: #24292f;
  transition: all 0.12s ease;
  line-height: 20px;
}

.config-item-right .btn-action:hover {
  background: #f3f4f6;
  border-color: #8c959f;
}

.config-item-right .btn-action.primary-subtle {
  background: #f0f7ff;
  color: #0969da;
  border-color: rgba(9, 105, 218, 0.28);
}

.config-item-right .btn-action.primary-subtle:hover {
  background: #ddf4ff;
  border-color: #0969da;
}

.config-item-right .btn-action.danger {
  background: #ffffff;
  color: #cf222e;
  border-color: rgba(207, 34, 46, 0.28);
}

.config-item-right .btn-action.danger:hover {
  background: #ffebe9;
  color: #cf222e;
  border-color: #cf222e;
}

/* 审计记录卡片与员工模块层级强化 */
.audit-accordion {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.audit-accordion-item {
  background: #ffffff;
  border: 1px solid #d0d7de !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(31, 35, 40, 0.06);
  transition: all 0.15s ease-in-out;
  overflow: hidden;
}

.audit-accordion-item:hover {
  border-color: #8c959f !important;
  box-shadow: 0 3px 8px rgba(31, 35, 40, 0.08);
}

.audit-accordion-header {
  padding: 14px 20px !important;
  background: #ffffff !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid transparent;
  transition: background 0.15s ease;
}

.audit-accordion-header:hover {
  background: #f6f8fa !important;
}

.audit-accordion-header.expanded {
  background: #f6f8fa !important;
  border-bottom: 1px solid #d0d7de !important;
}

.audit-accordion-body {
  padding: 12px 18px !important;
  background: #fafbfc !important;
}

.audit-record-card {
  background: #ffffff;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  padding: 12px 16px;
  margin: 8px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.audit-record-card:hover {
  border-color: #0969da;
  box-shadow: 0 2px 6px rgba(9, 105, 218, 0.08);
  background: #ffffff;
}

/* ==========================================================================
   响应式与移动端专属适配 (Mobile & Multi-platform Compatibility)
   ========================================================================== */
@media (max-width: 768px) {
  /* 顶栏适配 */
  .topbar {
    padding: 10px 14px !important;
    gap: 8px !important;
  }
  .topbar-left {
    gap: 10px !important;
    width: 100% !important;
    justify-content: space-between !important;
  }
  .topbar .brand {
    font-size: 13px !important;
  }
  .topbar-nav {
    width: 100% !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    gap: 4px !important;
    padding-top: 4px !important;
  }

  /* 顶部企业 Banner 与 4 格 KPI 响应式 */
  .enterprise-header-banner {
    padding: 14px 12px !important;
    margin-bottom: 12px !important;
  }
  .enterprise-header-content {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }
  .enterprise-header-title {
    font-size: 18px !important;
  }
  .enterprise-header-subtitle {
    font-size: 12px !important;
    gap: 6px !important;
  }
  .kpi-four-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .kpi-stat-box {
    min-width: 0 !important;
    padding: 8px 10px !important;
  }
  .kpi-stat-label {
    font-size: 11px !important;
  }
  .kpi-stat-value {
    font-size: 16px !important;
  }

  /* 行动摘要通栏响应式 */
  .action-summary-banner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 14px !important;
  }
  .action-summary-left {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .action-summary-right {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
    flex-wrap: wrap !important;
  }
  .action-summary-chip {
    padding: 6px 12px !important;
  }

  /* 批量送审栏响应式 */
  .batch-submit-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 12px 14px !important;
  }
  .batch-submit-bar > div:last-child {
    flex-wrap: wrap !important;
    width: 100% !important;
    display: flex !important;
    gap: 8px !important;
  }
  .batch-submit-bar > div:last-child > * {
    flex: 1 1 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* 步骤导航与管理选项卡：在手机端支持平滑横向轻触滚动，彻底消除文字换行与拥挤 */
  .step-nav,
  .admin-tabs {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 6px !important;
    border-bottom: 1px solid #d0d7de !important;
    margin-bottom: 16px !important;
    padding: 0 4px !important;
  }
  .step-nav::-webkit-scrollbar,
  .admin-tabs::-webkit-scrollbar {
    display: none !important;
  }
  .step-btn,
  .tab {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    min-width: fit-content !important;
  }

  /* 工作区与材料、培训、考试网格在手机端统一强制为单列全宽并防止栅格溢出 */
  .workspace {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    gap: 14px !important;
    padding: 0 12px 24px 12px !important;
  }
  .workspace > * {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .step-container,
  .left-column,
  .side-task-card,
  #task-list,
  .admin-card-grid,
  .doc-submit-card,
  .batch-submit-bar {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  #materials-grid,
  #training-grid,
  #exam-grid,
  .materials-grid,
  .training-grid,
  .exam-grid,
  .admin-card-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 10px 0 !important;
  }
  .pro-card {
    padding: 14px !important;
  }
  .doc-submit-card {
    min-height: auto !important;
    padding: 16px !important;
  }
  .doc-card-actions {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
  }
  .doc-card-actions button,
  .doc-card-actions label,
  .doc-card-actions a {
    width: 100% !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
  }

  /* 底部提交栏 */
  .materials-bottom-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    text-align: center !important;
  }
  .materials-bottom-bar button {
    width: 100% !important;
  }

  /* 弹窗在移动端宽度 */
  dialog,
  .registration-dialog {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    margin: 10px auto !important;
  }
  .form-grid {
    grid-template-columns: 1fr !important;
  }
  .form-grid .wide {
    grid-column: auto !important;
  }

  /* 智能问答浮窗在手机端 */
  .chat-dock:not(.collapsed) {
    right: 8px !important;
    bottom: 8px !important;
    width: calc(100vw - 16px) !important;
    height: calc(100vh - 70px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 70px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }
  .chat-dock.collapsed {
    right: 16px !important;
    bottom: 16px !important;
  }
}

/* 统一企业入职概览与状态操作横幅样式 */
.enterprise-header-banner.unified-banner {
  border: 1px solid #d0d7de !important;
  border-left: 4px solid #0969da !important;
  background: #ffffff !important;
  border-radius: 6px !important;
  padding: 18px 24px !important;
  margin-bottom: 18px !important;
  box-shadow: 0 1px 2px rgba(31, 35, 40, 0.04) !important;
}

.stage-pill-tag {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: #0969da;
  background: #ddf4ff;
  border: 1px solid rgba(9, 105, 218, 0.2);
  padding: 2px 10px;
  border-radius: 12px;
  line-height: 1.4;
}

.node-pill-tag {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: #1a7f37;
  background: #dafbe1;
  border: 1px solid rgba(26, 127, 55, 0.2);
  padding: 2px 8px;
  border-radius: 12px;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .enterprise-header-banner.unified-banner {
    padding: 14px 14px !important;
    margin-bottom: 14px !important;
  }
}

/* ==========================================================================
   GitHub Primer Ultimate Design System (新版 GitHub 优雅极客风全构件重构)
   ========================================================================== */

/* 1. 全局表单与精美下拉框 (GitHub Primer Form Controls & Selects) */
select,
.form-select {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 6px 34px 6px 12px !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: #1f2328 !important;
  background-color: #f6f8fa !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3E%3Cpath fill='%23656d76' d='m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z'%3E%3C/path%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 16px 16px !important;
  border: 1px solid #d0d7de !important;
  border-radius: 6px !important;
  box-shadow: inset 0 1px 0 rgba(208, 215, 222, 0.2) !important;
  transition: 80ms cubic-bezier(0.33, 1, 0.68, 1) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  cursor: pointer !important;
  outline: none !important;
}

select:hover,
.form-select:hover {
  background-color: #f3f4f6 !important;
  border-color: #8c959f !important;
}

select:focus,
.form-select:focus {
  background-color: #ffffff !important;
  border-color: #0969da !important;
  box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.3) !important;
}

input[type="text"],
input[type="date"],
input[type="search"],
textarea,
.form-control {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 6px 12px !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: #1f2328 !important;
  background-color: #ffffff !important;
  border: 1px solid #d0d7de !important;
  border-radius: 6px !important;
  box-shadow: inset 0 1px 0 rgba(208, 215, 222, 0.2) !important;
  transition: 80ms cubic-bezier(0.33, 1, 0.68, 1) !important;
  outline: none !important;
}

input[type="text"]:hover,
input[type="date"]:hover,
input[type="search"]:hover,
textarea:hover {
  border-color: #8c959f !important;
}

input[type="text"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
textarea:focus {
  background-color: #ffffff !important;
  border-color: #0969da !important;
  box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.3) !important;
}

input[type="checkbox"] {
  accent-color: #0969da !important;
  width: 16px !important;
  height: 16px !important;
  cursor: pointer !important;
  vertical-align: middle !important;
}

/* 极客等宽辅助字与提示 */
.form-grid label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1f2328 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.form-grid label small {
  font-size: 12px !important;
  font-weight: normal !important;
  color: #656d76 !important;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace !important;
  line-height: 1.4 !important;
}

/* 2. 在线文件审阅与审批抽屉 (GitHub PR / File Reviewer) */
.preview-modal-backdrop[hidden],
.video-modal-backdrop[hidden] {
  display: none !important;
}

.preview-modal-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(31, 35, 40, 0.65) !important;
  backdrop-filter: blur(4px) !important;
  z-index: 2000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  box-sizing: border-box !important;
}

.preview-theater {
  width: min(1120px, 95vw) !important;
  height: min(780px, 90vh) !important;
  background: #ffffff !important;
  border: 1px solid #d0d7de !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(140, 149, 159, 0.25), 0 24px 54px rgba(140, 149, 159, 0.2) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  color: #1f2328 !important;
}

.preview-theater-header {
  height: 52px !important;
  background: #f6f8fa !important;
  border-bottom: 1px solid #d0d7de !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 20px !important;
  flex-shrink: 0 !important;
}

.preview-theater-title {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.preview-theater-title strong {
  color: #1f2328 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

.preview-theater-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.preview-img-controls {
  display: inline-flex !important;
  align-items: center !important;
  background: #ffffff !important;
  border: 1px solid #d0d7de !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

.preview-img-controls .btn-action {
  border: none !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  padding: 5px 10px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #1f2328 !important;
  border-right: 1px solid #d0d7de !important;
  cursor: pointer !important;
}

.preview-img-controls .btn-action:hover {
  background: #f3f4f6 !important;
}

.preview-img-controls .btn-action:last-child {
  border-right: none !important;
}

.preview-img-controls #preview-zoom-val {
  padding: 5px 10px !important;
  font-size: 12px !important;
  font-family: ui-monospace, SFMono-Regular, monospace !important;
  color: #656d76 !important;
  min-width: 48px !important;
  text-align: center !important;
  border-right: 1px solid #d0d7de !important;
  background: #f6f8fa !important;
}

.preview-theater-body {
  flex: 1 !important;
  display: flex !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

.preview-viewport {
  flex: 1 !important;
  background: #f6f8fa !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: auto !important;
  padding: 24px !important;
  border-right: 1px solid #d0d7de !important;
}

.review-action-drawer {
  width: 350px !important;
  padding: 24px !important;
  background: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  overflow-y: auto !important;
  color: #1f2328 !important;
}

.review-action-drawer h3 {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1f2328 !important;
  border-bottom: 1px solid #d0d7de !important;
  padding-bottom: 12px !important;
}

.exam-score-box {
  background: #f6f8fa !important;
  padding: 16px !important;
  border-radius: 6px !important;
  border: 1px solid #d0d7de !important;
}

.exam-score-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 8px !important;
}

.exam-score-header label {
  font-weight: 600 !important;
  font-size: 13px !important;
  color: #1f2328 !important;
}

.exam-score-header strong {
  font-size: 20px !important;
  font-family: ui-monospace, SFMono-Regular, monospace !important;
  color: #0969da !important;
  font-weight: 700 !important;
}

.exam-score-ticks {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 11px !important;
  color: #656d76 !important;
  margin-top: 6px !important;
  font-family: ui-monospace, SFMono-Regular, monospace !important;
}

.review-feedback-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.review-feedback-group label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1f2328 !important;
}

.review-feedback-group textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 100px !important;
}

.review-drawer-actions {
  margin-top: auto !important;
  display: flex !important;
  gap: 12px !important;
  padding-top: 16px !important;
  border-top: 1px solid #d0d7de !important;
}

.review-drawer-actions button {
  flex: 1 !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
}

/* 3. GitHub UnderlineNav (向导导航条极客标准) */
.step-nav,
.admin-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  border-bottom: 1px solid #d0d7de !important;
  background: #ffffff !important;
  padding: 0 16px !important;
  overflow-x: auto !important;
  border-radius: 6px 6px 0 0 !important;
}

.step-btn,
.admin-tabs .tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: #656d76 !important;
  text-decoration: none !important;
  border: none !important;
  background: transparent !important;
  border-bottom: 2px solid transparent !important;
  cursor: pointer !important;
  transition: color 0.15s ease, border-color 0.15s ease !important;
  white-space: nowrap !important;
  font-weight: 500 !important;
}

.step-btn:hover,
.admin-tabs .tab:hover {
  color: #1f2328 !important;
  border-bottom-color: #d0d7de !important;
  background: transparent !important;
}

.step-btn.active,
.admin-tabs .tab.active {
  font-weight: 600 !important;
  color: #1f2328 !important;
  border-bottom-color: #fd8c73 !important; /* GitHub UnderlineNav 经典高亮 */
  background: transparent !important;
}

.step-btn:disabled {
  color: #8c959f !important;
  cursor: not-allowed !important;
  border-bottom-color: transparent !important;
  opacity: 0.55 !important;
}

/* 4. GitHub 极客风格卡片与徽章 */
.pro-card-badge {
  font-family: ui-monospace, SFMono-Regular, monospace !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  border-radius: 6px !important;
}

.pro-card-badge.blue {
  background: #ddf4ff !important;
  color: #0969da !important;
  border: 1px solid rgba(9, 105, 218, 0.2) !important;
}

.pro-card-badge.emerald {
  background: #dafbe1 !important;
  color: #1a7f37 !important;
  border: 1px solid rgba(26, 127, 55, 0.2) !important;
}

.pro-card-badge.purple {
  background: #fbefff !important;
  color: #8250df !important;
  border: 1px solid rgba(130, 80, 223, 0.2) !important;
}

/* 阶段 4 开工指引 Markdown-Body 风格 */
#onboarding-handover-panel {
  background: #ffffff !important;
  border: 1px solid #d0d7de !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 0 rgba(31, 35, 40, 0.04) !important;
  overflow: hidden !important;
}

#onboarding-handover-panel .panel-heading {
  background: #f6f8fa !important;
  border-bottom: 1px solid #d0d7de !important;
  color: #1f2328 !important;
  padding: 16px 20px !important;
}

#onboarding-handover-panel .panel-heading h2 {
  color: #1f2328 !important;
  margin: 0 0 4px 0 !important;
}

#onboarding-handover-panel .panel-heading p {
  color: #656d76 !important;
  margin: 0 !important;
}

/* 代码与规格说明极客风 */
.doc-spec-bullet,
.pro-info-slot {
  background: #f6f8fa !important;
  border: 1px solid #d0d7de !important;
  border-radius: 6px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.pro-code-box,
.file-ready-pill,
.ready-filename {
  font-family: ui-monospace, SFMono-Regular, monospace !important;
}

/* GitHub Primer Button Standards for .btn-action and .icon-button */
.btn-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  border: 1px solid #d0d7de !important;
  background-color: #f6f8fa !important;
  color: #24292f !important;
  text-decoration: none !important;
  cursor: pointer !important;
  line-height: 20px !important;
  box-shadow: 0 1px 0 rgba(31, 35, 40, 0.04) !important;
  transition: 80ms cubic-bezier(0.33, 1, 0.68, 1) !important;
  box-sizing: border-box !important;
}

.btn-action:hover {
  background-color: #f3f4f6 !important;
  border-color: #1b1f2426 !important;
  color: #24292f !important;
  text-decoration: none !important;
}

.btn-action.primary-subtle {
  background-color: #f6f8fa !important;
  color: #0969da !important;
  border-color: #d0d7de !important;
}

.btn-action.primary-subtle:hover {
  background-color: #ddf4ff !important;
  border-color: #54aeff !important;
  color: #0969da !important;
}

.icon-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

.icon-button:hover {
  background-color: #f6f8fa !important;
  border-color: #d0d7de !important;
}

/* 现代化待办任务清单 (GitHub Primer 规范级) */
.side-task-card {
  background: #ffffff !important;
  border: 1px solid #d0d7de !important;
  border-radius: 6px !important;
  padding: 16px !important;
  box-shadow: 0 1px 3px rgba(31, 35, 40, 0.12) !important;
}

.side-task-card-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
  border-bottom: 1px solid #d0d7de !important;
  padding-bottom: 8px !important;
  flex-wrap: nowrap !important;
}

#side-task-count-badge {
  width: auto !important;
  height: auto !important;
  min-width: unset !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  border-radius: 12px !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
  display: inline-flex !important;
}

#task-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  max-height: 580px !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
}

#task-list::-webkit-scrollbar {
  width: 5px;
}
#task-list::-webkit-scrollbar-thumb {
  background: #d0d7de;
  border-radius: 4px;
}
#task-list::-webkit-scrollbar-track {
  background: transparent;
}

.side-task-item {
  padding: 10px 12px !important;
  background: #f6f8fa !important;
  border: 1px solid #d0d7de !important;
  border-radius: 6px !important;
  margin-bottom: 0 !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
  user-select: none !important;
}

.side-task-item:hover {
  background: #ffffff !important;
  border-color: #0969da !important;
  box-shadow: 0 2px 6px rgba(31, 35, 40, 0.08) !important;
  transform: translateY(-1px);
}

.side-task-item.active {
  background: #ffffff !important;
  border-color: #0969da !important;
}

.side-task-item.done {
  background: #ffffff !important;
  border-color: #d0d7de !important;
  opacity: 0.9 !important;
}

.side-task-item.danger {
  background: #fff8f8 !important;
  border-color: rgba(207, 34, 46, 0.3) !important;
}

.pro-card-badge.gray {
  background: #f6f8fa !important;
  color: #656d76 !important;
  border: 1px solid #d0d7de !important;
}

/* ==========================================================================
   移动端与小屏幕自适应加固 (Mobile & Small Screen Optimizations)
   ========================================================================== */
@media (max-width: 768px) {
  /* 视频播放剧场移动端适配 */
  .video-modal-backdrop {
    padding: 10px !important;
  }
  .video-theater {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: 96vh !important;
  }
  .video-theater-header {
    padding: 8px 12px !important;
  }
  .video-theater-actions {
    gap: 6px !important;
  }

  /* 审阅剧场弹窗移动端适配 */
  .preview-modal-backdrop {
    padding: 8px !important;
  }
  .preview-theater {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 96vh !important;
    max-height: 96vh !important;
    border-radius: 8px !important;
  }
  .preview-theater-header {
    height: auto !important;
    min-height: 48px !important;
    padding: 8px 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .preview-theater-title strong {
    font-size: 13px !important;
    max-width: 140px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .preview-theater-actions {
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  .preview-theater-body {
    flex-direction: column !important;
    overflow-y: auto !important;
  }
  .preview-viewport {
    flex: none !important;
    height: 42vh !important;
    min-height: 180px !important;
    border-right: none !important;
    border-bottom: 1px solid #d0d7de !important;
    padding: 12px !important;
  }
  .review-action-drawer {
    width: 100% !important;
    flex: 1 !important;
    padding: 14px !important;
    gap: 12px !important;
    box-sizing: border-box !important;
  }
}



/* ============================================================
   新员工欢迎弹窗 + 入职办理流程图
   首次进入时展示一次（localStorage 记忆），可手动关闭与再次打开。
   ============================================================ */

.welcome-backdrop {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, .58);
  backdrop-filter: blur(4px);
  animation: welcomeFadeIn .22s ease;
}

.welcome-backdrop[hidden] { display: none; }

@keyframes welcomeFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.welcome-card {
  position: relative;
  width: min(1040px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(15, 23, 42, .28);
  animation: welcomeRise .26s cubic-bezier(.22, .68, .35, 1);
}

@keyframes welcomeRise {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.welcome-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease;
}

.welcome-close:hover { background: rgba(255, 255, 255, .32); }

/* 顶部品牌区 */
.welcome-hero {
  padding: 34px 40px 30px;
  background: linear-gradient(135deg, #0e4c5a 0%, #1a7182 55%, #25899c 100%);
  color: #fff;
  border-radius: 16px 16px 0 0;
}

.welcome-eyebrow {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .68);
}

.welcome-hero h1 {
  margin: 0 0 12px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: .01em;
}

.welcome-hero h1 #welcome-name {
  color: #a8ecf5;
  border-bottom: 2px solid rgba(168, 236, 245, .5);
  padding-bottom: 1px;
}

.welcome-sub {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .86);
  max-width: 640px;
}

/* 流程图区 */
.welcome-flow-wrap { padding: 26px 40px 4px; }

.welcome-flow-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 18px;
  padding-left: 10px;
  border-left: 3px solid var(--brand, #2563eb);
  line-height: 1.2;
}

.welcome-flow {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.welcome-node {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.welcome-node:hover {
  border-color: var(--brand, #2563eb);
  box-shadow: 0 6px 18px rgba(37, 99, 235, .12);
  transform: translateY(-2px);
}

.welcome-node-index {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand, #2563eb);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.welcome-node-body { min-width: 0; }

.welcome-node-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 5px;
  line-height: 1.35;
}

.welcome-node-desc {
  font-size: 12px;
  line-height: 1.62;
  color: #64748b;
}

/* 节点之间的箭头 */
.welcome-arrow {
  flex: 0 0 26px;
  align-self: center;
  height: 2px;
  position: relative;
  background: #cbd5e1;
}

.welcome-arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 6px solid #cbd5e1;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

.welcome-flow-note {
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #f1f5f9;
  font-size: 12.5px;
  line-height: 1.65;
  color: #475569;
}

.welcome-foot {
  padding: 22px 40px 28px;
  display: flex;
  justify-content: center;
}

/* 窄屏：流程图改为纵向 */
@media (max-width: 860px) {
  .welcome-hero { padding: 26px 22px 22px; }
  .welcome-hero h1 { font-size: 20px; }
  .welcome-flow-wrap { padding: 20px 22px 4px; }
  .welcome-foot { padding: 18px 22px 24px; }

  .welcome-flow {
    flex-direction: column;
    gap: 10px;
  }

  .welcome-arrow {
    flex: 0 0 18px;
    width: 2px;
    height: 18px;
    align-self: center;
    background: #cbd5e1;
  }

  .welcome-arrow::after {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -1px;
    transform: translateX(-50%);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid #cbd5e1;
    border-bottom: 0;
  }
}


/* ---------------- AI 审核标记 ---------------- */
.ai-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: #eef2ff;
  color: #4f46e5;
  vertical-align: middle;
}
.ai-tag.warn {
  background: #fff7ed;
  color: #c2410c;
}
.ai-note {
  margin-top: 6px;
  font-size: 12px;
}
.ai-note > summary {
  cursor: pointer;
  color: #4f46e5;
  font-weight: 600;
  list-style: none;
}
.ai-note > summary::-webkit-details-marker {
  display: none;
}
.ai-note > summary::before {
  content: "▸ ";
}
.ai-note[open] > summary::before {
  content: "▾ ";
}
.ai-note-body {
  margin-top: 6px;
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  line-height: 1.7;
  color: var(--fg-muted);
}
.ai-note-body .ai-summary {
  color: var(--fg);
  font-weight: 600;
  margin-bottom: 4px;
}
.ai-note-body .ai-reason {
  color: var(--fg);
}
.ai-note-body .ai-meta {
  display: block;
  margin-top: 6px;
  color: var(--fg-muted);
  font-size: 11px;
}

/* ---------- 已通过材料折叠区 ---------- */
/* 默认收起：已办完的条目不该挤占待审核视野，但必须随时可展开查看原件与 AI 依据 */
.passed-block {
  margin-top: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.passed-block > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #15803d;
  cursor: pointer;
  list-style: none;
}

.passed-block > summary::-webkit-details-marker {
  display: none;
}

.passed-block > summary::before {
  content: "▸";
  font-size: 11px;
  transition: transform 0.15s ease;
}

.passed-block[open] > summary::before {
  transform: rotate(90deg);
}

.passed-block > summary small {
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-muted);
}

.passed-block-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 12px 12px;
}

/* ---------- 管理端员工卡片一级折叠 ---------- */
/* 收起后只留表头：待办不被一堆已办结的档案淹没 */
.review-employee.collapsed .review-materials {
  display: none;
}

.review-employee.collapsed .review-header {
  border-bottom: none;
  padding-bottom: 14px;
}

.review-card-toggle {
  white-space: nowrap;
}

/* ---------- AI 参考线索（advisories） ---------- */
/* 确定性检查给出的线索（如「疑似局部粘贴」），不参与判定，只供 HR 放大核对，
   因此用区别于「理由」的琥珀色，避免被当成正式退回依据。 */
.ai-advisory-title { margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--fg-muted); }
.ai-advisory {
  margin-top: 4px; padding: 6px 10px; font-size: 12px; line-height: 1.6;
  color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px;
}

/* 审核反馈意见超长折叠/展开 */
.feedback-collapse {
  position: relative;
}
.feedback-collapse summary {
  list-style: none;
  cursor: pointer;
  outline: none;
  user-select: none;
}
.feedback-collapse summary::-webkit-details-marker {
  display: none;
}
.feedback-collapse .fb-toggle-btn {
  color: var(--primary);
  font-size: 11px;
  text-decoration: underline;
  margin-left: 6px;
  cursor: pointer;
}
.feedback-collapse:not([open]) .fb-full-content {
  display: none;
}
.feedback-collapse[open] .fb-preview-content {
  display: none;
}
.feedback-collapse[open] .fb-full-content {
  display: block;
}


/* ==========================================================================
   UI Polish Layer v41 (design-taste-frontend Redesign-Preserve + ui-ux-pro-max)
   纯增量覆盖层: 不改动任何既有选择器、ID、类名与 DOM 结构。
   如需回滚到 v40 外观, 删除本整段即可。
   ========================================================================== */

/* ---- A. 排版刷新: CJK 系统字体栈 (Windows 中文从宋体升级为雅黑, macOS 用苹方) ---- */
:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "HarmonyOS Sans SC", "MiSans", "Source Han Sans SC", "Noto Sans CJK SC",
    "Microsoft YaHei", "Noto Sans", Helvetica, Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji";
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* 数据行使用表格数字, 阶段进度/置信度/日期跳动时不抖动 */
.review-header p, .status, .ai-meta, .timeline small, .file-row-name {
  font-variant-numeric: tabular-nums;
}

/* ---- B. 可访问性: 键盘焦点环 (WCAG, 不影响鼠标点击外观) ---- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-fg, #0969da);
  outline-offset: 2px;
}

/* ---- C. 交互反馈: 指针与过渡 (150-250ms, ui-ux-pro-max 检查表) ---- */
summary, .file-row-btn, [data-toggle-employee-card], [data-nav-target],
.side-task-item, .feedback-collapse summary { cursor: pointer; }
input, select, textarea {
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.status { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
details.ai-note summary:hover { color: var(--primary); }
.file-row { transition: border-color .15s ease, background-color .15s ease; }
.file-row:hover { border-color: #cbd5e1; background: #fcfdfe; }
.file-row-del:active:not(:disabled), .file-row-btn:active { transform: scale(.92); }

/* ---- D. 管理端待审卡片组件化 (原先 .review-item-* 无任何样式, 为裸 div) ---- */
.review-item-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: #ffffff;
  border: 1px solid var(--border-subtle, #e1e4e8);
  border-radius: var(--radius-md, 6px);
  padding: 14px 16px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.review-item-card:hover {
  border-color: var(--primary-border, #bfdbfe);
  box-shadow: 0 2px 10px rgba(9, 105, 218, .07);
}
.review-item-main {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  flex: 1;
  min-width: 260px;
}
.review-item-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-md, 6px);
  background: var(--accent-subtle, #f0f8ff);
  color: var(--accent-fg, #0969da);
  border: 1px solid var(--accent-muted, #ddf4ff);
}
.review-item-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.review-item-details strong {
  font-size: 13px;
  color: var(--fg-main);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.review-item-details small {
  font-size: 12px;
  color: var(--fg-muted);
  line-height: 1.5;
  word-break: break-all;
}
.review-item-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
@media (max-width: 720px) {
  .review-item-actions { width: 100%; justify-content: flex-end; }
}

/* ---- E. 表面细节: 滚动条 / 文本选区 (品牌一致) ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: #c8d1da;
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #aebac6; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }
::selection { background: var(--accent-muted, #ddf4ff); color: var(--fg-default, #1f2328); }

/* ---- F. 动效减弱偏好: 一键禁用全部动画与平滑滚动 (P7) ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
/* ==== UI Polish Layer v41 END ==== */


/* ==========================================================================
   v42 纸墨档案主题层 (Paper & Ink Archive Theme)
   设计语言: 入职 = 文书/登记/盖章。暖纸底色, 靛墨蓝主色, 朱砂印章点缀,
   宋体系标题, 方形印章式状态徽章。移除全部渐变/玻璃拟态/荧光光晕等 AI 模板特征。
   纯增量覆盖: 不改任何既有选择器/ID/类名/DOM。删除本段即回滚 v41 外观。
   ========================================================================== */

/* ---- A. 令牌重定义: 暖纸 + 靛墨 + 朱砂 + 松绿 + 赭黄 ---- */
:root {
  /* 纸面画布 */
  --canvas-default: #f6f3ec;
  --canvas-overlay: #fffdf8;
  --canvas-inset: #f1ede2;
  --canvas-subtle: #f1ede2;

  --border-default: #ddd5c3;
  --border-muted: #e7e0d0;
  --border-subtle: #e7e0d0;
  --border-focus: #2a5580;

  --fg-default: #2e2b25;
  --fg-muted: #6f6a5e;
  --fg-subtle: #948d7d;
  --fg-on-emphasis: #fdfbf6;
  --fg: #2e2b25;

  /* 靛墨蓝 (主色, 取代 GitHub 蓝) */
  --accent-fg: #2a5580;
  --accent-emphasis: #2a5580;
  --accent-muted: #dce7f2;
  --accent-subtle: #e9eff6;

  /* 松绿 (通过/提交) */
  --success-fg: #2c6141;
  --success-emphasis: #2f6b46;
  --success-hover: #275a3b;
  --success-active: #234f34;
  --success-muted: #e3ede5;
  --success-subtle: #f2f7f3;

  /* 赭黄 (等待/注意) */
  --attention-fg: #8a6420;
  --attention-emphasis: #8a6420;
  --attention-muted: #f5edda;
  --attention-subtle: #faf5e9;

  /* 赭红 (退回/危险, 兼印章红) */
  --danger-fg: #96382e;
  --danger-emphasis: #a63d32;
  --danger-hover: #8f342b;
  --danger-muted: #f4e3de;
  --danger-subtle: #faf1ee;

  /* 梅紫 (done, 低饱和) */
  --done-fg: #6b5274;
  --done-emphasis: #6b5274;
  --done-muted: #f0e9f2;

  /* 暖调阴影 */
  --shadow-btn: 0 1px 0 rgba(87, 74, 51, 0.06);
  --shadow-btn-primary: 0 1px 0 rgba(46, 43, 37, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --shadow-box: 0 1px 3px rgba(87, 74, 51, 0.10), 0 1px 2px rgba(87, 74, 51, 0.06);
  --shadow-overlay: 0 1px 3px rgba(87, 74, 51, 0.12), 0 10px 28px rgba(87, 74, 51, 0.16);
  --shadow-xs: 0 1px 2px rgba(87, 74, 51, 0.05);
  --shadow-sm: 0 1px 3px rgba(87, 74, 51, 0.08);
  --shadow-md: 0 4px 14px rgba(87, 74, 51, 0.10);
  --shadow-lg: 0 10px 30px rgba(87, 74, 51, 0.14);

  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 10px;

  /* 兼容绑定重着色 */
  --bg-card: #fffdf8;
  --bg-card-hover: #f1ede2;
  --bg-inset: #f1ede2;
  --primary-hover: #234a70;
  --primary-light: #dce7f2;
  --primary-border: #c3d3e4;
  --success-border: #bcd4c2;
  --danger-border: #e3c0b8;
  --teal: #2a5580;

  /* 展示字体: 拉丁 Georgia + 中文宋体系 (官方文书气质, 全部系统字体零外链) */
  --font-display: Georgia, "Times New Roman", "Songti SC", "STSong", "SimSun", serif;
}

/* ---- B. 基础表面: 纸面底色 / 滚动条 / 选区 ---- */
html { background: #f6f3ec; }
body { background: #f6f3ec !important; color: #2e2b25; }
::-webkit-scrollbar-thumb { background: #c9c1ae; border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #b3a98f; background-clip: content-box; }
::selection { background: #dce7f2; color: #2e2b25; }

/* ---- C. 展示级宋体标题 (仅大标题, 正文保持无衬线可读性) ---- */
.hero h1, .enterprise-header-title, .panel-heading h2, .review-header h2,
.dialog-header h2, .doc-card-title, .config-item-title, .welcome-hero h1,
.chat-heading strong, .metrics strong, .welcome-flow-title, .brand::after {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}

/* ---- D. 顶栏: 去 GitHub 脸, 朱砂印章 + 宋体产品名 ---- */
.topbar {
  background: rgba(250, 247, 240, 0.94) !important;
  border-bottom: 1px solid #c9bfa8 !important;
  box-shadow: 0 2px 8px rgba(87, 74, 51, 0.05) !important;
}
.octocat-icon, .repo-breadcrumb, .repo-badge { display: none !important; }
.brand::before {
  content: "极";
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  background: #a63d32;
  color: #fdfbf6;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1.5px rgba(253, 251, 246, 0.38);
  transform: rotate(-3deg);
  transition: transform 0.18s ease;
}
.brand:hover::before { transform: rotate(0deg) scale(1.04); }
.brand::after {
  content: "极睿入职中心";
  font-size: 16px;
  font-weight: 700;
  color: #2e2b25;
}
.topbar-nav a, .topbar nav a {
  color: #4a453b !important;
  background: transparent !important;
  border-color: transparent !important;
}
.topbar-nav a:hover, .topbar nav a:hover {
  background: #efe9db !important;
  color: #2a5580 !important;
  border-color: #ddd5c3 !important;
}
.topbar-nav .octicon, .topbar nav .octicon { display: none !important; }

/* ---- E. 管理端 hero: 暗色渐变 -> 档案封面 (双线框纸卡) ---- */
.hero {
  background: #fdfbf6 !important;
  border: 1px solid #c9bfa8 !important;
  outline: 1px solid #e7e0d0;
  outline-offset: 3px;
  border-radius: 10px !important;
  color: #2e2b25 !important;
  box-shadow: 0 2px 10px rgba(87, 74, 51, 0.07) !important;
}
.hero::after { display: none !important; }
.hero h1 { color: #2e2b25 !important; letter-spacing: 0.01em !important; }
.eyebrow, .dialog-header .eyebrow { color: #a63d32 !important; letter-spacing: 0.14em; }
.hero-summary { color: #6f6a5e !important; }
.metrics div {
  background: #f1ede2 !important;
  border: 1px solid #ddd5c3 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.metrics div:hover { background: #eae3d3 !important; }
.metrics span { color: #6f6a5e !important; }
.metrics strong { color: #2e2b25 !important; font-family: var(--font-display) !important; }

/* ---- F. 员工端横幅 + 阶段胶囊: 方形印章感 ---- */
.enterprise-header-banner.unified-banner {
  border: 1px solid #ddd5c3 !important;
  border-left: 3px solid #a63d32 !important;
  background: #fffdf8 !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(87, 74, 51, 0.06) !important;
}
.stage-pill-tag {
  color: #2a5580 !important;
  background: #e9eff6 !important;
  border: 1px solid #c3d3e4 !important;
  border-radius: 3px !important;
  letter-spacing: 0.05em;
}
.node-pill-tag {
  color: #2c6141 !important;
  background: #e8f0e9 !important;
  border: 1px solid #bcd4c2 !important;
  border-radius: 3px !important;
  letter-spacing: 0.05em;
}

/* ---- G. 状态徽章: 圆形胶囊 -> 方形印章 (盖戳语义) ---- */
.status {
  border-radius: 3px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  padding: 2px 9px !important;
}
.status.passed, .status.success, .status.active {
  background-color: #e8f0e9 !important;
  color: #2c6141 !important;
  border-color: #a9c8b2 !important;
}
.status.review, .status.pending {
  background-color: #e9eff6 !important;
  color: #2a5580 !important;
  border-color: #b4c8dc !important;
}
.status.waiting {
  background-color: #f5edda !important;
  color: #8a6420 !important;
  border-color: #ddc99a !important;
}
.status.returned {
  background-color: #f4e3de !important;
  color: #96382e !important;
  border: 1.5px solid #dcb1a6 !important;
}
.status.rejected, .status.danger {
  background-color: #f4e3de !important;
  color: #96382e !important;
  border-color: #dcb1a6 !important;
}

/* ---- H. 按钮体系: GitHub 亮绿 -> 哑光松绿, 灰 -> 纸白墨线, 红 -> 赭红 ---- */
.button.primary,
.btn-pro.primary,
button[type="submit"].button.primary,
#submit-all-materials-btn,
#submit-all-materials-bottom-btn {
  background-color: #2f6b46 !important;
  color: #fdfbf6 !important;
  border: 1px solid #275a3b !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 0 rgba(46, 43, 37, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
.button.primary:hover,
.btn-pro.primary:hover,
#submit-all-materials-btn:hover,
#submit-all-materials-bottom-btn:hover {
  background-color: #275a3b !important;
  border-color: #234f34 !important;
}
.button.primary:active,
.btn-pro.primary:active {
  background-color: #234f34 !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.18) !important;
}
.button.secondary,
.btn-pro.secondary,
.button:not(.primary):not(.danger) {
  background-color: #fffdf8 !important;
  color: #2e2b25 !important;
  border: 1px solid #c9bfa8 !important;
  box-shadow: 0 1px 0 rgba(87, 74, 51, 0.05) !important;
}
.button.secondary:hover,
.btn-pro.secondary:hover,
.button:not(.primary):not(.danger):hover {
  background-color: #f1ede2 !important;
  border-color: #b8ac92 !important;
}
.button.danger, .btn-pro.danger {
  background-color: #fffdf8 !important;
  color: #96382e !important;
  border: 1px solid #c9bfa8 !important;
}
.button.danger:hover, .btn-pro.danger:hover {
  background-color: #a63d32 !important;
  color: #fdfbf6 !important;
  border-color: #8f342b !important;
}
.icon-button {
  color: #6f6a5e !important;
  background: transparent !important;
  border-radius: 6px !important;
}
.icon-button:hover { background: #f1ede2 !important; color: #2e2b25 !important; }
.file-row { background: #fffdf8; border-color: #ddd5c3 !important; }
.file-row:hover { border-color: #c9bfa8 !important; background: #faf7ee !important; }
.file-row-btn {
  color: #2a5580 !important;
  border-color: rgba(42, 85, 128, 0.35) !important;
  background: #fffdf8 !important;
}
.file-row-btn:hover { background: #e9eff6 !important; }
.file-row-del {
  color: #96382e !important;
  border-color: #dcb1a6 !important;
  background: #fffdf8 !important;
}
.file-row-del:hover:not(:disabled) { background: #f7eae7 !important; border-color: #c1635a !important; }
.material-upload-btn.ready { background: #f1ede2 !important; border-color: #ddd5c3 !important; color: #2e2b25 !important; }
.material-upload-btn.ready:hover { background: #eae3d3 !important; border-color: #c9bfa8 !important; }
.material-upload-btn.empty { background: #fffdf8 !important; color: #2a5580 !important; border: 1px dashed #8aa5c0 !important; }
.material-upload-btn.empty:hover { background: #e9eff6 !important; }

/* ---- I. 卡片与面板: 暖纸卡片 + 靛蓝悬浮 ---- */
.panel, .review-employee, .side-task-card, .dialog {
  background: #fffdf8 !important;
  border-color: #ddd5c3 !important;
  box-shadow: 0 1px 3px rgba(87, 74, 51, 0.06) !important;
}
.dialog { border-radius: 12px !important; box-shadow: 0 1px 3px rgba(87,74,51,.12), 0 10px 28px rgba(87,74,51,.16) !important; }
.panel-heading {
  background: #faf7ef !important;
  border: 1px solid #e7e0d0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.review-header { background: #faf7ef !important; border-bottom-color: #ddd5c3 !important; }
.review-employee:hover {
  border-color: #b8ac92 !important;
  box-shadow: 0 6px 18px rgba(87, 74, 51, 0.10) !important;
}
.review-employee.archived { background: #f4f1e8 !important; }
.material-card { background: #fffdf8; border-color: #ddd5c3; }
.material-card:hover {
  border-color: #c3d3e4 !important;
  box-shadow: 0 6px 18px rgba(42, 85, 128, 0.10) !important;
}
.review-item-card { border-color: #e7e0d0 !important; background: #fffdf8 !important; }
.review-item-card:hover {
  border-color: #c3d3e4 !important;
  box-shadow: 0 2px 10px rgba(42, 85, 128, 0.09) !important;
}
.doc-card, .doc-submit-card, .config-item-card {
  background: #fffdf8 !important;
  border-color: #ddd5c3 !important;
  border-radius: 10px !important;
}
.doc-submit-card:hover {
  border-color: #2a5580 !important;
  box-shadow: 0 2px 10px rgba(42, 85, 128, 0.10) !important;
}
.config-item-card:hover {
  border-color: #c3d3e4 !important;
  box-shadow: 0 4px 14px rgba(42, 85, 128, 0.09) !important;
}
.doc-card-title { color: #2e2b25 !important; }
.doc-spec-bullet { color: #6f6a5e !important; }
.side-task-item:hover { background: #f1ede2 !important; }
.side-task-item.active { background: #e9eff6 !important; }
.step-nav { background: #fffdf8 !important; border: 1px solid #ddd5c3; }

/* ---- J. 导航标签: GitHub 橙红下划线 -> 靛墨蓝 ---- */
.admin-tabs {
  background: #fffdf8 !important;
  border-bottom-color: #c9bfa8 !important;
}
.step-btn, .admin-tabs .tab { color: #6f6a5e !important; }
.step-btn:hover, .admin-tabs .tab:hover {
  color: #2e2b25 !important;
  border-bottom-color: #c9bfa8 !important;
}
.step-btn.active, .admin-tabs .tab.active {
  color: #2a5580 !important;
  border-bottom-color: #2a5580 !important;
}
.step-btn:disabled { color: #948d7d !important; }

/* ---- K. 时间线: 荧光光晕 -> 沉静纸墨环 ---- */
.timeline li:not(:last-child):before { border-left-color: #c9bfa8 !important; }
.timeline span { border-color: #c9bfa8 !important; background: #fffdf8 !important; }
.timeline .done span {
  border-color: #2f6b46 !important;
  background: #2f6b46 !important;
  box-shadow: 0 0 0 3px rgba(47, 107, 70, 0.15) !important;
}
.timeline .current span {
  border-color: #2a5580 !important;
  background: #fffdf8 !important;
  box-shadow: 0 0 0 3px rgba(42, 85, 128, 0.18) !important;
}

/* ---- L. 表单与输入: 暖纸 + 靛蓝聚焦环 ---- */
input[type="text"], input[type="date"], input[type="number"], input[type="tel"],
input[type="email"], input[type="search"], input[type="password"], input[type="url"],
input:not([type]), textarea, select, .form-select, .form-input, .chat-form input {
  background-color: #fffdf8 !important;
  color: #2e2b25 !important;
  border-color: #c9bfa8 !important;
}
input[type="text"]:focus, input[type="date"]:focus, input[type="number"]:focus,
input[type="tel"]:focus, input[type="email"]:focus, input[type="search"]:focus,
input[type="password"]:focus, input[type="url"]:focus, input:not([type]):focus,
textarea:focus, select:focus, .form-select:focus, .form-input:focus, .chat-form input:focus {
  border-color: #2a5580 !important;
  box-shadow: 0 0 0 3px rgba(42, 85, 128, 0.16) !important;
}
.form-label, label { color: #4a453b; }

/* ---- M. 智能问答浮窗: 暖纸浅色顶栏 ---- */
.chat-dock {
  border-color: #c9bfa8 !important;
  background: #fffdf8 !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 30px rgba(87, 74, 51, 0.18), 0 1px 3px rgba(87, 74, 51, 0.10) !important;
}
.chat-heading {
  background: #f1ede2 !important;
  color: #2e2b25 !important;
  border-bottom: 1px solid #ddd5c3 !important;
  border-radius: 10px 10px 0 0 !important;
}
.chat-heading strong { color: #2e2b25 !important; }
.chat-heading small { color: #6f6a5e !important; }
.chat-message.bot { background: #f1ede2 !important; }
.chat-thought-card, .chat-source-item { border-color: #ddd5c3 !important; background: #faf7ef !important; }
.chat-source-item:hover { border-color: #c3d3e4 !important; background: #e9eff6 !important; }

/* ---- N. 反馈/审阅意见块: 冷灰与 AI 紫 -> 暖纸与靛墨 ---- */
.ai-note > summary { color: #2a5580 !important; }
.ai-note-body { background: #f1ede2 !important; border-color: #ddd5c3 !important; }
.passed-block { border-color: #ddd5c3 !important; }
.passed-block > summary { color: #2c6141 !important; }
.passed-block-body { background: #f7f4ec !important; }

/* ---- O. 欢迎页 hero: 青色渐变 -> 靛墨纯色 + 金字 ---- */
.welcome-hero {
  background: #22384e !important;
  color: #f6f3ec !important;
}
.welcome-eyebrow { color: rgba(246, 243, 236, 0.72) !important; }
.welcome-hero h1 #welcome-name {
  color: #f0d9a8 !important;
  border-bottom-color: rgba(240, 217, 168, 0.5) !important;
}
.welcome-sub { color: rgba(246, 243, 236, 0.86) !important; }
.welcome-flow-title { color: #2e2b25 !important; }

/* ---- P. 知识库上传区: 冷灰虚线 -> 暖纸虚线 ---- */
.knowledge-drop-hero {
  border: 2px dashed #c9bfa8 !important;
  background: #f1ede2 !important;
  border-radius: 10px !important;
}
.knowledge-drop-hero:hover {
  border-color: #2a5580 !important;
  background: #e9eff6 !important;
}

/* ---- Q. 轻提示 toast: 暖墨色 ---- */
.toast {
  background: #2e2b25 !important;
  color: #f6f3ec !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(87, 74, 51, 0.25) !important;
}
.toast.error { background: #a63d32 !important; }

/* ---- R. 对话框头部与空状态 ---- */
.dialog-header { border-bottom-color: #ddd5c3 !important; }
.dialog-header p { color: #6f6a5e !important; }
/* ==== v42 纸墨档案主题层 END ==== */


/* ==========================================================================
   v43 功能层: 登记表经历信息单列排版 + 材料审核中等待条
   ========================================================================== */

/* 经历信息: 补上缺失的 one-column 规则(此前 HTML 有类名但 CSS 无定义, 实际渲染成三列挤压) */
.form-grid.one-column {
  grid-template-columns: 1fr;
  gap: 16px;
}
/* 格式提示: 去等宽字体, 规范与示例分行分色 */
.form-grid label small {
  font-family: inherit !important;
  color: #4a453b !important;
}
.form-grid label small em {
  display: block;
  font-style: normal;
  color: #6f6a5e;
  margin-top: 3px;
}

/* 审核中等待条: 取代上传按钮栏, 靛蓝虚线 + 呼吸圆点 */
.review-waiting-bar {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px dashed #b4c8dc;
  border-radius: 8px;
  background: #eef3f9;
  color: #2a5580;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.review-waiting-hint {
  font-weight: 400;
  color: #6f6a5e;
  font-size: 11.5px;
  letter-spacing: 0;
}
.waiting-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2a5580;
  flex-shrink: 0;
  animation: waiting-pulse 1.6s ease-in-out infinite;
}
@keyframes waiting-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.75); }
}
@media (prefers-reduced-motion: reduce) {
  .waiting-dot { animation: none; }
}
@media (max-width: 640px) {
  .review-waiting-bar { flex-wrap: wrap; }
  .review-waiting-hint { width: 100%; text-align: center; }
}
/* ==== v43 功能层 END ==== */

/* 考卷审批模式：答卷在外部查阅，无需关联左侧预览视窗，仅居中保留审批打分与意见抽屉 */
.preview-theater.exam-review-mode {
  width: min(560px, 92vw) !important;
  height: auto !important;
  max-height: min(680px, 90vh) !important;
}
.preview-theater.exam-review-mode .preview-viewport {
  display: none !important;
}
.preview-theater.exam-review-mode #preview-download-link,
.preview-theater.exam-review-mode .preview-img-controls {
  display: none !important;
}
.preview-theater.exam-review-mode .review-action-drawer {
  width: 100% !important;
  max-width: 100% !important;
  padding: 24px 28px !important;
  border-left: none !important;
}