/* =============================================================
 * 教师端 · 极简 SaaS 教育风 统一适配
 * 作用范围：
 *   1) 页面内 scoped 暗色样式  -> 用 #app .teacherLayout 前缀提权覆盖
 *   2) teleport 到 body 的弹层 -> 用 body.teacher-light-mode 覆盖
 * 色板：教育蓝单主色 + 中性灰
 *   主按钮 outline：透明底 + #3b82f6 蓝描边（hover 蓝色半透明）/ 浅底 #eff6ff
 *   主文字 #1f2937 / 次文字 #6b7280 / 辅助 #9ca3af
 *   卡片 #ffffff / 描边 #e5e7eb / 行 hover #f9fafb
 * 控件统一：按钮、输入框 36px 高 · 8px 圆角 · 12px 字号
 * ============================================================= */

/* ---------- 1. 页面根容器与基础文字 ---------- */
#app .teacherLayout {
  .teacher-page,
  .student-page,
  .class-page,
  .training-task-page,
  .grade-center,
  .task,
  .default-task-page,
  .school-admin-workbench,
  .task-review {
    color: #1f2937;
  }

  // 通用文字层级：白色文字在亮色背景下不可见，统一改深色
  h1,
  h2,
  h3,
  h4,
  h5 {
    color: #1f2937;
    text-shadow: none !important;
  }

  p,
  span,
  div,
  li,
  label {
    // 仅覆盖原本偏白的文字，避免误伤 Element 组件内部状态色
  }

  /* ---------- 2. 页面头部卡片（两种变体统一） ---------- */
  .page-header {
    background: linear-gradient(135deg, #ffffff 0%, #f3f8ff 100%) !important;
    border: 1px solid rgba(59, 130, 246, 0.18) !important;
    box-shadow:
      0 6px 20px rgba(30, 60, 100, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;

    &::before {
      background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.45), transparent) !important;
    }

    .header-content h1,
    .header-text .page-title,
    .header-text .header-title {
      color: #1f2937 !important;
      text-shadow: none !important;
    }

    .header-content p,
    .header-text .page-subtitle,
    .header-text .header-subtitle {
      color: #6b7280 !important;
    }

    // 纯青色图标块：保留蓝色渐变，降低发光
    .header-icon {
      color: #ffffff !important;
      box-shadow: 0 6px 18px rgba(59, 130, 246, 0.28) !important;
    }

    // 玻璃质感图标框
    .header-icon-wrap {
      background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(59, 130, 246, 0.06)) !important;
      border-color: rgba(59, 130, 246, 0.3) !important;

      .header-icon-svg {
        color: #3b82f6 !important;
      }
    }

    .decoration-dot {
      opacity: 0.7;
    }
  }

  // 成绩中心 hero 大卡
  .admin-hero {
    background: linear-gradient(135deg, #ffffff 0%, #f3f8ff 100%) !important;
    border-color: rgba(59, 130, 246, 0.22) !important;
    box-shadow: 0 8px 24px rgba(30, 60, 100, 0.08) !important;

    &::after {
      background: linear-gradient(90deg, rgba(59, 130, 246, 0.1), transparent 38%), repeating-linear-gradient(90deg, rgba(59, 130, 246, 0.06) 0 1px, transparent 1px 64px) !important;
    }
  }

  .admin-badge {
    color: #2563eb !important;
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
  }

  .admin-title {
    color: #1f2937 !important;
    text-shadow: none !important;
  }

  .admin-subtitle {
    color: #6b7280 !important;
  }

  /* ---------- 3. 搜索栏 / 工具条 ---------- */
  .query-bar,
  .task-toolbar,
  .toolbar,
  .filter-section,
  .df {
    background: #ffffff !important;
    border: 1px solid rgba(59, 130, 246, 0.15) !important;
    box-shadow: 0 4px 14px rgba(30, 60, 100, 0.06) !important;
  }

  .query-item .query-label,
  .class-picker,
  .toolbar .query-label,
  .df span,
  .online span {
    color: #1f2937 !important;
  }

  .task-tip {
    color: #6b7280 !important;
  }

  /* ---------- 4. 卡片容器 ---------- */
  .card,
  .admin-panel,
  .score-card,
  .stats-card,
  .trend-card {
    background: #ffffff !important;
    border: 1px solid rgba(59, 130, 246, 0.15) !important;
    box-shadow: 0 6px 20px rgba(30, 60, 100, 0.06) !important;
    backdrop-filter: none;
  }

  .admin-panel-title {
    color: #1f2937 !important;
  }

  .admin-panel-subtitle {
    color: #6b7280 !important;
  }

  // 卡片内部标题/正文
  .card-header,
  .card-body,
  .card-footer {
    color: #1f2937;

    h2,
    h3,
    h4,
    .card-title {
      color: #1f2937 !important;
    }
  }

  // app-container 全局蓝色发光阴影柔化
  .app-container {
    background: #ffffff;
    box-shadow: 0 6px 20px rgba(30, 60, 100, 0.08) !important;
    min-height: auto !important;
    padding: 18px 20px 28px !important;
  }

  // 滚动容器统一底部留白，避免表格/列表滚到底部紧贴边缘
  .teacher-main {
    padding-bottom: 32px !important;
  }

  /* ---------- 5. 表格 ---------- */
  .el-table {
    background-color: #ffffff !important;
    border: 1px solid rgba(59, 130, 246, 0.15) !important;
    box-shadow: 0 6px 20px rgba(30, 60, 100, 0.06) !important;
    color: #1f2937;

    // 表头：浅蓝渐变 + 深蓝字（!important 同时覆盖页面 :header-cell-style 内联样式）
    .el-table__header-wrapper th.el-table__cell,
    .el-table__fixed-header-wrapper th.el-table__cell {
      background: linear-gradient(135deg, #eff6ff 0%, #eff6ff 100%) !important;
      background-color: #e3effb !important;
      color: #1f2937 !important;
      font-weight: 600 !important;
      text-shadow: none !important;
      border-bottom: 1px solid rgba(59, 130, 246, 0.2) !important;
    }

    // 单元格
    .el-table__cell,
    td.el-table__cell .cell {
      color: #1f2937 !important;
    }

    tr,
    td.el-table__cell {
      background-color: #ffffff !important;
      border-bottom: 1px solid #edf2f7 !important;
    }

    // 紧凑化：正文行单元格 padding 从 Element 默认 ~12px 减到 6px 左右，行高 ~40px
    td.el-table__cell {
      padding-top: 6px !important;
      padding-bottom: 6px !important;

      .cell {
        line-height: 1.5 !important;
      }
    }

    // 斑马纹（若开启）
    .el-table__row--striped td.el-table__cell {
      background-color: #f8fbff !important;
    }

    // hover 行
    .el-table__body tr:hover > td.el-table__cell {
      background-color: #eff6ff !important;
    }

    // 空数据/汇总行文字
    .el-table__empty-text,
    .el-table__summary .cell {
      color: #9ca3af !important;
    }

    // 表尾合计
    tfoot td.el-table__cell {
      background-color: #f9fafb !important;
      color: #1f2937 !important;
    }

    // 排序/筛选图标
    .caret-wrapper {
      color: #9ca3af;
    }
  }

  /* ---------- 6. 按钮（统一规范：36px 高 · 8px 圆角 · 12px 字号）----------
   * 实色主按钮（蓝）只承载主操作；默认按钮白底灰边；文字按钮蓝/红用于表格行内
   */
  .el-button {
    height: 36px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: none !important;
    transform: none !important;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;

    // 默认按钮（取消等次要操作）：白底灰边深字，hover 边变深 + 微浮
    &:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--info):not(.is-text):not(.is-link) {
      background-color: #ffffff !important;
      border-color: #e5e7eb !important;
      color: #1f2937 !important;

      &:hover,
      &:focus {
        background-color: #f9fafb !important;
        border-color: #9ca3af !important;
        color: #1f2937 !important;
        box-shadow: 0 4px 12px rgba(17, 24, 39, 0.08) !important;
        transform: translateY(-1px) !important;
      }

      // 按下：回落 + 更暗底
      &:active {
        background-color: #f3f4f6 !important;
        border-color: #9ca3af !important;
        box-shadow: none !important;
        transform: translateY(0) !important;
      }
    }

    // 主按钮：透明底 + 蓝描边 + 蓝字（outline 风格）
    &.el-button--primary {
      background-color: transparent !important;
      border-color: #3b82f6 !important;
      color: #3b82f6 !important;

      // 移入：蓝色半透明底，描边/文字保持蓝
      &:hover,
      &:focus {
        background-color: rgba(59, 130, 246, 0.1) !important;
        border-color: #3b82f6 !important;
        color: #2563eb !important;
      }

      // 按下：蓝色半透明再加深
      &:active {
        background-color: rgba(59, 130, 246, 0.18) !important;
        border-color: #2563eb !important;
        color: #2563eb !important;
      }

      // plain 朴素态与默认 outline 风格保持一致
      &.is-plain {
        background-color: transparent !important;
        border-color: #3b82f6 !important;
        color: #3b82f6 !important;

        &:hover,
        &:focus {
          background-color: rgba(59, 130, 246, 0.1) !important;
          border-color: #3b82f6 !important;
          color: #2563eb !important;
        }

        &:active {
          background-color: rgba(59, 130, 246, 0.18) !important;
          color: #2563eb !important;
        }
      }
    }

    // 成功（语义状态色）
    &.el-button--success {
      background-color: #2ba471 !important;
      border-color: #2ba471 !important;
      color: #ffffff !important;

      &:hover,
      &:focus {
        background-color: #3cbb85 !important;
        border-color: #3cbb85 !important;
        color: #ffffff !important;
        box-shadow: 0 4px 14px rgba(43, 164, 113, 0.3) !important;
        transform: translateY(-1px) !important;
      }

      &:active {
        background-color: #1f8559 !important;
        border-color: #1f8559 !important;
        box-shadow: none !important;
        transform: translateY(0) !important;
      }

      &.is-plain {
        background-color: #e6f6ee !important;
        border-color: #9fd8bd !important;
        color: #1e7a4f !important;

        &:hover,
        &:focus {
          background-color: #2ba471 !important;
          color: #ffffff !important;
        }
      }
    }

    // 警告（语义状态色）
    &.el-button--warning {
      background-color: #e8a33d !important;
      border-color: #e8a33d !important;
      color: #ffffff !important;

      &:hover,
      &:focus {
        background-color: #f2b45a !important;
        border-color: #f2b45a !important;
        color: #ffffff !important;
        box-shadow: 0 4px 14px rgba(232, 163, 61, 0.3) !important;
        transform: translateY(-1px) !important;
      }

      &:active {
        background-color: #c9841f !important;
        border-color: #c9841f !important;
        box-shadow: none !important;
        transform: translateY(0) !important;
      }

      &.is-plain {
        background-color: #fdf3e2 !important;
        border-color: #f3d3a0 !important;
        color: #b36a14 !important;

        &:hover,
        &:focus {
          background-color: #e8a33d !important;
          color: #ffffff !important;
        }
      }
    }

    // 危险（语义状态色）
    &.el-button--danger {
      background-color: #ef4444 !important;
      border-color: #ef4444 !important;
      color: #ffffff !important;

      &:hover,
      &:focus {
        background-color: #dc2626 !important;
        border-color: #dc2626 !important;
        color: #ffffff !important;
        box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3) !important;
        transform: translateY(-1px) !important;
      }

      &:active {
        background-color: #b91c1c !important;
        border-color: #b91c1c !important;
        box-shadow: none !important;
        transform: translateY(0) !important;
      }

      &.is-plain {
        background-color: #fef2f2 !important;
        border-color: #fecaca !important;
        color: #dc2626 !important;

        &:hover,
        &:focus {
          background-color: #ef4444 !important;
          border-color: #ef4444 !important;
          color: #ffffff !important;
        }
      }
    }

    // text/link 文字按钮（表格操作列）：透明底，primary 蓝、danger 红
    &.is-text,
    &.is-link {
      height: auto;
      background: transparent !important;
      border-color: transparent !important;

      &.el-button--primary {
        color: #3b82f6 !important;
        &:hover,
        &:focus {
          color: #2563eb !important;
          background: rgba(59, 130, 246, 0.08) !important;
        }
      }
      &.el-button--danger {
        color: #ef4444 !important;
        &:hover,
        &:focus {
          color: #dc2626 !important;
          background: rgba(239, 68, 68, 0.08) !important;
        }
      }
      &.el-button--warning {
        color: #d97706 !important;
        &:hover,
        &:focus {
          color: #b45309 !important;
          background: rgba(217, 119, 6, 0.08) !important;
        }
      }
    }

    // 禁用
    &.is-disabled,
    &.is-disabled:hover,
    &.is-disabled:focus {
      opacity: 0.5;
      box-shadow: none !important;
    }
  }

  /* ---------- 7. 表单与输入组件（统一规范：36px 高 · 8px 圆角 · 12px 字号）----------
   * input/select/date 的 wrapper 统一外观：白底灰边，hover 中性变深，聚焦教育蓝光晕
   */
  .el-form-item__label {
    color: #1f2937 !important;
    font-size: 12px;
  }

  // EP 中 input 与 select 各自承载边框的 wrapper 必须同时覆盖
  .el-input__wrapper,
  .el-select__wrapper {
    height: 36px !important;
    min-height: 36px !important;
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    padding: 0 11px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;

    &:hover {
      border-color: #d1d5db !important;
    }

    &.is-focus,
    &.is-focused {
      border-color: #3b82f6 !important;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
    }
  }

  .el-input__inner {
    height: 34px !important;
    line-height: 34px !important;
    font-size: 12px !important;
    color: #1f2937 !important;

    &::placeholder {
      color: #9ca3af !important;
    }
  }

  // select 显示值/占位值（EP 用 -webkit-text-fill-color，需显式覆盖）
  .el-select__placeholder,
  .el-select__selected-item {
    font-size: 12px !important;
    color: #1f2937 !important;
    -webkit-text-fill-color: #1f2937 !important;
  }

  .el-select__placeholder.is-transparent {
    color: #9ca3af !important;
    -webkit-text-fill-color: #9ca3af !important;
  }

  .el-select__caret {
    color: #9ca3af !important;
  }

  .el-input__prefix,
  .el-input__suffix {
    color: #9ca3af;
  }

  // 多行文本：与单行同一描边语言
  .el-textarea__inner {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    color: #1f2937 !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    box-shadow: none !important;

    &::placeholder {
      color: #9ca3af !important;
    }

    &:hover { border-color: #d1d5db !important; }

    &:focus {
      border-color: #3b82f6 !important;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
    }
  }

  // 禁用态：浅灰底 + 灰边 + 浅字
  .el-select .el-input.is-disabled .el-input__wrapper,
  .el-input.is-disabled .el-input__wrapper,
  .el-select.is-disabled .el-select__wrapper {
    background-color: #f9fafb !important;
    border-color: #e5e7eb !important;

    .el-input__inner {
      color: #9ca3af !important;
      -webkit-text-fill-color: #9ca3af;
    }
  }

  // 单选/复选文字
  .el-radio,
  .el-checkbox {
    color: #1f2937;
    font-size: 12px;

    &.is-disabled {
      color: #9ca3af;
    }
  }

  .el-radio__label,
  .el-checkbox__label {
    color: #1f2937;
  }

  // 表单校验错误
  .el-form-item__error {
    color: #ef4444;
  }

  // 字数统计
  .el-input__count,
  .el-input__count-inner {
    color: #9ca3af !important;
    background: transparent !important;
  }

  /* ---------- 8. 分页（覆盖全局 index.scss 强制暗色） ---------- */
  .el-pagination,
  .pager .el-pagination {
    --el-pagination-bg-color: transparent;
    --el-pagination-button-bg-color: #ffffff;
    --el-pagination-hover-color: #3b82f6;
    color: #1f2937;
    font-weight: 500;

    .el-pagination__total,
    .el-pagination__jump {
      color: #1f2937 !important;
    }

    button,
    .el-pager li {
      background-color: #ffffff !important;
      color: #1f2937 !important;
      border: 1px solid #e5e7eb;
      border-radius: 6px;
      font-weight: 500;

      &:hover {
        color: #3b82f6 !important;
        border-color: #3b82f6;
        background-color: #eff6ff !important;
      }
    }

    .el-pager li.is-active {
      background-color: #3b82f6 !important;
      color: #ffffff !important;
      border-color: #3b82f6;
    }

    .btn-prev,
    .btn-next {
      background-color: #ffffff !important;
      color: #1f2937 !important;

      &:disabled,
      &.is-disabled {
        background-color: #f9fafb !important;
        color: #b0c0d0 !important;
      }
    }

    .el-select .el-input__wrapper {
      background-color: #ffffff !important;
      box-shadow: 0 0 0 1px #e5e7eb inset !important;

      .el-input__inner {
        color: #1f2937 !important;
      }
    }
  }

  /* ---------- 9. 其他组件 ---------- */
  // 标签 el-tag：浅底标签文字加深，保证在白底上可读
  .el-tag {
    &.el-tag--primary {
      &.is-plain,
      &.is-light {
        color: #2563eb !important;
        background-color: #eff6ff !important;
        border-color: #9cc8ef !important;
      }
    }

    &.el-tag--success {
      &.is-plain,
      &.is-light {
        color: #1e7a4f !important;
        background-color: #e6f6ee !important;
        border-color: #9fd8bd !important;
      }
    }

    &.el-tag--warning {
      &.is-plain,
      &.is-light {
        color: #b36a14 !important;
        background-color: #fdf3e2 !important;
        border-color: #f3d3a0 !important;
      }
    }

    &.el-tag--danger {
      &.is-plain,
      &.is-light {
        color: #c0392b !important;
        background-color: #fdecec !important;
        border-color: #f3b0b0 !important;
      }
    }

    &.el-tag--info {
      &.is-plain,
      &.is-light {
        color: #5e6b7c !important;
        background-color: #f4f6f9 !important;
        border-color: #d3dae3 !important;
      }
    }
  }

  // 标签页
  .el-tabs__item {
    color: #6b7280;

    &.is-active {
      color: #2563eb;
    }
  }

  .el-tabs__active-bar {
    background-color: #3b82f6;
  }

  .el-tabs__nav-wrap::after {
    background-color: #e3eaf2;
  }

  // 描述列表
  .el-descriptions__label {
    color: #6b7280 !important;
    background: #f6f9fc !important;
  }

  .el-descriptions__content {
    color: #1f2937 !important;
  }

  // 卡片组件
  .el-card {
    border-color: rgba(59, 130, 246, 0.15);
    box-shadow: 0 4px 14px rgba(30, 60, 100, 0.05);
  }

  // 空状态
  .el-empty__description p {
    color: #9ca3af;
  }

  // 加载遮罩（覆盖全局 element-ui.scss 暗色遮罩）
  .el-loading-mask {
    background-color: rgba(245, 248, 252, 0.78) !important;
    backdrop-filter: blur(2px);
  }

  .el-loading-spinner .path {
    stroke: #3b82f6 !important;
  }

  .el-loading-text {
    color: #3b82f6 !important;
  }

  // 开关
  .el-switch__label {
    color: #1f2937;
  }

  // 下拉菜单（页面内）
  .el-dropdown-menu {
    color: #1f2937;
  }

  // 警告/提示条
  .el-alert__title,
  .el-alert__description {
    color: inherit;
  }

  /* ---------- 16. 按钮/表头/密度统一规范（仅样式层，不改模板） ---------- */

  // 16.1 工具栏按钮语义纠偏
  // 语义约定：查询/搜索/保存=蓝，新增=绿，导入=蓝，导出/下载=橙，重置/刷新/配置=白底
  // 学生管理：btn-group 首个 primary 是“新增” -> 绿；末个 primary 是“刷新” -> 白底
  .student-page .query-bar .btn-group {
    > .el-button--primary:first-child {
      background-color: #2ba471 !important;
      border-color: #2ba471 !important;
      color: #ffffff !important;
      box-shadow: none !important;

      &:hover,
      &:focus {
        background-color: #3cbb85 !important;
        border-color: #3cbb85 !important;
        color: #ffffff !important;
      }
    }

    > .el-button--primary:last-child {
      background-color: #ffffff !important;
      border-color: #e5e7eb !important;
      color: #1f2937 !important;
      box-shadow: none !important;

      &:hover,
      &:focus {
        background-color: #eff6ff !important;
        border-color: #3b82f6 !important;
        color: #3b82f6 !important;
      }
    }
  }

  // 成绩管理：toolbar-right 内三个 success 依次为 导出 / 权重设置 / 成绩更新
  .school-admin-workbench .toolbar .toolbar-right {
    // 导出 -> 橙（与其他页面导出统一）
    > .el-button--success {
      background: #e8a33d !important;
      border-color: #e8a33d !important;
      color: #ffffff !important;
      box-shadow: none !important;

      &:hover {
        background: #f2b45a !important;
        border-color: #f2b45a !important;
        color: #ffffff !important;
      }
    }

    // 权重设置（第二个 success）-> 白底次要
    > .el-button--success ~ .el-button--success {
      background: #ffffff !important;
      border-color: #e5e7eb !important;
      color: #1f2937 !important;
      box-shadow: none !important;

      &:hover {
        background: #eff6ff !important;
        border-color: #3b82f6 !important;
        color: #3b82f6 !important;
      }
    }

    // 成绩更新（第三个 success）-> 蓝（主要操作）
    > .el-button--success ~ .el-button--success ~ .el-button--success {
      background: #3b82f6 !important;
      border-color: #3b82f6 !important;
      color: #ffffff !important;
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2) !important;

      &:hover {
        background: #3b82f6 !important;
        border-color: #3b82f6 !important;
        color: #ffffff !important;
      }
    }
  }

  // 16.2 表格操作列：text/link/默认按钮统一为小号实心按钮 + 不换行并排
  .el-table {
    .action-group {
      gap: 6px !important;
      flex-wrap: nowrap !important;
      white-space: nowrap !important;
    }

    .cell .el-button + .el-button {
      margin-left: 6px !important;
    }

    // 操作列单元格强制不换行，避免按钮堆叠成多行
    .cell,
    td.el-table__cell .cell {
      &.action,
      [class*="action"] {
        white-space: nowrap !important;
      }
    }

    // 兜底：按钮直接放在单元格内且多个相邻时不换行（其他教师端页面）。
    // 教师管理页按钮已包进 .action-btn-group，.cell 的直接子级不再有相邻按钮，
    // 故本规则不命中该页 —— cell 可正常换行，让组外 el-tag 掉到第二行。
    tbody td.el-table__cell .cell:has(> .el-button + .el-button) {
      white-space: nowrap !important;
      overflow: visible !important;
    }

    // 教师管理页：三个操作按钮成组保持一排，组外 el-tag 宽度不够时自行换到下一行
    // 该列无固定 width，el-table 按剩余空间分配会裁切按钮组，此处固定列宽
    &:has(.action-btn-group) {
      colgroup col:last-child {
        width: 230px !important;
        min-width: 230px !important;
      }
    }

    .action-btn-group {
      display: inline-flex !important;
      flex-wrap: nowrap !important;
      align-items: center !important;
      gap: 6px !important;
      white-space: nowrap !important;
      vertical-align: middle !important;

      .el-button + .el-button {
        margin-left: 0 !important;
      }
    }

    // 组外提示 tag：换到第二行后占满列宽、文字允许折行，避免再被裁切
    td.el-table__cell .cell:has(.action-btn-group) {
      display: flex !important;
      flex-wrap: wrap !important;
      justify-content: center !important;
      row-gap: 4px !important;
    }

    td.el-table__cell .cell:has(.action-btn-group) > .el-tag {
      margin-left: 0 !important;
      max-width: 100% !important;
      white-space: normal !important;
      height: auto !important;
      line-height: 1.4 !important;
    }

    // 教师管理页：暗黑遗留的浅色文字在白底上模糊，统一为亮色主题清晰色
    // 名下班级 chip：浅蓝底 + 深蓝字（与 plain primary tag 同系）
    .owned-class-chip {
      color: #2563eb !important;
      border: 1px solid #9cc8ef !important;
      background: #eff6ff !important;
    }

    // 暂无班级：中性灰蓝（与表格空数据文字一致）
    .empty-summary {
      color: #9ca3af !important;
    }

    // 学生数量：深色科技蓝数字
    .student-count {
      color: #3b82f6 !important;

      small {
        color: #9ca3af !important;
      }
    }

    .el-button {
      height: 26px !important;
      min-height: 26px !important;
      padding: 0 10px !important;
      font-size: 12px !important;
      font-weight: 500 !important;
      line-height: 24px !important;
      border-radius: 6px !important;
      box-shadow: none !important;

      .el-icon {
        font-size: 12px !important;
        margin-right: 2px;
      }

      // 文字按钮（is-text / is-link）重铸为统一风格
      &.is-text,
      &.is-link {
        // Primary：透明底蓝描边，hover 蓝色半透明
        &.el-button--primary {
          background-color: transparent !important;
          border-color: #3b82f6 !important;
          color: #3b82f6 !important;

          &:hover,
          &:focus {
            background-color: rgba(59, 130, 246, 0.1) !important;
            border-color: #3b82f6 !important;
            color: #2563eb !important;
          }

          &:active {
            background-color: rgba(59, 130, 246, 0.18) !important;
            color: #2563eb !important;
          }
        }

        &.el-button--success {
          background-color: #2ba471 !important;
          border-color: #2ba471 !important;
          color: #ffffff !important;

          &:hover,
          &:focus {
            background-color: #3cbb85 !important;
            border-color: #3cbb85 !important;
            color: #ffffff !important;
          }
        }

        &.el-button--warning {
          background-color: #e8a33d !important;
          border-color: #e8a33d !important;
          color: #ffffff !important;

          &:hover,
          &:focus {
            background-color: #f2b45a !important;
            border-color: #f2b45a !important;
            color: #ffffff !important;
          }
        }

        &.el-button--danger {
          background-color: #ef4444 !important;
          border-color: #ef4444 !important;
          color: #ffffff !important;

          &:hover,
          &:focus {
            background-color: #ec7272 !important;
            border-color: #ec7272 !important;
            color: #ffffff !important;
          }
        }

        // 无类型的文字按钮 -> 白底描边
        &:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--info) {
          background-color: #ffffff !important;
          border-color: #e5e7eb !important;
          color: #1f2937 !important;

          &:hover,
          &:focus {
            background-color: #eff6ff !important;
            border-color: #3b82f6 !important;
            color: #3b82f6 !important;
          }
        }
      }

      // 实心按钮尺寸对齐（学生页原 default 尺寸较大）
      &.el-button--primary,
      &.el-button--success,
      &.el-button--warning,
      &.el-button--danger {
        font-weight: 500 !important;
      }

      // 禁用态保持可见但弱化
      &.is-disabled,
      &.is-disabled:hover {
        opacity: 0.55 !important;
        cursor: not-allowed !important;
      }
    }
  }

  // 成绩中心只读分数：暗黑遗留亮青字统一为深色科技蓝
  .teacher-score-readonly {
    strong {
      color: #3b82f6 !important;
    }

    small {
      color: #9ca3af !important;
      border-color: #e5e7eb !important;
      background: #f4f8fd !important;
    }
  }

  // 16.3 表头统一：纯白底 + 深黑字 + 灰色分隔线（同步修复成绩页 .cell 白字）
  .el-table {
    --el-table-header-bg-color: #ffffff;
    --el-table-header-text-color: #1f2937;

    .el-table__header-wrapper th.el-table__cell,
    .el-table__fixed-header-wrapper th.el-table__cell {
      height: 38px;
      padding: 5px 0 !important;
      background: #ffffff !important;
      color: #1f2937 !important;
      font-size: 13px !important;
      font-weight: 600 !important;
      text-shadow: none !important;
      border-bottom: 1px solid #e5e7eb !important;

      .cell {
        color: #1f2937 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        text-shadow: none !important;
      }
    }
  }

  // 16.5 工具栏按钮统一：32px 高度 + 色板复用全局定义
  // 覆盖容器：.df / .query-bar / .toolbar / .task-toolbar / .filter-section / .toolbar-actions
  // 色板已在第 6 节 .el-button 统一：primary=#3b82f6 / success=#2ba471 /
  // warning=#e8a33d / danger=#ef4444 / default=白底描边，此处只控尺寸和换行
  .df,
  .query-bar,
  .toolbar,
  .task-toolbar,
  .filter-section,
  .toolbar-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;

    > .el-button,
    .el-button {
      height: 32px !important;
      min-height: 32px !important;
      padding: 0 14px !important;
      font-size: 13px !important;
      font-weight: 500 !important;
      line-height: 32px !important;
      border-radius: 8px !important;

      .el-icon {
        font-size: 14px !important;
        margin-right: 4px;
      }
    }
  }

  // 16.6 工具栏按钮不换行兜底：工具栏内按钮组保持一行
  .query-bar .btn-group,
  .toolbar .btn-group,
  .df > div + div,
  .toolbar-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
  }

  // 成绩中心：操作按钮被带 title 提示的 <span> 包裹，
  // 破坏 Element 的 .el-button + .el-button 相邻间距，三个按钮粘连。
  // 用 :has 精准命中含 span 包裹按钮的 inline 表单项，flex gap 补回间距。
  .el-form--inline .el-form-item__content:has(> span > .el-button) {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;

    > span {
      display: inline-flex !important;
      align-items: center !important;
    }
  }

  // 16.4 整体布局紧凑化
  .page-header {
    padding: 14px 20px !important;
    margin-bottom: 12px !important;
  }

  .query-bar,
  .toolbar,
  .task-toolbar,
  .filter-section {
    padding: 10px 14px !important;
    margin-bottom: 12px !important;
    gap: 10px !important;
  }

  .school-admin-workbench {
    .admin-hero {
      padding: 16px 20px !important;
      margin-bottom: 12px !important;
    }

    .admin-panel {
      padding: 14px !important;
    }
  }

  .el-table {
    font-size: 13px !important;

    .el-table__cell {
      padding: 7px 0 !important;
    }

    td.el-table__cell .cell {
      font-size: 13px !important;
      line-height: 1.5 !important;
    }
  }

  .el-pagination,
  .pagination-container {
    margin-top: 12px !important;
  }
}

/* =============================================================
 * 9.5 亮色模式下 Element Plus 全局 CSS 变量覆盖
 * （置于 body 作用域，让 teleport 弹层 + 页面内组件都命中）
 * ============================================================= */
body.teacher-light-mode {
  --el-color-primary: #3b82f6;
  --el-color-primary-light-3: #60a5fa;
  --el-color-primary-light-5: #93c5fd;
  --el-color-primary-light-7: #bfdbfe;
  --el-color-primary-light-8: #dbeafe;
  --el-color-primary-light-9: #eff6ff;
  --el-color-primary-dark-2: #2563eb;

  --el-color-success: #2ba471;
  --el-color-warning: #e8a33d;
  --el-color-danger: #ef4444;
  --el-color-error: #ef4444;
  --el-color-info: #9ca3af;
}

/* =============================================================
 * 10. teleport 弹层（body.teacher-light-mode 命中）
 * ============================================================= */
body.teacher-light-mode {
  // 全局无条件暗色规则的重置（index.scss / element-ui.scss）
  .el-input__inner {
    color: #1f2937 !important;

    &::placeholder {
      color: #9ca3af !important;
    }
  }

  .el-input__count,
  .el-input__count-inner {
    color: #9ca3af !important;
    background: transparent !important;
  }

  // 下拉选择弹层
  .el-select__popper.el-popper,
  .el-select-dropdown {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 8px 24px rgba(30, 60, 100, 0.12) !important;

    .el-select-dropdown__item {
      color: #1f2937 !important;

      &.is-hovering,
      &:hover {
        background-color: #eff6ff !important;
        color: #3b82f6 !important;
      }

      &.is-selected {
        color: #3b82f6 !important;
        background-color: #eff6ff !important;
        font-weight: 600;
      }

      &.is-disabled {
        color: #b0c0d0 !important;
      }
    }

    .el-select-dropdown__empty {
      color: #9ca3af !important;
    }

    .el-popper__arrow::before {
      background: #ffffff !important;
      border-color: #e5e7eb !important;
    }
  }

  // 分页每页条数下拉里的输入框
  .el-pagination .el-input__inner {
    color: #1f2937 !important;
  }

  // 日期/时间选择器面板
  .el-picker-panel,
  .el-date-picker,
  .el-time-panel {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 8px 24px rgba(30, 60, 100, 0.12) !important;
    color: #1f2937 !important;

    .el-picker-panel__icon-btn,
    .el-picker-panel__header-label,
    .el-date-picker__header-label,
    .el-date-table th {
      color: #6b7280 !important;
    }

    .el-date-table td .el-date-table-cell__text {
      color: #1f2937 !important;

      &:hover {
        background-color: #eff6ff !important;
        color: #3b82f6 !important;
      }
    }

    .el-date-table td.today .el-date-table-cell__text {
      color: #3b82f6 !important;
      font-weight: 700;
    }

    .el-date-table td.current:not(.disabled) .el-date-table-cell__text {
      background-color: #3b82f6 !important;
      color: #ffffff !important;
    }

    .el-date-table td.prev-month .el-date-table-cell__text,
    .el-date-table td.next-month .el-date-table-cell__text {
      color: #b0c0d0 !important;
    }

    .el-time-spinner__item {
      color: #1f2937 !important;

      &.is-active {
        color: #3b82f6 !important;
      }

      &:hover:not(.is-disabled) {
        background: #eff6ff !important;
        color: #3b82f6 !important;
      }
    }

    .el-picker-panel__footer {
      background: #f6f9fc !important;
      border-top-color: #e3eaf2 !important;
    }

    .el-picker-panel__sidebar {
      border-right-color: #e3eaf2 !important;
    }

    .el-time-panel__btn.confirm {
      color: #3b82f6 !important;
    }
  }

  // 弹窗（教师端各页面 teacher-dialog / admin-edit-dialog）
  .teacher-dialog,
  .admin-edit-dialog {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 56px rgba(30, 60, 100, 0.18) !important;
    overflow: hidden;

    .el-dialog__header {
      background: linear-gradient(135deg, #eff6ff 0%, #eff6ff 100%) !important;
      padding: 18px 24px;
      margin: 0;
      border-bottom: 1px solid rgba(59, 130, 246, 0.15);

      .el-dialog__title {
        color: #1f2937 !important;
        font-weight: 700;
        font-size: 17px;
        text-shadow: none !important;
      }

      .el-dialog__headerbtn .el-dialog__close {
        color: #6b7280 !important;

        &:hover {
          color: #3b82f6 !important;
        }
      }
    }

    .el-dialog__body {
      background: #ffffff !important;
      color: #1f2937;
      padding: 24px 28px;
    }

    .el-dialog__footer {
      background: #f8fbfe !important;
      border-top: 1px solid #edf2f7 !important;
      padding: 14px 24px;
    }

    .el-form-item__label,
    label {
      color: #1f2937 !important;
    }

    .el-input__wrapper,
    .el-select .el-input__wrapper,
    .el-textarea__inner {
      background-color: #ffffff !important;
    }

    .el-input__inner,
    .el-textarea__inner {
      color: #1f2937 !important;
    }

    .el-radio__label,
    .el-checkbox__label {
      color: #1f2937 !important;
    }

    // 班级成员管理弹窗内的搜索工具条
    .member-toolbar {
      background: #f8fbfe !important;
      border: 1px solid rgba(59, 130, 246, 0.12) !important;
    }
  }

  // 确认消息框（退出登录等 ElMessageBox）
  .el-overlay {
    .el-message-box {
      background: #ffffff !important;
      border: 1px solid #e5e7eb !important;
      box-shadow: 0 20px 56px rgba(30, 60, 100, 0.2) !important;
      border-radius: 14px;

      .el-message-box__title,
      .el-message-box__content,
      .el-message-box__message p {
        color: #1f2937 !important;
      }

      .el-message-box__headerbtn .el-message-box__close {
        color: #6b7280 !important;
      }
    }
  }

  // 轻提示
  .el-message {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 8px 24px rgba(30, 60, 100, 0.12) !important;
    color: #1f2937 !important;

    .el-message__content {
      color: #1f2937 !important;
    }
  }

  // 通知
  .el-notification {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 8px 24px rgba(30, 60, 100, 0.12) !important;

    .el-notification__title {
      color: #1f2937 !important;
    }

    .el-notification__content {
      color: #1f2937 !important;
    }
  }

  // tooltip 保持 Element 默认深色（设计语义为浮层提示，不调整）

  // 全屏加载遮罩
  .el-loading-mask {
    background-color: rgba(245, 248, 252, 0.78) !important;
  }

  .el-loading-spinner .path {
    stroke: #3b82f6 !important;
  }

  .el-loading-text {
    color: #3b82f6 !important;
  }

  /* ---------- 11. 表格 CSS 变量层兜底（admin-theme 通过变量注入暗色） ---------- */
  .el-table {
    --el-table-bg-color: #ffffff;
    --el-table-tr-bg-color: #ffffff;
    --el-table-header-bg-color: #ffffff;
    --el-table-header-text-color: #1f2937;
    --el-table-text-color: #1f2937;
    --el-table-border-color: #edf2f7;
    --el-table-row-hover-bg-color: #f9fafb;
  }

  /* ---------- 12. 成绩中心（school-admin-workbench）补充 ---------- */
  .school-admin-workbench {
    .toolbar {
      background: #ffffff !important;
      border-color: rgba(59, 130, 246, 0.18) !important;
    }

    // 工具栏按钮：覆盖 admin-theme.scss 的深色渐变，统一为亮色系统色
    .toolbar .el-button {
      &::before,
      &::after {
        display: none !important;
      }

      // Primary（查询等主要操作）— 透明底蓝描边，hover 蓝色半透明
      &[type="primary"],
      &.el-button--primary {
        background: transparent !important;
        border-color: #3b82f6 !important;
        color: #3b82f6 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;

        &:hover {
          background: rgba(59, 130, 246, 0.1) !important;
          border-color: #3b82f6 !important;
          color: #2563eb !important;
          box-shadow: none !important;
          transform: none !important;
        }

        &:active {
          background: rgba(59, 130, 246, 0.18) !important;
          color: #2563eb !important;
        }
      }

      // Success（导出/新增等）— 绿色
      &[type="success"],
      &.el-button--success {
        background: #2ba471 !important;
        border-color: #2ba471 !important;
        color: #ffffff !important;
        box-shadow: 0 4px 12px rgba(43, 164, 113, 0.2) !important;
        backdrop-filter: none !important;

        &:hover {
          background: #3cbb85 !important;
          border-color: #3cbb85 !important;
          color: #ffffff !important;
          transform: none !important;
        }
      }

      // Danger（删除等）— 红色
      &[type="danger"],
      &.el-button--danger {
        background: #ef4444 !important;
        border-color: #ef4444 !important;
        color: #ffffff !important;

        &:hover {
          background: #ec7272 !important;
          border-color: #ec7272 !important;
        }
      }

      // Warning — 橙色
      &[type="warning"],
      &.el-button--warning {
        background: #e8a33d !important;
        border-color: #e8a33d !important;
        color: #ffffff !important;

        &:hover {
          background: #f2b45a !important;
          border-color: #f2b45a !important;
        }
      }

      // 默认按钮（重置等）— 白底深字
      &:not([type="primary"]):not([type="success"]):not([type="danger"]):not([type="warning"]):not(.el-button--primary):not(.el-button--success):not(.el-button--danger):not(.el-button--warning) {
        background: #ffffff !important;
        border-color: #e5e7eb !important;
        color: #1f2937 !important;
        backdrop-filter: none !important;

        &:hover {
          background: #eff6ff !important;
          border-color: #3b82f6 !important;
          color: #3b82f6 !important;
          transform: none !important;
        }
      }
    }

    .admin-form {
      background: #ffffff !important;
      border-color: rgba(59, 130, 246, 0.18) !important;
    }

    .el-table .el-loading-mask {
      background: rgba(245, 248, 252, 0.78) !important;
    }

    .el-table .el-loading-spinner .path {
      stroke: #3b82f6 !important;
    }

    .el-table .el-loading-text {
      color: #3b82f6 !important;
    }

    // 表格操作按钮
    .action-btn {
      color: #2563eb !important;
    }

    .action-btn.el-button--danger {
      color: #d04545 !important;
    }
  }

  /* ---------- 13. 教师首页仪表盘补充 ---------- */
  .grade-center {
    .card-badge {
      color: #2563eb !important;
      background: rgba(59, 130, 246, 0.1) !important;
      border-color: rgba(59, 130, 246, 0.25) !important;
    }

    .legend-dots,
    .legend-item,
    .filter-label,
    .insight-text {
      color: #46607d !important;
    }

    // 卡片右上角图标：荧光青/绿 -> 科技蓝/绿
    .trend-icon {
      background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0.04)) !important;
      border-color: rgba(59, 130, 246, 0.3) !important;
      color: #2563eb !important;
    }

    .stats-icon {
      background: linear-gradient(135deg, rgba(43, 164, 113, 0.12), rgba(43, 164, 113, 0.04)) !important;
      border-color: rgba(43, 164, 113, 0.3) !important;
      color: #1e7a4f !important;
    }

    .card-badge.success {
      color: #1e7a4f !important;
      background: rgba(43, 164, 113, 0.1) !important;
      border-color: rgba(43, 164, 113, 0.25) !important;
    }

    .el-select__caret {
      color: #9ca3af !important;
    }

    .card-footer {
      border-top-color: rgba(59, 130, 246, 0.12) !important;
    }

    .card-glow {
      background: radial-gradient(circle at 30% 30%, rgba(59, 130, 246, 0.06), transparent 50%) !important;
    }

    // 成绩卡片：白底 + 淡彩色顶边
    .score-card {
      background: #ffffff !important;
      border-color: rgba(59, 130, 246, 0.15) !important;

      &:hover {
        box-shadow: 0 10px 26px rgba(30, 60, 100, 0.1) !important;
      }

      &.card-max {
        background: linear-gradient(135deg, rgba(255, 107, 157, 0.07), #ffffff 60%) !important;
        border-color: rgba(255, 107, 157, 0.28) !important;
      }

      &.card-min {
        background: linear-gradient(135deg, rgba(75, 207, 250, 0.07), #ffffff 60%) !important;
        border-color: rgba(45, 184, 232, 0.28) !important;
      }

      &.card-avg {
        background: linear-gradient(135deg, rgba(245, 200, 0, 0.08), #ffffff 60%) !important;
        border-color: rgba(245, 200, 0, 0.3) !important;
      }
    }

    .score-name {
      color: #46607d !important;
    }

    .score-number {
      background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
      -webkit-background-clip: text !important;
      background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
    }

    .score-unit {
      color: #9ca3af !important;
    }
  }

  /* ---------- 14. 实训任务管理页 ---------- */
  .teacher-main.training-task-main-theme {
    background: linear-gradient(135deg, #f5f8fc 0%, #eaf2fb 48%, #f3f8ff 100%) !important;
  }

  .training-task-page {
    // 头部统计小块：荧光绿/浅蓝白字在白底上不可见，改为实色浅蓝底 + 深蓝字
    .header-stats {
      .stat-item,
      .header-stat {
        color: #1f2937 !important;
        background: #eff6ff !important;
        border-color: rgba(59, 130, 246, 0.25) !important;
      }

      .stat-label {
        color: #6b7280 !important;
      }

      .stat-value {
        color: #2563eb !important;
        text-shadow: none !important;
      }
    }

    // 页面副标题加深
    .page-header .page-subtitle {
      color: #6b7280 !important;
    }

    .class-filter .filter-label {
      color: #1f2937 !important;
    }

    // 搜索框
    .search-box {
      background: #ffffff !important;
      border-color: rgba(59, 130, 246, 0.2) !important;
      box-shadow: none !important;

      .el-input__inner {
        color: #1f2937 !important;

        &::placeholder {
          color: #9ca3af !important;
        }
      }
    }

    // 工具栏主按钮（原深蓝渐变）改为亮蓝
    .toolbar-btn {
      border-radius: 10px;

      // Primary：透明底蓝描边，hover 蓝色半透明
      &.el-button--primary {
        background: transparent !important;
        border-color: #3b82f6 !important;
        color: #3b82f6 !important;
        box-shadow: none !important;

        &:hover {
          background: rgba(59, 130, 246, 0.1) !important;
          border-color: #3b82f6 !important;
          color: #2563eb !important;
        }

        &:active {
          background: rgba(59, 130, 246, 0.18) !important;
          color: #2563eb !important;
        }
      }

      // Success：绿色实色（语义色）
      &.el-button--success {
        background: #2ba471 !important;
        border-color: #2ba471 !important;
        color: #ffffff !important;
        box-shadow: 0 4px 12px rgba(43, 164, 113, 0.2) !important;

        &:hover {
          background: #3cbb85 !important;
          border-color: #3cbb85 !important;
        }
      }

      // “恢复默认”：原深暗红渐变改为浅红 plain 风格（hover 转红实心）
      &.el-button--danger,
      &.toolbar-btn-danger {
        background: #fdecec !important;
        border-color: #f3b0b0 !important;
        color: #c0392b !important;
        box-shadow: none !important;
        text-shadow: none !important;
        transform: none !important;

        &:hover,
        &:focus {
          background: #ef4444 !important;
          border-color: #ef4444 !important;
          color: #ffffff !important;
          box-shadow: none !important;
          transform: none !important;
        }
      }

      &::before,
      &::after {
        display: none !important;
      }
    }

    // 项目筛选容器
    .project-filter {
      background: #ffffff !important;
      border-color: rgba(59, 130, 246, 0.15) !important;
      box-shadow: 0 4px 14px rgba(30, 60, 100, 0.06) !important;

      .filter-label {
        color: #1f2937 !important;

        svg {
          color: #3b82f6 !important;
        }
      }
    }

    // 项目页签
    .project-tabs {
      .project-tab {
        background: #ffffff !important;
        border-color: rgba(59, 130, 246, 0.15) !important;
        color: #1f2937 !important;

        .tab-name {
          color: #1f2937 !important;
        }

        .tab-count {
          background: rgba(59, 130, 246, 0.1) !important;
          color: #2563eb !important;
        }

        &:hover {
          border-color: rgba(59, 130, 246, 0.4) !important;
        }

        &.active {
          background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(59, 130, 246, 0.06)) !important;
          border-color: rgba(59, 130, 246, 0.5) !important;

          .tab-name {
            color: #2563eb !important;
          }

          .tab-count {
            background: #3b82f6 !important;
            color: #ffffff !important;
          }
        }
      }
    }

    // “显示 x/x 条”：原浅绿字在白底偏淡，改为深绿
    .filter-result {
      color: #1e7a4f !important;
      background: rgba(43, 164, 113, 0.08) !important;
      border-color: rgba(43, 164, 113, 0.25) !important;
    }

    // 任务卡片网格：一行五个，整体更紧凑
    .task-grid {
      grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
      gap: 14px !important;
      min-height: auto !important;
    }

    // 任务卡片
    .task-card {
      padding: 14px !important;
      border-radius: 12px !important;
      background: #ffffff !important;
      border-color: rgba(59, 130, 246, 0.15) !important;
      box-shadow: 0 6px 18px rgba(30, 60, 100, 0.06) !important;

      &:hover {
        transform: none !important;
        border-color: rgba(59, 130, 246, 0.4) !important;
        box-shadow: 0 10px 28px rgba(30, 60, 100, 0.1) !important;
      }

      // 装饰编号与右上角“启用/停用”状态标签位置重叠，亮色下隐藏避免干扰
      .card-index {
        display: none !important;
      }

      .card-header {
        margin-bottom: 8px !important;
      }

      .task-project {
        font-size: 11px !important;
        padding: 2px 8px !important;
        color: #2563eb !important;
        background: rgba(59, 130, 246, 0.1) !important;
        border-color: rgba(59, 130, 246, 0.25) !important;
      }

      // 启用状态：荧光绿在白底不可见，改为深绿实色标签
      .task-status {
        font-size: 10px !important;
        padding: 2px 8px !important;
        color: #b04545 !important;
        background: rgba(239, 68, 68, 0.1) !important;
        border-color: rgba(239, 68, 68, 0.3) !important;

        &.enabled {
          color: #1e7a4f !important;
          background: rgba(43, 164, 113, 0.1) !important;
          border-color: rgba(43, 164, 113, 0.3) !important;
        }
      }

      // 目标/步骤数量文字加深
      .task-meta .meta-item {
        color: #46607d !important;
      }

      .task-name {
        margin: 0 0 8px !important;
        font-size: 14px !important;
        color: #1f2937 !important;
      }

      .task-meta {
        margin-bottom: 10px !important;
        gap: 10px !important;
      }

      .meta-item {
        font-size: 11px !important;
        color: #6b7280 !important;
      }

      .edit-btn {
        width: 100% !important;
        height: 30px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
        background: transparent !important;
        border: 1px solid #3b82f6 !important;
        color: #3b82f6 !important;
        box-shadow: none !important;

        &:hover {
          background: rgba(59, 130, 246, 0.1) !important;
          color: #2563eb !important;
        }

        &:active {
          background: rgba(59, 130, 246, 0.18) !important;
          color: #2563eb !important;
        }
      }
    }

    // 卡片上的扫描线/辉光特效在亮色下隐藏
    .scanline,
    .card-glow {
      display: none !important;
    }

    .corner-decoration {
      opacity: 0.5;
    }

    .task-empty {
      color: #9ca3af !important;
    }

    // 表单内白色 label（scoped 中带 !important）
    .task-form .el-form-item__label,
    .drawer-shell .el-form-item__label {
      color: #1f2937 !important;
    }

    // 窄屏下列数收敛
    @media (max-width: 1500px) {
      .task-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      }
    }

    @media (max-width: 1100px) {
      .task-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      }
    }
  }
}

/* =============================================================
 * 15. 实训任务抽屉（el-drawer teleport 到 body）
 * ============================================================= */
body.teacher-light-mode {
  .training-task-drawer.el-drawer {
    background: #f5f8fc !important;
    box-shadow: -10px 0 36px rgba(30, 60, 100, 0.14) !important;

    .el-drawer__body {
      background: #f5f8fc;
    }
  }

  .training-task-drawer {
    .drawer-shell {
      background: #f5f8fc !important;
      color: #1f2937;
    }

    .drawer-header {
      background: linear-gradient(90deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.04)) !important;
      border-bottom: 1px solid rgba(59, 130, 246, 0.12) !important;
    }

    // 标题区文字：h3 白字 / p 浅蓝字在浅底上不可见，统一深色
    .drawer-heading {
      h3 {
        color: #1f2937 !important;
      }

      p {
        color: #9ca3af !important;
      }
    }

    // 信息条：scoped 为 rgba(0,10,20,0.3) 深底，亮色场景发灰，改为浅蓝底
    .drawer-identity {
      background: #eef5fc !important;
      border-bottom: 1px solid rgba(59, 130, 246, 0.12) !important;
    }

    // 信息条内项目值：确保深色
    .identity-content {
      strong {
        color: #1f2937 !important;
      }
    }

    // 底部操作条：scoped 为 rgba(0,10,20,0.95) 近黑，改为白底浅分隔线
    .drawer-footer {
      background: #ffffff !important;
      border-top: 1px solid rgba(59, 130, 246, 0.12) !important;
      box-shadow: 0 -4px 16px rgba(30, 60, 100, 0.06) !important;
    }

    // 取消/关闭按钮：scoped 暗色玻璃态，改为白底描边深色字
    .cancel-btn {
      color: #1f2937 !important;
      background: #ffffff !important;
      border: 1px solid #e5e7eb !important;

      &:hover {
        color: #3b82f6 !important;
        background: #eff6ff !important;
        border-color: #3b82f6 !important;
      }
    }

    .drawer-kicker {
      color: #2563eb !important;
      background: rgba(59, 130, 246, 0.1) !important;
    }

    .drawer-close-button {
      color: #6b7280 !important;
      background: rgba(59, 130, 246, 0.08) !important;

      &:hover {
        color: #ffffff !important;
        background: #3b82f6 !important;
      }
    }

    .identity-item {
      background: #ffffff !important;
      border-color: rgba(59, 130, 246, 0.12) !important;

      .identity-label {
        color: #6b7280 !important;
      }

      .status-value {
        color: #ef4444 !important;

        &.enabled {
          color: #2ba471 !important;
        }
      }
    }

    .drawer-section {
      background: #ffffff !important;
      border-color: rgba(59, 130, 246, 0.12) !important;
    }

    .section-title {
      color: #1f2937 !important;

      .section-number {
        background: rgba(59, 130, 246, 0.12) !important;
        color: #3b82f6 !important;
      }
    }

    // h4/p 在 scoped 中有显式浅色（#fff / rgba(200,230,255,.5)），继承压不住，需显式覆盖
    .section-info {
      h4 {
        color: #1f2937 !important;
      }

      p {
        color: #9ca3af !important;
      }
    }

    .objective-row,
    .step-item,
    .material-row {
      background: #f8fbfe !important;
      border-color: rgba(59, 130, 246, 0.12) !important;
      color: #1f2937 !important;

      .objective-number,
      .step-number {
        background: rgba(59, 130, 246, 0.1) !important;
        border-color: rgba(59, 130, 246, 0.25) !important;
        color: #3b82f6 !important;
      }
    }

    .material-placeholder {
      color: #9ca3af !important;
    }

    .material-link {
      color: #3b82f6 !important;
    }

    .add-step-button,
    .add-objective-button,
    .upload-btn {
      background: rgba(59, 130, 246, 0.08) !important;
      border-color: rgba(59, 130, 246, 0.3) !important;
      color: #3b82f6 !important;

      &:hover {
        background: #3b82f6 !important;
        color: #ffffff !important;
      }
    }

    .remove-btn {
      color: #ef4444 !important;
      border-color: rgba(239, 68, 68, 0.3) !important;

      &:hover {
        background: rgba(239, 68, 68, 0.08) !important;
      }
    }

    // 抽屉内表单 label/输入框
    .el-form-item__label {
      color: #1f2937 !important;
    }

    .el-input__wrapper,
    .el-select .el-input__wrapper,
    .el-textarea__inner {
      background-color: #ffffff !important;
      box-shadow: 0 0 0 1px #e5e7eb inset !important;
      border-color: #e5e7eb !important;
    }

    .el-input__inner,
    .el-textarea__inner {
      color: #1f2937 !important;

      &::placeholder {
        color: #9ca3af !important;
      }
    }
  }

  // 教师端其他 el-drawer 默认亮色兜底
  .el-drawer {
    .el-drawer__header {
      color: #1f2937;
      margin-bottom: 0;
      padding: 18px 24px;
      border-bottom: 1px solid #edf2f7;
    }

    .el-drawer__title {
      color: #1f2937;
      font-weight: 700;
    }

    .el-drawer__close-btn .el-icon {
      color: #6b7280;
    }
  }
}

/* =============================================================
 * 16. 任务评阅页（TaskReviewPanel）亮色覆盖
 * 该页 scoped 内写了完整的暗色样式，teacher-light.scss 之前完全没覆盖
 * ============================================================= */
#app .teacherLayout .task-review {
  background: #ffffff !important;
  border: 1px solid rgba(59, 130, 246, 0.15) !important;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(30, 60, 100, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;

  // 左侧筛选 + 学生列表栏
  .task-review__sidebar {
    background: #f8fbfe !important;
    border-right: 1px solid rgba(59, 130, 246, 0.12) !important;
  }

  .task-review__filters {
    background: #ffffff !important;
    border: 1px solid rgba(59, 130, 246, 0.15) !important;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(30, 60, 100, 0.04);
  }

  // "学生列表（6）" 标题
  .task-review__list-head {
    color: #1f2937 !important;
    font-weight: 700;
  }

  .task-review__readonly-tip {
    color: #9ca3af !important;
  }

  // 右侧学生预览区
  .task-review__content {
    background: linear-gradient(135deg, #ffffff 0%, #f5f8fc 100%) !important;
  }

  // 学生姓名 + 任务副标题
  .task-review__student-head {
    border-bottom: 1px solid rgba(59, 130, 246, 0.12) !important;

    h2 {
      color: #1f2937 !important;
      text-shadow: none !important;
    }

    p {
      color: #6b7280 !important;
    }
  }

  // AI评分 / 老师评分 胶囊
  .task-review__scores {
    color: #46607d !important;

    span {
      background: #eff6ff !important;
      border: 1px solid rgba(59, 130, 246, 0.25) !important;
    }

    strong {
      color: #3b82f6 !important;
    }
  }

  // iframe 滚动容器：移除暗色 scrollbar，改用亮色系统滚动条
  .task-review__student-preview-scroll {
    border: 1px solid rgba(59, 130, 246, 0.18) !important;
    border-radius: 10px;
    scrollbar-color: #9cc8ef #eff6ff;

    &::-webkit-scrollbar-track {
      background: #eff6ff !important;
    }

    &::-webkit-scrollbar-thumb {
      background: #9cc8ef !important;
      border-radius: 8px;
      border: 2px solid #eff6ff !important;
    }
  }

  // 批量打分弹窗内说明文字
  .task-review__batch-copy {
    color: #1f2937 !important;
  }

  // 选中行高亮（scoped 用了 :deep() 提权，这里用类名+ !important 覆盖）
  .task-review__student-table .task-review__selected-row > td {
    background: #eff6ff !important;
  }
}