/* 通用学习卡组 - 测验页样式 */
.quiz-page .quiz-header {
  background: linear-gradient(135deg, #8338ec, #ff006e);
  color: #fff; padding: 34px 30px; border-radius: 0 0 var(--border-radius) var(--border-radius); margin-bottom: 28px;
}
.quiz-header h1 { font-size: 1.8rem; }
.quiz-header .header-content { position: relative; }
.back-home {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  color: #fff; text-decoration: none; opacity: .9; border: 1px solid rgba(255,255,255,.4);
  padding: 7px 15px; border-radius: 20px; font-size: .88rem; transition: var(--transition);
}
.back-home:hover { background: rgba(255,255,255,.15); opacity: 1; }

.quiz-screen { animation: screenFade .25s ease; }
@keyframes screenFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 设置页 */
.setup-card { background: var(--card-color); border-radius: var(--border-radius); box-shadow: var(--box-shadow); padding: 30px; max-width: 900px; margin: 0 auto; }
.setup-card h2 { font-size: 1.3rem; margin-bottom: 22px; display: flex; align-items: center; gap: 10px; }
.setup-row { margin-bottom: 24px; }
.setup-row.inline { display: flex; gap: 22px; flex-wrap: wrap; }
.setup-field { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 8px; }
.setup-label { display: block; font-weight: 600; margin-bottom: 9px; color: var(--muted-color); font-size: .88rem; }
.setup-field .setup-label { margin-bottom: 0; }
.mode-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.mode-option {
  text-align: left; padding: 16px; border: 2px solid var(--border-color); border-radius: var(--border-radius);
  background: var(--bg-color); color: var(--text-color); cursor: pointer;
  display: flex; flex-direction: column; gap: 5px; transition: var(--transition);
}
.mode-option i { font-size: 1.2rem; color: var(--primary-color); margin-bottom: 3px; }
.mode-option .mode-title { font-weight: 700; }
.mode-option .mode-desc { font-size: .84rem; color: var(--muted-color); line-height: 1.5; }
.mode-option:hover { border-color: var(--primary-color); }
.mode-option.active { border-color: var(--primary-color); background: rgba(58,134,255,.08); box-shadow: 0 0 0 3px rgba(58,134,255,.12); }
.group-pills { display: flex; flex-wrap: wrap; gap: 9px; }
.group-pill {
  padding: 8px 14px; border-radius: 20px; border: 1px solid var(--border-color);
  background: var(--bg-color); color: var(--text-color); cursor: pointer; font-size: .86rem;
  transition: var(--transition); display: inline-flex; align-items: center; gap: 7px;
}
.group-pill .dot { width: 9px; height: 9px; border-radius: 50%; }
.group-pill:hover { border-color: var(--primary-color); }
.group-pill.active { border-color: var(--primary-color); background: rgba(58,134,255,.1); font-weight: 600; }
.setup-card select { padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-color); color: var(--text-color); font-size: .94rem; }
.setup-check { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: .94rem; }
.setup-check input { width: 17px; height: 17px; accent-color: var(--primary-color); }
.setup-summary { padding: 13px 16px; background: rgba(58,134,255,.08); border-left: 4px solid var(--primary-color); border-radius: 8px; font-size: .94rem; margin-bottom: 20px; }
.start-quiz-btn {
  width: 100%; padding: 15px; font-size: 1.06rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border: none; border-radius: var(--border-radius); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px; transition: var(--transition);
}
.start-quiz-btn:disabled { opacity: .5; cursor: not-allowed; }
.start-quiz-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(58,134,255,.3); }
.secondary-btn {
  padding: 11px 18px; background: var(--bg-color); color: var(--text-color);
  border: 1px solid var(--border-color); border-radius: var(--border-radius); cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; font-size: .93rem; transition: var(--transition);
}
.secondary-btn:hover { border-color: var(--primary-color); color: var(--primary-color); }
.wrongbook-entry { margin-top: 16px; text-align: center; }
.wrongbook-entry a { color: var(--muted-color); font-size: .86rem; text-decoration: none; }
.wrongbook-entry a:hover { color: var(--danger-color); }

/* 顶栏 */
.quiz-topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  background: var(--card-color); padding: 15px 20px; border-radius: var(--border-radius);
  box-shadow: var(--box-shadow); margin-bottom: 22px; flex-wrap: wrap;
}
.progress-info { flex: 1; min-width: 230px; }
.progress-info > span { font-size: .88rem; color: var(--muted-color); }
.progress-bar { height: 8px; background: var(--bg-color); border-radius: 8px; overflow: hidden; margin-top: 8px; }
.progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); border-radius: 8px; transition: width .3s ease; }
.quiz-stats-mini { display: flex; align-items: center; gap: 16px; }
.mini-stat { font-size: .94rem; display: inline-flex; align-items: center; gap: 6px; }
.mini-stat.known { color: var(--success-color); }
.mini-stat.unknown { color: var(--danger-color); }
.quit-btn { padding: 8px 14px; background: transparent; border: 1px solid var(--border-color); border-radius: 8px; color: var(--muted-color); cursor: pointer; font-size: .86rem; }
.quit-btn:hover { border-color: var(--danger-color); color: var(--danger-color); }

/* 闪卡 */
.flashcard-area { max-width: 760px; margin: 0 auto; }
.flashcard { perspective: 1600px; cursor: pointer; margin-bottom: 22px; }
.flashcard-inner { position: relative; width: 100%; min-height: 360px; transition: transform .55s cubic-bezier(.4,.2,.2,1); transform-style: preserve-3d; }
.flashcard.flipped .flashcard-inner { transform: rotateY(180deg); }
.flashcard-face {
  position: absolute; inset: 0; backface-visibility: hidden; border-radius: 20px;
  padding: 34px; display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.1);
}
.flashcard-front { background: linear-gradient(160deg, var(--card-color), var(--bg-color)); border: 2px solid var(--border-color); }
.flashcard-back {
  transform: rotateY(180deg); background: linear-gradient(160deg, #1d3557, #2b2d42);
  color: #f1faee; justify-content: flex-start; text-align: left; overflow-y: auto;
}
.fc-badge {
  position: absolute; top: 17px; left: 21px; font-size: .78rem; padding: 5px 11px;
  border-radius: 14px; background: rgba(58,134,255,.12); color: var(--primary-color);
}
.flashcard-back .fc-badge { background: rgba(255,255,255,.14); color: #cdd6f4; }
.fc-front { font-size: 2rem; font-weight: 800; line-height: 1.25; margin-bottom: 10px; word-break: break-word; }
.fc-sub { font-size: 1rem; color: var(--secondary-color); }
.fc-hint { margin-top: 24px; font-size: .86rem; color: var(--muted-color); }
.fc-front-small { font-size: 1.2rem; font-weight: 700; margin: 32px 0 14px; color: #ffd166; }
.fc-back { font-size: 1.1rem; line-height: 1.8; }
.fc-details { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; font-size: .95rem; line-height: 1.7; }
.fc-detail span { display: inline-block; color: #a9b6e8; margin-right: 8px; }
.flashcard-actions { display: flex; gap: 12px; }
.fc-btn {
  flex: 1; padding: 15px; border: none; border-radius: var(--border-radius); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px; font-weight: 700;
  transition: var(--transition); color: #fff;
}
.fc-btn span { font-size: .98rem; }
.fc-btn small { font-size: .76rem; opacity: .8; font-weight: 400; }
.fc-btn-unknown { background: linear-gradient(135deg, #e63946, #c1121f); }
.fc-btn-known { background: linear-gradient(135deg, #38b000, #2d6a4f); }
.fc-btn-flip { background: var(--card-color); color: var(--text-color); border: 1px solid var(--border-color); flex: .8; }
.fc-btn:hover { transform: translateY(-2px); }
.fc-keytips { text-align: center; margin-top: 14px; font-size: .8rem; color: var(--muted-color); }
.fc-keytips kbd { background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 4px; padding: 1px 6px; font-size: .76rem; }

/* 选择题 */
.choice-area { max-width: 860px; margin: 0 auto; }
.choice-question { background: var(--card-color); border-radius: var(--border-radius); box-shadow: var(--box-shadow); padding: 24px; margin-bottom: 18px; }
.ch-q-label { font-size: .84rem; color: var(--primary-color); font-weight: 700; margin-bottom: 10px; }
.ch-q-body { font-size: 1.12rem; line-height: 1.75; }
.ch-q-term { font-size: 1.55rem; font-weight: 800; }
.ch-q-sub { font-size: 1rem; font-style: italic; font-weight: 400; color: var(--secondary-color); }
.choice-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .choice-options { grid-template-columns: 1fr; } }
.ch-option {
  padding: 16px 18px; background: var(--card-color); border: 2px solid var(--border-color);
  border-radius: var(--border-radius); cursor: pointer; text-align: left; color: var(--text-color);
  font-size: .98rem; display: flex; align-items: center; gap: 11px; transition: var(--transition); line-height: 1.5;
}
.ch-option .opt-key {
  flex: none; width: 25px; height: 25px; border-radius: 50%; background: var(--bg-color);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
  font-size: .82rem; color: var(--muted-color);
}
.ch-option:hover:not(.disabled) { border-color: var(--primary-color); transform: translateY(-2px); }
.ch-option.correct { border-color: var(--success-color); background: rgba(56,176,0,.1); }
.ch-option.correct .opt-key { background: var(--success-color); color: #fff; }
.ch-option.wrong { border-color: var(--danger-color); background: rgba(230,57,70,.1); }
.ch-option.wrong .opt-key { background: var(--danger-color); color: #fff; }
.ch-option.disabled { cursor: default; opacity: .85; }
.choice-feedback { margin-top: 18px; padding: 16px 18px; border-radius: var(--border-radius); font-size: .96rem; line-height: 1.7; }
.choice-feedback.ok { background: rgba(56,176,0,.1); border-left: 4px solid var(--success-color); }
.choice-feedback.fail { background: rgba(230,57,70,.1); border-left: 4px solid var(--danger-color); }
.choice-feedback .fb-title { font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.choice-feedback .fb-hint { margin-top: 6px; color: var(--muted-color); }
.choice-next-wrap { margin-top: 18px; }
.choice-next-wrap .start-quiz-btn { max-width: 300px; margin-left: auto; }

/* 结果页 */
.result-card { background: var(--card-color); border-radius: var(--border-radius); box-shadow: var(--box-shadow); padding: 34px; max-width: 860px; margin: 0 auto; text-align: center; }
.result-icon i { font-size: 3.2rem; color: var(--warning-color); margin-bottom: 12px; }
.result-card h2 { margin-bottom: 18px; }
.result-score { margin-bottom: 16px; }
.score-big { font-size: 2.9rem; font-weight: 800; color: var(--primary-color); display: block; line-height: 1.1; }
.score-detail { color: var(--muted-color); }
.result-bar { height: 12px; background: var(--bg-color); border-radius: 8px; overflow: hidden; margin-bottom: 26px; }
.result-bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--success-color), var(--primary-color)); transition: width .6s ease; }
.result-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.result-actions .start-quiz-btn { width: auto; padding: 13px 24px; font-size: .98rem; }
.wrong-review { margin-top: 32px; text-align: left; }
.wrong-review h3 { font-size: 1.1rem; margin-bottom: 14px; }
.wrong-item { padding: 13px 16px; background: var(--bg-color); border-radius: var(--border-radius); margin-bottom: 9px; border-left: 4px solid var(--danger-color); }
.wrong-item .wi-term { font-weight: 700; margin-bottom: 4px; }
.wrong-item .wi-exp { font-size: .9rem; color: var(--muted-color); line-height: 1.6; }