/* ============================================================
   韌性刷題 · 融入官網樣式（override 層）
   ------------------------------------------------------------
   刷題本體 quiz.css 幾乎全部樣式都掛在 .q-* 前綴、顏色走 --q-* 變數。
   本檔「不動 quiz.css」，只做兩件事：
     1) 把 --q-* 變數重新映射到官網設計 token（teal / 金 / 紙白 / Noto 字體），
        一次改色，整台刷題機就換成官網視覺語言。
     2) 收斂 quiz.css 少數全域規則（body / 焦點外框），避免與官網 styles.css 打架。
   載入順序務必：styles.css → quiz.css → quiz-embed.css（本檔最後，才蓋得過）。
   ============================================================ */

/* --- 1) 顏色系統：把刷題的橘色語言換成官網 teal / 金 ------------------------
   語意回饋色（答對綠 --q-ok、答錯紅 --q-no）刻意「不換」，維持直覺。 */
:root {
  --q-primary: var(--teal);          /* 主要動作：橘 → teal */
  --q-primary-dark: var(--teal-deep);
  --q-primary-soft: var(--teal-soft);

  --q-accent: var(--gold);           /* 次要強調：草綠 → 金 */
  --q-accent-dark: #b5730f;
  --q-accent-soft: #f8ecd6;

  --q-brown: #7a4d12;                /* 暖褐（版本鈕文字）→ 收進金褐系 */
  --q-brown-soft: #f8efd9;

  --q-blue: #2f6f78;                 /* 「時事」鈕：藍 → 帶藍的 teal，仍與主色有區別 */
  --q-blue-soft: var(--aqua);

  --q-ink: var(--ink);               /* 主文字 → 官網墨色 */
  --q-sub: var(--ink-soft);
  --q-muted: var(--muted);

  --q-line: rgba(6, 57, 64, .14);    /* 分隔線 → 官網線色 */
  --q-line-strong: var(--gold);

  --q-bg: var(--paper);              /* 頁面底 → 官網紙白 */
  --q-card: #ffffff;
  --q-card-soft: #f4faf8;            /* 卡片淺底 → 極淺 teal，與暖橘脫鉤 */
  --q-shadow: 0 8px 24px rgba(6, 57, 64, .08);
}

/* --- 2) 全域規則收斂：讓刷題安放在官網頁首/頁尾之間 ------------------------ */

/* quiz.css 的 body{ background/padding/font } 會蓋掉官網 body；
   這裡改回官網底色與字體，內距移到刷題容器上，頁首才不會被推歪。 */
body {
  background: var(--paper);
  font-family: var(--sans);
  padding: 0;
}

/* 鍵盤焦點外框：刷題原本是橘色，改成官網 teal，與全站一致。 */
:focus-visible {
  outline: 3px solid rgba(0, 111, 120, .55);
  outline-offset: 2px;
}

/* 刷題主容器：夾在頁帶（page-band）與頁尾之間。
   寬度對齊官網 .page-shell（＝頁帶「韌性刷題」標題的寬），讓刷題內容與頁首/頁帶切齊，不外擴。 */
.quiz-embed-main {
  padding: clamp(18px, 3vw, 34px) 0 56px;
  background: var(--paper);
}
.quiz-embed-main #q-app {
  width: min(1468px, calc(100% - 68px));
  margin: 0 auto;
}
@media (max-width: 1320px) {
  .quiz-embed-main #q-app { width: min(100% - 48px, 1060px); }
}

/* 標題用官網襯線體，呼應全站標題語言（quiz.css 內文仍用無襯線）。 */
.q-head h1,
.q-start-title {
  font-family: var(--serif);
}

@media (max-width: 720px) {
  .quiz-embed-main { padding: 14px 10px 40px; }
}

/* ============================================================
   題目頁 · 安靜版左右欄（依 design-mockups/resilience-question-page-quiet-proposals.html）
   左欄：題目/提示/選項；右欄（sticky）：送出/下一題按鈕＋作答狀態＋解析。
   沿用 quiz.js 產生的既有 class（.q-opt/.q-tf-btn/.mk…），只以較高權重重新著色，不動答題邏輯。
   ------------------------------------------------------------ */
:root {
  --rq-surface: #fffefb;
  --rq-line: rgba(6, 57, 64, .12);
  --rq-line-soft: rgba(6, 57, 64, .08);
  --rq-ok: #4f8d32;  --rq-ok-soft: #f3f8f0;  --rq-ok-ink: #315f22;
  --rq-no: #bf4050;  --rq-no-soft: #fff5f6;  --rq-no-ink: #96313e;
}

/* 頂列：返回 + 標題 + 進度 ｜ 第 N 題 */
.rq-topline { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: end; margin-bottom: 16px; }
.rq-back { min-height: 34px; padding: 0 14px; border: 1px solid rgba(0,111,120,.22); border-radius: 999px; background: #fff; color: var(--teal); font-size: 13px; font-weight: 800; cursor: pointer; }
.rq-back:hover { background: var(--teal-soft); }
.rq-quiztitle { margin: 8px 0 0; color: var(--ink); font-family: var(--serif); font-size: 24px; font-weight: 700; }
.rq-progress { margin-top: 12px; height: 6px; border-radius: 99px; background: rgba(6, 57, 64, 0.1); overflow: hidden; }
.rq-progress i { display: block; height: 100%; background: var(--teal); transition: width .3s ease; }
.rq-count { color: var(--ink-soft); font-size: 14px; font-weight: 800; white-space: nowrap; }

/* meta 標籤列 */
.rq-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.rq-tag { min-height: 28px; display: inline-flex; align-items: center; padding: 0 11px; border-radius: 999px; background: #fff; border: 1px solid var(--rq-line); color: var(--ink-soft); font-size: 12.5px; font-weight: 700; }
.rq-tag.strong { color: var(--teal); background: var(--teal-soft); border-color: transparent; }

/* 左右欄：接近滿版；右側解析欄加寬（clamp 讓大螢幕更寬） */
.rq-layout { display: grid; grid-template-columns: minmax(0,1fr) clamp(360px, 26vw, 460px); gap: 24px; align-items: start; }
.rq-card { background: var(--rq-surface); border: 1px solid var(--rq-line); border-radius: 6px; }
.rq-main { padding: 28px 32px; }

/* 題幹 + 提示（安靜輔助段落，放題目下方）*/
.rq-question { position: relative; margin: 0; padding-left: 16px; color: var(--ink); font-family: var(--sans); font-size: 23px; font-weight: 800; line-height: 1.5; }
.rq-question::before { content: ""; position: absolute; left: 0; top: .4em; width: 4px; height: 1.15em; border-radius: 99px; background: var(--teal); }
/* 閱讀材料／提示（素養題）：安靜暖紙盒；把 quiz.css 的色條、藥丸標籤、17.5px 大字全部收斂。
   材料放在題目「上方」（＝題目說的「上文」），故留下方間距與題幹分開。 */
.rq-hint { margin: 0 0 20px; padding: 16px 18px; background: #fbf9f2; border: 1px solid rgba(217,138,27,.18); border-radius: 8px; color: var(--ink-soft); }
.rq-hint .q-stim { position: static; max-width: none; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; color: inherit; }
.rq-hint .q-stim::before { display: none; }               /* 移除左側粗色條 */
.rq-hint .q-stim .lbl { display: block; width: auto; margin: 0 0 8px; padding: 0; background: none; border: 0; border-radius: 0; color: #a06a16; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; }
.rq-hint .q-stim-body { font-size: 14.5px; line-height: 1.85; color: var(--ink-soft); }
.rq-hint .q-stim-body p { margin: 0 0 .7em; }
.rq-hint .q-stim-src { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rq-line-soft); font-size: 12.5px; color: var(--muted); }
.rq-hint .q-stim-src a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
.rq-hint img { max-width: 100%; height: auto; border-radius: 6px; margin-top: 8px; }
.rq-ophint { margin-top: 14px; color: var(--muted); font-size: 13px; }

/* 題型橫幅：放在題目正上方，明顯標示題型與作答方式（安靜版，套官網 teal） */
.rq-main .q-typebanner { display: inline-flex; align-items: center; margin: 0 0 12px; padding: 8px 16px; border: 0; border-radius: 999px; background: var(--teal-soft); color: var(--teal-deep); font-weight: 800; }
.rq-main .q-typebanner .q-tb-icon { display: none; }
.rq-main .q-typebanner .q-tb-name { font-size: 15px; letter-spacing: .02em; }
.rq-main .q-typebanner .q-tb-hint { font-size: 13px; font-weight: 600; opacity: .95; }
.rq-main .q-typebanner .q-tb-hint::before { content: "·"; margin: 0 8px; opacity: .5; }

/* 選項（單選/多選）：安靜卡片 + 字母圓 + 狀態符號 */
.rq-main .q-opt { width: 100%; text-align: left; display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; min-height: 58px; margin-top: 10px; padding: 13px 14px; border: 1px solid var(--rq-line); border-radius: 6px; background: #fff; color: var(--ink); font-weight: 700; cursor: pointer; transition: border-color .14s, background .14s; }
.rq-main .q-opt:hover { border-color: rgba(0,111,120,.32); }
.rq-main .q-opt.selected, .rq-main .q-opt.sel { border-color: rgba(0,111,120,.5); background: #f7fbfa; box-shadow: inset 3px 0 0 var(--teal); }
.rq-main .q-opt-key { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #f8faf9; border: 1px solid var(--rq-line); color: var(--teal); font-weight: 800; font-size: 14px; }
.rq-main .q-opt-main { display: block; min-width: 0; }
.rq-main .q-opt-text { font-size: 15px; line-height: 1.55; font-weight: 700; }
.rq-main .q-opt .fb { display: none; margin-top: 5px; font-size: 13px; color: var(--muted); font-weight: 500; line-height: 1.6; }
.rq-main .q-opt.show-fb .fb { display: block; }
.rq-main .q-opt .mk { font-size: 20px; font-weight: 900; }
.rq-main .q-opt.ok { border-color: rgba(79,141,50,.45); background: var(--rq-ok-soft); color: var(--rq-ok-ink); }
.rq-main .q-opt.ok .q-opt-key { background: var(--rq-ok); border-color: var(--rq-ok); color: #fff; }
.rq-main .q-opt.no { border-color: rgba(191,64,80,.45); background: var(--rq-no-soft); color: var(--rq-no-ink); }
.rq-main .q-opt.no .q-opt-key { background: var(--rq-no); border-color: var(--rq-no); color: #fff; }

/* 是非題 */
.rq-main .q-tf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.rq-main .q-tf-btn { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; min-height: 66px; margin: 0; padding: 14px 16px; border: 1px solid var(--rq-line); border-radius: 6px; background: #fff; color: var(--ink); font-weight: 800; cursor: pointer; transition: border-color .14s, background .14s; }
.rq-main .q-tf-btn:hover { border-color: rgba(0,111,120,.32); }
.rq-main .q-tf-btn.selected { border-color: rgba(0,111,120,.5); background: #f7fbfa; box-shadow: inset 3px 0 0 var(--teal); }
.rq-main .q-tf-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #f8faf9; border: 1px solid var(--rq-line); color: var(--teal); font-weight: 900; }
.rq-main .q-tf-text { font-size: 16px; }
.rq-main .q-tf-btn .fb { display: none; }
.rq-main .q-tf-btn.show-fb .fb { display: block; grid-column: 1 / -1; font-size: 13px; color: var(--muted); font-weight: 500; }
.rq-main .q-tf-btn .mk { font-size: 20px; font-weight: 900; }
.rq-main .q-tf-btn.ok { border-color: rgba(79,141,50,.45); background: var(--rq-ok-soft); color: var(--rq-ok-ink); }
.rq-main .q-tf-btn.ok .q-tf-icon { background: var(--rq-ok); border-color: var(--rq-ok); color: #fff; }
.rq-main .q-tf-btn.no { border-color: rgba(191,64,80,.45); background: var(--rq-no-soft); color: var(--rq-no-ink); }
.rq-main .q-tf-btn.no .q-tf-icon { background: var(--rq-no); border-color: var(--rq-no); color: #fff; }

.rq-main .q-explore-hint { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding: 13px 16px; background: linear-gradient(180deg, rgba(237, 248, 248, 0.85), rgba(220, 239, 235, 0.6)); border: 1px solid rgba(0, 111, 120, 0.28); border-radius: 9px; color: var(--teal-deep); font-size: 14.5px; font-weight: 600; line-height: 1.55; }

/* 右欄（sticky）：操作卡 + 解析卡 */
/* 左欄：題目卡 + 解析（自然捲動）；右欄：控制面板整塊 sticky（永遠釘在頂端） */
.rq-main-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
/* 解析已移到左欄，右欄很短——直接讓 .rq-side sticky 最穩（短內容在高容器裡）。
   top 留較大空間，讓控制面板與頁首之間有呼吸感。 */
.rq-side { position: sticky; top: 108px; align-self: start; display: block; }
.rq-action-card { padding: 16px; background: #fff; border: 1px solid var(--rq-line); border-radius: 6px; box-shadow: 0 6px 18px rgba(6, 57, 64, 0.06); }
/* 提示（右欄控制面板）：官網風格的紙感 tip，金色左線＋小標，去掉舊的青色漸層盒 */
.rq-side-hint .q-explore-hint {
  display: block;
  margin: 14px 0 0;
  padding: 13px 15px 14px;
  border: 1px solid rgba(6, 57, 64, 0.1);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  background: #fffdf7;
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.7;
}
.rq-side-hint .q-explore-hint::before {
  content: "TIP";
  display: block;
  margin-bottom: 5px;
  color: var(--gold);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.16em;
}
/* 解析在左欄，答題後（.show）才出現，答題前不佔位（避免全寬空骨架） */
.rq-main-col .rq-analysis:not(.show) { display: none; }
.rq-main-col .rq-analysis { margin-top: 0; }
.rq-button { width: 100%; min-height: 46px; margin-bottom: 12px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 4px; background: var(--teal); color: #fff; font-weight: 800; font-size: 15px; cursor: pointer; transition: background .14s; }
.rq-button:hover:not(:disabled) { background: var(--teal-deep); }
.rq-button:disabled { opacity: .45; cursor: default; }
.rq-status h3, .rq-action-card h3 { margin: 0 0 8px; font-size: 17px; color: var(--ink); }
.rq-result-msg { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.75; }
.rq-result-msg .rq-ok { color: var(--rq-ok-ink); }
.rq-result-msg .rq-no { color: var(--rq-no-ink); }
.rq-status .q-streak, .rq-action-card .q-streak { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 800; color: var(--gold); }

/* 送出後的作答判定：明確醒目的對／錯徽章，一眼看出結果 */
.rq-status.is-ok, .rq-status.is-no { padding-left: 12px; border-left: 3px solid transparent; }
.rq-status.is-ok { border-left-color: var(--rq-ok); }
.rq-status.is-no { border-left-color: var(--rq-no); }
.rq-verdict { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 10px; padding: 7px 15px 7px 8px; border-radius: 999px; font-size: 16px; font-weight: 800; letter-spacing: .02em; }
.rq-verdict-ic { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 13px; font-weight: 900; }
.rq-verdict.is-ok { background: var(--rq-ok-soft); color: var(--rq-ok-ink); }
.rq-verdict.is-ok .rq-verdict-ic { background: var(--rq-ok); }
.rq-verdict.is-no { background: var(--rq-no-soft); color: var(--rq-no-ink); }
.rq-verdict.is-no .rq-verdict-ic { background: var(--rq-no); }

/* 解析卡：答題中收合（只標題），送出後展開 */
.rq-analysis { padding: 18px; background: #fff; border: 1px solid var(--rq-line); border-radius: 6px; }
.rq-an-h { margin: 0 0 12px; font-size: 18px; color: var(--ink); }
.rq-an-empty { color: var(--muted); font-size: 13.5px; }
.rq-item { padding: 12px 0; border-top: 1px solid var(--rq-line-soft); }
.rq-analysis .rq-item:first-of-type { border-top: 0; padding-top: 0; }
.rq-item b { display: block; color: var(--ink); font-size: 14.5px; }
.rq-item p { margin: 6px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.75; }
.rq-item.collapsed b { color: var(--muted); font-weight: 700; }
.rq-item .rq-ph { display: block; margin-top: 8px; height: 7px; width: 72%; border-radius: 99px; background: rgba(6,57,64,.08); }

.rq-note { margin: 22px 0 0; color: var(--muted); font-size: 12px; }
/* 「再練一題同概念」：右欄下一題按鈕正下方的次要外框按鈕 */
.rq-action-card .q-practice-same { width: 100%; margin: 0 0 12px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid rgba(0,111,120,.28); border-radius: 4px; background: #fff; color: var(--teal); font-weight: 800; font-size: 13.5px; cursor: pointer; transition: background .14s; }
.rq-action-card .q-practice-same:hover:not(:disabled) { background: var(--teal-soft); }
.rq-action-card .q-practice-same:disabled { opacity: .55; cursor: default; }

/* 互動題（排序/配對/連連看/地圖）：沿用原有 DOM，僅確保安放在主欄、與新版留白一致 */
.rq-main .q-order-list, .rq-main .q-match-board, .rq-main .q-connect-board, .rq-main .q-map-wrapper { margin-top: 18px; }

/* 窄螢幕：改上下欄；右欄操作卡移到題目下方 */
@media (max-width: 900px) {
  .rq-layout { grid-template-columns: 1fr; }
  .rq-side { position: static; }
  .rq-action-card { position: static; box-shadow: none; }
}
@media (max-width: 560px) {
  .rq-topline { grid-template-columns: 1fr; }
  .rq-main { padding: 18px; }
  .rq-main .q-tf-row { grid-template-columns: 1fr; }
  .rq-question { font-size: 20px; }
}

/* ============================================================
   首頁 · 公民刷題工作台（依圖2）：左欄主要動線、右欄內容；接近滿版。
   沿用 quiz.js 的既有 class（.q-hero/.q-route/.q-qlink/.q-adv…），只重排與著色。
   ------------------------------------------------------------ */
.rq-home { display: grid; grid-template-columns: 248px minmax(0,1fr); gap: 26px; align-items: start; }

/* 左欄：動線 */
.rq-home-rail { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 14px; }
.rq-home-kicker { display: inline-block; color: var(--gold); font-size: 11px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
.rq-home-brand h2 { margin: 6px 0 4px; font-family: var(--serif); font-size: 23px; color: var(--ink); }
.rq-home-brand p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.rq-home-start { width: 100%; min-height: 44px; margin-top: 4px; border: 0; border-radius: 6px; background: var(--teal); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; transition: background .14s; }
.rq-home-start:hover { background: var(--teal-deep); }
.rq-home-substart { color: var(--muted); font-size: 12px; text-align: center; margin-top: -6px; }
.rq-home-nav { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; border-top: 1px solid var(--rq-line); padding-top: 10px; }
/* 左欄動線：輕量、不搶主按鈕；目前分頁才淡淡標示 */
.rq-home-navi { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 500; cursor: pointer; transition: .14s; }
.rq-home-navi:hover { background: rgba(0, 111, 120, .06); color: var(--teal); }
.rq-home-navi.is-current { background: var(--teal-soft); color: var(--teal-deep); font-weight: 700; }

/* 右欄：內容 */
.rq-home-content { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.rq-home-intro { padding: 24px 28px; border: 1px solid var(--rq-line); border-radius: 8px; background: linear-gradient(100deg, #edf8f8 0%, #fffdf9 58%, #f8ecd6 100%); }
.rq-home-tag { color: var(--teal); font-size: 12.5px; font-weight: 900; letter-spacing: .06em; }
.rq-home-h1 { margin: 6px 0 8px; font-family: var(--serif); font-size: 30px; color: var(--ink); }
.rq-home-lead { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.7; max-width: 680px; }
/* 題庫題數：併入頁帶小標，不再獨占一行 */
.rq-home-bankstat { color: var(--muted); font-weight: 700; }
.rq-home-bankstat::before { content: "·"; margin: 0 8px; opacity: .5; }
.rq-home-cta { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.rq-home-ctabtn { min-height: 44px; padding: 0 20px; border: 1px solid var(--rq-line); border-radius: 6px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 800; cursor: pointer; transition: .14s; }
.rq-home-ctabtn.primary { background: var(--teal); border-color: var(--teal); color: #fff; }
.rq-home-ctabtn.primary:hover { background: var(--teal-deep); }
.rq-home-ctabtn:not(.primary):hover { border-color: var(--teal); color: var(--teal); }

.rq-home-progress { padding: 16px 20px; border: 1px solid var(--rq-line); border-radius: 8px; background: #fff; }
.rq-home-prog-h { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.rq-home-prog-h > span { margin-right: auto; }
.rq-prog-reset {
  flex: 0 0 auto;
  padding: 5px 12px;
  border: 1px solid rgba(6, 57, 64, 0.2);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: .14s;
}
.rq-prog-reset:hover { border-color: #c66; color: #b34a4a; background: #fdf3f3; }
.rq-home-progbar { height: 8px; border-radius: 99px; background: #eee8dc; overflow: hidden; }
.rq-home-progbar i { display: block; height: 100%; background: var(--teal); }
.rq-home-prog-meta { margin-top: 8px; color: var(--muted); font-size: 12.5px; }

.rq-home-block { padding: 20px 22px; border: 1px solid var(--rq-line); border-radius: 8px; background: #fff; }
.rq-home-blockhead { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.rq-home-blockhead h3 { margin: 0; font-size: 18px; color: var(--ink); }
.rq-home-blockhead span { color: var(--muted); font-size: 12.5px; margin-left: auto; }
/* 主題闖關：寬度夠時 5 張排成一排（auto-fit 讓大螢幕填滿單列） */
.rq-home-routegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); gap: 12px; }
.rq-home-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* 主題卡片（沿用 .q-route DOM，安靜版）*/
/* 主題卡：無邊框、淡底軟磚（少框），更高、字更大 */
.rq-home .q-route { display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: start; width: 100%; min-height: 118px; text-align: left; padding: 20px 18px; border: 0; border-radius: 12px; background: #f6faf9; cursor: pointer; transition: .14s; }
.rq-home .q-route:hover { background: var(--teal-soft); }
.rq-home .q-route.done { background: var(--rq-ok-soft); }
.rq-home .q-route-ic { font-size: 26px; line-height: 1.1; }
.rq-home .q-route-name { display: block; font-size: 17px; font-weight: 800; color: var(--ink); line-height: 1.35; }
.rq-home .q-route-desc { display: block; margin-top: 6px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; }
.rq-home .q-route-pass { color: var(--rq-ok-ink); font-size: 12px; }

/* 快速練習 / 更多設定 chips */
.rq-home-quick, .rq-home-advpre { display: flex; gap: 10px; flex-wrap: wrap; }
.rq-home .q-qlink, .rq-home-advchip { min-height: 38px; padding: 0 15px; border: 1px solid var(--rq-line); border-radius: 999px; background: #fff; color: var(--ink); font-size: 13.5px; font-weight: 800; cursor: pointer; transition: .14s; }
.rq-home .q-qlink:hover, .rq-home-advchip:hover { border-color: var(--teal); color: var(--teal); background: var(--teal-soft); }

/* 徽章分頁：直接顯示全部徽章格線（已解鎖／未解鎖） */
.rq-badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.rq-badge-grid .q-badge { padding: 16px 14px; border: 1px solid var(--rq-line); border-radius: 8px; background: #fff; text-align: center; }
.rq-badge-grid .q-badge.locked { opacity: .5; filter: grayscale(1); background: #faf8f3; }
.rq-badge-grid .q-badge.got { border-color: rgba(79,141,50,.35); background: var(--rq-ok-soft); }
.rq-badge-grid .q-badge-ic { font-size: 30px; line-height: 1.1; }
.rq-badge-grid .q-badge-name { margin-top: 8px; font-size: 13.5px; font-weight: 800; color: var(--ink); }
.rq-badge-grid .q-badge-desc { margin-top: 4px; font-size: 13px; color: var(--muted); line-height: 1.55; }

/* 徽章視窗放大：整體更寬、每張徽章卡更大、字更大更清楚（原本說明只有 11px 難閱讀） */
.q-modal.q-badges-modal { max-width: 800px; width: 94%; padding: 30px 30px 24px; max-height: 88vh; overflow-y: auto; }
.q-badges-modal .q-badges-head { font-size: 21px; margin-bottom: 22px; color: var(--teal-deep); }
.q-badges-modal .q-badges-head span { font-size: 15px; }
.q-badges-modal .q-badge-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin-bottom: 22px; }
.q-badges-modal .q-badge { padding: 22px 14px; border-radius: 12px; }
.q-badges-modal .q-badge.got { border-color: rgba(0, 111, 120, 0.4); background: var(--teal-soft); }
.q-badges-modal .q-badge-ic { font-size: 48px; line-height: 1.05; }
.q-badges-modal .q-badge-name { margin-top: 12px; font-size: 17px; font-weight: 800; color: var(--ink); }
.q-badges-modal .q-badge-desc { margin-top: 7px; font-size: 14px; color: var(--muted); line-height: 1.6; }
.q-badges-modal .q-btn { min-height: 46px; padding: 0 30px; font-size: 15px; }

/* 首頁底部小註記（免責）：淡、置中，不搶版面 */
.rq-home-foot { grid-column: 1 / -1; margin: 6px 0 0; color: var(--muted); font-size: 11.5px; text-align: center; }

/* 更多設定完整面板：沿用 .q-adv/.q-seg/.q-chip（顏色已由 --q-* 重映射成 teal）*/
/* 自訂條件面板：安靜版（少框、留白、沈穩）。q-adv 本身透明，靠外層 .rq-home-block 當唯一卡片 */
.rq-home-content .q-adv { margin: 0; padding: 0; border: 0; background: transparent; }
/* 分組標題：小、淡、上方留白拉開呼吸 */
.rq-home-content .q-adv .q-lab { margin: 26px 0 11px; padding: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--muted); border: 0; background: none; }
.rq-home-content .q-adv .q-lab:first-child { margin-top: 4px; }
.rq-home-content .q-adv .q-adv-note { margin: 24px 0 0; color: var(--muted); font-size: 12.5px; }
/* 範圍／題數：輕量分段控制（等寬、細框、選中才填色）*/
.rq-home-content .q-countseg { display: flex; gap: 8px; flex-wrap: wrap; }
.rq-home-content .q-countseg .q-seg { flex: 1 1 120px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; border: 1px solid var(--rq-line); border-radius: 8px; background: #fff; color: var(--ink-soft); font-size: 14px; font-weight: 600; cursor: pointer; transition: .14s; }
.rq-home-content .q-countseg .q-seg:hover { border-color: rgba(0,111,120,.35); color: var(--teal); }
.rq-home-content .q-countseg .q-seg.on { background: var(--teal); border-color: var(--teal); color: #fff; font-weight: 700; }
/* 自訂題數輸入（只收數字）：外觀比照題數按鈕，內含無邊框數字輸入框 */
.rq-home-content .q-countseg .q-seg-custom { gap: 4px; cursor: text; }
.rq-home-content .q-count-input { width: 3.4em; min-width: 0; border: 0; background: transparent; font: inherit; color: inherit; text-align: center; outline: none; -moz-appearance: textfield; }
.rq-home-content .q-count-input::-webkit-outer-spin-button, .rq-home-content .q-count-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rq-home-content .q-count-input::placeholder { color: var(--muted); font-weight: 600; }
.rq-home-content .q-seg-custom-unit { flex: none; font-size: 13px; }
.rq-home-content .q-countseg .q-seg-custom.on { background: var(--teal); border-color: var(--teal); color: #fff; font-weight: 700; }
.rq-home-content .q-countseg .q-seg-custom.on .q-count-input { color: #fff; }
.rq-home-content .q-countseg .q-seg-custom.on .q-count-input::placeholder { color: rgba(255,255,255,.72); }
/* 主題／題型／難度／錯題本 chips：安靜藥丸 */
.rq-home-content .q-adv .q-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.rq-home-content .q-adv .q-chip { min-height: 34px; display: inline-flex; align-items: center; padding: 0 14px; border: 1px solid var(--rq-line); border-radius: 999px; background: #fff; color: var(--ink-soft); font-size: 13px; font-weight: 600; cursor: pointer; transition: .14s; }
.rq-home-content .q-adv .q-chip:hover { border-color: rgba(0,111,120,.35); color: var(--teal); }
.rq-home-content .q-adv .q-chip.on { background: var(--teal-soft); border-color: transparent; color: var(--teal-deep); font-weight: 700; }
/* 「用自訂條件開始」主按鈕 + 可用題數 */
.rq-home-content .q-adv .q-start { width: 100%; min-height: 48px; margin-top: 26px; border: 0; border-radius: 8px; background: var(--teal); color: #fff; font-size: 15px; font-weight: 800; cursor: pointer; transition: background .14s; }
.rq-home-content .q-adv .q-start:hover { background: var(--teal-deep); }
.rq-home-content .q-adv .q-statline { margin-top: 10px; color: var(--muted); font-size: 12.5px; text-align: center; }

/* 進階篩選：收合面板（核心維持乾淨，進階項目點開才出現） */
.rq-home-content .q-adv-more { margin-top: 26px; border: 1px solid var(--rq-line); border-radius: 10px; background: rgba(237, 248, 248, 0.35); overflow: hidden; }
.rq-home-content .q-adv-more[open] { background: #fff; }
.rq-home-content .q-adv-more-sum { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px 18px; user-select: none; }
.rq-home-content .q-adv-more-sum::-webkit-details-marker { display: none; }
.rq-home-content .q-adv-more-sum::after { content: "＋ 展開"; margin-left: auto; flex: none; font-size: 12.5px; font-weight: 700; color: var(--teal); }
.rq-home-content .q-adv-more[open] .q-adv-more-sum::after { content: "－ 收起"; }
.rq-home-content .q-adv-more[open] .q-adv-more-sum { border-bottom: 1px solid var(--rq-line); }
.rq-home-content .q-adv-more-sum:hover { background: rgba(0, 111, 120, 0.05); }
.rq-home-content .q-adv-more-t { font-size: 15px; font-weight: 800; color: var(--ink); flex: none; }
.rq-home-content .q-adv-more-d { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.rq-home-content .q-adv-more-body { padding: 4px 18px 20px; }
.rq-home-content .q-adv-more-body .q-lab:first-child { margin-top: 18px; }

@media (max-width: 900px) {
  .rq-home { grid-template-columns: 1fr; }
  .rq-home-rail { position: static; }
  .rq-home-cols { grid-template-columns: 1fr; }
}

/* ============================================================
   結算頁 · 安靜版（滿版）：沿用 finish() 既有結構，只重新著色與排版。
   ------------------------------------------------------------ */
.q-result-card { width: 100%; max-width: none; margin: 0; background: var(--rq-surface); border: 1px solid var(--rq-line); border-radius: 8px; box-shadow: none; overflow: hidden; }
/* 頂列：標題 + 功能按鈕 */
.q-result-card .q-head-result { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 20px 28px; border-bottom: 1px solid var(--rq-line); background: #fff; }
.q-result-card .q-head-main h1 { margin: 0; font-family: var(--serif); font-size: 20px; color: #8a4b17; }
.q-result-card .q-head-main p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.q-result-card .q-head-acts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.q-result-card .q-hact { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border: 1px solid var(--rq-line); border-radius: 999px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 800; cursor: pointer; transition: .14s; }
.q-result-card .q-hact:hover, .q-result-card .q-hact.on { border-color: var(--teal); color: var(--teal); background: var(--teal-soft); }
.q-result-card .q-hact-primary { background: var(--teal); border-color: var(--teal); color: #fff; }
.q-result-card .q-hact-primary:hover { background: var(--teal-deep); color: #fff; border-color: var(--teal-deep); }
/* 結果摘要 */
.q-result-card .q-result { padding: 34px 28px 24px; text-align: center; }
.q-result-card .q-result .big { font-size: 60px; line-height: 1; }
.q-result-card .q-result h2 { margin: 14px 0 0; font-family: var(--serif); font-size: 26px; color: var(--ink); }
.q-result-card .q-round-scope { display: inline-block; margin: 14px auto 0; padding: 6px 14px; border-radius: 999px; background: #f4f1e9; color: var(--ink-soft); font-size: 12.5px; font-weight: 700; }
.q-result-card .q-result-stats { margin: 22px auto 0; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.q-result-card .q-rstat { min-width: 150px; padding: 16px 22px; border: 1px solid var(--rq-line); border-radius: 8px; background: #fff; }
.q-result-card .q-rstat .n { display: block; font-size: 30px; font-weight: 900; color: var(--ink); }
.q-result-card .q-rstat-score .n { color: var(--teal); }
.q-result-card .q-rstat .l { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.q-result-card .q-result-note { margin: 18px auto 0; color: var(--ink-soft); font-size: 14px; max-width: 620px; }
.q-result-card .q-peer, .q-result-card .q-peer-soft { margin: 18px auto 0; max-width: 780px; padding: 14px 18px; border: 1px solid var(--rq-line); border-radius: 8px; background: #fbfffd; color: var(--ink-soft); font-size: 13.5px; line-height: 1.7; text-align: left; }
.q-result-card #q-badgestrip, .q-result-card .q-badgestrip { margin: 20px 28px; }
.q-result-card .q-extra-wrap:not(:empty) { margin: 0 28px 8px; }
/* 表現分析長條 */
.q-result-card .q-ansec { margin-top: 14px; }
.q-result-card .q-anh { font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.q-result-card .q-anrow { display: grid; grid-template-columns: 120px 1fr auto; gap: 10px; align-items: center; margin-bottom: 6px; font-size: 12.5px; }
.q-result-card .q-anbar { height: 8px; border-radius: 99px; background: #eee8dc; overflow: hidden; }
.q-result-card .q-anfill { display: block; height: 100%; }
/* 成績檢討 */
.q-result-card .q-review-sec { padding: 24px 28px 28px; border-top: 1px solid var(--rq-line); background: #fff; }
.q-result-card .q-sec-title { position: relative; padding-left: 14px; font-family: var(--serif); font-size: 20px; color: var(--ink); margin-bottom: 16px; }
.q-result-card .q-sec-title::before { content: ""; position: absolute; left: 0; top: .18em; width: 4px; height: 1.05em; border-radius: 99px; background: var(--teal); }
.q-result-card .q-review-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.q-result-card .q-review-cnt { color: var(--rq-no-ink); font-size: 14px; font-weight: 800; }
.q-result-card .q-link2 { margin-left: auto; padding: 7px 14px; border: 1px solid rgba(0,111,120,.28); border-radius: 999px; background: #fff; color: var(--teal); font-size: 13px; font-weight: 800; cursor: pointer; }
.q-result-card .q-link2:hover { background: var(--teal-soft); }
.q-result-card .q-rvlist { display: grid; gap: 12px; }
.q-result-card .q-rvcard { padding: 16px 18px; border: 1px solid var(--rq-line); border-radius: 8px; background: #fff; }
.q-result-card .q-rvtags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.q-result-card .q-rvtag { padding: 2px 9px; border-radius: 999px; background: #f4f1e9; color: var(--ink-soft); font-size: 11.5px; font-weight: 700; }
.q-result-card .q-rvstim { margin-bottom: 8px; padding: 10px 12px; border-left: 3px solid var(--rq-line); background: #fbfaf6; color: var(--ink-soft); font-size: 13px; border-radius: 0 6px 6px 0; }
.q-result-card .q-rvq { font-size: 15.5px; font-weight: 800; color: var(--ink); line-height: 1.5; }
.q-result-card .q-rvyour { margin-top: 8px; color: var(--rq-no-ink); font-size: 13.5px; font-weight: 700; }
.q-result-card .q-rvans { margin-top: 4px; color: var(--rq-ok-ink); font-size: 13.5px; font-weight: 700; }
.q-result-card .rq-review-exp { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rq-line-soft); }
.q-result-card .rq-review-exp .rq-item:first-of-type { border-top: 0; padding-top: 0; }
.q-result-card .q-expandall { width: 100%; margin-top: 12px; padding: 11px; border: 1px dashed var(--rq-line); border-radius: 8px; background: #fff; color: var(--teal); font-weight: 800; font-size: 13.5px; cursor: pointer; }
.q-result-card .q-expandall:hover { background: var(--teal-soft); }
.q-result-card .q-allright-box { padding: 20px; border: 1px solid rgba(79,141,50,.4); border-radius: 8px; background: var(--rq-ok-soft); color: var(--rq-ok-ink); text-align: center; font-weight: 800; }
.q-result-card .q-disclaimer-rev { margin-top: 16px; color: var(--muted); font-size: 12px; }

@media (max-width: 640px) {
  .q-result-card .q-head-result { padding: 16px; }
  .q-result-card .q-result, .q-result-card .q-review-sec { padding: 20px 16px; }
  .q-result-card .q-head-acts { width: 100%; }
}

/* ============================================================
   列印／另存 PDF（主要用於「仿真考卷」）：只印刷題內容，藏掉官網外框。
   quiz.css 已藏考卷自己的工具列（.no-print）；官網頁首/頁帶/頁尾不是 .no-print，
   會跟著印出（醜且佔版面），這裡於列印時一併隱藏，讓考卷完整、乾淨呈現。
   本檔只在 /quiz 頁載入，故不影響官網其他頁的列印。
   ------------------------------------------------------------ */
@media print {
  .site-header,
  .page-band,
  .band-tabs-bar,
  .site-footer { display: none !important; }
  /* 考卷滿版、去掉螢幕用的置中寬度與內距 */
  .quiz-embed-main { padding: 0 !important; background: #fff !important; }
  .quiz-embed-main #q-app { width: 100% !important; max-width: none !important; margin: 0 !important; }
}

/* 2026-07 quality pass: calmer, larger, native to the official site */
.quiz-embed-main {
  padding: clamp(30px, 3.2vw, 52px) 0 72px;
}

.quiz-embed-main #q-app {
  width: min(1468px, calc(100% - 68px));
}

.rq-home {
  grid-template-columns: 284px minmax(0, 1fr);
  column-gap: clamp(30px, 3vw, 46px);
  row-gap: clamp(22px, 2.4vw, 34px);
}

.rq-home-clean .rq-home-intro {
  grid-column: 1 / -1;
}

.rq-home-rail {
  gap: 20px;
}

.rq-home-kicker {
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 0.18em;
}

.rq-home-brand h2 {
  margin-top: 8px;
  font-size: 28px;
  line-height: 1.28;
}

.rq-home-brand p {
  font-size: 14.5px;
  line-height: 1.85;
}

.rq-home-start {
  min-height: 58px;
  border-radius: 8px;
  font-size: 17px;
  letter-spacing: 0.02em;
  box-shadow: 0 16px 30px rgba(0, 111, 120, 0.14);
}

.rq-home-substart {
  font-size: 13px;
  line-height: 1.6;
}

.rq-home-nav {
  gap: 7px;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.rq-home-navi {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 650;
}

.rq-home-navi.is-current {
  background: rgba(0, 111, 120, 0.065);
}

/* 左側選單項改「標題 + 一句小說明」兩行，讓新使用者一看就懂各是什麼 */
.rq-home-navi { min-height: auto; padding: 12px 14px; }
.rq-home-navi-t { display: block; font-size: 16px; font-weight: 760; line-height: 1.3; color: var(--ink-soft); }
.rq-home-navi-d { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 500; line-height: 1.45; color: var(--muted); }
.rq-home-navi:hover .rq-home-navi-t { color: var(--teal); }
.rq-home-navi.is-current .rq-home-navi-t { color: var(--teal-deep); }
.rq-home-navi.is-current .rq-home-navi-d { color: var(--teal); }

.rq-home-content {
  gap: 0;
  padding-top: 0;
}

.rq-home-intro {
  padding: 0 0 clamp(24px, 2.6vw, 36px);
  border: 0;
  border-bottom: 1px solid rgba(6, 57, 64, 0.1);
  border-radius: 0;
  background: transparent;
}

.rq-home-tag {
  font-size: 13px;
}

.rq-home-h1 {
  margin-top: 10px;
  font-size: clamp(36px, 3.1vw, 48px);
  line-height: 1.25;
}

.rq-home-lead {
  max-width: 880px;
  font-size: 17px;
  line-height: 1.9;
}

.rq-home-progress,
.rq-home-block {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.rq-home-progress {
  padding: 0 0 24px;
  border-bottom: 1px solid rgba(6, 57, 64, 0.1);
}

.rq-home-prog-h,
.rq-home-blockhead h3 {
  font-size: 18px;
}

.rq-home-prog-meta,
.rq-home-blockhead span {
  font-size: 14.5px;
}

.rq-home-block {
  padding: 24px 0 0;
}

.rq-home-block + .rq-home-block {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid rgba(6, 57, 64, 0.1);
}

.rq-home .q-qlink,
.rq-home-advchip {
  min-height: 46px;
  padding: 0 20px;
  border-color: rgba(6, 57, 64, 0.14);
  font-size: 15.5px;
}

/* 快速練習主 CTA：深色底「開始練習」＋ 5/10/20 題數（最常用、最快） */
.rq-quickstart { margin-bottom: 22px; }
.rq-quickstart-count { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.rq-qcount-seg { flex: 0 0 auto; min-width: 108px; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; padding: 0 20px; border: 1px solid rgba(6, 57, 64, 0.17); border-radius: 8px; background: rgba(255, 255, 255, 0.78); color: var(--ink-soft); font-size: 16px; font-weight: 850; cursor: pointer; transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease; }
.rq-qcount-seg:hover { border-color: rgba(0, 111, 120, 0.46); background: rgba(237, 248, 248, 0.58); color: var(--teal-deep); transform: translateY(-1px); }
.rq-qcount-seg.on { background: rgba(0, 111, 120, 0.1); border-color: rgba(0, 111, 120, 0.66); color: var(--teal-deep); box-shadow: inset 0 0 0 1px rgba(0, 111, 120, 0.42); }
.rq-quickstart-go { width: 100%; min-height: 58px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: linear-gradient(135deg, #087d82, #00666d); color: #fff; font-size: 18px; font-weight: 900; letter-spacing: .01em; cursor: pointer; box-shadow: 0 14px 28px rgba(0, 111, 120, 0.18); transition: transform .14s ease, box-shadow .14s ease, background .14s ease; }
.rq-quickstart-go:hover { transform: translateY(-2px); background: linear-gradient(135deg, #078a90, #005b62); box-shadow: 0 18px 36px rgba(0, 111, 120, 0.24); }
.rq-quick-more-lab { margin: 0 0 13px; color: var(--muted); font-size: 14.5px; font-weight: 760; letter-spacing: .02em; }

.rq-home-quick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 15px;
}

.rq-home-quick .q-qlink {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 104px;
  padding: 20px 62px 20px 26px;
  border: 1px solid rgba(0, 111, 120, 0.3);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(237, 248, 248, 0.98), rgba(255, 254, 251, 0.98)),
    #f6fbfa;
  color: var(--ink);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.9),
    0 16px 32px rgba(6, 57, 64, 0.085);
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}
.rq-home-quick .q-qlink b { font-size: 19px; font-weight: 900; }
.rq-home-quick .q-qlink small { font-size: 14px; font-weight: 700; color: var(--muted); }
.rq-home-quick .q-qlink:hover small,
.rq-home-quick .q-qlink:focus-visible small { color: var(--teal-deep); }
/* 主推：綜合隨機 */
.rq-home-quick .q-qlink.q-qlink-primary {
  border-color: rgba(0, 111, 120, 0.62);
  background:
    linear-gradient(135deg, rgba(0, 111, 120, 0.14), rgba(237, 248, 248, 0.98)),
    #eef8f8;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    0 18px 34px rgba(0, 111, 120, 0.16);
}
.rq-home-quick .q-qlink.q-qlink-primary b { color: var(--teal-deep); }

/* 快速練習步驟標籤（① 選題數 / ② 選要練什麼） */
.rq-qstep-lab { margin: 4px 0 10px; color: var(--ink-soft); font-size: 15px; font-weight: 850; letter-spacing: .01em; }
.rq-qstep-lab + .rq-quickstart-count { margin-bottom: 20px; }

.rq-home-quick .q-qlink::after {
  content: "→";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(0, 111, 120, 0.13);
  color: var(--teal-deep);
  font-size: 16px;
  font-weight: 900;
  transform: translateY(-50%);
  transition: background 0.14s ease, color 0.14s ease, transform 0.14s ease;
}

.rq-home-quick .q-qlink:hover,
.rq-home-quick .q-qlink:focus-visible {
  border-color: rgba(0, 111, 120, 0.5);
  background:
    linear-gradient(135deg, rgba(220, 239, 235, 0.98), rgba(255, 254, 251, 0.98)),
    #edf8f8;
  color: var(--teal-deep);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.86),
    0 20px 38px rgba(6, 57, 64, 0.13);
  transform: translateY(-2px);
}

.rq-home-quick .q-qlink:hover::after,
.rq-home-quick .q-qlink:focus-visible::after {
  background: var(--teal);
  color: #fff;
  transform: translate(3px, -50%);
}

.rq-home .q-route {
  position: relative;
  min-height: 132px;
  padding: 24px 54px 24px 22px;
  border: 1px solid rgba(0, 111, 120, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(237, 248, 248, 0.92), rgba(255, 254, 251, 0.98)),
    #f6fbfa;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.82),
    0 12px 26px rgba(6, 57, 64, 0.055);
  transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}

.rq-home .q-route::after {
  content: "→";
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(0, 111, 120, 0.1);
  color: var(--teal-deep);
  font-size: 16px;
  font-weight: 900;
  transition: background 0.14s ease, color 0.14s ease, transform 0.14s ease;
}

.rq-home .q-route:hover,
.rq-home .q-route:focus-visible {
  border-color: rgba(0, 111, 120, 0.42);
  background:
    linear-gradient(135deg, rgba(220, 239, 235, 0.98), rgba(255, 254, 251, 0.98)),
    #edf8f8;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.88),
    0 18px 34px rgba(6, 57, 64, 0.095);
  transform: translateY(-2px);
}

.rq-home .q-route:hover::after,
.rq-home .q-route:focus-visible::after {
  background: var(--teal);
  color: #fff;
  transform: translateX(3px);
}

/* 主題卡（依回饋）：較高的 4:3 直式卡——扁平單色 icon（圓角底）＋標題＋一句說明；無箭頭。
   注意：首頁不在 .rq 之下，這裡用 .rq-home-routegrid 提高權重並置於 .rq-home .q-route 規則之後以勝出。 */
.rq-home-routegrid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.rq-home-routegrid .q-route {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  min-height: 186px;
  padding: 20px 18px;
  text-align: left;
}
.rq-home-routegrid .q-route-body { display: flex; flex-direction: column; gap: 6px; }
.rq-home-routegrid .q-route::after { display: none; }
.rq-home-routegrid .q-route-ic { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 11px; background: rgba(0, 111, 120, 0.08); font-size: 0; line-height: 0; color: var(--teal); flex: none; }
.rq-home-routegrid .q-route-ic svg { width: 25px; height: 25px; display: block; }
.rq-home-routegrid .q-route.done .q-route-ic { color: var(--rq-ok-ink); background: rgba(79, 141, 50, 0.12); }
.rq-home-routegrid .q-route-name { display: block; margin-top: 2px; font-size: 17px; font-weight: 800; color: var(--ink); line-height: 1.3; }
.rq-home-routegrid .q-route-desc { display: block; font-size: 13px; color: var(--muted); line-height: 1.55; white-space: normal; }
.rq-home-routegrid .q-route-pass { color: var(--rq-ok-ink); font-size: 12px; font-weight: 800; }

.rq-home-foot {
  width: 100%;
  max-width: none;
  margin: 4px 0 0;
  padding: 16px 2px 0;
  border: 0;
  border-top: 1px solid rgba(6, 57, 64, 0.1);
  border-radius: 0;
  background: transparent;
  color: #66777a;
  font-size: 13px;
  line-height: 1.75;
  text-align: left;
  box-shadow: none;
}

.rq-home-foot::before {
  content: "資料提醒";
  display: block;
  margin: 0 0 5px;
  color: var(--gold);
  font-size: 11.5px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.14em;
}

.rq-home-content .q-countseg .q-seg {
  min-height: 52px;
  border-radius: 8px;
  font-size: 16px;
}

.rq-home-content .q-adv .q-chip {
  min-height: 42px;
  padding: 0 18px;
  font-size: 16.5px;
}

.rq-home-content .q-adv .q-lab {
  margin-top: 30px;
  margin-bottom: 13px;
  font-size: 14px;
}

/* 進階篩選（內嵌版）：標題列＝明顯的組標題（比選項大）＋緊跟其右的「全選/清除」；行距組間拉大、組內緊湊 */
.rq-home-content .q-adv-groups .q-grouprow { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin: 48px 0 17px; }
.rq-home-content .q-adv-groups .q-grouprow:first-child { margin-top: 30px; }
.rq-home-content .q-adv-groups .q-grouprow .q-grouptitle { display: inline-block; margin: 0; padding: 0; line-height: 1.25; font-size: 19px; font-weight: 800; color: var(--ink); letter-spacing: .01em; }
/* 「全選/清除」＝操作鍵：緊跟標題右邊，小型描邊、明顯比標題與選項小，一看就是操作而非選項 */
.rq-home-content .q-adv-groups .q-allbtn { flex: none; min-height: 26px; padding: 0 12px; border: 1px solid var(--rq-line); border-radius: 999px; background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 700; cursor: pointer; transition: .14s; }
.rq-home-content .q-adv-groups .q-allbtn:hover { border-color: rgba(0, 111, 120, 0.4); color: var(--teal); }
.rq-home-content .q-adv-groups .q-allbtn.on { color: var(--teal-deep); border-color: rgba(0, 111, 120, 0.3); background: rgba(0, 111, 120, 0.06); }

.rq-home-content .q-adv .q-start {
  min-height: 56px;
  font-size: 17px;
}

#q-app > .q-card:not(.q-result-card) {
  max-width: 940px;
  margin: 0 auto;
  padding: clamp(30px, 3vw, 42px);
  border-color: rgba(6, 57, 64, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(100deg, rgba(237, 248, 248, 0.55), rgba(255, 254, 251, 0.96)),
    #fffefb;
  box-shadow: 0 12px 34px rgba(6, 57, 64, 0.045);
}

#q-app > .q-card:not(.q-result-card) .q-head h1 {
  font-size: clamp(28px, 2.3vw, 38px);
}

#q-app > .q-card:not(.q-result-card) .q-resume {
  display: grid;
  gap: 18px;
  justify-items: start;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.85;
}

#q-app > .q-card:not(.q-result-card) .q-resume-ic {
  font-size: 34px;
}

#q-app > .q-card:not(.q-result-card) .q-resume-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

#q-app > .q-card:not(.q-result-card) .q-btn {
  min-height: 48px;
  padding: 0 20px;
  border-radius: 8px;
  font-size: 16px;
}

.rq-topline {
  margin-bottom: 22px;
}

.rq-back {
  min-height: 38px;
  padding: 0 16px;
  font-size: 14px;
}

.rq-quiztitle {
  margin-top: 14px;
  font-size: clamp(28px, 2.2vw, 36px);
  line-height: 1.28;
}

.rq-progress {
  height: 7px;
  margin-top: 18px;
}

.rq-count {
  align-self: end;
  font-size: 16px;
  color: var(--ink);
}

.rq-meta {
  gap: 10px;
  margin-bottom: 22px;
}

.rq-tag {
  min-height: 34px;
  padding: 0 14px;
  border-color: rgba(6, 57, 64, 0.12);
  font-size: 14px;
}
/* 章節出處：柔和中性色（貼合官網），像不搶眼的出處註記 */
.rq-tag-chap {
  background: rgba(6, 57, 64, 0.045);
  border-color: rgba(6, 57, 64, 0.13);
  color: var(--ink-soft);
  font-weight: 600;
}

.rq-layout {
  grid-template-columns: minmax(0, 1fr) clamp(380px, 29vw, 470px);
  gap: clamp(24px, 2.6vw, 40px);
}

.rq-card {
  border-color: rgba(6, 57, 64, 0.1);
  border-radius: 8px;
  background: #fffefb;
  box-shadow: 0 12px 32px rgba(6, 57, 64, 0.035);
}

.rq-main {
  padding: clamp(30px, 3vw, 42px);
}

.rq-question {
  padding-left: 18px;
  margin-bottom: 28px; /* 題目與選項之間的呼吸空間 */
  font-size: clamp(26px, 2vw, 32px);
  line-height: 1.48;
}
/* 第一個選項與題目再拉開一點，選項之間也留白 */
.rq-main .q-opt { margin-top: 14px; }
.rq-main .q-opt:first-of-type { margin-top: 0; }

.rq-question::before {
  width: 4px;
  height: 1.25em;
  top: 0.34em;
}

.rq-hint {
  margin-top: 24px;
  padding: 20px 24px 22px 26px;
  border: 1px solid rgba(0, 111, 120, 0.16);
  border-left: 4px solid var(--teal);
  border-radius: 8px;
  background:
    linear-gradient(110deg, rgba(237, 248, 248, 0.62), rgba(255, 254, 251, 0.94)),
    #fffefb;
  color: #21484e;
}

.rq-hint .q-stim .lbl {
  margin-bottom: 11px;
  color: var(--teal-deep);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.rq-hint .q-stim-body {
  color: #173f46;
  font-size: 19.5px;
  line-height: 1.9;
}

.rq-hint .q-stim-src {
  margin-top: 16px;
  padding-top: 14px;
  font-size: 13.5px;
}

.rq-hint-social,
.rq-hint:has(.q-social-card) {
  margin: 0 0 30px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.rq-hint-social .q-social-wrap,
.rq-hint:has(.q-social-card) .q-social-wrap {
  margin: 0;
}

.rq-hint-social .q-social-tag,
.rq-hint:has(.q-social-card) .q-social-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 11px 16px;
  border-radius: 9px;
  background: linear-gradient(180deg, #fff4e3, #ffedd4);
  border: 1px solid rgba(217, 138, 27, 0.4);
  color: #8a5410;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 8px rgba(217, 138, 27, 0.08);
}

.rq-hint-social .q-social-card,
.rq-hint:has(.q-social-card) .q-social-card {
  max-width: min(960px, 100%);
  margin: 0;
  border-color: rgba(6, 57, 64, 0.14);
  border-radius: 10px;
  box-shadow: 0 14px 32px rgba(6, 57, 64, 0.055);
}

/* 社群卡：放大字級並統一比例（原本 body17/name14.5/meta12 參差、偏小、與 18px 選項不協調） */
.rq-hint:has(.q-social-card) .q-social-body { padding: 18px 22px; font-size: 18.5px; line-height: 1.95; }
.rq-hint:has(.q-social-card) .q-social-body p { margin: 0 0 .8em; }
.rq-hint:has(.q-social-card) .q-social-body p:last-child { margin-bottom: 0; }
.rq-hint:has(.q-social-card) .q-social-header { padding: 14px 20px; }
.rq-hint:has(.q-social-card) .q-social-name { font-size: 16px; }
.rq-hint:has(.q-social-card) .q-social-meta { font-size: 13px; }
.rq-hint:has(.q-social-card) .q-social-foot { padding: 12px 20px; font-size: 13.5px; }

.rq-ophint,
.q-explain-tip {
  font-size: 14px;
  line-height: 1.7;
}

.rq-main .q-opt {
  grid-template-columns: 38px 1fr auto;
  gap: 16px;
  min-height: 72px;
  margin-top: 14px;
  padding: 17px 20px;
  border-color: rgba(6, 57, 64, 0.12);
  border-radius: 8px;
  background: #fff;
}

.rq-main .q-opt:hover {
  background: rgba(237, 248, 248, 0.45);
  border-color: rgba(0, 111, 120, 0.3);
}

.rq-main .q-opt.selected,
.rq-main .q-opt.sel {
  background: rgba(237, 248, 248, 0.76);
  box-shadow: inset 4px 0 0 var(--teal);
}

.rq-main .q-opt-key {
  width: 34px;
  height: 34px;
  font-size: 16px;
}

.rq-main .q-opt-text {
  font-size: 18px;
  line-height: 1.65;
  font-weight: 750;
}

.rq-main .q-opt .fb {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.75;
}

.rq-main .q-opt .mk {
  font-size: 24px;
}

/* 選項垂直置中修正：多選的勾選標記（.mk）原本佔格線欄位、窄螢幕還被推到第二列（grid-column:1/-1），
   把「字母＋文字」擠向上緣、看起來沒置中。改成 .mk 絕對定位（右側垂直置中、不進格線），
   選項只保留「字母｜文字」兩欄並 align-items:center，任何寬度都真正垂直置中。 */
.rq .rq-main .q-opt {
  position: relative;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}
.rq .rq-main .q-opt-multi .q-opt-main { padding-right: 30px; }
.rq .rq-main .q-opt .mk {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  grid-column: auto;
  justify-self: auto;
}

.rq-main .q-tf-row {
  gap: 18px;
  margin-top: 26px;
}

.rq-main .q-tf-btn {
  min-height: 88px;
  padding: 20px 22px;
  border-color: rgba(6, 57, 64, 0.12);
  border-radius: 8px;
}

.rq-main .q-tf-icon {
  width: 36px;
  height: 36px;
  font-size: 16px;
}

.rq-main .q-tf-text {
  font-size: 19px;
}

.rq-main .q-order-list,
.rq-main .q-match-board,
.rq-main .q-connect-board,
.rq-main .q-map-wrapper {
  margin-top: 24px;
}

.rq-main .q-order-item {
  min-height: 72px;
  padding: 16px 18px;
  border-color: rgba(6, 57, 64, 0.12);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 750;
}

.rq-main .q-drag-handle {
  color: rgba(6, 57, 64, 0.42);
}

.rq-main .q-order-num {
  width: 36px;
  height: 36px;
  font-size: 16px;
}

.rq-main .q-order-moves button {
  width: 34px;
  height: 30px;
  border-color: rgba(217, 138, 27, 0.32);
  border-radius: 8px;
  background: #fffefb;
  color: #8a4b17;
  font-size: 16px;
}

.rq-main .q-match-board {
  gap: 18px;
}

.rq-main .q-match-slot {
  grid-template-columns: minmax(200px, 0.52fr) minmax(260px, 1fr);
  gap: 16px;
}

.rq-main .q-match-label,
.rq-main .q-match-drop,
.rq-main .q-match-chip {
  min-height: 58px;
  border-color: rgba(6, 57, 64, 0.12);
  border-radius: 8px;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 750;
}

.rq-main .q-match-label {
  background: rgba(237, 248, 248, 0.52);
}

.rq-main .q-match-drop {
  background: rgba(255, 254, 251, 0.84);
}

.rq-main .q-match-pool {
  gap: 12px;
  padding: 14px;
  border-color: rgba(217, 138, 27, 0.2);
  border-radius: 8px;
  background: rgba(248, 236, 214, 0.18);
}

.rq-main .q-match-chip {
  justify-content: center;   /* column flex 缺 justify-content → 文字靠上，補上垂直置中 */
  padding: 8px 18px;
  background: #fff;
}

.rq-main .q-connect-board {
  grid-template-columns: minmax(240px, 1fr) minmax(72px, 0.2fr) minmax(300px, 1fr);
  gap: 18px;
}

.rq-main .q-connect-col {
  gap: 12px;
}

.rq-main .q-connect-item {
  min-height: 58px;
  padding: 14px 18px;
  border-color: rgba(6, 57, 64, 0.12);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 750;
}

.rq-main .q-connect-left .q-connect-item:hover,
.rq-main .q-connect-right .q-connect-item:hover,
.rq-main .q-connect-item.selected {
  border-color: rgba(0, 111, 120, 0.34);
  background: rgba(237, 248, 248, 0.62);
}

.rq-main .q-connect-item.connected {
  border-color: rgba(0, 111, 120, 0.28);
  background: rgba(237, 248, 248, 0.46);
}

.rq-main .q-map-wrapper {
  padding: 18px;
  border-color: rgba(6, 57, 64, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(237, 248, 248, 0.54), rgba(255, 254, 251, 0.95)),
    #fffefb;
}

.rq-main .q-map-label {
  font-size: 14px;
  font-weight: 800;
  fill: var(--ink);
}

.rq-side {
  top: 108px; /* 頁首 92px + 16px 呼吸空間；釘在頁首下方完整可見 */
  gap: 16px;
}

.rq-action-card,
.rq-analysis {
  padding: 22px;
  border-color: rgba(6, 57, 64, 0.1);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(6, 57, 64, 0.035);
}

.rq-button {
  min-height: 58px;
  margin-bottom: 18px;
  border-radius: 8px;
  background: var(--teal);
  color: #fff;
  font-size: 17px;
  letter-spacing: 0.02em;
}

.rq-button:disabled {
  opacity: 1;
  background: rgba(0, 111, 120, 0.34);
  color: #fff;
}

.rq-status h3,
.rq-action-card h3,
.rq-an-h {
  font-size: 20px;
}

.rq-result-msg,
.rq-an-empty {
  font-size: 15px;
  line-height: 1.85;
}

.rq-status.is-ok,
.rq-status.is-no {
  padding-left: 0;
  border-left: 0;
}

.rq-verdict {
  margin-bottom: 14px;
  font-size: 17px;
}

.rq-analysis {
  background: #fffefb;
}

/* 解析區官網化：橘色英文 kicker + serif 標題；各要點標題加金色左條 */
.rq-an-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.rq-an-kicker { flex: 0 0 auto; color: var(--gold); font-size: 12px; font-weight: 900; letter-spacing: 0.16em; }
.rq-main-col .rq-an-h { margin: 0; font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--ink); }
.rq-main-col .rq-item { padding: 18px 0; }
.rq-main-col .rq-item-h { position: relative; display: inline-block; margin-bottom: 3px; padding-left: 15px; color: var(--teal-deep); font-size: 16px; font-weight: 900; }
.rq-main-col .rq-item-h::before { content: ""; position: absolute; left: 0; top: 0.16em; width: 4px; height: 1.05em; border-radius: 2px; background: var(--gold); }

.rq-item {
  padding: 16px 0;
  border-top-color: rgba(6, 57, 64, 0.08);
}

.rq-item b {
  font-size: 16px;
}

.rq-item p {
  font-size: 15.5px;
  line-height: 1.85;
}

.rq-item .rq-ph {
  height: 8px;
  background: rgba(6, 57, 64, 0.07);
}

.q-result-card {
  border-color: rgba(6, 57, 64, 0.1);
  border-top: 1px solid rgba(6, 57, 64, 0.1);
  border-radius: 8px;
  background: #fffefb;
  box-shadow: 0 16px 38px rgba(6, 57, 64, 0.04);
}

.q-result-card .q-head-result {
  padding: 28px 34px;
  border-bottom-color: rgba(6, 57, 64, 0.09);
  background:
    linear-gradient(100deg, rgba(237, 248, 248, 0.55), rgba(255, 254, 251, 0.96)),
    #fffefb;
}

.q-result-card .q-head-main h1 {
  font-size: 27px;
}

.q-result-card .q-head-main p {
  font-size: 14.5px;
}

.q-result-card .q-hact {
  min-height: 44px;
  padding: 0 18px;
  border-color: rgba(6, 57, 64, 0.12);
  font-size: 14.5px;
}

.q-result-card .q-result {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(360px, 1.35fr);
  gap: 24px 42px;
  align-items: center;
  padding: clamp(34px, 4vw, 58px) clamp(34px, 5vw, 72px);
  text-align: left;
}

.q-result-card .q-result .big {
  grid-column: 1;
  grid-row: 1 / span 5;
  justify-self: center;
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(237, 248, 248, 0.72);
  font-size: 66px;
}

.q-result-card .q-result h2 {
  margin: 0;
  font-size: clamp(30px, 2.6vw, 42px);
}

.q-result-card .q-round-scope {
  margin: 0;
  justify-self: start;
  background: #f4f1e9;
  font-size: 14px;
}

.q-result-card .q-result-stats {
  justify-content: start;
  margin: 0;
}

.q-result-card .q-rstat {
  min-width: 150px;
  padding: 18px 22px;
  border-color: rgba(6, 57, 64, 0.1);
  border-radius: 8px;
}

.q-result-card .q-rstat .n {
  font-size: 36px;
  line-height: 1;
}

.q-result-card .q-rstat .l {
  font-size: 14px;
}

.q-result-card .q-result-note {
  margin: 0;
  max-width: 680px;
  font-size: 16px;
  line-height: 1.85;
}

.q-result-card .q-peer,
.q-result-card .q-peer-soft {
  margin: 0;
  max-width: none;
  font-size: 15px;
}

.q-result-card #q-badgestrip,
.q-result-card .q-badgestrip {
  margin: 0 clamp(34px, 5vw, 72px) 34px;
}

.q-result-card .q-review-sec {
  padding: clamp(34px, 4vw, 52px) clamp(34px, 5vw, 72px) clamp(38px, 4vw, 60px);
  border-top-color: rgba(6, 57, 64, 0.08);
  background:
    linear-gradient(180deg, rgba(237, 248, 248, 0.22), rgba(255, 254, 251, 0.98) 120px),
    #fffefb;
}

.q-result-card .q-sec-title {
  margin-bottom: 22px;
  font-size: 27px;
}

.q-result-card .q-review-cnt {
  font-size: 16px;
}

.q-result-card .q-link2 {
  min-height: 42px;
  padding: 0 18px;
  font-size: 14.5px;
}

.q-result-card .q-rvlist {
  gap: 16px;
}

.q-result-card .q-rvcard {
  padding: 22px 24px;
  border-color: rgba(6, 57, 64, 0.1);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(6, 57, 64, 0.025);
}

.q-result-card .q-rvtag {
  padding: 4px 10px;
  font-size: 12.5px;
}

.q-result-card .q-rvstim {
  padding: 14px 16px;
  border-left: 0;
  border-radius: 8px;
  background: rgba(237, 248, 248, 0.5);
  font-size: 14.5px;
  line-height: 1.75;
}

.q-result-card .q-rvq {
  font-size: 18px;
  line-height: 1.65;
}

.q-result-card .q-rvyour,
.q-result-card .q-rvans {
  font-size: 15.5px;
  line-height: 1.7;
}

.q-result-card .rq-review-exp {
  margin-top: 16px;
  padding-top: 16px;
  border-top-color: rgba(6, 57, 64, 0.08);
}

.q-result-card .q-expandall {
  margin-top: 18px;
  min-height: 54px;
  border-color: rgba(0, 111, 120, 0.18);
  border-style: solid;
  font-size: 15.5px;
}

.q-result-card .q-disclaimer-rev {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(248, 236, 214, 0.26);
  font-size: 13.5px;
}

@media (max-width: 1180px) {
  .quiz-embed-main #q-app {
    width: min(100% - 48px, 1060px);
  }

  .rq-layout,
  .rq-home {
    grid-template-columns: 1fr;
  }

  .rq-home-rail,
  .rq-side {
    position: static;
  }

  .q-result-card .q-result {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .q-result-card .q-result .big,
  .q-result-card .q-round-scope {
    justify-self: center;
  }

  .q-result-card .q-result-stats {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .quiz-embed-main #q-app {
    width: min(100% - 32px, 520px);
  }

  .rq-home-intro,
  .rq-home-block,
  .rq-main,
  .rq-action-card,
  .rq-analysis {
    padding: 22px 18px;
  }

  .rq-question {
    font-size: 23px;
  }

  .rq-main .q-opt {
    grid-template-columns: 34px 1fr;
  }

  .rq-main .q-match-slot,
  .rq-main .q-connect-board {
    grid-template-columns: 1fr;
  }

  .rq-main .q-opt .mk {
    grid-column: 1 / -1;
    justify-self: end;
  }

  .q-result-card .q-head-result {
    padding: 22px 18px;
  }

  .q-result-card .q-result,
  .q-result-card .q-review-sec {
    padding: 28px 18px;
  }
}

/* ============================================================
   仿真考卷：左右滿版。
   （另一處 `#q-app > .q-card:not(.q-result-card){ max-width:940px }` 會把考卷卡限寬置中；
   考卷卡加了 .q-exam-card，這裡等權重、更後面 → 覆寫成滿版。）
   ------------------------------------------------------------ */
#q-app > .q-card.q-exam-card { max-width: none; width: 100%; margin: 0; }

/* Result page refinement: less card-heavy, clearer metrics and inline sharing. */
.q-result-card {
  border: 0 !important;
  border-top: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.q-result-card .q-head-result {
  padding: 0 0 24px !important;
  border-bottom: 1px solid rgba(6, 57, 64, 0.12) !important;
  background: transparent !important;
}

.q-result-card .q-head-main h1 {
  font-size: 30px;
}

.q-result-card .q-head-acts {
  gap: 10px;
}

.q-result-card .q-hact {
  min-height: 44px;
  border-color: rgba(6, 57, 64, 0.16);
  background: rgba(255, 254, 251, 0.82);
}

.q-result-card .q-result {
  display: block !important;
  padding: clamp(32px, 4vw, 56px) 0 clamp(28px, 3.5vw, 48px) !important;
  text-align: left !important;
}

.q-result-card .q-result .big {
  display: none !important;
}

.q-result-card .q-result h2 {
  margin: 0 0 12px !important;
  font-size: clamp(34px, 3vw, 48px) !important;
}

.q-result-card .q-round-scope {
  display: inline-flex;
  max-width: 100%;
  margin: 0 0 28px !important;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(244, 241, 233, 0.85);
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.6;
}

.q-result-card .q-result-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  width: min(100%, 820px);
  max-width: none !important;
  margin: 0 0 28px !important;
  justify-content: stretch !important;
}

.q-result-card .q-rstat {
  min-width: 0 !important;
  padding: 0 28px !important;
  border: 0 !important;
  border-left: 1px solid rgba(6, 57, 64, 0.12) !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: left !important;
}

.q-result-card .q-rstat:first-child {
  padding-left: 0 !important;
  border-left: 0 !important;
}

.q-result-card .q-rstat .n {
  font-size: clamp(38px, 4vw, 54px) !important;
  line-height: 0.95 !important;
}

.q-result-card .q-rstat .l {
  margin-top: 9px !important;
  color: #5f7478 !important;
  font-size: 14px !important;
  white-space: nowrap;
}

.q-result-card .q-result-note {
  max-width: 760px !important;
  margin: 0 0 22px !important;
  color: var(--ink-soft);
  font-size: 17px !important;
  line-height: 1.85 !important;
}

.q-result-card .q-peer,
.q-result-card .q-peer-soft {
  max-width: 820px !important;
  margin: 0 0 24px !important;
  padding: 0 0 0 18px !important;
  border: 0 !important;
  border-left: 4px solid rgba(0, 111, 120, 0.22) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ink-soft);
  box-shadow: none !important;
}

.q-result-card .q-result-utility {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(360px, 1.25fr);
  gap: 22px;
  align-items: stretch;
  max-width: 920px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(6, 57, 64, 0.1);
}

.q-result-card #q-badgestrip,
.q-result-card .q-badgestrip {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label more" "icons more";
  align-items: center;
  gap: 4px 16px;
  min-height: 74px;
  margin: 0 !important;
  padding: 16px 18px;
  border: 1px solid rgba(0, 111, 120, 0.14);
  border-radius: 8px;
  background: rgba(237, 248, 248, 0.42);
  cursor: pointer;
}

.q-result-card .q-bs-label {
  grid-area: label;
  color: var(--ink);
  font-weight: 850;
}

.q-result-card .q-bs-icons {
  grid-area: icons;
  font-size: 20px;
  line-height: 1;
}

.q-result-card .q-bs-more {
  grid-area: more;
  color: var(--teal);
  font-weight: 850;
}

.q-result-share {
  min-height: 74px;
  padding: 16px 18px;
  border: 1px solid rgba(6, 57, 64, 0.12);
  border-radius: 8px;
  background: rgba(255, 254, 251, 0.74);
}

.q-result-share-title {
  margin-bottom: 10px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.q-share-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin: 0 8px 8px 0;
  padding: 0 14px;
  border: 1px solid rgba(0, 111, 120, 0.22);
  border-radius: 999px;
  background: #fff;
  color: var(--teal-deep);
  font-size: 13.5px;
  font-weight: 850;
  cursor: pointer;
}

.q-share-action:hover,
.q-share-action:focus-visible {
  border-color: var(--teal);
  background: var(--teal-soft);
}

.q-result-card .q-extra-wrap:not(:empty) {
  margin: 0 0 34px !important;
  padding: 30px 0 0;
  border-top: 1px solid rgba(6, 57, 64, 0.1);
}

.q-result-card .q-extra-box {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.q-result-card .q-extra-h {
  margin: 0 0 24px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 800;
}

.q-result-card .q-ansec {
  margin: 0 0 28px;
}

.q-result-card .q-anh {
  margin: 0 0 12px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.q-result-card .q-anrow {
  display: grid !important;
  grid-template-columns: 128px minmax(0, 1fr) 92px !important;
  gap: 14px;
  align-items: center;
  margin-bottom: 11px;
  font-size: 14px;
}

.q-result-card .q-anlb {
  text-align: right;
  color: var(--ink);
  font-weight: 800;
}

.q-result-card .q-anbar {
  height: 7px;
  border-radius: 99px;
  background: rgba(6, 57, 64, 0.09);
}

.q-result-card .q-anval {
  color: #547074;
  font-weight: 800;
  text-align: right;
}

.q-result-card .q-ansug {
  max-width: 820px;
  margin-top: 18px;
  padding: 0 0 0 18px;
  border: 0;
  border-left: 4px solid rgba(217, 138, 27, 0.42);
  border-radius: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.8;
}

.q-exam-score {
  font-family: "Segoe Print", "Comic Sans MS", "Bradley Hand", "Microsoft JhengHei", cursive !important;
  font-size: 112px !important;
  font-weight: 400 !important;
  letter-spacing: -8px !important;
  color: #d62226 !important;
  transform: rotate(-7deg) scale(0.72, 1.86) !important;
  opacity: 0.94;
  text-shadow: 0.5px 0.5px 0 rgba(214, 31, 31, 0.18);
}

@media (max-width: 900px) {
  .q-result-card .q-result-stats,
  .q-result-card .q-result-utility {
    grid-template-columns: 1fr !important;
  }

  .q-result-card .q-rstat {
    padding: 16px 0 !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(6, 57, 64, 0.12) !important;
  }

  .q-result-card .q-rstat:first-child {
    border-top: 0 !important;
  }

  .q-result-card .q-anrow {
    grid-template-columns: 1fr !important;
  }

  .q-result-card .q-anlb,
  .q-result-card .q-anval {
    text-align: left;
  }
}

/* Result page rebuild: the page now reads as a guided summary, not loose widgets. */
.q-result-card.q-result-redesign {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-top: 0;
  color: var(--ink);
}

.q-result-redesign .q-result-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: clamp(28px, 5vw, 86px);
  align-items: end;
  padding: clamp(14px, 2vw, 26px) 0 clamp(22px, 2.8vw, 38px);
  border-bottom: 1px solid rgba(6, 57, 64, 0.12);
}

.q-result-redesign .q-result-copy {
  max-width: 820px;
}

/* hero 左側的徽章進度 + 分享（填入分數左邊空白處） */
/* 成績頁：徽章進度＋分享，做成兩顆並排的醒目按鈕，填滿標題與分數卡之間的空白 */
.q-result-redesign .q-hero-extras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 14px;
  margin-top: 22px;
  padding-top: 0;
  border-top: 0;
}
.q-result-redesign .q-hero-badge,
.q-result-redesign .q-hero-share .q-share-toggle {
  min-height: 62px;
  padding: 14px 20px;
  border: 1px solid rgba(0, 111, 120, 0.22);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(237, 248, 248, 0.72), rgba(255, 254, 251, 0.96));
  box-shadow: 0 8px 22px rgba(6, 57, 64, 0.05);
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.q-result-redesign .q-hero-badge { display: flex; align-items: center; gap: 12px; min-width: 0; }
.q-result-redesign .q-hero-badge:hover { border-color: rgba(0, 111, 120, 0.42); transform: translateY(-1px); }
.q-result-redesign .q-hero-x-lbl { flex: 0 0 auto; color: var(--gold); font-size: 11.5px; font-weight: 900; letter-spacing: 0.12em; white-space: nowrap; }
.q-result-redesign .q-hero-share { position: relative; margin-left: 0; display: flex; }
.q-result-redesign .q-hero-share .q-share-toggle { width: 100%; justify-content: center; font-size: 15px; }
.q-result-redesign .q-hero-share .q-share-toggle:hover { transform: translateY(-1px); }
.q-share-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 1px solid rgba(0, 111, 120, 0.32); border-radius: 999px; background: #fff; color: var(--teal-deep); font-size: 14px; font-weight: 800; cursor: pointer; transition: .14s; }
.q-share-toggle:hover, .q-share-toggle.on { border-color: var(--teal); background: var(--teal-soft); }
.q-share-toggle i { font-size: 11px; transition: transform .14s; }
.q-share-toggle.on i { transform: rotate(180deg); }
.q-share-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 6; min-width: 210px; padding: 6px; border: 1px solid var(--rq-line); border-radius: 12px; background: #fff; box-shadow: 0 18px 42px rgba(2, 37, 42, 0.16); }
.q-share-pop[hidden] { display: none; }
.q-share-pop .q-result-share { display: flex; flex-direction: column; gap: 2px; }
.q-share-pop .q-result-share-title { display: none; }
.q-share-pop .q-share-action { width: 100%; text-align: left; min-height: 40px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font-size: 14px; font-weight: 700; cursor: pointer; transition: background .12s; }
.q-share-pop .q-share-action:hover { background: var(--teal-soft); color: var(--teal-deep); }

/* 同題比較：獨立區塊，標題與 NEXT/REVIEW 一致，僅有足夠資料時顯示 */
.q-result-redesign .q-result-compare { padding: clamp(22px, 2.8vw, 34px) 0; border-bottom: 1px solid rgba(6, 57, 64, 0.12); }
.q-result-redesign .q-result-compare[hidden] { display: none; }
.q-result-redesign .q-result-compare .q-section-head { margin-bottom: 16px; }

.q-result-redesign .q-result-kicker,
.q-result-redesign .q-section-kicker,
.q-result-redesign .q-action-label {
  margin-bottom: 11px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.q-result-redesign .q-result-copy h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(42px, 4vw, 60px);
  line-height: 1.08;
}

.q-result-redesign .q-result-note {
  max-width: 720px !important;
  margin: 14px 0 18px !important;
  color: #254d53;
  font-size: 17px !important;
  line-height: 1.65 !important;
}

.q-result-redesign .q-round-scope {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.5;
}

.q-result-redesign .q-round-scope span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.q-result-redesign .q-round-scope b {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(244, 241, 233, 0.9);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 850;
}

.q-result-redesign .q-score-panel {
  align-self: stretch;
  display: grid;
  align-content: center;
  padding: clamp(20px, 2.4vw, 28px);
  border-left: 5px solid var(--teal);
  border-radius: 0 8px 8px 0;
  background:
    linear-gradient(135deg, rgba(237, 248, 248, 0.82), rgba(255, 254, 251, 0.98)),
    #fffefb;
  box-shadow: 0 14px 34px rgba(6, 57, 64, 0.055);
}

.q-result-redesign .q-score-label {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.q-result-redesign .q-score-num {
  margin-top: 6px;
  color: var(--teal-deep);
  font-family: var(--sans);
  font-size: clamp(60px, 5.8vw, 82px);
  font-weight: 900;
  line-height: 0.94;
}

.q-result-redesign .q-score-denom {
  margin-top: 10px;
  color: #5f7478;
  font-size: 14.5px;
  font-weight: 800;
}

.q-result-redesign .q-score-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(6, 57, 64, 0.12);
}

.q-result-redesign .q-score-grid span {
  display: block;
  color: var(--ink);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}

.q-result-redesign .q-score-grid b {
  display: block;
  margin-top: 8px;
  color: #5f7478;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}

.q-result-redesign .q-win-banner {
  margin: 18px 0 0;
  padding: 12px 16px;
  border: 0;
  border-left: 4px solid var(--gold);
  border-radius: 0;
  background: rgba(248, 236, 214, 0.3);
  color: var(--ink);
  font-size: 15px;
  font-weight: 850;
}

.q-result-redesign .q-result-next {
  display: grid;
  grid-template-columns: minmax(240px, 0.42fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 58px);
  align-items: center;
  padding: clamp(22px, 2.8vw, 34px) 0;
  border-bottom: 1px solid rgba(6, 57, 64, 0.12);
}

.q-result-redesign .q-next-copy h2,
.q-result-redesign .q-section-head h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(28px, 2.7vw, 38px);
  line-height: 1.2;
}

.q-result-redesign .q-next-copy p,
.q-result-redesign .q-section-head p {
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.75;
}

.q-result-redesign .q-result-action-stack {
  min-width: 0;
}

.q-result-redesign .q-action-label {
  margin-bottom: 10px;
}

.q-result-redesign .q-head-acts {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-left: 0 !important;
}

.q-result-redesign .q-hact {
  min-height: 58px;
  justify-content: center;
  border: 1px solid rgba(0, 111, 120, 0.22) !important;
  border-radius: 8px !important;
  background: rgba(255, 254, 251, 0.92) !important;
  color: var(--teal-deep) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 24px rgba(6, 57, 64, 0.04);
}

.q-result-redesign .q-hact-primary {
  min-height: 62px;
  border-color: var(--teal) !important;
  background: var(--teal) !important;
  color: #fff !important;
  box-shadow: 0 16px 34px rgba(0, 111, 120, 0.18) !important;
}

.q-result-redesign .q-hact-wrong {
  border-color: rgba(217, 138, 27, 0.48) !important;
  background: rgba(217, 138, 27, 0.1) !important;
  color: #8a5a12 !important;
}

.q-result-redesign .q-hact-quiet {
  color: #5f7478 !important;
}

.q-result-redesign .q-hact:hover,
.q-result-redesign .q-hact.on {
  transform: translateY(-1px);
  border-color: var(--teal) !important;
  background: var(--teal-soft) !important;
  color: var(--teal-deep) !important;
}

.q-result-redesign .q-hact-primary:hover {
  background: var(--teal-deep) !important;
  color: #fff !important;
}

.q-result-redesign .q-hact-wrong:hover {
  border-color: rgba(217, 138, 27, 0.75) !important;
  background: rgba(217, 138, 27, 0.16) !important;
  color: #7a4e0f !important;
}

.q-result-redesign .q-hact-ic {
  font-size: 16px;
}

.q-result-redesign .q-result-support {
  display: grid;
  grid-template-columns: minmax(300px, 1.05fr) minmax(230px, 0.75fr) minmax(320px, 1.05fr);
  gap: clamp(18px, 2.6vw, 36px);
  padding: clamp(20px, 2.6vw, 32px) 0;
  border-bottom: 1px solid rgba(6, 57, 64, 0.12);
}

.q-result-redesign .q-support-block {
  min-width: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(6, 57, 64, 0.1);
}

.q-result-redesign .q-support-title,
.q-result-redesign .q-result-share-title {
  margin: 0 0 13px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.q-result-redesign .q-peer,
.q-result-redesign .q-peer-soft {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--ink-soft);
  font-size: 14.5px !important;
  line-height: 1.75 !important;
  box-shadow: none !important;
}

.q-result-redesign .q-peer-h {
  color: var(--ink);
  font-size: 15px;
}

.q-result-redesign .q-peer-bar {
  height: 9px;
  margin-top: 12px;
  border: 0;
  background: rgba(6, 57, 64, 0.1);
}

.q-result-redesign .q-peer-fill {
  height: 9px;
  background: var(--teal);
}

.q-result-redesign #q-badgestrip,
.q-result-redesign .q-badgestrip {
  display: grid !important;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label more" "icons more";
  align-items: center;
  gap: 8px 14px;
  min-height: auto;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.q-result-redesign .q-bs-label {
  grid-area: label;
  color: var(--ink);
  font-weight: 900;
}

.q-result-redesign .q-bs-icons {
  grid-area: icons;
  font-size: 25px;
  line-height: 1;
}

.q-result-redesign .q-bs-more {
  grid-area: more;
  align-self: center;
  color: var(--teal);
  font-weight: 900;
}

.q-result-redesign .q-result-share {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.q-result-redesign .q-share-action {
  min-height: 38px;
  margin: 0 8px 10px 0;
  padding: 0 15px;
  border-color: rgba(0, 111, 120, 0.26);
  background: rgba(255, 254, 251, 0.88);
  font-size: 14px;
}

.q-result-redesign .q-extra-wrap:not(:empty) {
  margin: 0 !important;
  padding: clamp(28px, 3.8vw, 42px) 0 !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(6, 57, 64, 0.12);
}

.q-result-redesign .q-analysis-panel,
.q-result-redesign .q-extra-box {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.q-result-redesign .q-section-head {
  max-width: 780px;
  margin-bottom: 26px;
}

.q-result-redesign .q-analysis-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(220px, 0.85fr) minmax(220px, 0.85fr);
  gap: clamp(24px, 4vw, 46px);
}

.q-result-redesign .q-ansec {
  margin: 0;
}

.q-result-redesign .q-anh {
  margin: 0 0 16px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0;
}

.q-result-redesign .q-anrows {
  display: grid;
  gap: 12px;
}

.q-result-redesign .q-anrow {
  display: grid !important;
  grid-template-columns: minmax(76px, 128px) minmax(0, 1fr) 86px !important;
  gap: 12px;
  align-items: center;
  margin: 0;
  font-size: 14px;
}

.q-result-redesign .q-anlb {
  color: var(--ink);
  font-weight: 850;
  text-align: right;
}

.q-result-redesign .q-anbar {
  height: 8px;
  border-radius: 99px;
  background: rgba(6, 57, 64, 0.09);
  overflow: hidden;
}

.q-result-redesign .q-anfill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--teal);
}

.q-result-redesign .q-anrow.is-mid .q-anfill {
  background: #e3a638;
}

.q-result-redesign .q-anrow.is-low .q-anfill {
  background: #c64d5b;
}

.q-result-redesign .q-anval {
  color: #5f7478;
  font-size: 13px;
  font-weight: 850;
  text-align: right;
}

.q-result-redesign .q-ansug {
  max-width: 760px;
  margin-top: 28px;
  padding: 14px 0 0 18px;
  border: 0;
  border-left: 4px solid rgba(217, 138, 27, 0.45);
  border-radius: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.8;
}

.q-result-redesign .q-resbtns {
  justify-content: flex-start;
  margin-top: 16px;
}

.q-result-redesign .q-review-sec {
  padding: clamp(28px, 4vw, 46px) 0 0 !important;
  border-top: 0 !important;
  background: transparent !important;
}

.q-result-redesign .q-review-top {
  align-items: center;
  margin-bottom: 22px;
}

.q-result-redesign .q-review-cnt {
  color: var(--rq-no-ink);
  font-size: 16px;
}

.q-result-redesign .q-link2 {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  background: #fff;
}

.q-result-redesign .q-rvlist {
  display: grid;
  gap: 20px;
}

.q-result-redesign .q-rvcard {
  padding: 20px 24px 22px;
  border: 1px solid rgba(6, 57, 64, 0.14);
  border-left: 4px solid var(--rq-no);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(6, 57, 64, 0.05);
}
.q-result-redesign .q-rvcard:first-child { padding-top: 20px; }

.q-result-redesign .q-rvhead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.q-result-redesign .q-rvnum { flex: 0 0 auto; padding: 3px 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 800; }
.q-result-redesign .q-rvsrc { color: var(--muted); font-size: 12.5px; font-weight: 600; }

.q-result-redesign .q-rvstim { margin-bottom: 12px; padding: 10px 14px; border-left: 3px solid rgba(0, 111, 120, 0.28); border-radius: 0 6px 6px 0; background: #f7fbfa; color: var(--ink-soft); font-size: 14px; line-height: 1.7; }

.q-result-redesign .q-rvq { max-width: 1040px; margin-bottom: 14px; font-size: 18px; font-weight: 800; color: var(--ink); line-height: 1.55; }

.q-result-redesign .q-rvans-box { display: grid; gap: 8px; margin-bottom: 16px; }
.q-result-redesign .q-rvans-row { display: grid; grid-template-columns: 80px 1fr; gap: 10px; align-items: start; padding: 11px 14px; border-radius: 8px; font-size: 15px; line-height: 1.5; }
.q-result-redesign .q-rvans-row.is-yours { background: var(--rq-no-soft); }
.q-result-redesign .q-rvans-row.is-correct { background: var(--rq-ok-soft); }
.q-result-redesign .q-rvans-lbl { padding-top: 1px; font-size: 13px; font-weight: 800; color: var(--ink-soft); }
.q-result-redesign .q-rvans-row.is-yours .q-rvans-val { color: var(--rq-no-ink); font-weight: 700; }
.q-result-redesign .q-rvans-row.is-correct .q-rvans-val { color: var(--rq-ok-ink); font-weight: 700; }

.q-result-redesign .q-rvexp { padding-top: 14px; border-top: 1px solid rgba(6, 57, 64, 0.09); }
.q-result-redesign .q-rvexp-h { margin-bottom: 8px; color: var(--teal-deep); font-size: 13px; font-weight: 900; letter-spacing: 0.08em; }
.q-result-redesign .q-rvexp .rq-review-exp { margin-top: 0; padding-top: 0; border-top: 0; }
.q-result-redesign .q-rvexp .rq-item { padding: 8px 0; border-top: 1px solid var(--rq-line-soft); }
.q-result-redesign .q-rvexp .rq-item:first-of-type { border-top: 0; padding-top: 0; }
.q-result-redesign .q-rvexp .rq-item b { font-size: 14.5px; color: var(--ink); }
.q-result-redesign .q-rvexp .rq-item p { margin: 5px 0 0; font-size: 14.5px; line-height: 1.75; color: var(--ink-soft); }

.q-result-redesign .q-disclaimer-rev {
  margin-top: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
}

@media (max-width: 1180px) {
  .q-result-redesign .q-result-hero,
  .q-result-redesign .q-result-next,
  .q-result-redesign .q-result-support,
  .q-result-redesign .q-analysis-grid {
    grid-template-columns: 1fr;
  }

  .q-result-redesign .q-head-acts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .q-result-redesign .q-result-copy h1 {
    font-size: 38px;
  }

  .q-result-redesign .q-score-panel {
    min-height: 0;
  }

  .q-result-redesign .q-score-grid,
  .q-result-redesign .q-head-acts,
  .q-result-redesign .q-rvans-row {
    grid-template-columns: 1fr;
  }

  .q-result-redesign .q-anrow {
    grid-template-columns: 1fr !important;
  }

  .q-result-redesign .q-anlb,
  .q-result-redesign .q-anval {
    text-align: left;
  }
}

/* Quiz question page polish: flatter, quieter, closer to the main site. */
.rq .rq-meta {
  gap: 9px;
  margin-bottom: 24px;
}

.rq .rq-tag {
  min-height: 30px;
  padding: 0 13px;
  border-color: rgba(6, 57, 64, 0.13);
  background: rgba(255, 254, 251, 0.74);
  color: #254d53;
  font-size: 13.5px;
  font-weight: 720;
}

.rq .rq-tag.strong {
  border-color: transparent;
  background: rgba(220, 239, 235, 0.88);
  color: var(--teal-deep);
  font-weight: 850;
}

.rq .rq-tag-chap {
  background: rgba(6, 57, 64, 0.035);
  color: #466368;
  font-weight: 650;
}

.rq .rq-card.rq-main {
  padding: clamp(22px, 2.6vw, 34px) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.rq .rq-question {
  margin-bottom: 28px;
  padding-left: 16px;
  font-size: clamp(27px, 2.35vw, 36px);
  line-height: 1.42;
  letter-spacing: 0;
}

.rq .rq-question::before {
  width: 3px;
  height: 1.15em;
  top: 0.38em;
  background: var(--teal);
}

.rq .rq-hint {
  margin: 0 0 30px;
  padding: clamp(18px, 2vw, 24px) 0;
  border: 0;
  border-top: 1px solid rgba(6, 57, 64, 0.12);
  border-bottom: 1px solid rgba(6, 57, 64, 0.09);
  border-radius: 0;
  background: linear-gradient(90deg, rgba(237, 248, 248, 0.34), rgba(255, 254, 251, 0) 76%);
  box-shadow: none;
  color: #173f46;
}

.rq .rq-hint .q-stim .lbl {
  margin-bottom: 12px;
  color: var(--teal-deep);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.rq .rq-hint .q-stim-body {
  color: #173f46;
  font-size: clamp(17px, 1.2vw, 19px);
  line-height: 1.9;
}

.rq .rq-hint .q-stim-src {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(6, 57, 64, 0.08);
  color: #61777a;
  font-size: 13.5px;
}

.rq .rq-hint-social,
.rq .rq-hint:has(.q-social-card) {
  margin: 0 0 32px;
  padding: 0;
  border: 0;
  background: transparent;
}

.rq .rq-hint-social .q-social-tag,
.rq .rq-hint:has(.q-social-card) .q-social-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 11px 16px;
  border: 1px solid rgba(217, 138, 27, 0.4);
  border-radius: 9px;
  background: linear-gradient(180deg, #fff4e3, #ffedd4);
  box-shadow: 0 2px 8px rgba(217, 138, 27, 0.08);
  color: #8a5410;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.rq .rq-hint-social .q-social-card,
.rq .rq-hint:has(.q-social-card) .q-social-card {
  border-color: rgba(6, 57, 64, 0.13);
  border-radius: 8px;
  background: rgba(255, 254, 251, 0.9);
  box-shadow: none;
}

.rq .q-social-header {
  background: rgba(237, 248, 248, 0.52);
  border-bottom-color: rgba(6, 57, 64, 0.08);
}

.rq .q-social-avatar {
  background: #fffefb;
  color: var(--teal-deep);
  font-size: 14px;
  font-weight: 900;
}

.rq .q-social-badge {
  border-color: rgba(217, 138, 27, 0.3);
  background: rgba(248, 236, 214, 0.34);
  color: #8a5a12;
}

.rq .q-social-actions,
.rq .q-social-stats {
  color: #5a6f72;
  font-size: 14px;
  font-weight: 700;
}
.rq .rq-hint:has(.q-social-card) .q-social-foot {
  padding: 13px 20px;
}

.rq-main .q-opt,
.rq-main .q-tf-btn {
  border-color: rgba(6, 57, 64, 0.13);
  background: rgba(255, 254, 251, 0.94);
  box-shadow: none;
}

.rq-main .q-opt:hover,
.rq-main .q-tf-btn:hover {
  border-color: rgba(0, 111, 120, 0.32);
  background: rgba(237, 248, 248, 0.34);
}

.rq-main .q-opt.selected,
.rq-main .q-opt.sel,
.rq-main .q-tf-btn.selected {
  border-color: rgba(0, 111, 120, 0.48);
  background: rgba(237, 248, 248, 0.54);
  box-shadow: inset 3px 0 0 var(--teal);
}

.rq-main .q-opt.ok,
.rq-main .q-tf-btn.ok {
  border-color: rgba(79, 141, 50, 0.34);
  background: rgba(243, 248, 240, 0.62);
  color: var(--ink);
}

.rq-main .q-opt.no,
.rq-main .q-tf-btn.no {
  border-color: rgba(191, 64, 80, 0.34);
  background: rgba(255, 245, 246, 0.58);
  color: var(--ink);
}

.rq-main .q-opt.ok .q-opt-key,
.rq-main .q-tf-btn.ok .q-tf-icon {
  border-color: rgba(79, 141, 50, 0.48);
  background: transparent;
  color: var(--rq-ok-ink);
}

.rq-main .q-opt.no .q-opt-key,
.rq-main .q-tf-btn.no .q-tf-icon {
  border-color: rgba(191, 64, 80, 0.48);
  background: transparent;
  color: var(--rq-no-ink);
}

.rq-main .q-opt .mk,
.rq-main .q-tf-btn .mk {
  color: currentColor;
  font-size: 22px;
}

.rq-main .q-tf-row {
  align-items: stretch;
}

.rq-main .q-tf-btn {
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: start;
  align-items: start;
  min-height: 132px;
  height: 100%;
}

.rq-main .q-tf-icon {
  width: 34px;
  height: 34px;
  margin-top: 1px;
  background: rgba(237, 248, 248, 0.55);
  color: var(--teal-deep);
  font-size: 15px;
  font-weight: 800;
}

.rq-main .q-tf-main {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
}

.rq-main .q-tf-text {
  font-size: 20px;
  line-height: 1.5;
  font-weight: 800;
}

.rq-main .q-tf-result {
  display: inline-flex;
  width: fit-content;
  min-height: 26px;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(237, 248, 248, 0.82);
  color: var(--teal-deep);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
}

.rq-main .q-tf-result:empty {
  display: none;
}

.rq-main .q-tf-btn .fb {
  grid-column: 1 / -1;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(6, 57, 64, 0.1);
  color: #61777a;
  font-size: 15px;
  line-height: 1.75;
}

.rq-main .q-tf-btn .mk {
  display: none;
}

.rq-main .q-tf-btn.ok {
  border-color: rgba(79, 141, 50, 0.36);
  background: rgba(246, 250, 244, 0.78);
}

.rq-main .q-tf-btn.no {
  border-color: rgba(191, 64, 80, 0.34);
  background: rgba(255, 248, 248, 0.78);
}

.rq-main .q-tf-btn.ok .q-tf-icon,
.rq-main .q-tf-btn.no .q-tf-icon {
  background: rgba(255, 254, 251, 0.72);
}

.rq-main .q-tf-btn.ok .q-tf-result {
  background: rgba(232, 242, 226, 0.95);
  color: var(--rq-ok-ink);
}

.rq-main .q-tf-btn.no .q-tf-result {
  background: rgba(253, 235, 238, 0.95);
  color: var(--rq-no-ink);
}

.rq-main .q-tf-btn.is-picked {
  box-shadow: inset 3px 0 0 var(--teal);
}

.rq .rq-action-card {
  padding: 22px;
  border: 1px solid rgba(6, 57, 64, 0.11);
  border-radius: 8px;
  background: rgba(255, 254, 251, 0.94);
  box-shadow: 0 12px 28px rgba(6, 57, 64, 0.04);
}

.rq .rq-button {
  min-height: 58px;
  margin-bottom: 18px;
  border-radius: 7px;
  box-shadow: none;
}

.rq .rq-button:disabled {
  background: rgba(0, 111, 120, 0.32);
}

.rq .rq-status {
  padding: 0;
}

.rq .rq-status h3,
.rq .rq-action-card h3 {
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 19px;
}

.rq .rq-result-msg {
  color: #61777a;
  font-size: 14.5px;
  line-height: 1.8;
}

.rq .rq-status.is-ok,
.rq .rq-status.is-no {
  padding-left: 0;
  border-left: 0;
}

.rq .rq-verdict {
  margin: 4px 0 12px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: 17px;
  font-weight: 900;
}

.rq .rq-verdict-ic {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent !important;
  color: currentColor;
  font-size: 16px;
}

.rq .rq-verdict.is-ok {
  color: var(--rq-ok-ink);
}

.rq .rq-verdict.is-no {
  color: var(--rq-no-ink);
}

.rq .rq-guidance {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(6, 57, 64, 0.1);
}

.rq .rq-guidance-title,
.rq .rq-side-hint .q-explore-hint::before {
  display: block;
  margin-bottom: 8px;
  color: var(--gold);
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.rq .rq-guidance p {
  margin: 0;
  color: #61777a;
  font-size: 13.5px;
  line-height: 1.75;
}

.rq .rq-side-hint .q-explore-hint {
  display: block;
  margin: 14px 0 0;
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid rgba(6, 57, 64, 0.08);
  border-radius: 0;
  background: transparent;
  color: #466368;
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.75;
}

.rq .rq-side-hint .q-explore-hint::before {
  content: "補充說明";
}

.rq .rq-action-card .q-practice-same {
  min-height: 44px;
  margin: 0 0 14px;
  border-color: rgba(0, 111, 120, 0.24);
  border-radius: 7px;
  background: rgba(255, 254, 251, 0.94);
  color: var(--teal-deep);
  box-shadow: none;
}

.rq .rq-analysis {
  padding: clamp(22px, 2.4vw, 30px) 0;
  border: 0;
  border-top: 1px solid rgba(6, 57, 64, 0.11);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.rq .rq-an-head {
  margin-bottom: 16px;
}

.rq .rq-main-col .rq-an-h {
  font-size: 24px;
}

.rq .rq-main-col .rq-item {
  padding: 17px 0;
  border-top-color: rgba(6, 57, 64, 0.08);
}

.rq .rq-main-col .rq-item-h {
  padding-left: 0;
  color: var(--teal-deep);
}

.rq .rq-main-col .rq-item-h::before {
  display: none;
}

.rq .rq-item p {
  color: #254d53;
  font-size: 15.5px;
  line-height: 1.85;
}

.rq .rq-note {
  display: none;
}

/* Result page quiet pass: use spacing and typography instead of many dividing lines. */
.q-result-card.q-result-redesign {
  background:
    linear-gradient(180deg, rgba(255, 254, 251, 0.98), rgba(250, 248, 243, 0.72));
}

.q-result-redesign .q-result-hero {
  align-items: center;
  border-bottom: 0;
  padding-bottom: clamp(30px, 4.6vw, 56px);
}

.q-result-redesign .q-score-panel {
  border-left: 0;
  border-top: 4px solid rgba(0, 111, 120, 0.72);
  border-radius: 10px;
  box-shadow: 0 18px 38px rgba(6, 57, 64, 0.055);
}

.q-result-redesign .q-score-grid {
  border-top: 0;
  padding-top: 0;
  gap: 18px;
}

.q-result-redesign .q-result-next {
  margin-top: 4px;
  padding: clamp(24px, 3.4vw, 42px) 0;
  border-top: 1px solid rgba(6, 57, 64, 0.08);
  border-bottom: 0;
}

.q-result-redesign .q-action-label {
  margin-bottom: 12px;
}

.q-result-redesign .q-hact {
  border-color: rgba(0, 111, 120, 0.18) !important;
  box-shadow: none;
}

.q-result-redesign .q-hact-ic {
  display: none;
}

.q-result-redesign .q-result-support {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin: 6px 0 clamp(28px, 4vw, 48px);
  padding: 18px 22px;
  border: 0;
  border-radius: 10px;
  background: rgba(237, 248, 248, 0.32);
}

.q-result-redesign .q-support-block {
  display: grid;
  grid-template-columns: minmax(110px, 150px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 0;
  border-top: 0;
}

.q-result-redesign .q-support-title,
.q-result-redesign .q-result-share-title {
  margin: 2px 0 0;
}

.q-result-redesign .q-support-block + .q-support-block {
  padding-top: 14px;
  border-top: 1px solid rgba(6, 57, 64, 0.07);
}

.q-result-redesign #q-badgestrip,
.q-result-redesign .q-badgestrip {
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "label icons more";
  gap: 12px;
}

.q-result-redesign .q-result-share {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.q-result-redesign .q-share-action {
  margin: 0;
}

.q-result-redesign .q-extra-wrap:not(:empty) {
  border-bottom: 0 !important;
}

.q-result-redesign .q-review-sec {
  padding-top: clamp(36px, 5vw, 58px) !important;
  border-top: 1px solid rgba(6, 57, 64, 0.08) !important;
}

.q-result-redesign .q-section-head {
  margin-bottom: 24px;
}

.q-result-redesign .q-review-top {
  margin-bottom: 18px;
}

.q-result-redesign .q-review-cnt {
  color: var(--ink);
  font-size: 15px;
  font-weight: 850;
}

.q-result-redesign .q-rvlist {
  gap: 16px;
}

.q-result-redesign .q-rvcard {
  padding: 24px 26px 26px;
  border: 1px solid rgba(6, 57, 64, 0.1);
  border-left: 0;
  border-radius: 10px;
  background: rgba(255, 254, 251, 0.95);
  box-shadow: 0 12px 26px rgba(6, 57, 64, 0.035);
}

.q-result-redesign .q-rvnum {
  background: rgba(0, 111, 120, 0.1);
  color: var(--teal-deep);
}

.q-result-redesign .q-rvstim {
  border-left: 0;
  border-radius: 8px;
  background: rgba(237, 248, 248, 0.38);
}

.q-result-redesign .q-rvans-box {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.q-result-redesign .q-rvans-row {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  grid-template-columns: none;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: rgba(244, 241, 233, 0.6);
  font-size: 14px;
}

.q-result-redesign .q-rvans-row.is-yours {
  border-color: rgba(191, 64, 80, 0.2);
  background: rgba(255, 245, 246, 0.62);
}

.q-result-redesign .q-rvans-row.is-correct {
  border-color: rgba(79, 141, 50, 0.2);
  background: rgba(243, 248, 240, 0.72);
}

.q-result-redesign .q-rvans-lbl {
  padding-top: 0;
  color: #5f7478;
  font-size: 12.5px;
}

.q-result-redesign .q-rvans-val {
  font-weight: 850;
}

.q-result-redesign .q-rvexp {
  padding-top: 0;
  border-top: 0;
}

.q-result-redesign .q-rvexp-h {
  margin-bottom: 10px;
}

.q-result-redesign .q-rvexp .rq-review-exp {
  display: grid;
  gap: 14px;
}

.q-result-redesign .q-rvexp .rq-item {
  padding: 0;
  border-top: 0;
}

/* Reading material: keep only the outer top/bottom rules; source is a quiet inline note. */
.rq .rq-hint {
  border-top-color: rgba(6, 57, 64, 0.12);
  border-bottom-color: rgba(6, 57, 64, 0.12);
}

.rq .rq-hint .q-stim-src {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 18px;
  padding-top: 0;
  border-top: 0;
  color: #61777a;
  font-size: 13.5px;
  line-height: 1.7;
}

.rq .rq-hint .q-src-icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 0.32em;
  background: #6f8588;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M7 3h7l4 4v14H7zM13 4.8V8h3.2zM5 6h1.5v13.5H17V21H5zM9 11h7v1.5H9zm0 3h7v1.5H9z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M7 3h7l4 4v14H7zM13 4.8V8h3.2zM5 6h1.5v13.5H17V21H5zM9 11h7v1.5H9zm0 3h7v1.5H9z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.rq .rq-hint .q-src-text {
  min-width: 0;
}

.rq .rq-hint .q-stim-src a {
  color: var(--teal-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

@media (min-width: 980px) {
  .q-result-redesign .q-result-support {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1.15fr);
  }

  .q-result-redesign .q-support-block {
    display: block;
  }

  .q-result-redesign .q-support-block + .q-support-block {
    padding-top: 0;
    border-top: 0;
  }
}

/* Question reading block: visible, quiet, and not line-heavy. */
.rq .rq-hint:not(.rq-hint-social):not(:has(.q-social-card)) {
  margin: 0 0 34px;
  padding: clamp(20px, 2.2vw, 28px) clamp(22px, 2.6vw, 32px);
  border: 1px solid rgba(0, 111, 120, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(237, 248, 248, 0.82), rgba(255, 254, 251, 0.96) 68%),
    #f7fbf9;
  box-shadow: 0 12px 28px rgba(6, 57, 64, 0.035);
}

.rq .rq-hint:not(.rq-hint-social):not(:has(.q-social-card)) .q-stim .lbl {
  display: inline-flex;
  width: fit-content;
  min-height: auto;
  align-items: center;
  margin: 0 0 16px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--teal-deep);
  font-size: 16px;
  line-height: 1.45;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.rq .rq-hint:not(.rq-hint-social):not(:has(.q-social-card)) .q-stim-body {
  color: #173f46;
  font-size: clamp(15.5px, 0.98vw, 16.5px);
  line-height: 1.9;
}

.rq .rq-hint:not(.rq-hint-social):not(:has(.q-social-card)) .q-stim-src {
  margin-top: 18px;
  padding-top: 0;
  border-top: 0;
}

.rq .rq-question {
  margin-top: 2px;
  margin-bottom: 28px;
  padding: 20px 0 0;
}

.rq .rq-question::before {
  left: 0;
  top: 0;
  width: 50px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), rgba(217, 138, 27, 0.72));
}

/* Question title group: type info and question should read as one unit. */
.rq .rq-question-block {
  margin: 2px 0 30px;
}

.rq .rq-question-block .q-typebanner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 15px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--teal-deep);
}

.rq .rq-question-block .q-tb-name {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0 13px;
  border-radius: 999px;
  background: rgba(220, 239, 235, 0.92);
  color: var(--teal-deep);
  font-size: 14.5px;
  font-weight: 900;
}

.rq .rq-question-block .q-tb-hint {
  color: #5f7478;
  font-size: 14.5px;
  font-weight: 650;
}

.rq .rq-question-block .q-tb-hint::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  margin: 0 10px 0 2px;
  vertical-align: middle;
  background: rgba(6, 57, 64, 0.28);
}

.rq .rq-question-block .rq-question {
  margin: 0;
  padding: 0;
}

.rq .rq-question-block .rq-question::before {
  display: none;
}

/* True/false choices: fixed order, equal height, simple circle/cross symbols. */
.rq-main .q-tf-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 18px;
}

.rq-main .q-tf-btn {
  align-self: stretch;
  height: 100%;
  min-height: 148px;
  margin: 0 !important;
  grid-template-columns: 48px minmax(0, 1fr);
  align-content: start;
  align-items: start;
  padding: 24px 24px;
}

.rq-main .q-tf-btn.selected {
  transform: none;
}

.rq-main .q-tf-icon {
  width: auto;
  height: auto;
  margin-top: -3px;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: var(--teal-deep);
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
}

.rq-main .q-tf-no .q-tf-icon {
  color: #9b4b54;
}

.rq-main .q-tf-text {
  display: block;
  padding-top: 2px;
  font-size: 20px;
  line-height: 1.5;
}

.rq-main .q-tf-btn .fb {
  margin-top: 16px;
  padding-top: 14px;
}

@media (max-width: 760px) {
  .rq-main .q-tf-row {
    grid-template-columns: 1fr;
  }
}

/* Result hero: three-column summary with square utility cards in the middle. */
.q-result-redesign .q-result-hero {
  grid-template-columns: minmax(0, 1.25fr) minmax(190px, 230px) minmax(280px, 340px);
  gap: clamp(26px, 4vw, 58px);
  align-items: center;
}

.q-result-redesign .q-result-copy {
  max-width: 760px;
}

.q-result-redesign .q-hero-extras {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-self: stretch;
  margin: 0;
}

.q-result-redesign .q-hero-card,
.q-result-redesign .q-hero-share .q-share-toggle.q-hero-card {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 148px;
  aspect-ratio: 1 / 0.78;
  align-content: center;
  justify-items: start;
  gap: 10px;
  padding: 22px 20px;
  border: 1px solid rgba(0, 111, 120, 0.2);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(237, 248, 248, 0.78), rgba(255, 254, 251, 0.98)),
    #fffefb;
  color: var(--ink);
  text-align: left;
  box-shadow: 0 14px 28px rgba(6, 57, 64, 0.045);
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.q-result-redesign .q-hero-card:hover,
.q-result-redesign .q-hero-share .q-share-toggle.q-hero-card:hover,
.q-result-redesign .q-hero-share .q-share-toggle.q-hero-card.on {
  transform: translateY(-2px);
  border-color: rgba(0, 111, 120, 0.44);
  background:
    linear-gradient(135deg, rgba(220, 239, 235, 0.86), rgba(255, 254, 251, 1)),
    #fffefb;
  box-shadow: 0 20px 36px rgba(6, 57, 64, 0.075);
}

.q-result-redesign .q-hero-card-kicker {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.q-result-redesign .q-hero-card strong {
  color: var(--teal-deep);
  font-size: 19px;
  font-weight: 900;
  line-height: 1.25;
}

.q-result-redesign .q-hero-card-meta {
  color: #5f7478;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.q-result-redesign .q-hero-share {
  position: relative;
  display: block;
}

.q-result-redesign .q-hero-share .q-share-toggle.q-hero-card i {
  position: absolute;
  right: 18px;
  bottom: 16px;
  color: var(--teal-deep);
  font-size: 12px;
}

.q-result-redesign .q-share-pop {
  left: 0;
  right: auto;
  min-width: 230px;
}

.q-result-redesign .q-score-panel {
  min-height: 300px;
  padding: clamp(28px, 3vw, 36px);
}

.q-result-redesign .q-score-label {
  color: var(--gold);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.q-result-redesign .q-score-num {
  margin-top: 10px;
  font-size: clamp(76px, 6.4vw, 96px);
}

.q-result-redesign .q-score-denom {
  font-size: 16px;
}

.q-result-redesign .q-score-grid span {
  font-size: 34px;
}

.q-result-redesign .q-score-grid b {
  font-size: 14px;
}

@media (max-width: 1180px) {
  .q-result-redesign .q-result-hero {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  }

  .q-result-redesign .q-hero-extras {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .q-result-redesign .q-hero-card,
  .q-result-redesign .q-hero-share .q-share-toggle.q-hero-card {
    min-height: 132px;
    aspect-ratio: auto;
  }
}

@media (max-width: 760px) {
  .q-result-redesign .q-result-hero,
  .q-result-redesign .q-hero-extras {
    grid-template-columns: 1fr;
  }
}

/* Final quiz readability pass: center TF options, enlarge concept text, unify guidance. */
.rq-main .q-tf-row {
  align-items: stretch;
}

.rq-main .q-tf-btn {
  min-height: 160px;
}

.rq-main .q-tf-btn:not(.show-fb) {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-content: center;
  align-items: center;
  column-gap: 18px;
  text-align: center;
}

.rq-main .q-tf-btn:not(.show-fb) .q-tf-main {
  display: block;
}

.rq-main .q-tf-btn:not(.show-fb) .q-tf-text {
  padding-top: 0;
}

.rq-main .q-tf-btn.show-fb {
  align-content: start;
}

.rq-main .q-tf-icon {
  margin-top: 0;
  font-size: 38px;
  line-height: 1;
}

.rq .rq-hint:not(.rq-hint-social):not(:has(.q-social-card)) .q-stim.q-stim-concept .lbl {
  min-height: auto;
  padding: 0;
  font-size: 16px;
  letter-spacing: 0.02em;
}

.rq .rq-hint:not(.rq-hint-social):not(:has(.q-social-card)) .q-stim.q-stim-concept .q-stim-body {
  font-size: clamp(15.5px, 0.98vw, 16.5px);
  line-height: 1.9;
}

.rq .rq-guidance {
  margin-top: 20px;
  padding: 16px 17px;
  border: 1px solid rgba(0, 111, 120, 0.13);
  border-radius: 8px;
  background: rgba(237, 248, 248, 0.38);
}

.rq .rq-guidance-title {
  margin-bottom: 10px;
  color: var(--teal-deep);
  font-size: 15px;
  letter-spacing: 0;
}

.rq .rq-guidance p,
.rq .rq-side-hint .q-explore-hint {
  color: #466368;
  font-size: 15.5px;
  font-weight: 650;
  line-height: 1.85;
}

/* 有閱讀材料時，收斂標籤列與材料之間重疊累加的垂直留白。 */
.rq:has(.rq-hint) .rq-meta {
  margin-bottom: 12px;
}

.rq:has(.rq-hint) .rq-card.rq-main {
  padding-top: clamp(10px, 1.1vw, 16px);
}

.rq .rq-side-hint .q-explore-hint {
  margin-top: 12px;
  padding-top: 0;
  border-top: 0;
}

.rq .rq-side-hint .q-explore-hint::before {
  display: none;
  content: none;
}

/* Result summary rebuild: compact, readable, and no stray badge strip styling. */
.q-result-redesign .q-result-hero {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(190px, 220px) minmax(250px, 300px) !important;
  gap: clamp(24px, 3.4vw, 48px) !important;
  align-items: stretch !important;
  min-height: 0 !important;
  padding: clamp(32px, 4vw, 54px) 0 clamp(34px, 4vw, 54px) !important;
  border-bottom: 1px solid rgba(6, 57, 64, 0.1);
}

.q-result-redesign .q-result-copy {
  display: flex;
  max-width: 700px;
  min-height: 220px;
  flex-direction: column;
  justify-content: center;
}

.q-result-redesign .q-result-copy h1 {
  margin: 10px 0 10px;
  font-size: clamp(42px, 4.1vw, 58px);
  line-height: 1.08;
}

.q-result-redesign .q-result-note {
  max-width: 560px;
  font-size: 18px;
  line-height: 1.7;
}

.q-result-redesign .q-round-scope {
  display: flex;
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  padding: 0;
  border: 0;
  background: transparent;
}

.q-result-redesign .q-round-scope span {
  align-self: center;
  color: var(--gold);
  font-size: 13px;
  font-weight: 900;
}

.q-result-redesign .q-round-scope b {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(238, 235, 226, 0.72);
  color: var(--teal-deep);
  font-size: 14px;
  font-weight: 850;
}

.q-result-redesign .q-hero-extras {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  align-self: center !important;
  margin: 0 !important;
}

.q-result-redesign .q-hero-card,
.q-result-redesign .q-hero-share .q-share-toggle.q-hero-card,
.q-result-redesign #q-hero-badges {
  position: relative;
  display: flex !important;
  width: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 22px !important;
  border: 1px solid rgba(0, 111, 120, 0.24) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(135deg, rgba(237, 248, 248, 0.84), rgba(255, 254, 251, 0.98)),
    #fffefb !important;
  color: var(--ink) !important;
  text-align: left !important;
  box-shadow: 0 16px 34px rgba(6, 57, 64, 0.055) !important;
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.q-result-redesign .q-hero-card:hover,
.q-result-redesign .q-hero-share .q-share-toggle.q-hero-card:hover,
.q-result-redesign .q-hero-share .q-share-toggle.q-hero-card.on,
.q-result-redesign #q-hero-badges:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 111, 120, 0.44) !important;
  box-shadow: 0 22px 42px rgba(6, 57, 64, 0.085) !important;
}

.q-result-redesign .q-hero-card-kicker {
  color: var(--gold) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.13em !important;
}

.q-result-redesign .q-hero-card strong {
  color: var(--teal-deep) !important;
  font-size: 21px !important;
  font-weight: 900 !important;
  line-height: 1.28 !important;
}

.q-result-redesign .q-hero-card strong span {
  white-space: nowrap;
}

.q-result-redesign .q-hero-card-meta {
  margin-top: auto;
  color: #50676b !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  line-height: 1.45 !important;
}

.q-result-redesign .q-hero-share {
  position: relative;
  display: block;
}

.q-result-redesign .q-hero-share .q-share-toggle.q-hero-card i {
  position: absolute;
  right: 18px;
  bottom: 16px;
  color: var(--teal-deep);
  font-size: 12px;
}

.q-result-redesign .q-share-pop {
  top: calc(100% + 8px);
  left: 0;
  right: auto;
  min-width: 230px;
}

.q-result-redesign .q-score-panel {
  min-height: 0 !important;
  align-self: center;
  padding: 30px 30px 28px !important;
  border-top: 4px solid rgba(0, 111, 120, 0.72) !important;
  border-left: 0 !important;
  border-radius: 10px !important;
  background:
    linear-gradient(135deg, rgba(237, 248, 248, 0.78), rgba(255, 254, 251, 0.98)),
    #fffefb !important;
  box-shadow: 0 20px 42px rgba(6, 57, 64, 0.065) !important;
}

.q-result-redesign .q-score-label {
  color: var(--gold) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
}

.q-result-redesign .q-score-num {
  margin-top: 8px !important;
  font-size: clamp(64px, 5.2vw, 82px) !important;
  line-height: 0.95 !important;
}

.q-result-redesign .q-score-denom {
  margin-top: 10px !important;
  color: #526a6f !important;
  font-size: 16px !important;
  font-weight: 850 !important;
}

.q-result-redesign .q-score-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin-top: 24px !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(6, 57, 64, 0.1) !important;
}

.q-result-redesign .q-score-grid div {
  min-width: 0;
}

.q-result-redesign .q-score-grid span {
  display: block;
  color: var(--teal-deep) !important;
  font-size: 31px !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
}

.q-result-redesign .q-score-grid b {
  display: block;
  margin-top: 8px;
  color: #526a6f !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
}

@media (max-width: 1180px) {
  .q-result-redesign .q-result-hero {
    grid-template-columns: minmax(0, 1fr) minmax(250px, 310px) !important;
  }

  .q-result-redesign .q-hero-extras {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .q-result-redesign .q-hero-card,
  .q-result-redesign .q-hero-share .q-share-toggle.q-hero-card,
  .q-result-redesign #q-hero-badges {
    aspect-ratio: auto !important;
    min-height: 128px !important;
  }
}

@media (max-width: 760px) {
  .q-result-redesign .q-result-hero,
  .q-result-redesign .q-hero-extras {
    grid-template-columns: 1fr !important;
  }

  .q-result-redesign .q-result-copy {
    min-height: 0;
  }

  .q-result-redesign .q-result-copy h1 {
    font-size: 40px;
  }
}

/* Result summary balance pass: horizontal utilities, lower height, single divider. */
.q-result-card.q-result-redesign {
  overflow: visible;
}

.q-result-redesign .q-result-hero {
  grid-template-columns: minmax(420px, 1fr) minmax(360px, 430px) minmax(240px, 290px) !important;
  gap: clamp(24px, 3vw, 42px) !important;
  align-items: center !important;
  padding: clamp(30px, 3.4vw, 48px) 0 clamp(30px, 3.2vw, 46px) !important;
  border-bottom: 1px solid rgba(6, 57, 64, 0.1) !important;
}

.q-result-redesign .q-result-copy {
  min-height: 0 !important;
  justify-content: center;
}

.q-result-redesign .q-result-copy h1 {
  margin: 8px 0 12px !important;
  font-size: clamp(44px, 4vw, 60px) !important;
}

.q-result-redesign .q-result-note {
  font-size: 18px !important;
  line-height: 1.65 !important;
}

.q-result-redesign .q-round-scope {
  margin-top: 22px !important;
  row-gap: 8px !important;
}

.q-result-redesign .q-hero-extras {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-self: center !important;
}

.q-result-redesign .q-hero-card,
.q-result-redesign .q-hero-share .q-share-toggle.q-hero-card,
.q-result-redesign #q-hero-badges {
  min-height: 128px !important;
  aspect-ratio: auto !important;
  justify-content: center !important;
  padding: 20px 18px !important;
  box-shadow: 0 12px 28px rgba(6, 57, 64, 0.05) !important;
}

.q-result-redesign .q-hero-card-kicker {
  font-size: 11.5px !important;
}

.q-result-redesign .q-hero-card strong {
  font-size: 20px !important;
}

.q-result-redesign .q-hero-card-meta {
  margin-top: 8px !important;
  font-size: 14px !important;
}

.q-result-redesign .q-hero-share .q-share-toggle.q-hero-card i {
  right: 15px;
  bottom: 14px;
}

.q-result-redesign .q-score-panel {
  width: 100%;
  min-height: 210px !important;
  padding: 24px 26px !important;
  box-shadow: 0 16px 34px rgba(6, 57, 64, 0.06) !important;
}

.q-result-redesign .q-score-label {
  font-size: 17px !important;
}

.q-result-redesign .q-score-num {
  font-size: clamp(58px, 4.8vw, 76px) !important;
}

.q-result-redesign .q-score-grid {
  margin-top: 18px !important;
  padding-top: 16px !important;
}

.q-result-redesign .q-score-grid span {
  font-size: 28px !important;
}

.q-result-redesign .q-result-next {
  padding-top: clamp(26px, 3vw, 38px) !important;
  border-bottom: 0 !important;
}

@media (max-width: 1280px) {
  .q-result-redesign .q-result-hero {
    grid-template-columns: minmax(340px, 1fr) minmax(300px, 360px) minmax(230px, 270px) !important;
  }
}

@media (max-width: 1080px) {
  .q-result-redesign .q-result-hero {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px) !important;
  }

  .q-result-redesign .q-hero-extras {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 760px) {
  .q-result-redesign .q-result-hero {
    grid-template-columns: 1fr !important;
  }

  .q-result-redesign .q-hero-extras {
    grid-column: auto;
    grid-row: auto;
    grid-template-columns: 1fr !important;
  }
}

/* Answer-side guidance: integrate it into the right panel, no nested card. */
.rq .rq-action-card .rq-guidance {
  display: grid !important;
  gap: 8px !important;
  margin: 24px 0 0 !important;
  padding: 18px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(6, 57, 64, 0.1) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.rq .rq-action-card .rq-guidance-title {
  margin: 0 !important;
  color: var(--gold) !important;
  font-size: 12.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em !important;
}

.rq .rq-action-card .rq-guidance p,
.rq .rq-action-card .rq-side-hint .q-explore-hint {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #536a6f !important;
  font-size: 14.5px !important;
  font-weight: 650 !important;
  line-height: 1.8 !important;
}

.rq .rq-action-card .rq-side-hint {
  display: block;
  min-height: 0;
}

.rq .rq-action-card .rq-side-hint .q-explore-hint {
  margin-top: 2px !important;
}

.rq .rq-action-card .rq-side-hint .q-explore-hint::before {
  display: none !important;
  content: none !important;
}

/* Answer guidance hierarchy: title should lead, body should read quietly. */
.rq .rq-action-card .rq-guidance-title {
  margin-bottom: 2px !important;
  color: var(--teal-deep) !important;
  font-size: 17px !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

.rq .rq-action-card .rq-guidance p,
.rq .rq-action-card .rq-side-hint .q-explore-hint {
  color: #607478 !important;
  font-size: 14.5px !important;
  font-weight: 450 !important;
  line-height: 1.85 !important;
}

.rq .rq-action-card .rq-side-hint .q-explore-hint {
  margin-top: 6px !important;
}

/* Resume prompt: make it part of the site, not a floating plugin card. */
#q-app .q-resume-panel {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(160px, 220px) auto;
  gap: clamp(24px, 4vw, 58px);
  align-items: center;
  width: min(100%, 1260px);
  margin: clamp(40px, 6vw, 72px) auto;
  padding: clamp(34px, 4vw, 52px) clamp(30px, 4.6vw, 64px);
  border-top: 1px solid rgba(6, 57, 64, 0.12);
  border-bottom: 1px solid rgba(6, 57, 64, 0.12);
  background:
    linear-gradient(105deg, rgba(237, 248, 248, 0.56), rgba(255, 254, 251, 0.92) 56%, rgba(248, 236, 214, 0.32)),
    #fffefb;
}

#q-app .q-resume-copy {
  min-width: 0;
}

#q-app .q-resume-copy .q-result-kicker {
  margin-bottom: 12px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.18em;
}

#q-app .q-resume-copy h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(34px, 3.2vw, 48px);
  line-height: 1.14;
}

#q-app .q-resume-copy p {
  max-width: 560px;
  margin: 16px 0 0;
  color: #526a6f;
  font-size: 17px;
  font-weight: 450;
  line-height: 1.75;
}

#q-app .q-resume-status {
  display: grid;
  gap: 6px;
  padding-left: 22px;
  border-left: 1px solid rgba(6, 57, 64, 0.12);
}

#q-app .q-resume-status span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

#q-app .q-resume-status strong {
  color: var(--teal-deep);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
}

#q-app .q-resume-status small {
  color: #61777a;
  font-size: 14px;
  font-weight: 600;
}

#q-app .q-resume-btns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  min-width: 180px;
}

#q-app .q-resume-btns .q-btn {
  width: 100%;
  min-height: 46px;
  margin: 0;
  border-radius: 8px;
  font-size: 15.5px;
  font-weight: 850;
}

#q-app .q-resume-primary {
  background: var(--teal);
  border-color: var(--teal);
  box-shadow: 0 12px 24px rgba(0, 111, 120, 0.14);
}

#q-app .q-resume-primary:hover {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
}

#q-app .q-resume-secondary {
  border-color: rgba(0, 111, 120, 0.25);
  background: rgba(255, 254, 251, 0.72);
  color: var(--teal-deep);
}

@media (max-width: 980px) {
  #q-app .q-resume-panel {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  #q-app .q-resume-status {
    padding-left: 0;
    padding-top: 18px;
    border-left: 0;
    border-top: 1px solid rgba(6, 57, 64, 0.1);
  }

  #q-app .q-resume-btns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  #q-app .q-resume-btns {
    grid-template-columns: 1fr;
  }
}

/* Result/next boundary: keep only one quiet divider between sections. */
.q-result-redesign .q-result-hero {
  border-bottom: 0 !important;
}

.q-result-redesign .q-result-next {
  border-top: 1px solid rgba(6, 57, 64, 0.1) !important;
  border-bottom: 0 !important;
}

/* Result hero reading order: score first, interpretation second, utilities last. */
.q-result-redesign .q-result-hero {
  grid-template-columns: minmax(260px, 330px) minmax(380px, 1fr) minmax(360px, 480px) !important;
  align-items: center !important;
  gap: clamp(28px, 3vw, 52px) !important;
}

.q-result-redesign .q-score-panel {
  order: 1 !important;
  justify-self: stretch !important;
}

.q-result-redesign .q-result-copy {
  order: 2 !important;
  max-width: 700px !important;
}

.q-result-redesign .q-hero-extras {
  order: 3 !important;
  justify-self: stretch !important;
}

@media (max-width: 1280px) {
  .q-result-redesign .q-result-hero {
    grid-template-columns: minmax(250px, 310px) minmax(0, 1fr) !important;
  }

  .q-result-redesign .q-hero-extras {
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .q-result-redesign .q-result-hero {
    grid-template-columns: 1fr !important;
  }

  .q-result-redesign .q-result-copy {
    order: 1 !important;
  }

  .q-result-redesign .q-score-panel {
    order: 2 !important;
  }

  .q-result-redesign .q-hero-extras {
    order: 3 !important;
    grid-column: auto !important;
    grid-template-columns: 1fr !important;
  }
}