/* ============ 刷题全屏层 ============ */
.quiz-layer{
  position:fixed;inset:0;z-index:100;background:var(--bg);
  display:flex;flex-direction:column;animation:quizIn .35s var(--ease);
}
.quiz-layer[hidden]{display:none}
@keyframes quizIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.quiz-layer.closing{animation:quizOut .28s var(--ease) forwards}
@keyframes quizOut{to{opacity:0;transform:translateY(24px)}}

.quiz-top{
  display:flex;align-items:center;gap:14px;padding:14px 22px 10px;
  max-width:860px;width:100%;margin:0 auto;
}
.quiz-close{
  width:36px;height:36px;border-radius:11px;background:var(--card);border:1px solid var(--line);
  font-size:1rem;color:var(--text-2);flex:none;transition:all .2s;
}
.quiz-close:hover{color:var(--red);border-color:var(--red)}
.quiz-progress-wrap{flex:1}
.quiz-progress-text{font-size:.72rem;color:var(--text-3);margin-bottom:4px;display:flex;justify-content:space-between}
.quiz-progress{height:6px;background:#E4E9F0;border-radius:3px;overflow:hidden}
.quiz-progress i{
  display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--gold),#E0BC6C);
  transition:width .45s var(--ease);
}
.quiz-timer{
  font-variant-numeric:tabular-nums;font-weight:700;font-size:.9rem;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:11px;padding:7px 13px;flex:none;
}
.quiz-timer.warn{color:var(--red);border-color:var(--red);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.55}}

.quiz-body{flex:1;overflow-y:auto;padding:6px 22px 120px}
.quiz-inner{max-width:860px;margin:0 auto}

/* 题卡 */
.q-card{
  background:var(--card);border-radius:18px;box-shadow:var(--shadow);
  padding:26px 28px;border:1px solid rgba(230,234,240,.6);
  animation:qSlide .4s var(--ease);
}
@keyframes qSlide{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:none}}
.q-card.slide-back{animation:qSlideBack .4s var(--ease)}
@keyframes qSlideBack{from{opacity:0;transform:translateX(-36px)}to{opacity:1;transform:none}}

.q-head{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.q-type{
  font-size:.68rem;font-weight:700;padding:3px 10px;border-radius:8px;letter-spacing:.5px;
}
.q-kp{font-size:.7rem;color:var(--text-3);background:var(--bg);padding:3px 10px;border-radius:8px}
.q-real{font-size:.68rem;color:#8A6D2B;background:var(--gold-soft);padding:3px 10px;border-radius:8px;font-weight:600}
.q-fav{
  margin-left:auto;font-size:1.25rem;color:#C9CFD8;transition:all .25s var(--ease);line-height:1;
}
.q-fav:hover{transform:scale(1.2)}
.q-fav.on{color:var(--gold);animation:favPop .4s var(--ease)}
@keyframes favPop{40%{transform:scale(1.45) rotate(-8deg)}}

.q-stem{font-size:1.02rem;font-weight:600;line-height:1.75;margin-bottom:20px}

/* 选项 */
.opts{display:flex;flex-direction:column;gap:11px}
.opt{
  display:flex;gap:13px;align-items:flex-start;text-align:left;
  padding:14px 16px;border-radius:14px;border:1.5px solid var(--line);
  background:var(--card);font-size:.92rem;line-height:1.6;
  transition:all .22s var(--ease);position:relative;
}
.opt:hover{border-color:var(--ink-3);background:#FAFBFD;transform:translateX(3px)}
.opt-key{
  width:28px;height:28px;border-radius:9px;background:var(--bg);flex:none;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.82rem;color:var(--text-2);transition:all .22s;
}
.opt.picked{border-color:var(--ink);background:#F4F7FB}
.opt.picked .opt-key{background:var(--ink);color:#fff}
.opt.correct{border-color:var(--green);background:var(--green-bg);animation:optRight .45s var(--ease)}
.opt.correct .opt-key{background:var(--green);color:#fff}
.opt.wrong{border-color:var(--red);background:var(--red-bg);animation:optShake .4s var(--ease)}
.opt.wrong .opt-key{background:var(--red);color:#fff}
.opt.dim{opacity:.55;pointer-events:none}
.opt:disabled{cursor:default}
@keyframes optRight{35%{transform:scale(1.018)}}
@keyframes optShake{20%{transform:translateX(-7px)}45%{transform:translateX(6px)}70%{transform:translateX(-3px)}}

/* 判断题 */
.judge-row{display:flex;gap:14px}
.judge-row .opt{flex:1;justify-content:center;font-weight:600}

/* 解析 */
.explain{
  margin-top:20px;border-radius:14px;padding:18px;font-size:.87rem;
  animation:expIn .45s var(--ease);line-height:1.7;
}
@keyframes expIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.explain.right{background:var(--green-bg);border:1px solid #CBE8D5}
.explain.wrong-bg{background:var(--red-bg);border:1px solid #F5CFCF}
.explain-head{font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:8px}
.explain-head .res-right{color:var(--green)}
.explain-head .res-wrong{color:var(--red)}
.explain-answer{font-size:.82rem;margin-bottom:6px;color:var(--text-2)}
.explain-answer b{color:var(--ink);font-size:.95rem}
.explain-text{color:var(--text-2)}

/* 底部操作栏 */
.quiz-foot{
  position:fixed;left:0;right:0;bottom:0;z-index:110;
  background:rgba(255,255,255,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  padding:12px 22px calc(12px + env(safe-area-inset-bottom));
}
.quiz-foot-inner{max-width:860px;margin:0 auto;display:flex;gap:12px;align-items:center}
.quiz-foot .kbd-hint{font-size:.68rem;color:var(--text-3);margin-right:auto}
kbd{
  background:var(--bg);border:1px solid var(--line);border-bottom-width:2px;
  border-radius:5px;padding:1px 6px;font-size:.66rem;font-family:inherit;
}

/* 答题卡 */
.sheet-toggle{font-size:.8rem;color:var(--text-2)}
.answer-sheet{
  position:fixed;right:0;top:0;bottom:0;width:300px;z-index:120;background:var(--card);
  box-shadow:-8px 0 32px rgba(15,37,64,.12);padding:20px;overflow-y:auto;
  transform:translateX(100%);transition:transform .35s var(--ease);
}
.answer-sheet.open{transform:none}
.sheet-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-top:14px}
.sheet-cell{
  aspect-ratio:1;border-radius:10px;border:1.5px solid var(--line);font-size:.8rem;font-weight:600;
  color:var(--text-2);transition:all .2s;display:flex;align-items:center;justify-content:center;
}
.sheet-cell.done{background:var(--ink);border-color:var(--ink);color:#fff}
.sheet-cell.right{background:var(--green-bg);border-color:var(--green);color:var(--green)}
.sheet-cell.err{background:var(--red-bg);border-color:var(--red);color:var(--red)}
.sheet-cell.cur{outline:2px solid var(--gold);outline-offset:2px}

/* 结果页 */
.result-wrap{max-width:640px;margin:0 auto;text-align:center;padding:30px 0}
.result-ring-wrap{position:relative;width:170px;height:170px;margin:0 auto 18px}
.result-ring-num{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.result-ring-num b{font-size:2.4rem;font-weight:800;font-variant-numeric:tabular-nums}
.result-ring-num span{font-size:.72rem;color:var(--text-3)}
.result-title{font-size:1.3rem;font-weight:700;margin-bottom:6px}
.result-sub{font-size:.85rem;color:var(--text-2);margin-bottom:22px}
.result-stats{display:flex;justify-content:center;gap:34px;margin-bottom:26px}
.result-stats .rs b{font-size:1.35rem;font-weight:800;display:block;font-variant-numeric:tabular-nums}
.result-stats .rs span{font-size:.72rem;color:var(--text-3)}
.result-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

@media (max-width:768px){
  .quiz-top{padding:10px 14px 8px}
  .quiz-body{padding:4px 14px 110px}
  .q-card{padding:18px;border-radius:15px}
  .q-stem{font-size:.96rem}
  .opt{padding:12px 13px;font-size:.88rem}
  .quiz-foot{padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
  .kbd-hint{display:none}
  .answer-sheet{width:82vw}
  .judge-row{flex-direction:row}
}