/* ============================================================
   亚男编程 · 题库换肤皮肤（对齐主站品牌蓝 #153FC6 + 吉祥物配色）
   ------------------------------------------------------------
   设计原则：只覆盖「视觉」，不改动任何 DOM 结构 / ID / 类名，
            framework.js 的全部行为（锁定行、按钮高亮、滑杆…）不受影响。
   用法：在页面 <head> 的 app.css 之后引入本文件即可。
   ============================================================ */

/* ---------- 品牌变量（同时覆盖题库站原有变量，使全局控件统一） ---------- */
:root{
  /* 品牌色 */
  --brand:#153FC6;          /* 主站导航主色 */
  --brand-2:#3B5BDB;        /* 吉祥物宝蓝 */
  --brand-3:#7C93FF;        /* 浅蓝 */
  --brand-ink:#0E2A6E;      /* 深蓝字 */
  --brand-soft:#EAF0FF;     /* 浅蓝底 */
  --accent:#FF7A45;         /* 吉祥物橙色（内耳/脸颊） */
  --accent-2:#FFA940;

  /* 覆盖题库站原变量 → 全站控件跟随品牌色 */
  --primary:var(--brand);
  --primary-dark:#0F2FA0;
  --text:#243043;
  --text-sec:#5A6577;
  --text-light:#93A0B5;
  --bg:#EEF2FB;
  --card:#FFFFFF;
  --border:#E6EAF5;
}

/* ---------- 页面底纹：柔和品牌渐变 + 蓝/橙光斑 ---------- */
body{
  font-family:'Inter','Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  color:var(--text);
  background:
    radial-gradient(720px 480px at 8% -8%,  #DCE6FF 0%, rgba(220,230,255,0) 62%),
    radial-gradient(640px 500px at 100% 4%, #FFE8D8 0%, rgba(255,232,216,0) 60%),
    linear-gradient(180deg, #F5F8FF 0%, #EEF2FB 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ================= 开始界面 ================= */
.start-wrap{ max-width:780px; padding:38px 20px 60px; }

/* 主视觉：吉祥物 + 标题 */
.start-hero{
  display:flex; align-items:center; justify-content:center; gap:22px;
  margin-bottom:26px;
}
.start-mascot{
  width:124px; height:auto; flex-shrink:0; display:block;
  filter:drop-shadow(0 18px 26px rgba(21,63,198,.26));
  animation:yanan-float 4.5s ease-in-out infinite;
}
@keyframes yanan-float{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-8px); }
}
.start-hero-text{ min-width:0; }
.start-title{
  text-align:left; font-size:38px; font-weight:800; letter-spacing:.5px;
  line-height:1.12; margin-bottom:8px;
  background:linear-gradient(118deg,#1237B0 0%,#3B5BDB 52%,#7C93FF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.start-sub{ text-align:left; font-size:15px; color:var(--text-sec); margin-bottom:0; }
.hero-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:13px; }
.hero-chips span{
  font-size:12.5px; font-weight:600; color:var(--brand-ink);
  background:var(--brand-soft); border:1px solid #DCE6FF;
  padding:4px 11px; border-radius:999px; white-space:nowrap;
}

/* 配置卡片 */
.config-card{
  background:#fff; border-radius:22px; padding:32px 34px 28px;
  border:1px solid #E9EDF9;
  box-shadow:
    0 26px 60px -30px rgba(14,42,110,.45),
    0 8px 22px -16px rgba(14,42,110,.22);
  position:relative; overflow:hidden;
}
.config-card::before{
  content:''; position:absolute; left:0; right:0; top:0; height:5px;
  background:linear-gradient(90deg,#153FC6 0%,#3B5BDB 48%,#FF7A45 100%);
}
.config-row{ margin-bottom:24px; }
.config-label{ color:var(--brand-ink); font-weight:700; letter-spacing:.3px; }
.config-label::before{
  content:''; display:inline-block; width:6px; height:6px; margin-right:8px;
  border-radius:50%; background:linear-gradient(135deg,#3B5BDB,#FF7A45);
  vertical-align:middle;
}

/* 选择胶囊 */
.btn-tag{
  padding:9px 20px; border:1.5px solid #E1E7F5; border-radius:12px;
  background:#fff; color:var(--text-sec); font-weight:600;
  box-shadow:0 1px 2px rgba(14,42,110,.04);
}
.btn-tag:hover{
  border-color:#B7C6F2; color:var(--brand); transform:translateY(-1px);
  box-shadow:0 8px 16px -10px rgba(21,63,198,.6);
}
.btn-tag.active{
  background:linear-gradient(135deg,#1E4BD8,#3B5BDB);
  border-color:transparent; color:#fff;
  box-shadow:0 10px 20px -10px rgba(21,63,198,.8);
}
.btn-tag.active.lang-cpp{
  background:linear-gradient(135deg,#FF8A4C,#F5522B);
  box-shadow:0 10px 20px -10px rgba(245,82,43,.85);
}

/* 题型模式（理论/实操） */
.exam-type-tag{ border:1.5px solid #E1E7F5; border-radius:14px; }
.exam-type-tag:hover{ border-color:#B7C6F2; color:var(--brand); }
.exam-type-tag.active{
  background:linear-gradient(135deg,#1E4BD8,#3B5BDB);
  border-color:transparent;
  box-shadow:0 10px 22px -12px rgba(21,63,198,.85);
}

/* 下拉框 */
select{ border:1.5px solid #E1E7F5; border-radius:10px; color:var(--text); }
select:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(21,63,198,.12); }

/* 滑竿 */
input[type="range"]{ background:#E6EAF5; }
input[type="range"]::-webkit-slider-thumb{
  background:var(--brand); box-shadow:0 3px 8px rgba(21,63,198,.45);
}
input[type="range"]::-moz-range-thumb{ background:var(--brand); }
.slider-val-input{
  color:var(--brand); background:var(--brand-soft);
  border:1.5px solid #C9D6FA; border-radius:8px;
}
.slider-val-input:focus{ background:#fff; box-shadow:0 0 0 3px rgba(21,63,198,.16); }

/* 单选/复选 */
.radio-group input[type="radio"],
.checkbox-row input[type="checkbox"]{ accent-color:var(--brand); }

/* 统计信息 */
.stat-info{ border-top:1px solid #EDF0F8; color:var(--text-light); }
.stat-info b{ color:var(--brand-ink); }

/* 开始答题按钮 */
.start-btn{
  padding:17px; margin-top:24px; border-radius:14px;
  font-size:19px; letter-spacing:2px;
  background:linear-gradient(135deg,#1E4BD8 0%,#3B5BDB 58%,#5A78F0 100%);
  box-shadow:0 16px 32px -14px rgba(21,63,198,.75);
  transition:transform .18s, box-shadow .18s, background .18s;
}
.start-btn:hover{
  background:linear-gradient(135deg,#1A43C8 0%,#3453D2 58%,#5270E8 100%);
  transform:translateY(-2px);
  box-shadow:0 22px 40px -16px rgba(21,63,198,.85);
}
.start-btn:active{ transform:translateY(0); }
.start-btn:disabled{ background:#C7CEDD; box-shadow:none; }

/* 错题/收藏入口 */
.mode-btn{ border:1.5px solid #E1E7F5; border-radius:12px; }
.mode-btn:hover{ border-color:#B7C6F2; color:var(--brand); }

/* 兑换码按钮沿用主站橙色（与导航一致） */

/* ============================================================
   答题 / 结果界面换肤
   ============================================================ */

/* ---------- 答题时隐藏顶部导航栏（body 加 quiz-mode 时） ---------- */
body.quiz-mode .site-nav{ display:none !important; }

/* ---------- 答题/结果界面：底板改纯色，去掉蓝/橙光斑 ----------
   开始界面保留品牌氛围光斑；进入答题后右上角橙色光斑会浮在空白处（显脏），
   故答题/结果态统一改为纯浅蓝底色。使用 body 上的 background（非 body::before），
   避免与 framework.js 对 body 的 class 操作冲突。 */
body.quiz-mode{
  background:#EEF2FB !important;
  background-image:none !important;
}

/* 没有导航栏后，答题容器占满整屏高度 */
.quiz-wrap, .result-wrap{ min-height:100vh; }

/* ---------- 答题顶栏：品牌深蓝渐变 ---------- */
.quiz-topbar{
  background:linear-gradient(118deg,#0F2FA0 0%,#1E4BD8 52%,#3B5BDB 100%);
  padding:12px 24px;
  box-shadow:0 10px 26px -16px rgba(14,42,110,.9);
}
.quiz-topbar-left{ gap:10px; }
.q-counter{
  font-size:17px; font-weight:800; color:#fff;
  font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.14);
  padding:4px 12px; border-radius:10px; line-height:1.2;
}
.type-badge{ padding:4px 13px; border-radius:999px; font-weight:700; }
.type-badge.choice{ background:#5A78F0; }
.type-badge.judge{ background:#22B07D; }
.type-badge.multi{ background:#7C5CF0; }
/* 主办方体系徽章：白底药丸 + 体系色文字（深蓝渐变顶栏上，实心蓝徽章会与背景融色），
   文字色沿用 exam-picker 在浅底上的配色：电子学会=蓝 / GESP=绿 / CSP=紫 */
.org-badge{
  padding:4px 13px; border-radius:999px; font-weight:700; font-size:12px;
  letter-spacing:.3px; line-height:1.2;
  background:#fff; box-shadow:0 2px 8px -4px rgba(6,18,70,.6);
}
.org-badge.org-cie{ color:#153FC6; }
.org-badge.org-gesp{ color:#0E7A55; }
.org-badge.org-csp{ color:#6D28D9; }
.lang-badge{ padding:4px 13px; border-radius:999px; font-weight:700; }
.src-badge{ color:rgba(255,255,255,.62); font-size:12px; }
.timer{
  font-family:'Roboto Mono','Consolas',monospace;
  font-size:19px; font-weight:700; color:#FFD08A;
  background:rgba(255,255,255,.1);
  padding:4px 12px; border-radius:10px;
  font-variant-numeric:tabular-nums; letter-spacing:.5px;
}
.home-btn{
  background:rgba(255,255,255,.14); color:#fff;
  border:1px solid rgba(255,255,255,.28);
  border-radius:10px; padding:7px 15px;
  transition:all .18s;
}
.home-btn:hover{ background:rgba(255,255,255,.26); color:#fff; }

/* ---------- 进度条 ---------- */
.progress-bar-wrap{ background:rgba(255,255,255,.72); border-bottom:1px solid #E6EAF5; padding:11px 24px; }
.progress-bar{ height:9px; background:#E2E8F7; border-radius:999px; }
.progress-fill{ background:linear-gradient(90deg,#3B5BDB,#7C93FF); border-radius:999px; box-shadow:0 0 10px rgba(59,91,219,.45); }
.progress-text{ color:var(--brand-ink); font-weight:600; font-size:13px; }

/* ---------- 题目卡片 ---------- */
.q-card{
  border-radius:20px; padding:32px 34px;
  border:1px solid #E9EDF9;
  box-shadow:0 24px 54px -34px rgba(14,42,110,.5), 0 6px 18px -14px rgba(14,42,110,.2);
}
.q-num{
  display:inline-flex; align-items:center; gap:8px;
  font-size:15px; font-weight:800; color:#fff;
  background:linear-gradient(135deg,#1E4BD8,#3B5BDB);
  padding:5px 15px; border-radius:999px;
  box-shadow:0 8px 18px -10px rgba(21,63,198,.9);
  margin-bottom:16px;
}
.q-text{ font-size:15.5px; line-height:1.9; color:#26324A; }

/* 代码块换品牌浅蓝 */
.q-text .code-block{ background:#F5F8FF; border-left:3px solid var(--brand); border-radius:10px; }
.q-text .code-block .code-line::before{ color:#AEBBDA; }

/* ---------- 选项 ---------- */
.options-list{ gap:12px; }
.option-item{
  border:1.5px solid #E3E8F6; border-radius:14px; padding:15px 18px;
  background:#fff; transition:all .18s;
}
.option-item:hover{
  border-color:#B7C6F2; background:#F5F8FF;
  transform:translateX(3px);
  box-shadow:0 10px 22px -16px rgba(21,63,198,.8);
}
.option-item.selected{
  border-color:var(--brand); background:#EAF0FF;
  box-shadow:0 10px 22px -14px rgba(21,63,198,.7);
}
.option-item.correct{ border-color:#22B07D; background:#EDFBF4; }
.option-item.wrong{ border-color:var(--error); background:#FFF3F2; }
.option-letter{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:28px; height:28px; border-radius:9px;
  background:#EAF0FF; color:var(--brand); font-size:14px; font-weight:800;
}
.option-item:hover .option-letter{ background:#DCE6FF; }
.option-item.selected .option-letter{ background:var(--brand); color:#fff; }
.option-item.correct .option-letter{ background:#22B07D; color:#fff; }
.option-item.wrong .option-letter{ background:var(--error); color:#fff; }
.option-text{ font-size:14.5px; line-height:1.7; color:#2B3648; }

/* ---------- 多选题 ---------- */
.option-item.opt-multi{ position:relative; }
.opt-check{
  flex:0 0 auto; width:20px; height:20px; margin-top:4px; border-radius:6px;
  border:1.8px solid #C9D6EE; background:#fff; position:relative;
  transition:all .16s;
}
.option-item.opt-multi:hover .opt-check{ border-color:var(--brand); }
.opt-check.on{ background:var(--brand); border-color:var(--brand); }
.opt-check.on::after{
  content:''; position:absolute; left:6px; top:2px; width:5px; height:9px;
  border:2px solid #fff; border-top:0; border-left:0; transform:rotate(42deg);
}
.option-item.selected .opt-check{ background:var(--brand); border-color:var(--brand); }
.option-item.selected .opt-check::after{
  content:''; position:absolute; left:6px; top:2px; width:5px; height:9px;
  border:2px solid #fff; border-top:0; border-left:0; transform:rotate(42deg);
}
.multi-bar{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  margin-top:14px; padding:10px 14px; border-radius:12px;
  background:#F5F8FF; border:1.5px dashed #C9D6EE;
}
.multi-tip{ font-size:12.5px; line-height:1.5; color:#41527A; }
.multi-submit{
  flex:0 0 auto; min-height:40px; padding:9px 20px; border-radius:999px; border:0;
  background:var(--brand); color:#fff; font-size:14px; font-weight:800; cursor:pointer;
  font-family:inherit; transition:all .16s;
}
.multi-submit:hover{ filter:brightness(1.06); }
.multi-submit:disabled{ background:#C9D6EE; color:#fff; cursor:not-allowed; filter:none; }
@media (max-width:560px){
  .multi-bar{ flex-direction:column; align-items:stretch; }
  .multi-submit{ width:100%; }
}

/* ---------- 组合题 ---------- */
.grp-material{ border:1.5px solid #C9D6FA; border-radius:16px; background:linear-gradient(180deg,#F3F7FF,#fff); }
.grp-member{ border:1.5px solid #E6EAF5; border-left:4px solid var(--brand); border-radius:14px; }
.grp-member-num{ color:var(--brand); }
.grp-exp{ background:#F7F9FE; border-radius:10px; }

/* ---------- 反馈 / 解析 ---------- */
.feedback-box{ border-radius:12px; }
.explanation-box{ background:#F5F8FF; border:1px solid #C9D6FA; border-radius:14px; }
.explanation-title{ color:var(--brand); }

/* ---------- 底部按钮条 ---------- */
.quiz-footer{
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid #E6EAF5; padding:14px 24px;
  box-shadow:0 -10px 26px -22px rgba(14,42,110,.7);
}
.nav-btn{ border-radius:12px; padding:11px 26px; font-weight:700; transition:all .18s; }
.nav-btn.secondary{ border:1.5px solid #E1E7F5; color:#3A4560; }
.nav-btn.secondary:hover{ border-color:#B7C6F2; color:var(--brand); background:#F5F8FF; }
.nav-btn.primary{
  background:linear-gradient(135deg,#1E4BD8,#3B5BDB);
  box-shadow:0 12px 24px -14px rgba(21,63,198,.9);
}
.nav-btn.primary:hover{
  background:linear-gradient(135deg,#1A43C8,#3453D2);
  transform:translateY(-1px);
  box-shadow:0 16px 28px -14px rgba(21,63,198,.95);
}
.nav-btn.exam-submit{
  background:linear-gradient(135deg,#FF9A4D,#F5761A);
  border:none; box-shadow:0 12px 24px -14px rgba(245,118,26,.9);
}
.nav-btn.exam-submit:hover{ background:linear-gradient(135deg,#FF8A3D,#E06400); }

/* ---------- 答题卡 / 弹窗 ---------- */
.modal-content{ border-radius:20px; box-shadow:0 30px 70px -30px rgba(14,42,110,.6); }
.modal-title{ color:var(--brand); }
.ans-cell{ border-radius:10px; }
.ans-cell.current{ background:var(--brand); border-color:var(--brand); }
.ans-cell.answered-exam{ background:#EAF0FF; color:var(--brand); border-color:var(--brand); }
.modal-close-btn{
  background:linear-gradient(135deg,#1E4BD8,#3B5BDB);
  border-radius:12px;
  box-shadow:0 12px 24px -16px rgba(21,63,198,.9);
}

/* ---------- 结果界面 ---------- */
.result-wrap{ padding:36px 20px 60px; }
.result-title{ color:var(--brand); }
.score-card{
  border-radius:22px; border:1px solid #E9EDF9;
  box-shadow:0 26px 60px -34px rgba(14,42,110,.5);
}
.score-num{
  background:linear-gradient(118deg,#1237B0,#3B5BDB 60%,#7C93FF);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ============================================================
   答题结果页（提交答卷后）
   ============================================================ */
.result-wrap{ padding:34px 20px 118px; }
.result-title{ display:none; }   /* 原「答题结果」大字标题由新头图取代，隐藏以减冗余 */

/* ---- 成绩主卡 ---- */
.score-card{
  position:relative; overflow:hidden;
  background:#fff; border-radius:26px; padding:34px 34px 30px;
  border:1px solid #E9EDF9;
  box-shadow:0 30px 66px -38px rgba(14,42,110,.55), 0 8px 22px -18px rgba(14,42,110,.22);
  margin-bottom:22px;
}
/* 顶部彩条：通过→绿，未通过→橙（既醒目又不刺眼） */
.score-card::before{
  content:''; position:absolute; left:0; right:0; top:0; height:6px;
  background:linear-gradient(90deg,#153FC6,#3B5BDB);
}
.score-card.is-pass::before{ background:linear-gradient(90deg,#0E9F6E,#34D399 55%,#FFB020); }
.score-card.is-fail::before{ background:linear-gradient(90deg,#FF7A45,#FFA940 55%,#FFD08A); }

/* 吉祥物插画（结果页头图） */
.result-hero{ display:flex; justify-content:center; margin-bottom:8px; }
.result-hero img{
  width:210px; max-width:58%; height:auto; display:none;
  filter:drop-shadow(0 18px 28px rgba(21,63,198,.28));
  animation:yanan-float 4.5s ease-in-out infinite;
}
.result-hero img.show{ display:block; }

/* 分数区：数字 + 单位 + 状态徽章 */
.score-main{ display:flex; align-items:flex-end; justify-content:center; gap:6px; }
.score-num{
  font-size:88px; font-weight:800; line-height:.95; letter-spacing:-2px;
  font-variant-numeric:tabular-nums;
}
.score-num.pass{
  background:linear-gradient(118deg,#0E9F6E,#34D399 60%,#12B886);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.score-num.fail{
  background:linear-gradient(118deg,#F5761A,#FF9A4D 60%,#FFB020);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.score-unit{ font-size:20px; font-weight:700; color:var(--text-light); margin-bottom:12px; }
.score-status{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:16px; padding:8px 22px; border-radius:999px;
  font-size:17px; font-weight:800; letter-spacing:.5px;
}
.score-status.pass{
  color:#0E9F6E; background:#E9FBF3; border:1.5px solid #A7E8CD;
  box-shadow:0 10px 22px -16px rgba(14,159,110,.9);
}
.score-status.fail{
  color:#D9640A; background:#FFF4E8; border:1.5px solid #FFD3A8;
  box-shadow:0 10px 22px -16px rgba(245,118,26,.9);
}

/* 统计行（总题数/正确/错误/未答/用时） */
.stats-row{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:10px; margin-top:26px; padding-top:24px;
  border-top:1px dashed #E3E8F6;
}
.stat-item{
  padding:12px 6px; border-radius:14px; background:#F7F9FE;
  transition:transform .18s, background .18s;
}
.stat-item:hover{ transform:translateY(-2px); background:#F1F5FF; }
.stat-val{ font-size:26px; font-weight:800; line-height:1.15; font-variant-numeric:tabular-nums; }
.stat-lbl{ font-size:12.5px; color:var(--text-light); margin-top:4px; }

/* ---- 题目回顾 ---- */
.review-title{
  font-size:19px; font-weight:800; color:var(--brand-ink);
  margin:26px 0 14px; padding-left:12px; position:relative;
}
.review-title::before{
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:5px; height:19px; border-radius:3px;
  background:linear-gradient(180deg,#3B5BDB,#FF7A45);
}
.review-item{
  border-radius:16px; border:1px solid #EDF0F8; border-left:4px solid #D8DEF0;
  box-shadow:0 12px 30px -26px rgba(14,42,110,.6);
  transition:transform .18s, box-shadow .18s;
}
.review-item:hover{ transform:translateY(-1px); box-shadow:0 18px 36px -26px rgba(14,42,110,.65); }
.review-item.correct{ border-left-color:#22B07D; }
.review-item.wrong{ border-left-color:var(--error); }
.review-item.unanswered{ border-left-color:var(--warning); }
.review-q-num{ color:var(--brand-ink); }
.review-status{ border-radius:999px; padding:3px 12px; }
.review-status.correct{ background:#22B07D; }
.review-explanation{ background:#F5F8FF; border-radius:12px; }
.review-explanation .exp-label{ color:var(--brand); }
.review-options{ border-radius:12px; }

/* 底部操作条 */
.result-actions{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid #E6EAF5;
  box-shadow:0 -10px 26px -22px rgba(14,42,110,.7);
  padding:12px 16px;
}
.result-actions .nav-btn.success{
  background:linear-gradient(135deg,#0E9F6E,#12B886); color:#fff; border:none;
  box-shadow:0 12px 24px -14px rgba(14,159,110,.9);
}

/* 手机端 */
@media (max-width:640px){
  .result-wrap{ padding:22px 14px 130px; }
  .score-card{ padding:24px 18px 22px; border-radius:20px; }
  .result-hero img{ width:168px; }
  .score-num{ font-size:66px; }
  .stats-row{ grid-template-columns:repeat(3,1fr); gap:8px; margin-top:20px; padding-top:18px; }
  .stat-val{ font-size:22px; }
  .review-item{ padding:15px 14px; border-radius:13px; }
}

/* 手机端 */
@media (max-width:640px){
  .start-wrap{ padding:24px 14px 46px; }
  .start-hero{ flex-direction:column; gap:10px; text-align:center; margin-bottom:20px; }
  .start-mascot{ width:98px; }
  .start-title{ text-align:center; font-size:30px; }
  .start-sub{ text-align:center; }
  .hero-chips{ justify-content:center; }

  .config-card{ padding:22px 18px 20px; border-radius:18px; }
}

/* 答题/结果界面 · 手机端 */
@media (max-width:640px){
  .quiz-topbar{ padding:10px 14px; flex-wrap:wrap; gap:8px; }
  .quiz-topbar-left{ gap:8px; flex-wrap:wrap; }
  .quiz-topbar-right{ gap:8px; }
  .q-counter{ font-size:15px; padding:3px 10px; }
  .timer{ font-size:16px; padding:3px 9px; }
  .home-btn{ padding:6px 11px; font-size:12px; }
  .src-badge{ display:none; }
  /* 主办方徽章手机上保留（比来源年份更重要），略缩小省空间 */
  .org-badge{ font-size:11px; padding:3px 10px; }
  .progress-bar-wrap{ padding:9px 14px; gap:10px; }
  .quiz-body{ padding:14px; }
  .q-card{ padding:20px 16px; border-radius:16px; }
  .q-text{ font-size:15px; }
  .option-item{ padding:13px 14px; border-radius:12px; }
  .quiz-footer{
    grid-template-columns:1fr 1fr; gap:8px; padding:10px 12px;
  }
  .nav-btn{ padding:11px 14px; font-size:14px; }
  .footer-score{ grid-column:1 / -1; justify-content:center; }
  .result-wrap{ padding:24px 14px 46px; }
}

/* ============================================================
   题目纠错（桌面端 · quiz-feedback.js 注入的界面）
   类名统一 qf- 前缀，与手机端 m-bank.css 的 fb- 完全隔离，互不影响
   ============================================================ */
.qf-headrow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.qf-entry{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:999px; cursor:pointer;
  border:1.5px solid #E3E9F5; background:#fff; color:#5A6474;
  font-size:13px; font-weight:700; font-family:inherit;
  transition:all .18s;
}
.qf-entry:hover{ border-color:#B9CCFF; color:var(--brand); background:var(--brand-soft); }
.qf-entry:active{ transform:scale(.96); }
.qf-entry svg{ width:14px; height:14px; }
/* 题号与操作按钮同一行：去掉题号自带的底部间距，保证和按钮垂直居中对齐 */
.qf-headrow > .q-num{ margin-bottom:0; }
/* 刷新按钮（图片没加载出来时重新加载本题） */
.qf-reload{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:999px; cursor:pointer;
  border:1.5px solid #E3E9F5; background:#fff; color:#5A6474;
  font-size:13px; font-weight:700; font-family:inherit;
  transition:all .18s;
}
.qf-reload:hover{ border-color:#B9CCFF; color:var(--brand); background:var(--brand-soft); }
.qf-reload:active{ transform:scale(.96); }
.qf-reload svg{ width:14px; height:14px; }
.qf-reload.is-busy svg{ animation:qfSpin .7s linear infinite; }
@keyframes qfSpin{ to{ transform:rotate(360deg); } }
/* 每张题目图片右上角的单独刷新按钮（只重载这一张，不动整题） */
.img-rl-wrap{ position:relative; display:inline-block; max-width:100%; line-height:0; }
.img-rl-wrap > img{ max-width:100%; height:auto; }
.img-rl-btn{
  position:absolute; top:5px; right:5px; z-index:4;
  width:26px; height:26px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px; cursor:pointer;
  border:1px solid rgba(21,63,198,.16);
  background:rgba(255,255,255,.92); color:#153FC6;
  box-shadow:0 4px 12px -6px rgba(14,42,110,.55);
  opacity:.92; transition:all .18s;
}
.img-rl-btn:hover{ background:#153FC6; color:#fff; border-color:#153FC6; transform:scale(1.06); }
.img-rl-btn:active{ transform:scale(.94); }
.img-rl-btn svg{ width:14px; height:14px; }
.img-rl-btn.is-busy svg{ animation:qfSpin .7s linear infinite; }
/* 小图：按钮改为横排在图片前面，避免遮挡 */
.img-rl-wrap.is-small{ display:inline-flex; align-items:center; gap:5px; vertical-align:middle; line-height:1; }
.img-rl-wrap.is-small .img-rl-btn{
  position:static; width:20px; height:20px; flex:none; opacity:.85;
  border-radius:6px; box-shadow:0 2px 6px -4px rgba(14,42,110,.5);
}
.img-rl-wrap.is-small .img-rl-btn svg{ width:12px; height:12px; }

.qf-overlay{
  position:fixed; inset:0; z-index:3000;
  background:rgba(12,22,48,.55); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.qf-sheet{
  width:100%; max-width:580px; max-height:88vh; overflow-y:auto;
  background:#fff; border-radius:18px; padding:24px;
  box-shadow:0 30px 70px -20px rgba(9,20,54,.45);
  animation:qfIn .22s ease-out;
}
@keyframes qfIn{ from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:none; } }
.qf-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px; }
.qf-head h3{ margin:0; font-size:19px; font-weight:800; color:#1B2434; }
.qf-meta{ margin:4px 0 0; font-size:12.5px; color:#8A93A3; }
.qf-x{
  flex:0 0 auto; width:32px; height:32px; border:0; border-radius:9px;
  background:#F2F5FA; color:#8A93A3; font-size:15px; cursor:pointer;
}
.qf-x:hover{ background:#E7ECF5; color:#5A6474; }
.qf-praise{
  display:flex; gap:11px; align-items:flex-start;
  background:var(--brand-soft); border:1px solid #D5E1FF; border-radius:12px;
  padding:12px 14px; margin-bottom:16px;
}
.qf-praise .medal{ font-size:22px; line-height:1.2; }
.qf-praise b{ display:block; font-size:14px; color:var(--brand-ink); margin-bottom:2px; }
.qf-praise p{ margin:0; font-size:12.5px; line-height:1.6; color:#5A6474; }
.qf-shotwrap{ margin-bottom:16px; }
.qf-shot{
  width:100%; max-height:230px; object-fit:contain; object-position:left top;
  border:1px solid var(--m-line,#E9EDF4); border-radius:11px; background:#F8FAFF;
}
.qf-shotload{ font-size:12.5px; color:#8A93A3; padding:22px; text-align:center;
  border:1px dashed #D5DEEC; border-radius:11px; background:#F8FAFF; }
.qf-label{ font-size:13px; font-weight:800; color:#3A4354; margin:0 0 9px; }
.qf-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.qf-tag{
  padding:6px 14px; border-radius:999px; cursor:pointer; font-family:inherit;
  border:1.5px solid #E3E9F5; background:#fff; color:#5A6474;
  font-size:12.5px; font-weight:700; transition:all .15s;
}
.qf-tag:hover{ border-color:#B9CCFF; color:var(--brand); }
.qf-tag.on{ background:var(--brand); border-color:var(--brand); color:#fff; }
.qf-note{
  width:100%; box-sizing:border-box; min-height:76px; resize:vertical;
  padding:11px 13px; border:1.5px solid #E3E9F5; border-radius:11px;
  font:14px/1.6 inherit; color:#1B2434; outline:none; background:#FCFDFF;
}
.qf-note:focus{ border-color:var(--brand-2); box-shadow:0 0 0 3px rgba(59,91,219,.12); }
.qf-submit{
  width:100%; margin-top:14px; padding:12px; border:0; border-radius:12px;
  background:linear-gradient(118deg,#0F2FA0,#3B5BDB); color:#fff;
  font-size:15px; font-weight:800; font-family:inherit; cursor:pointer;
  box-shadow:0 12px 24px -12px rgba(21,63,198,.7);
}
.qf-submit:hover{ filter:brightness(1.07); }
.qf-submit:active{ transform:scale(.98); }
.qf-submit:disabled{ opacity:.6; cursor:default; transform:none; }
.qf-tip{ margin:10px 0 0; font-size:12px; color:#9AA3B2; text-align:center; }
.qf-done{ text-align:center; padding:8px 0 4px; }
.qf-done .pop{ font-size:44px; line-height:1; }
.qf-done h3{ margin:12px 0 6px; font-size:19px; font-weight:800; color:#1B2434; }
.qf-done p{ margin:0; font-size:13.5px; line-height:1.7; color:#5A6474; }
.qf-err{ margin:10px 0 0; font-size:12.5px; color:#E5484D; text-align:center; }