/* ═════════════════════════════════════════════════════════════════
   MD.Piece v11 — Modern Overlay
   來源：preview-app-demo.html 的設計濃縮
   作用：套在 style.css + medical-warm.css 之後
   啟用：body.theme-modern（預設）
   範圍：**全螢幕統一 v11**（手機 + 桌機都套，拿掉 Y2K 雙軌）
   ═════════════════════════════════════════════════════════════════ */

/* 全域：拿掉雙軌 — desktop-only 藏起來，mobile-only 永遠顯示 */
body.theme-modern .desktop-only { display: none !important; }
body.theme-modern .mobile-only { display: block !important; }
/* 桌機不再 480px 置中 — 用滿可用空間（sidebar 已佔左邊），加 padding 留呼吸 */
@media (min-width: 1024px) {
  body.theme-modern .mobile-only {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 28px 32px 80px;
  }
  /* 卡片 / KPI / SOS 在寬螢幕展開更多欄位 */
  body.theme-modern .mobile-only .kpi-row { grid-template-columns: repeat(4, 1fr) !important; }
  body.theme-modern .mobile-only .sos-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (min-width: 1440px) {
  body.theme-modern .mobile-only .kpi-row { grid-template-columns: repeat(5, 1fr) !important; }
  body.theme-modern .mobile-only .sos-grid { grid-template-columns: repeat(6, 1fr) !important; }
}

/* ─── 隱藏所有 Y2K 視覺殘留（星空背景、CRT 掃描線、霓虹光暈）─── */
body.theme-modern #star-canvas,
body.theme-modern #starfield,
body.theme-modern .crt-vignette,
body.theme-modern .crt-scanlines,
body.theme-modern .y2k-grain,
body.theme-modern .scanline,
body.theme-modern .noise-overlay {
  display: none !important;
}

/* 中和復古字（Rigelstar / Netron）— 改用 Cormorant Garamond / Noto Sans */
body.theme-modern,
body.theme-modern h1, body.theme-modern h2, body.theme-modern h3,
body.theme-modern h4, body.theme-modern h5, body.theme-modern h6,
body.theme-modern .brand, body.theme-modern .logo,
body.theme-modern [class*="rigelstar"], body.theme-modern [class*="netron"] {
  font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
}
body.theme-modern .font-brand,
body.theme-modern [class*="brand-title"] {
  font-family: "Cormorant Garamond", "Noto Serif TC", Georgia, serif !important;
  font-style: italic;
  font-weight: 500;
}

/* 移除霓虹光暈和強烈 box-shadow（Y2K 風格） */
body.theme-modern [style*="box-shadow:0 0"][style*="--accent-glow"],
body.theme-modern [style*="--klein"],
body.theme-modern [class*="neon"],
body.theme-modern [class*="glow-"] {
  box-shadow: none !important;
  text-shadow: none !important;
}


body.theme-modern {
  /* === 字體高對比 token 覆蓋 === */
  --text:         #0F1F2E !important;
  --text-dim:     #3A5060 !important;
  --text-muted:   #6B7F92 !important;
  --navy:         #0F2A45 !important;

  /* === 暖色背景（不再冰冷灰）=== */
  background: linear-gradient(180deg, #EDE5D8 0%, #E8DDCB 100%) !important;
}

/* ─── 全站 icon 線條加粗（不再冰冷）─── */
body.theme-modern .lucide,
body.theme-modern svg.lucide {
  stroke-width: 2.4 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ─── 卡片邊框加粗 + radius 圓潤 ─── */
body.theme-modern .card,
body.theme-modern .glass-card,
body.theme-modern .home-greet,
body.theme-modern .home-hero,
body.theme-modern .home-digest,
body.theme-modern .home-ov,
body.theme-modern .home-todo,
body.theme-modern .home-info-row > *,
body.theme-modern .qr-tile,
body.theme-modern .pv-hero,
body.theme-modern .vital-card,
body.theme-modern .kpi,
body.theme-modern .ip-sos-btn,
body.theme-modern .sos-btn,
body.theme-modern .care-mode-card,
body.theme-modern .med-today-hero,
body.theme-modern .todo-card {
  border-width: 1.5px !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 0 rgba(31,61,88,0.02), 0 4px 14px -8px rgba(74,57,40,0.10) !important;
}

/* ═══════════════════════════════════════════════════════
   拼圖塊 symbols — 5 層設計（底色 + 高光 + 陰影 + 細邊 + 中心點）
   ═══════════════════════════════════════════════════════ */
body.theme-modern .puzzle-bg-layer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
  opacity: 0.55;
}

/* 卡片內文要在拼圖背景之上 */
body.theme-modern .home-hero > *,
body.theme-modern .home-greet > *,
body.theme-modern .pv-hero > *,
body.theme-modern .care-mode-card > *,
body.theme-modern .qr-tile > *,
body.theme-modern .ip-sos-btn > *,
body.theme-modern .sos-btn > * {
  position: relative;
  z-index: 1;
}
body.theme-modern .home-hero,
body.theme-modern .home-greet,
body.theme-modern .pv-hero,
body.theme-modern .care-mode-card,
body.theme-modern .qr-tile,
body.theme-modern .ip-sos-btn,
body.theme-modern .sos-btn {
  position: relative;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════
   DARK MODE — 高級藍（premium navy）
   觸發：<html class="dark"> + body.theme-modern
   ═══════════════════════════════════════════════════════ */
html.dark body.theme-modern {
  --bg:            #0D2845 !important;
  --bg-soft:       #133258 !important;
  --bg-mid:        #1D436D !important;
  --bg-deep:       #051A35 !important;
  --bg-surface:    #1D436D !important;
  --bg-glass:      #133258 !important;

  --border:        rgba(160, 200, 240, 0.20) !important;
  --border-glass:  rgba(160, 200, 240, 0.20) !important;
  --border-mid:    rgba(160, 200, 240, 0.30) !important;
  --border-strong: rgba(160, 200, 240, 0.45) !important;

  --accent:        #5DAEEC !important;
  --accent-light:  #9DCEF5 !important;
  --accent-deep:   #9DCEF5 !important;
  --accent-soft:   #1E4570 !important;
  --accent-tint:   #163A60 !important;
  --accent-glow:   #5DAEEC55 !important;

  --teal:          #6BC4B8 !important;
  --teal-deep:     #95D9CF !important;
  --teal-light:    #95D9CF !important;
  --teal-soft:     #1B3F3A !important;
  --teal-tint:     #143230 !important;
  --teal-glow:     #6BC4B855 !important;

  --klein:         #5DAEEC !important;
  --navy:          #FFFFFF !important;
  --text:          #FFFFFF !important;
  --text-dim:      #DCE7F2 !important;
  --text-muted:    #B5C5D6 !important;

  --cream:         #1D436D !important;
  --cream-dim:     #133258 !important;

  --rose:          #F0B5B5 !important;
  --rose-deep:     #F8C8C8 !important;
  --rose-soft:     #3D2828 !important;
  --rose-tint:     #2E2222 !important;

  --green:         #7BC891 !important;
  --green-deep:    #A2DBB4 !important;
  --green-soft:    #1F3D2C !important;
  --green-tint:    #1A2E22 !important;

  --amber:         #E5BC7C !important;
  --amber-deep:    #F4D196 !important;
  --amber-soft:    #3D2E18 !important;
  --amber-tint:    #2E2418 !important;

  --purple:        #B0B8DC !important;
}

/* dark body bg — 深邃藍漸層 */
html.dark body.theme-modern {
  background: linear-gradient(180deg, #051A35 0%, #0A2548 50%, #0F2D54 100%) !important;
}

/* dark 卡片全面換深底 */
html.dark body.theme-modern .card,
html.dark body.theme-modern .glass-card,
html.dark body.theme-modern .home-greet,
html.dark body.theme-modern .home-hero,
html.dark body.theme-modern .home-digest,
html.dark body.theme-modern .home-ov,
html.dark body.theme-modern .home-todo,
html.dark body.theme-modern .home-info-row > *,
html.dark body.theme-modern .qr-tile,
html.dark body.theme-modern .pv-hero,
html.dark body.theme-modern .vital-card,
html.dark body.theme-modern .kpi,
html.dark body.theme-modern .ip-sos-btn,
html.dark body.theme-modern .sos-btn,
html.dark body.theme-modern .care-mode-card,
html.dark body.theme-modern .med-today-hero,
html.dark body.theme-modern .todo-card,
html.dark body.theme-modern .modal,
html.dark body.theme-modern .modal-content,
html.dark body.theme-modern .topbar,
html.dark body.theme-modern .sidebar,
html.dark body.theme-modern .tabbar,
html.dark body.theme-modern .ph-tabbar,
html.dark body.theme-modern .settings-list,
html.dark body.theme-modern .settings-row,
html.dark body.theme-modern input,
html.dark body.theme-modern textarea,
html.dark body.theme-modern select,
html.dark body.theme-modern button {
  background-color: var(--bg-mid) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* dark 透明 / 玻璃元素 */
html.dark body.theme-modern .glass {
  background-color: rgba(29, 67, 109, 0.6) !important;
  backdrop-filter: blur(20px);
}

/* dark CTA 主按鈕（避免 var(--navy) 變白白看不見） */
html.dark body.theme-modern .btn-primary,
html.dark body.theme-modern .pv-btn,
html.dark body.theme-modern .care-chip.active,
html.dark body.theme-modern .pp-btn.active,
html.dark body.theme-modern .care-mode-card.active,
html.dark body.theme-modern .care-mode-mini button.active {
  background: var(--accent) !important;
  color: #FFFFFF !important;
  border-color: var(--accent) !important;
}

/* dark 文字硬色號覆寫 */
html.dark body.theme-modern [style*="color:#1F3D58"],
html.dark body.theme-modern [style*="color: #1F3D58"],
html.dark body.theme-modern [style*="color:#0F2A45"],
html.dark body.theme-modern [style*="color:#0F1F2E"] {
  color: var(--text) !important;
}
html.dark body.theme-modern [style*="color:#4A6580"],
html.dark body.theme-modern [style*="color:#5A7388"],
html.dark body.theme-modern [style*="color:#3A5060"] {
  color: var(--text-dim) !important;
}

/* dark 任何 inline white 背景強制換深 */
html.dark body.theme-modern [style*="background:#FFFFFF"],
html.dark body.theme-modern [style*="background: #FFFFFF"],
html.dark body.theme-modern [style*="background:#fff"],
html.dark body.theme-modern [style*="background: #fff"],
html.dark body.theme-modern [style*="background:#FAFBFC"],
html.dark body.theme-modern [style*="background:#FBFCFD"],
html.dark body.theme-modern [style*="background:#F7F9FC"],
html.dark body.theme-modern [style*="background:#F4F6F8"] {
  background: var(--bg-mid) !important;
}
html.dark body.theme-modern [style*="#fff 60%"],
html.dark body.theme-modern [style*="#fff 65%"],
html.dark body.theme-modern [style*="#fff 70%"] {
  background: var(--bg-mid) !important;
}

/* dark 拼圖塊用 screen blend 在深底發光 */
html.dark body.theme-modern .puzzle-bg-layer {
  mix-blend-mode: screen;
  opacity: 0.40;
}

/* ═══════════════════════════════════════════════════════
   主題切換按鈕（fixed top-right）
   ═══════════════════════════════════════════════════════ */
.theme-toggle-btn {
  position: fixed; top: 12px; right: 12px; z-index: 9999;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: var(--bg-mid, #fff);
  border: 1.5px solid var(--border, rgba(31,61,88,0.16));
  color: var(--navy, #1F3D58);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px -3px rgba(31,61,88,0.20);
  transition: transform 0.15s;
}
.theme-toggle-btn:hover { transform: scale(1.05); }
.theme-toggle-btn .lucide { width: 20px; height: 20px; }
html.dark .theme-toggle-btn { box-shadow: 0 4px 12px -3px rgba(0,0,0,0.50); }

/* ═══════════════════════════════════════════════════════
   免責聲明 footer — 每頁底部固定
   ═══════════════════════════════════════════════════════ */
body.theme-modern .disclaimer-footer {
  padding: 8px 14px;
  background: var(--bg-soft, #F7F9FC);
  border-top: 1px solid var(--border, rgba(31,61,88,0.10));
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 10.5px; color: var(--text-dim); line-height: 1.45;
}
body.theme-modern .disclaimer-footer .lucide {
  width: 12px; height: 12px;
  color: var(--accent); flex-shrink: 0; margin-top: 1px;
}
body.theme-modern .disclaimer-footer strong { color: var(--navy); font-weight: 600; }
body.theme-modern .disclaimer-footer .emergency { color: var(--rose-deep, #C97A7A); font-weight: 600; }

/* ═══════════════════════════════════════════════════════
   藥袋 vs 我的 — 客製化欄位
   ═══════════════════════════════════════════════════════ */
body.theme-modern .med-customize {
  padding: 10px 14px 12px;
  background: var(--bg-soft, #FBFCFD);
  display: flex; flex-direction: column; gap: 6px;
}
body.theme-modern .med-customize-row {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 11.5px; line-height: 1.5;
}
body.theme-modern .med-tag {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 10px; font-weight: 600;
  flex-shrink: 0; margin-top: 1px;
}
body.theme-modern .med-tag.tag-bag {
  background: var(--bg-mid, #ECF0F4);
  color: var(--text-dim);
}
body.theme-modern .med-tag.tag-mine {
  background: var(--teal-soft, #E5F0EE);
  color: var(--teal-deep, #1F5F56);
}
body.theme-modern .med-customize-row .strikethrough {
  color: var(--text-dim);
  text-decoration: line-through;
}
body.theme-modern .med-customize-row .actual {
  color: var(--text); flex: 1;
}
body.theme-modern .med-customize-row .actual strong { color: var(--navy); }

/* ─── topbar / tabbar 對齊 v11 demo 視覺 ─────────────────────────── */

/* 隱藏不在 demo 的元素：A+ 字級切換、⚙️ 設定按鈕（多層 selector 確保贏所有 specificity 戰）*/
html body.theme-modern .topbar .app-elder-toggle,
html body.theme-modern .topbar .app-settings-btn,
html body.theme-modern #app-elder-toggle,
html body.theme-modern #app-settings-btn,
body.theme-modern .app-elder-toggle,
body.theme-modern .app-settings-btn { display: none !important; }

/* 簡化 top header：返回鈕全部頁面都隱藏。使用者可以：
 *   - 用底部 5-tab nav（首頁 / 碎片 / 記一筆 / 診前 / 醫聊）切頁
 *   - 用 ☰ hamburger 選單裡的「返回首頁」回主頁
 *   - Android 系統返回鍵（main.js 已把每個 navigateTo 推進 history stack）
 * top bar 留 ☰ / 頁名 / 中 / 月亮 / A+ 5 個 element 就好，跟首頁一致。 */
html body.theme-modern .topbar .topbar-back { display: none !important; }

/* topbar 整體：透明融入頁面背景，不再用白底+底邊把自己框成一條獨立 header bar */
body.theme-modern .topbar {
  background: transparent !important;
  border-bottom: 0 !important;
  padding: 10px 12px !important;
  gap: 6px !important;
}
body.theme-modern .topbar .hamburger,
body.theme-modern .topbar .app-lang-toggle,
body.theme-modern .topbar .app-theme-toggle {
  background: var(--bg-soft, #F7F1E5) !important;
  border: 1px solid var(--border, #E4D9C8) !important;
  border-radius: 10px !important;
  width: 36px !important; height: 36px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--navy, #1F3D58) !important;
  font-size: 14px !important;
  box-shadow: none !important;
}
body.theme-modern .topbar .topbar-back {
  background: #fff !important;
  border: 1px solid var(--border, #E4D9C8) !important;
  border-radius: 12px !important;
  padding: 6px 12px !important;
  color: var(--navy, #1F3D58) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
body.theme-modern .topbar .topbar-filename {
  background: var(--accent-tint, #EAF2F8) !important;
  border-radius: 14px !important;
  padding: 5px 11px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--accent-deep, #2F6B96) !important;
  font-family: inherit !important;
}
body.theme-modern .topbar .topbar-filename::before {
  content: "●";
  color: var(--green-deep, #2F6F47);
  margin-right: 5px;
  font-size: 9px;
  vertical-align: middle;
}

/* tabbar 對齊 demo .ph-tabbar：白底 + 圓角 FAB 藍色 */
body.theme-modern .mobile-tabbar {
  background: #fff !important;
  border-top: 1px solid var(--border, #E4D9C8) !important;
  box-shadow: 0 -4px 16px -8px rgba(31,61,88,0.08) !important;
}
body.theme-modern .mobile-tabbar .mtab {
  color: var(--text-dim, #5B6F80) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}
body.theme-modern .mobile-tabbar .mtab[data-active="true"],
body.theme-modern .mobile-tabbar .mtab.active {
  color: var(--accent-deep, #2F6B96) !important;
}
/* FAB 藍色，不再是金色（多層 selector 確保贏 #11622 .mtab.mtab-fab .mtab-fab-core 規則）*/
html body.theme-modern nav#mobile-tabbar .mtab.mtab-fab .mtab-fab-core,
body.theme-modern .mobile-tabbar .mtab-fab .mtab-fab-core,
body.theme-modern .mtab.mtab-fab .mtab-fab-core {
  background: #4A90C2 !important;
  color: #fff !important;
  border-color: #4A90C2 !important;
  box-shadow: 0 6px 18px -6px rgba(74,144,194,0.55), inset 1px 1px 0 rgba(255,255,255,0.5) !important;
}
html body.theme-modern nav#mobile-tabbar .mtab.mtab-fab .mtab-fab-ring,
body.theme-modern .mobile-tabbar .mtab-fab .mtab-fab-ring,
body.theme-modern .mtab.mtab-fab .mtab-fab-ring {
  background: rgba(74,144,194,0.12) !important;
  border-color: rgba(74,144,194,0.30) !important;
  box-shadow: 0 0 0 6px #F7F1E5 !important;
}
html body.theme-modern nav#mobile-tabbar .mtab.mtab-fab .mtab-fab-label,
body.theme-modern .mobile-tabbar .mtab-fab .mtab-fab-label,
body.theme-modern .mtab.mtab-fab .mtab-fab-label {
  color: #2F6B96 !important;
  font-size: 10.5px !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  width: max-content !important;
  min-width: 56px !important;
}

/* ─── 字體層次：不要全 Noto Sans TC 死板，三套字交叉用 ─────────────── */

/* 1. 早安卡名字用 Cormorant italic — 有手寫筆觸感 */
body.theme-modern .home-greet-title {
  font-family: "Cormorant Garamond", "Noto Serif TC", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
  font-size: 22px !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
}
/* 名字部分（最後一段）可以更大膽 */
body.theme-modern .home-greet-title strong,
body.theme-modern .home-greet-name {
  font-weight: 600 !important;
  color: var(--navy, #1F3D58) !important;
}

/* 2. KPI 大數值 — Cormorant italic（不要全部冷冰冰的等寬字）*/
body.theme-modern .kpi-mini-val,
body.theme-modern .vital-kpi-val,
body.theme-modern .home-kpi-val {
  font-family: "Cormorant Garamond", "Noto Serif TC", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 600 !important;
  font-size: 28px !important;
  letter-spacing: -0.02em !important;
  color: var(--navy, #1F3D58) !important;
  line-height: 1.05 !important;
}
/* 心情電量 "/5" 那種子單位回到 sans 小一級 */
body.theme-modern .kpi-mini-val span {
  font-family: "Noto Sans TC", system-ui, sans-serif !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

/* 3. 時間 / 倒數 / D-X — JetBrains Mono（科技感）*/
body.theme-modern .time,
body.theme-modern .med-list-row .time,
body.theme-modern .list-row .time,
body.theme-modern .pill.mono,
body.theme-modern .sec-count {
  font-family: "JetBrains Mono", "Roboto Mono", monospace !important;
  font-feature-settings: "tnum";
  letter-spacing: 0 !important;
}

/* 4. sec-title 標題 — 字距收緊 + 加重 */
body.theme-modern .sec-title,
body.theme-modern .ph-sec-title {
  font-family: "Noto Sans TC", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: -0.01em !important;
  color: var(--navy, #1F3D58) !important;
}

/* 5. 回診卡的日期 5/26 — Cormorant italic 28px（demo 風格）*/
body.theme-modern .card.tint-blue [style*="font-family"][style*="Cormorant"],
body.theme-modern .home-visit-date {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}

/* 6. 頁面 chip（topbar）— 不用全大寫 */
body.theme-modern .topbar .topbar-filename,
body.theme-modern .ph-filename {
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

/* 7. pv-hero / page hero 標題 — Cormorant italic，有報紙頭版感 */
body.theme-modern .pv-hero h1,
body.theme-modern .pv-hero h2,
body.theme-modern .pv-hero-title {
  font-family: "Cormorant Garamond", "Noto Serif TC", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}

/* 8. 內文 body / 描述用 Noto Sans TC，但 line-height 放鬆讓中文呼吸 */
body.theme-modern p,
body.theme-modern .home-greet-date,
body.theme-modern .kpi-mini-meta,
body.theme-modern .kpi-mini-explain,
body.theme-modern .sos-sub,
body.theme-modern .dose,
body.theme-modern .med-tip-card {
  font-family: "Noto Sans TC", system-ui, sans-serif !important;
  line-height: 1.55 !important;
}

/* 9. 數字進度 X / Y — sec-count 內部已是 mono 但加一點顏色 */
body.theme-modern .sec-count {
  color: var(--text-dim, #5B6F80);
  font-size: 11.5px;
  font-weight: 600;
}

/* ─── 字體層次：不要全 Noto Sans TC 死板，三套字交叉用 ─────────────── */

/* 1. 早安卡名字用 Cormorant italic — 有手寫筆觸感 */
body.theme-modern .home-greet-title {
  font-family: "Cormorant Garamond", "Noto Serif TC", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
  font-size: 22px !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
}
/* 名字部分（最後一段）可以更大膽 */
body.theme-modern .home-greet-title strong,
body.theme-modern .home-greet-name {
  font-weight: 600 !important;
  color: var(--navy, #1F3D58) !important;
}

/* 2. KPI 大數值 — Cormorant italic（不要全部冷冰冰的等寬字）*/
body.theme-modern .kpi-mini-val,
body.theme-modern .vital-kpi-val,
body.theme-modern .home-kpi-val {
  font-family: "Cormorant Garamond", "Noto Serif TC", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 600 !important;
  font-size: 28px !important;
  letter-spacing: -0.02em !important;
  color: var(--navy, #1F3D58) !important;
  line-height: 1.05 !important;
}
/* 心情電量 "/5" 那種子單位回到 sans 小一級 */
body.theme-modern .kpi-mini-val span {
  font-family: "Noto Sans TC", system-ui, sans-serif !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

/* 3. 時間 / 倒數 / D-X — JetBrains Mono（科技感）*/
body.theme-modern .time,
body.theme-modern .med-list-row .time,
body.theme-modern .list-row .time,
body.theme-modern .pill.mono,
body.theme-modern .sec-count {
  font-family: "JetBrains Mono", "Roboto Mono", monospace !important;
  font-feature-settings: "tnum";
  letter-spacing: 0 !important;
}

/* 4. sec-title 標題 — 字距收緊 + 加重 */
body.theme-modern .sec-title,
body.theme-modern .ph-sec-title {
  font-family: "Noto Sans TC", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: -0.01em !important;
  color: var(--navy, #1F3D58) !important;
}

/* 5. 回診卡的日期 5/26 — Cormorant italic 28px（demo 風格）*/
body.theme-modern .card.tint-blue [style*="font-family"][style*="Cormorant"],
body.theme-modern .home-visit-date {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}

/* 6. 頁面 chip（topbar）— 不用全大寫 */
body.theme-modern .topbar .topbar-filename,
body.theme-modern .ph-filename {
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

/* 7. pv-hero / page hero 標題 — Cormorant italic，有報紙頭版感 */
body.theme-modern .pv-hero h1,
body.theme-modern .pv-hero h2,
body.theme-modern .pv-hero-title {
  font-family: "Cormorant Garamond", "Noto Serif TC", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}

/* 8. 內文 body / 描述用 Noto Sans TC，但 line-height 放鬆讓中文呼吸 */
body.theme-modern p,
body.theme-modern .home-greet-date,
body.theme-modern .kpi-mini-meta,
body.theme-modern .kpi-mini-explain,
body.theme-modern .sos-sub,
body.theme-modern .dose,
body.theme-modern .med-tip-card {
  font-family: "Noto Sans TC", system-ui, sans-serif !important;
  line-height: 1.55 !important;
}

/* 9. 數字進度 X / Y — sec-count 內部已是 mono 但加一點顏色 */
body.theme-modern .sec-count {
  color: var(--text-dim, #5B6F80);
  font-size: 11.5px;
  font-weight: 600;
}

/* ─── 暗色模式 dark contrast 修正 ─────────────────────────────────
 * 使用者回報：暗色模式下底部 nav 標籤跟 topbar 按鈕看不清楚 +
 * 切頁過程瞬間閃淺色。
 *
 * 重點 1（dark mode 系統有兩套）：
 *   - html.dark + body.theme-modern  ← v11-modern.css 大部分規則用這個
 *   - #app-wrapper[data-theme="dark"]  ← topbar 月亮按鈕 toggleAppTheme() 切的是這個
 * 為了實機都生效，selector 兩套都列。
 *
 * 重點 2（切頁閃淺色）：
 *   #app 有 animation: fadeIn .3s（每次 navigateTo 重渲都會跑），漸入時是
 *   opacity:0 → 1 透明，會透出底下色層。把 #app 跟 main-content 在暗模式
 *   都設明確深底，透明階段也只透出深色、不會閃白。
 */
#app-wrapper[data-theme="dark"] .mobile-tabbar,
html.dark body.theme-modern .mobile-tabbar {
  background: #133258 !important;
  border-top: 1px solid rgba(160,200,240,0.25) !important;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.40) !important;
}
#app-wrapper[data-theme="dark"] .mobile-tabbar .mtab,
html.dark body.theme-modern .mobile-tabbar .mtab {
  color: #C8D8EA !important;
}
#app-wrapper[data-theme="dark"] .mobile-tabbar .mtab.active,
#app-wrapper[data-theme="dark"] .mobile-tabbar .mtab[data-active="true"],
html.dark body.theme-modern .mobile-tabbar .mtab.active,
html.dark body.theme-modern .mobile-tabbar .mtab[data-active="true"] {
  color: #9DCEF5 !important;
}
#app-wrapper[data-theme="dark"] .topbar .hamburger,
#app-wrapper[data-theme="dark"] .topbar .app-lang-toggle,
#app-wrapper[data-theme="dark"] .topbar .app-theme-toggle,
html.dark body.theme-modern .topbar .hamburger,
html.dark body.theme-modern .topbar .app-lang-toggle,
html.dark body.theme-modern .topbar .app-theme-toggle {
  background: #1D436D !important;
  border: 1px solid rgba(160,200,240,0.40) !important;
  color: #FFFFFF !important;
}
#app-wrapper[data-theme="dark"] .topbar .app-theme-toggle .att-icon,
#app-wrapper[data-theme="dark"] .topbar .lang-toggle-label,
html.dark body.theme-modern .topbar .app-theme-toggle .att-icon,
html.dark body.theme-modern .topbar .lang-toggle-label {
  color: #FFFFFF !important;
}
#app-wrapper[data-theme="dark"] .topbar .topbar-filename,
html.dark body.theme-modern .topbar .topbar-filename {
  background: #1D436D !important;
  border: 1px solid rgba(160,200,240,0.30) !important;
  color: #FFFFFF !important;
}
#app-wrapper[data-theme="dark"] .topbar .topbar-filename::before,
html.dark body.theme-modern .topbar .topbar-filename::before {
  color: #7BC891 !important;
}

/* 切頁不再閃淺色：#app 跟 main-content 在暗模式給明確深底，
 * fadeIn opacity 0→1 過程中透出來的也是深色不是白。 */
#app-wrapper[data-theme="dark"] .main-content,
#app-wrapper[data-theme="dark"] #app,
html.dark body.theme-modern .main-content,
html.dark body.theme-modern #app {
  background: #051A35 !important;
}

/* ─── 行動裝置（≤760px）：topbar / bottom tabbar 拉滿版貼邊，不再做浮動圓角卡 ───
 * 原本 style.css line 11357 / 11536 把兩條 bar 都做成桌機展示用的「mock phone」
 * 浮動圓角＋ border ＋drop shadow，在真實手機上看起來會像被多套一層框。
 * 在實機上應該直接貼住螢幕上下邊：寬度 100%、無圓角、無 box-shadow。
 * （桌機寬度的 mock 預覽則保留原樣，不在這層覆蓋。）
 */
@media (max-width: 760px) {
  body.theme-modern .topbar {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    top: 0 !important;
  }
  body.theme-modern .mobile-tabbar {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05) !important;
  }
  /* 內容區去除左右 padding/margin，搭配滿版 bar 視覺一致 */
  body.theme-modern .main-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ─── 結束 ─── */