/* ════════════════════════════════════════════════════════════════
   Mobile < 540px override — 邊到邊紙面、解析卡砍雙側 margin
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 540px) {
  /* 2026-05-15 v14: 拿掉橫向 padding override, 走 practice.css 的 BS5 .container 規範 (15px gutter).
     只保留 bottom safe-area calc (action-bar + bottom-nav 雙層) */
  .q-area { padding-bottom: calc(var(--nav-h,64px) + var(--action-h,68px) + env(safe-area-inset-bottom,0px) + 24px) !important; }
  .q-card {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    margin-bottom: 8px !important;
  }
  .q-card-hdr { padding: 8px 12px !important; }
  .q-body { padding: 14px 14px 12px !important; }
  .q-text {
    font-size: 16.5px !important;
    line-height: 1.78 !important;
    max-width: none !important;
    letter-spacing: 0 !important;
  }
  .opt {
    padding: 13px 14px !important;
    min-height: 56px !important;
    font-size: .95rem !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
    border-width: 1.5px !important;
  }
  .opt-letter {
    width: 28px !important;
    height: 28px !important;
    font-size: 13px !important;
  }
  /* feedback：邊到邊（砍 line 6046 後加的雙側 18px margin） */
  .feedback {
    margin: -1px 0 12px !important;
    padding: 18px 14px !important;
    border-radius: 0 !important;
    font-size: 14.5px !important;
  }
  .feedback-exp { font-size: 14.5px !important; line-height: 1.78 !important; }
  .exp-law-quote { margin: 14px 0 14px 4px !important; padding-left: 12px !important; font-size: 14.5px !important; }
  /* exp-block 在 < 540px 沿用 mobile-first 上下堆疊（line 1309 已 flex-direction:column）*/
  /* < 540px：保留左右雙欄，僅縮 gap + 字級；標籤寬度由內容決定 */
  .exp-correct-block, .exp-wrong-block {
    gap: 10px !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
  }
  .exp-correct-label, .exp-wrong-label {
    min-width: 60px !important;     /* 手機略縮：60px 仍夠塞「第 8 條」「正確答案 C」 */
    font-size: 11.5px !important;
    padding: 3px 8px !important;
  }
  details.exp-opts > summary { padding: 16px 0 !important; font-size: 12.5px !important; }
  .q-note-prompt { padding-top: 14px !important; }
  .q-note-ta {
    min-height: 88px !important;
    font-size: 16px !important;     /* iOS 防 zoom */
    padding: 12px !important;
  }
  .fb-rel-topic { padding: 9px 14px !important; font-size: .82rem !important; min-height: 38px !important; }
}

/* ═══════════════════════════════════
   邀請好友 / Referral modal
═══════════════════════════════════ */
/* Feature flag：付費 / 推薦 各自獨立 gate（2026-05-04 拆開）
   - body.lx-paid-features-disabled 只藏付費（Lemon KYC 還沒過時開著）
   - body.lx-referral-disabled       只藏推薦（推薦獎勵是免費 +5 次評分，
                                                跟付費無關，原本被綁一起是 bug） */
body.lx-paid-features-disabled .lx-paid-feature { display: none !important; }
body.lx-referral-disabled .lx-referral-feature { display: none !important; }
.ref-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(11,16,32,.62);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; backdrop-filter: blur(4px);
  animation: refFadeIn .18s ease-out;
}
@keyframes refFadeIn { from { opacity: 0; } to { opacity: 1; } }
.ref-modal-card {
  background: var(--c-surface, #fff);
  border-radius: 16px; padding: 28px 26px 24px;
  max-width: 440px; width: 100%;
  box-shadow: 0 18px 48px rgba(11,16,32,.28);
  position: relative;
  font-family: var(--ff-sans-cn, system-ui);
  color: var(--c-text, #0b1020);
  /* iOS Safari 90vh 包含 URL bar，垂直置中時上下會超出可見區域；
     dvh 才會跟著 Safari chrome 變動。小螢幕另在 @media 改靠上對齊。 */
  max-height: 90vh;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.ref-modal-card h2 {
  font-family: var(--ff-serif-cn, serif);
  font-size: 22px; font-weight: 700; letter-spacing: -.01em;
  margin: 0 0 8px;
}
.ref-x {
  position: absolute; top: 10px; right: 12px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 50%;
  font-size: 1.1rem; line-height: 1; color: var(--c-muted, #888);
  cursor: pointer; transition: background .12s, color .12s;
  z-index: 2;
}
.ref-x:hover { background: var(--c-surface2, #f0f0f0); color: var(--c-text); }
.ref-x:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 1px; }
.ref-lead { font-size: 14px; line-height: 1.7; color: var(--c-muted, #5a6782); margin: 0 0 20px; }
.ref-lead strong { color: var(--c-vermilion, #B23A2B); font-weight: 700; }
/* 顯眼的「免費會員也能用」橫幅 — 解開「我是不是要先付費才能推薦」的疑慮 */
.ref-eligibility-banner {
  background: linear-gradient(135deg, rgba(178,58,43,.08), rgba(34,153,84,.06));
  border: 1px solid rgba(34,153,84,.25);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--c-text, #111);
  margin: 0 0 14px;
}
.ref-eligibility-banner strong { color: var(--c-vermilion, #B23A2B); }
.ref-code-row {
  display: flex; gap: 8px; margin-bottom: 14px;
}
.ref-code-input {
  flex: 1; min-width: 0;
  padding: 10px 12px;
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 13px;
  border: 1px solid var(--c-border, #dde1ed);
  border-radius: 8px;
  background: var(--c-bg, #f7f8fc);
  color: var(--c-text, #0b1020);
}
.ref-copy-btn {
  padding: 10px 16px;
  background: var(--c-vermilion, #B23A2B); color: #fff;
  border: none; border-radius: 8px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  white-space: nowrap;
}
.ref-copy-btn:hover { filter: brightness(.92); }
.ref-share-row { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.ref-share-btn {
  flex: 1; min-width: 80px;
  padding: 10px 8px;
  text-align: center; text-decoration: none;
  font-size: 12px; font-weight: 600;
  border-radius: 8px;
  border: none;       /* 2026-05-13：原本是 <a>，改 <button> 需顯式清 default border */
  cursor: pointer;
  transition: filter .15s;
}
.ref-share-btn:hover { filter: brightness(1.06); }
/* 2026-05-13 v2：native share button 全寬 — Web Share API 主路徑，
   user 點 = 開 OS 原生 share sheet → 任何 app 都能傳 (LINE / Messenger / Mail / Copy)。
   桌機沒 navigator.share fallback 為 copy clipboard。 */
.ref-share-btn.ref-share-native {
  flex: 1 0 100%; min-width: 100%;
  background: var(--c-vermilion, #B23A2B); color: #fff;
  padding: 12px 8px;
  font-size: 13px;
}
.ref-share-btn.line { background: #06C755; color: #fff; }
.ref-share-btn.fb   { background: #1877F2; color: #fff; }
.ref-share-btn.threads { background: #000; color: #fff; }
.ref-stats-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; padding: 14px 4px;
  border-top: 1px solid var(--c-border, #dde1ed);
  border-bottom: 1px solid var(--c-border, #dde1ed);
  margin-bottom: 12px;
}
.ref-stat { text-align: center; }
.ref-stat-num {
  font-family: var(--ff-serif-cn, serif);
  font-size: 22px; font-weight: 700; line-height: 1;
  color: var(--c-text, #0b1020);
}
.ref-stat-num.on { color: var(--c-vermilion, #B23A2B); }
.ref-stat-lbl { font-size: 11px; color: var(--c-muted, #5a6782); margin-top: 4px; }
.ref-foot { font-size: 12px; color: var(--c-muted, #5a6782); text-align: center; margin: 6px 0 16px; }
.ref-close {
  display: block; width: 100%;
  padding: 11px;
  background: transparent;
  border: 1px solid var(--c-border, #dde1ed);
  border-radius: 8px;
  font-size: 14px; font-weight: 500;
  color: var(--c-muted, #5a6782);
  cursor: pointer;
}
.ref-close:hover { background: var(--c-bg, #f7f8fc); }
@media (max-width: 480px) {
  /* 小螢幕：overlay 不要垂直置中，否則 modal 超過螢幕高時頭尾都被截 */
  .ref-modal-overlay { align-items: flex-start; padding: 16px 12px; }
  .ref-modal-card { padding: 22px 18px; }
  .ref-stats-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .ref-stat-num { font-size: 18px; }
}

/* a11y A11y Serious-7 fix：暗模式 .edit-cta-primary 對比 3.03:1 fail AA。
   light mode #FFFAF2 on #B23A2B ≈ 7:1 OK；dark mode #FFFAF2 on #E07158 ≈ 3:1。
   暗模式時用 --c-primary-fg=#1A0F0C 在亮的 vermilion 上反而 > 7:1 AAA。 */
[data-theme="dark"] .edit-cta-primary {
  color: var(--c-primary-fg, #1A0F0C);
}

/* ─────────────────────────────────────────────────────────
   SSR HOME FALLBACK — crawler / no-JS / AI bot 看的版本
   JS hydrate 後 _renderHome() innerHTML 覆蓋整個 #view-home
   所以這份樣式只在「JS 還沒跑 / disabled」時生效。
   設計策略：editorial typography 不要太花，重點是 H1/H2/links 階層清楚。
   ───────────────────────────────────────────────────────── */
.ssr-home-hero {
  max-width: 800px; margin: 0 auto;
  padding: 32px 20px 80px;
  font-family: var(--ff-serif-cn, 'Noto Serif TC', serif);
  color: var(--c-text);
}
.ssr-home-hero .ssr-h1 {
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 900;
  line-height: 1.2;
  margin: 0 0 12px;
  border-bottom: 3px solid var(--c-primary);
  padding-bottom: 12px;
  letter-spacing: -.01em;
}
.ssr-home-hero .ssr-tagline {
  font-size: clamp(15px, 2.2vw, 18px);
  line-height: 1.7;
  color: var(--c-muted);
  margin: 0 0 24px;
  font-family: var(--ff-sans-cn, 'Noto Sans TC', sans-serif);
}
.ssr-cta-row {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: 36px;
}
.ssr-cta-primary, .ssr-cta-secondary {
  display: inline-block; padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600; font-size: 16px;
  text-decoration: none;
  transition: all .15s;
}
.ssr-cta-primary {
  background: var(--c-primary); color: #FFFAF2;
  border: 1px solid var(--c-primary);
}
.ssr-cta-primary:hover { background: var(--c-primary-h); }
.ssr-cta-secondary {
  background: transparent; color: var(--c-primary);
  border: 1px solid var(--c-border);
}
.ssr-cta-secondary:hover { border-color: var(--c-primary); }
[data-theme="dark"] .ssr-cta-primary { color: var(--c-primary-fg, #1A0F0C); }
.ssr-home-hero .ssr-h2 {
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 700; margin: 32px 0 14px;
  color: var(--c-text);
  border-left: 4px solid var(--c-primary);
  padding-left: 12px;
}
.ssr-hub-list, .ssr-bullet-list {
  margin: 0 0 16px; padding-left: 24px;
  font-family: var(--ff-sans-cn, 'Noto Sans TC', sans-serif);
  font-size: 16px; line-height: 1.85;
}
.ssr-hub-list li, .ssr-bullet-list li { margin-bottom: 6px; }
.ssr-hub-list a {
  color: var(--c-primary); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1.5px;
  text-underline-offset: 3px; text-decoration-color: rgba(178,58,43,.3);
}
.ssr-hub-list a:hover { text-decoration-color: var(--c-primary); }
.ssr-bullet-list strong { color: var(--c-text); font-weight: 700; }
.ssr-text { font-family: var(--ff-sans-cn); font-size: 15px; line-height: 1.85; color: var(--c-muted); }
.ssr-text a { color: var(--c-primary); text-decoration: underline; }

/* 2026-05-08：全站 alert/confirm/prompt 換站風格 modal（朱印紅 + 米色）
   配合 src/client/app.ts _siteModal() helper。原 native browser dialog 黑白醜 */
.lx-site-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(28,22,18,.55);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
  opacity: 0;
  transition: opacity .22s ease;
}
.lx-site-modal-overlay.open { opacity: 1; }
.lx-site-modal-card {
  background: linear-gradient(180deg, var(--c-paper-2, #fff8f0), var(--c-paper, #f4efe6));
  border: 1.5px solid color-mix(in oklch, var(--c-vermilion, #b23a2b) 18%, var(--c-rule, #d9cfb8));
  border-radius: 16px;
  max-width: 460px; width: 100%;
  padding: 28px 28px 22px;
  position: relative;
  box-shadow: 0 24px 64px rgba(28,22,18,.25), 0 4px 16px rgba(178,58,43,.10);
  transform: translateY(12px) scale(.98);
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
  font-family: var(--ff-sans-cn);
}
.lx-site-modal-overlay.open .lx-site-modal-card { transform: translateY(0) scale(1); }
.lx-site-modal-stamp {
  position: absolute; top: 18px; right: 22px;
  font-family: var(--ff-serif-cn);
  font-size: 1.6rem; font-weight: 700;
  color: color-mix(in oklch, var(--c-vermilion, #b23a2b) 18%, transparent);
  letter-spacing: .04em;
  user-select: none;
}
.lx-site-modal-title {
  font-family: var(--ff-serif-cn);
  font-size: 1.2rem; font-weight: 700;
  color: var(--c-ink, var(--c-text));
  margin: 0 0 14px;
  letter-spacing: -.005em;
}
.lx-site-modal-body {
  font-size: .95rem; line-height: 1.65;
  color: var(--c-text);
  margin-bottom: 16px;
}
.lx-site-modal-body p { margin: 0 0 8px; }
.lx-site-modal-body p:last-child { margin-bottom: 0; }
.lx-site-modal-input {
  display: block; width: 100%;
  padding: 10px 12px;
  margin: 4px 0 18px;
  border: 1px solid var(--c-rule, #d9cfb8);
  border-radius: 8px;
  font-family: inherit;
  font-size: .95rem;
  background: var(--c-surface, #fff);
  color: var(--c-text);
}
.lx-site-modal-input:focus {
  outline: none;
  border-color: var(--c-vermilion, #b23a2b);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--c-vermilion, #b23a2b) 18%, transparent);
}
.lx-site-modal-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  flex-wrap: wrap;
}
.lx-site-modal-btn {
  padding: 10px 22px;
  border-radius: 10px;
  font-family: var(--ff-sans-cn);
  font-size: .92rem; font-weight: 600;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all .15s;
  letter-spacing: .01em;
}
.lx-site-modal-btn-primary {
  background: var(--c-vermilion, #b23a2b);
  color: #fff;
  border-color: var(--c-vermilion, #b23a2b);
}
.lx-site-modal-btn-primary:hover {
  background: var(--c-vermilion-h, #962f23);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(178,58,43,.3);
}
.lx-site-modal-btn-danger {
  background: var(--c-danger, #b23a2b);
  color: #fff;
  border-color: var(--c-danger, #b23a2b);
}
.lx-site-modal-btn-danger:hover {
  filter: brightness(.92);
  transform: translateY(-1px);
}
.lx-site-modal-btn-ghost {
  background: transparent;
  color: var(--c-muted);
  border-color: var(--c-rule, #d9cfb8);
}
.lx-site-modal-btn-ghost:hover {
  background: color-mix(in oklch, var(--c-vermilion, #b23a2b) 6%, transparent);
  color: var(--c-text);
  border-color: color-mix(in oklch, var(--c-vermilion, #b23a2b) 30%, var(--c-rule));
}
@media (max-width: 480px) {
  .lx-site-modal-card { padding: 24px 22px 18px; }
  .lx-site-modal-title { font-size: 1.1rem; }
  .lx-site-modal-actions { justify-content: stretch; }
  .lx-site-modal-btn { flex: 1; padding: 11px 16px; }
}

/* ══════════════════════════════════════════════════════
   AI 模考批改回饋 modal — 考季衝刺包專屬
   2026-05-07 lunlun MVP；UI 結構先有，等 happy refine 細節
   ══════════════════════════════════════════════════════ */
.modal-mock-grade {
  padding: 24px 22px 18px;
  background: var(--c-surface, #fff);
  border-radius: 14px;
  font-family: var(--ff-sans-cn);
}
.mg-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--c-border);
}
.mg-section:first-of-type { margin-top: 8px; padding-top: 0; border-top: none; }
.mg-h3 {
  font-size: .92rem; font-weight: 700; color: var(--c-text);
  margin: 0 0 10px;
  letter-spacing: -.005em;
}

/* 整體成績 */
.mg-overall-stat {
  display: flex; align-items: baseline; gap: 14px;
  padding: 10px 14px; background: var(--c-surface2); border-radius: 10px;
  margin-bottom: 10px;
}
.mg-big-num { font-size: 2.4rem; font-weight: 800; line-height: 1; }
.mg-grade-letter {
  font-family: var(--ff-serif-cn); font-size: 1.4rem; font-weight: 700;
  color: var(--c-vermilion, #B23A2B); letter-spacing: .05em;
}
.mg-overall-meta { margin-left: auto; font-size: .8rem; color: var(--c-muted); }

.mg-subj-list { display: flex; flex-direction: column; gap: 4px; }
.mg-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 4px; font-size: .82rem;
  border-bottom: 1px dashed var(--c-border);
}
.mg-row:last-child { border-bottom: none; }

/* 上榜機率 */
.mg-prob-card {
  padding: 12px 14px; background: var(--c-surface2); border-radius: 10px;
  display: flex; align-items: center; gap: 14px;
}
.mg-prob-est { font-size: 1.6rem; font-weight: 800; flex-shrink: 0; }
.mg-prob-rationale { font-size: .82rem; line-height: 1.5; color: var(--c-text); }

/* 弱點科目 */
.mg-weak-list { display: flex; flex-direction: column; gap: 8px; }
.mg-weak-card {
  padding: 10px 12px; background: rgba(178,58,43,.06);
  border-left: 3px solid var(--c-danger, #b23a2b); border-radius: 6px;
}
.mg-weak-h { display: flex; justify-content: space-between; font-size: .88rem; margin-bottom: 4px; }
.mg-weak-diag { font-size: .8rem; color: var(--c-text); line-height: 1.55; margin-bottom: 4px; }
.mg-weak-chapters { font-size: .75rem; color: var(--c-muted); }

/* 錯誤模式 */
.mg-mistake-list { display: flex; flex-direction: column; gap: 8px; }
.mg-mistake {
  padding: 8px 12px; background: var(--c-surface2); border-radius: 6px;
}
.mg-mistake-pat { font-size: .82rem; margin-bottom: 2px; }
.mg-mistake-fix { font-size: .78rem; color: var(--c-muted); line-height: 1.5; }

/* 讀書計畫 */
.mg-plan-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.mg-plan-row {
  padding: 8px 10px; background: rgba(5,150,105,.05);
  border-left: 3px solid var(--c-success, #059669); border-radius: 4px;
  font-size: .8rem; line-height: 1.55;
}
.mg-plan-row strong { color: var(--c-success, #059669); margin-right: 6px; }
.mg-plan-chapters, .mg-plan-laws {
  font-size: .78rem; color: var(--c-muted); margin-top: 6px; line-height: 1.5;
}
.mg-plan-chapters strong, .mg-plan-laws strong { color: var(--c-text); }

/* 鼓勵 */
.mg-encouragement {
  margin-top: 16px; padding: 12px 16px;
  background: linear-gradient(135deg, rgba(178,58,43,.08), rgba(212,168,71,.08));
  border-radius: 10px;
  text-align: center; font-size: .92rem; font-weight: 600;
  color: var(--c-vermilion, #B23A2B);
  font-family: var(--ff-serif-cn);
}

/* CTA 按鈕「取得 AI 模考批改回饋」(seasonal only) */
.mock-grade-cta {
  background: linear-gradient(135deg, #B23A2B, #d4a847);
  color: white; border: none;
  font-weight: 700; letter-spacing: .02em;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.mock-grade-cta:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(178,58,43,.3);
}
.mock-grade-cta:disabled { opacity: .7; cursor: wait; }

/* 手機 RWD */
@media (max-width: 540px) {
  .modal-mock-grade { padding: 18px 14px 14px; }
  .mg-big-num { font-size: 2rem; }
  .mg-grade-letter { font-size: 1.2rem; }
  .mg-prob-est { font-size: 1.3rem; }
}

/* ══════════════════════════════════════════════════════
   月度弱點分析報告 — 月方案 / 衝刺包訂戶專屬
   wr-* 命名 prefix，沿用 mg-* 部分既有 class（mg-section / mg-h3 / mg-prob-card
   / mg-weak-card / mg-mistake / mg-encouragement）保持模考批改風格一致。
   ══════════════════════════════════════════════════════ */

.wr-section {
  background: linear-gradient(180deg, rgba(178,58,43,.025), transparent);
  border-radius: 14px;
  padding: 6px 4px 4px;
}

/* 沒報告時的 CTA empty state */
.wr-empty {
  display: flex; flex-direction: column; align-items: center;
  padding: 36px 20px; text-align: center;
  background: var(--c-surface2, #f7f4ee);
  border: 1px dashed var(--c-border);
  border-radius: 12px;
}
.wr-empty-icon { font-size: 2rem; margin-bottom: 8px; }
.wr-empty-title {
  font-size: 1.05rem; font-weight: 700; color: var(--c-text);
  margin-bottom: 4px;
}
.wr-empty-lead {
  font-size: .85rem; color: var(--c-muted); margin-bottom: 16px;
  line-height: 1.55;
}
.wr-empty-hint {
  font-size: .75rem; color: var(--c-muted); margin-top: 10px;
}

.wr-cta-primary {
  background: linear-gradient(135deg, #B23A2B, #d4a847);
  color: white; border: none;
  padding: 12px 26px;
  font-weight: 700; font-size: .92rem; letter-spacing: .02em;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  font-family: var(--ff-sans-cn);
}
.wr-cta-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(178,58,43,.32);
}
.wr-cta-primary:disabled { opacity: .7; cursor: wait; }

/* Summary card：3 區塊 grid（正確率 / 趨勢 / 累計答題） */
.wr-summary-card {
  display: flex; align-items: stretch;
  gap: 10px;
  padding: 16px 18px;
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  margin: 10px 0 14px;
}
.wr-summary-block {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 0 6px;
}
.wr-summary-divider {
  width: 1px; background: var(--c-border);
}
.wr-summary-num {
  font-size: 1.6rem; font-weight: 800; line-height: 1.1;
  color: var(--c-text);
  font-family: var(--ff-serif-cn, 'Noto Serif TC', serif);
}
.wr-summary-unit {
  font-size: .7em; font-weight: 700; margin-left: 2px;
}
.wr-summary-lbl {
  margin-top: 6px;
  font-size: .75rem; color: var(--c-muted);
  letter-spacing: .02em;
}
.wr-trend-arrow {
  display: inline-block;
  margin-right: 4px;
  font-weight: 800;
}

/* 本月讀書計畫 */
.wr-focus-list {
  list-style: none; padding: 0; margin: 6px 0 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.wr-focus-list li {
  position: relative;
  padding: 8px 10px 8px 26px;
  background: rgba(5,150,105,.05);
  border-left: 3px solid var(--c-success, #059669);
  border-radius: 4px;
  font-size: .85rem; line-height: 1.55;
  color: var(--c-text);
}
.wr-focus-list li::before {
  content: '✓';
  position: absolute; left: 8px; top: 8px;
  color: var(--c-success, #059669);
  font-weight: 700;
}
.wr-hours {
  font-size: .72rem; color: var(--c-muted);
  font-weight: 500; margin-left: 8px;
}

.wr-law-strip {
  margin-top: 10px;
  font-size: .78rem; color: var(--c-muted);
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.wr-law-chip {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(178,58,43,.08);
  color: var(--c-vermilion, #B23A2B);
  border-radius: 12px;
  font-size: .76rem; font-weight: 600;
}

/* 底部按鈕 */
.wr-actions {
  display: flex; align-items: center; gap: 12px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--c-border);
  font-size: .78rem;
}
.wr-cta-secondary {
  background: transparent;
  color: var(--c-text);
  border: 1px solid var(--c-border);
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: .8rem;
  transition: background .15s, border-color .15s;
  font-family: var(--ff-sans-cn);
}
.wr-cta-secondary:hover:not(:disabled) {
  background: var(--c-surface2);
  border-color: var(--c-text-muted, #999);
}
.wr-cta-secondary:disabled { opacity: .55; cursor: wait; }
.wr-action-hint { color: var(--c-muted); }

/* 手機 RWD */
@media (max-width: 540px) {
  .wr-summary-card { flex-direction: column; gap: 12px; padding: 14px 16px; }
  .wr-summary-divider { width: 100%; height: 1px; }
  .wr-summary-num { font-size: 1.4rem; }
  .wr-empty { padding: 26px 16px; }
}