/* =============================================================================
 * 在线刷题样式（刷题首页 practice / 答题页 quiz / 看题卡片 cv）
 * 与 common.css 共用 CSS 变量（--primary-color 等）
 * ============================================================================= */

/* ============================== 刷题首页 ============================== */

.practice-doc .content {
  min-width: 0;
}

.practice-hero {
  text-align: center;
  padding: 40px var(--space-16) var(--space-24);
}

.practice-hero-title {
  font-size: var(--fs-h1);
  margin: 0 0 10px;
  color: var(--text-primary);
}

.practice-hero-sub {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-15);
}

/* 模式 Tabs */
.practice-body {
  display: flex;
  gap: var(--space-20);
  align-items: flex-start;
  margin-bottom: var(--space-32);
}

/* 左侧模式导航 */
.practice-nav {
  width: 250px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  position: sticky;
  top: var(--space-16);
}

.practice-nav-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10); padding: var(--space-12) ;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-12);
  background: var(--bg-card);
  cursor: pointer;
  text-align: left;
  transition: all .2s;
}

.practice-nav-item:hover {
  border-color: var(--primary-light);
  box-shadow: var(--shadow-sm);
}

.practice-nav-item.is-active {
  border-color: var(--primary-color);
  background: var(--primary-lighter);
  box-shadow: inset 0 0 0 1px var(--primary-color);
}

.practice-nav-icon {
  font-size: var(--fs-20);
  line-height: var(--lh-tight);
}

.practice-nav-text {
  display: flex;
  flex-direction: column; gap: var(--space-2);
}

.practice-nav-title {
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--text-primary);
}

.practice-nav-item.is-active .practice-nav-title {
  color: var(--primary-dark);
}

.practice-nav-desc {
  font-size: var(--fs-12);
  color: var(--text-muted);
  line-height: 1.5;
}

/* 右侧选项表单 */
.practice-main {
  flex: 1;
  min-width: 0;
}


/* 方向标签组（自定义标签样式，非原生下拉） */
.practice-dir-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.practice-dir-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  cursor: pointer;
  transition: all .15s;
  font-size: var(--fs-13);
}

.practice-dir-pill:hover {
  border-color: var(--primary-light);
  background: var(--primary-bg);
}

.practice-dir-pill.is-active {
  border-color: var(--primary-color);
  background: var(--primary-lighter);
  box-shadow: inset 0 0 0 1px var(--primary-color);
}

.practice-dir-pill-name {
  color: var(--text-primary);
  font-weight: 600;
}

.practice-dir-pill.is-active .practice-dir-pill-name {
  color: var(--primary-dark);
}

.practice-dir-pill-count {
  font-size: var(--fs-11);
  color: var(--text-muted);
}

/* 题量 / 限时按钮组 */
.practice-count-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.practice-count-btn {
  padding: var(--space-6) var(--space-16);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-6);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: var(--fs-13);
  cursor: pointer;
  transition: all .15s;
}

.practice-count-btn:hover {
  border-color: var(--primary-light);
  color: var(--primary-dark);
}

.practice-count-btn.is-active {
  border-color: var(--primary-color);
  background: var(--primary-color);
  color: var(--text-light);
  font-weight: 600;
}


/* 选择面板 */
.practice-panel {
  display: none;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-12);
  padding: var(--space-24);
  box-shadow: var(--shadow-sm);
}

.practice-panel.is-active {
  display: block;
}

.practice-panel-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-10); margin-bottom: var(--space-16);
}

.practice-panel-title {
  font-size: var(--fs-17);
  font-weight: 600;
  color: var(--text-primary);
}

.practice-panel-desc {
  font-size: var(--fs-13);
  color: var(--text-muted);
}

.practice-field {
  margin-bottom: var(--space-16);
}

.practice-label {
  display: block;
  font-size: var(--fs-14);
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
}

.practice-checks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.practice-checks--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-10);
}

.practice-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-12);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-6);
  background: var(--bg-card);
  cursor: pointer;
  font-size: var(--fs-13);
  color: var(--text-primary);
  transition: all .15s;
  -webkit-user-select: none;
  user-select: none;
}

.practice-check:hover {
  border-color: var(--primary-light);
}

.practice-check.is-checked {
  border-color: var(--primary-color);
  background: var(--primary-lighter);
  color: var(--primary-dark);
}

.practice-check input {
  accent-color: var(--primary-color);
}

.practice-check-count {
  font-size: var(--fs-12);
  color: var(--text-muted);
}

.practice-check-actions {
  margin-top: var(--space-8);
  display: flex;
  gap: var(--space-12);
}

.practice-link-btn {
  border: none;
  background: none;
  color: var(--primary-color);
  font-size: var(--fs-13);
  cursor: pointer;
  padding: 0;
}

.practice-link-btn:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

.practice-actions {
  display: flex;
  align-items: center; gap: var(--space-12);
  margin-top: var(--space-8);
}

.practice-tip {
  font-size: var(--fs-13);
  color: var(--text-muted);
}

.practice-btn {
  padding: var(--space-10) var(--space-28);
  border: none;
  border-radius: var(--radius-6);
  font-size: var(--fs-15);
  cursor: pointer;
  transition: all .2s;
}

.practice-btn-primary {
  background: var(--primary-color);
  color: var(--text-light);
}

.practice-btn-primary:hover {
  background: var(--primary-dark);
}

.practice-btn-primary:disabled {
  background: var(--border-color);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* 看题：大类/小类列表 */
.view-category-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  max-width: 720px;
}

.view-category {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-8);
  overflow: hidden;
}

.view-category-head {
  padding: var(--space-10) var(--space-12);
  font-weight: 600;
  font-size: var(--fs-14);
  color: var(--text-primary);
  background: var(--primary-bg);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.view-category-arrow {
  font-size: var(--fs-12);
  color: var(--text-muted);
  transition: transform .2s;
}

.view-category.is-open .view-category-arrow {
  transform: rotate(180deg);
}

.view-subcategory-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  padding: var(--space-10) var(--space-12);
}

.view-subcategory-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-12);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-6);
  font-size: var(--fs-13);
  color: var(--text-secondary);
  text-decoration: none;
  transition: all .15s;
}

.view-subcategory-link:hover {
  border-color: var(--primary-color);
  color: var(--primary-dark);
  background: var(--primary-lighter);
}

.view-subcategory-count {
  font-size: var(--fs-12);
  color: var(--text-muted);
}

/* ============================== 答题页（科目一风格） ============================== */

.quiz-doc {
  min-height: 70vh;
}

.quiz-doc .content {
  min-width: 0;
}

.quiz-layout {
  min-width: 0;
  padding: 0 0 40px;
}

/* 顶栏 */
.quiz-topbar {
  position: sticky;
  top: 0;
  /* z-index 需高于同样 sticky 的右侧答题卡（.quiz-card-panel，top: 76px），否则滚动时答题卡会盖住顶栏 */
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-8);
  padding: var(--space-10) var(--space-16);
  margin: 0 0 14px;
  box-shadow: var(--shadow-sm);
}

.quiz-topbar-title {
  font-size: var(--fs-16);
  font-weight: 600;
  color: var(--text-primary);
}

.quiz-topbar-error {
  margin-left: var(--space-10);
  font-size: var(--fs-13);
  color: #d9534f;
}

.quiz-topbar-center {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.quiz-progress {
  font-size: var(--fs-14);
  color: var(--text-secondary);
}

.quiz-timer {
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--primary-dark);
  font-variant-numeric: tabular-nums;
}

.quiz-timer.is-warning {
  color: #d9534f;
  animation: quiz-blink 1s infinite;
}

@keyframes quiz-blink {
  50% { opacity: .5; }
}

.quiz-submit-btn {
  padding: var(--space-8) var(--space-20);
  border: none;
  border-radius: var(--radius-6);
  background: var(--primary-color);
  color: var(--text-light);
  font-size: var(--fs-14);
  cursor: pointer;
  transition: background .2s;
}

.quiz-submit-btn:hover {
  background: var(--primary-dark);
}


/* 作答进度条 */
.quiz-progress-track {
  height: 6px;
  border-radius: var(--radius-4);
  background: var(--border-light);
  overflow: hidden;
  margin: 0 0 14px;
}

.quiz-progress-fill {
  height: 100%;
  border-radius: var(--radius-4);
  background: linear-gradient(90deg, var(--primary-light), var(--primary-color));
  transition: width .3s ease;
  width: 0;
}


/* 主体两栏 */
.quiz-body {
  display: flex;
  gap: var(--space-16);
  align-items: flex-start;
}

.quiz-main {
  flex: 1;
  min-width: 0;
}

/* 题目卡片 */
.quiz-question-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-12);
  padding: var(--space-24) var(--space-28);
  box-shadow: var(--shadow-sm);
}

.quiz-q-head {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  margin-bottom: var(--space-12);
}

.quiz-q-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 50%;
  background: var(--primary-color);
  color: var(--text-light);
  font-size: var(--fs-15);
  font-weight: 600;
}

/* 标记按钮（科目一风格：不确定的题打标记） */
.quiz-q-mark {
  margin-left: auto;
  display: inline-flex;
  align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-12);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: var(--fs-13);
  cursor: pointer;
  transition: all .15s;
}

.quiz-q-mark:hover {
  border-color: #e6a23c;
  color: #b88230;
}

.quiz-q-mark.is-marked {
  border-color: #e6a23c;
  background: #fdf6ec;
  color: #b88230;
  font-weight: 600;
}

.quiz-q-mark-icon {
  font-size: var(--fs-14);
}

.quiz-q-title {
  font-size: var(--fs-17);
  line-height: var(--lh-base);
  color: var(--text-primary);
  margin: 0 0 22px;
  word-break: break-word;
}

/* 选项按钮 */
.quiz-q-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.quiz-q-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-12);
  cursor: pointer;
  transition: all .15s;
  background: var(--bg-card);
}

.quiz-q-option:hover {
  border-color: var(--primary-light);
  background: var(--primary-bg);
}

.quiz-q-option.is-selected {
  border-color: var(--primary-color);
  background: var(--primary-lighter);
  box-shadow: inset 0 0 0 1px var(--primary-color);
}

.quiz-q-option-key {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--text-secondary);
}

.quiz-q-option.is-selected .quiz-q-option-key {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--text-light);
}

.quiz-q-option-text {
  font-size: var(--fs-15);
  line-height: 1.7;
  color: var(--text-primary);
  word-break: break-word;
}

/* 上一题/下一题 */
.quiz-nav {
  display: flex;
  justify-content: space-between; margin-top: var(--space-12);
}

.quiz-nav-btn {
  padding: var(--space-8) var(--space-24);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-6);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: var(--fs-14);
  cursor: pointer;
  transition: all .15s;
}

.quiz-nav-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-dark);
}

.quiz-nav-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* 右侧答题卡 */
.quiz-card-panel {
  width: 260px;
  flex-shrink: 0;
  order: -1;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-12);
  padding: var(--space-16);
  box-shadow: var(--shadow-sm);
  position: sticky;
  /* 让开上方吸顶的顶栏，避免两张吸顶卡片重叠 */
  top: 76px;
}

.quiz-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-12);
}

.quiz-card-count {
  font-size: var(--fs-12);
  color: var(--text-muted);
  font-weight: 400;
}

.quiz-card-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-8);
  /* 固定高度，题目多时内部滚动（头部与图例常驻） */
  max-height: min(420px, 52vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(93, 151, 67, 0.35) transparent;
  padding-right: var(--space-4);
}

.quiz-card-grid::-webkit-scrollbar {
  width: 5px;
}

.quiz-card-grid::-webkit-scrollbar-thumb {
  border-radius: var(--radius-4);
  background: rgba(93, 151, 67, 0.30);
}

.quiz-card-num {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-6);
  font-size: var(--fs-13);
  color: var(--text-secondary);
  background: var(--bg-card);
  cursor: pointer;
  transition: all .15s;
}

.quiz-card-num:hover {
  border-color: var(--primary-light);
}

.quiz-card-num.is-answered {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--text-light);
}

.quiz-card-num.is-marked {
  border-color: #e6a23c;
  background: #fdf6ec;
  color: #b88230;
}

.quiz-card-num.is-marked.is-answered {
  background: linear-gradient(135deg, var(--primary-color) 50%, #e6a23c 50%);
  border-color: var(--primary-dark);
  color: var(--text-light);
}

.quiz-card-num.is-current {
  border-color: var(--primary-dark);
  box-shadow: 0 0 0 2px var(--primary-lighter);
  font-weight: 700;
}

.quiz-card-legend {
  display: flex; gap: var(--space-12);
  margin-top: var(--space-12);
  flex-wrap: wrap;
}

.quiz-legend-item {
  display: inline-flex;
  align-items: center; gap: var(--space-4);
  font-size: var(--fs-12);
  color: var(--text-muted);
}

.quiz-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-4);
  border: 1px solid var(--border-color);
  display: inline-block;
}

.quiz-dot--answered {
  background: var(--primary-color);
  border-color: var(--primary-color);
}

.quiz-dot--marked {
  background: #fdf6ec;
  border-color: #e6a23c;
}

.quiz-dot--current {
  border-color: var(--primary-dark);
  box-shadow: 0 0 0 2px var(--primary-lighter);
}


/* 快捷键与作答统计卡 */
.quiz-shortcuts { margin-top: var(--space-12);
  background: var(--bg-card);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-12);
  padding: var(--space-12) var(--space-16);
}

.quiz-shortcuts-title {
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-10);
}

.quiz-shortcuts-keys {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-16);
}

.quiz-key {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--fs-12);
  color: var(--text-secondary);
}

.quiz-key kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border: 1px solid var(--border-color);
  border-bottom-width: 2px;
  border-radius: var(--radius-6);
  background: var(--bg-card);
  font-family: var(--font-family);
  font-size: var(--fs-11);
  color: var(--text-primary);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.quiz-shortcuts-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-20);
  margin-top: var(--space-10);
  padding-top: var(--space-10);
  border-top: 1px solid var(--border-light);
  font-size: var(--fs-12);
  color: var(--text-muted);
}

.quiz-shortcuts-stats b {
  font-size: var(--fs-14);
  color: var(--primary-dark);
  margin: 0 2px;
}


/* ============================== 评分结果 ============================== */

.quiz-result {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-12);
  padding: var(--space-28);
  box-shadow: var(--shadow-sm);
}

.quiz-result-head {
  display: flex;
  align-items: center;
  gap: var(--space-28);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}

.quiz-result-score-wrap {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
}

.quiz-result-score {
  font-size: 54px;
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1;
}

.quiz-result-score.is-fail {
  color: #d9534f;
}

.quiz-result-unit {
  font-size: var(--fs-18);
  color: var(--text-secondary);
}

.quiz-result-stats {
  display: flex; gap: var(--space-20);
  font-size: var(--fs-14);
  color: var(--text-secondary);
  flex-wrap: wrap;
}

.quiz-result-stats b {
  font-size: var(--fs-18);
  margin-right: var(--space-2);
}

.quiz-result-stats .stat-correct b { color: var(--primary-color); }
.quiz-result-stats .stat-wrong b { color: #d9534f; }

.quiz-result-list-title {
  margin: 18px 0 12px;
  font-size: var(--fs-14);
  color: var(--text-muted);
}

.quiz-result-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

/* 结果中的题目卡片 */
.quiz-result-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-8);
  padding: var(--space-12) var(--space-16);
  background: var(--bg-card);
}

.quiz-result-card.is-correct {
  border-left: 4px solid var(--primary-color);
}

.quiz-result-card.is-wrong {
  border-left: 4px solid #d9534f;
}

.quiz-result-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  margin-bottom: var(--space-8);
}

.quiz-result-card-index {
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--fs-14);
}

.quiz-result-card-status {
  font-size: var(--fs-12);
  padding: var(--space-2) var(--space-10);
  border-radius: var(--radius-pill);
}

.is-correct .quiz-result-card-status {
  background: var(--primary-lighter);
  color: var(--primary-dark);
}

.is-wrong .quiz-result-card-status {
  background: #fdecea;
  color: #d9534f;
}

.quiz-result-card-title {
  font-size: var(--fs-14);
  color: var(--text-primary);
  line-height: var(--lh-ui);
  margin-bottom: var(--space-8);
}

.quiz-result-card-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

.quiz-result-card-option {
  font-size: var(--fs-13);
  padding: var(--space-4) var(--space-10);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-6);
  color: var(--text-secondary);
}

.quiz-result-card-option.is-answer {
  border-color: var(--primary-color);
  background: var(--primary-lighter);
  color: var(--primary-dark);
  font-weight: 600;
}

.quiz-result-card-option.is-user-wrong {
  border-color: #d9534f;
  background: #fdecea;
  color: #d9534f;
  text-decoration: line-through;
}

.quiz-result-card-correct {
  font-size: var(--fs-13);
  color: var(--primary-dark);
  margin-bottom: var(--space-6);
}

.quiz-result-card-correct b {
  color: var(--primary-color);
  font-size: var(--fs-15);
}

/* 相关文章链接 */
.quiz-article-links,
.cv-q-articles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  align-items: center;
  margin-top: var(--space-6);
}

.quiz-article-label,
.cv-q-articles-label {
  font-size: var(--fs-13);
  color: var(--text-muted);
}

.quiz-article-link,
.cv-q-article-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--fs-13);
  color: var(--primary-color);
  text-decoration: none;
  padding: var(--space-4) var(--space-10);
  border: 1px solid var(--primary-light);
  border-radius: var(--radius-pill);
  background: var(--primary-bg);
  transition: all .15s;
  max-width: 100%;
}

.quiz-article-link:hover,
.cv-q-article-link:hover {
  background: var(--primary-lighter);
  color: var(--primary-dark);
  border-color: var(--primary-color);
}

/* 看题页题目卡片 */
.cv-question-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-12);
  padding: var(--space-16) var(--space-20);
  box-shadow: var(--shadow-sm);
}

.cv-q-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.cv-q-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  padding: var(--space-10) var(--space-12);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-8);
  font-size: var(--fs-14);
  color: var(--text-primary);
  line-height: var(--lh-ui);
}

.cv-q-option-key {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--text-secondary);
}

.cv-q-option--correct {
  border-color: var(--primary-color);
  background: var(--primary-lighter);
}

.cv-q-option--correct .cv-q-option-key {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--text-light);
}

.cv-q-option-mark {
  margin-left: auto;
  flex-shrink: 0;
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--primary-dark);
}


/* ============================== 结果页（评分 + 评语） ============================== */

/* 页脚跟随内容自然收尾（与全站一致），不再撑满视口钉住页脚 */
body.page-practice-result .main {
    padding-bottom: var(--space-20);
}



.result-doc .content {
  min-width: 0;
}

.result-layout {
  min-width: 0;
  padding: 20px 0 48px;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

/* 成绩卡 */
.result-hero {
  display: flex;
  align-items: center;
  gap: var(--space-28);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-16);
  padding: var(--space-28) var(--space-32);
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
}

.result-score-ring {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
}

.result-score {
  font-size: 64px;
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1;
}

.result-score.is-fail {
  color: #d9534f;
}

.result-score-unit {
  font-size: var(--fs-20);
  color: var(--text-secondary);
}

.result-hero-info {
  flex: 1;
  min-width: 260px;
}

.result-title {
  font-size: var(--fs-24);
  margin: 0 0 10px;
  color: var(--text-primary);
}

.result-stats {
  display: flex;
  gap: var(--space-20);
  font-size: var(--fs-14);
  color: var(--text-secondary);
  margin-bottom: var(--space-10);
  flex-wrap: wrap;
}

.result-stats b {
  font-size: var(--fs-17);
  margin-right: var(--space-2);
}

.result-stats .stat-correct b { color: var(--primary-color); }
.result-stats .stat-wrong b { color: #d9534f; }
.result-stats .stat-marked b { color: #b88230; }

.result-comment {
  margin: 0;
  font-size: var(--fs-14);
  line-height: var(--lh-base);
  color: var(--text-secondary);
}

/* 评语卡片 */
.result-remarks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-10);
}

.result-remark {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-12);
  padding: var(--space-12) var(--space-16);
  font-size: var(--fs-13);
  color: var(--text-secondary);
  line-height: var(--lh-ui);
}

.result-remark-icon {
  font-size: var(--fs-16);
  line-height: var(--lh-tight);
}

/* 操作按钮 */
.result-actions {
  display: flex;
  gap: var(--space-12);
  flex-wrap: wrap;
}

.result-actions .practice-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* 答题详情 */
.result-detail {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-16);
  padding: var(--space-20) var(--space-24);
  box-shadow: var(--shadow-sm);
}

.result-detail-title {
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-16);
}

/* 标记徽标（逐题列表） */
.quiz-result-card-marked {
  margin-left: auto;
  font-size: var(--fs-12);
  padding: var(--space-2) var(--space-10);
  border-radius: var(--radius-pill);
  background: #fdf6ec;
  color: #b88230;
  border: 1px solid #e6a23c;
}



/* ============================== 侧边栏 widget ============================== */

.practice-side-widget .widget-title {
  font-size: var(--fs-14);
}

.practice-side-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-12) var(--space-12);
}

.practice-side-link {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-8);
  font-size: var(--fs-14);
  color: var(--text-secondary);
  text-decoration: none;
  transition: all .15s;
}

.practice-side-link:hover {
  background: var(--primary-bg);
  color: var(--primary-dark);
}

.practice-side-dirs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  padding: var(--space-10) var(--space-12) var(--space-12);
}

.practice-side-dir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-8) var(--space-10);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-8);
  background: var(--bg-card);
  text-decoration: none;
  transition: all .15s;
  min-width: 0;
}

.practice-side-dir:hover {
  border-color: var(--primary-light);
  background: var(--primary-bg);
}

.practice-side-dir-name {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--text-primary);
}

.practice-side-dir:hover .practice-side-dir-name {
  color: var(--primary-dark);
}

.practice-side-tips {
  margin: 0;
  padding: var(--space-8) var(--space-12) var(--space-12);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.practice-side-tips li {
  font-size: var(--fs-13);
  color: var(--text-secondary);
  line-height: var(--lh-ui);
}



/* 底部广告位（.ad-slot）是 theme-layout 外壳元素，
   样式已上收至 common.css「底部广告位」区段，本文件不再重复声明。 */



/* ================================================================
   view 看题页：固定高度布局（参考面试题页 interview/frontend）
   页面整体不滚动 —— 头部 / 底部备案条固定，左中右三栏各自独立滚动
   ================================================================ */
@media (min-width: 992px) {
    body.page-practice-view {
        height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .main.page-practice-view {
        flex: 1;
        min-height: 0;
        padding: 10px 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .page-practice-view .iv-doc {
        flex: 1;
        min-height: 0;
        margin: 0 auto;
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
        gap: var(--space-32);
        padding: var(--space-12) var(--space-16);
        box-sizing: border-box;
    }

    .page-practice-view .iv-doc > .content {
        min-width: 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: var(--space-12) var(--space-16) var(--space-16);
        border-radius: var(--radius-12);
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(93, 151, 67, 0.12);
        box-shadow: 0 10px 34px rgba(0, 0, 0, 0.1);
    }

    .page-practice-view .sidebar {
        position: static;
        height: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* 题目导航：占侧边栏主要空间，内部独立滚动（与面试题页一致） */
    .page-practice-view .iv-toc-widget {
        flex: 1 1 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .page-practice-view .iv-toc-widget .iv-toc-nav--side {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        margin: 0;
    }

    .page-practice-view .sidebar .friend-links-widget {
        flex: none;
        max-height: 35%;
        overflow-y: auto;
        min-height: 0;
    }

    .page-practice-view .iv-tabs {
        flex: none;
    }

    .page-practice-view .iv-doc-body {
        flex: 1;
        min-height: 0;
        align-items: stretch;
        grid-template-rows: minmax(0, 1fr);
        overflow: hidden;
    }

    .page-practice-view .iv-sidebar,
    .page-practice-view .iv-content {
        height: 100%;
        max-height: none;
        min-height: 0;
    }

    .page-practice-view .iv-content {
        overflow-y: auto;
        overscroll-behavior: contain;
        scroll-behavior: smooth;
        padding-right: var(--space-10);
        scrollbar-width: thin;
        scrollbar-color: rgba(93, 151, 67, 0.35) transparent;
    }

    .page-practice-view .iv-questions-header {
        position: sticky;
        top: 0;
        z-index: 20;
        box-shadow: 0 12px 22px -10px rgba(93, 151, 67, 0.35);
    }

    /* 底部备案条：固定布局下作为 flex 末项（margin 已随全站归零，与面试题页一致） */
    body.page-practice-view .footer {
        flex: none;
    }
}


/* ============================== 响应式 ============================== */

@media (max-width: 860px) {
  .result-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .practice-body {
    flex-direction: column;
  }

  .practice-nav {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    position: static;
  }

  .practice-nav-item {
    flex: 1;
    min-width: 160px;
  }

  .quiz-body {
    flex-direction: column;
  }

  .quiz-card-panel {
    width: 100%;
    position: static;
    order: -1;
  }

  .quiz-card-grid {
    grid-template-columns: repeat(10, 1fr);
  }

  .quiz-topbar {
    flex-wrap: wrap;
  }

  .quiz-topbar-center {
    order: 3;
    width: 100%;
    justify-content: space-between;
  }

}

@media (max-width: 560px) {
  .quiz-card-grid {
    grid-template-columns: repeat(8, 1fr);
  }

  .quiz-result-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-10);
  }
}