/* 全局字体变量（:root）：确保所有 .vue 文件均可访问，不限于 .student-training-shell */
:root {
  /* 字体栈：中文优先苹方/思源黑体，回退微软雅黑，跨平台一致 */
  --student-font-base: "PingFang SC", "Source Han Sans SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* 数字/数据字体：等宽对齐，成绩/金额专用 */
  --student-font-data: "PingFang SC", "SF Mono", "JetBrains Mono", "Microsoft YaHei", monospace;

  /* 字号变量（对齐 Word 标准：1pt ≈ 1.333px） */
  --student-fs-display: 20px; /* 小三 15pt - 任务主标题 */
  --student-fs-h1: 18px; /* 小三 15pt - 步骤大标题 */
  --student-fs-h2: 16px; /* 小四 12pt - 面板/步骤行标题 */
  --student-fs-h3: 14px; /* 五号 10.5pt - 区块小标题 */
  --student-fs-body: 14px; /* 五号 10.5pt - 正文/描述 */
  --student-fs-body-sm: 13px; /* 表格次要文字 */
  --student-fs-caption: 12px; /* 小五 9pt - 标签/徽章 */
  --student-fs-button: 14px; /* 五号 - 按钮文字 */
  --student-fs-button-lg: 15px; /* 主操作按钮 */
  --student-fs-data: 16px; /* 小四 12pt - 数字/成绩/金额 */
}

.student-training-shell {
  --student-step-height: 40px;
  --student-step-font: 13px;
  --student-action-height: 38px;
  --student-action-font: 15px;
  --student-upload-height: 36px;
  --student-upload-font: 13px;
  --student-aux-height: 38px;
  --student-aux-font: 13px;
  --student-radius-sm: 6px;
  --student-radius-pill: 999px;
  /* 墨黑极简主题令牌 */
  --student-accent: #1f2937;
  --student-accent-deep: #111827;
  --student-accent-light: #4b5563;
  --student-accent-soft: #f3f4f6;
  --student-panel-border: #e5e7eb;
  --student-card-bg: #ffffff;
  --student-panel-bg: #fafbfc;
  --student-text: #1f2937;
  --student-text-secondary: #6b7280;

  /* ===== Element Plus 亮白主题覆盖 =====
     index.scss 全局把 Element Plus CSS 变量设成了暗色主题
     （--el-input-text-color: #e0f0ff 极浅蓝 / --el-input-bg-color: rgba(0,30,60,.6)），
     教师端/超管端的暗色页面需要这些值，但学生实训页
     .student-training-shell 是亮白底，必须在这里覆盖回来。 */
  --el-text-color-primary: #1f2937;
  --el-text-color-regular: #374151;
  --el-text-color-secondary: #6b7280;
  --el-text-color-placeholder: #9ca3af;
  --el-text-color-disabled: #9ca3af;
  --el-text-color: #1f2937;

  --el-input-bg-color: #ffffff;
  --el-input-text-color: #1f2937;
  --el-input-border-color: #e5e7eb;
  --el-input-hover-border-color: #1f2937;
  --el-input-focus-border-color: #1f2937;
  --el-input-focus-ring-color: rgba(31, 41, 55, 0.15);
  --el-input-disabled-bg-color: #f3f4f6;
  --el-input-disabled-text-color: #9ca3af;
  --el-input-disabled-border-color: #e5e7eb;

  --el-textarea-bg-color: #ffffff;
  --el-textarea-text-color: #1f2937;
  --el-textarea-border-color: #e5e7eb;
  --el-textarea-hover-border-color: #1f2937;
  --el-textarea-focus-border-color: #1f2937;
  --el-textarea-focus-ring-color: rgba(31, 41, 55, 0.15);

  --el-select-bg-color: #ffffff;
  --el-select-text-color: #1f2937;
  --el-select-border-color-hover: #1f2937;

  --el-fill-color-blank: #ffffff;
  --el-border-color: #e5e7eb;
  --el-border-color-hover: #1f2937;
  --el-border-radius-base: 6px;
}

/*
 * The app-main padding around a student training page is part of the page
 * canvas.  It must blend into the training canvas instead of exposing the
 * layout's older black gradient as a vertical block beside the sidebar.
 */
#app .studentLayout .app-main:has(.student-training-shell),
#app .teacherLayout .app-main:has(.student-training-shell) {
  background: linear-gradient(135deg, #f5f8fc 0%, #eaf2fb 52%, #f3f8ff 100%) !important;
}

/* 教师端亮色主题：实训页背景改为浅色，与学生端统一浅色风格 */
#app .teacherLayout .app-main:has(.student-training-shell) {
  background: linear-gradient(135deg, #f5f8fc 0%, #eaf2fb 52%, #f3f8ff 100%) !important;
}

#app .studentLayout .app-main:has(.student-training-shell) .student-training-shell,
#app .teacherLayout .app-main:has(.student-training-shell) .student-training-shell {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 10px !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: none !important;
  min-height: calc(100vh - 90px) !important;
  margin: 0 !important;
  /* padding 由架构标签 .app-main 提供（sidebar.scss 中 28px 32px 40px 24px），子页面根标签不再叠加 */
  // padding: 10px 10px 16px !important;
  // padding: 10px 10px 16px !important;
  background: #ffffff !important;
  /* 应用实训页专用字体栈 + 数字等宽对齐 */
  font-family: var(--student-font-base) !important;
  font-size: var(--student-fs-body) !important;
  line-height: 1.8 !important;
  font-variant-numeric: tabular-nums !important;
}

/* 教师端实训页容器背景改为透明，融入亮色主题 */
#app .teacherLayout .app-main:has(.student-training-shell) .student-training-shell {
  background: transparent !important;
}

/*
 * AI 助学助手已改为真正悬浮（position: fixed，组件内实现）：
 * 右下角圆形小按钮，点击展开悬浮面板；不占 grid 列、不影响页面内容宽度。
 */

/*
 * Student pages use different local names for their main and workbench cards.
 * Keep the layout density here so a page-specific card cannot reclaim the
 * space reserved for the hands-on activity area.
 */
.student-training-shell > main {
  min-width: 0 !important;
  padding: 14px !important;
  border-radius: 20px !important;
}

.student-training-shell > main > .task-card,
.student-training-shell > main > .process-workbench,
.student-training-shell > main > .factors-workbench,
.student-training-shell > main > .workbench {
  padding: 10px 12px !important;
  border-radius: 16px !important;
}

#app .studentLayout .app-main:has(.student-training-shell) .student-training-shell.product-process .process-workbench {
  padding: 10px 12px !important;
  border-radius: 16px !important;
}

#app .studentLayout .app-main:has(.student-training-shell) .student-training-shell.product-process .process-step-card {
  padding: 12px !important;
  border-radius: 16px !important;
}

#app .studentLayout .app-main:has(.student-training-shell) .student-training-shell.product-process .task-header {
  margin-bottom: 12px !important;
}

#app .studentLayout .app-main:has(.student-training-shell) .student-training-shell.product-process .workbench-head {
  margin-bottom: 12px !important;
  padding-bottom: 10px !important;
}

#app .studentLayout .app-main:has(.student-training-shell) .student-training-shell.product-process .workbench-head--actions-only {
  margin-bottom: 6px !important;
  padding-bottom: 0 !important;
}

#app .studentLayout .app-main:has(.student-training-shell) .student-training-shell.product-process .step-indicator {
  margin-bottom: 12px !important;
}

.student-training-shell .step-card,
.student-training-shell .process-step-card,
.student-training-shell .factor-step-card {
  padding: 12px !important;
  border-radius: 16px !important;
  padding: 12px !important;
  border-radius: 16px !important;
}

.student-training-shell .task-header {
  margin-bottom: 12px !important;
  margin-bottom: 12px !important;
}

.student-training-shell .task-header .task-title {
  font-size: var(--student-fs-display) !important; /* 20px 小三 */
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  font-weight: 700 !important;
}

.student-training-shell .workbench-head h3 {
  font-size: var(--student-fs-h1) !important; /* 18px 小三 */
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  font-weight: 700 !important;
}

.student-training-shell .panel-title h4,
.student-training-shell .step-title-row h3 {
  font-size: var(--student-fs-h2) !important; /* 16px 小四 */
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  font-weight: 600 !important;
}

.student-training-shell .task-desc,
.student-training-shell .step-desc,
.student-training-shell .goal-bg,
.student-training-shell .background-block,
.student-training-shell .example-block,
.student-training-shell .source-title {
  font-size: var(--student-fs-body) !important; /* 14px 五号 */
  line-height: 1.8 !important;
}

/* 数字/成绩/金额专用：等宽对齐，避免列内跳动（小四 16px） */
.student-training-shell .score-value,
.student-training-shell .data-number,
.student-training-shell .amount,
.student-training-shell .stat-value,
.student-training-shell .progress-value {
  font-family: var(--student-font-data) !important;
  font-size: var(--student-fs-data) !important; /* 16px 小四 */
  font-variant-numeric: tabular-nums !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

.student-training-shell .flow-steps,
/* ============================================================
 * 步骤导航（墨黑极简 · 对齐 foundation new-product-survey）
 * ============================================================ */
.student-training-shell .step-indicator {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 4px 0 20px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin !important;
  -webkit-overflow-scrolling: touch !important;
}

.student-training-shell .flow-arrow {
  display: none !important;
}

.student-training-shell .flow-pill,
.student-training-shell .step-tab {
  flex: 0 0 auto !important;
  min-width: auto !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: auto !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 8px 14px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  color: #6b7280 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  text-align: center !important;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease !important;

  .step-bar { display: none !important; }

  .step-no,
  &:has(.step-no) .step-no {
    position: static !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 5px !important;
    border-radius: 6px !important;
    background: #f3f4f6 !important;
    color: #6b7280 !important;
    font-family: ui-monospace, "SF Mono", Consolas, monospace !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    &::after { display: none !important; }
  }

  .step-name { color: inherit !important; }
}

.student-training-shell .flow-pill:hover:not(.active):not(.complete),
.student-training-shell .step-tab:hover:not(.active):not(.complete) {
  border-color: #1f2937 !important;
  background: #f9fafb !important;
  color: #1f2937 !important;
  .step-no,
  &:has(.step-no) .step-no {
    background: #1f2937 !important;
    color: #ffffff !important;
  }
}

.student-training-shell .flow-pill.complete:not(.active),
.student-training-shell .step-tab.complete:not(.active) {
  border-color: #dce9e2 !important;
  color: #374151 !important;
  .step-no,
  &:has(.step-no) .step-no {
    background: rgba(74,157,110,.12) !important;
    color: #3f8a5f !important;
  }
  &:hover {
    border-color: #4a9d6e !important;
    background: #f9fafb !important;
    color: #374151 !important;
    .step-no,
    &:has(.step-no) .step-no {
      background: #4a9d6e !important;
      color: #ffffff !important;
    }
  }
}

.student-training-shell .flow-pill.active,
.student-training-shell .step-tab.active {
  border-color: #1f2937 !important;
  background: #1f2937 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(31,41,55,.16) !important;
  .step-no,
  &:has(.step-no) .step-no {
    background: #ffffff !important;
    color: #1f2937 !important;
  }
  &:hover {
    background: #111827 !important;
    border-color: #111827 !important;
  }
}

/* 窄屏步骤导航横向滑动 */
@media (max-width: 900px) {
  .student-training-shell .step-indicator {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
  }
  .student-training-shell .step-tab,
  .student-training-shell .flow-pill {
    flex: 0 0 auto !important;
    min-width: 140px !important;
  }
}

/* flow-rail 旧布局兼容（保留但改色） */
.student-training-shell .flow-rail {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
  width: 100% !important;
  margin: 0 0 16px !important;
  padding: 4px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 60px !important;
  background: #f9fafb !important;
}

.student-training-shell .flow-step {
  display: flex !important;
  flex: 1 1 0 !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 8px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  color: #6b7280 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  overflow-wrap: anywhere !important;
}

.student-training-shell .flow-step span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 22px !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  border-radius: 6px !important;
  color: #6b7280 !important;
  background: #f3f4f6 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.student-training-shell .flow-step strong {
  min-width: 0 !important;
  color: inherit !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  overflow-wrap: anywhere !important;
}

.training-step-area {
  width: 100% !important;
  margin: 12px 0 16px !important;
  padding: 12px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.training-step-area::before {
  content: "任务实训" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 34px !important;
  min-width: 92px !important;
  margin: 0 0 14px !important;
  padding: 0 14px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 999px !important;
  color: #111827 !important;
  background: #f3f4f6 !important;
  font-size: var(--student-fs-body) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.training-step-area .caseBacktitle {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 34px !important;
  margin: 10px 0 8px !important;
  color: #1f2937 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
}

.training-step-area .caseBacktitle img {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  object-fit: contain !important;
}

.training-step-area .caseBacktitle span {
  margin-left: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: 0 !important;
}

.training-step-area p,
.training-step-area li,
.training-step-area .online,
.training-step-area .online span {
  color: #374151 !important;
  font-size: var(--student-fs-body) !important;
  line-height: 1.75 !important;
  letter-spacing: 0 !important;
}

.training-step-area .el-table {
  margin-top: 12px !important;
  margin-bottom: 18px !important;
  font-size: 14px !important;
}

.training-step-area .el-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 132px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 18px !important;
  border: 1px solid #1f2937 !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  background: #1f2937 !important;
  box-shadow: 0 2px 6px rgba(31,41,55,.16) !important;
  font-size: var(--student-fs-body) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.training-step-area .el-button:hover {
  background: #111827 !important;
  border-color: #111827 !important;
}

.training-step-area .el-button span {
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

.student-training-shell .training-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 14px !important;
  margin-top: 20px !important;
  padding: 0 !important;
}

.student-training-shell .training-actions .el-button.training-action,
.student-training-shell .training-actions button.training-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 112px !important;
  width: auto !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 18px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  color: #1f2937 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  font-size: var(--student-fs-body) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease !important;
}

.student-training-shell .training-actions .el-button.training-action span,
.student-training-shell .training-actions button.training-action span {
  font-size: inherit !important;
  line-height: 1 !important;
}

.student-training-shell .training-actions .el-button.training-action:hover:not(.is-disabled),
.student-training-shell .training-actions button.training-action:hover:not(:disabled) {
  border-color: #1f2937 !important;
  color: #1f2937 !important;
  background: #f9fafb !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 10px rgba(31,41,55,.14) !important;
}

.student-training-shell .training-actions .el-button.training-action.primary,
.student-training-shell .training-actions button.training-action.primary {
  border: 1px solid #1f2937 !important;
  color: #ffffff !important;
  background: #1f2937 !important;
  box-shadow: 0 2px 6px rgba(31,41,55,.16) !important;
}

.student-training-shell .training-actions .el-button.training-action.primary:hover:not(.is-disabled),
.student-training-shell .training-actions button.training-action.primary:hover:not(:disabled) {
  background: #111827 !important;
  border-color: #111827 !important;
  box-shadow: 0 4px 12px rgba(31,41,55,.24) !important;
}

.student-training-shell .training-actions .el-button.training-action.is-disabled,
.student-training-shell .training-actions button.training-action:disabled {
  opacity: .5 !important;
  transform: none !important;
  box-shadow: none !important;
}

/* 新产品调查等页面使用 task-actions，而非 training-action。统一底部提交/重置按钮规格。 */
.student-training-shell .task-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 20px !important;
  margin-top: 20px !important;
}

.student-training-shell .task-actions > button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 112px !important;
  width: auto !important;
  height: var(--student-action-height) !important;
  min-height: var(--student-action-height) !important;
  padding: 0 16px !important;
  font-size: var(--student-action-font) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.student-training-shell .taskfooter {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 20px !important;
  margin-top: 20px !important;
}

.student-training-shell .taskfooter .el-button {
  min-width: 112px !important;
  width: auto !important;
  height: var(--student-action-height) !important;
  min-height: var(--student-action-height) !important;
  padding: 0 16px !important;
  font-size: var(--student-action-font) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

/* 底部提交/重置操作统一采用实训页的胶囊按钮样式。 */
.student-training-shell .training-actions,
.student-training-shell .task-actions,
.student-training-shell .taskfooter {
  gap: 20px !important;
  margin-top: 20px !important;
}

.student-training-shell .training-actions .el-button.training-action,
.student-training-shell .training-actions button.training-action,
.student-training-shell .task-actions > button,
.student-training-shell .taskfooter .el-button {
  border: 1px solid rgba(31, 41, 55, 0.4) !important;
  border-radius: 10px !important;
  color: var(--student-text, #1f2937) !important;
  background: #ffffff !important;
  font-weight: 700 !important;
}

.student-training-shell .training-actions .training-action--submit,
.student-training-shell .task-actions > .btn-submit,
.student-training-shell .task-actions > .btn-primary,
.student-training-shell .taskfooter .el-button:first-child {
  border-color: var(--student-accent, #1f2937) !important;
  color: #ffffff !important;
  background: var(--student-accent, #1f2937) !important;
  box-shadow: 0 3px 10px rgba(31, 41, 55, 0.28) !important;
}

.student-training-shell .training-actions button.training-action:hover:not(:disabled),
.student-training-shell .task-actions > button:hover:not(:disabled),
.student-training-shell .taskfooter .el-button:hover:not(.is-disabled) {
  border-color: var(--student-accent, #1f2937) !important;
  background: var(--student-accent-soft, #f3f4f6) !important;
  color: var(--student-accent, #1f2937) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 10px rgba(31, 41, 55, 0.12) !important;
}

.student-training-shell .training-actions .training-action--submit:hover:not(:disabled),
.student-training-shell .task-actions > .btn-primary:hover:not(:disabled),
.student-training-shell .task-actions > .btn-submit:hover:not(:disabled),
.student-training-shell .taskfooter .el-button:first-child:hover:not(.is-disabled) {
  border-color: var(--student-accent-deep, #111827) !important;
  background: var(--student-accent-deep, #111827) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 14px rgba(17, 24, 39, 0.32) !important;
}

.student-training-shell .task-actions > button .el-icon {
  display: inline-flex !important;
}

.student-training-shell .el-button.ghost-action,
.student-training-shell .el-button.outline-action,
.student-training-shell .workbench-actions .el-button.material-download,
.student-training-shell button.ghost-action,
.student-training-shell button.outline-action,
.student-training-shell .workbench-actions button.material-download {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  width: auto !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(31, 41, 55, 0.4) !important;
  border-radius: 10px !important;
  color: var(--student-accent, #1f2937) !important;
  background: #ffffff !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease !important;
}

.student-training-shell .el-button.ghost-action:hover:not(.is-disabled),
.student-training-shell .el-button.outline-action:hover:not(.is-disabled),
.student-training-shell .workbench-actions .el-button.material-download:hover:not(.is-disabled),
.student-training-shell button.ghost-action:hover:not(:disabled),
.student-training-shell button.outline-action:hover:not(:disabled),
.student-training-shell .workbench-actions button.material-download:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  border-color: var(--student-accent, #1f2937) !important;
  color: var(--student-accent, #1f2937) !important;
  background: var(--student-accent-soft, #f3f4f6) !important;
  box-shadow: 0 3px 10px rgba(31, 41, 55, 0.12) !important;
}

/*
 * Workbench header actions are a single cross-page component contract.
 * Keep this after the generic button rules so legacy, scoped page styles
 * cannot turn the material/export actions into a different size or move
 * their action group away from the upper-right corner of the workbench.
 */
.student-training-shell .workbench-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.student-training-shell .workbench-actions {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  align-self: flex-start !important;
  gap: 8px !important;
  min-width: max-content !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
}

.student-training-shell .workbench-actions > .el-button,
.student-training-shell .workbench-actions > button,
.student-training-shell .workbench-actions > .material-download,
.student-training-shell .workbench-actions > .outline-action {
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  width: auto !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  color: #1f2937 !important;
  background: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease !important;
  &:hover {
    border-color: #1f2937 !important;
    background: #f9fafb !important;
    color: #1f2937 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 10px rgba(31,41,55,.14) !important;
  }
}

.student-training-shell .el-button.upload-action,
.student-training-shell .el-button.mini-upload,
.student-training-shell button.upload-action,
.student-training-shell button.mini-upload,
.student-training-shell button.upload-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  width: auto !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 18px !important;
  border: 1px solid #1f2937 !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  background: #1f2937 !important;
  box-shadow: 0 2px 6px rgba(31,41,55,.16) !important;
  font-size: var(--student-upload-font) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  &:hover {
    background: #111827 !important;
    border-color: #111827 !important;
  }
}

.student-training-shell textarea,
.student-training-shell .large-textarea,
.student-training-shell .input-field,
.student-training-shell .table-textarea {
  font-size: var(--student-fs-body) !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
}

.student-training-shell .field-block > span,
.student-training-shell .large-field > span,
.student-training-shell .product-field > span {
  font-size: 16px !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
}

.legacy-training-page {
  display: grid !important;
  box-sizing: border-box !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: start !important;
  width: 100% !important;
  padding: 10px !important;
  background: #ffffff !important;
}

.legacy-training-page > :not(.training-ai-sidebar) {
  grid-column: 1 !important;
  min-width: 0 !important;
}

.legacy-training-page > .training-intro,
.legacy-training-page > .training-step-area,
.legacy-training-page > .training-legacy-actions,
.legacy-training-page > .centent {
  width: 100% !important;
}

.legacy-training-page .top_item {
  margin-bottom: 12px !important;
}

.legacy-training-page .top_item .el-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 136px !important;
  height: 36px !important;
  padding: 0 12px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  color: #1f2937 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  font-size: var(--student-fs-body) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.legacy-training-page .top_item .el-button.active,
.legacy-training-page .top_item .active {
  transform: none !important;
  border-color: #1f2937 !important;
  color: #ffffff !important;
  background: #1f2937 !important;
}

// Keep long step names inside the navigation rail. Their complete name remains
// available through the native title tooltip applied by App.vue.
.student-training-shell .step-tab .step-copy,
.legacy-training-page .step-tab .step-copy,
.step-tabs .step-tab .step-copy,
.step-indicator .step-tab .step-copy {
  min-width: 0 !important;
  overflow: hidden;
}

.student-training-shell .step-tab .step-copy > strong,
.student-training-shell .step-tab .step-copy > b,
.legacy-training-page .step-tab .step-copy > strong,
.legacy-training-page .step-tab .step-copy > b,
.step-tabs .step-tab .step-copy > strong,
.step-tabs .step-tab .step-copy > b,
.step-indicator .step-tab .step-copy > strong,
.step-indicator .step-tab .step-copy > b {
  display: block !important;
  min-width: 0;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 1100px) {
  /* AI 悬浮球/面板在窄屏仍 fixed 悬浮；面板宽度自适应 100vw-32px */

  .student-training-shell .workbench-actions {
    min-width: 0 !important;
  }

  .student-training-shell .training-actions {
    gap: 14px !important;
  }

  .student-training-shell .flow-steps,
  .student-training-shell .step-indicator,
  .student-training-shell .flow-rail {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .student-training-shell .flow-pill,
  .student-training-shell .step-tab,
  .student-training-shell .flow-step,
  .student-training-shell .training-actions .el-button.training-action,
  .student-training-shell .training-actions button.training-action {
    width: 100% !important;
  }
}

@media (max-width: 900px) {
  #app .studentLayout .app-main:has(.student-training-shell) .student-training-shell,
  #app .teacherLayout .app-main:has(.student-training-shell) .student-training-shell {
    padding: 14px 14px 18px !important;
  }

  .legacy-training-page {
    padding: 12px !important;
  }

  .student-training-shell .workbench-head {
    flex-direction: column !important;
  }

  .student-training-shell .workbench-actions {
    align-self: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    margin-left: 0 !important;
  }
}

/* ============================================================
 * 学生端弹窗/抽屉/消息/下拉 墨黑极简主题
 * 通过 body.student-light-mode 锚点命中 teleport 到 body 的弹层
 * ============================================================ */
body.student-light-mode {
  /* ---------- el-dialog ---------- */
  --el-dialog-bg-color: #ffffff;
  --el-dialog-border-radius: 12px;
  --el-dialog-padding-primary: 0;
  --el-dialog-width: 50%;

  .el-overlay {
    background-color: rgba(17, 24, 39, 0.55) !important;
  }

  .el-dialog {
    border-radius: 12px !important;
    box-shadow: 0 20px 60px rgba(17, 24, 39, 0.25) !important;
    border: 1px solid #e5e7eb !important;
    overflow: hidden;

    .el-dialog__header {
      margin: 0 !important;
      padding: 16px 20px !important;
      background: #ffffff !important;
      border-bottom: 1px solid #e5e7eb !important;
      border-radius: 12px 12px 0 0 !important;
      margin-right: 0 !important;

      .el-dialog__title {
        color: #1f2937 !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        font-family: var(--student-font-base) !important;
      }

      .el-dialog__headerbtn {
        top: 16px !important;
        right: 16px !important;

        .el-dialog__close {
          color: #6b7280 !important;
          &:hover { color: #1f2937 !important; }
        }
      }
    }

    .el-dialog__body {
      padding: 20px !important;
      background: #ffffff !important;
      color: #1f2937 !important;
      font-size: 14px !important;
      line-height: 1.6 !important;
    }

    .el-dialog__footer {
      padding: 12px 20px 16px !important;
      background: #ffffff !important;
      border-top: 1px solid #f3f4f6 !important;
      display: flex !important;
      justify-content: flex-end !important;
      gap: 10px !important;
    }
  }

  /* ---------- el-message-box ---------- */
  .el-message-box {
    border-radius: 12px !important;
    box-shadow: 0 20px 60px rgba(17, 24, 39, 0.25) !important;
    border: 1px solid #e5e7eb !important;

    .el-message-box__header {
      padding: 16px 20px 0 !important;
      .el-message-box__title {
        color: #1f2937 !important;
        font-size: 16px !important;
        font-weight: 700 !important;
      }
      .el-message-box__headerbtn .el-message-box__close { color: #6b7280 !important; }
    }
    .el-message-box__content {
      color: #374151 !important;
      font-size: 14px !important;
      padding: 14px 20px !important;
    }
    .el-message-box__btns {
      padding: 8px 20px 16px !important;
      display: flex !important;
      justify-content: flex-end !important;
      gap: 10px !important;
    }
  }

  /* ---------- el-drawer ---------- */
  .el-drawer {
    border: 1px solid #e5e7eb !important;

    .el-drawer__header {
      padding: 16px 20px !important;
      margin-bottom: 0 !important;
      border-bottom: 1px solid #e5e7eb !important;
      .el-drawer__title {
        color: #1f2937 !important;
        font-size: 16px !important;
        font-weight: 700 !important;
      }
      .el-drawer__close-btn {
        color: #6b7280 !important;
        &:hover { color: #1f2937 !important; }
      }
    }
    .el-drawer__body {
      padding: 20px !important;
      background: #ffffff !important;
      color: #1f2937 !important;
    }
    .el-drawer__footer {
      padding: 12px 20px 16px !important;
      border-top: 1px solid #e5e7eb !important;
      display: flex !important;
      justify-content: flex-end !important;
      gap: 10px !important;
    }
  }

  /* ---------- el-message / el-notification ---------- */
  --el-message-bg-color: #ffffff;
  --el-message-border-color: #e5e7eb;
  --el-message-text-color: #1f2937;
  --el-message-padding-lr: 16px;

  .el-message {
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.15) !important;
    border: 1px solid #e5e7eb !important;
  }

  .el-notification {
    border-radius: 10px !important;
    box-shadow: 0 12px 36px rgba(17, 24, 39, 0.2) !important;
    border: 1px solid #e5e7eb !important;
  }

  /* ---------- el-select-dropdown / el-popper ---------- */
  .el-select-dropdown,
  .el-popper.is-light,
  .el-date-editor .el-picker-panel {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.15) !important;
    color: #1f2937 !important;

    .el-select-dropdown__item,
    .el-popper .el-select-dropdown__item {
      color: #374151 !important;
      &.is-hovering { background: #f3f4f6 !important; color: #1f2937 !important; }
      &.is-selected { color: #1f2937 !important; font-weight: 700 !important; }
    }
  }

  /* ---------- el-popover ---------- */
  .el-popover {
    border-radius: 8px !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.15) !important;
    background: #ffffff !important;
    color: #1f2937 !important;
  }

  /* ---------- gdialog 旧自定义弹窗（popModal.vue 用） ---------- */
  .gdialog {
    background: #ffffff !important;
    color: #1f2937 !important;
    border-radius: 12px !important;
    border: 1px solid #e5e7eb !important;

    p, span, div, li { color: #1f2937 !important; }
    strong, b { color: #111827 !important; }

    .el-dialog__header {
      background: #ffffff !important;
      border-bottom: 1px solid #e5e7eb !important;
      padding: 16px 20px !important;
      border-radius: 12px 12px 0 0 !important;
      margin-right: 0 !important;

      .el-dialog__title {
        color: #1f2937 !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        font-family: var(--student-font-base) !important;
      }
    }
    .el-dialog__body {
      background: #ffffff !important;
      color: #1f2937 !important;
    }
    .el-dialog__footer {
      .el-button {
        background: #ffffff !important;
        border: 1px solid #e5e7eb !important;
        color: #374151 !important;
        border-radius: 8px !important;
      }
    }
  }

  /* ---------- dialogClass 旧自定义弹窗 ---------- */
  .dialogClass {
    background: #ffffff !important;
    .el-dialog__header {
      padding: 16px 20px !important;
      margin-right: 0 !important;
      border-bottom: 1px solid #e5e7eb !important;
    }
  }

  /* ---------- el-button in dialog/drawer ---------- */
  .el-dialog, .el-drawer, .el-message-box {
    .el-button {
      border-radius: 8px !important;
      font-weight: 600 !important;
      font-family: var(--student-font-base) !important;

      &.el-button--primary {
        background: #1f2937 !important;
        border-color: #1f2937 !important;
        color: #ffffff !important;
        &:hover { background: #111827 !important; border-color: #111827 !important; }
      }
      &:not(.el-button--primary):not(.el-button--text) {
        background: #ffffff !important;
        border-color: #e5e7eb !important;
        color: #374151 !important;
        &:hover { border-color: #1f2937 !important; color: #1f2937 !important; }
      }
    }
  }

  /* ---------- el-form in dialog ---------- */
  .el-dialog .el-form-item__label {
    color: #374151 !important;
    font-weight: 500 !important;
  }
  .el-dialog .el-input__wrapper,
  .el-dialog .el-textarea__inner {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: none !important;
    color: #1f2937 !important;
    &:hover, &.is-focus { border-color: #1f2937 !important; box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.1) !important; }
  }
}