%exam-pill-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

/*
 * 学生端考试模块主题：令牌、面板材质、按钮与 Element Plus 深色覆盖。
 * 规范见 docs/student-training-ui-standard.md 第 14 节；页面 scoped 样式不得再定义另一套 --exam-*。
 */
.exam-page {
  --exam-text: #e8f5ff;
  --exam-text-strong: #ffffff;
  --exam-secondary: #d7ecff;
  --exam-muted: #8eafc2;
  --exam-accent: #71dfff;
  --exam-panel: linear-gradient(145deg, rgba(6, 34, 58, 0.9), rgba(3, 15, 27, 0.94));
  --exam-panel-border: rgba(49, 151, 221, 0.34);
  --exam-card: rgba(1, 14, 26, 0.72);
  --exam-card-border: rgba(0, 180, 255, 0.22);
  --exam-line: rgba(127, 186, 215, 0.22);
  --exam-ok: #57d9a8;
  --exam-bad: #ff9b86;
  --exam-pending: #7fd0ff;
  --exam-current: #ffc861;
  --exam-primary-gradient: linear-gradient(110deg, #0b84bd, #096491);
  --exam-primary-border: rgba(92, 224, 255, 0.7);
  --exam-active-gradient: linear-gradient(110deg, #0a6b9e, #0a5c86);
  --exam-outline-bg: rgba(17, 126, 178, 0.36);
  --exam-outline-border: rgba(99, 217, 255, 0.55);

  box-sizing: border-box;
  color: var(--exam-text);
  border: 1px solid var(--exam-panel-border);
  border-radius: 14px;
  background: var(--exam-panel);
  box-shadow: 0 14px 36px rgba(0, 12, 30, 0.38), inset 0 1px 0 rgba(173, 225, 255, 0.08), 0 0 18px rgba(16, 109, 189, 0.25);

  h1, h2, h3 { color: var(--exam-text-strong); }
  p { color: var(--exam-muted); }

  /* 第 6.1 节 小型轮廓按钮 */
  .exam-outline-action {
    @extend %exam-pill-action;
    border: 1px solid var(--exam-outline-border);
    background: var(--exam-outline-bg);
    color: #e9fbff;
    &:hover:not(:disabled) { transform: translateY(-1px); border-color: rgba(116, 235, 255, 0.85); background: rgba(18, 146, 204, 0.5); }
    &:disabled { opacity: 0.45; cursor: not-allowed; }
  }

  /* 第 6.2 节 常规主按钮 */
  .exam-primary-action {
    @extend %exam-pill-action;
    border: 1px solid var(--exam-primary-border);
    background: var(--exam-primary-gradient);
    color: #ffffff;
    &:hover:not(:disabled) { transform: translateY(-1px); border-color: rgba(116, 235, 255, 0.85); }
    &:disabled { opacity: 0.45; cursor: not-allowed; }
  }

  /* 第 6.3 节 底部大操作按钮 */
  .exam-submit-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 172px;
    height: 64px;
    padding: 0 28px;
    border: 1px solid #2c83aa;
    border-radius: 6px;
    background: rgba(13, 64, 88, 0.62);
    color: #dff7ff;
    font-size: 24px;
    font-weight: 900;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    &:hover { transform: translateY(-1px); border-color: rgba(116, 235, 255, 0.85); background: rgba(16, 82, 112, 0.72); }
  }

  /* Element Plus 深色覆盖：第 11 节第 4 条 */
  .el-button {
    height: 40px;
    padding: 0 18px;
    border: 1px solid var(--exam-outline-border);
    border-radius: 999px;
    background: var(--exam-outline-bg);
    color: #e9fbff;
    font-size: 14px;
    font-weight: 800;
    &:hover, &:focus { border-color: rgba(116, 235, 255, 0.85); background: rgba(18, 146, 204, 0.5); color: #f2fdff; }
    &.is-circle { width: 40px; padding: 0; border-radius: 50%; }
    &.el-button--primary {
      border-color: var(--exam-primary-border);
      background: var(--exam-primary-gradient);
      color: #ffffff;
      &:hover, &:focus { background: var(--exam-primary-gradient); color: #ffffff; }
    }
    &.is-text, &.el-button--text {
      height: auto;
      padding: 0;
      border-color: transparent;
      background: none;
      color: var(--exam-accent);
      font-weight: 700;
      &:hover, &:focus { background: none; border-color: transparent; color: #a8efff; }
    }
    &:disabled { opacity: 0.45; cursor: not-allowed; }
    &:disabled:not(.el-button--primary):hover { background: var(--exam-outline-bg); }
  }

  .el-tag {
    border: 1px solid rgba(106, 226, 255, 0.45);
    border-radius: 999px;
    background: rgba(0, 127, 184, 0.25);
    color: var(--exam-secondary);
    &.el-tag--success { border-color: rgba(87, 217, 168, 0.55); background: rgba(87, 217, 168, 0.16); color: #b7f4dc; }
    &.el-tag--danger { border-color: rgba(255, 155, 134, 0.55); background: rgba(255, 155, 134, 0.16); color: #ffd3c8; }
    &.el-tag--info { border-color: rgba(127, 208, 255, 0.45); background: rgba(127, 208, 255, 0.14); color: #d6efff; }
  }

  .el-input__wrapper, .el-textarea__inner {
    background: #0f1a24;
    box-shadow: 0 0 0 1px rgba(45, 95, 126, 0.95) inset;
    border-radius: 14px;
    color: var(--exam-text);
  }
  .el-input__inner { color: var(--exam-text); }
  .el-textarea__inner { padding: 12px 14px; line-height: 1.65; }
  .el-input__inner::placeholder, .el-textarea__inner::placeholder { color: #8299aa; }
  .el-input__wrapper.is-focus, .el-textarea__inner:focus { box-shadow: 0 0 0 1px rgba(92, 224, 255, 0.7) inset, 0 0 0 3px rgba(0, 174, 255, 0.13); }

  /* 第 7.3 节 选项：整行为深色卡，选中用激活渐变，圆点不再是默认蓝色 */
  .el-radio, .el-checkbox {
    margin: 0;
    height: auto;
    padding: 14px 16px;
    border: 1px solid rgba(127, 186, 215, 0.35);
    border-radius: 14px;
    background: var(--exam-card);
    white-space: normal;
    transition: border-color 0.2s ease, background 0.2s ease;
    &:hover { border-color: rgba(99, 217, 255, 0.55); }
    .el-radio__inner, .el-checkbox__inner {
      width: 18px;
      height: 18px;
      border: 1px solid rgba(99, 217, 255, 0.55);
      background: #0f1a24;
    }
    .el-radio__inner { border-radius: 50%; }
    .el-radio__inner::after { background: var(--exam-accent); }
    .el-checkbox__inner { border-radius: 5px; }
    .el-checkbox__inner::after { border-color: #04121d; border-width: 2px; }
    .el-radio__label, .el-checkbox__label { display: flex; align-items: flex-start; gap: 12px; line-height: 1.5; color: var(--exam-secondary); font-weight: 400; }
    &.is-checked {
      border-color: var(--exam-primary-border);
      background: var(--exam-active-gradient);
      .el-radio__label, .el-checkbox__label { color: #ffffff; }
      .el-radio__inner, .el-checkbox__inner { border-color: var(--exam-accent); background: #062430; }
    }
  }

  .el-empty__description p { color: var(--exam-muted); }
  .el-loading-mask { background-color: rgba(3, 15, 27, 0.72); }
  .el-icon { color: inherit; }
}

@media (max-width: 900px) {
  .exam-page .exam-submit-action { width: 100%; }
}