/* ============================================================
   兩岸知識刷題 · 前台樣式
   嵌入 civiclab 網站內頁時，沿用橘色導覽、米色內容帶、綠色標題的視覺語言。
   ============================================================ */
:root {
  --q-primary: #ff8500;
  --q-primary-dark: #c86500;
  --q-primary-soft: #fff1d7;
  --q-accent: #6f8f45;
  --q-accent-dark: #4d6f32;
  --q-accent-soft: #edf4e5;
  --q-brown: #8a4b17;
  --q-brown-soft: #fff4dc;
  --q-blue: #2f78a8;
  --q-blue-soft: #edf6fb;
  --q-ok: #4f8d32;
  --q-ok-bg: #eef7e9;
  --q-no: #cf4050;
  --q-no-bg: #fff0f2;
  --q-ink: #25291f;
  --q-sub: #64685d;
  --q-muted: #6e7166;
  --q-line: #ded7c7;
  --q-line-strong: #f2a12b;
  --q-bg: #f4f4f1;
  --q-card: #ffffff;
  --q-card-soft: #fbf6ec;
  --q-shadow: 0 8px 24px rgba(96, 74, 38, .08);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html.q-embedded {
  overflow-x: hidden;
}
html.q-iframe-fit,
html.q-iframe-fit body {
  overflow-x: hidden;
  overflow-y: hidden;
}
body {
  background: var(--q-bg);
  color: var(--q-ink);
  font-family: "Microsoft JhengHei", "PingFang TC", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.68;
  padding: 12px 14px;
  font-size: 17px;
}
button, input, select, textarea { font-family: inherit; }
/* 鍵盤操作焦點外框：明顯橘色框，滑鼠點擊不顯示（只在鍵盤聚焦時） */
:focus-visible { outline: 3px solid rgba(255, 133, 0, .6); outline-offset: 2px; }
.q-opt:focus-visible, .q-connect-item:focus-visible, .q-order-item:focus-visible { outline-offset: 1px; }
#q-app {
  width: min(100%, 1080px);
  margin: 0 auto;
}

.q-card {
  background: var(--q-card);
  border: 1px solid #ebe5d7;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(96, 74, 38, .05);
  overflow: hidden;
}

.q-head {
  position: relative;
  background: #fff;
  color: var(--q-ink);
  padding: 13px 22px 12px;
  border-top: 6px solid var(--q-primary);
  border-bottom: 1px solid #eee5d6;
}
.q-head::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  width: 28%;
  height: 1px;
  background: var(--q-primary);
}
.q-head h1 {
  margin: 0;
  color: var(--q-accent-dark);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0;
}
.q-head > p,
.q-head-top + p {
  margin: 3px 0 0;
  color: var(--q-sub);
  font-size: 14.5px;
}
.q-bar {
  height: 6px;
  background: #f1eadc;
  border-radius: 99px;
  margin-top: 10px;
  overflow: hidden;
}
.q-bar > i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--q-primary), #f7b33f);
  transition: width .35s ease;
}
.q-body {
  padding: 20px 24px 22px;
}

/* 開始畫面 */
.q-start-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-bottom: 18px;
}
.q-start-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  background: var(--q-accent-soft);
  color: var(--q-accent-dark);
  border: 1px solid #cadbb9;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 8px;
}
.q-start-title {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  color: var(--q-accent-dark);
}
.q-start-copy {
  margin: 6px 0 0;
  color: var(--q-sub);
  max-width: 640px;
}
.q-start-badge {
  min-width: 116px;
  text-align: center;
  background: var(--q-brown-soft);
  border: 1px solid #f3d39c;
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--q-brown);
  font-weight: 800;
}
.q-start-badge b {
  display: block;
  font-size: 28px;
  line-height: 1;
}
.q-start-badge span {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
}

/* 版本切換（高中生版 / 台灣公民版） */
.q-edition {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 16px;
}
.q-edition-btn {
  border: 2px solid #e0d8c7;
  background: #fff;
  border-radius: 10px;
  padding: 11px 14px;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s;
}
.q-edition-btn b { display: block; font-size: 16px; color: var(--q-ink); }
.q-edition-btn span { display: block; font-size: 12.5px; color: var(--q-muted); margin-top: 2px; }
.q-edition-btn.on { border-color: var(--q-primary); background: var(--q-primary-soft); }
.q-edition-btn.on b { color: var(--q-brown); }
/* 特別練習按鈕（時事＝藍、最常被誤解＝綠） */
.q-quick-special { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.q-quick-weak { background: var(--q-accent); border-color: var(--q-accent); }
.q-quick-weak:hover { background: var(--q-accent-dark); box-shadow: 0 8px 18px rgba(111, 143, 69, .24); }
.q-quick-news { background: var(--q-blue); border-color: var(--q-blue); }
.q-quick-news:hover { background: #245f86; box-shadow: 0 8px 18px rgba(47, 120, 168, .22); }
/* 各組「全選/清除」鈕：放在 chips 第一個，虛線外框，與該組對齊 */
.q-chip-all { border-style: dashed; border-color: #e0a85a; color: var(--q-primary-dark); font-weight: 800; }
.q-chip-all.on { background: var(--q-primary); border-color: var(--q-primary); color: #fff; }

.q-disclaimer {
  background: #fff8eb;
  border: 1px solid #efd6a6;
  color: #7a551e;
  border-radius: 8px;
  padding: 10px 13px;
  font-size: 12.5px;
  line-height: 1.65;
  margin: 0 0 16px;
}
.q-statline {
  margin-top: 12px;
  font-size: 13px;
  text-align: center;
  transition: color .2s;
}
.q-quick-box {
  background: var(--q-card-soft);
  border: 1px solid #edd9b3;
  border-radius: 8px;
  padding: 13px 14px;
  margin: 6px 0;
}
.q-quick-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--q-brown);
  font-size: 13.5px;
  font-weight: 800;
  margin-bottom: 8px;
}
.q-quick-title::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--q-primary);
  box-shadow: inset 0 0 0 5px #fff;
  border: 1px solid #f1b45e;
  flex-shrink: 0;
}
.q-quick-btns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.q-quick {
  min-height: 54px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  border: 1px solid #f1a23b;
  border-radius: 8px;
  padding: 9px 14px;
  cursor: pointer;
  color: #fff;
  background: var(--q-primary);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  text-align: left;
}
.q-quick:hover {
  background: var(--q-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(255, 133, 0, .24);
}
.q-quick:active { transform: translateY(0); }
.q-quick b {
  font-size: 18px;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: 0;
}
.q-quick span {
  font-size: 12px;
  opacity: .95;
}
/* 依主題練習：7 個分類密實排成一列（窄螢幕自動換行） */
.q-topic-row { display: flex; flex-wrap: wrap; gap: 8px; }
.q-topic {
  flex: 1 1 0;
  min-width: 96px;
  border: 1px solid #eba442;
  background: #fff;
  color: var(--q-ink);
  border-radius: 8px;
  padding: 9px 8px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
  white-space: nowrap;
  text-align: center;
}
.q-topic:hover { background: var(--q-primary-soft); border-color: var(--q-primary); transform: translateY(-1px); }
.q-adv-toggle {
  display: block;
  width: 100%;
  text-align: left;
  margin-top: 14px;
  border: 1px solid #e4d8c2;
  background: #fff;
  color: var(--q-brown);
  border-radius: 8px;
  padding: 12px 15px;
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.q-adv-toggle:hover {
  border-color: var(--q-primary);
  background: #fffaf2;
}
.q-adv {
  margin-top: 12px;
  padding-top: 4px;
}
.q-lab {
  color: var(--q-accent-dark);
  font-size: 14.5px;
  font-weight: 800;
  margin: 18px 0 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.q-selectall {
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid #f0ac55;
  color: var(--q-primary-dark);
  background: #fff;
  border-radius: 999px;
  padding: 4px 12px;
  transition: .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.q-selectall:hover,
.q-selectall.on { background: var(--q-primary-soft); }
.q-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.q-chip {
  border: 1px solid #eba442;
  background: #fff;
  border-radius: 999px;
  padding: 8px 15px;
  font-size: 14.5px;
  cursor: pointer;
  color: var(--q-ink);
  transition: .15s;
}
.q-chip:hover {
  background: #fff8ee;
  border-color: var(--q-primary);
}
.q-chip.on {
  background: var(--q-primary);
  border-color: var(--q-primary);
  color: #fff;
  font-weight: 800;
}
.q-start {
  display: block;
  width: 100%;
  margin-top: 20px;
  border: 0;
  background: var(--q-primary);
  color: #fff;
  border-radius: 8px;
  padding: 13px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: .15s;
}
.q-start:hover:not(:disabled) {
  background: var(--q-primary-dark);
  transform: translateY(-1px);
}
.q-start:disabled {
  background: #d8d1c3;
  cursor: not-allowed;
}
.q-foot-note {
  padding: 6px 20px 10px;
  font-size: 11.5px;
  color: #9b9d91;
  text-align: center;
}

/* 題目資訊與材料 */
.q-infobar {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0 0 17px;
}
/* 第一行：怎麼作答（題型醒目＋難度） */
.q-info-action { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.q-typebadge {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 11px;
  background: var(--q-primary-soft);
  border: 1px solid #efd4a4;
  color: var(--q-brown);
}
.q-typebadge .q-tb-ic { font-size: 15px; align-self: center; }
.q-typebadge .q-tb-nm { font-size: 15px; font-weight: 900; letter-spacing: .5px; }
.q-typebadge .q-tb-hint { font-size: 12px; font-weight: 600; color: #a08c66; }
.q-lvbadge { font-size: 12.5px; font-weight: 800; padding: 5px 12px; border-radius: 999px; line-height: 1.4; }
.q-lvbadge.basic { background: #f0f1ea; color: #70756a; }
.q-lvbadge.mid { background: var(--q-blue-soft); color: #28648c; }
.q-lvbadge.adv { background: var(--q-primary-soft); color: var(--q-brown); }
/* 第二行：學什麼（主題＋課本章節，精簡淡色） */
.q-info-ctx { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.q-tag { font-size: 12px; font-weight: 700; padding: 3px 11px; border-radius: 999px; border: 1px solid transparent; line-height: 1.5; white-space: normal; }
.q-tag-cat { background: #fff8ed; border-color: #efd4a4; color: var(--q-brown); }
.q-tag-chap { background: var(--q-blue-soft); border-color: #b9d6e8; color: #28648c; }
.q-pill {
  font-size: 12.5px;
  font-weight: 800;
  border-radius: 999px;
  padding: 4px 11px;
  line-height: 1.45;
  border: 1px solid transparent;
  white-space: nowrap;
}
.q-pill.q-cat {
  background: #fff8ed;
  border-color: #efd4a4;
  color: var(--q-brown);
}
.q-pill.q-code {
  background: #efede7;
  color: #5c5b53;
  font-family: Consolas, "Courier New", monospace;
  font-size: 11.5px;
  font-weight: 600;
}
.q-pill.q-chap {
  background: var(--q-blue-soft);
  border-color: #b9d6e8;
  color: #28648c;
  white-space: normal;
}
.q-pill.q-mc {
  background: var(--q-accent-soft);
  color: var(--q-accent-dark);
  border-color: #c5d9b6;
}
.q-pill.q-lv.basic { background: #f0f1ea; color: #70756a; }
.q-pill.q-lv.mid { background: var(--q-blue-soft); color: #28648c; }
.q-pill.q-lv.adv { background: var(--q-primary-soft); color: var(--q-brown); }

.q-type-single { background: var(--q-primary-soft); border-color: #f2c079; color: var(--q-brown); }
.q-type-tf { background: #eef3fb; border-color: #bdd4ee; color: #285c86; }
.q-type-multi { background: var(--q-accent-soft); border-color: #c5d9b6; color: var(--q-accent-dark); }
.q-type-order { background: #fff0f4; border-color: #f1becb; color: #8a3150; }
.q-type-match { background: #f4f0ff; border-color: #d0c4ee; color: #57448b; }
.q-type-connect { background: #f3f8e9; border-color: #c7da9d; color: #56721c; }
.q-type-mapclick { background: var(--q-blue-soft); border-color: #b7d8eb; color: var(--q-blue); }
/* 題型標籤（資訊列第一顆，較顯眼） */
.q-pill.q-type { font-size: 13.5px; padding: 5px 13px; font-weight: 800; }

/* 醒目題型橫幅：放在題目正上方，一看就知道題型與怎麼作答 */
.q-typebanner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 9px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  margin: 0 0 13px;
  font-weight: 800;
}
.q-tb-icon { font-size: 19px; line-height: 1; }
.q-tb-name { font-size: 15.5px; }
.q-tb-hint { font-size: 13px; font-weight: 600; opacity: .9; }
.q-tb-hint::before { content: "·"; margin: 0 7px 0 1px; opacity: .55; }
.q-tb-single   { background: var(--q-primary-soft); border-color: #f2c079; color: var(--q-brown); }
.q-tb-tf       { background: #eef3fb; border-color: #bdd4ee; color: #285c86; }
.q-tb-multi    { background: var(--q-accent-soft); border-color: #c5d9b6; color: var(--q-accent-dark); }
.q-tb-order    { background: #fff0f4; border-color: #f1becb; color: #8a3150; }
.q-tb-match    { background: #f4f0ff; border-color: #d0c4ee; color: #57448b; }
.q-tb-connect  { background: #f3f8e9; border-color: #c7da9d; color: #56721c; }
.q-tb-mapclick { background: var(--q-blue-soft); border-color: #b7d8eb; color: var(--q-blue); }

/* 答錯後仍可點其他選項看說明的提示 */
.q-explore-hint {
  font-size: 13px;
  color: var(--q-sub);
  background: #fbfaf6;
  border: 1px dashed #e2dac9;
  border-radius: 8px;
  padding: 8px 12px;
  margin: 6px 0 12px;
}

.q-stim {
  position: relative;
  background: var(--q-brown-soft);
  border: 1px solid #efd9ae;
  border-radius: 8px;
  padding: 15px 17px 15px 19px;
  margin: 3px 0 16px;
  color: #2f3028;
  max-width: 960px;
}
.q-stim::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--q-accent);
  border-radius: 8px 0 0 8px;
}
.q-stim-event::before { background: var(--q-blue); }
.q-stim-event .lbl { color: var(--q-blue); border-color: #c8dcea; }
.q-stim-concept::before { background: var(--q-accent); }
.q-stim-concept .lbl { color: var(--q-accent-dark); border-color: #c9d9b8; }
.q-stim-reading::before { background: var(--q-primary); }
.q-stim-reading .lbl { color: var(--q-brown); border-color: #efd39d; }
.q-stim .lbl {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  color: var(--q-accent-dark);
  background: #fff;
  border: 1px solid #d6c6a8;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 9px;
}
.q-stim-body {
  white-space: normal;
  line-height: 1.75;
  font-size: 17.5px;
  overflow: hidden;
}
.q-stim-body p { margin: 0 0 .65em; }
.q-stim-body p:last-child { margin-bottom: 0; }
.q-stim-src {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(0,0,0,.12);
  font-size: 13px;
  line-height: 1.6;
  color: var(--q-muted, #8c8f82);
}
.q-stim-src a { color: var(--q-brown, #b8791f); text-decoration: underline; word-break: break-all; }
.q-social-card .q-stim-src { border-top-color: rgba(0,0,0,.08); padding: 8px 14px 0; }
.q-stim-body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid #e2d4bd;
}
.q-stim-body img[style*="float: left"],
.q-stim-body img.align-left {
  float: left;
  max-width: 48%;
  margin: 3px 18px 10px 0;
}
.q-stim-body img[style*="float: right"],
.q-stim-body img.align-right {
  float: right;
  max-width: 48%;
  margin: 3px 0 10px 18px;
}
.q-stim-body img:not([style*="float"]) { margin: 8px 0; }
.q-stim-body table {
  border-collapse: collapse;
  width: 100%;
  margin: 10px 0;
  font-size: 15.5px;
  background: #fff;
}
.q-stim-body th,
.q-stim-body td {
  border: 1px solid #d9ccb2;
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.q-stim-body th {
  background: #f2e8d5;
  color: var(--q-brown);
}
.q-stim-body ul,
.q-stim-body ol { margin: 0 0 .65em; padding-left: 22px; }
.q-stim-body a { color: var(--q-blue); }

.q-social-card {
  border: 1px solid #dfd8ca;
  border-radius: 8px;
  overflow: hidden;
  margin: 0 0 20px;
  background: #fff;
  max-width: 920px;
  box-shadow: 0 4px 14px rgba(66, 57, 42, .08);
}
.q-social-header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 16px;
  background: #fbfaf6;
  border-bottom: 1px solid #eee4d2;
}
.q-social-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--q-primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  flex-shrink: 0;
}
.q-social-info { flex: 1; min-width: 0; }
.q-social-name { font-weight: 800; font-size: 14.5px; }
.q-social-meta { font-size: 12px; color: var(--q-sub); margin-top: 1px; }
.q-social-badge {
  background: #fff4d5;
  color: var(--q-brown);
  border: 1px solid #efd091;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}
.q-social-body {
  padding: 17px 18px;
  font-size: 17px;
  line-height: 1.85;
  white-space: pre-line;
}
.q-social-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 16px;
  background: #fbfaf6;
  border-top: 1px solid #eee4d2;
}
.q-social-stats { font-size: 13px; color: var(--q-sub); }
.q-social-actions { font-size: 12.5px; color: #b3ab9b; font-weight: 700; white-space: nowrap; }

/* 讓圖卡題更像「社群／通訊軟體轉傳的訊息」 */
.q-social-wrap { margin: 0 0 20px; }
.q-study-source .q-social-wrap, .q-mat-side .q-social-wrap { margin-bottom: 0; }
.q-social-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 800;
  color: #9a4d12;
  background: #ffeede;
  border: 1px solid #f3c79a;
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 9px;
}
.q-social-card { border-top: 3px solid #06c755; }   /* 通訊軟體般的綠色頂條 */
.q-social-header { background: #f3faf5; border-bottom-color: #dcefe2; }
.q-social-avatar { background: #e3f7ea; }
.q-social-fwd {
  display: inline-block;
  margin-left: 7px;
  font-size: 10.5px;
  font-weight: 800;
  color: #fff;
  background: #06c755;
  border-radius: 4px;
  padding: 1px 6px;
  vertical-align: middle;
}
.q-social-body { position: relative; }

.q-media { margin: 0 0 20px; }
.q-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid #ded4c2;
}
.q-media-inset { max-width: 620px; margin-left: auto; margin-right: auto; }
.q-media-cap {
  font-size: 13px;
  color: var(--q-muted);
  margin-top: 7px;
  text-align: center;
  line-height: 1.6;
}
.q-mat-side {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 0 0 20px;
}
.q-mat-side-main { flex: 1; min-width: 0; }
.q-mat-side-aside { flex: 0 0 39%; max-width: 39%; }
.q-mat-side .q-media,
.q-mat-side .q-stim,
.q-mat-side .q-social-card { margin-bottom: 0; }

.q-study-layout {
  display: grid;
  grid-template-columns: minmax(290px, .86fr) minmax(380px, 1.14fr);
  gap: 18px;
  align-items: start;
}
.q-study-source {
  min-width: 0;
  max-height: min(52vh, 470px);
  overflow: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: #d2bea0 #fbf6ec;
}
.q-study-source::-webkit-scrollbar { width: 8px; }
.q-study-source::-webkit-scrollbar-track { background: #fbf6ec; border-radius: 999px; }
.q-study-source::-webkit-scrollbar-thumb { background: #d2bea0; border-radius: 999px; }
.q-study-source .q-stim,
.q-study-source .q-social-card,
.q-study-source .q-media { margin-bottom: 0; }
.q-study-task {
  min-width: 0;
}
.q-study-task .q-q {
  margin-top: 0;
}

.q-q {
  position: relative;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.52;
  margin: 8px 0 15px;
  padding-left: 16px;
}
.q-q::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35em;
  bottom: .35em;
  width: 4px;
  background: var(--q-primary);
  border-radius: 99px;
}
.q-hint {
  width: fit-content;
  max-width: 100%;
  font-size: 13px;
  color: var(--q-brown);
  background: #fff8ec;
  border: 1px solid #eed5a7;
  border-radius: 999px;
  padding: 4px 11px;
  margin: -6px 0 16px 16px;
}

/* 選項與作答區 */
.q-opt {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  width: 100%;
  text-align: left;
  border: 1px solid #ddd5c5;
  background: #fff;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 9px;
  font-size: 16.5px;
  line-height: 1.6;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .12s;
  color: var(--q-ink);
}
.q-opt:hover:not(:disabled):not(.show-fb) {
  border-color: var(--q-primary);
  background: #fffaf2;
  box-shadow: 0 5px 15px rgba(255, 133, 0, .10);
  transform: translateY(-1px);
}
/* 已揭示說明的選項：游標仍可點(看其他選項)，但保留對錯顏色、不再有 hover 位移 */
.q-opt.show-fb { cursor: pointer; }
.q-opt:disabled { cursor: default; }
.q-opt-key {
  flex-shrink: 0;
  width: 29px;
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  color: var(--q-brown);
  background: var(--q-primary-soft);
  border: 1px solid #efc078;
  margin-top: 1px;
}
.q-opt-single .q-opt-key { border-radius: 50%; }
.q-opt-multi .q-opt-key { border-radius: 6px; }
.q-opt-main { flex: 1; min-width: 0; }
.q-opt-text { display: block; }
.q-opt .mk {
  flex-shrink: 0;
  font-weight: 900;
  font-size: 18px;
  margin-left: 6px;
  line-height: 1.5;
}
.q-opt .fb {
  display: none;
  margin-top: 8px;
  font-size: 14.5px;
  font-weight: 500;
  color: #4f5248;
  line-height: 1.65;
  border-top: 1px dashed #d8ceb9;
  padding-top: 7px;
}
.q-opt.show-fb .fb { display: block; }
.q-opt.sel {
  border-color: var(--q-primary);
  background: #fff6e8;
}
.q-opt.sel .q-opt-key {
  background: var(--q-primary);
  border-color: var(--q-primary);
  color: #fff;
}
.q-opt.ok {
  border-color: var(--q-ok);
  background: var(--q-ok-bg);
  color: #345f20;
  font-weight: 800;
}
.q-opt.ok .q-opt-key {
  background: var(--q-ok);
  border-color: var(--q-ok);
  color: #fff;
}
.q-opt.ok .mk { color: var(--q-ok); }
.q-opt.no {
  border-color: var(--q-no);
  background: var(--q-no-bg);
  color: #a42b3a;
}
.q-opt.no .q-opt-key {
  background: var(--q-no);
  border-color: var(--q-no);
  color: #fff;
}
.q-opt.no .mk { color: var(--q-no); }

.q-tf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.q-tf-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 126px;
  border-radius: 8px;
  padding: 20px 14px 18px;
  border: 2px solid;
  background: #fff;
}
.q-tf-btn .fb {
  display: none;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  margin-top: 8px;
  color: #5b5e54;
  border-top: 1px dashed #ddd2bd;
  padding-top: 7px;
}
.q-tf-btn.show-fb .fb { display: block; }
.q-tf-icon {
  font-size: 38px;
  line-height: 1;
  margin-bottom: 8px;
}
.q-tf-text {
  font-size: 17px;
  font-weight: 900;
}
.q-tf-yes { border-color: #9bc278; color: #366f1f; }
.q-tf-yes .q-tf-icon { color: var(--q-ok); }
.q-tf-yes:hover:not(:disabled):not(.show-fb) { background: #f3faef; border-color: var(--q-ok); }
.q-tf-no { border-color: #e698a3; color: #8c2432; }
.q-tf-no .q-tf-icon { color: var(--q-no); }
.q-tf-no:hover:not(:disabled):not(.show-fb) { background: #fff4f5; border-color: var(--q-no); }
.q-tf-btn:disabled {
  cursor: default;
  transform: none !important;
  box-shadow: none !important;
}
.q-tf-btn.ok { border-color: var(--q-ok); background: var(--q-ok-bg); color: #345f20; }
.q-tf-btn.no { border-color: var(--q-no); background: var(--q-no-bg); color: #a42b3a; }

/* 排序、配對、連線、地圖 */
.q-order-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.q-order-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #ddd5c5;
  border-radius: 8px;
  padding: 12px 14px;
  background: #fff;
  font-size: 16px;
  transition: border-color .15s, background .15s, box-shadow .15s, opacity .15s, transform .15s;
}
.q-order-item[draggable="true"] { cursor: grab; }
.q-order-item[draggable="true"]:hover {
  border-color: var(--q-primary);
  background: #fffaf2;
  box-shadow: 0 4px 14px rgba(255, 133, 0, .10);
}
.q-order-item.dragging { opacity: .45; transform: scale(.98); }
.q-order-item.drag-over {
  border-color: var(--q-primary);
  background: var(--q-primary-soft);
  box-shadow: 0 0 0 3px rgba(255, 133, 0, .14);
}
.q-order-item.ok { border-color: var(--q-ok); background: var(--q-ok-bg); }
.q-order-item.no { border-color: var(--q-no); background: var(--q-no-bg); }
.q-order-item .txt { flex: 1; }
.q-drag-handle {
  color: #c2b9a8;
  font-size: 20px;
  cursor: grab;
  user-select: none;
  flex-shrink: 0;
}
.q-order-num {
  font-size: 13px;
  font-weight: 900;
  color: var(--q-brown);
  background: var(--q-primary-soft);
  border-radius: 999px;
  min-width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.q-order-mark { font-weight: 900; flex-shrink: 0; }
.q-order-item.ok .q-order-mark { color: var(--q-ok); }
.q-order-item.no .q-order-mark { color: var(--q-no); }
.q-order-moves { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; margin-left: auto; }
.q-move {
  width: 30px; height: 22px; line-height: 1;
  border: 1px solid #e1c89e; background: #fff; color: var(--q-brown);
  border-radius: 6px; font-size: 12px; font-weight: 900; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.q-move:hover:not(:disabled) { background: var(--q-primary-soft); border-color: var(--q-primary); }
.q-move:disabled { opacity: .35; cursor: default; }

.q-match-board {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.q-match-slots {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.q-match-slot {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.q-match-label {
  flex: 0 0 35%;
  border: 1px solid #dfd2bb;
  border-radius: 8px;
  padding: 12px 13px;
  background: var(--q-brown-soft);
  color: var(--q-brown);
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
}
.q-match-drop {
  flex: 1;
  min-height: 56px;
  border: 1px dashed #d4c8b5;
  border-radius: 8px;
  background: #fbfaf6;
  display: flex;
  align-items: center;
  padding: 6px;
  transition: .15s;
}
.q-match-drop.drag-over,
.q-match-pool.drag-over {
  border-color: var(--q-primary);
  background: var(--q-primary-soft);
  border-style: solid;
}
.q-match-slot.ok .q-match-label,
.q-match-slot.ok .q-match-drop,
.q-match-chip.ok {
  border-color: var(--q-ok);
  background: var(--q-ok-bg);
  color: #345f20;
}
.q-match-slot.no .q-match-label,
.q-match-slot.no .q-match-drop,
.q-match-chip.no {
  border-color: var(--q-no);
  background: var(--q-no-bg);
  color: var(--q-no);
}
.q-match-placeholder {
  color: #b9ad99;
  font-size: 13px;
  padding: 4px 10px;
}
.q-match-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px;
  border: 1px dashed #d4c8b5;
  border-radius: 8px;
  background: #fbf7ed;
  min-height: 62px;
  transition: .15s;
}
.q-match-pool-done {
  font-size: 14px;
  color: var(--q-ok);
  font-weight: 800;
}
.q-match-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #f0a13b;
  background: #fff;
  color: var(--q-brown);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 800;
  cursor: grab;
  user-select: none;
  transition: .15s;
}
.q-match-chip:hover {
  background: var(--q-primary-soft);
  transform: translateY(-1px);
}
.q-match-chip.dragging { opacity: .4; transform: scale(.96); }
.q-match-chip.selected {
  border-color: var(--q-primary);
  background: var(--q-primary-soft);
  box-shadow: 0 0 0 3px rgba(255, 133, 0, .16);
}
.q-match-chip.placed {
  cursor: grab;
  width: 100%;
  border-radius: 8px;
  justify-content: center;
}
.q-match-correct {
  font-size: 12px;
  color: var(--q-ok);
  margin-top: 4px;
  font-weight: 600;
  text-align: center;
}

.q-connect-board {
  display: flex;
  align-items: stretch;
  gap: 0;
  user-select: none;
  margin-top: 2px;
}
.q-connect-col {
  flex: 0 0 43%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.q-connect-mid {
  flex: 1;
  position: relative;
  min-width: 54px;
}
.q-csvg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.q-connect-item {
  border: 1px solid #ddd5c5;
  border-radius: 8px;
  padding: 11px 13px;
  background: #fff;
  font-size: 15px;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s, box-shadow .15s;
  text-align: center;
}
.q-connect-left .q-connect-item:hover,
.q-connect-right .q-connect-item:hover {
  border-color: var(--q-primary);
  background: #fffaf2;
}
.q-connect-item.selected {
  border-color: var(--q-primary);
  background: var(--q-primary-soft);
  box-shadow: 0 0 0 3px rgba(255, 133, 0, .14);
}
.q-connect-item.connected {
  border-color: #f0b46a;
  background: #fffaf2;
}
.q-connect-item.ok {
  border-color: var(--q-ok);
  background: var(--q-ok-bg);
  color: #345f20;
  font-weight: 800;
  cursor: default;
}
.q-connect-item.no {
  border-color: var(--q-no);
  background: var(--q-no-bg);
  color: var(--q-no);
  cursor: default;
}

/* 地圖資料按需載入中的過場 */
.rq-map-loading {
  margin: 12px 0 4px;
  padding: 26px 16px;
  border: 1px dashed var(--q-line);
  border-radius: 8px;
  background: rgba(0, 0, 0, .02);
  color: #6b6b60;
  font-size: 15px;
  text-align: center;
}

/* 地圖資料按需載入失敗時的提示（正常情況看不到） */
.rq-map-missing {
  margin: 12px 0 4px;
  padding: 14px 16px;
  border: 1px dashed var(--q-no);
  border-radius: 8px;
  background: rgba(207, 64, 80, .06);
  color: var(--q-no);
  font-size: 15px;
  line-height: 1.6;
}

.q-map-wrapper {
  margin: 4px 0 17px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #9fc4d7;
  box-shadow: 0 6px 18px rgba(47, 120, 168, .15);
  background: #9fcfe3;
}
.q-map-svg { display: block; width: 100%; height: auto; }
.q-map-zone { transition: fill .12s; }
.q-map-land { stroke: #b3a47f; }
.q-map-svg:not(.answered) .q-map-zone:hover { fill: rgba(70,140,190,.22); }
.q-map-svg:not(.answered) .q-map-land:hover { fill: #e8cba1; }
.q-map-label {
  font-family: "Microsoft JhengHei", "PingFang TC", sans-serif;
  font-size: 13px;
  fill: #25291f;
  font-weight: 800;
  pointer-events: none;
  paint-order: stroke;
  stroke: #ffffff;
  stroke-width: 3px;
  stroke-linejoin: round;
}
.q-map-label-sea {
  fill: #2f617b;
  font-size: 20px;
  opacity: .78;
}
.q-map-compass {
  font-family: "Microsoft JhengHei", "PingFang TC", sans-serif;
  font-size: 11px;
  fill: var(--q-muted);
}

/* 答後解析 */
.q-exp {
  display: none;
  background: #fffdf8;
  border: 1px solid #e4d8c6;
  border-radius: 8px;
  padding: 0;
  font-size: 15.5px;
  line-height: 1.72;
  color: #33362d;
  margin-top: 16px;
  overflow: hidden;
}
.q-exp.show {
  display: block;
  animation: qfade .25s ease;
}
.q-exp.exp-ok { border-color: #cddfbe; }
.q-exp.exp-no { border-color: #edc5c9; }
.exp-core {
  padding: 15px 17px 16px;
  background: #fffaf2;
  border-left: 5px solid var(--q-primary);
}
.q-exp.exp-ok .exp-core { border-left-color: var(--q-ok); background: #f7fbf3; }
.q-exp.exp-no .exp-core { border-left-color: var(--q-no); background: #fff8f2; }
.exp-status {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 2px 9px;
  margin-bottom: 7px;
  background: #fff;
  border: 1px solid #ead9c0;
  color: var(--q-brown);
  font-size: 12.5px;
  font-weight: 900;
  line-height: 1.5;
}
.q-exp.exp-ok .exp-status {
  border-color: #cbdcbf;
  color: var(--q-ok);
}
.q-exp.exp-no .exp-status {
  border-color: #efc7ca;
  color: var(--q-no);
}
.exp-core b {
  display: block;
  margin-bottom: 2px;
  color: var(--q-ink);
  font-size: 16px;
}
.exp-core em {
  display: block;
  margin-bottom: 7px;
  color: var(--q-muted);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}
.exp-core > span:not(.exp-status) { display: block; }
.exp-followups {
  display: grid;
  gap: 8px;
  padding: 10px 12px 12px;
  background: #fff;
}
.exp-section {
  background: #fff;
  border: 1px solid #e4dbcd;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.72;
  color: #33362d;
  overflow: hidden;
}
.exp-section:last-child { margin-bottom: 0; }
.exp-section summary {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  cursor: pointer;
  list-style: none;
}
.exp-section summary::-webkit-details-marker { display: none; }
.exp-section summary::after {
  content: "+";
  margin-left: auto;
  color: var(--q-muted);
  font-weight: 900;
  line-height: 1.4;
}
.exp-section[open] summary::after { content: "-"; }
.exp-section summary b {
  display: block;
  color: var(--q-ink);
  font-size: 14px;
  line-height: 1.45;
}
.exp-section summary small {
  display: block;
  margin-top: 2px;
  color: var(--q-muted);
  font-size: 12px;
  font-weight: 900;
}
.exp-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff8ed;
  border: 1px solid #dfcfb7;
  color: var(--q-brown);
  font-size: 12px;
  font-weight: 900;
  margin-top: 1px;
}
.exp-section > div {
  padding: 0 13px 13px 45px;
  color: #4b4f46;
}
.exp-section[open] {
  background: #fffdf9;
}
.q-compare {
  margin: 12px;
  border: 1px solid #c8dcea;
  background: #f6fbff;
  border-radius: 8px;
  padding: 12px;
}
.q-compare-title {
  font-size: 14px;
  font-weight: 900;
  color: var(--q-blue);
  margin-bottom: 10px;
}
.q-compare-scroll { overflow-x: auto; }
.q-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}
.q-compare-table th,
.q-compare-table td {
  border: 1px solid #e0e7ed;
  padding: 9px 12px;
  text-align: left;
  line-height: 1.6;
  vertical-align: top;
}
.q-compare-table thead th {
  background: #e9f3fa;
  color: var(--q-blue);
  font-weight: 900;
}
.q-compare-table tbody th {
  background: #f7f9f6;
  color: #33362d;
  font-weight: 900;
  white-space: nowrap;
}
.q-compare-table tbody td { color: #3a3e34; }

/* 頁首、底欄、按鈕、結果 */
.q-head-top {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}
.q-head-top h1 {
  margin: 0;
  color: var(--q-accent-dark);
  font-size: 24px;
  letter-spacing: 0;
}
.q-restart-btn {
  border: 1px solid #f0b15d;
  background: #fff;
  color: var(--q-primary-dark);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 12.5px;
  font-weight: 900;
  cursor: pointer;
  transition: .15s;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}
.q-restart-btn:hover {
  background: var(--q-primary-soft);
}
.q-back-btn {
  border: 1px solid var(--q-line);
  background: #fff;
  color: var(--q-blue);
  border-radius: 999px;
  padding: 6px 15px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  transition: .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.q-back-btn:hover { background: var(--q-blue-soft); border-color: var(--q-blue); }
.q-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(38, 29, 16, .52);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: qfade .18s ease;
}
.q-modal {
  background: #fff;
  border-radius: 8px;
  padding: 28px 24px 22px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: 0 16px 48px rgba(0,0,0,.24);
}
.q-modal-icon { font-size: 42px; margin-bottom: 8px; }
.q-modal h3 { margin: 0 0 8px; font-size: 20px; }
.q-modal p {
  color: var(--q-sub);
  margin: 0 0 20px;
  font-size: 15px;
}
.q-modal-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.q-foot {
  position: sticky;
  bottom: 0;
  z-index: 30;
  padding: 12px 22px;
  border-top: 1px solid #eee5d6;
  display: grid;
  grid-template-columns: minmax(116px, 1fr) auto minmax(116px, 1fr);
  align-items: center;
  gap: 12px;
  background: rgba(255, 253, 248, .96);
  box-shadow: 0 -8px 18px rgba(96, 74, 38, .06);
  backdrop-filter: blur(7px);
}
.q-score {
  grid-column: 1;
  justify-self: start;
  font-size: 14px;
  color: var(--q-sub);
  white-space: nowrap;
}
.q-score b {
  color: var(--q-primary-dark);
  font-size: 18px;
}
.q-streak {
  grid-column: 3;
  justify-self: end;
  font-size: 14px;
  font-weight: 900;
  color: var(--q-primary-dark);
  white-space: nowrap;
}
#q-action {
  grid-column: 2;
  justify-self: center;
  min-width: 154px;
}
.q-btn {
  border: none;
  background: var(--q-primary);
  color: #fff;
  border-radius: 999px;
  padding: 10px 24px;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  transition: background .15s, transform .1s;
  white-space: nowrap;
}
.q-btn:hover:not(:disabled) {
  background: var(--q-primary-dark);
  transform: translateY(-1px);
}
.q-btn:disabled {
  background: #d7d0c2;
  cursor: not-allowed;
}
.q-ghost {
  background: #fff;
  color: var(--q-primary-dark);
  border: 1px solid #f0b15d;
}
.q-ghost:hover:not(:disabled) {
  background: var(--q-primary-soft);
}

.q-result {
  text-align: center;
  padding: 28px 24px 22px;
}
.q-result .big {
  font-size: 56px;
  margin-bottom: 6px;
  display: block;
}
.q-result h2 {
  color: var(--q-ink);
  font-size: 23px;
  font-weight: 900;
  margin: 4px 0 8px;
}
.q-round-scope {
  display: inline-block;
  margin: 0 0 14px;
  padding: 4px 13px;
  background: #f1efe9;
  color: var(--q-sub);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
}
.q-result-note {
  color: var(--q-sub);
  margin: 10px 0 0;
  font-size: 14.5px;
}
.q-review {
  text-align: left;
  margin: 22px 0 6px;
}
.q-review h3 {
  font-size: 15px;
  color: var(--q-no);
  margin: 0 0 10px;
}
.q-rv {
  background: #fff8ed;
  border: 1px solid #efd9b3;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
  font-size: 14px;
}
.q-rv .stm { color: var(--q-muted); margin-bottom: 6px; }
.q-rv .qq { font-weight: 900; margin-bottom: 6px; }
.q-rv .aa { color: var(--q-ok); }
.q-rv .ee { color: #5d6258; margin-top: 4px; }
.q-resbtns {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 22px;
  flex-wrap: wrap;
}

/* 動畫 */
@keyframes qfade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-8px); }
  70% { transform: translateY(-4px); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
@keyframes pop {
  0% { transform: scale(.2); opacity: 0; }
  65% { transform: scale(1.12); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes streak-pop {
  0% { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.animate-bounce { animation: bounce .45s ease; }
.animate-shake { animation: shake .4s ease; }
.animate-pop { animation: pop .55s cubic-bezier(.34,1.56,.64,1); }
.streak-pop { animation: streak-pop .35s ease; }

@media (max-width: 760px) {
  body { padding: 12px; }
  .q-head { padding: 16px 18px 14px; }
  .q-body { padding: 20px 18px 22px; }
  .q-start-intro {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .q-start-badge {
    justify-self: start;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  .q-start-badge b { font-size: 24px; }
  .q-quick-btns { grid-template-columns: repeat(3, 1fr); }
  .q-quick { min-height: 52px; padding: 8px 10px; }
  .q-quick span { font-size: 11px; }
  .q-edition { grid-template-columns: 1fr; }
  .q-quick-special { grid-template-columns: 1fr; }
  .q-q { font-size: 21px; }
  .q-mat-side {
    flex-direction: column;
    gap: 0;
  }
  .q-study-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .q-study-source {
    max-height: 260px;
    border: 1px solid #ecd9b5;
    border-radius: 8px;
    padding: 0;
  }
  .q-study-source .q-stim,
  .q-study-source .q-social-card,
  .q-study-source .q-media {
    border-radius: 8px;
    border: 0;
  }
  .q-mat-side-aside {
    flex-basis: auto;
    max-width: 100%;
  }
  .q-mat-side .q-media { margin: 0 0 14px; }
  .q-media-inset { max-width: 100%; }
  .exp-followups { padding: 9px 10px 10px; }
  .exp-section > div { padding-left: 13px; }
}

@media (max-width: 520px) {
  body { padding: 8px; font-size: 16px; }
  .q-card { border-radius: 8px; }
  .q-head h1,
  .q-head-top h1 { font-size: 21px; }
  .q-head::after { width: 46%; }
  .q-body { padding: 17px 14px 20px; }
  .q-start-title { font-size: 22px; }
  .q-disclaimer { font-size: 12px; }
  .q-stim {
    padding: 15px 15px 15px 17px;
  }
  .q-stim-body,
  .q-social-body { font-size: 16px; line-height: 1.75; }
  .q-stim-body img[style*="float: left"],
  .q-stim-body img[style*="float: right"],
  .q-stim-body img.align-left,
  .q-stim-body img.align-right {
    float: none;
    max-width: 100%;
    margin: 8px 0;
  }
  .q-q {
    font-size: 19px;
    padding-left: 12px;
  }
  .q-hint {
    border-radius: 8px;
    margin-left: 0;
  }
  .q-opt {
    font-size: 15.5px;
    padding: 12px 12px;
    gap: 10px;
  }
  .q-opt-key {
    width: 26px;
    height: 26px;
    font-size: 13px;
  }
  .q-tf-row {
    gap: 10px;
  }
  .q-tf-btn {
    min-height: 108px;
    padding: 16px 10px 14px;
  }
  .q-tf-icon { font-size: 31px; }
  .q-match-slot {
    flex-direction: column;
    gap: 6px;
  }
  .q-match-label {
    flex-basis: auto;
    font-size: 14px;
  }
  .q-connect-board { gap: 4px; }
  .q-connect-col { flex-basis: 40%; }
  .q-connect-mid { min-width: 48px; }
  .q-connect-item {
    font-size: 13px;
    padding: 9px 8px;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .q-map-label { font-size: 11px; }
  .q-foot {
    grid-template-columns: 1fr 1fr;
    padding: 10px 12px 12px;
    gap: 8px 10px;
  }
  .q-score {
    grid-column: 1;
    grid-row: 1;
  }
  .q-streak {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
  #q-action {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
  }
  .q-score,
  .q-streak { font-size: 12.5px; }
  .q-btn {
    padding: 10px 16px;
    font-size: 14px;
  }
  .q-compare-table,
  .q-compare-table thead,
  .q-compare-table tbody,
  .q-compare-table tr,
  .q-compare-table th,
  .q-compare-table td {
    display: block;
  }
  .q-compare-table thead { display: none; }
  .q-compare-table tbody tr {
    border: 1px solid #d8e4f2;
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 4px 6px;
    background: #fff;
  }
  .q-compare-table tbody th {
    background: none;
    border: none;
    padding: 6px 6px 2px;
    font-size: 14.5px;
  }
  .q-compare-table tbody td {
    border: none;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 6px;
  }
  .q-compare-table tbody td::before {
    content: attr(data-label);
    font-weight: 900;
    color: var(--q-blue);
    flex-shrink: 0;
  }
}

/* ═══════ 開始畫面：題數分段 + 統一入口（風格一致） ═══════ */
.q-countseg { display: flex; gap: 8px; margin: 4px 0; }
.q-seg {
  flex: 1 1 0; min-width: 0;
  padding: 11px 8px;
  border: 1.5px solid #e6c389;
  background: #fff; color: var(--q-brown);
  border-radius: 10px;
  font-size: 15px; font-weight: 800;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
}
.q-seg:hover { background: var(--q-primary-soft); transform: translateY(-1px); }
.q-seg.on { background: var(--q-primary); border-color: var(--q-primary); color: #fff; }
/* ── 🚀 快速開始群組框（與「進階自訂」對比；改名 q-quickbox 避開既有 .q-quick 元件）── */
.q-quickbox {
  display: block;
  border: 1.5px solid #efd9b0;
  background: #fffdf8;
  border-radius: 14px;
  padding: 2px 16px 16px;
  margin-top: 8px;
}
.q-grouptitle {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
  font-size: 17px; font-weight: 900; color: var(--q-brown);
  margin: 15px 0 2px;
}
.q-grouptitle span { font-size: 12.5px; font-weight: 600; color: var(--q-muted); }
/* 範圍列：可換行；台灣公民版稍寬，選中時用藍色與年級（橘）區隔 */
.q-rangeseg { flex-wrap: wrap; }
.q-rangeseg .q-seg { flex: 1 1 92px; }
.q-rangeseg .q-seg-all { flex: 1 1 156px; }
.q-rangeseg .q-seg-all.on { background: #3a7ca5; border-color: #3a7ca5; color: #fff; }
/* 進階自訂：對比樣式 */
.q-adv-toggle span { font-weight: 600; font-size: 12.5px; color: var(--q-muted); margin-left: 6px; }
.q-adv-note {
  font-size: 13px; color: #7c715c;
  background: #f6f3ec; border-radius: 8px;
  padding: 8px 12px; margin: 6px 0 2px;
}
.q-entry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
  gap: 9px; margin: 4px 0;
}
.q-entry {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 13px;
  border: 1.5px solid #e7d6b6;
  background: #fff; border-radius: 10px;
  cursor: pointer; text-align: left;
  transition: background .15s, border-color .15s, transform .12s, box-shadow .12s;
}
.q-entry:hover {
  background: var(--q-primary-soft);
  border-color: var(--q-primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(255, 133, 0, .16);
}
.q-entry-ic { font-size: 20px; flex: 0 0 auto; }
.q-entry-name { font-size: 15px; font-weight: 800; color: var(--q-ink); }

/* ═══════ 計分：浮動 +N 與結算統計卡 ═══════ */
.q-score { position: relative; }
.q-score-pop {
  position: absolute; left: 100%; top: -2px; margin-left: 8px;
  color: var(--q-ok); font-weight: 900; font-size: 16px; white-space: nowrap;
  pointer-events: none; animation: qscorepop .9s ease forwards;
}
@keyframes qscorepop {
  0% { opacity: 0; transform: translateY(6px) scale(.8); }
  25% { opacity: 1; transform: translateY(0) scale(1.1); }
  100% { opacity: 0; transform: translateY(-14px) scale(1); }
}
.q-result-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin: 0 auto; max-width: 430px;
}
.q-rstat {
  background: #faf9f6;
  border: 1px solid #ece8de;
  border-radius: 12px;
  padding: 13px 8px; text-align: center;
}
.q-rstat .n { display: block; font-size: 24px; font-weight: 900; color: var(--q-ink); line-height: 1.1; }
.q-rstat .l { display: block; margin-top: 4px; font-size: 12px; color: var(--q-muted); font-weight: 700; }
.q-rstat-score .n { color: var(--q-primary-dark); }   /* 分數＝唯一橘色強調 */
/* 續做未完成練習提示 */
.q-resume { text-align: center; padding: 36px 24px; }
.q-resume-ic { font-size: 44px; margin-bottom: 6px; }
.q-resume h2 { font-size: 20px; font-weight: 900; color: var(--q-ink); margin: 4px 0 10px; }
.q-resume p { color: var(--q-sub); margin: 0 0 20px; font-size: 15px; line-height: 1.7; }
.q-resume p b { color: var(--q-primary-dark); }
.q-resume-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ═══════ 三層解析：全展開卡片（不需點開），素養題滿版顯示 ═══════ */
.exp-top {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; font-size: 14px; font-weight: 800;
  border-bottom: 1px solid #ece1cf;
}
.q-exp.exp-ok .exp-top { background: #f3f9ec; }
.q-exp.exp-no .exp-top { background: #fdf1f1; }
.exp-badge {
  display: inline-flex; flex: 0 0 auto;
  padding: 2px 11px; border-radius: 999px;
  background: #fff; font-size: 13px; font-weight: 900;
}
.q-exp.exp-ok .exp-badge { color: var(--q-ok); border: 1px solid #cbdcbf; }
.q-exp.exp-no .exp-badge { color: var(--q-no); border: 1px solid #efc7ca; }
.exp-top-msg { color: var(--q-sub); font-weight: 700; }
.exp-cards { display: grid; gap: 10px; padding: 12px 14px 14px; background: #fff; }
.exp-card {
  border: 1px solid #e6ddcd; border-left: 5px solid #d9c9a9;
  border-radius: 8px; background: #fffdf8; overflow: hidden;
}
.exp-card-h {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 13px 6px;
  font-size: 14.5px; font-weight: 900; color: var(--q-ink);
}
.exp-ic { font-size: 16px; }
.exp-card-b { padding: 0 13px 12px; font-size: 15px; line-height: 1.75; color: #41463c; }
.exp-card-core { border-left-color: var(--q-primary); background: #fffaf1; }
.q-exp.exp-ok .exp-card-core { border-left-color: var(--q-ok); background: #f7fbf3; }
.exp-card-core .exp-card-h { font-size: 15.5px; }
.exp-card-myth { border-left-color: #e0a93f; }
.exp-card-think { border-left-color: var(--q-blue); }

/* ═══════ 結算頁加值：錯題檢視 / 表現分析 / 成績單按鈕 ═══════ */
.q-result-actions {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin: 18px 0 4px;
}
.q-btn2 {
  background: #fff; border: 1.5px solid #d9c7a8; color: #6b5527;
  border-radius: 999px; padding: 8px 16px; font-size: 13.5px; font-weight: 800;
  cursor: pointer; transition: all .15s;
}
.q-btn2:hover { background: #fff6e6; border-color: var(--q-primary); }
.q-btn2.on { background: var(--q-primary); border-color: var(--q-primary); color: #fff; }
#q-extra { text-align: left; }
.q-extra-box {
  margin: 14px 0 2px; padding: 16px; background: #fbfaf6;
  border: 1px solid #e7e1d2; border-radius: 12px;
}
.q-extra-h { font-size: 15px; font-weight: 900; color: var(--q-ink); margin-bottom: 12px; }
.q-allright { text-align: center; color: var(--q-ok); font-weight: 800; margin: 6px 0; }

/* 錯題檢視卡 */
.q-rvcard { background: #fff; border: 1px solid #ece6d8; border-radius: 10px; padding: 13px 14px; margin-bottom: 12px; }
.q-rvtags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.q-rvtag { font-size: 11.5px; font-weight: 700; color: var(--q-sub); background: #f0eee8; border-radius: 999px; padding: 2px 9px; }
.q-rvstim { color: var(--q-muted); font-size: 13.5px; margin-bottom: 6px; }
.q-rvq { font-weight: 900; margin-bottom: 8px; font-size: 15px; }
.q-rvyour { color: var(--q-no); font-weight: 700; margin-bottom: 3px; }
.q-rvans { color: var(--q-ok); font-weight: 700; margin-bottom: 8px; }

/* 表現分析長條 */
.q-ansec { margin-bottom: 16px; }
.q-anh { font-size: 13.5px; font-weight: 800; color: var(--q-sub); margin-bottom: 7px; }
.q-anrow { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.q-anlb { flex: 0 0 84px; font-size: 12.5px; font-weight: 700; color: #41463c; text-align: right; }
.q-anbar { flex: 1; height: 14px; background: #ece6d8; border-radius: 999px; overflow: hidden; }
.q-anfill { display: block; height: 100%; border-radius: 999px; transition: width .4s; }
.q-anval { flex: 0 0 76px; font-size: 12px; color: var(--q-muted); font-weight: 700; }
.q-ansug { margin-top: 12px; font-size: 13.5px; color: #41463c; background: #fffaf1; border: 1px solid #efd9b3; border-radius: 8px; padding: 10px 12px; }

/* ═══════ 成績單／考卷（螢幕） ═══════ */
.q-exam-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.q-exam-opt { font-size: 13px; font-weight: 700; color: #5d6258; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.q-exam-hint { font-size: 12.5px; color: var(--q-muted); background: #f4f7fb; border: 1px solid #d6e3ef; border-radius: 8px; padding: 9px 12px; margin-bottom: 14px; line-height: 1.6; }
/* 整份考卷：中文＝標楷體、英數＝Times New Roman（font-family 先列 Times，拉丁/數字用它，中文自動 fallback 到標楷體） */
.q-paper { position: relative; background: #fff; border: 1px solid #d8d2c4; border-radius: 8px; padding: 16px 18px; color: #000; text-align: left; font-family: "Times New Roman","DFKai-SB","標楷體","BiauKai","KaiTi",serif; }
/* 右上角手寫紅色大分數（可蓋住題目，懷舊老師打分感）：更大、細長 */
.q-exam-score { position: absolute; top: 2px; right: 24px; z-index: 5; font-family: "Segoe Script","Bradley Hand","Comic Sans MS",cursive; font-size: 90px; font-weight: 400; letter-spacing: -4px; color: #d61f1f; line-height: 1; transform: rotate(-8deg) scale(0.8, 1.68); transform-origin: top right; pointer-events: none; }
/* 卷頭：標題＋說明同一行、純文字、不雕飾 */
.q-paper-hd3 { padding-bottom: 0; margin-bottom: 14px; }
.q-paper-title3 { text-align: center; font-size: 17px; font-weight: 900; letter-spacing: 1px; margin: 0; color: #000; }
.q-paper-note { font-size: 12.5px; font-weight: 400; letter-spacing: 0; color: #000; }
.q-paper-info { text-align: center; font-size: 12px; color: #000; margin-bottom: 6px; }
.q-paper-fields { display: flex; justify-content: center; align-items: flex-end; gap: 7px 16px; flex-wrap: wrap; font-size: 13px; font-weight: 700; color: #000; }
.q-ff { display: inline-flex; align-items: flex-end; gap: 4px; white-space: nowrap; }
/* 填寫欄：黑底線維持，填入的字＝藍色原子筆手寫風；數字用 Segoe Script、中文用霞鶩文楷 TC（手寫楷，比標楷體更像人寫），載不到退回標楷體 */
.q-fin { border: none; border-bottom: 1px solid #000; background: transparent; font-family: "Segoe Script","Bradley Hand","LXGW WenKai TC","DFKai-SB","標楷體",cursive; font-size: 15.5px; line-height: 1.4; padding: 0 4px 1px; color: #1733b8; text-align: center; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.q-fin:focus { outline: none; border-bottom-color: var(--q-primary); }
.q-fin-xs { width: 38px; } .q-fin-md { width: 96px; } .q-fin-lg { width: 150px; }
/* 兩欄題目區（欄距縮小、更密）。大題之間直接往下接、不另起欄 → 列印用 column-fill:auto 依序填滿 */
.q-paper-body { column-count: 2; column-gap: 18px; }
.q-sec { margin-top: 5px; break-inside: auto; }
.q-sec:first-child { margin-top: 0; }
/* 大題標題：去掉黑色粗邊線，乾淨粗體（全黑、無彩色） */
.q-sec-h { font-size: 13.5px; font-weight: 900; color: #000; margin-bottom: 2px; break-after: avoid; }
.q-paper-qs { list-style: none; margin: 0; padding: 0; }
/* 每題：[紅✓/✗] 題號.（藍筆作答） │ 內容欄（題幹＋選項＋圖＋配對＋解析全部對齊題幹左緣）。
   續行與選項都不會掉到題號／括號下方（內容自成 flex 欄）。 */
.q-pq { display: block; padding: 1px 0; break-inside: avoid; }
.q-pq-line { display: flex; align-items: baseline; font-size: 13px; line-height: 1.42; color: #000; }
/* 批改紅字：題號最左側、固定窄欄 */
.q-pq-mk { flex: 0 0 auto; width: 1.05em; text-align: center; font-weight: 900; font-size: 13.5px; color: #d61f1f; margin-right: 2px; }
/* 括號作答＋題號（先括號、再題號）：不換行，作為前綴；一般字體（不刻意加粗） */
.q-pq-head { flex: 0 0 auto; white-space: nowrap; font-weight: 400; color: #000; margin-right: 3px; }
/* 作答符號固定寬度置中 → 不論 ○／✕／數字，括號寬度一致，題號才會對齊 */
.q-pq-head .ans { display: inline-block; width: 1.35em; text-align: center; vertical-align: baseline; color: #1733b8; font-family: "Segoe Script","Bradley Hand","Comic Sans MS",cursive; font-weight: 700; font-size: 16px; }
/* 內容欄：佔滿剩餘寬度，題幹／選項／配對／解析皆對齊此欄左緣（懸掛縮排） */
.q-pq-main { flex: 1 1 auto; min-width: 0; }
.q-pq-q { font-weight: 400; color: #000; }
.q-pq-opts { margin: 1px 0 0; font-size: 12px; color: #000; }
.q-pq-opts .opt { margin-right: 10px; }
.q-pq-pairs { margin: 2px 0 0; font-size: 12px; color: #000; line-height: 1.55; }
.q-pq-pairs b { font-weight: 800; }
.q-pq-pairs ul { list-style: none; margin: 1px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 16px; }
.q-pq-pairs li { white-space: nowrap; }
.q-pq-key { font-size: 12px; color: #000; font-weight: 700; margin: 1px 0 0; }
.q-pq-exp { font-size: 10.5px; color: #000; margin: 1px 0 0; line-height: 1.4; }
/* 地圖判讀：靜態地圖（已標正解） */
.q-pq-mapwrap { margin: 3px 0 2px; break-inside: avoid; }
.q-pq-map { display: block; width: 100%; max-width: 220px; height: auto; border: 1px solid #cdd9e2; border-radius: 6px; }
.q-pq-map .q-map-label { fill: #2c4654; font-weight: 700; }
/* 圖表素材（含表格／圖片）：直接呈現於考卷 */
.q-pq-chart { margin: 3px 0 2px; font-size: 12px; color: #000; break-inside: avoid; }
.q-pq-chart table { border-collapse: collapse; margin: 2px 0; width: auto; max-width: 100%; }
.q-pq-chart th, .q-pq-chart td { border: 1px solid #444; padding: 2px 7px; font-size: 11.5px; text-align: center; }
.q-pq-chart th { background: #f0f0f0; font-weight: 700; }
.q-pq-chart img, .q-pq-chart svg { max-width: 100%; height: auto; }
/* 社群貼文素材：仿對話框卡片（黑白、留言各自成一個對話框） */
.q-pq-social { margin: 3px 0 5px; border: 1px solid #555; border-radius: 9px; overflow: hidden; font-size: 11.5px; color: #000; break-inside: avoid; }
.q-pq-social-hd { background: #ececec; padding: 2px 9px; font-weight: 700; font-size: 11px; border-bottom: 1px solid #bbb; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.q-pq-social-bd { padding: 4px 9px 5px; }
.q-pq-social-bd p { margin: 0 0 3px; line-height: 1.45; }
.q-pq-social-bd strong { font-weight: 700; }
.q-pq-social-bd ul { list-style: none; margin: 2px 0 0; padding: 0; }
.q-pq-social-bd li { border: 1px solid #bbb; border-radius: 8px; padding: 2px 8px; margin: 3px 0; line-height: 1.4; }
.q-paper.wrong-only .q-pq.pq-ok { display: none; }
.q-paper.hide-exp .q-pq-exp { display: none; }

/* ═══════ 列印：只留考卷，套用 A4 ═══════ */
@media print {
  .no-print { display: none !important; }
  body { background: #fff !important; }
  html, body { height: auto !important; }
  .q-card { box-shadow: none !important; border: none !important; margin: 0 !important; padding: 0 !important; max-width: none !important; }
  .q-paper { border: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; }
  /* 兩欄自動平衡（column-fill:auto 會讓多欄區塊整塊跳到第 2 頁、第 1 頁留白，故移除）。
     平衡模式下內容多半仍會由左欄連續流到右欄。 */
  .q-paper-body { margin: 0 !important; }
  /* 防尾端多一張空白頁：最後一個區塊／題目不留下邊距，容器不溢出 */
  .q-sec:last-child, .q-paper-qs:last-child, .q-pq:last-child, .q-pq:last-child .q-pq-exp { margin-bottom: 0 !important; padding-bottom: 0 !important; }
  .q-pq { page-break-inside: avoid; }
  .q-exam-score, .q-pq-mk, .q-pq-map, .q-pq-chart, .q-pq-head .ans {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  /* 邊界由 @page 提供 → 每一頁（含第 2 頁起）都套用相同上下左右邊界。左右縮小、上下保留足夠留白。
     ⚠ 列印視窗「邊界(Margins)」務必選「預設(Default)」，選「無(None)」會強制 0 邊界、
     蓋掉這裡的設定，第 2 頁就會貼齊紙緣。頁首／頁尾的日期網址則取消勾選「頁首及頁尾」。 */
  @page { margin: 13mm 8mm; }
}

/* ═══════ 結算頁 v2：檢討優先版面 ═══════ */
/* 和大家比一比（中性卡片，僅以橘色標示「你」） */
.q-peer { text-align: left; background: #f7f6f3; border: 1px solid #e6e2d8; border-radius: 12px; padding: 12px 15px; margin: 16px auto 0; max-width: 560px; }
.q-peer-soft { color: var(--q-sub); font-size: 13px; font-weight: 600; line-height: 1.6; }
.q-peer-h { font-size: 13.5px; font-weight: 800; color: var(--q-ink); margin-bottom: 9px; }
.q-peer-pct { font-size: 17px; color: var(--q-primary-dark); }
.q-peer-bar { position: relative; height: 14px; background: #fff; border: 1px solid #e6e2d8; border-radius: 999px; }
.q-peer-fill { position: absolute; left: 0; top: 0; height: 14px; background: var(--q-primary); border-radius: 999px; }
.q-peer-avg { position: absolute; top: -4px; width: 0; height: 22px; border-left: 2px dashed #9a958a; transform: translateX(-1px); }
.q-peer-you { position: absolute; top: -4px; width: 0; height: 22px; border-left: 2px solid var(--q-primary-dark); transform: translateX(-1px); }
.q-peer-legend { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; margin-top: 9px; gap: 8px; }
.q-peer-legend .you { color: var(--q-primary-dark); }
.q-peer-legend .avg { color: var(--q-sub); }
.q-peer-note { font-size: 11px; color: var(--q-muted); margin-top: 6px; line-height: 1.5; }

/* ── 統一區塊標題：橘色左標＋深色粗體（清楚可辨、單一強調色） ── */
.q-sec-title { font-size: 16px; font-weight: 900; color: var(--q-ink); padding-left: 11px; border-left: 4px solid var(--q-primary); line-height: 1.25; margin: 0 0 13px; }

/* ── 下一步／工具：四顆卡片按鈕 ── */
.q-act-sec { padding: 18px 24px; border-top: 1px solid var(--q-line); }
.q-act-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.q-act { display: flex; align-items: center; gap: 11px; text-align: left; background: #fff; border: 1px solid var(--q-line); border-radius: 11px; padding: 12px 14px; cursor: pointer; transition: border-color .15s, background .15s; }
.q-act:hover { border-color: var(--q-primary); background: #fffaf2; }
.q-act-ic { font-size: 22px; flex: 0 0 auto; line-height: 1; }
.q-act-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.q-act-tx b { font-size: 15px; font-weight: 800; color: var(--q-ink); }
.q-act-tx small { font-size: 11.5px; color: var(--q-muted); font-weight: 600; }
.q-act-primary { border-color: var(--q-primary); background: var(--q-primary-soft); }
.q-act-primary:hover { background: #ffe8c6; }
.q-act-primary .q-act-tx b { color: var(--q-primary-dark); }
.q-act.on { border-color: var(--q-primary); background: #fff3e0; }

/* ── 結算頁頂列工具列：標題左、功能按鈕擺在標題列右側空白 ── */
.q-head-result { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.q-head-main { flex: 1 1 auto; min-width: 180px; }
.q-head-main p { margin: 3px 0 0; color: var(--q-sub); font-size: 14.5px; }
.q-head-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.q-hact { display: inline-flex; align-items: center; gap: 5px; background: #fff; border: 1px solid var(--q-line); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 800; color: var(--q-ink); cursor: pointer; line-height: 1.2; transition: border-color .15s, background .15s; }
.q-hact:hover { border-color: var(--q-primary); background: #fffaf2; }
.q-hact-ic { font-size: 15px; }
.q-hact-primary { border-color: var(--q-primary); background: var(--q-primary-soft); color: var(--q-primary-dark); }
.q-hact-primary:hover { background: #ffe8c6; }
.q-hact.on { border-color: var(--q-primary); background: #fff3e0; }
/* 表現分析展開區（在摘要與成績檢討之間） */
.q-extra-wrap { padding: 0 24px; }

/* ── 成績檢討（最下方區塊）── */
.q-review-sec { text-align: left; padding: 18px 24px 22px; border-top: 1px solid var(--q-line); }
.q-review-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 8px; }
.q-review-cnt { font-size: 14px; font-weight: 800; color: var(--q-no); }
.q-link2 { background: none; border: none; color: var(--q-primary-dark); font-size: 13px; font-weight: 700; cursor: pointer; padding: 4px 6px; }
.q-link2:hover { text-decoration: underline; }
.q-allright-box { text-align: center; color: var(--q-ok); font-weight: 800; font-size: 15px; background: var(--q-ok-bg); border: 1px solid #cfe6bf; border-radius: 10px; padding: 16px; }
.q-rvhidden { display: none; }
.q-expandall { display: block; width: 100%; margin-top: 4px; background: #faf9f6; border: 1px solid var(--q-line); color: var(--q-sub); border-radius: 8px; padding: 10px; font-size: 13px; font-weight: 700; cursor: pointer; }
.q-expandall:hover { border-color: var(--q-primary); background: #fffaf2; }
/* 免責聲明（放在成績檢討區內、最下、低調footnote） */
.q-disclaimer-rev { margin-top: 16px; padding: 9px 12px; background: #faf8f3; border: 1px solid #ece6d8; border-radius: 8px; font-size: 11.5px; color: var(--q-muted); line-height: 1.6; }

/* ═══════ 第 2 包：闖關／徽章／再練同概念／分享 ═══════ */
/* 任務闖關（首頁） */
.q-routes { margin: 18px 0 4px; }
.q-route-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 8px; }
.q-route { display: flex; align-items: center; gap: 11px; text-align: left; background: var(--q-card); border: 1.5px solid var(--q-line); border-radius: 14px; padding: 12px 14px; cursor: pointer; transition: .15s; }
.q-route:hover { border-color: var(--q-primary); background: var(--q-primary-soft); transform: translateY(-1px); }
.q-route.done { border-color: var(--q-accent); background: var(--q-accent-soft); }
.q-route-ic { font-size: 26px; flex-shrink: 0; }
.q-route-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.q-route-name { font-weight: 900; font-size: 15px; color: var(--q-ink); }
.q-route-pass { font-size: 12px; color: var(--q-accent-dark); font-weight: 800; }
.q-route-desc { font-size: 12.5px; color: var(--q-muted); line-height: 1.45; }

/* 徽章列＋徽章牆 */
.q-badgestrip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 18px 0 2px; padding: 10px 14px; background: var(--q-card-soft); border: 1px solid var(--q-line); border-radius: 12px; cursor: pointer; }
.q-badgestrip:hover { border-color: var(--q-primary); }
.q-bs-label { font-weight: 900; font-size: 13.5px; color: var(--q-brown); }
.q-bs-icons { font-size: 20px; letter-spacing: 2px; flex: 1; }
.q-bs-empty { font-size: 12.5px; color: var(--q-muted); letter-spacing: normal; font-weight: 400; }
.q-bs-more { font-size: 12.5px; color: var(--q-blue); font-weight: 700; }
.q-badges-modal { max-width: 560px; width: 92%; }
.q-badges-head { font-size: 17px; font-weight: 900; color: var(--q-brown); margin-bottom: 14px; text-align: center; }
.q-badges-head span { font-size: 13px; color: var(--q-muted); font-weight: 700; }
.q-badge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 16px; }
.q-badge { text-align: center; border: 1px solid var(--q-line); border-radius: 12px; padding: 12px 8px; background: var(--q-card); }
.q-badge.locked { opacity: .42; filter: grayscale(1); }
.q-badge.got { border-color: var(--q-primary); background: var(--q-primary-soft); }
.q-badge-ic { font-size: 34px; line-height: 1.1; }
.q-badge-name { font-size: 13px; font-weight: 900; color: var(--q-ink); margin-top: 4px; }
.q-badge-desc { font-size: 11px; color: var(--q-muted); margin-top: 2px; line-height: 1.4; }

/* 結算頁解鎖橫幅 */
.q-win-banner { margin: 10px auto; max-width: 440px; border-radius: 12px; padding: 10px 16px; font-weight: 800; font-size: 14px; }
.q-win-route { background: var(--q-accent-soft); color: var(--q-accent-dark); border: 1px solid #cfe6bf; }
.q-win-badge { background: var(--q-primary-soft); color: var(--q-brown); border: 1px solid #f1d9a8; }

/* 答錯後「再練同概念」 */
.q-practice-same { display: block; width: 100%; margin-top: 12px; background: var(--q-blue-soft); border: 1.5px dashed var(--q-blue); color: var(--q-blue); border-radius: 10px; padding: 10px; font-size: 14px; font-weight: 800; cursor: pointer; }
.q-practice-same:hover:not(:disabled) { background: #e0eef8; }
.q-practice-same:disabled { opacity: .85; cursor: default; border-style: solid; color: var(--q-accent-dark); border-color: var(--q-accent); background: var(--q-accent-soft); }

/* 分享面板 */
.q-share-modal { max-width: 380px; width: 92%; text-align: center; }
.q-share-head { font-size: 17px; font-weight: 900; color: var(--q-brown); margin-bottom: 12px; }
.q-share-img { width: 200px; max-width: 58%; height: auto; border-radius: 10px; box-shadow: var(--q-shadow); margin: 0 auto 14px; display: block; }
.q-share-btns { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.q-share-note { font-size: 11.5px; color: var(--q-muted); line-height: 1.6; margin-bottom: 12px; }

/* 簡化首頁：大按鈕＋次要連結 */
.q-hero { display: block; width: 100%; margin: 10px 0 0; background: var(--q-primary); color: #fff; border: none; border-radius: 14px; padding: 16px; font-size: 19px; font-weight: 900; cursor: pointer; box-shadow: var(--q-shadow); transition: .15s; }
.q-hero:hover { background: var(--q-primary-dark); transform: translateY(-1px); }
.q-hero:active { transform: translateY(0); }
.q-hero-sub { text-align: center; font-size: 11.5px; color: var(--q-muted); margin: 5px 0 16px; }
.q-quicklinks { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.q-ql-label { font-size: 12.5px; color: var(--q-muted); font-weight: 700; margin-right: 2px; }
.q-qlink { background: none; border: 1px solid var(--q-line); color: var(--q-blue); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 700; cursor: pointer; transition: .12s; }
.q-qlink:hover { border-color: var(--q-blue); background: var(--q-blue-soft); }