/* ========================================================================
   Quiet Luxury Theme Overlay · v1
   Why: 當前介面顏色飽和、陰影重、圓角大，偏向「熱鬧 SaaS」風格；
        目標是把視覺往「Aesop / The Row / 日系精品」的節制感調整。
   How: 在 tailwind.css 之後載入，用相同 class 名覆寫色票與陰影，
        不修改 HTML 即可一鍵換風。
   ======================================================================== */

/* ========= Typography ========= */

/* 襯線字型用在標題，非襯線用在 body；中文維持 Noto Sans/Serif TC */
body {
  font-family: 'Inter', 'Noto Sans TC', -apple-system, 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  font-weight: 400;
  font-feature-settings: 'cv02','cv03','cv04','cv11','ss01';
  letter-spacing: -0.003em;
  background: #faf9f6 !important;
  color: #1c1c1e;
  /* 蓋掉原本的 radial gradient（太花），改成沉靜米白 */
  background-image: none !important;
}

h1, h2, h3, h4, h5 {
  font-family: 'Noto Serif TC', 'Cormorant Garamond', 'Georgia', serif;
  font-weight: 500;
  letter-spacing: -0.015em;
  /* 不強制設 color：保留 Tailwind 的 text-white / text-ink-*，
     也不破壞 bg-clip-text 漸層文字（color:transparent） */
}

/* 粗體退一級，避免全版「感覺太用力」 */
.font-bold  { font-weight: 600 !important; }
.font-semibold { font-weight: 500 !important; }

/* 數字用系統 tabular 更對齊 */
.num {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ========= Color tokens ========= */
/*
 * ink scale：從冷灰轉為暖米灰（warm-grey / bone）
 * accent：從亮靛藍轉為深午夜藍（muted navy）
 * 強調色：引入柔金（brass / champagne），用在重要數字
 */

/* 背景層 */
.bg-ink-50  { background-color: #f7f5f0 !important; }
.bg-ink-100 { background-color: #eeebe3 !important; }
.bg-ink-200 { background-color: #e0ddd3 !important; }
.bg-white   { background-color: #ffffff !important; }
html.dark .bg-white { background-color: #1a1a1c !important; }

/* 深色面塊（主 CTA 維持實心） */
.bg-ink-800 { background-color: #2a2725 !important; }
.bg-ink-900 { background-color: #1c1c1e !important; }
.hover\:bg-ink-800:hover { background-color: #2a2725 !important; }

/* -------- Active state 降重 --------
   主要 CTA（「新增食材」、「開啟試算」等 button）直接寫 bg-ink-900 使用實心深；
   但分頁切換、分類 chip 的 active 也用 bg-ink-900 就太重。
   pattern：Tab / chip 共同特徵是外層父層為 rounded pill + p-1 容器，
   我們針對這個容器裡的 ink-900 active item 改為米底 + 深墨字 */
nav[x-show] > button.bg-ink-900,
.flex.items-center.rounded-full.bg-white\/80 button.bg-ink-900,
.flex.items-center.rounded-full > button.bg-ink-900,
.flex.rounded-full.border > button.bg-ink-900 {
  background-color: #eeebe3 !important;   /* ink-100 warm bone */
  color: #1c1c1e !important;
  box-shadow: inset 0 0 0 1px #2a2725 !important; /* thin dark outline */
}
/* Filter chip（食材頁分類那排） — chip 單獨是 rounded-full button */
button.rounded-full.bg-ink-900,
button.rounded-full.bg-ink-900.text-white {
  background-color: #eeebe3 !important;
  color: #1c1c1e !important;
  box-shadow: inset 0 0 0 1px #2a2725 !important;
}

/* Dark mode 對應：用深灰米 + 淡金字 */
html.dark nav[x-show] > button.bg-ink-900,
html.dark .flex.items-center.rounded-full > button.bg-ink-900,
html.dark button.rounded-full.bg-ink-900,
html.dark button.rounded-full.bg-ink-900.text-white {
  background-color: #2d2d30 !important;
  color: #f0ede5 !important;
  box-shadow: inset 0 0 0 1px #5a564d !important;
}

/* 文字色 */
.text-ink-300 { color: #c5c2bb !important; }
.text-ink-400 { color: #a5a29a !important; }
.text-ink-500 { color: #7f7c74 !important; }
.text-ink-600 { color: #605d56 !important; }
.text-ink-700 { color: #44413c !important; }
.text-ink-800 { color: #2a2725 !important; }
.text-ink-900 { color: #1c1c1e !important; }
.hover\:text-ink-900:hover { color: #1c1c1e !important; }
.hover\:text-ink-800:hover { color: #2a2725 !important; }

/* 邊框統一極淡 */
.border-ink-100 { border-color: #f1eee7 !important; }
.border-ink-200 { border-color: #e6e2d9 !important; }
.border-ink-300 { border-color: #d4cfc4 !important; }

/* accent：從亮靛紫 → 沉靜午夜藍 */
.bg-accent-50  { background-color: #f4f2ee !important; }
.bg-accent-100 { background-color: #e7e3db !important; }
.bg-accent-500 { background-color: #2e3a5a !important; }
.bg-accent-600 { background-color: #1e2a4a !important; }
.bg-accent-700 { background-color: #14203b !important; }
.hover\:bg-accent-700:hover { background-color: #0e1a32 !important; }
.hover\:bg-accent-600:hover { background-color: #14203b !important; }

.text-accent-600 { color: #1e2a4a !important; }
.text-accent-700 { color: #14203b !important; }
.text-accent-800 { color: #0e1a32 !important; }
.hover\:text-accent-600:hover { color: #1e2a4a !important; }

.border-accent-200 { border-color: #d5cfc4 !important; }
.border-accent-300 { border-color: #c0b8a9 !important; }
.border-accent-400 { border-color: #aa9f8d !important; }
.ring-accent-300 { --tw-ring-color: #c0b8a9 !important; }
.ring-accent-500 { --tw-ring-color: #2e3a5a !important; }

/* sage（健康）→ 霧綠 muted sage */
.text-sage-700 { color: #4a6b53 !important; }
.text-sage-800 { color: #385241 !important; }
.bg-sage-50  { background-color: #f0f3ed !important; }
.bg-sage-100 { background-color: #dfe4d8 !important; }
.bg-sage-500 { background-color: #4a6b53 !important; }
.bg-sage-600 { background-color: #385241 !important; }
.border-sage-200 { border-color: #c5ccba !important; }

/* amber（琥珀）→ 柔金 champagne */
.text-amber-600, .text-amber-700 { color: #8a6e2f !important; }
.text-amber-800 { color: #6a5624 !important; }
.bg-amber-50  { background-color: #f5efe0 !important; }
.bg-amber-100 { background-color: #ece2c7 !important; }
.border-amber-200 { border-color: #d9caa2 !important; }
.border-amber-400 { border-color: #c2a86c !important; }

/* rose（警戒）→ 深酒紅 wine，保留辨識 */
.text-rose-500 { color: #a33a48 !important; }
.text-rose-600 { color: #8e2b3a !important; }
.text-rose-700 { color: #7a2432 !important; }
.bg-rose-50 { background-color: #f5e9ec !important; }
.bg-rose-100 { background-color: #eed2d7 !important; }
.border-rose-200 { border-color: #e2b9c0 !important; }

/* ========= Shadows：全部變薄，像紙張而非塑膠 ========= */
.shadow-sm    { box-shadow: 0 1px 2px rgba(28, 28, 30, 0.03) !important; }
.shadow-card  { box-shadow: 0 1px 2px rgba(28, 28, 30, 0.03), 0 2px 6px -2px rgba(28, 28, 30, 0.04) !important; }
.shadow-lift  { box-shadow: 0 2px 6px -2px rgba(28, 28, 30, 0.04), 0 16px 32px -8px rgba(28, 28, 30, 0.08) !important; }
.shadow-md    { box-shadow: 0 2px 6px -2px rgba(28, 28, 30, 0.05), 0 8px 16px -4px rgba(28, 28, 30, 0.06) !important; }
.hover\:shadow-md:hover { box-shadow: 0 2px 6px -2px rgba(28, 28, 30, 0.05), 0 8px 16px -4px rgba(28, 28, 30, 0.06) !important; }
.hover\:shadow-lift:hover { box-shadow: 0 2px 6px -2px rgba(28, 28, 30, 0.04), 0 16px 32px -8px rgba(28, 28, 30, 0.08) !important; }

/* ========= Border radius：卡片柔和但不 chibi ========= */
.rounded-2xl { border-radius: 14px !important; }
.rounded-xl  { border-radius: 10px !important; }
.rounded-lg  { border-radius: 8px !important; }

/* ========= Buttons ========= */
button, a.btn {
  transition: background-color 180ms ease, border-color 180ms ease,
              color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

/* 主要 CTA（深底 + 白字）：保留品牌深色，但去除漸層 */
.bg-gradient-to-br.from-accent-500.to-accent-600,
.bg-gradient-to-br.from-accent-600.to-accent-700 {
  background: #1e2a4a !important;
}
.hover\:from-accent-600:hover.bg-gradient-to-br,
.hover\:to-accent-700:hover.bg-gradient-to-br {
  background: #14203b !important;
}

/* ========= Inputs：極簡邊框 + focus 細金邊 ========= */
input[type=text], input[type=number], input[type=date], input[type=time],
input[type=email], select, textarea {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #1e2a4a !important;
  box-shadow: 0 0 0 3px rgba(30, 42, 74, 0.08) !important;
}

/* 去掉 focus:ring-* 的青色環（原本是靛藍 ring），改為上面的淡藍灰 */
.focus\:ring-2:focus { box-shadow: 0 0 0 3px rgba(30, 42, 74, 0.08) !important; }
.focus\:ring-accent-500\/30:focus { box-shadow: 0 0 0 3px rgba(30, 42, 74, 0.08) !important; }
.focus\:border-accent-500:focus { border-color: #1e2a4a !important; }

/* ========= Tooltip（data-tip）樣式優化 ========= */
[data-tip]:hover::after {
  background: #1c1c1e !important;
  color: #f5f3ee !important;
  letter-spacing: 0.01em;
  font-weight: 400 !important;
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.3);
}

/* ========= Dark mode 調校 ========= */
html.dark body {
  background: #0e0e0f !important;
  color: #e8e5df;
}
html.dark .bg-white { background-color: #18181a !important; }
html.dark .bg-ink-50 { background-color: #1a1a1c !important; }
html.dark .bg-ink-100 { background-color: #232326 !important; }
html.dark .bg-ink-200 { background-color: #2d2d30 !important; }
html.dark .border-ink-100 { border-color: #2a2a2c !important; }
html.dark .border-ink-200 { border-color: #333336 !important; }
html.dark .text-ink-900 { color: #f0ede5 !important; }
html.dark .text-ink-800 { color: #d8d4cb !important; }
html.dark .text-ink-700 { color: #bcb8af !important; }
html.dark .text-ink-600 { color: #9d998f !important; }
html.dark .text-ink-500 { color: #7a766d !important; }
html.dark .text-ink-400 { color: #5c5953 !important; }

/* Dark mode accent */
html.dark .bg-accent-600 { background-color: #6b7aa3 !important; }
html.dark .bg-accent-700 { background-color: #8493b8 !important; }
html.dark .text-accent-600 { color: #9ba9c8 !important; }
html.dark .text-accent-700 { color: #b5c1da !important; }

/* ========= Dark mode: soft-tint backgrounds（-50 / -100 系列） =========
   原本在淺色模式是柔米色；暗色模式需要對應的深調子底色，
   否則會在深背景上變成刺眼亮塊 */
html.dark .bg-sage-50    { background-color: #1c2620 !important; }
html.dark .bg-sage-100   { background-color: #24302a !important; }
html.dark .bg-accent-50  { background-color: #1c1f28 !important; }
html.dark .bg-accent-100 { background-color: #252a38 !important; }
html.dark .bg-amber-50   { background-color: #2a2519 !important; }
html.dark .bg-amber-100  { background-color: #332c1f !important; }
html.dark .bg-rose-50    { background-color: #2a1e22 !important; }
html.dark .bg-rose-100   { background-color: #372428 !important; }
html.dark .bg-emerald-50  { background-color: #1a2520 !important; }
html.dark .bg-emerald-100 { background-color: #1f2c27 !important; }
html.dark .bg-indigo-50   { background-color: #1c1f2e !important; }
html.dark .bg-indigo-100  { background-color: #24293b !important; }
html.dark .bg-orange-50   { background-color: #2a2017 !important; }
html.dark .bg-orange-100  { background-color: #332a1d !important; }

/* 各色 -50 底色上的文字：亮度提高避免低對比 */
html.dark .text-sage-700, html.dark .text-sage-800 { color: #a0c1aa !important; }
html.dark .text-accent-700, html.dark .text-accent-800 { color: #b5c1da !important; }
html.dark .text-amber-700, html.dark .text-amber-800 { color: #dfb872 !important; }
html.dark .text-rose-600, html.dark .text-rose-700, html.dark .text-rose-800 { color: #e9a3b0 !important; }
html.dark .text-indigo-700 { color: #a0afd6 !important; }

/* 邊框（-200 系列）在暗色下也要柔化 */
html.dark .border-sage-200    { border-color: #2e3d34 !important; }
html.dark .border-accent-200  { border-color: #2e3345 !important; }
html.dark .border-amber-200, html.dark .border-amber-400 { border-color: #443826 !important; }
html.dark .border-rose-200    { border-color: #443038 !important; }
html.dark .border-indigo-200  { border-color: #2b3148 !important; }
html.dark .border-orange-200  { border-color: #453620 !important; }

/* 漸層卡片（bg-gradient-to-br from-*-50 to-*-50/*-100）暗色模式拍平成單色 */
html.dark [class*="bg-gradient-to-br"][class*="from-sage-50"],
html.dark [class*="bg-gradient-to-br"][class*="from-emerald-50"] {
  background: #1c2620 !important;
}
html.dark [class*="bg-gradient-to-br"][class*="from-accent-50"] {
  background: #1c1f28 !important;
}
html.dark [class*="bg-gradient-to-br"][class*="from-amber-50"] {
  background: #2a2519 !important;
}
html.dark [class*="bg-gradient-to-br"][class*="from-rose-50"] {
  background: #2a1e22 !important;
}
html.dark [class*="bg-gradient-to-br"][class*="from-orange-50"] {
  background: #2a2017 !important;
}

/* ========= 輕微微調：列表間距、hr 斷線 ========= */
hr, .border-t, .border-b { border-color: #ecebe5 !important; }
html.dark hr, html.dark .border-t, html.dark .border-b { border-color: #5a4830 !important; }
html.dark article table { border-top-color: #5a4830 !important; border-bottom-color: #5a4830 !important; }

/* ========= 選取文字 ========= */
::selection { background: rgba(30, 42, 74, 0.15); color: inherit; }
html.dark ::selection { background: rgba(183, 199, 232, 0.25); color: #f0ede5; }

/* ========= 捲軸（webkit）細緻化 ========= */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(28, 28, 30, 0.12);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(28, 28, 30, 0.22); background-clip: padding-box; }
html.dark ::-webkit-scrollbar-thumb { background: rgba(245, 243, 238, 0.15); background-clip: padding-box; }

/* ========= loading bounce 動畫放緩 ========= */
.animate-bounce { animation-duration: 2.5s !important; }

/* ========= 特例：營收/重要金額用襯線數字 ========= */
.num.text-2xl, .num.text-3xl, .num.text-lg.font-bold {
  font-family: 'Noto Serif TC', 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ========= 部落格文章排版（editorial rhythm） ========= */
/* h1：大而輕，字距緊 — 主角但不壓迫 */
article h1 {
  font-family: 'Noto Serif TC', 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em !important;
  color: #1c1c1e !important;
  line-height: 1.2 !important;
}

/* h2：縮減字級與字重，配合分隔線；這層是文章主要節奏點 */
article h2 {
  font-family: 'Noto Serif TC', 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 500 !important;
  font-size: 1.375rem !important;
  letter-spacing: -0.012em !important;
  color: #2a2725 !important;
  padding-top: 2.5rem !important;
  margin-top: 3rem !important;
  border-top: 1px solid #ecebe5;
}
article h2:first-of-type { border-top: none; margin-top: 2rem !important; padding-top: 0 !important; }

article h3 {
  font-family: 'Noto Serif TC', 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 500 !important;
  font-size: 1.05rem !important;
  color: #44413c !important;
  margin-top: 1.75rem !important;
  letter-spacing: -0.005em;
}

/* 內文：細黑體，行高拉開，淡墨色（非純黑降低刺眼） */
article p {
  color: #3d3a35 !important;
  line-height: 1.85 !important;
  font-size: 0.98rem;
}
article ul li, article ol li { color: #3d3a35 !important; line-height: 1.85; }

/* strong 改用深炭黑，不刺眼 */
article strong { color: #1c1c1e !important; font-weight: 600 !important; }

/* blockquote：編輯感拉滿，左側細金線 + 淺米底 */
article blockquote {
  border-left: 2px solid #c8a96a !important;
  background: #faf9f4 !important;
  color: #3d3a35 !important;
  font-style: normal;
  padding: 1rem 1.25rem !important;
  margin: 1.5rem 0 !important;
}
article blockquote strong { color: #1c1c1e !important; }

/* 表格：極簡邊 + 米白 header */
article table {
  border: none !important;
  border-top: 1px solid #ecebe5 !important;
  border-bottom: 1px solid #ecebe5 !important;
}
article th, article td {
  border: none !important;
  border-bottom: 1px solid #f1eee7 !important;
  padding: 0.75rem 0.85rem !important;
}
article th { background: transparent !important; color: #605d56 !important; font-weight: 500 !important; font-size: 0.85rem; letter-spacing: 0.02em; text-transform: none; }
article tr:last-child td { border-bottom: none !important; }

/* a：內文連結改為帶下劃線的深墨紫 */
article a { color: #1e2a4a !important; text-decoration-color: rgba(30, 42, 74, 0.4); text-underline-offset: 3px; }
article a:hover { text-decoration-color: #c8a96a !important; color: #1e2a4a !important; }

/* Dark mode article */
html.dark article h1, html.dark article h2, html.dark article h3 { color: #f0ede5 !important; }
html.dark article h2 { border-top-color: #5a4830 !important; }
html.dark article p, html.dark article li { color: #c8c4ba !important; }
html.dark article strong { color: #f5f3ee !important; }
html.dark article blockquote { background: #1e1e20 !important; color: #c8c4ba !important; }
html.dark article table { border-top-color: #2a2a2c !important; border-bottom-color: #2a2a2c !important; }
html.dark article th, html.dark article td { border-bottom-color: #242426 !important; }
html.dark article th { color: #9d998f !important; }
html.dark article a { color: #b5c1da !important; text-decoration-color: rgba(181, 193, 218, 0.4); }

/* ========= Theme toggle icons ========= */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
html.dark .theme-toggle .icon-sun { display: block; }
html.dark .theme-toggle .icon-moon { display: none; }

/* ========= Peek mode（敏感數字模糊）=========
   目標：老闆身邊有員工/客人時，瞬間把成本、毛利、薪資模糊；按住或懸停暫時顯示。
   做法：攔截 Alpine 的 x-text 表達式屬性，凡是裡面叫到 money/wage/margin/pct/profit 等
        都當敏感欄位。純視覺層，資料不改，IndexedDB 不動。 */
body.peek-mode [x-text*="money"],
body.peek-mode [x-text*="pct"],
body.peek-mode [x-text*="margin"],
body.peek-mode [x-text*="profit"],
body.peek-mode [x-text*="revenue"],
body.peek-mode [x-text*="wage"],
body.peek-mode [x-text*="salary"],
body.peek-mode [x-text*="bonus"],
body.peek-mode [x-text*="price"],
body.peek-mode [x-text*="cost"],
body.peek-mode [x-text*="net"],
body.peek-mode [x-text*="splh"],
body.peek-mode [x-text*="bep"],
body.peek-mode [x-text*="Cost"],
body.peek-mode [x-text*="Profit"],
body.peek-mode [x-text*="Revenue"],
body.peek-mode [x-text*="Margin"],
body.peek-mode .peek-blur {
  filter: blur(7px) saturate(0.6) !important;
  transition: filter 180ms ease !important;
  cursor: help !important;
  user-select: none !important;
}
/* Hover / press 暫時顯示（桌機 hover；手機 :active 長按） */
body.peek-mode [x-text*="money"]:hover,
body.peek-mode [x-text*="pct"]:hover,
body.peek-mode [x-text*="margin"]:hover,
body.peek-mode [x-text*="profit"]:hover,
body.peek-mode [x-text*="revenue"]:hover,
body.peek-mode [x-text*="wage"]:hover,
body.peek-mode [x-text*="salary"]:hover,
body.peek-mode [x-text*="bonus"]:hover,
body.peek-mode [x-text*="price"]:hover,
body.peek-mode [x-text*="cost"]:hover,
body.peek-mode [x-text*="net"]:hover,
body.peek-mode [x-text*="splh"]:hover,
body.peek-mode [x-text*="bep"]:hover,
body.peek-mode [x-text*="Cost"]:hover,
body.peek-mode [x-text*="Profit"]:hover,
body.peek-mode [x-text*="Revenue"]:hover,
body.peek-mode [x-text*="Margin"]:hover,
body.peek-mode .peek-blur:hover,
body.peek-mode [x-text*="money"]:active,
body.peek-mode .peek-blur:active {
  filter: blur(0) !important;
}
/* 輸入框的 value 內容也要護 — 表單編輯時 input type=number 的值會顯露
   只有當用戶 focus 進去時才清楚。避免員工看表單填充的數字。 */
body.peek-mode input[type="number"].peek-sensitive,
body.peek-mode input[inputmode="decimal"].peek-sensitive {
  -webkit-text-security: disc;
  text-security: disc;
}
body.peek-mode input[type="number"].peek-sensitive:focus,
body.peek-mode input[inputmode="decimal"].peek-sensitive:focus {
  -webkit-text-security: none;
  text-security: none;
}

/* Peek toggle button：開啟時眼睛閉起來，icon swap */
.peek-toggle .icon-eye-open { display: block; }
.peek-toggle .icon-eye-closed { display: none; }
body.peek-mode .peek-toggle .icon-eye-open { display: none; }
body.peek-mode .peek-toggle .icon-eye-closed { display: block; }
body.peek-mode .peek-toggle { color: #c8a96a; }

/* Blog sticky header & footer in dark mode */
html.dark header.sticky { background: rgba(20,20,22,0.85) !important; border-bottom-color: #2a2a2c !important; }
html.dark footer { background: #18181a !important; border-top-color: #2a2a2c !important; }

/* Blog article CTA：淺底深字，保留品牌深墨藍 icon + 按鈕 */
.blog-cta {
  background: #faf9f4 !important;
  border: 1px solid #e6e2d9 !important;
}
html.dark .blog-cta { background: #1e1e20 !important; border-color: #2a2a2c !important; }
html.dark .blog-cta h3 { color: #f0ede5 !important; }
html.dark .blog-cta p  { color: #c8c4ba !important; }

/* Article callouts dark mode（各文章內嵌樣式定義，需 !important 覆蓋）
   框線統一使用「暗金 aged brass #b8945c」提升輕奢華質感，底色各自保留辨識 */
html.dark article blockquote {
  background: #1c1f28 !important;
  color: #c8c4ba !important;
  border-left-color: #b8945c !important;
  border-left-width: 3px !important;
}
html.dark article blockquote strong { color: #f0ede5 !important; }
html.dark article .callout-green {
  background: #1c2620 !important;
  color: #a0c1aa !important;
  border-left-color: #b8945c !important;
  border-left-width: 3px !important;
}
html.dark article .callout-green strong { color: #dfb872 !important; }
html.dark article .callout-red {
  background: #2a1e22 !important;
  color: #e9a3b0 !important;
  border-left-color: #b8945c !important;
  border-left-width: 3px !important;
}
html.dark article .callout-red strong { color: #dfb872 !important; }
html.dark article .callout-amber,
html.dark article .callout-yellow {
  background: #2a2519 !important;
  color: #dfb872 !important;
  border-left-color: #b8945c !important;
  border-left-width: 3px !important;
}
html.dark article .callout-amber strong,
html.dark article .callout-yellow strong { color: #ead29a !important; }

/* 資料參考聲明（inline-style p，以 border-left + #c8a96a 特徵鎖定） */
html.dark article p[style*="#c8a96a"] {
  background: #1e1a12 !important;
  color: #c8c4ba !important;
  border-left-color: #b8945c !important;
}
html.dark article p[style*="#c8a96a"] strong { color: #dfb872 !important; }
html.dark article th { background: #1e1e20 !important; color: #c8c4ba !important; border-color: #2a2a2c !important; }
html.dark article td { border-color: #2a2a2c !important; color: #c8c4ba !important; }