/* ============================================================
   B 暖米色系統 · App 視覺覆蓋層
   --------------------------------------------------------------
   蓋在 tailwind.css + luxury.css 之上，把整個 app 的色票/字體/陰影
   切換到「B 暖米色 · 朱紅 · 松綠」品牌系統，與 homepage / blog 統一。

   ⚠️ 設計原則：只 override 視覺 tokens，不動 Alpine 邏輯/結構。
   不滿意可整檔刪除回退到 luxury.css 主題。
   ============================================================ */

:root {
  --b-cream: #F5EFE4;
  --b-cream-deep: #EBE3D2;
  --b-paper: #FBF7EE;
  --b-ink: #1C1A17;
  --b-ink-60: rgba(28,26,23,0.6);
  --b-ink-40: rgba(28,26,23,0.4);
  --b-ink-15: rgba(28,26,23,0.15);
  --b-vermilion: #C8472D;
  --b-vermilion-deep: #A0341E;
  --b-pine: #2F4A3A;
  --b-pine-light: #9FCB7E;
  --b-gold: #B8893A;
  --b-divider: rgba(28,26,23,0.12);
  --b-serif: 'Noto Serif TC', 'Songti TC', Georgia, serif;
  --b-sans: 'Noto Sans TC', 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --b-mono: 'JetBrains Mono', monospace;
  /* Paper grain — 240px fractalNoise tile (stitchTiles 邊界連續可 repeat)
     純灰階 noise (RGB=noise, A=1)，feColorMatrix slope 3 把 turbulence 預設
     [0.4, 0.6] 窄域擴張到 [0.2, 0.8] 提高 contrast；搭配 soft-light blend
     雙向推 cream：亮點推亮 / 暗點推暗 → mean 偏移 ~1 灰階 (245→246)，
     stddev 4.2 / range 15 — 顆粒可見、底色幾乎不變 */
  --b-paper-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='5' stitchTiles='stitch'/><feColorMatrix values='3 0 0 0 -1  3 0 0 0 -1  3 0 0 0 -1  0 0 0 0 1'/></filter><rect width='240' height='240' filter='url(%23g)'/></svg>");
}

/* ===== 整體底色 ===== */
/* ⚠️ background-image + blend-mode 都 !important — luxury.css 用
   `body { background-image: none !important; }` 蓋掉原 radial-gradient，
   要把紙紋裝回去得同 !important 才贏。
   ⚠️ background-blend-mode: soft-light — 紋理 mean 0.5 (mid grey)，soft-light
   下亮點推亮 / 暗點推暗 cream，整體 cream 底色 mean 不偏移 */
html:not(.dark) body {
  background-color: var(--b-cream) !important;
  background-image: var(--b-paper-grain) !important;
  background-repeat: repeat !important;
  background-size: 240px 240px !important;
  background-blend-mode: soft-light !important;
  color: var(--b-ink);
  font-family: var(--b-sans);
  /* 字體微調 (2026-05-09)
     'palt' = 中文 proportional alternates (標點/全形字符按真實寬度排，
              中英混排不再有過寬空隙)
     'tnum' = tabular nums OFF (數字按 prop 寬，更密；.num class 仍可
              強制 tabular via font-variant-numeric)
     'cv0X' = Inter stylistic alts (英文字符 a/g/l 等替代字形，已沿用)
     letter-spacing -0.005em — 比 default 緊一階，閱讀時更精緻 */
  font-feature-settings: 'palt' 1, 'tnum' 0, 'cv02' 1, 'cv03' 1, 'cv04' 1, 'cv11' 1;
  letter-spacing: -0.005em;
}
html:not(.dark) body[style*="radial-gradient"] {
  background-color: var(--b-cream) !important;
  background-image: var(--b-paper-grain) !important;
  background-blend-mode: soft-light !important;
}

/* 列印時拿掉紋理：浪費碳粉 + 干擾記帳士看 P&L 數字
   暗模本身不套（rule selector 已是 html:not(.dark)），無需額外清 */
@media print {
  html:not(.dark) body {
    background-image: none !important;
  }
}

/* 行動裝置拿掉紙紋（2026-05-12）— iOS Safari 在 Retina + soft-light blend 下
   會把 fractalNoise render 比 desktop 強很多，整體變花。Desktop 沒此問題。
   解法：mobile 拿掉 noise，保留 cream 底色即可 */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  html:not(.dark) body,
  html:not(.dark) body[style*="radial-gradient"] {
    background-image: none !important;
    background-blend-mode: normal !important;
  }
}

/* 7×24 人力覆蓋熱圖 grid（2026-05-12）— mobile 縮 columns 避免撐破頁寬
   Desktop: 56 + 40*7 + 80 = 416px min
   Mobile: 36 + 26*7 + 48 = 266px min → fits iPhone SE 375px portrait
   注意：用 CSS class 取代原本的 :style inline，方便 media query override */
.coverage-grid-row {
  display: grid;
  grid-template-columns: 56px repeat(7, minmax(40px, 1fr)) 80px;
}
@media (max-width: 640px) {
  .coverage-grid-row {
    grid-template-columns: 36px repeat(7, minmax(26px, 1fr)) 48px;
  }
}

/* 標題用襯線 */
html:not(.dark) h1,
html:not(.dark) h2,
html:not(.dark) h3,
html:not(.dark) [style*="DM Serif Display"],
html:not(.dark) [style*="Noto Serif TC"] {
  font-family: var(--b-serif) !important;
}

/* ===== 卡片 / 表格底色：從純白 → paper（暖白）===== */
html:not(.dark) .bg-white { background-color: var(--b-paper) !important; }
html:not(.dark) .bg-white\/85 { background-color: rgba(251,247,238,0.92) !important; }
html:not(.dark) .bg-white\/70 { background-color: rgba(251,247,238,0.78) !important; }
html:not(.dark) .bg-white\/95 { background-color: rgba(251,247,238,0.97) !important; }
html:not(.dark) .bg-ink-50 { background-color: var(--b-cream) !important; }
html:not(.dark) .bg-ink-100 { background-color: var(--b-cream-deep) !important; }
html:not(.dark) .bg-ink-200 { background-color: var(--b-cream-deep) !important; }

/* sticky header 半透明的 backdrop blur — 只在 sm+ 才套
   為什麼：backdrop-filter 會建立新的 stacking context，導致 fixed-position
   popover 被困在 header 內（chrome/safari fixed-positioning quirk）。
   mobile (<sm) header 又不 sticky，blur 沒意義也不該套，順便修掉
   「popover 被卡片蓋過」的 bug。 */
@media (min-width: 640px) {
  html:not(.dark) header.sticky-header,
  html:not(.dark) header.sm\:sticky {
    background: rgba(245,239,228,0.92) !important;
    border-color: var(--b-divider) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* ===== Borders / dividers ===== */
html:not(.dark) .border-ink-100 { border-color: var(--b-divider) !important; }
html:not(.dark) .border-ink-200 { border-color: var(--b-divider) !important; }
html:not(.dark) .border-ink-300 { border-color: var(--b-ink-15) !important; }
html:not(.dark) .divide-ink-100 > * + * { border-color: var(--b-divider) !important; }
html:not(.dark) .divide-ink-200 > * + * { border-color: var(--b-divider) !important; }

/* ===== Text colors ===== */
html:not(.dark) .text-ink-400 { color: var(--b-ink-40) !important; }
html:not(.dark) .text-ink-500 { color: var(--b-ink-60) !important; }
html:not(.dark) .text-ink-600 { color: var(--b-ink-60) !important; }
html:not(.dark) .text-ink-700 { color: var(--b-ink) !important; }
html:not(.dark) .text-ink-800 { color: var(--b-ink) !important; }
html:not(.dark) .text-ink-900 { color: var(--b-ink) !important; }

/* ===== Accent (主操作色) → 朱紅 ===== */
html:not(.dark) .bg-accent-50 { background-color: rgba(200,71,45,0.06) !important; }
html:not(.dark) .bg-accent-100 { background-color: rgba(200,71,45,0.12) !important; }
html:not(.dark) .bg-accent-500 { background-color: var(--b-vermilion) !important; }
html:not(.dark) .bg-accent-600 { background-color: var(--b-vermilion) !important; }
html:not(.dark) .bg-accent-700 { background-color: var(--b-vermilion-deep) !important; }
html:not(.dark) .bg-accent-700\/40 { background-color: rgba(160,52,30,0.4) !important; }
html:not(.dark) .text-accent-300 { color: rgba(200,71,45,0.7) !important; }
html:not(.dark) .text-accent-500 { color: var(--b-vermilion) !important; }
html:not(.dark) .text-accent-600 { color: var(--b-vermilion) !important; }
html:not(.dark) .text-accent-700 { color: var(--b-vermilion) !important; }
html:not(.dark) .text-accent-800 { color: var(--b-vermilion-deep) !important; }
html:not(.dark) .border-accent-300 { border-color: rgba(200,71,45,0.4) !important; }
html:not(.dark) .border-accent-500 { border-color: var(--b-vermilion) !important; }
html:not(.dark) .ring-accent-300 { --tw-ring-color: rgba(200,71,45,0.5) !important; }
html:not(.dark) .focus\:ring-accent-300:focus { --tw-ring-color: rgba(200,71,45,0.5) !important; }
html:not(.dark) .hover\:bg-accent-700:hover { background-color: var(--b-vermilion-deep) !important; }
html:not(.dark) .hover\:bg-accent-800:hover { background-color: var(--b-vermilion-deep) !important; }
html:not(.dark) .hover\:text-accent-700:hover { color: var(--b-vermilion) !important; }
html:not(.dark) .hover\:text-accent-800:hover { color: var(--b-vermilion-deep) !important; }

/* ===== Sage (健康綠) → 松綠 ===== */
html:not(.dark) .bg-sage-50 { background-color: rgba(47,74,58,0.06) !important; }
html:not(.dark) .bg-sage-100 { background-color: rgba(47,74,58,0.12) !important; }
html:not(.dark) .bg-sage-500 { background-color: var(--b-pine) !important; }
html:not(.dark) .bg-sage-600 { background-color: var(--b-pine) !important; }
html:not(.dark) .bg-sage-700 { background-color: #233628 !important; }
html:not(.dark) .text-sage-300 { color: rgba(47,74,58,0.7) !important; }
html:not(.dark) .text-sage-500 { color: var(--b-pine) !important; }
html:not(.dark) .text-sage-600 { color: var(--b-pine) !important; }
html:not(.dark) .text-sage-700 { color: var(--b-pine) !important; }
html:not(.dark) .border-sage-300 { border-color: rgba(47,74,58,0.4) !important; }

/* ===== Header 重新塗成 ink dark bar (visual top bar) ===== */
html:not(.dark) header.sm\:sticky.sticky-header,
html:not(.dark) header.sticky-header {
  background: rgba(245,239,228,0.92) !important;
}

/* 主 brand mark：替換成方塊「計」字（如果已是 svg 就保留 svg + 上色 token） */
/* (HTML 結構不動；此 css 僅潤飾) */

/* ===== 升級 PRO 按鈕：朱紅 ===== */
html:not(.dark) [class*="bg-accent-"][class*="text-white"],
html:not(.dark) [class*="bg-amber-100"][class*="text-amber-800"] {
  /* PRO badge 維持 amber 配色，不動 — amber/gold 在新 palette 也合理 */
}

/* ===== Brand mark 方塊（如果是 inline svg rect 填色）保持原本，
   但搭配新 cream bg 仍協調 ===== */

/* ===== 銷售/警示用 rose / amber 色階保留 — 警告色語意性強，不動 ===== */

/* ===== 資料管理、popover 等 backdrop 維持半透明黑 ===== */

/* ===== Tab 列：active state 用朱紅下劃線 ===== */
html:not(.dark) nav[x-show] button.bg-accent-50,
html:not(.dark) nav[x-show] button[class*="bg-accent"]:not(.bg-accent-700) {
  background-color: rgba(200,71,45,0.10) !important;
  color: var(--b-vermilion) !important;
}

/* ===== Header brand 文字字體：用襯線 ===== */
html:not(.dark) [style*="'DM Serif Display'"] {
  font-family: var(--b-serif) !important;
}

/* ===== 統一陰影：新系統用較柔的暖色陰影 ===== */
html:not(.dark) .shadow-card {
  box-shadow: 0 1px 3px rgba(28,26,23,0.04), 0 4px 12px -2px rgba(28,26,23,0.08) !important;
}
html:not(.dark) .shadow-lift {
  box-shadow: 0 8px 24px -8px rgba(28,26,23,0.18), 0 4px 8px -2px rgba(28,26,23,0.08) !important;
}

/* ===== Tab nav (top, sm:flex) ===== */
html:not(.dark) nav.bg-white\/70 {
  background: rgba(251,247,238,0.85) !important;
  border-color: var(--b-ink-15) !important;
}

/* ===== Bottom mobile tab nav ===== */
html:not(.dark) nav.fixed.bottom-0 {
  background: rgba(251,247,238,0.95) !important;
  border-color: var(--b-divider) !important;
}

/* ===== Modal backdrop 維持深黑壓底 ===== */

/* ===== 升級 modal / 驚喜卡片底色 ===== */
html:not(.dark) .bg-amber-50 { background-color: rgba(184,137,58,0.08) !important; }
html:not(.dark) .bg-amber-100 { background-color: rgba(184,137,58,0.18) !important; }
html:not(.dark) .text-amber-600 { color: var(--b-gold) !important; }
html:not(.dark) .text-amber-700 { color: var(--b-gold) !important; }
html:not(.dark) .text-amber-800 { color: #8a6125 !important; }
html:not(.dark) .border-amber-200 { border-color: rgba(184,137,58,0.3) !important; }

/* ===== Toast 顏色 ===== */
html:not(.dark) .bg-emerald-500 { background-color: var(--b-pine) !important; }
html:not(.dark) .bg-emerald-600 { background-color: var(--b-pine) !important; }

/* ===== Brand square 「計」 mark 在新色系下仍用 ink + cream — 不動 ===== */

/* ===== Number tabular nums + mono 數字 ===== */
.num { font-family: var(--b-mono); font-variant-numeric: tabular-nums; }

/* ===== Pre-loader (alpine init 前)：暖米底 ===== */
html:not(.dark) .pre-loader {
  background: var(--b-cream);
}
html:not(.dark) .pre-loader-spin {
  border-top-color: var(--b-vermilion) !important;
  border-color: var(--b-cream-deep) !important;
}
html:not(.dark) .pre-loader-text {
  color: var(--b-ink-60) !important;
}

/* ============================================================
   Tier 2: Dark TopBar + Sidebar
   ============================================================ */

/* ===== Brand mark：vermilion 方塊「計」 ===== */
.b-warm-mark {
  width: 40px; height: 40px; border-radius: 8px;
  background: var(--b-vermilion); color: var(--b-cream);
  display: grid; place-items: center;
  font-family: var(--b-serif); font-weight: 900; font-size: 1.375rem;
  letter-spacing: 0;
  box-shadow: 0 2px 6px -1px rgba(200,71,45,0.35);
  flex-shrink: 0;
  transition: transform .15s ease;
}
.b-warm-mark:hover { transform: translateY(-1px); }

.b-warm-brand-name {
  font-family: var(--b-serif) !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}

.b-warm-brand-sub {
  font-family: var(--b-sans);
  letter-spacing: 0.05em;
}

/* ===== TopBar：sticky dark ink bar (light mode) =====
   桌機 sticky（已是 sm:sticky），覆蓋 cream/white bg → ink dark
   保留 backdrop blur 讓往下捲動時內容透出 */
@media (min-width: 640px) {
  html:not(.dark) header.b-warm-topbar.sticky-header {
    background: rgba(28,26,23,0.96) !important;
    border-bottom-color: rgba(245,239,228,0.12) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--b-cream);
  }
  /* 在 dark topbar 裡的所有文字、icon 變淺色 */
  html:not(.dark) header.b-warm-topbar.sticky-header .b-warm-brand-name,
  html:not(.dark) header.b-warm-topbar.sticky-header .b-warm-brand-name span:first-child,
  html:not(.dark) header.b-warm-topbar.sticky-header h1 {
    color: var(--b-cream) !important;
  }
  html:not(.dark) header.b-warm-topbar.sticky-header .b-warm-brand-name span[x-show="shopName"],
  html:not(.dark) header.b-warm-topbar.sticky-header .b-warm-brand-sub,
  html:not(.dark) header.b-warm-topbar.sticky-header .text-ink-500 {
    color: rgba(245,239,228,0.6) !important;
  }
  /* :not(.text-white) 排除 active dark button 上的白字 (e.g., ☀️ 主題切換 active state) */
  html:not(.dark) header.b-warm-topbar.sticky-header button:not(.text-white),
  html:not(.dark) header.b-warm-topbar.sticky-header > div > button:not(.text-white),
  html:not(.dark) header.b-warm-topbar.sticky-header .text-ink-400,
  html:not(.dark) header.b-warm-topbar.sticky-header .text-ink-600,
  html:not(.dark) header.b-warm-topbar.sticky-header .text-ink-700 {
    color: rgba(245,239,228,0.85) !important;
  }
  html:not(.dark) header.b-warm-topbar.sticky-header button:not(.text-white):hover {
    background: rgba(245,239,228,0.08) !important;
    color: var(--b-cream) !important;
  }
  /* Tailwind hover:bg-white 在 dark topbar 內會閃刺眼白 → 改 cream/0.08 */
  html:not(.dark) header.b-warm-topbar.sticky-header .hover\:bg-white:hover {
    background-color: rgba(245,239,228,0.08) !important;
  }
  html:not(.dark) header.b-warm-topbar.sticky-header .hover\:border-ink-200:hover {
    border-color: rgba(245,239,228,0.18) !important;
  }
  html:not(.dark) header.b-warm-topbar.sticky-header .hover\:text-ink-800:hover {
    color: var(--b-cream) !important;
  }
  html:not(.dark) header.b-warm-topbar.sticky-header .border-ink-200 {
    border-color: rgba(245,239,228,0.18) !important;
  }
  /* Mode selector pills (入門 / 經營 / 完整) — 在 dark bar 上仍清晰 */
  html:not(.dark) header.b-warm-topbar.sticky-header [class*="bg-ink-100"],
  html:not(.dark) header.b-warm-topbar.sticky-header [class*="bg-ink-50"] {
    background: rgba(245,239,228,0.08) !important;
  }
  /* Cmd-K, sync indicator 維持原 active state colors 可見 */

  /* ⚠️ 關鍵 fix：popover 的 cream paper 底色不能繼承 topbar 的 cream 字色
     ([x-show="open"] 的 fixed/absolute popover 飛出 topbar 區域，文字應回到 ink)
     使用 :not(.text-white) 排除有意 white 文字的按鈕（active state on dark bg） */
  html:not(.dark) header.b-warm-topbar.sticky-header [x-show="open"] {
    color: var(--b-ink) !important;
  }
  html:not(.dark) header.b-warm-topbar.sticky-header [x-show="open"] button:not(.text-white) {
    color: var(--b-ink) !important;
  }
  html:not(.dark) header.b-warm-topbar.sticky-header [x-show="open"] button:not(.text-white):hover {
    background: var(--b-cream-deep) !important;
    color: var(--b-ink) !important;
  }
  html:not(.dark) header.b-warm-topbar.sticky-header [x-show="open"] .text-ink-400 { color: var(--b-ink-40) !important; }
  html:not(.dark) header.b-warm-topbar.sticky-header [x-show="open"] .text-ink-500,
  html:not(.dark) header.b-warm-topbar.sticky-header [x-show="open"] .text-ink-600 { color: var(--b-ink-60) !important; }
  html:not(.dark) header.b-warm-topbar.sticky-header [x-show="open"] .text-ink-700,
  html:not(.dark) header.b-warm-topbar.sticky-header [x-show="open"] .text-ink-800,
  html:not(.dark) header.b-warm-topbar.sticky-header [x-show="open"] .text-ink-900 { color: var(--b-ink) !important; }
  /* PRO 升級 modal 的 amber/gold 標籤等保留原色 (不被覆蓋) */

  /* 修暗 navy bg-ink-900 → 改用 B 系統的 ink，整體和諧 (含 active button bg) */
  html:not(.dark) header.b-warm-topbar.sticky-header [x-show="open"] .bg-ink-900 {
    background-color: var(--b-ink) !important;
  }
}

/* TopBar 一上線就把 brand SVG 的 navy 取代為 vermilion (但我們已用 div .b-warm-mark) */

/* ===== Sidebar (desktop only, lg+) =====
   左側 240px 固定 nav，取代 top tab bar
   原 top tab bar @ lg+ hidden by .b-warm-hide-on-lg
   原 mobile 底部 nav 仍保留給 < lg 用戶 */
.b-warm-sidebar {
  display: none; /* 預設 hidden, 桌機才顯示 */
}
@media (min-width: 1024px) {
  .b-warm-sidebar {
    display: flex; flex-direction: column;
    width: 240px;
    position: fixed; left: 0; top: 64px; bottom: 0;
    background: var(--b-paper);
    border-right: 1px solid var(--b-divider);
    padding: 20px 14px 16px;
    z-index: 20;
    overflow-y: auto;
    font-family: var(--b-sans);
  }
  /* 主內容區整體位移：左側 240px sidebar + 上方固定 topbar */
  body > div[x-data="app()"] {
    padding-left: calc(240px + 2rem) !important;
    padding-right: 2rem !important;
    padding-top: 80px !important; /* clear fixed topbar */
    max-width: none !important;
  }
  /* 隱藏 top tab nav on lg+（被 sidebar 取代） */
  .b-warm-hide-on-lg { display: none !important; }
  /* sticky topbar → 改成 fixed 跨 viewport 全寬（light + dark 都要套）*/
  header.b-warm-topbar.sticky-header {
    position: fixed !important;
    left: 0; right: 0; top: 0;
    margin: 0 !important;
    padding: 12px 24px !important;
    z-index: 30;
  }
  html:not(.dark) header.b-warm-topbar.sticky-header {
    background: rgba(28,26,23,0.96) !important;
    border-bottom: 1px solid rgba(245,239,228,0.12) !important;
  }
  html.dark header.b-warm-topbar.sticky-header {
    background: rgba(11,18,32,0.96) !important;
    border-bottom: 1px solid rgba(245,239,228,0.12) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

.b-warm-side-h {
  font-family: var(--b-mono); font-size: 0.625rem; color: var(--b-ink-60);
  letter-spacing: 2px; padding: 0 10px 12px; font-weight: 600;
  text-transform: uppercase;
}

/* ===== Mode selector (sidebar top) ===== */
.b-warm-mode-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px;
  padding: 0 8px;
}
.b-warm-mode-btn {
  padding: 8px 4px;
  background: var(--b-cream-deep); border: none; border-radius: 6px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-family: var(--b-sans); font-size: 0.6875rem; font-weight: 500;
  color: var(--b-ink-60); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.b-warm-mode-btn:hover {
  background: var(--b-cream); color: var(--b-ink);
}
.b-warm-mode-btn.active {
  background: var(--b-ink); color: var(--b-cream);
  font-weight: 600;
}
.b-warm-mode-btn span:first-child { font-size: 0.875rem; line-height: 1; }
.b-warm-mode-info {
  width: 16px; height: 16px; padding: 0;
  display: inline-grid; place-items: center;
  background: transparent; border: none; cursor: pointer;
  font-size: 0.6875rem; color: var(--b-ink-40);
  border-radius: 50%;
  transition: color .15s ease, background .15s ease;
}
.b-warm-mode-info:hover {
  color: var(--b-ink); background: var(--b-cream-deep);
}

/* Dark mode variant */
html.dark .b-warm-mode-btn {
  background: rgba(245,239,228,0.08) !important;
  color: rgba(245,239,228,0.7) !important;
}
html.dark .b-warm-mode-btn:hover {
  background: rgba(245,239,228,0.14) !important;
  color: var(--b-cream) !important;
}
html.dark .b-warm-mode-btn.active {
  background: var(--b-vermilion) !important;
  color: var(--b-cream) !important;
}
html.dark .b-warm-mode-info {
  color: rgba(245,239,228,0.4) !important;
}
html.dark .b-warm-mode-info:hover {
  color: var(--b-cream) !important;
  background: rgba(245,239,228,0.12) !important;
}
.b-warm-side-item {
  padding: 10px 12px; border-radius: 8px; margin-bottom: 2px;
  display: flex; align-items: center; gap: 12px;
  background: transparent; color: var(--b-ink);
  cursor: pointer; transition: background .15s ease, color .15s ease;
  width: 100%; text-align: left; border: none;
  font-family: var(--b-sans);
}
.b-warm-side-item:hover { background: var(--b-cream-deep); }
.b-warm-side-item.active {
  background: var(--b-ink) !important;
  color: var(--b-cream) !important;
}
.b-warm-side-icon { font-size: 1rem; flex-shrink: 0; }
.b-warm-side-body { flex: 1; min-width: 0; }
.b-warm-side-l { font-size: 0.875rem; font-weight: 500; }
.b-warm-side-item.active .b-warm-side-l { font-weight: 600; }
.b-warm-side-sub {
  font-family: var(--b-mono); font-size: 0.5625rem; letter-spacing: 1px;
  color: var(--b-ink-40); margin-top: 1px;
}
.b-warm-side-item.active .b-warm-side-sub { color: rgba(245,239,228,0.5); }
.b-warm-side-n {
  font-family: var(--b-mono); font-size: 0.6875rem;
  color: var(--b-ink-60);
  padding: 2px 7px; border-radius: 999px;
  background: var(--b-cream-deep);
}
.b-warm-side-item.active .b-warm-side-n {
  color: var(--b-cream);
  background: rgba(245,239,228,0.12);
}
.b-warm-side-divider { height: 1px; background: var(--b-divider); margin: 16px 8px; }

.b-warm-side-pro-badge {
  font-family: var(--b-mono); font-size: 0.5625rem; color: var(--b-gold);
  font-weight: 700; letter-spacing: 1px;
  padding: 2px 6px; border: 1px solid var(--b-gold); border-radius: 4px;
}

/* 免費高級 badge — 跟 PRO badge 同形狀但 sage green 表「免費」+「好東西」(2026-05-12)
   給沒收費但市面上常見付費的進階功能掛這個，提升 Pro 用戶感 + 抓眼球
   flex-shrink: 0 防止擠 label；padding/font 縮緊不撐破 sidebar 寬度 */
.b-warm-side-free-badge {
  font-size: 0.5rem; color: #2D5A3D;
  font-weight: 700; letter-spacing: 0.3px;
  padding: 1px 4px; border: 1px solid #5A8B6F; border-radius: 3px;
  background: rgba(90, 139, 111, 0.08);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 4px;
}
html.dark .b-warm-side-free-badge {
  color: #8FBF9F; border-color: #5A8B6F;
  background: rgba(90, 139, 111, 0.15);
}

/* 分析卡片標題旁的「免費高級功能」滿版 badge (2026-05-12)
   給 h3 旁邊用，空間夠寬可以放完整 6 字；sage green 跟 sidebar 同色系一致 */
.badge-free-premium-inline {
  display: inline-flex; align-items: center;
  font-size: 0.625rem; color: #2D5A3D;
  font-weight: 700; letter-spacing: 0.2px;
  padding: 2px 7px;
  border: 1px solid #5A8B6F; border-radius: 4px;
  background: rgba(90, 139, 111, 0.1);
  white-space: nowrap;
  vertical-align: middle;
}
html.dark .badge-free-premium-inline {
  color: #8FBF9F; border-color: #5A8B6F;
  background: rgba(90, 139, 111, 0.18);
}

/* sidebar footer card：本機儲存 · 已同步 */
.b-warm-side-footer {
  margin-top: auto;
  padding: 12px; background: var(--b-cream-deep); border-radius: 8px;
  font-size: 0.6875rem; color: var(--b-ink-60); line-height: 1.6;
}
.b-warm-side-footer-row {
  display: flex; align-items: center; gap: 6px;
}
.b-warm-side-footer-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--b-pine);
}
.b-warm-side-footer-l {
  color: var(--b-pine); font-weight: 600;
}

/* ============================================================
   Dark mode variant for sidebar (避免 cream 浮島感)
   topbar 已經是 dark ink，與 dark body 自然融合，不用額外處理
   ============================================================ */
html.dark .b-warm-sidebar {
  background: #141c2e !important;
  border-right-color: rgba(245,239,228,0.10) !important;
}
html.dark .b-warm-side-h {
  color: rgba(245,239,228,0.5) !important;
}
html.dark .b-warm-side-item {
  color: rgba(245,239,228,0.85) !important;
  background: transparent !important;
}
html.dark .b-warm-side-item:hover {
  background: rgba(245,239,228,0.08) !important;
}
html.dark .b-warm-side-item.active {
  background: var(--b-vermilion) !important;
  color: var(--b-cream) !important;
}
html.dark .b-warm-side-sub {
  color: rgba(245,239,228,0.4) !important;
}
html.dark .b-warm-side-item.active .b-warm-side-sub {
  color: rgba(245,239,228,0.75) !important;
}
html.dark .b-warm-side-n {
  background: rgba(245,239,228,0.10) !important;
  color: rgba(245,239,228,0.75) !important;
}
html.dark .b-warm-side-item.active .b-warm-side-n {
  background: rgba(28,26,23,0.30) !important;
  color: var(--b-cream) !important;
}
html.dark .b-warm-side-divider {
  background: rgba(245,239,228,0.12) !important;
}
html.dark .b-warm-side-footer {
  background: rgba(245,239,228,0.06) !important;
  color: rgba(245,239,228,0.7) !important;
}
html.dark .b-warm-side-footer-l {
  color: #9FCB7E !important;
}
html.dark .b-warm-side-footer-dot {
  background: #9FCB7E !important;
}
html.dark .b-warm-side-pro-badge {
  color: #E5B547 !important;
  border-color: rgba(229,181,71,0.6) !important;
}

/* ============================================================
   呼吸燈動畫：模式切換時新增的 sidebar tabs 閃 3.5 秒
   讓 user 直覺看到「啊原來多了這些功能」
   ============================================================ */
@keyframes b-warm-pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(200,71,45,0.55);
    background-color: rgba(200,71,45,0.10);
  }
  50% {
    box-shadow: 0 0 0 0.5rem rgba(200,71,45,0);
    background-color: rgba(200,71,45,0.25);
  }
}
.b-warm-pulse {
  animation: b-warm-pulse-glow 1.4s ease-in-out 2.5;
  position: relative;
}
html.dark .b-warm-pulse {
  animation: b-warm-pulse-glow-dark 1.4s ease-in-out 2.5;
}
@keyframes b-warm-pulse-glow-dark {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(200,71,45,0.7);
    background-color: rgba(200,71,45,0.18);
  }
  50% {
    box-shadow: 0 0 0 0.5rem rgba(200,71,45,0);
    background-color: rgba(200,71,45,0.35);
  }
}
/* NEW badge：呼吸燈期間顯示，告訴 user 這個是新增的 */
.b-warm-pulse-badge {
  position: absolute; top: 0.25rem; right: 0.25rem;
  padding: 0.0625rem 0.3125rem;
  background: var(--b-vermilion); color: var(--b-cream);
  border-radius: 0.1875rem;
  font-family: var(--b-mono); font-size: 0.5625rem; font-weight: 700;
  letter-spacing: 0.0625rem;
  animation: b-warm-pulse-fade 0.3s ease-out;
}
@keyframes b-warm-pulse-fade {
  from { opacity: 0; transform: translateY(-0.25rem); }
  to { opacity: 1; transform: translateY(0); }
}

/* Focus rings：B 暖米色 vermilion accent，比瀏覽器 default outline 一致且品牌化 */
.b-warm-side-item:focus-visible,
.b-warm-mode-btn:focus-visible,
.b-warm-mode-info:focus-visible,
.b-warm-drill-tab:focus-visible,
.b-warm-drill-btn-secondary:focus-visible,
.b-warm-drill-btn-primary:focus-visible,
.b-warm-mark:focus-visible {
  outline: 2px solid var(--b-vermilion);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Pre-loader 也對齊 dark body */
html.dark .pre-loader {
  background: #0b1220 !important;
}
html.dark .pre-loader-spin {
  border-top-color: var(--b-vermilion) !important;
  border-color: rgba(245,239,228,0.12) !important;
}
html.dark .pre-loader-text {
  color: rgba(245,239,228,0.5) !important;
}

/* ============================================================
   Cost breakdown stacked bar (recipe card 用)
   現有 HTML 在 recipe card 用 .bar-seg.bg-sage-500/.bg-orange-400/.bg-accent-500/.bg-rose-400
   分別對應 食材/包材/工時/固定。對應到 design 4 色：
     食材 → vermilion ｜包材 → gold ｜人事 → pine ｜固定 → ink
   ============================================================ */
html:not(.dark) .bar-seg.bg-sage-500 { background-color: var(--b-vermilion) !important; }
html:not(.dark) .bar-seg.bg-orange-400 { background-color: var(--b-gold) !important; }
html:not(.dark) .bar-seg.bg-accent-500 { background-color: var(--b-pine) !important; }
html:not(.dark) .bar-seg.bg-rose-400 { background-color: var(--b-ink) !important; }
html:not(.dark) .h-1\.5.bg-ink-100,
html:not(.dark) .bg-ink-100.flex.rounded-full {
  background-color: var(--b-cream-deep) !important;
}

.b-warm-cost-bar {
  display: flex; height: 14px; border-radius: 7px; overflow: hidden;
  background: var(--b-cream-deep);
}
.b-warm-cost-bar-ingredient { background: var(--b-vermilion); }
.b-warm-cost-bar-packaging  { background: var(--b-gold); }
.b-warm-cost-bar-labor      { background: var(--b-pine); }
.b-warm-cost-bar-overhead   { background: var(--b-ink); }
.b-warm-cost-bar-margin     { background: var(--b-cream-deep); }

.b-warm-cost-legend {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 8px; margin-top: 14px;
}
.b-warm-cost-legend-item {
  font-family: var(--b-sans);
}
.b-warm-cost-legend-l {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.6875rem; color: var(--b-ink-60);
}
.b-warm-cost-legend-dot {
  width: 8px; height: 8px; border-radius: 2px;
}
.b-warm-cost-legend-v {
  font-family: var(--b-serif); font-size: 1.125rem; font-weight: 700;
  color: var(--b-ink); margin-top: 4px;
}
.b-warm-cost-legend-p {
  font-family: var(--b-mono); font-size: 0.625rem; color: var(--b-ink-60);
}

/* ============================================================
   Inline price alert ↑ +X.X% on ingredient row
   ============================================================ */
.b-warm-price-up {
  font-family: var(--b-mono); font-size: 0.625rem; color: var(--b-gold);
  font-weight: 700; margin-top: 2px;
}
.b-warm-price-down {
  font-family: var(--b-mono); font-size: 0.625rem; color: var(--b-pine);
  font-weight: 700; margin-top: 2px;
}

/* ============================================================
   Tier 3: Recipe Drill-Down Overlay
   ============================================================ */
.b-warm-drill {
  background: var(--b-cream);
  min-height: 100vh;
  font-family: var(--b-sans);
  color: var(--b-ink);
}
@media (min-width: 1024px) {
  .b-warm-drill {
    margin-left: 240px; /* 對齊 sidebar 邊界 */
  }
}

.b-warm-drill-head {
  padding: 20px 32px 16px;
  border-bottom: 1px solid var(--b-divider);
  background: var(--b-cream);
  position: sticky; top: 0; z-index: 10;
}

/* Breadcrumb */
.b-warm-drill-crumbs {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--b-mono); font-size: 0.6875rem;
  color: var(--b-ink-60); letter-spacing: 1px;
}
.b-warm-drill-crumb-sep { color: var(--b-ink-40); }
.b-warm-drill-crumb-active { color: var(--b-ink); font-weight: 600; }

/* Title row */
.b-warm-drill-title-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-top: 12px; flex-wrap: wrap;
}
.b-warm-drill-title-l { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.b-warm-drill-title {
  font-family: var(--b-serif); font-size: 2.25rem; font-weight: 800;
  color: var(--b-ink); margin: 0; letter-spacing: -0.5px; line-height: 1.1;
}
.b-warm-drill-badge {
  padding: 4px 10px; border-radius: 4px;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 1px;
  font-family: var(--b-sans);
}
.b-warm-drill-badge-vermilion { background: var(--b-vermilion); color: var(--b-cream); }
.b-warm-drill-badge-pine      { background: var(--b-pine);      color: var(--b-cream); }

.b-warm-drill-actions { display: flex; gap: 8px; }
.b-warm-drill-btn-secondary {
  padding: 8px 14px; border: 1px solid var(--b-ink-15); border-radius: 6px;
  font-size: 0.8125rem; color: var(--b-ink); background: var(--b-paper);
  font-family: var(--b-sans); cursor: pointer;
  transition: background .15s ease;
}
.b-warm-drill-btn-secondary:hover { background: var(--b-cream-deep); }
.b-warm-drill-btn-primary {
  padding: 8px 14px; background: var(--b-ink); color: var(--b-cream);
  border: none; border-radius: 6px; font-size: 0.8125rem; font-weight: 600;
  font-family: var(--b-sans); cursor: pointer;
  transition: background .15s ease;
}
.b-warm-drill-btn-primary:hover { background: var(--b-vermilion); }

.b-warm-drill-meta {
  font-family: var(--b-sans); font-size: 0.8125rem; color: var(--b-ink-60); margin-top: 6px;
}

/* Tabs */
.b-warm-drill-tabs {
  display: flex; gap: 0; margin-top: 24px;
  border-bottom: 1px solid var(--b-divider);
  margin-bottom: -16px;
  overflow-x: auto;
}
.b-warm-drill-tab {
  padding: 12px 18px; background: transparent; border: none;
  font-family: var(--b-sans); font-size: 0.875rem;
  color: var(--b-ink-60); font-weight: 400;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  cursor: pointer; transition: color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.b-warm-drill-tab:hover { color: var(--b-ink); }
.b-warm-drill-tab.active {
  color: var(--b-ink); font-weight: 600;
  border-bottom-color: var(--b-vermilion);
}

/* Body */
.b-warm-drill-body {
  padding: 32px;
  background: var(--b-cream);
}

/* Card 通用 */
.b-warm-drill-card {
  background: var(--b-paper); border: 1px solid var(--b-ink-15);
  border-radius: 14px; padding: 28px;
}
.b-warm-drill-card + .b-warm-drill-card { margin-top: 16px; }
.b-warm-drill-card-head {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
}
.b-warm-drill-eyebrow {
  font-family: var(--b-mono); font-size: 0.6875rem; color: var(--b-ink-60);
  letter-spacing: 2px;
}
.b-warm-drill-card-title {
  font-family: var(--b-serif); font-size: 1.375rem; font-weight: 700;
  color: var(--b-ink); margin-top: 4px;
}
.b-warm-drill-card-status {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--b-sans); font-size: 0.75rem; color: var(--b-ink-60);
}

/* Cost panel grid */
.b-warm-drill-cost-grid {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px;
}
@media (max-width: 900px) {
  .b-warm-drill-cost-grid { grid-template-columns: 1fr; }
}
.b-warm-drill-kpi-col { display: flex; flex-direction: column; gap: 12px; }
.b-warm-drill-kpi {
  background: var(--b-paper); border: 1px solid var(--b-ink-15);
  border-radius: 12px; padding: 18px 20px; flex: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 96px;
}
.b-warm-drill-kpi-l {
  font-family: var(--b-mono); font-size: 0.625rem; color: var(--b-ink-60);
  letter-spacing: 2px;
}
.b-warm-drill-kpi-v {
  font-family: var(--b-serif); font-size: 1.75rem; font-weight: 800;
  letter-spacing: -0.5px; line-height: 1.1; color: var(--b-ink);
}
.b-warm-drill-kpi-s {
  font-family: var(--b-sans); font-size: 0.75rem; color: var(--b-ink-60);
}

/* Price row in cost hero */
.b-warm-drill-price-row {
  margin-top: 24px; display: grid;
  grid-template-columns: 1fr 24px 1fr 24px 1fr;
  align-items: center; gap: 8px;
}
@media (max-width: 600px) {
  .b-warm-drill-price-row {
    grid-template-columns: 1fr;
  }
  .b-warm-drill-price-sep { display: none; }
}
.b-warm-drill-price-l {
  font-family: var(--b-mono); font-size: 0.625rem;
  color: var(--b-ink-60); letter-spacing: 2px;
}
.b-warm-drill-price-l-hl { color: var(--b-vermilion); font-weight: 700; }
.b-warm-drill-price-v {
  font-family: var(--b-serif); font-size: 2.75rem; font-weight: 800;
  color: var(--b-ink); line-height: 1; margin-top: 6px;
  letter-spacing: -1px;
}
.b-warm-drill-price-v-hl { color: var(--b-vermilion); }
.b-warm-drill-price-sep {
  font-size: 1.5rem; color: var(--b-ink-40); text-align: center;
}

/* Cost bar head + bar already from Tier 2 */
.b-warm-drill-bar-head {
  display: flex; justify-content: space-between;
  font-family: var(--b-mono); font-size: 0.625rem; color: var(--b-ink-60);
  letter-spacing: 2px; margin-bottom: 8px;
}

/* Warning card */
.b-warm-drill-warn {
  margin-top: 24px; padding: 14px 16px;
  background: rgba(184,137,58,0.08);
  border: 1px solid rgba(184,137,58,0.25);
  border-radius: 10px;
  display: flex; gap: 12px; align-items: flex-start;
}
.b-warm-drill-warn-title {
  font-family: var(--b-sans); font-size: 0.8125rem;
  font-weight: 600; color: var(--b-ink);
}
.b-warm-drill-warn-body {
  font-family: var(--b-sans); font-size: 0.75rem; color: var(--b-ink-60);
  margin-top: 2px; line-height: 1.6;
}

/* Ingredients table */
.b-warm-drill-table {
  width: 100%; border-collapse: collapse; margin-top: 12px;
  font-family: var(--b-sans); font-size: 0.875rem;
}
.b-warm-drill-th {
  padding: 12px 14px; background: var(--b-cream-deep);
  font-family: var(--b-mono); font-size: 0.625rem; letter-spacing: 2px;
  color: var(--b-ink-60); font-weight: 600; text-transform: uppercase;
  text-align: left;
}
.b-warm-drill-th.text-right { text-align: right; }
.b-warm-drill-tr { border-top: 1px solid var(--b-divider); }
.b-warm-drill-td {
  padding: 14px; color: var(--b-ink);
  vertical-align: middle;
}
.b-warm-drill-td.text-right { text-align: right; }
.b-warm-drill-cat-pill {
  display: inline-block; padding: 3px 8px;
  background: var(--b-cream-deep); border-radius: 4px;
  font-family: var(--b-mono); font-size: 0.6875rem; letter-spacing: 1px;
  color: var(--b-ink-60);
}
.b-warm-drill-table-foot {
  margin-top: 16px; padding: 16px; background: var(--b-ink); color: var(--b-cream);
  border-radius: 10px;
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--b-sans);
}

/* ============================================================
   配方檢視模式 toggle (卡片總覽 vs 深入一覽)
   ============================================================ */
.b-warm-recipes-modes {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--b-cream-deep); border-radius: 999px;
  font-family: var(--b-sans);
}
.b-warm-recipes-mode-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px; border: none;
  background: transparent; color: var(--b-ink-60);
  font-size: 0.8125rem; font-weight: 500; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.b-warm-recipes-mode-btn:hover { color: var(--b-ink); }
.b-warm-recipes-mode-btn.active {
  background: var(--b-ink); color: var(--b-cream);
  font-weight: 600;
}
html.dark .b-warm-recipes-modes { background: rgba(245,239,228,0.08); }
html.dark .b-warm-recipes-mode-btn { color: rgba(245,239,228,0.7); }
html.dark .b-warm-recipes-mode-btn.active {
  background: var(--b-vermilion); color: var(--b-cream);
}

/* ============================================================
   Inline drill-down 樣式 (深入一覽 mode)
   .b-warm-drill-inline-wrap = wrapper (取代 fixed overlay backdrop)
   .b-warm-drill-inline = drill 容器去掉 margin-left (sidebar 已扣)
   ============================================================ */
.b-warm-drill-inline-wrap {
  margin-top: 16px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--b-ink-15);
  background: var(--b-cream);
}
.b-warm-drill-inline { margin-left: 0 !important; }
.b-warm-drill-inline .b-warm-drill-head { position: relative; top: 0; }

/* Recipe picker bar (頂部切換配方) */
.b-warm-detail-pickerbar {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 32px 0;
  background: var(--b-cream);
  font-family: var(--b-sans);
}
.b-warm-detail-arrow {
  padding: 8px 14px; border: 1px solid var(--b-ink-15); border-radius: 999px;
  background: var(--b-paper); color: var(--b-ink); font-size: 0.8125rem;
  cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.b-warm-detail-arrow:hover:not(:disabled) {
  background: var(--b-cream-deep); border-color: var(--b-ink);
}
.b-warm-detail-arrow:disabled { opacity: 0.35; cursor: not-allowed; }
.b-warm-detail-picker { position: relative; flex: 0 0 auto; }
.b-warm-detail-picker-current {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border: 1px solid var(--b-ink-15); border-radius: 8px;
  background: var(--b-paper); color: var(--b-ink);
  font-family: var(--b-serif); font-size: 1rem; font-weight: 700;
  cursor: pointer; min-width: 200px;
  transition: border-color .15s ease;
}
.b-warm-detail-picker-current:hover { border-color: var(--b-vermilion); }
.b-warm-detail-picker-list {
  position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 280px; max-height: 360px; overflow-y: auto;
  background: var(--b-paper); border: 1px solid var(--b-ink-15);
  border-radius: 10px; box-shadow: 0 12px 30px -10px rgba(28,26,23,0.18);
  z-index: 30;
  padding: 4px;
}
.b-warm-detail-picker-item {
  width: 100%; padding: 10px 12px; border-radius: 6px; border: none;
  background: transparent; color: var(--b-ink);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--b-sans); font-size: 0.875rem; cursor: pointer; text-align: left;
  transition: background .15s ease;
}
.b-warm-detail-picker-item:hover { background: var(--b-cream-deep); }
.b-warm-detail-picker-item.active {
  background: rgba(200,71,45,0.10); color: var(--b-vermilion); font-weight: 600;
}
.b-warm-detail-picker-item .num {
  font-family: var(--b-mono); font-size: 0.75rem; color: var(--b-ink-60);
}
.b-warm-detail-counter {
  margin-left: auto; font-family: var(--b-mono); font-size: 0.75rem;
  color: var(--b-ink-60); letter-spacing: 1px;
}

html.dark .b-warm-drill-inline-wrap {
  background: rgba(28,26,23,0.4); border-color: rgba(245,239,228,0.12);
}
html.dark .b-warm-detail-arrow {
  background: rgba(245,239,228,0.06); color: var(--b-cream);
  border-color: rgba(245,239,228,0.18);
}
html.dark .b-warm-detail-arrow:hover:not(:disabled) {
  background: rgba(245,239,228,0.10);
}
html.dark .b-warm-detail-picker-current {
  background: rgba(245,239,228,0.06); color: var(--b-cream);
  border-color: rgba(245,239,228,0.18);
}
html.dark .b-warm-detail-picker-list {
  background: #1f1d1a; border-color: rgba(245,239,228,0.18);
}
html.dark .b-warm-detail-picker-item { color: var(--b-cream); }
html.dark .b-warm-detail-picker-item:hover { background: rgba(245,239,228,0.08); }
html.dark .b-warm-detail-picker-item.active {
  background: rgba(200,71,45,0.20); color: var(--b-cream);
}

@media (max-width: 700px) {
  .b-warm-detail-pickerbar { flex-wrap: wrap; padding: 12px 16px 0; }
  .b-warm-detail-counter { width: 100%; text-align: right; }
}

/* Charts row in 成本分析 tab：30-day margin trend + hourly heatmap */
.b-warm-drill-charts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 1100px) {
  .b-warm-drill-charts { grid-template-columns: 1fr; }
}

/* Sales panel */
.b-warm-drill-sales-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  padding: 16px 0;
}
@media (max-width: 600px) {
  .b-warm-drill-sales-stats { grid-template-columns: 1fr; }
}

/* Pricing panel */
.b-warm-drill-pricing-grid {
  margin-top: 24px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 600px) {
  .b-warm-drill-pricing-grid { grid-template-columns: 1fr; }
}
.b-warm-drill-pricing-cell {
  padding: 20px; background: var(--b-cream); border-radius: 10px;
  border: 1px solid var(--b-ink-15);
}
.b-warm-drill-pricing-v {
  font-family: var(--b-serif); font-size: 2.25rem; font-weight: 800;
  color: var(--b-ink); line-height: 1.1; margin-top: 8px;
  letter-spacing: -0.5px;
}
.b-warm-drill-alert-row {
  padding: 12px 14px; background: var(--b-cream); border-radius: 8px;
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--b-ink-15);
}

/* ============================================================
   分析頁 section 寬度治理
   桌機 1440px+ 滿版讓 KPI / 文字 / 表格類視覺發散，眼睛要橫掃
   把這類 section 收窄到可讀寬度；圖表類 (heatmap, bubble, 價格趨勢)
   保持滿版，因為資料密度高越寬越能看出規律
   ============================================================ */
.b-warm-narrow-section {
  max-width: min(880px, 100%);
  margin-inline: auto;
}