/* ==========================================================================
   Taste Skill (Anti-Slop Frontend) · 五術研習 AI 平台 (Ni-GPT)
   Multimodal Image Vision Support · Clean Apple Design
   ========================================================================== */

:root {
  --bg-app: #fcfaf6;
  --bg-gradient: radial-gradient(circle at 80% 10%, rgba(245, 236, 220, 0.85) 0%, rgba(252, 250, 246, 0.98) 55%, #f7f2e8 100%);
  --bg-sidebar: rgba(246, 241, 233, 0.88);
  --bg-card: rgba(255, 255, 255, 0.88);
  --bg-card-hover: #ffffff;
  --bg-input: rgba(255, 255, 255, 0.98);
  --bg-user-bubble: rgba(236, 227, 215, 0.72);
  --bg-ai-bubble: rgba(255, 255, 255, 0.78);

  --color-coffee-dark: #241c16;
  --color-coffee: #3d3027;
  --color-coffee-light: #6e5e52;
  --color-coffee-muted: #968679;

  --color-green-deep: #1e3d28;
  --color-green: #2d5438;
  --color-green-subtle: rgba(45, 84, 56, 0.08);
  --color-green-glow: rgba(45, 84, 56, 0.18);

  --color-amber-gold: #c2832c;
  --color-amber-subtle: rgba(194, 131, 44, 0.08);
  --color-danger: #b83a38;

  --text-primary: #241c16;
  --text-secondary: #56483d;
  --text-muted: #8c7c6f;
  --text-inverse: #ffffff;

  --border-subtle: rgba(66, 53, 43, 0.07);
  --border-light: rgba(66, 53, 43, 0.11);
  --border-medium: rgba(66, 53, 43, 0.18);
  
  --shadow-inner-light: inset 0 1px 0 0 rgba(255, 255, 255, 0.9);
  --shadow-sm: 0 1px 3px rgba(36, 28, 22, 0.04), var(--shadow-inner-light);
  --shadow-md: 0 6px 24px -2px rgba(36, 28, 22, 0.06), 0 2px 8px -1px rgba(36, 28, 22, 0.03), var(--shadow-inner-light);
  --shadow-lg: 0 14px 40px -4px rgba(36, 28, 22, 0.08), 0 4px 14px -2px rgba(36, 28, 22, 0.04), var(--shadow-inner-light);
  --shadow-modal: 0 20px 60px -8px rgba(30, 22, 16, 0.16), 0 8px 20px -4px rgba(30, 22, 16, 0.06);

  --radius-xs: 8px;
  --radius-sm: 16px;
  --radius-md: 22px; /* 統一標準圓角基準 (與輸入欄位 22px 一致) */
  --radius-lg: 22px; /* 輸入欄位標準圓角基準 */
  --radius-pill: 9999px;

  --container-max-width: 1220px; /* 電腦版整體對話與文章容器加寬 10% */
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang TC", "Hiragino Sans GB", "Microsoft JhengHei", sans-serif;
  --spring-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --spring-duration: 0.32s;
}

html {
  font-size: 110%; /* 全站基礎字體等比放大 10% */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

/* 隱藏原生粗糙滾動條，實現滾動時平滑漸進出現白色微浮雕鈕 + 柔和陰影 */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 9999px;
  box-shadow: none;
  transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 當內容正在滾動 (.is-scrolling) 或懸停時，以動畫平滑漸進顯示白鈕 */
.is-scrolling::-webkit-scrollbar-thumb,
#messages-container:hover::-webkit-scrollbar-thumb,
.chat-history-list:hover::-webkit-scrollbar-thumb {
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(60, 45, 30, 0.22), 0 1px 3px rgba(0, 0, 0, 0.08);
}

body {
  font-family: var(--font-system);
  font-size: 1rem;
  background: var(--bg-app);
  background-image: var(--bg-gradient);
  background-attachment: fixed;
  color: var(--text-primary);
  height: 100vh;
  height: -webkit-fill-available;
  display: flex;
  overflow: hidden;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

.icon {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  transition: transform 0.2s var(--spring-easing);
}

.icon-lg {
  width: 20px;
  height: 20px;
}

/* ==========================================================================
   側邊欄
   ========================================================================== */
#app-container {
  display: flex;
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

#sidebar {
  width: 280px;
  background: var(--bg-sidebar);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  transition: width 0.42s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.36s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.36s ease;
  z-index: 50;
  flex-shrink: 0;
  overflow: hidden;
  white-space: nowrap;
}

#app-container.sidebar-collapsed #sidebar {
  width: 0 !important;
  min-width: 0 !important;
  border-right: none !important;
  opacity: 0 !important;
  transform: translateX(-100%) !important;
  pointer-events: none !important;
  display: none !important;
}

/* 進入專區視圖時，徹底隱藏主對話側邊欄與遮罩，全螢幕純淨呈現 */
#app-container.in-articles-view #sidebar,
#app-container.in-fengshui-view #sidebar,
#app-container.in-qimen-view #sidebar,
#app-container.in-yuelao-view #sidebar,
#app-container.in-ziwei-view #sidebar,
#app-container.in-bazi-view #sidebar,
#app-container.in-hexagram-view #sidebar,
#app-container.in-shuwen-view #sidebar,
#app-container.in-zeji-view #sidebar,
#app-container.in-shuli-view #sidebar,
#app-container.in-subview #sidebar,
#app-container.in-articles-view .sidebar-overlay-backdrop,
#app-container.in-fengshui-view .sidebar-overlay-backdrop,
#app-container.in-qimen-view .sidebar-overlay-backdrop,
#app-container.in-yuelao-view .sidebar-overlay-backdrop,
#app-container.in-ziwei-view .sidebar-overlay-backdrop,
#app-container.in-bazi-view .sidebar-overlay-backdrop,
#app-container.in-hexagram-view .sidebar-overlay-backdrop,
#app-container.in-shuwen-view .sidebar-overlay-backdrop,
#app-container.in-zeji-view .sidebar-overlay-backdrop,
#app-container.in-shuli-view .sidebar-overlay-backdrop,
#app-container.in-subview .sidebar-overlay-backdrop {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  min-width: 0 !important;
  opacity: 0 !important;
  transform: translateX(-100%) !important;
  position: absolute !important;
  left: -9999px !important;
}

#app-container.in-articles-view #articles-view,
#app-container.in-fengshui-view #fengshui-view,
#app-container.in-qimen-view #qimen-view,
#app-container.in-yuelao-view #yuelao-view,
#app-container.in-ziwei-view #ziwei-view,
#app-container.in-bazi-view #bazi-view,
#app-container.in-hexagram-view #hexagram-view,
#app-container.in-shuwen-view #shuwen-view,
#app-container.in-zeji-view #zeji-view,
#app-container.in-shuli-view #shuli-view {
  width: 100% !important;
  max-width: 100vw !important;
  flex: 1 1 100% !important;
}

.sidebar-header {
  padding: 14px 18px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.brand {
  display: flex;
  align-items: center;
  min-height: 56px;
  flex: 1;
}

.sidebar-brand-logo {
  height: 60px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  display: block;
}

.btn-new-chat {
  /* 上方留白：原為 0 導致按鈕緊貼側邊欄標題的分隔線，視覺上過於擁擠 */
  margin: 14px 16px 12px;
  padding: 11px 16px;
  background: #ffffff;
  border: none;
  color: var(--color-coffee-dark);
  border-radius: var(--radius-md);
  font-size: 0.92rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(60, 45, 30, 0.07), 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: all 0.25s var(--spring-easing);
}

.btn-new-chat .icon {
  color: var(--color-green);
}

.btn-new-chat:hover {
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(45, 84, 56, 0.15), 0 2px 6px rgba(0, 0, 0, 0.04);
  transform: translateY(-1.5px);
}

.btn-new-chat:active {
  transform: scale(0.97);
  transition: transform 80ms ease-out;
}

.chat-history-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.history-item {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 500;
  transition: all 0.18s ease;
  border: 1px solid transparent;
}

.history-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.history-item .icon {
  color: var(--color-coffee-muted);
}

.history-item:hover {
  background: rgba(255, 255, 255, 0.65);
  color: var(--color-coffee-dark);
}

.history-item.active {
  background: var(--bg-card);
  color: var(--color-green);
  font-weight: 600;
  border-color: var(--border-light);
  box-shadow: var(--shadow-sm);
}

.history-item.active .icon {
  color: var(--color-green);
}

.history-item-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.18s ease;
  flex-shrink: 0;
}

.history-item:hover .history-item-actions {
  opacity: 1;
}

.history-item .btn-action {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 5px;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.history-item .btn-action.btn-edit:hover {
  color: var(--color-green);
  background: rgba(45, 84, 56, 0.1);
  transform: scale(1.08);
}

.history-item .btn-action.btn-del:hover {
  color: var(--color-danger);
  background: rgba(184, 58, 56, 0.1);
  transform: scale(1.08);
}

.sidebar-footer {
  padding: 12px 14px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255, 255, 255, 0.45);
}

/* 加好友的引導已由頭貼的登入/解鎖流程接管（在使用者實際碰到鎖住的
   功能時攔截，轉換力度比側邊欄一顆靜態按鈕更精準），故拿掉原本的
   LINE 官方帳號按鈕，剩下臉書與下載檔案兩顆並排成一橫排，省下的
   垂直空間讓歷史對話清單能多顯示幾筆。 */
.sidebar-footer-row {
  flex-direction: row;
}

.sidebar-footer-row .btn-fb-official,
.sidebar-footer-row .btn-download-chat {
  flex: 1;
  width: auto;
  min-width: 0;
  margin-top: 0;
  padding: 10px 8px;
}

.sidebar-footer-row .btn-fb-official span,
.sidebar-footer-row .btn-download-chat span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-line-official {
  width: 100%;
  padding: 10px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(6, 199, 85, 0.3);
  background: linear-gradient(135deg, #06c755 0%, #05b04b 100%);
  color: #ffffff !important;
  font-size: 0.90rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 2px 10px rgba(6, 199, 85, 0.22);
  transition: all 0.22s var(--spring-easing);
}

.btn-line-official .line-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn-line-official:hover {
  background: linear-gradient(135deg, #05b64c 0%, #049c41 100%);
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(6, 199, 85, 0.35);
  transform: translateY(-1px);
}

.btn-line-official:active {
  transform: scale(0.97);
}

.btn-fb-official {
  width: 100%;
  padding: 10px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(24, 119, 242, 0.3);
  background: linear-gradient(135deg, #1877f2 0%, #0f5fcc 100%);
  color: #ffffff !important;
  font-size: 0.90rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 2px 10px rgba(24, 119, 242, 0.22);
  transition: all 0.22s var(--spring-easing);
  margin-top: 8px;
}

.btn-fb-official .fb-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn-fb-official:hover {
  background: linear-gradient(135deg, #166fe5 0%, #0d55b8 100%);
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(24, 119, 242, 0.35);
  transform: translateY(-1px);
}

.btn-fb-official:active {
  transform: scale(0.97);
}

.btn-download-chat {
  width: 100%;
  padding: 11px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  background: #ffffff;
  color: var(--color-coffee-dark);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 2px 8px rgba(60, 45, 30, 0.05);
  transition: all 0.22s var(--spring-easing);
}

.btn-download-chat .icon {
  color: var(--color-green);
}

.btn-download-chat:hover {
  background: #ffffff;
  color: var(--color-green);
  border-color: rgba(45, 84, 56, 0.22);
  box-shadow: 0 4px 16px rgba(45, 84, 56, 0.12);
  transform: translateY(-1px);
}

.btn-download-chat:active {
  transform: scale(0.97);
}

/* ==========================================================================
   主對話區域
   ========================================================================== */
#main-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  background: transparent;
  min-width: 0;
}

#main-chat::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/logo_1.svg');
  background-repeat: no-repeat;
  background-position: center 40%;
  background-size: min(594px, 75vw);
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}

/* 全站頁面頂列統一視覺規格（首頁對話／文章知識庫／梅花易數／
   紫微斗數／子平八字），確保切換頁面時按鈕位置、大小、底色
   完全一致，不因頁面不同而跳動。個別頁面若需要調整，請改在此處
   統一調整，切勿只改單一頁面造成再次不一致。 */
.chat-header,
.articles-header,
.hexagram-header,
.ziwei-header,
.bazi-header,
.qimen-header,
.fengshui-header,
.yuelao-header,
.shuwen-header {
  display: flex;
  align-items: center;
  padding: 16px 32px;
  min-height: 84px;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(252, 250, 246, 0.85);
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  box-shadow: none;
  z-index: 10;
  box-sizing: border-box;
}

/* 與 .articles-header-inner 等其餘頁面頂列共用同一套寬度基準，
   確保右上角按鈕群組在所有頁面的位置、間距完全一致，不因頁面
   切換而左右跳動。 */
.chat-header-inner {
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 首頁對話頁的右上角按鈕群組改為固定於視窗座標，不隨側邊欄收合／
   展開造成 #main-chat 可用寬度變化而左右跳動——其餘工具頁面因側邊欄
   固定隱藏、本就不受影響，故僅需在此頁面套用。公式與未固定前的
   置中版面完全等值（側邊欄收合、視窗夠寬時，位置與其他頁面一致），
   差別只在於改以整個視窗寬度 100vw 計算，不受側邊欄佔用寬度影響。 */
@media (min-width: 769px) {
  .chat-header .header-actions {
    position: fixed;
    top: 24px;
    right: max(32px, calc((100vw - 1244px) / 2 + 32px));
    z-index: 60;
  }
}

.header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.btn-sidebar-toggle {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  color: var(--color-coffee);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s var(--spring-easing);
}

.btn-sidebar-toggle:hover {
  background: var(--bg-card-hover);
  color: var(--color-green);
  border-color: var(--border-medium);
}

.btn-sidebar-toggle:active {
  transform: scale(0.95);
  transition: transform 80ms ease-out;
}

.current-title {
  font-size: 1.02rem;
  font-weight: 650;
  color: var(--color-coffee-dark);
}

.header-actions {
  display: flex;
  gap: 10px;
}

.btn-icon {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  color: var(--color-coffee);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s var(--spring-easing);
}

.btn-icon:hover {
  background: var(--bg-card-hover);
  color: var(--color-green);
  border-color: var(--border-medium);
  transform: translateY(-1px);
}

/* 需要 AI 的按鈕在未登入／未加好友時的鎖定樣式：
   仍可點擊（點了會導向登入／加好友），但視覺上明確表示尚未解鎖 */
.ai-gated-btn.ai-gated-locked {
  background: var(--bg-card-hover);
  color: var(--color-coffee);
  border: 1px dashed var(--border-medium);
  opacity: 0.9;
}

/* 會員專區 */
.member-referral-link {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 8px 0 10px;
}

.member-referral-link .form-input {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
}

.member-referral-link .btn-modal {
  flex-shrink: 0;
  white-space: nowrap;
}

/* LINE 品牌綠，讓分享動作一眼可辨 */
.btn-line-share {
  background: #06C755 !important;
  border-color: #06C755 !important;
  color: #ffffff !important;
}

.member-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md, 12px);
  margin-bottom: 14px;
}

.member-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-card-hover);
}

.member-name {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-coffee);
  margin-bottom: 4px;
}

.member-status {
  font-size: 0.85rem;
  color: var(--color-green);
}

.member-quota {
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md, 12px);
  margin-bottom: 14px;
}

.member-quota-label {
  font-size: 0.85rem;
  color: var(--color-coffee);
  opacity: 0.75;
  margin-bottom: 6px;
}

.member-quota-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-coffee);
  margin-bottom: 8px;
}

.member-quota-hint {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--color-coffee);
  opacity: 0.6;
}

/* 會員頭貼入口：圓形頭貼撐滿按鈕範圍，未加好友時退回一般圖示按鈕外觀 */
.header-btn-avatar {
  padding: 0;
  overflow: hidden;
}

/* 手機與 iPad 直式：頭貼與抽屜鈕並排於右上角，尺寸對齊抽屜鈕 */
.mobile-header-actions {
  gap: 8px;
}

.mobile-header-actions .header-btn-avatar {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  background: #ffffff;
  border: 1px solid var(--border-medium);
  flex-shrink: 0;
}

.header-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.btn-icon.active {
  background: linear-gradient(135deg, #9f8469 0%, #826950 100%) !important;
  color: #ffffff !important;
  border-color: #826950 !important;
  box-shadow: 0 3px 10px rgba(130, 105, 80, 0.22) !important;
}

.btn-icon.active svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

.btn-icon:active {
  transform: scale(0.95);
  transition: transform 80ms ease-out;
}

/* 頂列工具按鈕的單字漢字徽章（陽宅風水／奇門遁甲／月老靈籤／
   紫微斗數／子平八字／梅花易數起卦），取代原本較抽象不易一眼
   辨識的圖形符號，字重維持一般（非粗體），與圓形按鈕置中對齊。 */
.btn-icon-char {
  font-family: "Songti TC", "Noto Serif TC", "Source Han Serif TC", serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  color: currentColor;
  user-select: none;
}

/* 頂列「手寫疏文」極簡直式兩字按鈕（延續師解惑極簡宋體/明體風格，字級再放大10%至12.7px） */
.btn-icon-char-vert {
  font-family: "Songti TC", "Noto Serif TC", "Source Han Serif TC", serif;
  font-size: 12.7px;
  font-weight: 550;
  line-height: 1.05;
  letter-spacing: -0.2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: currentColor;
  user-select: none;
  pointer-events: none;
}

.btn-icon-char-vert span {
  display: block;
  height: 13.5px;
  line-height: 13.5px;
}

/* 手機抽屜選單直式兩字徽章（同步放大10%至14.8px） */
.tool-icon-circle.icon-shuwen {
  background: rgba(194, 131, 44, 0.12);
  color: #9f6c24;
}

/* 抽屜選單：數理測算徽章 */
.tool-icon-circle.icon-shuli {
  background: rgba(43, 90, 115, 0.12);
  color: #2b5a73;
}

.drawer-char-vert {
  font-family: "Songti TC", "Noto Serif TC", serif;
  font-size: 14.8px;
  font-weight: 600;
  line-height: 1.1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.drawer-char-vert span {
  display: block;
  height: 14.8px;
  line-height: 14.8px;
}

/* 抽屜工具圓框內的單字漢字（紫、八、占、奇、宅、月），與頂部風格一致 */
.tool-icon-circle .btn-icon-char {
  font-family: "Songti TC", "Noto Serif TC", "Source Han Serif TC", serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-coffee-dark, #241c16);
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 系統設定按鈕獨立間距與分隔線 */
.header-btn-settings {
  position: relative;
}

.header-btn-settings::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 18%;
  height: 64%;
  width: 1px;
  background: rgba(194, 131, 44, 0.28);
}

/* ==========================================================================
   訊息對話滾動區
   ========================================================================== */
#messages-container {
  position: relative;
  z-index: 1;
  flex: 1;
  overflow-y: auto;
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: var(--container-max-width);
  width: 100%;
  margin: 0 auto;
}

.welcome-hero {
  text-align: center;
  margin: auto 0;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.hero-logo-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

/* 白色背景光芒層 (等比放大 40% 至 196px，緊貼 LOGO 正後方) */
.hero-logo-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 196px;
  height: 196px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.72) 48%,
    rgba(255, 255, 255, 0.25) 72%,
    transparent 85%
  );
  box-shadow: 
    0 0 20px 6px rgba(255, 255, 255, 0.85),
    0 0 36px 12px rgba(255, 255, 255, 0.55);
  filter: blur(5px);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.2);
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.65s ease;
  animation: heroGlowEntry 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards,
             heroGlowBreath 4.8s ease-in-out 1.4s infinite;
}

/* LOGO 舞台 (保持在白色光暈上方，無混濁黑影，純粹乾淨) */
.hero-logo-coin-stage {
  position: relative;
  z-index: 2;
  will-change: transform, opacity;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  animation: heroZoomEntry 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards,
             heroLogoBreath 4.8s ease-in-out 1.4s infinite;
}

.welcome-hero-logo {
  height: 176px;
  width: 176px;
  max-width: 100%;
  object-fit: contain;
  display: block;
  filter: none !important;
}

/* 滑鼠懸停：緩慢放大 10%，白光自然漸亮 */
@media (hover: hover) and (pointer: fine) {
  .hero-logo-wrap:hover .hero-logo-coin-stage {
    transform: scale(1.10) !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .hero-logo-wrap:hover .hero-logo-glow {
    transform: translate(-50%, -50%) scale(1.18) !important;
    opacity: 0.85 !important;
    filter: blur(6px) !important;
    transition: transform 0.6s ease, opacity 0.6s ease !important;
  }
}

/* 開場從小放大飛入 (遠處往前，無任何黑影濾鏡) */
@keyframes heroZoomEntry {
  0% {
    opacity: 0;
    transform: scale(0.16);
  }
  65% {
    opacity: 1;
    transform: scale(1.035);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 開場白色背景光暈淡入展開 */
@keyframes heroGlowEntry {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.15);
  }
  65% {
    opacity: 0.75;
    transform: translate(-50%, -50%) scale(1.1);
    filter: blur(6px);
  }
  100% {
    opacity: 0.65;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(4px);
  }
}

/* 停住後 LOGO 緩慢有機呼吸 (無黑影) */
@keyframes heroLogoBreath {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.032);
  }
  100% {
    transform: scale(1);
  }
}

/* 停住後 背景白色光芒平緩呼吸跟隨 (亮度降低 30%，柔和精緻) */
@keyframes heroGlowBreath {
  0% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(0.95);
    filter: blur(4px);
  }
  50% {
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(1.08);
    filter: blur(6px);
  }
  100% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(0.95);
    filter: blur(4px);
  }
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-amber-subtle);
  border: 1px solid rgba(194, 131, 44, 0.22);
  color: var(--color-amber-gold);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.hero-title {
  font-size: 2.15rem;
  font-weight: 800;
  color: var(--color-coffee-dark);
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.hero-subtitle {
  position: relative;
  z-index: 5;
  font-size: 0.68rem; /* 文字縮小 30% (原本 0.98rem 縮小至 0.68rem) */
  color: var(--color-coffee-light);
  max-width: 540px;
  line-height: 1.65;
  letter-spacing: 0.02em;
  opacity: 0.82;
}

.quick-action-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
  max-width: 760px;
  margin-top: 24px;
}


.quick-card {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  text-align: left;
  cursor: pointer;
  transition: all 0.25s var(--spring-easing);
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 4px 20px rgba(60, 45, 30, 0.05), 0 1px 4px rgba(0, 0, 0, 0.02);
  position: relative;
  overflow: hidden;
}

.quick-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--color-green), var(--color-amber-gold));
  opacity: 0;
  transition: opacity 0.25s ease;
}

.quick-card:hover {
  background: rgba(255, 255, 255, 0.92);
  transform: translateY(-2.5px);
  box-shadow: 0 12px 34px rgba(45, 84, 56, 0.12), 0 3px 8px rgba(0, 0, 0, 0.04);
}

.quick-card:hover::before {
  opacity: 1;
}

.quick-card:active {
  transform: scale(0.98);
  transition: transform 80ms ease-out;
}

.quick-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--color-coffee-dark);
}

.quick-card-header .icon {
  color: var(--color-green);
}

.quick-card-emoji {
  font-size: 1.1rem;
  line-height: 1;
}

.quick-card-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
  text-wrap: pretty;
  word-break: break-word;
}

/* ==========================================================================
   訊息氣泡
   ========================================================================== */
.msg-wrapper {
  display: flex;
  width: 100%;
  animation: messageAppear 0.28s var(--spring-easing) forwards;
}

@keyframes messageAppear {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.msg-wrapper.user {
  justify-content: flex-end;
}

.msg-wrapper.ai {
  justify-content: flex-start;
}

.msg-content-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.msg-wrapper.user .msg-content-box {
  max-width: 75%;
}

.msg-wrapper.ai .msg-content-box {
  max-width: 100%;
  width: 100%;
}

.msg-bubble {
  padding: 40px; /* 電腦版：文字與白底框上下、左右完全相同 (均為 40px) */
  border-radius: var(--radius-md);
  font-size: 1.02rem;
  line-height: 1.84;
  word-break: break-word;
  box-shadow: var(--shadow-sm);
}

.msg-bubble hr {
  border: none;
  height: 1px;
  background: var(--border-medium);
  margin: 30px 0; /* 分隔線上下文距離精準設定為 30px */
}

.msg-bubble p {
  margin-bottom: 12px;
}

.msg-bubble p:last-child {
  margin-bottom: 0;
}

.msg-bubble ol, .msg-bubble ul {
  padding-left: 22px;
  margin-bottom: 12px;
}

.msg-bubble li {
  margin-bottom: 6px;
  line-height: 1.8;
}

.msg-wrapper.user .msg-bubble {
  position: relative;
  background: rgba(236, 227, 215, 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  color: #000000;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 20px 4px 20px 20px; /* 右上角對話尖角收束 */
  box-shadow: 0 4px 16px rgba(60, 45, 30, 0.05), 0 1px 2px rgba(0, 0, 0, 0.02);
  padding: 14px 20px;
}

.msg-wrapper.user .msg-bubble,
.msg-wrapper.user .msg-bubble p,
.msg-wrapper.user .msg-bubble div,
.msg-wrapper.user .msg-bubble span {
  color: #000000;
}

/* 使用者發言氣泡：右側指向小尖角 / 尾巴 */
.msg-wrapper.user .msg-bubble::before {
  content: "";
  position: absolute;
  right: -15px;
  top: 9px;
  width: 0;
  height: 0;
  border-left: 15px solid rgba(66, 53, 43, 0.14);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  pointer-events: none;
}

.msg-wrapper.user .msg-bubble::after {
  content: "";
  position: absolute;
  right: -13px;
  top: 9px;
  width: 0;
  height: 0;
  border-left: 15px solid rgba(236, 227, 215, 0.85);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  pointer-events: none;
}

.msg-wrapper.ai .msg-bubble {
  position: relative;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  color: var(--text-primary);
  border-radius: 4px 22px 22px 22px; /* 左上角對話尖角收束 */
  box-shadow: 0 8px 32px rgba(60, 45, 30, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02);
}

/* 大師解惑回話氣泡：左側指向小尖角 / 尾巴 */
.msg-wrapper.ai .msg-bubble::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 19px;
  width: 0;
  height: 0;
  border-right: 15px solid rgba(66, 53, 43, 0.08);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  pointer-events: none;
}

.msg-wrapper.ai .msg-bubble::after {
  content: "";
  position: absolute;
  left: -13px;
  top: 19px;
  width: 0;
  height: 0;
  border-right: 15px solid rgba(255, 255, 255, 0.88);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  pointer-events: none;
}

/* 訊息氣泡底部的常駐快捷操作工具列 */
.msg-footer-bar {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(60, 45, 30, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.msg-footer-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-bubble-action {
  background: rgba(45, 84, 56, 0.06);
  color: var(--color-green);
  border: 1px solid rgba(45, 84, 56, 0.15);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.18s ease;
}

.btn-bubble-action.continue {
  background: linear-gradient(135deg, #9f8469 0%, #826950 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 2px 6px rgba(130, 105, 80, 0.22);
}

.btn-bubble-action.continue:hover {
  background: linear-gradient(135deg, #90765d 0%, #755e47 100%);
  transform: translateY(-1px);
}

.btn-bubble-action.copy:hover {
  background: rgba(45, 84, 56, 0.12);
  color: var(--color-coffee-dark);
}

/* 氣泡內 AI 自主生成主題追問面板 */
.bubble-suggestions-tray {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(245, 240, 230, 0.5);
  border-radius: var(--radius-md);
  border: 1px solid rgba(194, 131, 44, 0.22);
}

.bubble-suggestions-label {
  font-size: 0.76rem;
  font-weight: 750;
  color: var(--color-coffee);
  margin-bottom: 8px;
  letter-spacing: 0.3px;
}

.bubble-suggestions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.btn-suggestion-chip {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  text-align: left;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(60, 45, 30, 0.04);
  transition: all 0.2s ease;
}

.btn-suggestion-chip:hover {
  background: #ffffff;
  border-color: var(--color-green);
  transform: translateY(-1.5px);
  box-shadow: 0 4px 14px rgba(45, 84, 56, 0.12);
}

.btn-suggestion-chip .sug-icon {
  font-size: 1.05rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.btn-suggestion-chip .sug-text {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-coffee-dark);
  line-height: 1.45;
}

/* 輸入框上方的快捷追問晶片列 */
.quick-chips-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 10px 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.quick-chips-bar::-webkit-scrollbar {
  display: none;
}

.quick-chip {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--border-light);
  color: var(--color-coffee);
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(60, 45, 30, 0.04);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s var(--spring-easing);
  backdrop-filter: blur(8px);
}

.quick-chip:hover {
  background: #ffffff;
  color: var(--color-green);
  border-color: rgba(45, 84, 56, 0.3);
  transform: translateY(-1.5px);
  box-shadow: 0 4px 12px rgba(45, 84, 56, 0.12);
}

.quick-chip.highlight {
  background: linear-gradient(135deg, rgba(45, 84, 56, 0.12) 0%, rgba(194, 131, 44, 0.12) 100%);
  border: 1.2px solid rgba(45, 84, 56, 0.35);
  color: var(--color-green);
  font-weight: 700;
}

.quick-chip.highlight:hover {
  background: var(--color-green);
  color: #ffffff;
  border-color: var(--color-green);
}

/* ==========================================================================
   紫微斗數 4x4 宮位命盤與排盤器樣式 (Ziwei Dou Shu Board & Modal)
   ========================================================================== */
.modal-card.modal-card-ziwei {
  max-width: 880px !important; /* 左右大幅放大 30%+，大器寬敞完整展示 */
  width: 95vw !important;
  max-height: 92vh;
  padding: 24px 26px;
  overflow-y: auto;
  box-sizing: border-box;
}

.ziwei-modal-tabs {
  display: flex;
  gap: 8px;
  margin: 10px 0 16px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 8px;
}

.ziwei-tab {
  background: none;
  border: none;
  padding: 8px 16px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-pill);
  transition: all 0.2s ease;
}

.ziwei-tab.active {
  background: var(--color-green-subtle);
  color: var(--color-green);
}

/* 新建命盤／八字排盤的輸入表單獨立成一個淺色卡片，跟下方排盤結果
   （白底）區隔開來，避免兩者背景相同、視覺上混在一起分不清段落。 */
.ziwei-create-form-card {
  background: var(--color-bg-primary, #fbf8f3);
  border: 1px solid rgba(194, 131, 44, 0.16);
  border-radius: 12px;
  padding: 20px;
}

.ziwei-form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  width: 100%;
}

/* 出生月/日/時辰＋閏月勾選整合成同一行，原本各佔一行、閏月勾選
   單獨一行的排法太佔垂直空間。 */
.ziwei-form-grid-row2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  width: 100%;
  margin-top: 14px;
}

@media (max-width: 680px) {
  .ziwei-form-grid {
    grid-template-columns: 1fr 1fr;
  }
  .ziwei-form-grid-row2 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .ziwei-form-grid,
  .ziwei-form-grid-row2 {
    grid-template-columns: 1fr;
  }
}

.ziwei-form-grid .form-group label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-coffee-dark);
  margin-bottom: 6px;
  display: block;
}

.ziwei-form-grid .form-input {
  font-size: 0.95rem;
  padding: 10px 12px;
  width: 100%;
  box-sizing: border-box;
}

.ziwei-board-card {
  background: linear-gradient(135deg, #ffffff 0%, #faf6ee 100%);
  border: 1px solid rgba(194, 131, 44, 0.3);
  border-radius: var(--radius-md);
  padding: 10px;
  box-shadow: var(--shadow-sm);
  width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 4x4 傳統紫微命盤網格 (巳午未申 / 辰中酉 / 卯中戌 / 寅丑子亥) */
.ziwei-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  gap: 5px;
  width: 100%;
  min-width: 540px;
}

/* 手機（含 LINE LIFF 視窗）：命盤需完整顯示於畫面內，不可橫向溢出。
   原本此處設 min-width: 480px，但一般手機 LIFF 視窗內容區僅約 375px，
   會強制撐出約 105px 寬度而被切掉右半邊（宮位干支、四化標籤看不到），
   使用者必須橫向捲動、截圖也不完整。
   實測 375px 下移除最小寬度限制後，十二宮完整星曜、四化標籤、大限歲數
   與中宮資訊皆能完整呈現且維持可讀，故改為不設下限、由格線自適應。 */
@media (max-width: 600px) {
  .ziwei-grid {
    min-width: 0;
    gap: 4px;
  }

  .ziwei-cell {
    min-height: 92px;
    padding: 4px 5px;
  }
}

.ziwei-cell {
  background: #ffffff;
  border: 1px solid rgba(66, 53, 43, 0.12);
  border-radius: 10px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  min-height: 110px;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.ziwei-cell:hover {
  border-color: rgba(45, 84, 56, 0.4);
  box-shadow: 0 4px 12px rgba(45, 84, 56, 0.08);
}

.ziwei-cell.is-ming {
  background: linear-gradient(145deg, #f2f7f4 0%, #ffffff 100%);
  border: 1.5px solid var(--color-green);
  box-shadow: 0 2px 8px rgba(45, 84, 56, 0.12);
}

.ziwei-cell.is-shen {
  border: 1.5px dashed var(--color-amber-gold);
}

.ziwei-cell.is-laiyin {
  box-shadow: 0 0 0 1.5px rgba(217, 119, 6, 0.45) inset;
}

.ziwei-cell-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.palace-title {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-coffee-dark);
}

.is-ming .palace-title {
  color: var(--color-green);
}

/* 紫微四化與星曜篩選工具列 */
.ziwei-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-bottom: 12px;
  align-items: center;
}

.ziwei-toolbar-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ziwei-toolbar-title {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--color-coffee-dark);
}

.ziwei-chip {
  background: rgba(66, 53, 43, 0.05);
  border: 1px solid rgba(66, 53, 43, 0.12);
  color: var(--color-coffee);
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.2s ease;
}

.ziwei-chip:hover {
  background: rgba(45, 84, 56, 0.08);
  border-color: var(--color-green);
}

.ziwei-chip.active {
  background: linear-gradient(135deg, #9f8469 0%, #826950 100%);
  border-color: #826950;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(130, 105, 80, 0.22);
}

.ziwei-select-mini {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 3px 8px;
  font-size: 0.78rem;
  color: var(--color-coffee-dark);
  font-weight: 600;
  cursor: pointer;
}

.palace-badge-laiyin {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #ffffff;
  font-size: 0.68rem;
  padding: 1px 5px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(217, 119, 6, 0.25);
}

.palace-badge-ming {
  background: var(--color-green);
  color: #ffffff;
  font-size: 0.7rem;
  padding: 1px 5px;
  border-radius: var(--radius-pill);
  font-weight: 700;
}

.palace-badge-shen {
  background: var(--color-amber-gold);
  color: #ffffff;
  font-size: 0.7rem;
  padding: 1px 5px;
  border-radius: var(--radius-pill);
  font-weight: 700;
}

.palace-branch {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
}

.palace-stars {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.star-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
}

.star-name.major {
  font-weight: 700;
  color: var(--color-green);
}

/* 空宮借對宮星曜：用較淺的顏色＋虛線底線跟本宮真正坐守的主星
   區隔開，避免使用者誤以為這顆星真的坐在本宮。 */
.star-name.major.borrowed {
  color: var(--color-coffee-light, #a8876a);
  border-bottom: 1px dashed currentColor;
}

.star-borrowed-tag {
  font-size: 0.62rem;
  font-weight: 700;
  color: #fff;
  background: var(--color-coffee-light, #a8876a);
  border-radius: 4px;
  padding: 0 3px;
  margin-left: 3px;
  vertical-align: middle;
}

.star-name.minor {
  color: var(--color-coffee-light);
  font-size: 0.75rem;
}

.star-name.small {
  color: #64748b;
  font-size: 0.72rem;
  display: inline-block;
  margin-right: 4px;
}

.star-brightness {
  font-size: 0.68rem;
  color: var(--color-gold, #ca8a04);
  margin-left: 1px;
  font-weight: 700;
}

.star-name.has-tip,
.palace-title.has-tip {
  border-bottom: 1px dotted currentColor;
  cursor: pointer;
}

.hua-badge-group {
  display: flex;
  gap: 2px;
  align-items: center;
}

.hua-badge {
  font-size: 0.64rem;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  color: #ffffff;
}

.hua-badge.lu { background: #2563eb; }
.hua-badge.quan { background: #7c3aed; }
.hua-badge.ke { background: #059669; }
.hua-badge.ji { background: #dc2626; }

.hua-badge.year { border: 1px solid rgba(255, 255, 255, 0.4); }
.hua-badge.daxian { border: 1px dashed rgba(255, 255, 255, 0.7); opacity: 0.95; }
.hua-badge.liunian { border: 1px dotted rgba(255, 255, 255, 0.9); opacity: 0.9; }
.hua-badge.liunian:not(.lu):not(.quan):not(.ke):not(.ji) { background: #b45309; }

.star-name.small.liunian {
  color: #ffffff;
  background: #b45309;
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 700;
}

.palace-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 0.72rem;
  color: var(--text-muted);
  border-top: 1px dashed rgba(66, 53, 43, 0.08);
  padding-top: 3px;
  margin-top: 3px;
}

/* 中央中宮展示區 (佔據 2x2 空間) */
.ziwei-center-cell {
  grid-column: 2 / span 2;
  grid-row: 2 / span 2;
  background: linear-gradient(145deg, #fdfbf7 0%, #f7f1e3 100%);
  border: 1.5px solid rgba(194, 131, 44, 0.35);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: inset 0 2px 8px rgba(194, 131, 44, 0.06);
}

.ziwei-center-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-coffee-dark);
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.ziwei-center-meta {
  font-size: 0.82rem;
  color: var(--color-coffee);
  line-height: 1.5;
}

/* 中宮四化彙整表 */
.center-sihua-table {
  width: 100%;
  margin-top: 10px;
  border-top: 1px dashed rgba(194, 131, 44, 0.35);
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.center-sihua-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.center-sihua-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-coffee-dark);
  letter-spacing: 0.3px;
}

.center-sihua-badges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

.center-sihua-badges .hua-badge {
  font-size: 0.72rem;
  padding: 2px 6px;
  border-radius: 4px;
}

.kuiyue-activation-row {
  width: 100%;
  align-items: stretch;
}

.kuiyue-activation-notes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.kuiyue-note-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  background: rgba(255, 255, 255, 0.6);
  border-left: 3px solid var(--color-coffee-light, #a8876a);
  border-radius: 6px;
  padding: 6px 10px;
}

.kuiyue-note-item.kuiyue-note-kui {
  border-left-color: #d97706;
  background: rgba(217, 119, 6, 0.08);
}

.kuiyue-note-item.kuiyue-note-yue {
  border-left-color: #7c3aed;
  background: rgba(124, 58, 237, 0.08);
}

.kuiyue-note-item.kuiyue-note-both {
  border-left-color: var(--color-gold, #ca8a04);
  background: rgba(202, 138, 4, 0.1);
}

.kuiyue-note-tag {
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--color-coffee-dark);
}

/* 命盤卡片彈窗（showAlert）底部的「適用對象」標籤列 */
.dialog-role-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.dialog-role-tag {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-pill, 999px);
  background: var(--color-green-subtle, rgba(45, 84, 56, 0.1));
  color: var(--color-green, #2d5438);
}

.kuiyue-note-text {
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--color-coffee);
}

.ziwei-chart-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 14px;
}

.ziwei-saved-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  transition: all 0.2s ease;
}

.ziwei-saved-item:hover {
  border-color: var(--color-green);
  box-shadow: var(--shadow-sm);
}
.msg-image-attachment {
  max-width: 280px;
  max-height: 280px;
  border-radius: var(--radius-lg); /* 統一 22px 圓角 */
  margin-bottom: 10px;
  object-fit: cover;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 0.2s ease;
  display: block;
}

.msg-image-attachment:hover {
  transform: scale(1.02);
}

/* ==========================================================================
   AI 打字中動態呼吸波浪點點 (Typing Indicator)
   ========================================================================== */
.typing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 4px;
}

.typing-dot {
  width: 12px;
  height: 12px;
  background: var(--color-green);
  border-radius: 50%;
  display: inline-block;
  opacity: 0.35;
  box-shadow: 0 2px 6px rgba(45, 84, 56, 0.2);
  animation: typingBreathingBounce 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1) {
  animation-delay: 0s;
}

.typing-dot:nth-child(2) {
  animation-delay: 0.22s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.44s;
}

.typing-dot:nth-child(4) {
  animation-delay: 0.66s;
}

/* 接續等待提示：內容過長觸發自動接續時，附加在已生成內容後方，
   避免使用者誤以為當機而重新整理，導致已寫好的長篇內容前功盡棄。 */
.continuation-indicator {
  margin-top: 10px;
  padding: 6px 10px;
  font-size: 0.8rem;
  color: var(--text-muted);
  border-top: 1px dashed var(--color-border, rgba(0,0,0,0.08));
}

.continuation-indicator .typing-dot {
  width: 7px;
  height: 7px;
}


@keyframes typingBreathingBounce {
  0%, 80%, 100% {
    transform: scale(0.8) translateY(0);
    opacity: 0.35;
    box-shadow: 0 1px 4px rgba(45, 84, 56, 0.15);
  }
  40% {
    transform: scale(1.4) translateY(-6px);
    opacity: 1;
    background: var(--color-green-light);
    box-shadow: 0 6px 18px rgba(45, 84, 56, 0.45), 0 0 14px rgba(194, 131, 44, 0.35);
  }
}

.msg-bubble blockquote, .prescription-card {
  background: var(--color-amber-subtle);
  border-left: 3.5px solid var(--color-amber-gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 16px 20px;
  margin: 16px 0;
  font-size: 0.94rem;
  color: var(--color-coffee-dark);
  line-height: 1.75;
}

/* ==========================================================================
   易經起卦專屬典雅視覺卡片 (Hexagram Card)
   ========================================================================== */
.hexagram-card {
  background: linear-gradient(135deg, #ffffff 0%, #faf6ee 100%);
  border: 1px solid rgba(194, 131, 44, 0.28);
  border-radius: var(--radius-lg); /* 統一 22px 圓角 */
  padding: 24px 28px;
  margin: 22px 0;
  box-shadow: 0 8px 30px rgba(60, 45, 30, 0.08), 0 2px 8px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s var(--spring-easing);
}

.hexagram-card:hover {
  box-shadow: 0 12px 38px rgba(45, 84, 56, 0.12), 0 4px 12px rgba(194, 131, 44, 0.08);
  border-color: rgba(45, 84, 56, 0.35);
  transform: translateY(-2px);
}

.hexagram-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(66, 53, 43, 0.08);
  padding-bottom: 12px;
}

.hexagram-title-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-amber-subtle);
  color: var(--color-amber-gold);
  border: 1px solid rgba(194, 131, 44, 0.25);
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.hexagram-method {
  font-size: 0.86rem;
  color: var(--text-muted);
  font-weight: 600;
}

.hexagram-body {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 10px 0;
  gap: 14px;
}

.hexagram-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  flex: 1;
}

.hexagram-visual-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 2px;
}

/* 卦象圖放大 50% (原 3.2rem -> 4.8rem) */
.hexagram-symbol {
  font-size: 4.8rem;
  line-height: 1;
  color: var(--color-green);
  text-shadow: 0 4px 16px rgba(45, 84, 56, 0.22);
  font-family: "Apple Symbols", "Segoe UI Symbol", sans-serif;
  transition: transform 0.25s ease;
}

.hexagram-col:hover .hexagram-symbol {
  transform: scale(1.08);
}

/* 六爻結構圖 (Yao Lines Stack) */
.hexagram-lines-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 52px;
  padding: 6px 5px;
  background: rgba(45, 84, 56, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(45, 84, 56, 0.12);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
}

.yao-line {
  display: flex;
  height: 5px;
  width: 100%;
  border-radius: 3px;
}

.yao-line.yang .bar {
  width: 100%;
  height: 100%;
  background: var(--color-green);
  border-radius: 3px;
  transition: all 0.25s ease;
}

.yao-line.yin {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

.yao-line.yin .bar {
  flex: 1;
  height: 100%;
  background: var(--color-green);
  border-radius: 3px;
  transition: all 0.25s ease;
}

.yao-line.yin .gap {
  width: 6px;
  height: 100%;
}

/* 紅色動爻變位高亮 (Red Changing Line Highlight) */
.yao-line.is-changing .bar {
  background: #d93829 !important;
  box-shadow: 0 0 10px rgba(217, 56, 41, 0.8), 0 0 2px #d93829;
  animation: redYaoBreathing 1.8s infinite ease-in-out;
}

@keyframes redYaoBreathing {
  0%, 100% {
    opacity: 0.85;
    transform: scaleY(1);
    box-shadow: 0 0 8px rgba(217, 56, 41, 0.6);
  }
  50% {
    opacity: 1;
    transform: scaleY(1.4);
    box-shadow: 0 0 16px rgba(217, 56, 41, 0.95), 0 0 4px #ff4d4f;
  }
}

.hexagram-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-coffee-dark);
  letter-spacing: 0.5px;
}

.hexagram-trigram {
  font-size: 0.84rem;
  color: var(--text-muted);
  font-weight: 500;
}

.hexagram-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.changing-line-badge {
  background: linear-gradient(135deg, #c2832c 0%, #a46d20 100%);
  color: #ffffff;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(194, 131, 44, 0.35);
  animation: changingLinePulse 2.4s infinite ease-in-out;
}

@keyframes changingLinePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(194, 131, 44, 0.35);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 4px 14px rgba(194, 131, 44, 0.55);
  }
}

.arrow-symbol {
  font-size: 1.5rem;
  color: var(--color-green);
  font-weight: 700;
}

.hexagram-summary {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(194, 131, 44, 0.16);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 0.92rem;
  color: var(--color-coffee);
  line-height: 1.65;
}

/* ==========================================================================
   底部輸入區 (支援圖片上傳與預覽托盤)
   ========================================================================== */
.chat-input-area {
  padding: 12px 36px 84px;
  max-width: var(--container-max-width);
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

/* 沒有輸入與閱讀文章時呈現溫和半透明，慢慢變淡 */
.input-box-wrapper {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: none !important;
  outline: none !important;
  border-radius: var(--radius-lg);
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0.42; /* 閱讀模式半透明 */
  box-shadow: 0 4px 20px rgba(60, 45, 30, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02);
  transform: translateY(3px);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 滑鼠移上去 (Hover) 或點擊輸入 (Focus) 或有文字時慢慢變清晰 */
.chat-input-area:hover .input-box-wrapper,
.input-box-wrapper:hover,
.input-box-wrapper:focus-within,
.input-box-wrapper.has-content {
  opacity: 1;
  background: #ffffff;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  transform: translateY(0);
  box-shadow: 0 12px 42px rgba(45, 84, 56, 0.12), 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* 點擊聚焦 (Focus) 時觸發擴散型草本呼吸微光 (Breathing Glow) */
.input-box-wrapper:focus-within {
  border: none !important;
  outline: none !important;
  background: #ffffff;
  animation: inputBreathingGlow 3.6s infinite ease-in-out;
}

@keyframes inputBreathingGlow {
  0%, 100% {
    box-shadow: 0 10px 38px rgba(45, 84, 56, 0.12), 0 0 20px rgba(194, 131, 44, 0.08);
  }
  50% {
    box-shadow: 0 14px 48px rgba(45, 84, 56, 0.18), 0 0 32px rgba(194, 131, 44, 0.18);
  }
}

.input-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  width: 100%;
}

/* 附件按鈕 (Apple Minimalist Clip Icon) */
.btn-attach {
  background: transparent;
  border: none;
  color: var(--color-coffee-muted);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s var(--spring-easing);
  flex-shrink: 0;
}

.btn-attach:hover {
  background: rgba(45, 84, 56, 0.08);
  color: var(--color-green);
  transform: translateY(-1px);
}

.btn-attach:active {
  transform: scale(0.92);
}

/* 圖片預覽托盤 */
.image-preview-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 6px 4px 4px;
  border-bottom: 1px solid rgba(66, 53, 43, 0.06);
}

.image-preview-item {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}

.image-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-preview-item .btn-remove-img {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(36, 28, 22, 0.7);
  color: #ffffff;
  border: none;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.image-preview-item .btn-remove-img:hover {
  background: var(--color-danger);
  transform: scale(1.1);
}

.chat-textarea {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.98rem;
  resize: none;
  max-height: 140px;
  min-height: 26px;
  outline: none;
  line-height: 1.6;
  padding: 5px 0;
}

.chat-textarea::placeholder {
  color: var(--text-muted);
}

.btn-send {
  background: linear-gradient(135deg, #9f8469 0%, #826950 100%);
  color: #ffffff;
  border: none;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s var(--spring-easing);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(130, 105, 80, 0.22);
}

.btn-send:hover {
  background: linear-gradient(135deg, #90765d 0%, #755e47 100%);
  transform: scale(1.05);
}

.btn-send:active {
  transform: scale(0.94);
  transition: transform 80ms ease-out;
}

.btn-send:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

/* ==========================================================================
   彈出視窗
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(36, 28, 22, 0.42);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  padding: 16px;
}

.modal-backdrop.show,
.modal-backdrop.active,
.modal-backdrop[style*="display: flex"] {
  opacity: 1;
  pointer-events: auto;
}

.modal-card {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(32px) saturate(190%);
  -webkit-backdrop-filter: blur(32px) saturate(190%);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 480px;
  padding: 26px;
  box-shadow: var(--shadow-modal);
  display: flex;
  flex-direction: column;
  gap: 18px;
  transform: scale(0.96) translateY(8px);
  transition: transform 0.3s var(--spring-easing);
}

.modal-backdrop.show .modal-card,
.modal-backdrop.active .modal-card,
.modal-backdrop[style*="display: flex"] .modal-card {
  transform: scale(1) translateY(0);
}

.modal-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-coffee-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* 極簡圓圈關閉按鈕 (適用於所有彈窗右上角) */
.btn-modal-close-circle,
.btn-close-modal {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  background: rgba(66, 53, 43, 0.05);
  border: 1px solid rgba(66, 53, 43, 0.12);
  color: var(--color-coffee, #5c4a3e);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.22s var(--spring-easing, cubic-bezier(0.34, 1.56, 0.64, 1));
  padding: 0;
  flex-shrink: 0;
  line-height: 1;
}

.btn-modal-close-circle:hover,
.btn-close-modal:hover {
  background: rgba(66, 53, 43, 0.12);
  color: var(--color-coffee-dark, #241c16);
  border-color: rgba(66, 53, 43, 0.25);
  transform: rotate(90deg) scale(1.06);
}

.btn-modal-close-circle:active,
.btn-close-modal:active {
  transform: rotate(90deg) scale(0.92);
}

.modal-title .icon {
  color: var(--color-green);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-coffee);
}

.form-input {
  background: var(--bg-app);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg); /* 統一 22px 圓角 */
  padding: 12px 16px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.96rem;
  outline: none;
  transition: all 0.18s ease;
}

.form-input:focus {
  border-color: var(--color-green);
  background: #ffffff;
  box-shadow: 0 0 0 3px var(--color-green-subtle);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}

.btn-modal,
.btn-confirm {
  padding: 11px 22px;
  border-radius: var(--radius-lg); /* 統一 22px 圓角 */
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.18s var(--spring-easing);
  text-decoration: none;
}

.btn-modal.primary,
.btn-confirm.primary {
  background: linear-gradient(135deg, #9f8469 0%, #826950 100%);
  color: #ffffff !important;
  border: none;
  box-shadow: 0 3px 12px rgba(130, 105, 80, 0.24);
}

.btn-modal.primary:hover,
.btn-confirm.primary:hover {
  background: linear-gradient(135deg, #90765d 0%, #755e47 100%);
  box-shadow: 0 5px 16px rgba(130, 105, 80, 0.32);
  transform: translateY(-1px);
}

.btn-modal.secondary,
.btn-confirm.secondary {
  background: #ffffff;
  color: var(--color-coffee, #3d3027);
  border: 1px solid var(--border-medium, rgba(66, 53, 43, 0.18));
  box-shadow: 0 1px 4px rgba(66, 53, 43, 0.05);
}

.btn-modal.secondary:hover,
.btn-confirm.secondary:hover {
  background: rgba(66, 53, 43, 0.04);
  border-color: rgba(66, 53, 43, 0.3);
  color: var(--color-coffee-dark, #241c16);
  transform: translateY(-1px);
}

.btn-modal:active,
.btn-confirm:active {
  transform: scale(0.96);
  transition: transform 80ms ease-out;
}

/* ==========================================================================
   響應式設計 (針對 iPad 與手機專屬優化)
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --container-max-width: 95%;
  }

  #messages-container {
    padding: 24px 28px;
    gap: 24px;
  }

  .msg-bubble {
    padding: 30px; /* iPad 版：上下左右完全相同 (均為 30px) */
    font-size: 1rem;
  }

  .msg-bubble hr {
    margin: 30px 0;
  }

  .chat-input-area {
    padding: 10px 28px 64px;
  }

  .msg-wrapper.ai .msg-content-box {
    max-width: 100%;
  }
}

/* ==========================================================================
   iPad 直式排版專屬 (<= 1024px 直式) 與 窄螢幕收納：
   將右上角 10 個展開工具按鈕改為手機版單一收納抽屜按鈕，徹底解決與左側標題文字重疊問題
   ========================================================================== */
@media (max-width: 1024px) and (orientation: portrait), (min-width: 769px) and (max-width: 960px) {
  /* 隱藏原本橫向展開的 10 個工具按鈕，避免在 iPad 直式時與左側標題重疊 */
  .header-actions {
    display: none !important;
  }

  .chat-header .header-actions {
    display: none !important;
  }

  /* 顯示右上角單一收納抽屜按鈕 */
  .mobile-header-actions {
    display: flex !important;
    align-items: center !important;
  }

  .btn-mobile-drawer-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: var(--radius-pill) !important;
    background: #ffffff !important;
    border: 1px solid var(--border-medium) !important;
    color: var(--color-coffee-dark) !important;
    box-shadow: var(--shadow-sm) !important;
    cursor: pointer !important;
    transition: all 0.2s var(--spring-easing) !important;
  }

  .btn-mobile-drawer-toggle:active {
    transform: scale(0.94) !important;
  }

  /* 手機版工具收納抽屜在 iPad 直式正常啟用 */
  .mobile-drawer-backdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(20, 16, 12, 0.48) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 180 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.28s ease !important;
  }

  .mobile-drawer-backdrop.open {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .mobile-tools-drawer {
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 auto !important;
    max-width: 720px !important;
    background: #fdfbf7 !important;
    border-top-left-radius: 28px !important;
    border-top-right-radius: 28px !important;
    box-shadow: 0 -10px 40px rgba(36, 28, 22, 0.18) !important;
    z-index: 190 !important;
    transform: translateY(105%) !important;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    padding: 24px 32px calc(28px + env(safe-area-inset-bottom, 16px)) !important;
    box-sizing: border-box !important;
  }

  .mobile-tools-drawer.open {
    transform: translateY(0) !important;
  }

  .mobile-drawer-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    margin-bottom: 16px !important;
  }

  .mobile-drawer-title {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .mobile-drawer-brand-logo {
    height: 36px !important;
    width: auto !important;
    max-width: 130px !important;
    object-fit: contain !important;
    display: block !important;
  }

  .mobile-drawer-title .sub-label {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: var(--color-coffee) !important;
    letter-spacing: 0.02em !important;
  }

  .btn-drawer-close {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
    color: var(--color-coffee-muted) !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: var(--radius-sm) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
  }

  /* 頂部重點操作：新增話題 (修復 iPad Safari 漸層變數缺失導致文字消失問題，並放大 25%) */
  .btn-drawer-new-chat {
    width: 100% !important;
    padding: 15px 20px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #9b6938 0%, #5a3823 100%) !important;
    color: #ffffff !important;
    border: none !important;
    font-size: 1.18rem !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    box-shadow: 0 4px 16px rgba(90, 56, 35, 0.28) !important;
    margin-bottom: 24px !important;
    cursor: pointer !important;
  }

  .btn-drawer-new-chat svg {
    width: 22px !important;
    height: 22px !important;
    stroke: #ffffff !important;
    stroke-width: 2.2 !important;
  }

  .btn-drawer-new-chat span {
    color: #ffffff !important;
    font-weight: 700 !important;
  }

  .btn-drawer-new-chat:active {
    transform: scale(0.98) !important;
  }

  /* 移除「五術中醫專區」文字 */
  .mobile-drawer-section-title {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* iPad 工具網格與工具按鈕放大 25% */
  .mobile-drawer-tools-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 22px 14px !important;
    margin-bottom: 26px !important;
  }

  .mobile-tool-item {
    background: transparent !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    padding: 6px 0 !important;
  }

  /* 工具按鈕圓角方框放大 25% (原 56px -> 70px) */
  .tool-icon-circle {
    width: 70px !important;
    height: 70px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    border: 1px solid var(--border-light) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--color-coffee-dark) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: transform 0.2s ease, background 0.2s ease !important;
  }

  .mobile-tool-item:active .tool-icon-circle {
    transform: scale(0.93) !important;
    background: #f3eee6 !important;
  }

  /* 工具按鈕內的 SVG 圖示 (放大 25%：原 24px -> 30px) */
  .tool-icon-circle svg {
    width: 30px !important;
    height: 30px !important;
  }

  /* 工具按鈕內的單字漢字徽章 (放大 25%：原 24px -> 30px) */
  .tool-icon-circle .btn-icon-char {
    font-family: "Songti TC", "Noto Serif TC", "Source Han Serif TC", serif !important;
    font-size: 30px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    color: var(--color-coffee-dark, #241c16) !important;
  }

  /* 工具按鈕內的手寫疏文直式兩字 (放大 25%：原 14.8px -> 18.5px) */
  .tool-icon-circle .drawer-char-vert {
    font-size: 18.5px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
  }

  .tool-icon-circle .drawer-char-vert span {
    height: 18.5px !important;
    line-height: 18.5px !important;
  }

  /* 工具項目文字放大 25% (原 0.82rem -> 1.025rem，約 16.4px) */
  .tool-item-name {
    font-size: 1.025rem !important;
    font-weight: 600 !important;
    color: var(--color-coffee) !important;
    text-align: center !important;
    margin-top: 2px !important;
  }

  .mobile-drawer-footer {
    border-top: 1px solid var(--border-subtle) !important;
    padding-top: 18px !important;
  }

  /* 底部歷史紀錄按鈕放大 25% */
  .btn-drawer-history {
    width: 100% !important;
    padding: 15px 20px !important;
    border-radius: 15px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid var(--border-light) !important;
    color: var(--color-coffee-dark) !important;
    font-size: 1.12rem !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    cursor: pointer !important;
  }

  .btn-drawer-history svg {
    width: 22px !important;
    height: 22px !important;
  }

  /* 確保頂部標題列與按鈕乾淨分離，絕對不重疊 */
  .chat-header {
    padding: 16px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .chat-header .header-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
  }

  .chat-header .current-title {
    display: block !important;
    font-size: 1.05rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .chat-header-inner {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 8px !important;
  }

  .zeji-header-left,
  .sw-header-left,
  .articles-header-left,
  .hex-header-left,
  .zw-header-left,
  .bz-header-left,
  .qm-header-left,
  .fs-header-left,
  .yl-header-left,
  .shuli-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
  }

  /* 在 iPad 直式保留完整標題與返回按鈕，清晰可讀 */
  .btn-back-to-chat {
    display: inline-flex !important;
  }

  .zeji-brand-title,
  .sw-brand-title,
  .articles-brand-title,
  .hex-brand-title,
  .zw-brand-title,
  .bz-brand-title,
  .qm-brand-title,
  .fs-brand-title,
  .yl-brand-title,
  .shuli-brand-title {
    display: block !important;
  }

  .mobile-brand-title {
    display: none !important;
  }
}

/* 手機版側邊欄暗色遮罩 */
.sidebar-overlay-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 110;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

#app-container.sidebar-open-mobile .sidebar-overlay-backdrop {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

/* 桌面與 iPad 預設隱藏手機版專屬抽屜與標籤 */
.mobile-brand-title {
  display: none;
}

.mobile-header-actions {
  display: none;
}

.mobile-drawer-backdrop {
  display: none;
}

.mobile-tools-drawer {
  display: none;
}

.settings-mobile-header {
  display: none;
}

@media (max-width: 768px) {
  #sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    transform: translateX(-100%);
    width: 280px !important;
    opacity: 1 !important;
    z-index: 120 !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  }

  #app-container.sidebar-open-mobile #sidebar {
    transform: translateX(0);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    pointer-events: auto;
  }

  /* 頂部 Header：所有頁面與工具在手機版全部統一（左邊「師解惑」，右邊工具收納按鈕） */
  .chat-header,
  .articles-header,
  .hexagram-header,
  .ziwei-header,
  .bazi-header,
  .qimen-header,
  .fengshui-header,
  .yuelao-header,
  .shuwen-header,
  .settings-mobile-header {
    padding: 8px 16px !important;
    min-height: 54px !important;
    height: 54px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: rgba(253, 251, 247, 0.98) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .articles-header-inner,
  .hexagram-header-inner,
  .ziwei-header-inner,
  .bazi-header-inner,
  .qimen-header-inner,
  .fengshui-header-inner,
  .yuelao-header-inner,
  .shuwen-header-inner {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .chat-header .header-left,
  .articles-header-left,
  .hex-header-left,
  .zw-header-left,
  .bz-header-left,
  .qm-header-left,
  .fs-header-left,
  .yl-header-left,
  .sw-header-left,
  .settings-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
  }

  /* 系統設定頁面在手機版頂部統一與全螢幕體驗 */
  #settings-modal {
    padding: 0 !important;
    background: var(--bg-paper, #fdfbf7) !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    z-index: 150 !important;
  }

  #settings-modal .modal-card-settings {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .settings-modal-body {
    padding: 20px 16px calc(30px + env(safe-area-inset-bottom, 16px)) !important;
    overflow-y: auto !important;
    flex: 1 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 隱藏手機版各頁面內落落長的次標題、側欄按鈕與返回鈕 */
  .btn-sidebar-toggle,
  .btn-back-to-chat,
  #chat-title,
  .articles-brand-title,
  .hex-brand-title,
  .zw-brand-title,
  .bz-brand-title,
  .qm-brand-title,
  .fs-brand-title,
  .yl-brand-title,
  .sw-brand-title,
  .zeji-brand-title,
  .shuli-brand-title {
    display: none !important;
  }

  /* 統一左側品牌 LOGO 與工具名稱 */
  .mobile-brand-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    user-select: none !important;
    min-width: 0 !important;
  }

  .mobile-header-brand-logo {
    height: 32px;
    width: auto;
    max-width: 100px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
  }

  .mobile-tool-title-text {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--color-coffee-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 隱藏原本橫向分散的工具列按鈕 */
  .header-actions {
    display: none !important;
  }

  /* 統一呈現右上角單一收納欄位按鈕 */
  .mobile-header-actions {
    display: flex !important;
    align-items: center !important;
  }

  .btn-mobile-drawer-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: var(--radius-pill) !important;
    background: #ffffff !important;
    border: 1px solid var(--border-medium) !important;
    color: var(--color-coffee-dark) !important;
    box-shadow: var(--shadow-sm) !important;
    cursor: pointer !important;
    transition: all 0.2s var(--spring-easing) !important;
  }

  .btn-mobile-drawer-toggle:active {
    transform: scale(0.94) !important;
  }

  /* 手機專屬抽屜面板 (Mobile Tools Drawer Sheet) */
  .mobile-drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(20, 16, 12, 0.48);
    backdrop-filter: blur(4px);
    z-index: 180;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
  }

  .mobile-drawer-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-tools-drawer {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fdfbf7;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    box-shadow: 0 -10px 40px rgba(36, 28, 22, 0.18);
    z-index: 190;
    transform: translateY(105%);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 85vh;
    overflow-y: auto;
    padding: 20px 20px calc(24px + env(safe-area-inset-bottom, 16px));
    box-sizing: border-box;
  }

  .mobile-tools-drawer.open {
    transform: translateY(0);
  }

  .mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 16px;
  }

  .mobile-drawer-title {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .mobile-drawer-brand-logo {
    height: 36px;
    width: auto;
    max-width: 130px;
    object-fit: contain;
    display: block;
  }

  .mobile-drawer-title .sub-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
  }

  .btn-drawer-close {
    background: rgba(66, 53, 43, 0.06);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-coffee-dark);
    cursor: pointer;
  }

  .btn-drawer-new-chat {
    width: 100%;
    padding: 13px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #9f8469 0%, #826950 100%);
    color: #ffffff;
    border: none;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(130, 105, 80, 0.28);
    margin-bottom: 20px;
    cursor: pointer;
  }

  .btn-drawer-new-chat:active {
    transform: scale(0.98);
  }

  .mobile-drawer-section-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-coffee-muted);
    letter-spacing: 0.05em;
    margin-bottom: 12px;
  }

  .mobile-drawer-tools-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px 8px;
    margin-bottom: 20px;
  }

  .mobile-tool-item {
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 4px 0;
  }

  .tool-icon-circle {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-coffee-dark);
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, background 0.2s ease;
  }

  .mobile-tool-item:active .tool-icon-circle {
    transform: scale(0.92);
    background: #f3eee6;
  }

  .tool-icon-circle svg {
    width: 22px;
    height: 22px;
  }

  .tool-item-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-coffee);
    text-align: center;
  }

  .mobile-drawer-footer {
    border-top: 1px solid var(--border-subtle);
    padding-top: 14px;
  }

  .btn-drawer-history {
    width: 100%;
    padding: 11px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--border-light);
    color: var(--color-coffee-dark);
    font-size: 0.88rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
  }

  /* 對話區域與訊息氣泡排版 */
  #messages-container {
    padding: 16px 14px;
    gap: 16px;
  }

  .msg-bubble {
    padding: 20px;
    font-size: 0.96rem;
    line-height: 1.76;
  }

  .msg-bubble hr {
    margin: 24px 0;
  }

  .msg-wrapper.user .msg-content-box {
    max-width: 88%;
  }

  .msg-wrapper.ai .msg-content-box {
    max-width: 100%;
  }

  /* 中間對話窗：呈現精緻 LOGO 與微縮副標，下方呈現四格快捷功能 */
  .welcome-hero {
    padding: 8px 4px 14px;
    margin: auto 0;
    width: 100%;
    gap: 6px;
  }

  .welcome-hero .hero-tag,
  .welcome-hero .hero-title {
    display: none !important;
  }

  .welcome-hero .welcome-hero-logo {
    height: 124px !important;
    width: 124px !important;
    margin: 0 auto 4px !important;
    display: block !important;
  }

  .welcome-hero .hero-logo-glow {
    width: 146px !important;
    height: 146px !important;
  }

  .welcome-hero .hero-subtitle {
    display: block !important;
    font-size: 0.62rem !important;
    line-height: 1.45 !important;
    max-width: 92% !important;
    margin: 0 auto 8px !important;
    opacity: 0.78 !important;
  }

  .welcome-hero .quick-action-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
  }

  .welcome-hero .quick-card {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(14px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
    border-radius: 16px !important;
    padding: 16px 10px !important;
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 72px !important;
    box-shadow: 0 3px 14px rgba(60, 45, 30, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
  }

  .welcome-hero .quick-card::before {
    display: none !important;
  }

  .welcome-hero .quick-card-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 0.94rem !important;
    font-weight: 700 !important;
    color: var(--color-coffee-dark) !important;
    text-align: center !important;
  }

  .welcome-hero .quick-card-header .icon {
    width: 22px !important;
    height: 22px !important;
    color: #826950 !important;
  }

  .welcome-hero .quick-card-desc {
    display: none !important;
  }

  /* 首頁底部乾淨俐落的輸入欄位 */
  .chat-input-area {
    padding: 8px 14px calc(24px + env(safe-area-inset-bottom, 12px)) !important;
  }
}

/* ==========================================================================
   子平八字排盤專屬高質感樣式
   ========================================================================== */
.modal-card-bazi {
  max-width: 860px;
  width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
}

.bazi-result-area {
  margin-top: 16px;
  animation: fadeIn 0.3s ease;
}

.bazi-pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 16px 0;
}

@media (max-width: 640px) {
  .bazi-pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.bazi-pillar-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 10px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bazi-pillar-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.bazi-pillar-card.day-pillar {
  border: 1.5px solid var(--color-green);
  background: rgba(45, 84, 56, 0.04);
}

.pillar-name-badge {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-coffee);
  padding: 2px 8px;
  background: rgba(66, 53, 43, 0.06);
  border-radius: var(--radius-pill);
  display: inline-block;
  align-self: center;
}

.pillar-shishen-top {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-coffee-dark);
}

.day-pillar .pillar-shishen-top {
  color: var(--color-green);
  font-weight: 800;
}

.pillar-main-chars {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0;
}

.pillar-char {
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 1px;
}

.pillar-char.el-wood { color: #16a34a; }
.pillar-char.el-fire { color: #ea580c; }
.pillar-char.el-earth { color: #ca8a04; }
.pillar-char.el-metal { color: #64748b; }
.pillar-char.el-water { color: #0284c7; }

.pillar-hidden-stems {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(66, 53, 43, 0.04);
  padding: 6px 4px;
  border-radius: var(--radius-sm);
}

.hidden-stem-tag {
  font-size: 0.76rem;
  color: var(--color-coffee);
  display: flex;
  justify-content: center;
  gap: 4px;
}

.hidden-stem-tag span.ss {
  font-weight: 600;
  opacity: 0.85;
}

.pillar-nayin {
  font-size: 0.74rem;
  color: var(--text-muted);
  border-top: 1px dashed var(--border-subtle);
  padding-top: 6px;
  margin-top: 2px;
}

.bazi-section-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-coffee-dark);
  margin-bottom: 10px;
}

.bazi-elements-section {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 16px;
}

.bazi-elements-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.element-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  font-weight: 600;
}

.element-bar-label {
  width: 50px;
  color: var(--color-coffee-dark);
}

.element-bar-track {
  flex: 1;
  height: 10px;
  background: rgba(66, 53, 43, 0.08);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.element-bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.element-bar-fill.el-wood { background: linear-gradient(90deg, #22c55e, #16a34a); }
.element-bar-fill.el-fire { background: linear-gradient(90deg, #f97316, #ea580c); }
.element-bar-fill.el-earth { background: linear-gradient(90deg, #eab308, #ca8a04); }
.element-bar-fill.el-metal { background: linear-gradient(90deg, #94a3b8, #64748b); }
.element-bar-fill.el-water { background: linear-gradient(90deg, #38bdf8, #0284c7); }

.element-bar-val {
  width: 42px;
  text-align: right;
  color: var(--color-coffee);
}

.bazi-luck-section {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 18px;
}

.bazi-luck-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.bazi-luck-card {
  flex: 0 0 auto;
  width: 86px;
  background: rgba(66, 53, 43, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bazi-luck-age {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-green);
}

.bazi-luck-ss {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--color-coffee);
}

.bazi-luck-chars {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-coffee-dark);
}

.bazi-luck-year {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.bazi-liuyue-query-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.bazi-liuyue-query-row .form-input {
  max-width: 180px;
}

.bazi-liuyue-months-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 8px;
}

.bazi-liuyue-history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 4px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.82rem;
}

.bazi-liuyue-history-item:last-child { border-bottom: none; }

/* ==========================================================================
   五術中醫知識庫與經典正典專區 (Articles View & Reader)
   ========================================================================== */

.btn-articles-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  margin-top: 8px;
  background: rgba(194, 131, 44, 0.08);
  border: 1px solid rgba(194, 131, 44, 0.22);
  border-radius: var(--radius-sm);
  color: var(--color-coffee-dark);
  font-size: 0.92rem;
  font-weight: 650;
  cursor: pointer;
  transition: all 0.2s var(--spring-easing);
}

.btn-articles-nav:hover {
  background: rgba(194, 131, 44, 0.16);
  border-color: var(--color-amber-gold);
  transform: translateY(-1px);
}

.btn-articles-nav svg {
  color: var(--color-amber-gold);
  width: 18px;
  height: 18px;
}

/* 主專區容器 */
.articles-view-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--bg-app);
  background-image: var(--bg-gradient);
  overflow: hidden;
  position: relative;
  z-index: 10;
}

/* iPad & 電腦版：左右兩側卡一半的 LOGO 浮水印 (20% 淡化 / 80% 透明度) */
.articles-view-section::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 416px;
  height: 416px;
  background-image: url('/logo_1.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  transform: translate(-50%, -50%);
  opacity: 0.12;
  pointer-events: none;
  z-index: 1;
}

.articles-view-section::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 416px;
  height: 416px;
  background-image: url('/logo_1.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  transform: translate(50%, -50%);
  opacity: 0.12;
  pointer-events: none;
  z-index: 1;
}

/* 頂部導航列 (與下方 1180px 內容精準齊頭) */
.articles-header {
  /* 版面尺寸與底色統一寫在 .chat-header 共用規則區塊，此處僅保留
     本頁特有的排版屬性，避免兩處各自維護造成再次跳動不一致。 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 20;
  width: 100%;
}

.articles-header-inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.articles-header-left {
  display: flex;
  align-items: center;
  gap: 18px;
}

.btn-back-to-chat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  color: var(--color-coffee-dark);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
}

.btn-back-to-chat:hover {
  background: rgba(66, 53, 43, 0.05);
  transform: translateX(-2px);
}

.articles-brand-title h2 {
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--color-coffee-dark);
  letter-spacing: 0.2px;
}

.articles-brand-title p {
  font-size: 0.78rem;
  color: var(--color-coffee-light);
  margin-top: 2px;
}

.btn-articles-ask-ai {
  padding: 8px 16px;
  background: linear-gradient(135deg, #9f8469 0%, #826950 100%);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-pill);
  font-size: 0.86rem;
  font-weight: 650;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(130, 105, 80, 0.22);
  transition: all 0.2s ease;
}

.btn-articles-ask-ai:hover {
  background: linear-gradient(135deg, #90765d 0%, #755e47 100%);
  transform: translateY(-1px);
}

.mobile-category-picker-wrap {
  display: none;
}

/* 文章滾動容器 */
.articles-scroll-container {
  flex: 1;
  overflow-y: auto;
  padding: 28px 32px 60px;
  position: relative;
  z-index: 2;
}

.articles-inner-wrap {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* 頂部頻道與搜尋整合列 (Unified Tabs & Search Bar) */
.articles-top-action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  width: 100%;
  margin-bottom: 24px; /* 充足的呼吸空間 */
}

/* 主頻道 Tabs (混合探索 / 生活專欄 / 經典正典) */
.articles-main-tabs {
  display: flex;
  gap: 6px;
  background: rgba(66, 53, 43, 0.05);
  padding: 5px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.article-tab-btn {
  padding: 8px 18px;
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  color: var(--color-coffee);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.2s ease;
}

.article-tab-btn.active {
  background: #ffffff;
  color: #826950;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(60, 45, 30, 0.08);
}

/* 整合搜尋列 (位於右側空間) */
.articles-search-box {
  position: relative;
  width: 100%;
  max-width: 380px;
}

.articles-search-box .search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  stroke: #8C7D73;
  stroke-width: 2;
  fill: none;
  pointer-events: none;
}

.articles-search-box input {
  width: 100%;
  padding: 10px 18px 10px 42px;
  background: #ffffff;
  border: 1px solid rgba(80, 60, 45, 0.12);
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  color: var(--color-coffee-dark);
  font-weight: 350;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(60, 45, 30, 0.03);
  outline: none;
  transition: all 0.2s ease;
}

.articles-search-box input:focus {
  border-color: #826950;
  box-shadow: 0 4px 14px rgba(130, 105, 80, 0.16);
}

/* 細分類標籤列 (Pills - 帶充足上下呼吸空間) */
.articles-category-pills {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 32px; /* 與下方內容保持充足呼吸空間 */
  scrollbar-width: none;
}

.articles-category-pills::-webkit-scrollbar {
  display: none;
}

.article-pill-btn {
  padding: 7px 16px;
  background: #ffffff;
  border: 1px solid rgba(80, 60, 45, 0.08);
  border-radius: var(--radius-pill);
  color: #7A6C62;
  font-size: 0.82rem;
  font-weight: 350;
  letter-spacing: 0.03em;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(60, 45, 30, 0.02);
}

.article-pill-btn:hover {
  border-color: #826950;
  color: #826950;
}

.article-pill-btn.active {
  background: linear-gradient(135deg, #9f8469 0%, #826950 100%);
  color: #ffffff;
  border-color: #826950;
  box-shadow: 0 3px 8px rgba(130, 105, 80, 0.22);
}

/* 狀態列 */
.articles-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.articles-count-label {
  font-size: 0.84rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: #8C7D73;
}

/* 首頁雙欄佈局 (Main List + Dynamic Quick Sidebar) */
.articles-home-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 36px;
  align-items: start;
  width: 100%;
}

.articles-home-main {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* 焦點滿版大圖輪播海報卡片 (Hero Carousel Full-bleed Poster) */
.hero-fullbleed-card,
.hero-carousel-wrapper {
  position: relative;
  width: 100%;
  border: 1px solid rgba(80, 60, 45, 0.08);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 14px 44px rgba(40, 30, 20, 0.08);
  margin-bottom: 52px;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  background: #14100c;
  user-select: none;
}

.hero-fullbleed-card:hover,
.hero-carousel-wrapper:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 54px rgba(40, 30, 20, 0.12);
}

.hero-carousel-track {
  position: relative;
  width: 100%;
  min-height: 480px;
}

.hero-slide-item {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  transform: scale(1.02);
  z-index: 1;
}

.hero-slide-item.active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
  z-index: 2;
}

/* 輪播左右箭頭切換按鈕 (Hover 優雅浮現) */
.hero-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 15;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(20, 16, 14, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: all 0.28s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.hero-carousel-wrapper:hover .hero-carousel-arrow {
  opacity: 1;
}

.hero-carousel-prev {
  left: 20px;
}

.hero-carousel-next {
  right: 20px;
}

.hero-carousel-arrow:hover {
  background: rgba(194, 131, 44, 0.85);
  border-color: rgba(255, 255, 255, 0.7);
  transform: translateY(-50%) scale(1.08);
}

.hero-carousel-arrow:active {
  transform: translateY(-50%) scale(0.95);
}

.hero-carousel-arrow svg {
  width: 20px;
  height: 20px;
}

/* 輪播指示點與膠囊條 (Indicators) */
.hero-carousel-indicators {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(15, 12, 10, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.hero-indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.hero-indicator-dot:hover {
  background: rgba(255, 255, 255, 0.8);
}

.hero-indicator-dot.active {
  width: 26px;
  border-radius: var(--radius-pill);
  background: var(--color-gold, #C2832C);
  box-shadow: 0 0 10px rgba(194, 131, 44, 0.7);
}

.hero-fullbleed-poster {
  position: relative;
  width: 100%;
  min-height: 480px;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px 40px 38px;
  cursor: pointer;
  overflow: hidden;
}

/* 深邃優雅的底部漸層遮罩，確保文字極致清晰反白與豐富層次 */
.hero-poster-gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg, 
    rgba(15, 12, 10, 0.2) 0%, 
    rgba(15, 12, 10, 0.28) 25%, 
    rgba(12, 10, 8, 0.82) 68%, 
    rgba(8, 6, 5, 0.96) 100%
  );
  transition: background 0.3s ease;
  pointer-events: none;
}

.hero-poster-top {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.hero-badge {
  padding: 6px 16px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #2D5438;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
}

.hero-poster-time {
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* 左下角反白重點文字排版 */
.hero-poster-bottom {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  width: 100%;
}

.hero-poster-text-block {
  flex: 1;
  max-width: 760px;
}

.hero-poster-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 10px;
}

.hero-poster-divider {
  color: rgba(255, 255, 255, 0.4);
}

.hero-poster-title {
  font-size: 2.3rem;
  font-weight: 850;
  color: #ffffff;
  line-height: 1.2;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}

.hero-poster-subtitle {
  font-size: 1.06rem;
  color: #F1ECE6;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.5;
  margin-bottom: 12px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.hero-poster-summary {
  font-size: 0.94rem;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.78;
  font-weight: 350;
  margin-bottom: 20px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.hero-poster-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.hero-tag-chip {
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 5px 12px;
  border-radius: 6px;
}

.hero-poster-action {
  flex-shrink: 0;
}

.btn-read-hero-poster {
  padding: 13px 30px;
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--radius-pill);
  font-size: 0.94rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}

.btn-read-hero-poster:hover {
  background: #ffffff;
  color: #1e3b27;
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4);
}

/* 首頁右側動態側邊欄 (靜雅書架目錄感) */
.articles-home-sidebar {
  position: sticky;
  top: 20px;
  width: 100%;
}

.home-sidebar-card {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(80, 60, 45, 0.08);
  border-radius: 20px;
  padding: 24px 20px;
  box-shadow: 0 6px 28px rgba(60, 45, 30, 0.04);
}

/* 卡片網格 (Articles Grid - 靜雅並列，安靜在旁不搶戲) */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 26px;
}

.article-card {
  background: #ffffff;
  border: 1px solid rgba(80, 60, 45, 0.07);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(60, 45, 30, 0.03);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.article-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(60, 45, 30, 0.07);
  border-color: rgba(45, 84, 56, 0.2);
}

.card-cover-wrap {
  position: relative;
  width: 100%;
  height: 190px;
  overflow: hidden;
  background: rgba(66, 53, 43, 0.03);
}

.card-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.article-card:hover .card-cover-img {
  transform: scale(1.03);
}

.card-type-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  backdrop-filter: blur(8px);
}

.card-type-badge.badge-dict {
  background: rgba(255, 255, 255, 0.94);
  color: #A06423;
  border: 1px solid rgba(160, 100, 35, 0.2);
}

.card-cover-bottom-overlay {
  display: none;
}

.card-type-badge.badge-article {
  background: rgba(255, 255, 255, 0.94);
  color: #2D5438;
  border: 1px solid rgba(45, 84, 56, 0.2);
}

.card-body {
  padding: 22px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #ffffff;
}

.card-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.76rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: #8C7D73;
  margin-bottom: 8px;
}

.card-title {
  font-size: 1.12rem;
  font-weight: 700;
  color: #241B15;
  line-height: 1.45;
  letter-spacing: 0.02em;
  margin-bottom: 5px;
}

.card-subtitle {
  font-size: 0.84rem;
  color: #7A6C62;
  margin-bottom: 10px;
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1.45;
}

.card-summary {
  font-size: 0.86rem;
  color: #5C4D43;
  line-height: 1.75;
  font-weight: 350;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 16px;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid rgba(80, 60, 45, 0.05);
}

.card-tags {
  display: flex;
  gap: 6px;
}

.card-tag {
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.03em;
  color: #7A6C62;
  background: rgba(66, 53, 43, 0.03);
  border: 1px solid rgba(66, 53, 43, 0.06);
  padding: 2px 7px;
  border-radius: 4px;
}

.card-read-more {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #2D5438;
}

/* 空狀態 */
.articles-empty-state {
  text-align: center;
  padding: 60px 20px;
  background: #ffffff;
  border: 1px dashed var(--border-medium);
  border-radius: var(--radius-md);
  grid-column: 1 / -1;
}

.articles-empty-state .empty-icon {
  font-size: 2.8rem;
  margin-bottom: 12px;
}

.articles-empty-state h3 {
  font-size: 1.1rem;
  color: var(--color-coffee-dark);
  margin-bottom: 6px;
}

.articles-empty-state p {
  font-size: 0.88rem;
  color: var(--color-coffee-muted);
}

/* ==========================================================================
   五術中醫專屬獨立內頁雙欄視圖 (Dedicated In-Page Dual-Column Reader View)
   ========================================================================== */
.articles-detail-page-wrap {
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  padding: 0 16px 80px;
}

.reader-top-nav-bar {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.btn-page-back-to-list {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-pill);
  color: var(--color-coffee);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
}

.btn-page-back-to-list:hover {
  background: #ffffff;
  color: var(--color-green);
  border-color: var(--color-green);
  transform: translateX(-3px);
}

.btn-page-back-to-list svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.4;
}

/* 雙欄格線排版 */
.article-reader-page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 32px;
  align-items: start;
}

/* 左側主文章卡片 */
.reader-main-column {
  width: 100%;
  min-width: 0;
}

.reader-main-card {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid var(--border-light);
  border-radius: 24px;
  padding: 42px 48px;
  box-shadow: 0 4px 28px rgba(60, 45, 30, 0.06);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 頂部作者 Meta */
.reader-card-meta-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-light);
}

.reader-author-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  color: var(--color-coffee);
  flex-wrap: wrap;
}

.reader-author-avatar,
.reader-author-avatar-img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 50%;
  object-fit: contain;
  vertical-align: middle;
}

.reader-author-name strong {
  color: var(--color-coffee-dark);
}

.reader-meta-dot {
  color: var(--color-coffee-muted);
}

.reader-date-label {
  color: var(--color-coffee-muted);
}

.reader-category-pill {
  font-size: 0.75rem;
  font-weight: 750;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

.reader-source-badge {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-amber-gold);
  background: var(--color-amber-subtle);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}

/* 封面主圖與壓字排版 (中間偏下居中、漸層黑遮罩) */
.reader-article-cover-wrap {
  position: relative;
  width: 100%;
  height: 460px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 32px rgba(60, 45, 30, 0.12);
  margin: 12px 0 20px;
  background: #1a1410;
}

.reader-article-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 黑色漸層遮罩：從底部與中下方向上漸變暗化，襯托文字清晰度 */
.reader-cover-gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.04) 0%,
    rgba(0, 0, 0, 0.20) 40%,
    rgba(0, 0, 0, 0.72) 70%,
    rgba(0, 0, 0, 0.92) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* 中間偏下居中文字層 */
.reader-cover-title-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 32px 36px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  z-index: 2;
  pointer-events: none;
}

.reader-article-title-overlay {
  font-size: 2.15rem;
  font-weight: 850;
  color: #ffffff;
  line-height: 1.3;
  letter-spacing: 0.02em;
  margin: 0 0 10px;
  text-align: center;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.85), 0 1px 4px rgba(0, 0, 0, 0.9);
  max-width: 92%;
}

.reader-article-subtitle-overlay {
  font-size: 1.05rem;
  font-weight: 400;
  color: #f3eee6;
  letter-spacing: 0.03em;
  line-height: 1.55;
  margin: 0;
  text-align: center;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85);
  max-width: 86%;
}

/* 備用獨立標題與副標題 (無封面圖時) */
.reader-article-header-text {
  margin: 6px 0 16px;
}

.reader-article-main-title {
  font-size: 1.85rem;
  font-weight: 850;
  color: var(--color-coffee-dark);
  line-height: 1.35;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.reader-article-main-subtitle {
  font-size: 0.98rem;
  font-weight: 400;
  color: #7c7267;
  line-height: 1.6;
  margin: 0;
}

/* 表格水平滑動容器 (防手機爆版) */
.table-responsive-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 18px 0;
  border-radius: 12px;
  border: 1px solid rgba(194, 131, 44, 0.2);
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.table-responsive-wrapper table {
  margin: 0 !important;
  border: none !important;
  min-width: 480px;
}

/* 互動工具列 */
.reader-action-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 0 16px;
  border-bottom: 1px solid var(--border-light);
  justify-content: space-between;
  align-items: center;
}

.reader-font-switcher, .reader-share-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.toolbar-label {
  font-size: 0.8rem;
  color: #8c7d73;
  font-weight: 500;
  margin-right: 2px;
}

.btn-font-size {
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(80, 60, 45, 0.18);
  background: #ffffff;
  color: #5c4d43;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-font-size:hover {
  border-color: #2d5438;
  color: #2d5438;
}

.btn-font-size.active {
  background: #2d5438;
  color: #ffffff;
  border-color: #2d5438;
  box-shadow: 0 2px 6px rgba(45, 84, 56, 0.2);
}

.btn-tool-share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  background: #ffffff;
  color: #5c4d43;
  border: 1px solid rgba(80, 60, 45, 0.16);
  box-shadow: 0 1px 4px rgba(60, 45, 30, 0.02);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-tool-share .icon-minimal {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.btn-tool-share:hover {
  background: rgba(45, 84, 56, 0.05);
  color: #2d5438;
  border-color: #2d5438;
  transform: translateY(-1px);
}

/* 字級變化 */
.reader-article-content-body.font-size-small {
  font-size: 0.94rem;
  line-height: 1.8;
}
.reader-article-content-body.font-size-normal {
  font-size: 1.05rem;
  line-height: 1.9;
}
.reader-article-content-body.font-size-large {
  font-size: 1.2rem;
  line-height: 2.0;
}

/* 頂部即時閱讀進度條 */
.reader-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3.5px;
  background: linear-gradient(90deg, #c2832c 0%, #2d5438 100%);
  width: 0%;
  z-index: 999;
  transition: width 0.08s linear;
  box-shadow: 0 0 8px rgba(194, 131, 44, 0.5);
}

/* 沉浸式接續文章分割線 */
.reader-continuous-divider {
  display: flex;
  align-items: center;
  margin: 48px 0 32px;
  gap: 16px;
}

.divider-decor-line {
  flex: 1;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(194, 131, 44, 0.35), transparent);
}

.divider-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1.5px solid rgba(194, 131, 44, 0.3);
  padding: 8px 18px;
  border-radius: 30px;
  box-shadow: 0 4px 14px rgba(194, 131, 44, 0.08);
}

.divider-badge-icon {
  font-size: 1.1rem;
}

.divider-badge-text {
  font-size: 0.9rem;
  font-weight: 700;
  color: #8c601c;
  letter-spacing: 0.04em;
}

.extended-reading-article {
  border-left: 4px solid rgba(194, 131, 44, 0.35);
}

/* 延伸閱讀結尾卡片 */
.reader-end-of-stream {
  text-align: center;
  background: #ffffff;
  border: 1px solid rgba(194, 131, 44, 0.2);
  border-radius: 20px;
  padding: 36px 24px;
  margin: 40px 0 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.end-stream-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}

.reader-end-of-stream h4 {
  font-size: 1.15rem;
  color: #2d5438;
  margin: 0 0 6px;
  font-weight: 700;
}

.reader-end-of-stream p {
  font-size: 0.88rem;
  color: #7c7267;
  margin: 0 0 20px;
}

.btn-return-list-bottom {
  background: linear-gradient(135deg, #9f8469 0%, #826950 100%);
  color: #ffffff;
  border: none;
  padding: 10px 24px;
  border-radius: 22px;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(130, 105, 80, 0.22);
  transition: all 0.2s ease;
}

.btn-return-list-bottom:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(130, 105, 80, 0.32);
}

/* 浮動回到頂端按鈕 */
.btn-scroll-top-floating {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  color: #2d5438;
  border: 1.5px solid rgba(45, 84, 56, 0.25);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 90;
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-scroll-top-floating.visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.btn-scroll-top-floating:hover {
  background: #826950;
  color: #ffffff;
  border-color: #826950;
  transform: translateY(-2px);
}

.btn-scroll-top-floating svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
}

/* Toast 提示膠囊 */
.articles-toast-pill {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: rgba(28, 53, 36, 0.94);
  color: #ffffff;
  padding: 10px 22px;
  border-radius: 30px;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(10px);
}

.articles-toast-pill.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.clickable-tag {
  cursor: pointer;
  transition: all 0.18s ease;
}

.clickable-tag:hover {
  background: #2d5438 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* 核心要點導讀卡片 (AIPC 風格 Alert Card) */
.reader-takeaway-card {
  background: linear-gradient(135deg, rgba(235, 87, 87, 0.06) 0%, rgba(194, 131, 44, 0.06) 100%);
  border: 1.5px solid rgba(235, 87, 87, 0.35);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin: 4px 0 10px;
}

.takeaway-badge {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.takeaway-icon {
  font-size: 1.2rem;
  line-height: 1.4;
}

.takeaway-text {
  font-size: 0.95rem;
  font-weight: 700;
  color: #a72828;
  line-height: 1.6;
}

/* 正文 Typography 與 Markdown 表格 */
.reader-article-content-body {
  font-size: 1.02rem;
  line-height: 1.9;
  color: #1a1a1a;
  word-break: break-word;
}

.reader-article-content-body h1 {
  font-size: 1.55rem;
  font-weight: 850;
  color: var(--color-coffee-dark);
  margin: 28px 0 16px;
  line-height: 1.35;
}

.reader-article-content-body h2 {
  font-size: 1.38rem;
  font-weight: 850;
  color: var(--color-coffee-dark);
  margin: 26px 0 14px;
  line-height: 1.38;
  padding-left: 10px;
  border-left: 4px solid var(--color-gold);
}

.reader-article-content-body h3 {
  font-size: 1.3rem;
  font-weight: 850;
  color: var(--color-coffee-dark);
  margin: 32px 0 16px;
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--border-light);
}

.reader-article-content-body p {
  margin-bottom: 16px;
}

.reader-article-content-body blockquote {
  background: var(--color-amber-subtle);
  border-left: 4px solid var(--color-amber-gold);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  padding: 16px 20px;
  margin: 20px 0;
  font-size: 0.96rem;
  color: var(--color-coffee-dark);
  line-height: 1.75;
}

.reader-article-content-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 0.92rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(60, 45, 30, 0.05);
  border: 1px solid var(--border-medium);
}

.reader-article-content-body th {
  background: rgba(66, 53, 43, 0.07);
  color: var(--color-coffee-dark);
  font-weight: 800;
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1.5px solid var(--border-medium);
}

.reader-article-content-body td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--color-coffee);
}

.reader-article-content-body tr:nth-child(even) td {
  background: rgba(252, 250, 246, 0.7);
}

.reader-article-content-body ol, 
.reader-article-content-body ul {
  padding-left: 26px;
  margin: 16px 0;
}

.reader-article-content-body li {
  margin-bottom: 10px;
  line-height: 1.8;
}

/* 【師解惑 · 特別囑咐】金句卡片 */
.reader-master-tips-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 242, 232, 0.95) 100%);
  border: 1.5px solid rgba(194, 131, 44, 0.4);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  margin: 20px 0;
  box-shadow: 0 4px 20px rgba(194, 131, 44, 0.12);
  position: relative;
}

.tips-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.tips-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: #b83a38;
  color: #ffffff;
  border-radius: 4px;
  font-size: 0.84rem;
  font-weight: 900;
  font-family: "PingFang TC", "Songti TC", serif;
  box-shadow: 0 2px 4px rgba(184, 58, 56, 0.3);
}

.tips-title {
  font-size: 1.08rem;
  font-weight: 850;
  color: var(--color-coffee-dark);
  letter-spacing: 0.3px;
}

.tips-content {
  font-size: 0.96rem;
  color: var(--color-coffee-dark);
  line-height: 1.8;
  font-weight: 500;
}

/* 標籤列 */
.reader-tags-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 10px;
}

.reader-tag {
  font-size: 0.78rem;
  color: var(--color-coffee-light);
  background: rgba(66, 53, 43, 0.05);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

/* 底部 CTA 諮詢卡片 */
.reader-cta-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, rgba(45, 84, 56, 0.08) 0%, rgba(194, 131, 44, 0.08) 100%);
  border: 1.2px solid rgba(45, 84, 56, 0.25);
  border-radius: var(--radius-md);
  padding: 22px 26px;
  margin-top: 16px;
  gap: 18px;
}

.cta-left h3 {
  font-size: 1.08rem;
  font-weight: 850;
  color: var(--color-green-deep);
  margin-bottom: 4px;
}

.cta-left p {
  font-size: 0.86rem;
  color: var(--color-coffee);
}

.btn-ask-master {
  padding: 12px 22px;
  background: var(--color-green);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-pill);
  font-size: 0.94rem;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(45, 84, 56, 0.25);
  transition: all 0.2s ease;
}

.btn-ask-master:hover {
  background: #1e3b27;
  transform: translateY(-1.5px);
  box-shadow: 0 6px 18px rgba(45, 84, 56, 0.35);
}

/* ==========================================================================
   右側「更多文章」推薦側邊欄 (Reader Sidebar & Compact Thumbnails)
   ========================================================================== */
.reader-sidebar-column {
  position: sticky;
  top: 20px;
  width: 100%;
}

.reader-sidebar-card {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid var(--border-light);
  border-radius: 20px;
  padding: 22px 18px;
  box-shadow: 0 4px 24px rgba(60, 45, 30, 0.06);
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}

.sidebar-icon {
  font-size: 1.15rem;
}

.sidebar-header h3 {
  font-size: 1.02rem;
  font-weight: 850;
  color: var(--color-coffee-dark);
  margin: 0;
}

.sidebar-article-list {
  display: flex;
  flex-direction: column;
}

.sidebar-article-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 6px !important;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.sidebar-article-item:last-child {
  border-bottom: none;
}

.sidebar-article-item:hover {
  background: rgba(66, 53, 43, 0.04);
  padding-left: 10px !important;
}

.sidebar-item-thumb {
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  display: block !important;
  box-shadow: 0 2px 8px rgba(60, 45, 30, 0.08);
}

.sidebar-item-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.sidebar-item-category {
  font-size: 0.72rem;
  font-weight: 750;
  color: var(--color-green);
  line-height: 1.2;
}

.sidebar-item-title {
  font-size: 0.88rem;
  font-weight: 750;
  color: var(--color-coffee-dark);
  line-height: 1.35;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.sidebar-item-subtitle {
  font-size: 0.75rem;
  color: var(--color-coffee-muted);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-view-all-btn {
  width: 100%;
  margin-top: 14px;
  padding: 9px 14px;
  text-align: center;
  background: rgba(45, 84, 56, 0.06);
  border: 1px solid rgba(45, 84, 56, 0.2);
  border-radius: var(--radius-pill);
  color: var(--color-green);
  font-size: 0.84rem;
  font-weight: 750;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sidebar-view-all-btn:hover {
  background: var(--color-green);
  color: #ffffff;
}

/* 響應式優化 (Mobile & Tablet) */
@media (max-width: 980px) {
  .articles-home-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .articles-home-sidebar {
    position: static;
  }

  .article-reader-page-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .reader-sidebar-column {
    position: static;
  }

  .reader-main-card {
    padding: 24px 18px;
  }

  .reader-cta-box {
    flex-direction: column;
    align-items: flex-start;
  }

  .btn-ask-master {
    width: 100%;
    text-align: center;
  }
}

.btn-text-full {
  display: inline;
}
.btn-text-short {
  display: none;
}

@media (max-width: 768px) {
  .btn-text-full {
    display: none !important;
  }
  .btn-text-short {
    display: inline !important;
  }

  .articles-header {
    padding: 10px 14px;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: center;
  }
  
  .articles-header-left {
    gap: 8px;
    min-width: 0;
    flex: 1;
    overflow: hidden;
  }

  .articles-brand-title {
    min-width: 0;
    overflow: hidden;
  }

  .articles-brand-title h2 {
    font-size: 1.02rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
  }

  .articles-brand-title p {
    display: none !important;
  }

  .btn-back-to-chat {
    padding: 6px 10px;
    font-size: 0.8rem;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .articles-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }

  .btn-tool-share {
    padding: 6px 10px !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    gap: 4px !important;
  }

  .btn-articles-ask-ai {
    padding: 6px 11px !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* ==========================================
     手機版五術中醫知識庫：分類收納、左圖右文方格卡片與舒適字級
     ========================================== */
  #articles-view {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* 手機版不顯示兩側浮水印 */
  #articles-view::before,
  #articles-view::after,
  .articles-view-section::before,
  .articles-view-section::after {
    display: none !important;
  }

  .articles-scroll-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    padding: 10px 14px calc(48px + env(safe-area-inset-bottom, 16px)) !important;
  }

  .articles-inner-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    padding: 0 !important;
  }

  /* 隱藏橫向平鋪的主頻道與全部細分類標籤，避免畫面擁擠凌亂 */
  .articles-main-tabs,
  .articles-category-pills {
    display: none !important;
  }

  /* 頂部搜尋欄：手機版滿版 */
  .articles-top-action-bar {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 10px !important;
  }

  .articles-search-box {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #articles-search-input {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 0.9rem !important;
    padding: 9px 12px 9px 36px !important;
    border-radius: var(--radius-pill) !important;
    box-sizing: border-box !important;
  }

  /* 手機版專屬：文章分類收納列表式下拉選單 (Collapsible Category Picker) */
  .mobile-category-picker-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 14px !important;
    position: relative !important;
  }

  .mobile-category-trigger-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 14px !important;
    background: #ffffff !important;
    border: 1px solid var(--border-medium) !important;
    border-radius: var(--radius-pill) !important;
    cursor: pointer !important;
    box-shadow: var(--shadow-xs) !important;
    transition: all 0.2s ease !important;
  }

  .mobile-category-trigger-btn:active {
    transform: scale(0.98) !important;
  }

  .mobile-cat-trigger-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 750 !important;
    font-size: 0.9rem !important;
    color: var(--color-coffee-dark) !important;
  }

  .mobile-cat-trigger-icon {
    font-size: 1rem !important;
  }

  .mobile-cat-chevron {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 2 !important;
    color: var(--color-coffee) !important;
    transition: transform 0.25s ease !important;
  }

  .mobile-category-trigger-btn.open .mobile-cat-chevron {
    transform: rotate(180deg) !important;
  }

  .mobile-category-dropdown-panel {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 8px !important;
    background: #ffffff !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
    padding: 8px 6px 12px !important;
    max-height: 360px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    animation: fadeInSlideDown 0.2s ease !important;
  }

  .mobile-cat-group {
    margin-bottom: 8px !important;
  }

  .mobile-cat-group:last-child {
    margin-bottom: 0 !important;
  }

  .mobile-cat-group-title {
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    color: #9c9083 !important;
    letter-spacing: 0.05em !important;
    padding: 6px 10px 4px !important;
    border-bottom: 1px dashed var(--border-light) !important;
    margin-bottom: 4px !important;
  }

  .mobile-cat-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 9px 12px !important;
    border-radius: 8px !important;
    font-size: 0.88rem !important;
    color: var(--color-coffee-dark) !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
  }

  .mobile-cat-item:active,
  .mobile-cat-item.active {
    background: rgba(194, 131, 44, 0.12) !important;
    color: var(--color-coffee-dark) !important;
    font-weight: 750 !important;
  }

  .mobile-cat-item.active .mobile-cat-item-name::after {
    content: " ✓" !important;
    color: var(--color-gold) !important;
    font-weight: bold !important;
  }

  .mobile-cat-item-count {
    font-size: 0.76rem !important;
    color: #8e8375 !important;
    background: var(--bg-paper) !important;
    padding: 2px 7px !important;
    border-radius: 10px !important;
  }

  /* 文章列表首頁雙欄：手機版單欄垂直流，約束寬度避免溢出 */
  .articles-home-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .articles-home-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .articles-status-bar {
    margin-bottom: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .articles-count-label {
    font-size: 0.78rem !important;
    color: #8c7f70 !important;
  }

  /* 焦點頭條卡片 (Hero Card) 大圖輪播：手機螢幕寬度滿版適應，不超出版面，文字自動折行 */
  .articles-hero-card,
  .hero-fullbleed-card,
  .hero-carousel-wrapper {
    flex-direction: column !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .hero-carousel-track {
    min-height: 190px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .hero-carousel-arrow {
    display: none !important;
  }

  .hero-carousel-indicators {
    bottom: 8px !important;
    padding: 3px 8px !important;
    gap: 5px !important;
  }

  .hero-indicator-dot {
    width: 5px !important;
    height: 5px !important;
  }

  .hero-indicator-dot.active {
    width: 14px !important;
  }

  .hero-fullbleed-poster,
  .hero-poster-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 190px !important;
    aspect-ratio: 16 / 9 !important;
    padding: 12px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  .hero-poster-top {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }

  .hero-badge {
    padding: 3px 10px !important;
    font-size: 0.72rem !important;
  }

  .hero-poster-time {
    display: none !important;
  }

  .hero-poster-bottom {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .hero-poster-text-block {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .hero-poster-meta {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: 0.68rem !important;
    line-height: 1.25 !important;
    color: rgba(255, 255, 255, 0.88) !important;
    margin-bottom: 2px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .hero-poster-source,
  .hero-poster-category {
    display: inline !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  .hero-poster-title {
    font-size: 1.02rem !important;
    line-height: 1.32 !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 2px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
    box-sizing: border-box !important;
  }

  .hero-poster-subtitle {
    font-size: 0.74rem !important;
    line-height: 1.32 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
    box-sizing: border-box !important;
  }

  .hero-poster-summary,
  .hero-poster-tags,
  .hero-poster-action {
    display: none !important;
  }

  /* 文章列表卡片 (小圖)：左側方格圖 ＋ 右側主副標題，嚴格約束不超出版面 */
  .articles-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .article-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 10px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
    gap: 10px !important;
    cursor: pointer !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    margin: 0 !important;
    transition: transform 0.15s ease !important;
  }

  .article-card:active {
    transform: scale(0.985) !important;
  }

  .card-cover-wrap {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    position: relative !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    background: #f0eae1 !important;
    box-sizing: border-box !important;
  }

  .card-cover-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* 移除白底與圖標，改為底部半透明暗調漸層 + 乾淨白色文字，不遮擋圖片 */
  .card-type-badge {
    display: none !important;
  }

  .card-cover-bottom-overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 12px 2px 2px !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0) 100%) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
    pointer-events: none !important;
    border-radius: 0 0 8px 8px !important;
  }

  .card-cover-bottom-text {
    color: #ffffff !important;
    font-size: 0.62rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
    max-width: 100% !important;
  }

  .card-body {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .card-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
    font-size: 0.68rem !important;
    color: #9c9083 !important;
    margin-bottom: 1px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .card-source {
    color: var(--color-gold) !important;
    font-weight: 650 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    font-size: 0.68rem !important;
  }

  .card-date {
    display: none !important;
  }

  .card-title {
    font-size: 0.92rem !important;
    font-weight: 750 !important;
    line-height: 1.34 !important;
    color: var(--color-coffee-dark) !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
  }

  .card-title-text {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  .card-subtitle {
    font-size: 0.76rem !important;
    color: #726658 !important;
    line-height: 1.34 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
  }

  .card-summary {
    display: none !important;
  }

  .card-footer {
    display: none !important;
  }

  .articles-home-sidebar {
    display: none !important;
  }

  .home-sidebar-card {
    padding: 14px 12px !important;
    border-radius: 14px !important;
  }

  .sidebar-article-item {
    padding: 8px 6px !important;
    gap: 10px !important;
  }

  .sidebar-item-thumb {
    width: 48px !important;
    height: 48px !important;
    border-radius: 8px !important;
  }

  .sidebar-item-title {
    font-size: 0.88rem !important;
    line-height: 1.3 !important;
  }

  /* ==========================================
     文章獨立閱讀內頁 (Mobile Reading View - 移除雙層框架，解放閱讀寬度)
     ========================================== */
  .articles-detail-page-wrap {
    padding: 0 0 calc(40px + env(safe-area-inset-bottom, 16px)) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 手機版頂排已取代為「← 返回文章列表」，隱藏下方重複的返回列 */
  .reader-top-nav-bar {
    display: none !important;
  }

  /* 手機頂排「返回文章列表」樣式 */
  .mobile-brand-title.in-reader-detail {
    font-size: 0.94rem !important;
    font-weight: 750 !important;
  }

  .mobile-nav-back-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    font-size: 0.92rem !important;
    font-weight: 750 !important;
    color: var(--color-coffee-dark) !important;
    cursor: pointer !important;
  }

  .mobile-nav-back-btn:active {
    opacity: 0.7 !important;
  }

  .article-reader-page-layout {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .reader-main-column {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 移除雙層背景卡片與邊框，讓手機閱讀視野極致開闊 */
  .reader-main-card {
    padding: 2px 0 20px !important;
    border-radius: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* 「by 師解惑 · 解惑學堂」整排資訊縮小 50% */
  .reader-card-meta-top {
    flex-direction: column !important;
    gap: 3px !important;
    align-items: flex-start !important;
    margin-bottom: 6px !important;
    padding: 0 !important;
  }

  .reader-author-info {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 3px 5px !important;
    font-size: 0.64rem !important;
    line-height: 1.25 !important;
    color: #8c7f70 !important;
  }

  .reader-author-avatar,
  .reader-author-avatar-img {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    border-radius: 50% !important;
    object-fit: contain !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }

  .reader-author-name {
    font-size: 0.64rem !important;
  }

  .reader-date-label {
    font-size: 0.62rem !important;
    color: #9c9083 !important;
  }

  .reader-meta-dot {
    font-size: 0.55rem !important;
    color: #c4b8aa !important;
    margin: 0 1px !important;
  }

  .reader-category-pill {
    font-size: 0.58rem !important;
    padding: 1px 5px !important;
    border-radius: 8px !important;
  }

  .reader-source-badge {
    font-size: 0.62rem !important;
    padding: 2px 7px !important;
    border-radius: 8px !important;
    margin-top: 2px !important;
    line-height: 1.25 !important;
  }

  /* 封面大圖在手機上的適應：螢幕寬度滿版 */
  .reader-article-cover-wrap {
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    max-height: 220px !important;
    border-radius: 12px !important;
    margin: 6px 0 10px !important;
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
  }

  .reader-cover-title-overlay {
    padding: 10px 12px 12px !important;
  }

  .reader-article-title-overlay {
    font-size: 1.15rem !important;
    line-height: 1.36 !important;
    font-weight: 800 !important;
    margin-bottom: 3px !important;
    max-width: 100% !important;
  }

  .reader-article-subtitle-overlay {
    font-size: 0.8rem !important;
    line-height: 1.38 !important;
    max-width: 100% !important;
    opacity: 0.95 !important;
  }

  .reader-article-main-title {
    font-size: 1.18rem !important;
    line-height: 1.38 !important;
    font-weight: 800 !important;
    margin-bottom: 4px !important;
  }

  .reader-article-main-subtitle {
    font-size: 0.82rem !important;
    line-height: 1.42 !important;
  }

  /* 閱讀字級與分享工具列 */
  .reader-action-toolbar {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 8px 0 !important;
    border-top: 1px solid var(--border-light) !important;
    border-bottom: 1px solid var(--border-light) !important;
    margin: 4px 0 10px !important;
    width: 100% !important;
    background: transparent !important;
  }

  .reader-font-switcher {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.8rem !important;
  }

  .btn-font-size {
    padding: 3px 10px !important;
    font-size: 0.8rem !important;
    border-radius: var(--radius-pill) !important;
    cursor: pointer !important;
  }

  .btn-font-size.active {
    background: var(--color-gold) !important;
    color: #ffffff !important;
    font-weight: bold !important;
  }

  .reader-share-actions {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .reader-share-actions .toolbar-label {
    display: none !important;
  }

  .reader-share-actions .btn-tool-share {
    justify-content: center !important;
    padding: 6px 3px !important;
    font-size: 0.76rem !important;
    border-radius: 8px !important;
    width: 100% !important;
    white-space: nowrap !important;
    gap: 3px !important;
  }

  .reader-share-actions .btn-tool-share span {
    font-size: 0.76rem !important;
  }

  /* 要點導讀警示卡 */
  .reader-takeaway-card {
    padding: 10px 12px !important;
    border-radius: 10px !important;
    background: rgba(194, 131, 44, 0.08) !important;
    border: 1px solid rgba(194, 131, 44, 0.22) !important;
    margin: 8px 0 12px !important;
  }

  .takeaway-text {
    font-size: 0.88rem !important;
    line-height: 1.58 !important;
    color: var(--color-coffee-dark) !important;
    font-weight: 500 !important;
  }

  /* 核心正文字體排印與字級放大縮小切換 */
  .reader-article-content-body {
    letter-spacing: 0.02em !important;
    color: #2c251e !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  .reader-article-content-body.font-size-small,
  .reader-article-content-body.font-size-small p,
  .reader-article-content-body.font-size-small li,
  .reader-article-content-body.font-size-small div,
  .reader-article-content-body.font-size-small span {
    font-size: 0.82rem !important;
    line-height: 1.68 !important;
  }

  .reader-article-content-body.font-size-normal,
  .reader-article-content-body.font-size-normal p,
  .reader-article-content-body.font-size-normal li,
  .reader-article-content-body.font-size-normal div,
  .reader-article-content-body.font-size-normal span {
    font-size: 0.96rem !important;
    line-height: 1.82 !important;
  }

  .reader-article-content-body.font-size-large,
  .reader-article-content-body.font-size-large p,
  .reader-article-content-body.font-size-large li,
  .reader-article-content-body.font-size-large div,
  .reader-article-content-body.font-size-large span {
    font-size: 1.18rem !important;
    line-height: 2.0 !important;
  }

  /* 文章內主標題 (Markdown # 或 h1)：縮小至優雅舒適的手機標題比例 */
  .reader-article-content-body h1 {
    font-size: 1.16rem !important;
    line-height: 1.4 !important;
    font-weight: 800 !important;
    margin: 18px 0 10px !important;
    color: var(--color-coffee-dark) !important;
    letter-spacing: 0.02em !important;
    word-break: break-word !important;
  }

  /* 二級與三級標題 (Markdown ## / ###) */
  .reader-article-content-body h2 {
    font-size: 1.1rem !important;
    font-weight: 750 !important;
    margin: 16px 0 8px !important;
    color: var(--color-coffee-dark) !important;
    border-left: 3px solid var(--color-gold) !important;
    padding-left: 8px !important;
    line-height: 1.38 !important;
    word-break: break-word !important;
  }

  .reader-article-content-body h3 {
    font-size: 1.04rem !important;
    font-weight: 750 !important;
    margin: 14px 0 6px !important;
    color: var(--color-coffee-dark) !important;
    border-left: 3px solid var(--color-gold) !important;
    padding-left: 8px !important;
    line-height: 1.38 !important;
    word-break: break-word !important;
  }

  .reader-article-content-body h4,
  .reader-article-content-body h5,
  .reader-article-content-body h6 {
    font-size: 0.96rem !important;
    font-weight: 700 !important;
    margin: 12px 0 6px !important;
    color: var(--color-coffee-dark) !important;
    line-height: 1.4 !important;
    word-break: break-word !important;
  }

  .reader-article-content-body strong,
  .reader-article-content-body b {
    font-weight: 750 !important;
    color: var(--color-coffee-dark) !important;
  }

  .reader-article-content-body p {
    margin: 0 0 0.95em 0 !important;
    line-height: 1.82 !important;
    font-size: inherit !important;
  }

  .reader-article-content-body ul,
  .reader-article-content-body ol {
    padding-left: 18px !important;
    margin: 0 0 1em 0 !important;
    font-size: 0.95rem !important;
  }

  .reader-article-content-body li {
    margin-bottom: 5px !important;
    line-height: 1.72 !important;
  }

  .reader-article-content-body blockquote {
    margin: 12px 0 !important;
    padding: 10px 12px !important;
    border-left: 3px solid var(--color-gold) !important;
    background: rgba(194, 131, 44, 0.06) !important;
    border-radius: 0 8px 8px 0 !important;
    font-size: 0.88rem !important;
    line-height: 1.68 !important;
    color: var(--color-coffee-dark) !important;
  }

  .reader-article-content-body img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 10px !important;
    margin: 10px 0 !important;
    box-shadow: var(--shadow-xs) !important;
  }

  .table-responsive-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 12px 0 !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 8px !important;
  }

  .reader-article-content-body table {
    width: 100% !important;
    min-width: 280px !important;
    font-size: 0.82rem !important;
    border-collapse: collapse !important;
  }

  .reader-article-content-body th,
  .reader-article-content-body td {
    padding: 7px 8px !important;
    border: 1px solid var(--border-subtle) !important;
  }

  /* 【師解惑 · 特別囑咐】卡片 */
  .reader-master-tips-card {
    padding: 14px 12px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(28, 53, 36, 0.05) 0%, rgba(194, 131, 44, 0.08) 100%) !important;
    border: 1px solid rgba(194, 131, 44, 0.3) !important;
    margin: 16px 0 12px !important;
  }

  .tips-content {
    font-size: 0.9rem !important;
    line-height: 1.7 !important;
    color: var(--color-coffee-dark) !important;
  }

  /* 底部深度探討 CTA */
  .reader-cta-box {
    padding: 16px 12px !important;
    border-radius: 12px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-medium) !important;
    margin-top: 14px !important;
  }

  .btn-ask-master {
    width: 100% !important;
    padding: 10px 14px !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    border-radius: var(--radius-pill) !important;
    justify-content: center !important;
  }

  /* 側邊欄延伸閱讀在手機上置底展示 */
  .reader-sidebar-column {
    width: 100% !important;
    position: static !important;
  }

  .reader-sidebar-card {
    padding: 14px 12px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    border: 1px solid var(--border-subtle) !important;
  }
}

/* ==========================================================================
   陽宅玄空飛星與八宅風水專屬樣式 (Feng Shui 9-Grid & Compass)
   ========================================================================== */
.fengshui-view-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100vh;
  background: var(--color-bg-primary, #fbf8f3);
  overflow: hidden;
}

.fengshui-header {
  /* 版面尺寸與底色統一寫在檔案開頭的共用規則區塊 */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.fengshui-header-inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fs-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.fs-brand-title h2 {
  font-size: 1.15rem;
  color: var(--color-green-dark, #1c3524);
  margin: 0;
  font-weight: 600;
}

.fs-brand-title p {
  font-size: 0.82rem;
  color: #7c7267;
  margin: 2px 0 0;
}

.btn-fs-ask-ai {
  background: linear-gradient(135deg, #9f8469 0%, #826950 100%);
  color: #ffffff;
  border: none;
  padding: 9px 18px;
  border-radius: 20px;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(130, 105, 80, 0.22);
  transition: all 0.2s ease;
}

.btn-fs-ask-ai:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(45, 84, 56, 0.3);
}

.fengshui-content-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px 60px;
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.fengshui-control-panel {
  background: #ffffff;
  border: 1px solid rgba(194, 131, 44, 0.18);
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.control-group {
  margin-bottom: 16px;
}

.control-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #2c251e;
  margin-bottom: 10px;
  display: block;
}

.house-selector-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip-btn {
  background: #f7f3eb;
  border: 1px solid rgba(194, 131, 44, 0.2);
  color: #4a4036;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.chip-btn:hover {
  background: #ede6d8;
  border-color: #c2832c;
}

.chip-btn.active {
  background: linear-gradient(135deg, #9f8469 0%, #826950 100%);
  color: #ffffff;
  border-color: #826950;
  box-shadow: 0 4px 12px rgba(130, 105, 80, 0.22);
}

.control-group-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px dashed rgba(194, 131, 44, 0.15);
}

.current-house-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.group-tag {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
}

.tag-east { background: #e6f4ea; color: #137333; }
.tag-west { background: #fef7e0; color: #b06000; }

.house-element {
  font-size: 0.85rem;
  color: #8c6b30;
  font-weight: 600;
}

.house-desc {
  font-size: 0.88rem;
  color: #665c52;
}

.year-select-dropdown {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(194, 131, 44, 0.3);
  background: #ffffff;
  font-size: 0.88rem;
  color: #2c251e;
  outline: none;
}

/* 主佈局左右兩欄 */
.fengshui-main-grid-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  margin-bottom: 24px;
}

.fengshui-compass-card, .fengshui-detail-card {
  background: #ffffff;
  border: 1px solid rgba(194, 131, 44, 0.18);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.compass-header h3 {
  margin: 0;
  font-size: 1.15rem;
  color: #2d5438;
}

.compass-tip {
  font-size: 0.82rem;
  color: #8c8275;
  margin: 4px 0 16px;
}

/* 九宮格 (3x3) 盤面 */
.nine-grid-board {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 12px;
  aspect-ratio: 1 / 1;
  max-width: 480px;
  margin: 0 auto;
}

.nine-grid-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.grid-cell {
  background: #faf7f0;
  border: 1.5px solid rgba(194, 131, 44, 0.2);
  border-radius: 12px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.grid-cell:hover {
  transform: translateY(-2px);
  border-color: #c2832c;
  box-shadow: 0 6px 18px rgba(194, 131, 44, 0.15);
}

.grid-cell.selected {
  border-color: #2d5438;
  background: #f0f7f2;
  box-shadow: 0 0 0 2px #2d5438, 0 8px 24px rgba(45, 84, 56, 0.2);
}

.grid-cell.status-good {
  border-top: 3px solid #2d5438;
}

.grid-cell.status-bad {
  border-top: 3px solid #c94a29;
}

.cell-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.palace-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #4a3e31;
}

.star-badge {
  font-size: 0.72rem;
  padding: 2px 6px;
  border-radius: 10px;
  background: rgba(194, 131, 44, 0.12);
  color: #8c601c;
  font-weight: 600;
}

.star-badge.star-9, .star-badge.star-8, .star-badge.star-1 {
  background: #e6f4ea;
  color: #137333;
}

.star-badge.star-5, .star-badge.star-2 {
  background: #fce8e6;
  color: #c5221f;
}

.cell-body {
  text-align: center;
  margin: 6px 0;
}

.star-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: #1c3524;
}

.eight-house-star {
  font-size: 0.78rem;
  margin-top: 2px;
  font-weight: 600;
}

.eight-house-star.good { color: #137333; }
.eight-house-star.bad { color: #c94a29; }
.eight-house-star.center { color: #8c6b30; }

.cell-footer {
  text-align: right;
}

.nature-pill {
  font-size: 0.7rem;
  color: #7c7267;
}

/* 右側詳細開示欄 */
.detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(194, 131, 44, 0.15);
  margin-bottom: 16px;
}

.detail-badge {
  background: #2d5438;
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
}

.detail-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: #2c251e;
}

.detail-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

.info-row {
  display: flex;
  font-size: 0.88rem;
  line-height: 1.6;
}

.info-row .label {
  color: #7c7267;
  min-width: 90px;
  flex-shrink: 0;
}

.info-row .val {
  color: #2c251e;
  font-weight: 500;
}

.font-highlight {
  color: #2d5438 !important;
  font-weight: 600 !important;
}

.text-good { color: #137333; }
.text-bad { color: #c94a29; }

.detail-advice-box {
  background: #faf7f0;
  border-radius: 12px;
  padding: 16px;
  border-left: 4px solid #c2832c;
  margin-bottom: 20px;
}

.detail-advice-box h4 {
  margin: 0 0 6px;
  font-size: 0.92rem;
  color: #8c601c;
}

.advice-text, .cure-text {
  font-size: 0.88rem;
  line-height: 1.7;
  color: #4a4036;
  margin: 0;
}

.btn-detail-ask {
  width: 100%;
  background: #f7f3eb;
  border: 1px solid rgba(194, 131, 44, 0.3);
  color: #2d5438;
  padding: 12px;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-detail-ask:hover {
  background: #2d5438;
  color: #ffffff;
  border-color: #2d5438;
}

.fengshui-summary-section {
  margin-top: 16px;
}

.summary-card {
  background: #ffffff;
  border: 1px solid rgba(194, 131, 44, 0.18);
  border-radius: 16px;
  padding: 20px 24px;
}

.summary-card h4 {
  margin: 0 0 8px;
  font-size: 0.98rem;
  color: #2d5438;
}

.summary-card p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.7;
  color: #554a3e;
}

@media (max-width: 860px) {
  .fengshui-header {
    padding: 10px 14px;
    gap: 8px;
  }
  .fs-brand-title h2 {
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .fs-brand-title p {
    display: none;
  }
  .btn-fs-ask-ai {
    padding: 6px 12px;
    font-size: 0.8rem;
    white-space: nowrap;
  }
  .fengshui-main-grid-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .fengshui-content-wrap {
    padding: 14px 12px 48px;
  }
  .fengshui-compass-card, .fengshui-detail-card, .fengshui-control-panel {
    padding: 16px 14px;
    border-radius: 16px;
  }
  .house-selector-chips {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  .chip-btn {
    padding: 7px 6px;
    font-size: 0.78rem;
    text-align: center;
  }
  .control-group-inline {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .nine-grid-board {
    max-width: 350px;
    gap: 8px;
  }
  .nine-grid-row {
    gap: 8px;
  }
  .grid-cell {
    padding: 7px 5px;
    border-radius: 10px;
    min-height: 80px;
  }
  .palace-name {
    font-size: 0.76rem;
  }
  .star-badge {
    font-size: 0.68rem;
    padding: 1px 4px;
  }
  .star-name {
    font-size: 0.84rem;
    font-weight: 700;
  }
  .eight-house-star {
    font-size: 0.72rem;
  }
  .nature-pill {
    font-size: 0.65rem;
  }
  .compass-header h3 {
    font-size: 1.02rem;
    text-align: center;
  }
  .compass-tip {
    font-size: 0.74rem;
    text-align: center;
  }
}

/* ==========================================================================
   奇門遁甲即時起局樣式 (Qimen Dunjia 4-Discs & 9-Grid)
   ========================================================================== */
.qimen-view-container, .yuelao-view-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100vh;
  background: var(--color-bg-primary, #fbf8f3);
  overflow: hidden;
}

.qimen-header, .yuelao-header {
  /* 版面尺寸與底色統一寫在檔案開頭的共用規則區塊 */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.qimen-header-inner, .yuelao-header-inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.qm-header-left, .yl-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.qm-brand-title h2, .yl-brand-title h2 {
  font-size: 1.15rem;
  color: var(--color-green-dark, #1c3524);
  margin: 0;
  font-weight: 700;
}

.qm-brand-title p, .yl-brand-title p {
  font-size: 0.8rem;
  color: #7c7267;
  margin: 2px 0 0;
}

.btn-qm-ask-ai, .btn-yl-ask-ai {
  background: linear-gradient(135deg, #9f8469 0%, #826950 100%);
  color: #ffffff;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(130, 105, 80, 0.22);
  transition: all 0.2s ease;
}

.qimen-content-wrap, .yuelao-content-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px 60px;
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* 奇門遁甲實戰決策引導卡 */
.qimen-guide-card {
  background: linear-gradient(135deg, #faf7f0 0%, #f4eee1 100%);
  border: 1.5px solid rgba(194, 131, 44, 0.28);
  border-radius: 16px;
  padding: 16px 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.guide-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.guide-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.98rem;
  color: #2d5438;
}

.guide-icon {
  font-size: 1.2rem;
}

.btn-guide-toggle {
  background: #ffffff;
  border: 1px solid rgba(194, 131, 44, 0.3);
  color: #8c601c;
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.guide-body {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(194, 131, 44, 0.15);
}

.guide-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}

.guide-step-box {
  background: #ffffff;
  border: 1px solid rgba(194, 131, 44, 0.18);
  border-radius: 12px;
  padding: 12px 14px;
}

.step-num {
  font-size: 0.72rem;
  font-weight: 750;
  color: #b83a38;
  background: rgba(184, 58, 56, 0.1);
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 6px;
}

.guide-step-box h4 {
  margin: 0 0 4px;
  font-size: 0.92rem;
  color: #1c3524;
}

.guide-step-box p {
  margin: 0;
  font-size: 0.82rem;
  color: #5c4d43;
  line-height: 1.5;
}

.guide-quick-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px dashed rgba(194, 131, 44, 0.2);
}

.quick-label {
  font-size: 0.84rem;
  font-weight: 600;
  color: #8c601c;
}

.btn-qm-tag {
  background: #ffffff;
  border: 1px solid rgba(45, 84, 56, 0.25);
  color: #2d5438;
  padding: 5px 12px;
  border-radius: 14px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease;
}

.btn-qm-tag:hover {
  background: #2d5438;
  color: #ffffff;
  transform: translateY(-1px);
}

/* 頂部起局模式切換與控制面板 */
.qimen-control-panel {
  background: #ffffff;
  border: 1px solid rgba(194, 131, 44, 0.2);
  border-radius: 16px;
  padding: 16px 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.qm-mode-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.qm-tab-btn {
  background: #faf7f0;
  border: 1px solid rgba(194, 131, 44, 0.25);
  color: #5c4d43;
  padding: 7px 16px;
  border-radius: 20px;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.qm-tab-btn.active {
  background: #2d5438;
  color: #ffffff;
  border-color: #2d5438;
  box-shadow: 0 2px 8px rgba(45, 84, 56, 0.2);
}

.qm-custom-time-form {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: #faf7f0;
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 14px;
  border: 1px solid rgba(194, 131, 44, 0.15);
}

.qm-form-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.qm-form-item label {
  font-size: 0.84rem;
  color: #5c4d43;
  font-weight: 600;
}

.qm-form-input {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(194, 131, 44, 0.3);
  font-size: 0.88rem;
  background: #ffffff;
}

.btn-qm-calc-submit {
  background: linear-gradient(135deg, #9f8469 0%, #826950 100%);
  color: #ffffff;
  border: none;
  padding: 7px 16px;
  border-radius: 10px;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(130, 105, 80, 0.22);
}

.qimen-summary-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(194, 131, 44, 0.12);
}

.qm-summary-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.86rem;
  color: #4a3e31;
}

.qm-badge-dun {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
}
.qm-badge-dun.yang { background: #fef7e0; color: #b06000; }
.qm-badge-dun.yin { background: #e8f0fe; color: #1a73e8; }

.qm-badge-star, .qm-badge-door {
  background: #f0f7f2;
  color: #137333;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
}

.btn-re-calc {
  margin-left: auto;
  background: #f7f3eb;
  border: 1px solid rgba(194, 131, 44, 0.3);
  color: #2d5438;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
}

.qimen-main-grid-layout, .yuelao-grid-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 22px;
}

.qimen-board-card, .qimen-detail-card, .yuelao-card {
  background: #ffffff;
  border: 1px solid rgba(194, 131, 44, 0.18);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.board-header h3 {
  margin: 0;
  font-size: 1.15rem;
  color: #2d5438;
}

.board-tip {
  font-size: 0.8rem;
  color: #8c8275;
  margin: 4px 0 16px;
}

.qimen-nine-grid {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  aspect-ratio: 1 / 1;
  max-width: 480px;
  margin: 0 auto;
}

.qimen-grid-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.qimen-cell {
  background: #faf7f0;
  border: 1.5px solid rgba(194, 131, 44, 0.2);
  border-radius: 12px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.2s ease;
}

.qimen-cell:hover {
  transform: translateY(-2px);
  border-color: #2d5438;
}

.qimen-cell.selected {
  border-color: #2d5438;
  background: #f0f7f2;
  box-shadow: 0 0 0 2px #2d5438;
}

.qimen-cell.cell-good {
  border-top: 3px solid #137333;
}
.qimen-cell.cell-bad {
  border-top: 3px solid #c94a29;
}

.qm-cell-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.qm-deity-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: #8c601c;
  background: rgba(194, 131, 44, 0.12);
  padding: 1px 5px;
  border-radius: 6px;
}

.qm-palace-title {
  font-size: 0.76rem;
  color: #5c4d43;
}

.qm-cell-center {
  text-align: center;
  margin: 4px 0;
}

.qm-star-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #1c3524;
  display: block;
}

.qm-stems-pair {
  font-size: 0.84rem;
  font-weight: 700;
  margin-top: 2px;
}
.t-stem { color: #b83a38; }
.d-stem { color: #2d5438; }
.stem-sep { color: #8c7d73; font-weight: 400; }

.qm-door-pill {
  display: block;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 8px;
}
.qm-door-pill.super-good, .qm-door-pill.good { background: #e6f4ea; color: #137333; }
.qm-door-pill.bad { background: #fce8e6; color: #c5221f; }

.qm-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(194, 131, 44, 0.15);
  margin-bottom: 14px;
}

.qm-palace-seal {
  background: #2d5438;
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 700;
}

.qm-detail-title h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
  color: #1c3524;
}
.qm-detail-title p {
  margin: 0;
  font-size: 0.82rem;
  color: #7c7267;
}

.qm-section-breakdown {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.qm-factor-row {
  font-size: 0.88rem;
  line-height: 1.5;
  color: #4a3e31;
}
.qm-f-label {
  color: #7c7267;
}

.qm-advice-card {
  background: #faf7f0;
  border-left: 4px solid #c2832c;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 18px;
}

.qm-advice-card h4 {
  margin: 0 0 6px;
  font-size: 0.92rem;
  color: #8c601c;
}

.qm-advice-text {
  font-size: 0.88rem;
  line-height: 1.7;
  color: #4a4036;
  margin: 0;
}

.btn-qm-consult, .btn-poem-consult, .btn-match-consult {
  width: 100%;
  background: #f7f3eb;
  border: 1px solid rgba(159, 132, 105, 0.35);
  color: #68533f;
  padding: 11px;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-qm-consult:hover, .btn-poem-consult:hover, .btn-match-consult:hover {
  background: linear-gradient(135deg, #9f8469 0%, #826950 100%);
  color: #ffffff;
}

/* ==========================================================================
   月老靈籤與八字合婚樣式
   ========================================================================== */
.yuelao-single-layout {
  max-width: 1120px;
  margin: 0 auto;
  width: 100%;
}

.card-header-yl {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(194, 131, 44, 0.15);
  padding-bottom: 10px;
}

.card-header-yl h3 {
  margin: 0;
  font-size: 1.12rem;
  color: #b83a38;
}

.card-header-yl .yl-icon {
  font-size: 1.4rem;
}

.oracle-pot-section {
  text-align: center;
  margin-bottom: 24px;
}

/* 月老舞台區 (無邊框、原尺寸居中呈現) */
.yuelao-video-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 20px;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  max-width: 100%;
  width: 100%;
}

.yuelao-video-player {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 16px;
  border: none !important;
  outline: none !important;
}

/* 覆蓋於影片正中央的按鈕浮層 (白色呼吸光暈動態) */
.yuelao-btn-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s ease;
  opacity: 1;
  pointer-events: auto;
  animation: yuelaoWhiteGlowBreath 3.4s ease-in-out infinite;
}

.yuelao-btn-overlay.faded-out {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(-50%, -50%) scale(0.92);
  animation: none !important;
}

/* 求籤按鈕：八角邊型、紅底白字、純粹誠心求籤 */
.btn-draw-poem {
  background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
  color: #ffffff !important;
  border: 2.5px solid rgba(255, 255, 255, 0.95);
  padding: 15px 46px;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  cursor: pointer;
  white-space: nowrap;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 白色光芒明暗明暗呼吸律動 (White Glow Breath) */
@keyframes yuelaoWhiteGlowBreath {
  0%, 100% {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.45)) drop-shadow(0 0 22px rgba(255, 255, 255, 0.25));
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    filter: drop-shadow(0 0 28px rgba(255, 255, 255, 0.98)) drop-shadow(0 0 54px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 85px rgba(255, 255, 255, 0.55));
    transform: translate(-50%, -50%) scale(1.03);
  }
}

.btn-draw-poem:hover:not(:disabled) {
  background: linear-gradient(135deg, #e53935 0%, #c62828 100%);
  transform: scale(1.03);
}

.btn-draw-poem:active:not(:disabled) {
  transform: scale(0.97);
}

.btn-draw-poem:disabled {
  opacity: 0.82;
  cursor: not-allowed;
}

/* 虔誠求籤說明文卡片 */
.yuelao-instruction-box {
  margin: 18px auto 0;
  max-width: 780px;
  padding: 16px 22px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(212, 175, 55, 0.32);
  border-radius: 16px;
  text-align: left;
  box-shadow: 0 4px 18px rgba(60, 45, 30, 0.05);
}

.yuelao-instruction-badge {
  text-align: center;
  font-size: 0.92rem;
  font-weight: 800;
  color: #a61e1e;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.yuelao-instruction-text {
  font-size: 0.88rem;
  line-height: 1.8;
  color: #4a3e31;
  margin: 0;
  text-wrap: pretty;
}

.yuelao-instruction-text strong {
  color: #b71c1c;
  font-weight: 700;
}

/* 籤詩開示結果卡片 */
.poem-result-card {
  background: #fffdfa;
  border: 1.5px solid rgba(184, 58, 56, 0.25);
  border-radius: 16px;
  padding: 24px;
  margin-top: 20px;
  box-shadow: 0 8px 30px rgba(60, 45, 30, 0.08);
}

/* 傳統宣紙籤詩排版 (最上方標題與右側品第、四排明體、放大300%、宣紙質感與真實陰影) */
.poem-scroll-paper {
  position: relative;
  margin: 16px auto 24px;
  max-width: 660px;
  padding: 8px;
  background: linear-gradient(135deg, #efe4cb 0%, #dfcfb2 100%);
  border-radius: 8px;
  box-shadow: 0 18px 45px rgba(60, 45, 30, 0.22), 0 4px 14px rgba(0, 0, 0, 0.1);
}

.poem-paper-inner {
  background: radial-gradient(circle at 50% 30%, #fffdf8 0%, #faf3e2 70%, #f4e7cd 100%);
  border: 2.5px solid #b83a38;
  outline: 1.5px solid rgba(194, 131, 44, 0.5);
  outline-offset: -7px;
  border-radius: 6px;
  padding: 22px 24px 28px;
  box-shadow: inset 0 0 35px rgba(184, 134, 60, 0.12);
}

/* 籤紙內部最上方標題列：左側/中間為【第幾籤】籤名，右側為吉凶品第印章 */
.poem-paper-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px 12px;
  border-bottom: 1.5px solid rgba(184, 58, 56, 0.35);
  margin-bottom: 20px;
}

.paper-title-heading {
  font-family: "Songti TC", "Noto Serif TC", "Source Han Serif TC", "MingLiU", "BiauKai", PMingLiU, serif;
  font-size: 1.32rem;
  font-weight: 800;
  color: #3b2014;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
}

/* 籤紙右側吉凶品第 (例如：中吉、上吉、上上吉) */
.paper-grade-stamp {
  background: linear-gradient(135deg, #c92a2a 0%, #991b1b 100%);
  color: #ffffff;
  font-family: "Songti TC", "Noto Serif TC", "MingLiU", serif;
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  padding: 4px 12px;
  border-radius: 4px;
  border: 1px solid #e5c158;
  box-shadow: 0 2px 6px rgba(184, 58, 56, 0.32);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.poem-text-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 auto;
  text-align: center;
  padding: 6px 0;
}

.poem-verse-line {
  font-family: "Songti TC", "Noto Serif TC", "Source Han Serif TC", "MingLiU", "BiauKai", PMingLiU, serif;
  font-size: 2.35rem; /* 放大 300% */
  font-weight: 800;
  color: #1e130c;
  letter-spacing: 0.22em;
  line-height: 1.85;
  text-shadow: 0 1px 2px rgba(60, 45, 30, 0.18);
  margin: 0;
}

@media (max-width: 768px) {
  .yuelao-video-wrap {
    width: 100%;
    max-width: 100%;
    margin-bottom: 16px;
  }
  .yuelao-video-player {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  .btn-draw-poem {
    padding: 12px 32px;
    font-size: 1.08rem;
  }
  .yuelao-instruction-box {
    padding: 14px 16px;
  }
  .yuelao-instruction-text {
    font-size: 0.84rem;
    line-height: 1.7;
  }
  .poem-result-card {
    padding: 16px 12px;
  }
  .poem-scroll-paper {
    max-width: 100%;
    padding: 6px;
    margin: 14px auto 18px;
  }
  .poem-paper-inner {
    padding: 20px 10px;
  }
  .poem-verse-line {
    font-size: 1.62rem; /* 手機版等比放大適合螢幕寬度 */
    letter-spacing: 0.14em;
    line-height: 1.75;
  }
}

/* 籤詩下方解析內容區 (與籤詩紙張同寬 660px 嚴格對齊，左右不超出) */
.poem-details-container {
  max-width: 660px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  text-align: left;
}

.poem-explanation {
  width: 100%;
  box-sizing: border-box;
  font-size: 0.9rem;
  line-height: 1.8;
  color: #4a3e31;
  margin-bottom: 14px;
}

.poem-explanation p {
  margin: 0 0 8px;
}
.poem-explanation p:last-child {
  margin-bottom: 0;
}

.poem-master-box {
  width: 100%;
  box-sizing: border-box;
  background: #f0f7f2;
  border-left: 3.5px solid #2d5438;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.86rem;
  color: #1c3524;
  margin-bottom: 16px;
}

/* 八字合婚表單與結果卡 */
.match-form {
  margin-bottom: 16px;
}

.form-row-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.form-item label {
  font-size: 0.84rem;
  color: #5c4d43;
  margin-bottom: 6px;
  display: block;
}

.yl-input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(194, 131, 44, 0.3);
  font-size: 0.9rem;
  box-sizing: border-box;
}

.btn-calc-match {
  width: 100%;
  background: linear-gradient(135deg, #9f8469 0%, #826950 100%);
  color: #ffffff;
  border: none;
  padding: 11px;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(130, 105, 80, 0.22);
}

.match-result-card {
  background: #fffdfa;
  border: 1px solid rgba(194, 131, 44, 0.2);
  border-radius: 14px;
  padding: 18px;
}

.match-score-badge {
  text-align: center;
  margin-bottom: 12px;
}

.score-num {
  font-size: 2.2rem;
  font-weight: 900;
  color: #b83a38;
}

.score-label {
  font-size: 0.86rem;
  color: #7c7267;
  display: block;
}

.match-zodiac-info {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: #faf7f0;
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 14px;
}

.zodiac-box {
  text-align: center;
  font-size: 0.86rem;
}
.zodiac-box span { font-size: 0.76rem; color: #8c7d73; display: block; }
.zodiac-box strong { color: #2c251e; font-size: 0.92rem; }
.zodiac-heart { font-size: 1.4rem; }

.match-desc-box {
  font-size: 0.86rem;
  line-height: 1.7;
  color: #4a3e31;
  margin-bottom: 16px;
}

.oracle-idle-tip, .match-idle-tip {
  text-align: center;
  padding: 24px 14px;
  font-size: 0.84rem;
  color: #8c8275;
}

/* 響應式手機排版 */
@media (max-width: 860px) {
  .qimen-header, .yuelao-header {
    padding: 10px 14px;
  }
  .qm-brand-title h2, .yl-brand-title h2 {
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .qm-brand-title p, .yl-brand-title p {
    display: none;
  }
  .btn-qm-ask-ai, .btn-yl-ask-ai {
    padding: 6px 12px;
    font-size: 0.8rem;
    white-space: nowrap;
  }
  .qimen-main-grid-layout, .yuelao-grid-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .qimen-content-wrap, .yuelao-content-wrap {
    padding: 14px 10px 48px;
  }
  .qimen-nine-grid {
    max-width: 350px;
    gap: 6px;
  }
  .qimen-grid-row {
    gap: 6px;
  }
  .qimen-cell {
    padding: 6px 4px;
    border-radius: 8px;
  }
  .qm-star-name {
    font-size: 0.8rem;
  }
  .qm-stems-pair {
    font-size: 0.76rem;
  }
  .guide-steps-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .qm-custom-time-form {
    flex-direction: column;
    align-items: stretch;
  }
  .btn-qm-calc-submit {
    width: 100%;
    text-align: center;
  }
}

/* ==========================================================================
   紫微斗數、子平八字、梅花易數 全螢幕專區視圖 (Full Subview Architecture)
   ========================================================================== */
.hexagram-view-section,
.ziwei-view-section,
.bazi-view-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100vh;
  background: var(--color-bg-primary, #fbf8f3);
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
}

.hexagram-header,
.ziwei-header,
.bazi-header {
  /* 版面尺寸與底色統一寫在檔案開頭的共用規則區塊，此處僅保留
     本頁特有的排版屬性，避免兩處各自維護造成再次跳動不一致。 */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.hexagram-header-inner,
.ziwei-header-inner,
.bazi-header-inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hex-header-left,
.zw-header-left,
.bz-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hex-brand-title h2,
.zw-brand-title h2,
.bz-brand-title h2 {
  font-size: 1.15rem;
  color: var(--color-green-dark, #1c3524);
  margin: 0;
  font-weight: 700;
}

.hex-brand-title p,
.zw-brand-title p,
.bz-brand-title p {
  font-size: 0.8rem;
  color: #7c7267;
  margin: 2px 0 0;
}

.hexagram-content-wrap,
.ziwei-content-wrap,
.bazi-content-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px 60px;
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.hexagram-inner-card,
.ziwei-inner-card,
.bazi-inner-card {
  background: #ffffff;
  border: 1px solid rgba(194, 131, 44, 0.2);
  border-radius: 16px;
  padding: 28px 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.hex-intro-banner {
  background: rgba(194, 131, 44, 0.08);
  border-left: 4px solid var(--color-green, #2d5438);
  padding: 12px 18px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.hex-intro-banner p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-coffee-dark, #3d2f23);
  font-weight: 500;
}

.hex-methods-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.hex-method-card {
  background: var(--color-bg-primary, #fbf8f3);
  border: 1px solid rgba(194, 131, 44, 0.16);
  border-radius: 12px;
  padding: 20px;
}

.hex-method-card h4 {
  margin: 0 0 10px 0;
  font-size: 0.96rem;
  color: var(--color-green-dark, #1c3524);
  font-weight: 650;
}

@media (max-width: 768px) {
  .hexagram-header,
  .ziwei-header,
  .bazi-header {
    padding: 12px 16px;
  }
  .hex-brand-title p,
  .zw-brand-title p,
  .bz-brand-title p {
    display: none;
  }
  .hexagram-content-wrap,
  .ziwei-content-wrap,
  .bazi-content-wrap {
    padding: 16px 12px 48px;
  }
  .hexagram-inner-card,
  .ziwei-inner-card,
  .bazi-inner-card {
    padding: 18px 16px;
  }
  .hex-methods-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ==========================================================================
   首頁進站片頭全螢幕動畫 (top.mp4 + logo_1.svg 停留 3 秒淡出)
   ========================================================================== */
.intro-splash-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background-color: #000000;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 1;
  transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.intro-splash-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* 影片：iPad / 電腦為橫向全螢幕滿版，手機為直立式全螢幕滿版 */
.intro-splash-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  background-color: #000000;
  opacity: 1;
  transition: opacity 1.0s ease-out;
}

.intro-splash-video.fade-out {
  opacity: 0;
}

/* 片尾正中間 LOGO：手機與電腦版皆由超大尺寸 (scale 4.0) 淡入並縮放到畫面正中間 (scale 1.0) */
.intro-splash-logo {
  position: relative;
  z-index: 10;
  max-width: 280px;
  width: 55vw;
  height: auto;
  opacity: 0;
  transform: scale(4.0);
  filter: blur(10px) drop-shadow(0 0 35px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 60px rgba(212, 175, 55, 0.8));
  transition: opacity 1.0s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 1.3s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.intro-splash-logo.visible {
  opacity: 1;
  transform: scale(1);
  filter: blur(0px) drop-shadow(0 0 25px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 45px rgba(212, 175, 55, 0.5));
}

.intro-splash-logo.fade-out {
  opacity: 0;
  transform: scale(0.94);
  filter: blur(4px);
  transition: opacity 1.0s ease-out, transform 1.0s ease-out, filter 1.0s ease-out;
}

/* 右上角優雅的控制按鈕群 (聲音開關 + 略過) */
.intro-controls-top {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
}

.intro-ctrl-btn {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
  opacity: 0.85;
}

.intro-ctrl-btn:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.7);
  border-color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 768px) {
  .intro-splash-logo {
    max-width: 200px;
    width: 60vw;
  }
  .intro-controls-top {
    top: 16px;
    right: 16px;
    gap: 8px;
  }
  .intro-ctrl-btn {
    font-size: 0.78rem;
    padding: 5px 10px;
  }
}

/* ===== 設定面板：API Key 申請教學（可展開） ===== */
.api-key-guide {
  margin-top: 8px;
  font-size: 0.86rem;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: rgba(45, 84, 56, 0.03);
  overflow: hidden;
}

.api-key-guide > summary {
  cursor: pointer;
  padding: 9px 12px;
  color: var(--color-green);
  font-weight: 600;
  list-style: none;
  user-select: none;
  transition: background 0.2s ease;
}

.api-key-guide > summary::-webkit-details-marker { display: none; }

/* 以自繪三角形取代瀏覽器預設樣式，確保各平台外觀一致 */
.api-key-guide > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 6px;
  transition: transform 0.2s ease;
}
.api-key-guide[open] > summary::before { transform: rotate(90deg); }
.api-key-guide > summary:hover { background: rgba(45, 84, 56, 0.06); }

.api-key-guide-body {
  padding: 4px 14px 14px;
  color: var(--color-coffee);
  line-height: 1.65;
}

.api-key-guide-body p { margin: 8px 0; }

.guide-steps {
  margin: 10px 0;
  padding-left: 20px;
}
.guide-steps li { margin-bottom: 7px; }

.api-key-guide-body a {
  color: var(--color-green);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.api-key-guide-body code {
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.92em;
}

.guide-note { color: var(--color-coffee-light); }

.guide-tip,
.guide-warn {
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.95em;
}
.guide-tip { background: rgba(194, 131, 44, 0.08); }
.guide-warn { background: rgba(0, 0, 0, 0.035); color: var(--color-coffee-light); }

/* ============================================================================
   全站互動動效：緩慢浮起 / 落下
   ----------------------------------------------------------------------------
   目標是「溫潤、從容」的體感，與站內典籍調性一致，
   而非一般網頁常見的快速彈跳。故：
   - 浮起 0.45s、落下 0.55s（離開略慢於進入，收尾更柔和）
   - 使用自訂 cubic-bezier 讓起步輕、收尾緩，避免生硬的等速位移
   - 位移幅度克制（2~4px），僅提供層次暗示，不干擾閱讀

   陰影同步加深並擴散，模擬物體離開紙面時的自然投影。
   ========================================================================== */

:root {
  --lift-ease-in: cubic-bezier(0.22, 0.61, 0.36, 1);
  --lift-ease-out: cubic-bezier(0.33, 0, 0.35, 1);
  --lift-dur-in: 0.45s;
  --lift-dur-out: 0.55s;

  --shadow-rest: 0 2px 8px rgba(60, 45, 30, 0.06), 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-lift: 0 14px 32px rgba(60, 45, 30, 0.13), 0 4px 10px rgba(0, 0, 0, 0.05);
  --shadow-lift-soft: 0 10px 24px rgba(60, 45, 30, 0.10), 0 3px 8px rgba(0, 0, 0, 0.04);
}

/* --- 主要卡片：文章、快捷入口、命盤區塊 --- */
.article-card,
.quick-card,
.hex-method-card,
.summary-card,
.reader-sidebar-card,
.reader-takeaway-card,
.reader-master-tips-card,
.ziwei-board-card,
.ziwei-inner-card,
.bazi-inner-card,
.bazi-luck-card,
.bazi-pillar-card,
.fengshui-compass-card {
  box-shadow: var(--shadow-rest);
  transition:
    transform var(--lift-dur-out) var(--lift-ease-out),
    box-shadow var(--lift-dur-out) var(--lift-ease-out);
  will-change: transform;
}

.article-card:hover,
.quick-card:hover,
.hex-method-card:hover,
.summary-card:hover,
.reader-sidebar-card:hover,
.reader-takeaway-card:hover,
.reader-master-tips-card:hover,
.ziwei-board-card:hover,
.ziwei-inner-card:hover,
.bazi-inner-card:hover,
.bazi-luck-card:hover,
.bazi-pillar-card:hover,
.fengshui-compass-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  transition:
    transform var(--lift-dur-in) var(--lift-ease-in),
    box-shadow var(--lift-dur-in) var(--lift-ease-in);
}

/* --- 列表項目：側邊欄文章、已存命盤 --- */
.sidebar-article-item,
.ziwei-saved-item,
.qm-summary-item {
  transition:
    transform var(--lift-dur-out) var(--lift-ease-out),
    box-shadow var(--lift-dur-out) var(--lift-ease-out),
    background-color var(--lift-dur-out) var(--lift-ease-out);
}

.sidebar-article-item:hover,
.ziwei-saved-item:hover,
.qm-summary-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift-soft);
  transition:
    transform var(--lift-dur-in) var(--lift-ease-in),
    box-shadow var(--lift-dur-in) var(--lift-ease-in),
    background-color var(--lift-dur-in) var(--lift-ease-in);
}

/* --- 建議氣泡與標籤 --- */
.btn-suggestion-chip,
.chip-btn,
.card-tag,
.hero-tag-chip {
  transition:
    transform var(--lift-dur-out) var(--lift-ease-out),
    box-shadow var(--lift-dur-out) var(--lift-ease-out),
    background-color var(--lift-dur-out) var(--lift-ease-out);
}

.btn-suggestion-chip:hover,
.chip-btn:hover,
.card-tag:hover,
.hero-tag-chip:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift-soft);
  transition:
    transform var(--lift-dur-in) var(--lift-ease-in),
    box-shadow var(--lift-dur-in) var(--lift-ease-in),
    background-color var(--lift-dur-in) var(--lift-ease-in);
}

/* --- 圖片：封面與縮圖 ---
   圖片以「輕微放大」取代位移，避免在固定版位中推擠周圍文字。
   需由外層容器 overflow:hidden 裁切，故一併確保裁切設定。 */
.card-cover-wrap,
.sidebar-item-thumb,
.reader-article-cover-img {
  overflow: hidden;
}

.card-cover-img,
.sidebar-item-thumb img,
.reader-article-cover-img {
  transition: transform 0.7s var(--lift-ease-out);
  will-change: transform;
}

.article-card:hover .card-cover-img,
.sidebar-article-item:hover .sidebar-item-thumb img,
.reader-article-cover-img:hover {
  transform: scale(1.045);
  transition: transform 0.7s var(--lift-ease-in);
}

/* --- 表格：命盤十二宮、文章內表格 --- */
.ziwei-cell {
  transition:
    transform var(--lift-dur-out) var(--lift-ease-out),
    box-shadow var(--lift-dur-out) var(--lift-ease-out),
    background-color var(--lift-dur-out) var(--lift-ease-out);
}

.ziwei-cell:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift-soft);
  /* 浮起的格子需壓過相鄰格線，否則陰影會被切斷 */
  position: relative;
  z-index: 2;
  transition:
    transform var(--lift-dur-in) var(--lift-ease-in),
    box-shadow var(--lift-dur-in) var(--lift-ease-in),
    background-color var(--lift-dur-in) var(--lift-ease-in);
}

/* 文章內文表格：整體浮起，並讓資料列有可追讀的高亮 */
.article-content table,
.reader-main-card table {
  box-shadow: var(--shadow-rest);
  transition:
    transform var(--lift-dur-out) var(--lift-ease-out),
    box-shadow var(--lift-dur-out) var(--lift-ease-out);
}

.article-content table:hover,
.reader-main-card table:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  transition:
    transform var(--lift-dur-in) var(--lift-ease-in),
    box-shadow var(--lift-dur-in) var(--lift-ease-in);
}

.article-content tbody tr,
.reader-main-card tbody tr {
  transition: background-color var(--lift-dur-out) var(--lift-ease-out);
}

.article-content tbody tr:hover,
.reader-main-card tbody tr:hover {
  background-color: rgba(45, 84, 56, 0.045);
  transition: background-color 0.25s var(--lift-ease-in);
}

/* --- 觸控裝置：停用懸停效果 ---
   觸控螢幕沒有真正的 hover，樣式會在點擊後「黏住」不還原，
   反而造成困惑。故僅在支援滑鼠指標的裝置上啟用上述效果。 */
@media (hover: none) {
  .article-card:hover,
  .quick-card:hover,
  .hex-method-card:hover,
  .summary-card:hover,
  .reader-sidebar-card:hover,
  .reader-takeaway-card:hover,
  .reader-master-tips-card:hover,
  .ziwei-board-card:hover,
  .ziwei-inner-card:hover,
  .bazi-inner-card:hover,
  .bazi-luck-card:hover,
  .bazi-pillar-card:hover,
  .fengshui-compass-card:hover,
  .sidebar-article-item:hover,
  .ziwei-saved-item:hover,
  .qm-summary-item:hover,
  .btn-suggestion-chip:hover,
  .chip-btn:hover,
  .card-tag:hover,
  .hero-tag-chip:hover,
  .ziwei-cell:hover,
  .article-content table:hover,
  .reader-main-card table:hover {
    transform: none;
  }

  .article-card:hover .card-cover-img,
  .sidebar-article-item:hover .sidebar-item-thumb img,
  .reader-article-cover-img:hover {
    transform: none;
  }
}

/* --- 尊重使用者的減少動態偏好設定 ---
   前庭功能敏感者可能因動態效果不適，作業系統層級已提供此偏好，
   網站應予尊重：保留陰影層次，但移除所有位移與縮放。 */
@media (prefers-reduced-motion: reduce) {
  .article-card,
  .quick-card,
  .hex-method-card,
  .summary-card,
  .reader-sidebar-card,
  .reader-takeaway-card,
  .reader-master-tips-card,
  .ziwei-board-card,
  .ziwei-inner-card,
  .bazi-inner-card,
  .bazi-luck-card,
  .bazi-pillar-card,
  .fengshui-compass-card,
  .sidebar-article-item,
  .ziwei-saved-item,
  .qm-summary-item,
  .btn-suggestion-chip,
  .chip-btn,
  .card-tag,
  .hero-tag-chip,
  .ziwei-cell,
  .card-cover-img,
  .sidebar-item-thumb img,
  .reader-article-cover-img,
  .article-content table,
  .reader-main-card table {
    transition: box-shadow 0.2s ease, background-color 0.2s ease;
  }

  .article-card:hover,
  .quick-card:hover,
  .hex-method-card:hover,
  .summary-card:hover,
  .reader-sidebar-card:hover,
  .reader-takeaway-card:hover,
  .reader-master-tips-card:hover,
  .ziwei-board-card:hover,
  .ziwei-inner-card:hover,
  .bazi-inner-card:hover,
  .bazi-luck-card:hover,
  .bazi-pillar-card:hover,
  .fengshui-compass-card:hover,
  .sidebar-article-item:hover,
  .ziwei-saved-item:hover,
  .qm-summary-item:hover,
  .btn-suggestion-chip:hover,
  .chip-btn:hover,
  .card-tag:hover,
  .hero-tag-chip:hover,
  .ziwei-cell:hover,
  .article-content table:hover,
  .reader-main-card table:hover,
  .article-card:hover .card-cover-img,
  .sidebar-article-item:hover .sidebar-item-thumb img,
  .reader-article-cover-img:hover {
    transform: none;
  }
}

/* ============================================================================
   按鈕動效：緩慢浮起 / 落下
   ----------------------------------------------------------------------------
   原 .btn-icon 為 transition: all 0.2s 搭配 translateY(-1px)，
   速度偏快、位移幅度僅 1px 且無陰影變化，浮起感不明顯。
   此處統一改用與卡片相同的節奏（0.45s 進、0.55s 出），
   並加大位移至 3px、同步加深陰影，讓抬起與落下的過程清楚可感。

   ⚠️ 覆寫順序：本段置於樣式表末端，用以覆蓋前述較快的 transition 設定，
      勿移至檔案前段，否則會被原規則蓋掉。
   ========================================================================== */

.btn-icon,
.btn-sidebar-toggle,
.btn-attach,
.btn-font-size,
.btn-articles-nav,
.btn-tool-share,
.btn-bubble-action,
.btn-qm-tag,
.btn-guide-toggle {
  transition:
    transform var(--lift-dur-out) var(--lift-ease-out),
    box-shadow var(--lift-dur-out) var(--lift-ease-out),
    background-color var(--lift-dur-out) var(--lift-ease-out),
    border-color var(--lift-dur-out) var(--lift-ease-out),
    color var(--lift-dur-out) var(--lift-ease-out);
  will-change: transform;
}

.btn-icon:hover,
.btn-sidebar-toggle:hover,
.btn-attach:hover,
.btn-font-size:hover,
.btn-articles-nav:hover,
.btn-tool-share:hover,
.btn-bubble-action:hover,
.btn-qm-tag:hover,
.btn-guide-toggle:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift-soft);
  transition:
    transform var(--lift-dur-in) var(--lift-ease-in),
    box-shadow var(--lift-dur-in) var(--lift-ease-in),
    background-color var(--lift-dur-in) var(--lift-ease-in),
    border-color var(--lift-dur-in) var(--lift-ease-in),
    color var(--lift-dur-in) var(--lift-ease-in);
}

/* 主要操作按鈕：浮起幅度略大，強化主次層級 */
.btn-new-chat,
.btn-modal,
.btn-send,
.btn-line-official,
.btn-download-chat,
.btn-ask-master,
.btn-articles-ask-ai,
.btn-fs-ask-ai,
.btn-qm-ask-ai,
.btn-detail-ask,
.btn-draw-poem,
.btn-qm-consult,
.btn-qm-calc-submit,
.btn-calc-match,
.btn-re-calc,
.btn-read-hero-poster,
.btn-back-to-chat,
.btn-page-back-to-list,
.btn-return-list-bottom,
.btn-scroll-top-floating {
  transition:
    transform var(--lift-dur-out) var(--lift-ease-out),
    box-shadow var(--lift-dur-out) var(--lift-ease-out),
    background-color var(--lift-dur-out) var(--lift-ease-out),
    border-color var(--lift-dur-out) var(--lift-ease-out),
    color var(--lift-dur-out) var(--lift-ease-out);
  will-change: transform;
}

.btn-new-chat:hover,
.btn-modal:hover,
.btn-send:hover,
.btn-line-official:hover,
.btn-download-chat:hover,
.btn-ask-master:hover,
.btn-articles-ask-ai:hover,
.btn-fs-ask-ai:hover,
.btn-qm-ask-ai:hover,
.btn-detail-ask:hover,
.btn-draw-poem:hover,
.btn-qm-consult:hover,
.btn-qm-calc-submit:hover,
.btn-calc-match:hover,
.btn-re-calc:hover,
.btn-read-hero-poster:hover,
.btn-back-to-chat:hover,
.btn-page-back-to-list:hover,
.btn-return-list-bottom:hover,
.btn-scroll-top-floating:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  transition:
    transform var(--lift-dur-in) var(--lift-ease-in),
    box-shadow var(--lift-dur-in) var(--lift-ease-in),
    background-color var(--lift-dur-in) var(--lift-ease-in),
    border-color var(--lift-dur-in) var(--lift-ease-in),
    color var(--lift-dur-in) var(--lift-ease-in);
}

/* 按壓回饋維持即時：點擊需要立刻有反應，緩慢的按壓會讓人以為沒按到。
   此處刻意不套用上方的緩慢節奏，並以較高的選擇器權重確保不被覆蓋。 */
.btn-icon:active,
.btn-sidebar-toggle:active,
.btn-attach:active,
.btn-font-size:active,
.btn-articles-nav:active,
.btn-tool-share:active,
.btn-bubble-action:active,
.btn-qm-tag:active,
.btn-guide-toggle:active,
.btn-new-chat:active,
.btn-modal:active,
.btn-send:active,
.btn-line-official:active,
.btn-download-chat:active,
.btn-ask-master:active,
.btn-articles-ask-ai:active,
.btn-fs-ask-ai:active,
.btn-qm-ask-ai:active,
.btn-detail-ask:active,
.btn-draw-poem:active,
.btn-qm-consult:active,
.btn-qm-calc-submit:active,
.btn-calc-match:active,
.btn-re-calc:active,
.btn-read-hero-poster:active,
.btn-back-to-chat:active,
.btn-page-back-to-list:active,
.btn-return-list-bottom:active,
.btn-scroll-top-floating:active {
  transform: translateY(-1px) scale(0.96);
  transition: transform 90ms ease-out;
}

/* 觸控裝置：停用懸停位移（無真正 hover，效果會黏住不還原） */
@media (hover: none) {
  .btn-icon:hover,
  .btn-sidebar-toggle:hover,
  .btn-attach:hover,
  .btn-font-size:hover,
  .btn-articles-nav:hover,
  .btn-tool-share:hover,
  .btn-bubble-action:hover,
  .btn-qm-tag:hover,
  .btn-guide-toggle:hover,
  .btn-new-chat:hover,
  .btn-modal:hover,
  .btn-send:hover,
  .btn-line-official:hover,
  .btn-download-chat:hover,
  .btn-ask-master:hover,
  .btn-articles-ask-ai:hover,
  .btn-fs-ask-ai:hover,
  .btn-qm-ask-ai:hover,
  .btn-detail-ask:hover,
  .btn-draw-poem:hover,
  .btn-qm-consult:hover,
  .btn-qm-calc-submit:hover,
  .btn-calc-match:hover,
  .btn-re-calc:hover,
  .btn-read-hero-poster:hover,
  .btn-back-to-chat:hover,
  .btn-page-back-to-list:hover,
  .btn-return-list-bottom:hover,
  .btn-scroll-top-floating:hover {
    transform: none;
  }
}

/* 尊重系統的減少動態偏好：保留陰影與配色變化，移除位移 */
@media (prefers-reduced-motion: reduce) {
  .btn-icon,
  .btn-sidebar-toggle,
  .btn-attach,
  .btn-font-size,
  .btn-articles-nav,
  .btn-tool-share,
  .btn-bubble-action,
  .btn-qm-tag,
  .btn-guide-toggle,
  .btn-new-chat,
  .btn-modal,
  .btn-send,
  .btn-line-official,
  .btn-download-chat,
  .btn-ask-master,
  .btn-articles-ask-ai,
  .btn-fs-ask-ai,
  .btn-qm-ask-ai,
  .btn-detail-ask,
  .btn-draw-poem,
  .btn-qm-consult,
  .btn-qm-calc-submit,
  .btn-calc-match,
  .btn-re-calc,
  .btn-read-hero-poster,
  .btn-back-to-chat,
  .btn-page-back-to-list,
  .btn-return-list-bottom,
  .btn-scroll-top-floating {
    transition: box-shadow 0.2s ease, background-color 0.2s ease,
                border-color 0.2s ease, color 0.2s ease;
  }

  .btn-icon:hover, .btn-sidebar-toggle:hover, .btn-attach:hover,
  .btn-font-size:hover, .btn-articles-nav:hover, .btn-tool-share:hover,
  .btn-bubble-action:hover, .btn-qm-tag:hover, .btn-guide-toggle:hover,
  .btn-new-chat:hover, .btn-modal:hover, .btn-send:hover,
  .btn-line-official:hover, .btn-download-chat:hover, .btn-ask-master:hover,
  .btn-articles-ask-ai:hover, .btn-fs-ask-ai:hover, .btn-qm-ask-ai:hover,
  .btn-detail-ask:hover, .btn-draw-poem:hover, .btn-qm-consult:hover,
  .btn-qm-calc-submit:hover, .btn-calc-match:hover, .btn-re-calc:hover,
  .btn-read-hero-poster:hover, .btn-back-to-chat:hover,
  .btn-page-back-to-list:hover, .btn-return-list-bottom:hover,
  .btn-scroll-top-floating:hover {
    transform: none;
  }
}

/* ===== 紫微命盤：格局判定結果 ===== */
.ziwei-patterns-card {
  margin-top: 18px;
  padding: 18px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  box-shadow: var(--shadow-rest);
}

.patterns-card-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-light);
}

.patterns-card-title {
  font-size: 1rem;
  font-weight: 750;
  color: var(--color-coffee-dark);
  letter-spacing: 0.5px;
}

.patterns-card-count {
  font-size: 0.82rem;
  color: var(--color-coffee-muted);
}

.patterns-list {
  display: flex;
  flex-direction: column;
}

/* 各格局之間以細線分隔，末項不加線 */
.pattern-item {
  padding: 14px 0;
  border-bottom: 1px dashed var(--border-light);
}
.pattern-item:last-child { border-bottom: none; }

.pattern-name {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--color-green);
  letter-spacing: 1px;
  margin-bottom: 5px;
}

/* 成立條件：說明此格局由哪些星曜在何處構成，便於使用者自行核對 */
.pattern-condition {
  font-size: 0.85rem;
  color: var(--color-coffee-light);
  margin-bottom: 7px;
  padding-left: 10px;
  border-left: 2px solid var(--color-amber-gold);
  line-height: 1.5;
}

.pattern-meaning {
  font-size: 0.9rem;
  color: var(--color-coffee);
  line-height: 1.7;
}

.patterns-card-note {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
  font-size: 0.8rem;
  color: var(--color-coffee-muted);
  line-height: 1.55;
}

@media (max-width: 600px) {
  .ziwei-patterns-card { padding: 14px 15px; }
  .pattern-name { font-size: 0.98rem; }
  .pattern-meaning { font-size: 0.87rem; }
}

/* ===== 紫微命盤：體質傾向 ===== */
.ziwei-health-card {
  margin-top: 14px;
  padding: 18px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  box-shadow: var(--shadow-rest);
}

.health-row {
  padding: 11px 0;
  border-bottom: 1px dashed var(--border-light);
}
.health-row:last-child { border-bottom: none; }

.health-label {
  font-size: 0.78rem;
  color: var(--color-coffee-muted);
  letter-spacing: 1px;
  margin-bottom: 3px;
}

.health-value {
  font-size: 0.94rem;
  font-weight: 650;
  color: var(--color-green);
  line-height: 1.6;
}

/* 補充說明：解釋該對應所指的具體面向 */
.health-note {
  margin-top: 3px;
  font-size: 0.84rem;
  color: var(--color-coffee-light);
  line-height: 1.6;
}

@media (max-width: 600px) {
  .ziwei-health-card { padding: 14px 15px; }
  .health-value { font-size: 0.9rem; }
}

/* ===== 紫微命盤：性情類型（沿用體質卡片的版式） ===== */
.ziwei-temper-card {
  margin-top: 14px;
  padding: 18px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  box-shadow: var(--shadow-rest);
}

@media (max-width: 600px) {
  .ziwei-temper-card { padding: 14px 15px; }
}

/* ===== 核心六宮位 (第 1 階) ===== */
.core-palaces-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.core-palace-item {
  background: var(--bg-primary, #faf8f5);
  border: 1px solid var(--border-light, #e4ddd3);
  border-radius: 12px;
  padding: 12px 14px;
  transition: all 0.2s ease;
}

.core-palace-item:hover {
  border-color: var(--color-amber-gold, #c29b38);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.04));
}

.core-palace-item.has-tip {
  cursor: pointer;
}

.core-palace-item.has-tip .core-palace-title {
  border-bottom: 1px dotted var(--color-amber-gold, #c29b38);
}

.core-palace-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.core-palace-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-coffee-dark, #2c2523);
  display: flex;
  align-items: center;
  gap: 6px;
}

.core-palace-branch {
  font-size: 0.76rem;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-light, #e4ddd3);
  color: var(--color-coffee-light, #7c7069);
}

.core-palace-stars {
  font-size: 0.82rem;
  color: var(--color-green, #2d5a27);
  font-weight: 600;
  margin-bottom: 5px;
}

.core-palace-desc {
  font-size: 0.84rem;
  color: var(--color-coffee, #4a3e3d);
  line-height: 1.6;
}

/* ===== 格局標籤與分層條件 (第 2 階) ===== */
.pattern-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.pattern-badge {
  font-size: 0.74rem;
  font-weight: 650;
  padding: 2px 8px;
  border-radius: 12px;
  letter-spacing: 0.5px;
}

.badge-rich {
  background: #fdf3d7;
  color: #92690d;
  border: 1px solid #ecc94b;
}

.badge-noble {
  background: #e6f4ea;
  color: #137333;
  border: 1px solid #a8dab5;
}

.badge-power {
  background: #e8f0fe;
  color: #1967d2;
  border: 1px solid #aecbfa;
}

.badge-discipline {
  background: #fce8e6;
  color: #c5221f;
  border: 1px solid #f6aea9;
}

.pattern-conditions-tree {
  margin: 6px 0 8px;
  padding: 8px 10px;
  background: var(--bg-primary, #fcfbf9);
  border-radius: 8px;
  border-left: 3px solid var(--color-amber-gold, #c29b38);
  font-size: 0.82rem;
  line-height: 1.55;
}

.cond-item {
  margin-bottom: 3px;
}
.cond-item:last-child { margin-bottom: 0; }

.cond-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  margin-right: 5px;
}

.cond-req { background: #e8f0fe; color: #1a73e8; }
.cond-bonus { background: #e6f4ea; color: #188038; }
.cond-break { background: #fce8e6; color: #d93025; }

/* ===== 陽宅名位速算器 (第 3.1 階) ===== */
.dimai-selector-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  background: var(--bg-primary, #fcfbf9);
  border-radius: 10px;
  border: 1px solid var(--border-light, #e4ddd3);
}

@media (max-width: 600px) {
  .dimai-selector-box { grid-template-columns: 1fr; }
}

.dimai-select-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dimai-select-group label {
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--color-coffee-dark, #2c2523);
}

.dimai-result-box {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border-light, #e4ddd3);
  background: var(--bg-card, #ffffff);
}

.dimai-hex-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.86rem;
  font-weight: 700;
  background: #fdf3d7;
  color: #795548;
  border: 1px solid #ecc94b;
  margin-bottom: 8px;
}

.dimai-meaning-title {
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--color-green, #2d5a27);
  margin-bottom: 4px;
}

.dimai-meaning-desc {
  font-size: 0.86rem;
  color: var(--color-coffee, #4a3e3d);
  line-height: 1.65;
  margin-bottom: 8px;
}

.dimai-alert-box {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  line-height: 1.5;
  margin-top: 8px;
}

.dimai-alert-good {
  background: #edf7ed;
  border: 1px solid #c8e6c9;
  color: #1e4620;
}

.dimai-alert-warn {
  background: #fff8e1;
  border: 1px solid #ffe082;
  color: #6d4c41;
}

/* ===== 夫妻宮婚配 (第 3.2 階) ===== */
.marriage-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.marriage-section {
  padding: 10px 12px;
  background: var(--bg-primary, #fcfbf9);
  border-radius: 10px;
  border: 1px solid var(--border-light, #e4ddd3);
}

.marriage-section-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-coffee-muted, #7c7069);
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.marriage-section-content {
  font-size: 0.88rem;
  color: var(--color-coffee, #4a3e3d);
  line-height: 1.6;
}

/* ===== 五行臟腑調養六大自察 (第 3.3 階) ===== */
.health-balance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.health-balance-item {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg-primary, #fcfbf9);
  border: 1px solid var(--border-light, #e4ddd3);
}

.health-balance-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-green, #2d5a27);
  margin-bottom: 2px;
}

.health-balance-target {
  font-size: 0.78rem;
  color: var(--color-coffee, #4a3e3d);
  line-height: 1.45;
}

/* ==========================================================================
   師解惑 · 手寫疏文專區 (Shuwen Module) 樣式
   延續極簡禪意、宣紙墨香、雙軌自印與委託手寫之高質感呈現
   ========================================================================== */

.shuwen-view-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100vh;
  background: var(--bg-app, #fcfaf6);
  overflow: hidden;
}

.shuwen-header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: var(--bg-card, rgba(255, 255, 255, 0.88));
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-light, rgba(66, 53, 43, 0.11));
  padding: 10px 20px;
  box-sizing: border-box;
  z-index: 10;
}

.shuwen-header-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sw-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sw-brand-title h2 {
  font-family: "Songti TC", "Noto Serif TC", serif;
  font-size: 1.18rem;
  color: var(--color-coffee-dark, #241c16);
  margin: 0;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.sw-brand-title p {
  font-size: 0.8rem;
  color: var(--color-coffee-muted, #968679);
  margin: 2px 0 0;
}

.shuwen-content-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 24px 24px 60px;
  max-width: 1560px; /* 原 1200px 放寬 30% 至 1560px */
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* ===== 老師介紹與開筆理念形象卡 (Hero Banner) ===== */
.sw-master-hero-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 28px 32px;
  margin-bottom: 24px;
  box-shadow: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.sw-master-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: none;
  pointer-events: none;
  z-index: 1;
}

.sw-master-content {
  position: relative;
  z-index: 2;
}

.sw-master-art {
  position: absolute;
  top: -11%;
  right: -1%;
  width: 45%;
  height: 86%;
  object-fit: contain;
  object-position: right center;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  filter: drop-shadow(0 12px 18px rgba(72, 51, 27, 0.08));
}

.sw-master-badge,
.sw-master-title,
.sw-master-creed {
  max-width: calc(100% - clamp(290px, 31vw, 445px));
}

.sw-master-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(194, 131, 44, 0.1);
  color: #9f6c24;
  padding: 4px 12px;
  border-radius: var(--radius-pill, 9999px);
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 12px;
}

.sw-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c2832c;
}

.sw-master-title {
  font-family: "Songti TC", "Noto Serif TC", serif;
  font-size: 1.45rem;
  color: var(--color-coffee-dark, #241c16);
  margin: 0 0 10px;
  letter-spacing: 0.5px;
}

.sw-master-creed {
  font-size: 0.94rem;
  color: var(--color-coffee, #3d3027);
  line-height: 1.7;
  max-width: calc(100% - clamp(360px, 38vw, 560px));
  margin: 0 0 20px;
}

.sw-master-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  border-top: 1px solid rgba(66, 53, 43, 0.08);
  padding-top: 18px;
  position: relative;
  z-index: 3;
}

.sw-hl-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sw-hl-icon {
  font-size: 1.4rem;
  background: #ffffff;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(66, 53, 43, 0.06);
}

.sw-hl-item h4 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-coffee-dark, #241c16);
  margin: 0 0 2px;
}

.sw-hl-item p {
  font-size: 0.78rem;
  color: var(--color-coffee-muted, #968679);
  margin: 0;
}

/* ===== 疏文類別切換 Bar ===== */
.sw-categories-bar {
  margin-bottom: 20px;
}

.sw-cat-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.sw-cat-tab {
  background: #ffffff;
  border: 1px solid var(--border-light, rgba(66, 53, 43, 0.11));
  border-radius: 14px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s var(--spring-easing);
}

.sw-cat-tab:hover {
  border-color: var(--color-amber-gold, #c2832c);
  transform: translateY(-1px);
}

.sw-cat-tab.active {
  background: linear-gradient(135deg, #9f8469 0%, #826950 100%);
  color: #ffffff;
  border-color: #826950;
  box-shadow: 0 3px 10px rgba(130, 105, 80, 0.2);
}

.sw-cat-badge {
  font-size: 0.74rem;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(194, 131, 44, 0.12);
  color: #9f6c24;
}

.sw-cat-tab.active .sw-cat-badge {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.sw-cat-text {
  font-size: 0.88rem;
  font-weight: 500;
}

/* ===== 雙軌互動工作區佈局 ===== */
.sw-generator-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 20px;
  margin-bottom: 36px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.sw-form-panel, .sw-preview-panel {
  background: #ffffff;
  border: 1px solid var(--border-light, rgba(66, 53, 43, 0.11));
  border-radius: var(--radius-md, 22px);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.sw-panel-header, .sw-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(66, 53, 43, 0.08);
  padding-bottom: 14px;
  margin-bottom: 18px;
  gap: 12px;
}

.sw-preview-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-sw-preview-fit {
  background: rgba(194, 131, 44, 0.09);
  border: 1px solid rgba(194, 131, 44, 0.28);
  color: #9f6c24;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-pill, 9999px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s var(--spring-easing);
  white-space: nowrap;
}

.btn-sw-preview-fit:hover {
  background: rgba(194, 131, 44, 0.18);
  border-color: #c2832c;
  transform: translateY(-1px);
}

.btn-sw-preview-fit.active {
  background: #c2832c;
  color: #ffffff;
  border-color: #a86e1f;
}

.btn-sw-preview-fit svg {
  stroke: currentColor;
}

.btn-sw-preview-fullscreen {
  background: rgba(194, 131, 44, 0.1);
  border: 1px solid rgba(194, 131, 44, 0.3);
  color: #8c5b1c;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: var(--radius-pill, 9999px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s var(--spring-easing);
  white-space: nowrap;
}

.btn-sw-preview-fullscreen:hover {
  background: #c2832c;
  color: #ffffff;
  border-color: #a86e1f;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(194, 131, 44, 0.25);
}

.btn-sw-preview-fullscreen svg {
  stroke: currentColor;
}

.sw-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Songti TC", "Noto Serif TC", serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-coffee-dark, #241c16);
  white-space: nowrap;
  flex-shrink: 0;
}

.sw-gold-icon {
  font-size: 1.15rem;
}

.sw-panel-subtitle, .sw-paper-hint {
  font-size: 0.78rem;
  color: var(--color-coffee-muted, #968679);
}

.sw-form-group {
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sw-form-group label {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--color-coffee, #3d3027);
}

.sw-form-row {
  display: flex;
  gap: 12px;
}

.flex-1 {
  flex: 1;
}

/* 常用情境切換藥丸標籤 (單人/夫妻/闔家/公司) */
.sw-preset-group {
  margin-bottom: 14px;
}

.sw-preset-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.btn-sw-preset {
  background: rgba(194, 131, 44, 0.08);
  border: 1px solid rgba(194, 131, 44, 0.25);
  color: #8c6023;
  padding: 5px 12px;
  border-radius: var(--radius-pill, 9999px);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s var(--spring-easing);
}

.btn-sw-preset:hover {
  background: rgba(194, 131, 44, 0.16);
  border-color: #c2832c;
  transform: translateY(-1px);
}

.btn-sw-preset.active {
  background: #c2832c;
  color: #ffffff;
  border-color: #a86e1f;
  box-shadow: 0 2px 8px rgba(194, 131, 44, 0.25);
}

/* 多人信士卡片列表 */
.sw-devotees-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.sw-devotee-card {
  background: #fdfbf7;
  border: 1px solid rgba(194, 131, 44, 0.22);
  border-radius: 14px;
  padding: 12px 14px;
  transition: all 0.2s ease;
  position: relative;
}

.sw-devotee-card:hover {
  border-color: rgba(194, 131, 44, 0.38);
  background: #fffdfa;
}

.sw-devotee-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.sw-devotee-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #9f6c24;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-sw-remove-devotee {
  background: transparent;
  border: none;
  color: #b83a38;
  font-size: 0.78rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0.75;
  transition: all 0.2s ease;
}

.btn-sw-remove-devotee:hover {
  opacity: 1;
  background: rgba(184, 58, 56, 0.08);
}

.sw-devotee-inputs-grid {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 10px;
}

.sw-devotee-company-grid {
  display: grid;
  grid-template-columns: 140px 1fr 1fr;
  gap: 10px;
}

@media (max-width: 640px) {
  .sw-devotee-inputs-grid,
  .sw-devotee-company-grid {
    grid-template-columns: 1fr;
  }
}

.btn-sw-add-devotee {
  background: #ffffff;
  border: 1.5px dashed rgba(194, 131, 44, 0.4);
  color: #9f6c24;
  font-size: 0.84rem;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s var(--spring-easing);
  width: 100%;
}

.btn-sw-add-devotee:hover {
  background: #fff9ee;
  border-color: #c2832c;
  border-style: solid;
  transform: translateY(-1px);
}

/* 年月日干支選擇器 (分成兩排：年份置頂全寬，月日時分列第二排，避免寬度過長遮擋右側疏文) */
.sw-bazi-selects-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.sw-bazi-selects-grid #sw-birth-year-select {
  grid-column: 1 / -1;
  width: 100%;
}

@media (max-width: 520px) {
  .sw-bazi-selects-grid {
    grid-template-columns: 1fr 1fr;
  }
  .sw-bazi-selects-grid #sw-birth-year-select {
    grid-column: 1 / -1;
  }
  .sw-bazi-selects-grid #sw-birth-hour-select {
    grid-column: 1 / -1;
  }
}

.sw-ganzhi-result-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #8c6023;
  background: rgba(194, 131, 44, 0.08);
  border: 1px solid rgba(194, 131, 44, 0.22);
  border-radius: 8px;
  padding: 5px 10px;
  margin-top: 6px;
}

.sw-ganzhi-result-badge strong {
  color: #7b2622;
  font-family: "Songti TC", "Noto Serif TC", serif;
}

/* 地址下拉組合 (縣市 + 鄉鎮市區 + 詳細路段) */
.sw-address-selects-grid {
  display: grid;
  grid-template-columns: 130px 140px 1fr;
  gap: 8px;
  width: 100%;
}

@media (max-width: 680px) {
  .sw-address-selects-grid {
    grid-template-columns: 1fr 1fr;
  }
  .sw-address-selects-grid input {
    grid-column: span 2;
  }
}

.sw-address-preview-text {
  font-size: 0.78rem;
  color: var(--color-coffee-muted, #968679);
  margin-top: 4px;
}

.sw-address-preview-text strong {
  color: var(--color-coffee-dark, #241c16);
}

/* 祈奏良辰吉日（天運歲次）控制卡片 */
.sw-ritual-date-box {
  background: rgba(194, 131, 44, 0.04);
  border: 1px solid rgba(194, 131, 44, 0.22);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  transition: all 0.25s ease;
}

.sw-ritual-date-box.is-active {
  background: rgba(194, 131, 44, 0.08);
  border-color: rgba(194, 131, 44, 0.45);
  box-shadow: 0 2px 10px rgba(194, 131, 44, 0.08);
}

.sw-ritual-date-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.sw-ritual-date-header label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--color-coffee, #3d3027);
  margin: 0;
}

.sw-date-mode-toggle {
  display: inline-flex;
  align-items: center;
}

.sw-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #9f6c24;
  cursor: pointer;
  user-select: none;
}

.sw-checkbox-label input[type="checkbox"] {
  accent-color: #c2832c;
  cursor: pointer;
  width: 15px;
  height: 15px;
}

.sw-date-inputs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}

@media (max-width: 640px) {
  .sw-date-inputs-grid {
    grid-template-columns: 1fr;
  }
}

.sw-date-preview-badge {
  margin-top: 10px;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px dashed rgba(194, 131, 44, 0.4);
  border-radius: 8px;
  font-size: 0.82rem;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.preview-badge-label {
  font-size: 0.74rem;
  color: #9f6c24;
  font-weight: 600;
}

.preview-badge-val {
  font-family: 'Songti TC', 'Noto Serif TC', 'SimSun', serif;
  font-size: 0.98rem;
  color: #7a1d1d;
  font-weight: 800;
  letter-spacing: 1px;
}

.sw-date-fallback-hint {
  font-size: 0.76rem;
  color: var(--color-coffee-muted, #968679);
  line-height: 1.4;
  margin-top: 4px;
}

/* 常用祈願片語詞庫標籤雲 */
.sw-quick-wishes-wrap {
  margin-bottom: 6px;
}

.sw-quick-wishes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.sw-quick-wishes-title {
  font-size: 0.78rem;
  color: #9f6c24;
  font-weight: 600;
}

.btn-sw-reset-wish {
  background: transparent;
  border: none;
  color: var(--color-coffee-muted, #968679);
  font-size: 0.74rem;
  cursor: pointer;
  text-decoration: underline;
}

.btn-sw-reset-wish:hover {
  color: #9f6c24;
}

.sw-wish-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.btn-sw-wish-tag {
  background: #fbf7ec;
  border: 1px solid rgba(194, 131, 44, 0.25);
  color: #7a531e;
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-sw-wish-tag:hover {
  background: #f5ebce;
  border-color: #c2832c;
  color: #573a11;
  transform: translateY(-1px);
}

.sw-wish-textarea {
  resize: vertical;
  line-height: 1.6;
  font-size: 0.92rem;
}

.sw-form-actions {
  margin-top: 10px;
}

.btn-sw-action {
  width: 100%;
  padding: 11px 18px;
  border-radius: 16px;
  border: none;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s var(--spring-easing);
}

.btn-sw-action.primary {
  background: var(--color-coffee, #3d3027);
  color: #ffffff;
}

.btn-sw-action.primary:hover {
  background: var(--color-coffee-dark, #241c16);
  transform: translateY(-1px);
}

/* 重新排版生成按鈕旋轉動畫 */
.sw-spin-anim {
  animation: swSpin 0.55s linear infinite !important;
}

@keyframes swSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 宣紙重新排版脈衝高亮視覺回饋 */
.sw-sheet-paper.sw-paper-pulse {
  animation: swPaperGlow 0.85s ease-out;
}

@keyframes swPaperGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(194, 131, 44, 0.45), 0 10px 28px rgba(43, 26, 14, 0.12);
  }
  50% {
    box-shadow: 0 0 0 9px rgba(194, 131, 44, 0.22), 0 12px 36px rgba(194, 131, 44, 0.25);
  }
  100% {
    box-shadow: 0 10px 28px rgba(43, 26, 14, 0.12);
  }
}

/* 浮動提示 Toast */
.sw-toast-notice {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(36, 28, 22, 0.94);
  color: #fffdf8;
  padding: 11px 22px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 550;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(194, 131, 44, 0.38);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sw-toast-notice.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 已存疏文清單與存檔操作列樣式 */
.btn-sw-saved-trigger {
  background: rgba(194, 131, 44, 0.1);
  border: 1px solid rgba(194, 131, 44, 0.25);
  color: #9f6c24;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-pill, 9999px);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.2s var(--spring-easing);
}

.btn-sw-saved-trigger:hover {
  background: rgba(194, 131, 44, 0.18);
  border-color: #c2832c;
  transform: translateY(-1px);
}

.sw-active-saved-banner {
  background: #fff8eb;
  border: 1px solid rgba(194, 131, 44, 0.3);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sw-active-saved-text {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  color: #825b20;
}

.sw-active-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c2832c;
}

.btn-sw-new {
  background: #ffffff;
  border: 1px solid rgba(194, 131, 44, 0.3);
  color: #9f6c24;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  cursor: pointer;
}

.btn-sw-new:hover {
  background: #fdf5e6;
}

.sw-form-actions-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

@media (max-width: 480px) {
  .sw-form-actions-grid {
    grid-template-columns: 1fr;
  }
}

.btn-sw-action.save-btn {
  background: #ffffff;
  color: #9f6c24;
  border: 1.5px solid rgba(194, 131, 44, 0.35);
}

.btn-sw-action.save-btn:hover {
  background: #fffbf2;
  border-color: #c2832c;
  transform: translateY(-1px);
}

/* ===== 古典直書宣紙預覽樣式 ===== */
.sw-sheet-container {
  background: #fbf7ec;
  border: 1px solid rgba(194, 131, 44, 0.28);
  border-radius: 16px;
  padding: 16px;
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  box-shadow: inset 0 2px 8px rgba(194, 131, 44, 0.08);
  min-height: 380px;
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(194, 131, 44, 0.4) transparent;
}

.sw-sheet-container::-webkit-scrollbar {
  height: 6px;
}

.sw-sheet-container::-webkit-scrollbar-thumb {
  background: rgba(194, 131, 44, 0.35);
  border-radius: 4px;
}

.sw-sheet-container::-webkit-scrollbar-track {
  background: rgba(194, 131, 44, 0.08);
}

.sw-sheet-paper {
  background: #fffdf5;
  background-image: radial-gradient(#efe7d2 1px, transparent 1px);
  background-size: 16px 16px;
  border: 1px solid rgba(194, 131, 44, 0.35);
  box-shadow: 0 4px 18px rgba(66, 53, 43, 0.08);
  padding: 22px 18px;
  min-width: 100%;
  width: max-content;
  position: relative;
  overflow: visible;
  box-sizing: border-box;
  margin: 0 auto;
  transition: all 0.25s ease;
}

.sw-sheet-paper.is-fitted {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 18px 12px;
}

.sw-sheet-paper.is-fitted .sw-sheet-vertical-text {
  gap: 7px;
  font-size: 12px;
  letter-spacing: 0.5px;
  line-height: 1.5;
}

/* ===== 陰陽兩界切換列 (Realm Switcher Bar) ===== */
.sw-realm-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

@media (max-width: 640px) {
  .sw-realm-bar {
    grid-template-columns: 1fr;
  }
}

.btn-sw-realm {
  background: #ffffff;
  border: 1.5px solid var(--border-light, rgba(66, 53, 43, 0.12));
  border-radius: 16px;
  padding: 17px 20px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  transition: opacity 0.22s ease, transform 0.22s var(--spring-easing), border-color 0.22s ease, box-shadow 0.22s ease;
  text-align: left;
  min-height: 108px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  opacity: 0.5;
}

.btn-sw-realm:hover {
  opacity: 0.78;
  transform: translateY(-1px);
  border-color: #c2832c;
  box-shadow: 0 4px 12px rgba(66, 53, 43, 0.08);
}

.btn-sw-realm.active[data-realm="yang"] {
  background: linear-gradient(135deg, #fff9ee 0%, #fff4dc 100%);
  border-color: #c2832c;
  box-shadow: 0 4px 14px rgba(194, 131, 44, 0.2);
  opacity: 1;
}

.btn-sw-realm.active[data-realm="yin"] {
  background: linear-gradient(135deg, #f0f4f8 0%, #e5ecf3 100%);
  border-color: #4a6572;
  box-shadow: 0 4px 14px rgba(74, 101, 114, 0.2);
  opacity: 1;
}

.btn-sw-realm .realm-icon {
  font-size: 1.25rem;
  line-height: 1;
  position: relative;
  z-index: 2;
}

.btn-sw-realm .realm-text {
  font-size: 0.98rem;
  font-weight: 700;
  font-family: "Songti TC", "Noto Serif TC", serif;
  color: var(--color-coffee-dark, #241c16);
  position: relative;
  z-index: 2;
  max-width: 62%;
}

.btn-sw-realm .realm-desc {
  font-size: 0.76rem;
  color: var(--color-coffee-muted, #968679);
  position: relative;
  z-index: 2;
  max-width: 62%;
}

.sw-realm-art {
  position: absolute;
  top: -22%;
  right: -1%;
  width: 46%;
  height: 144%;
  object-fit: contain;
  object-position: right center;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  filter: drop-shadow(0 8px 12px rgba(47, 38, 29, 0.08));
}

/* 電腦版：三張疏文主題圖統一放大 50%，並以右側為視覺錨點。 */
@media (min-width: 1141px) {
  .sw-master-hero-card {
    min-height: 400px;
  }

  .sw-master-highlights {
    width: 62%;
    max-width: 800px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  .sw-master-art {
    top: 0;
    right: 0;
    width: 67.5%;
    height: 100%;
    transform: none;
    transform-origin: right center;
  }

  .sw-realm-art {
    transform: scale(1.5);
    transform-origin: right center;
  }
}

.btn-sw-realm::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.7) 48%, transparent 72%);
  pointer-events: none;
  z-index: 1;
}

.btn-sw-realm.active[data-realm="yang"]::after {
  background: linear-gradient(90deg, rgba(255, 249, 238, 0.98) 0%, rgba(255, 249, 238, 0.72) 48%, transparent 73%);
}

.btn-sw-realm.active[data-realm="yin"]::after {
  background: linear-gradient(90deg, rgba(240, 244, 248, 0.98) 0%, rgba(240, 244, 248, 0.72) 48%, transparent 73%);
}

/* 冥陽專屬欄位卡片樣式 */
.sw-yin-card {
  background: #f7f9fb;
  border: 1.5px solid rgba(74, 101, 114, 0.25);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.sw-yin-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-weight: 700;
  font-size: 0.88rem;
  color: #2c3b4d;
}

.sw-yin-badge {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 6px;
  background: #4a6572;
  color: #ffffff;
  font-weight: 600;
}

/* 古典宣紙頂端邊角暗記（無假法印） */
.sw-paper-seal-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  font-family: "Songti TC", "Noto Serif TC", serif;
  font-size: 11px;
  letter-spacing: 2px;
  padding: 3px 6px;
  border: 1px dashed rgba(100, 100, 100, 0.3);
  color: rgba(100, 100, 100, 0.5);
  border-radius: 4px;
  pointer-events: none;
}

/* ===== 正統宣紙三大底紙樣式 (嚴守民俗避忌) ===== */
/* 1. 正統黃表宣紙（陽上常態祈福） */
.sw-sheet-paper.sw-theme-huangbiao {
  background: #fffdf5;
  background-image: radial-gradient(#efe7d2 1px, transparent 1px);
  background-size: 16px 16px;
  border: 1.5px solid rgba(194, 131, 44, 0.38);
  box-shadow: 0 4px 18px rgba(66, 53, 43, 0.08);
}
.sw-sheet-paper.sw-theme-huangbiao .sw-sheet-vertical-text {
  color: #241c16;
}

/* 2. 萬年紅灑金宣紙（開市、還願、月老等喜慶吉典） */
.sw-sheet-paper.sw-theme-hongxuan {
  background: #8e181b;
  background-image: radial-gradient(#f7d58b 1.2px, transparent 1.2px);
  background-size: 20px 20px;
  border: 2px solid #b83a38;
  box-shadow: 0 4px 20px rgba(142, 24, 27, 0.25);
}
.sw-sheet-paper.sw-theme-hongxuan .sw-sheet-vertical-text {
  color: #fcedcb;
}
.sw-sheet-paper.sw-theme-hongxuan .sw-col.title-col {
  color: #fff3db;
  border-left-color: rgba(252, 237, 203, 0.4);
}
.sw-sheet-paper.sw-theme-hongxuan .sw-holy-god {
  color: #ffe099;
}
.sw-sheet-paper.sw-theme-hongxuan .wish-highlight-col {
  color: #ffffff;
}
.sw-sheet-paper.sw-theme-hongxuan .sw-paper-seal-badge {
  border-color: rgba(252, 237, 203, 0.3);
  color: rgba(252, 237, 203, 0.5);
}

/* 3. 素白青玄宣紙（祭祖、拔薦先亡、解冤釋結 · 冥陽兩利 · 嚴禁紅紙火氣） */
.sw-sheet-paper.sw-theme-baixuan {
  background: #fcfdfe;
  background-image: radial-gradient(#e1e7ec 1px, transparent 1px);
  background-size: 16px 16px;
  border: 1.5px solid rgba(74, 101, 114, 0.35);
  box-shadow: 0 4px 18px rgba(35, 47, 58, 0.08);
}
.sw-sheet-paper.sw-theme-baixuan .sw-sheet-vertical-text {
  color: #1a2530;
}
.sw-sheet-paper.sw-theme-baixuan .sw-col.title-col {
  color: #273746;
  border-left: 1px dashed rgba(74, 101, 114, 0.35);
}
.sw-sheet-paper.sw-theme-baixuan .sw-holy-god {
  color: #1e3d59;
}
.sw-sheet-paper.sw-theme-baixuan .wish-highlight-col {
  color: #1c2d3d;
}
.sw-sheet-paper.sw-theme-baixuan .sw-paper-seal-badge {
  border-color: rgba(74, 101, 114, 0.3);
  color: rgba(74, 101, 114, 0.6);
}

/* 直書直排排版核心 */
.sw-sheet-vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  height: 430px;
  font-family: "Songti TC", "Noto Serif TC", "Source Han Serif TC", serif;
  color: #241c16;
  font-size: 13.5px;
  line-height: 1.6;
  letter-spacing: 1.2px;
}

.sw-col {
  height: 100%;
  display: inline-block;
  white-space: normal;
}

.sw-col.title-col {
  font-weight: 700;
  font-size: 17px;
  color: #7b2622;
  letter-spacing: 3px;
  border-left: 1px dashed rgba(194, 131, 44, 0.3);
  padding-left: 10px;
}

.sw-col.holy-lift {
  color: inherit;
}

.sw-holy-god {
  font-weight: 700;
  color: #8c261e;
}

.wish-highlight-col {
  color: #7b2622;
  font-weight: 600;
}

.date-signature-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
}

/* 正統實名留白蓋印處範圍框（留白虛線框，絕不印假印章，留給信士實印） */
.sw-seal-placeholder-box {
  width: 44px;
  height: 44px;
  border: 1.5px dashed #b83a38;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  background: rgba(184, 58, 56, 0.02);
  box-sizing: border-box;
}

.sw-sheet-paper.sw-theme-hongxuan .sw-seal-placeholder-box {
  border-color: rgba(252, 237, 203, 0.7);
  background: rgba(255, 255, 255, 0.08);
}

.sw-sheet-paper.sw-theme-baixuan .sw-seal-placeholder-box {
  border-color: #5c6bc0;
  background: rgba(92, 107, 192, 0.03);
}

.sw-seal-placeholder-text {
  font-size: 10px;
  color: #b83a38;
  writing-mode: vertical-rl;
  letter-spacing: 1px;
  opacity: 0.8;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.sw-sheet-paper.sw-theme-hongxuan .sw-seal-placeholder-text {
  color: #fcedcb;
}

.sw-sheet-paper.sw-theme-baixuan .sw-seal-placeholder-text {
  color: #3949ab;
}

/* 民俗禁忌與場所安全必讀警示卡 (大廟與土地公廟金爐) */
.sw-safety-warning-card {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border: 1.5px solid #f97316;
  border-radius: 14px;
  padding: 14px 18px;
  margin-top: 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.09);
}

.sw-safety-warning-icon {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.sw-safety-warning-body h4 {
  margin: 0 0 6px 0;
  font-size: 0.95rem;
  color: #9a3412;
  font-weight: 700;
}

.sw-safety-warning-body p {
  margin: 0 0 8px 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: #7c2d12;
}

.sw-safety-advice {
  font-size: 0.84rem;
  line-height: 1.55;
  color: #431407;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(249, 115, 22, 0.2);
}

.sw-safety-advice strong {
  color: #c2410c;
}

/* 超商 A3 列印指引 Modal 專屬樣式 */
.sw-a3-downloaded-box {
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.sw-a3-dl-icon {
  font-size: 1.6rem;
}

.sw-a3-downloaded-box span {
  font-size: 0.8rem;
  color: #166534;
  display: block;
}

.sw-a3-downloaded-box strong {
  font-size: 0.92rem;
  color: #14532d;
}

.sw-a3-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sw-a3-step-item {
  background: #ffffff;
  border: 1px solid var(--border-light, rgba(66, 53, 43, 0.11));
  border-radius: 12px;
  padding: 12px 16px;
}

.sw-a3-badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  background: #008044;
  color: #ffffff;
  margin-bottom: 8px;
}

.sw-a3-badge.fami {
  background: #007cc3;
}

.sw-a3-step-item ol {
  margin: 0;
  padding-left: 20px;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--color-coffee, #3d3027);
}

.sw-a3-tips {
  background: #fff8eb;
  border: 1px solid rgba(194, 131, 44, 0.3);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.82rem;
  line-height: 1.55;
  color: #855d24;
}

.sw-spinner-sm {
  width: 14px;
  height: 14px;
  border: 2px solid #ffffff;
  border-top-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: swSpin 0.6s linear infinite;
  vertical-align: middle;
}

/* ===== 雙軌選擇卡片區 (Dual Track Box) ===== */
.sw-dual-track-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
}

@media (max-width: 640px) {
  .sw-dual-track-box {
    grid-template-columns: 1fr;
  }
}

.sw-track-card {
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  box-sizing: border-box;
}

.sw-track-card.track-self {
  background: #fbf9f5;
  border: 1px solid var(--border-light, rgba(66, 53, 43, 0.11));
}

.sw-track-card.track-master {
  background: linear-gradient(145deg, #fffbf2 0%, #fff7e6 100%);
  border: 1.5px solid rgba(194, 131, 44, 0.4);
  box-shadow: 0 4px 14px rgba(194, 131, 44, 0.12);
}

.sw-track-corner-badge {
  position: absolute;
  top: -10px;
  right: 14px;
  background: linear-gradient(135deg, #b83a38 0%, #942523 100%);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(184, 58, 56, 0.3);
}

.sw-track-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.sw-track-tag {
  font-size: 0.72rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(66, 53, 43, 0.08);
  color: var(--color-coffee, #3d3027);
  font-weight: 600;
}

.sw-track-tag.gold {
  background: #c2832c;
  color: #ffffff;
}

.sw-track-header h3 {
  font-size: 0.96rem;
  margin: 0;
  color: var(--color-coffee-dark, #241c16);
}

.sw-track-desc {
  font-size: 0.8rem;
  color: var(--color-coffee-light, #6e5e52);
  line-height: 1.5;
  margin: 0 0 14px;
}

.sw-track-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.btn-sw-track {
  padding: 7px 12px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: none;
  transition: all 0.2s var(--spring-easing);
}

.btn-sw-track.secondary {
  background: #ffffff;
  border: 1px solid var(--border-medium, rgba(66, 53, 43, 0.18));
  color: var(--color-coffee, #3d3027);
}

.btn-sw-track.secondary:hover {
  background: #f7f2e8;
}

.btn-sw-track.ghost {
  background: transparent;
  color: #9f6c24;
  text-decoration: underline;
  padding: 7px 8px;
}

.sw-master-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sw-price-box {
  display: flex;
  flex-direction: column;
}

.sw-price-label {
  font-size: 0.72rem;
  color: #9f6c24;
}

.sw-price-val {
  font-size: 1.18rem;
  font-weight: 700;
  color: #8c261e;
}

.sw-price-sub {
  font-size: 0.68rem;
  color: var(--color-coffee-muted, #968679);
}

.btn-sw-track.primary-gold {
  background: linear-gradient(135deg, #c2832c 0%, #9f6c24 100%);
  color: #ffffff;
  padding: 9px 15px;
  font-weight: 600;
  box-shadow: 0 3px 8px rgba(194, 131, 44, 0.3);
}

.btn-sw-track.primary-gold:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgba(194, 131, 44, 0.4);
}

.btn-sw-track:disabled,
.btn-sw-track.disabled {
  opacity: 0.65 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  transform: none !important;
  box-shadow: none !important;
  background: #d8cec0 !important;
  color: #6a5d4f !important;
  border: 1px solid #c7baa8 !important;
}

/* ===== 知識科普區塊 ===== */
.sw-knowledge-section {
  margin-top: 10px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid var(--border-light, rgba(66, 53, 43, 0.11));
  border-radius: var(--radius-md, 22px);
}

.sw-sec-title h3 {
  font-family: "Songti TC", "Noto Serif TC", serif;
  font-size: 1.15rem;
  color: var(--color-coffee-dark, #241c16);
  margin: 0 0 4px;
}

.sw-sec-title p {
  font-size: 0.82rem;
  color: var(--color-coffee-muted, #968679);
  margin: 0 0 16px;
}

.sw-know-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.sw-know-card {
  background: #fbf9f6;
  border: 1px solid rgba(66, 53, 43, 0.08);
  border-radius: 14px;
  padding: 16px;
}

.sw-know-card h4 {
  font-size: 0.92rem;
  color: var(--color-coffee-dark, #241c16);
  margin: 0 0 8px;
}

.sw-know-card p {
  font-size: 0.82rem;
  color: var(--color-coffee-light, #6e5e52);
  line-height: 1.6;
  margin: 0;
}

/* ===== 預約手寫 Modal 樣式 ===== */
.sw-commission-card {
  max-width: 620px;
  max-height: 90vh;
  overflow-y: auto;
}

.sw-order-summary-box {
  background: #fbf9f5;
  border: 1px solid var(--border-light, rgba(66, 53, 43, 0.11));
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sw-sum-row {
  display: flex;
  font-size: 0.86rem;
}

.sw-sum-label {
  color: var(--color-coffee-muted, #968679);
  width: 90px;
  flex-shrink: 0;
}

.sw-sum-val {
  color: var(--color-coffee-dark, #241c16);
}

.sw-sum-val.bold {
  font-weight: 600;
  color: #8c261e;
}

.sw-radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

.sw-radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--color-coffee, #3d3027);
  cursor: pointer;
}

.sw-bank-info-card {
  background: #fff8eb;
  border: 1.5px dashed rgba(194, 131, 44, 0.4);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 14px 0;
}

.sw-bank-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #9f6c24;
  margin-bottom: 10px;
}

.sw-bank-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 0.84rem;
  color: var(--color-coffee, #3d3027);
}

@media (max-width: 480px) {
  .sw-bank-grid {
    grid-template-columns: 1fr;
  }
}

.sw-bank-amt {
  font-size: 1.05rem;
  font-weight: 700;
  color: #8c261e;
}

.sw-bank-note {
  font-size: 0.76rem;
  color: #8c7c6f;
  margin: 8px 0 0;
}

.sw-guide-list {
  padding-left: 20px;
  font-size: 0.88rem;
  color: var(--color-coffee, #3d3027);
  line-height: 1.7;
}

.sw-guide-list li {
  margin-bottom: 10px;
}

.sw-success-icon {
  font-size: 3rem;
  margin-bottom: 4px;
}

.sw-success-details {
  background: #fbf9f5;
  border: 1px solid var(--border-light, rgba(66, 53, 43, 0.11));
  border-radius: 12px;
  padding: 12px 16px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.88rem;
}

/* ===== 自拜儀軌指南浮動視窗 (Ritual Guide Modal) ===== */
.sw-ritual-modal-card {
  max-width: 680px;
  width: 95%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: #fffdf9;
  border: 1px solid rgba(194, 131, 44, 0.28);
  box-shadow: 0 20px 50px rgba(36, 28, 22, 0.25);
  padding: 24px 26px;
  border-radius: var(--radius-lg, 20px);
}

.sw-ritual-badge-sub {
  font-size: 0.76rem;
  color: #9f6c24;
  background: rgba(194, 131, 44, 0.1);
  border: 1px solid rgba(194, 131, 44, 0.25);
  border-radius: 999px;
  padding: 3px 10px;
  font-weight: 500;
  margin-top: 4px;
  display: inline-block;
}

.sw-ritual-content {
  max-height: 58vh;
  overflow-y: auto;
  padding: 10px 4px 10px 2px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sw-ritual-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #ffffff;
  border: 1px solid rgba(194, 131, 44, 0.16);
  border-radius: 12px;
  padding: 14px 16px;
  transition: all 0.2s ease;
}

.sw-ritual-step:hover {
  border-color: rgba(194, 131, 44, 0.42);
  box-shadow: 0 4px 14px rgba(194, 131, 44, 0.08);
}

.sw-step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c2832c 0%, #9f6c24 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(159, 108, 36, 0.28);
}

.sw-step-text {
  flex: 1;
}

.sw-step-text h4 {
  font-size: 0.96rem;
  font-weight: 700;
  color: #2b1a0e;
  margin: 0 0 4px 0;
  font-family: "Songti TC", "Noto Serif TC", serif;
}

.sw-step-text p {
  font-size: 0.86rem;
  line-height: 1.58;
  color: #5c4a3e;
  margin: 0 0 6px 0;
}

.sw-step-tip {
  font-size: 0.78rem;
  color: #9f6c24;
  background: rgba(194, 131, 44, 0.08);
  border-radius: 6px;
  padding: 3px 8px;
  display: inline-block;
  line-height: 1.4;
}

.sw-ritual-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(66, 53, 43, 0.08);
  margin-top: 10px;
}

/* ===== 已存疏文庫清單 Modal 樣式 ===== */
.sw-saved-modal-card {
  max-width: 620px;
  width: 95%;
  max-height: 85vh;
}

.sw-saved-body {
  max-height: 60vh;
  overflow-y: auto;
  padding: 10px 4px;
}

.sw-saved-empty {
  text-align: center;
  padding: 36px 16px;
  color: var(--color-coffee-muted, #968679);
}

.sw-empty-icon {
  font-size: 2.5rem;
  margin-bottom: 8px;
}

.sw-empty-hint {
  font-size: 0.8rem;
  color: #a89a8c;
  display: block;
  margin-top: 6px;
}

.sw-saved-card {
  background: #ffffff;
  border: 1px solid var(--border-light, rgba(66, 53, 43, 0.11));
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
  transition: all 0.2s ease;
}

.sw-saved-card:hover {
  border-color: rgba(194, 131, 44, 0.35);
  box-shadow: var(--shadow-sm);
}

.sw-saved-card.is-active {
  border: 1.5px solid #c2832c;
  background: #fffdfa;
}

.sw-saved-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.sw-saved-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sw-saved-card-title h4 {
  font-size: 0.94rem;
  color: var(--color-coffee-dark, #241c16);
  margin: 0;
  font-weight: 600;
}

.sw-saved-cat-badge {
  font-size: 0.72rem;
  padding: 2px 6px;
  background: rgba(194, 131, 44, 0.12);
  color: #9f6c24;
  border-radius: 4px;
  font-weight: 600;
}

.sw-curr-badge {
  font-size: 0.7rem;
  padding: 1px 6px;
  background: #c2832c;
  color: #ffffff;
  border-radius: 4px;
}

.sw-saved-date {
  font-size: 0.76rem;
  color: var(--color-coffee-muted, #968679);
}

.sw-saved-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
  font-size: 0.82rem;
  color: var(--color-coffee, #3d3027);
}

.sw-saved-info-row {
  display: flex;
  align-items: baseline;
}

.sw-s-label {
  color: var(--color-coffee-muted, #968679);
  width: 70px;
  flex-shrink: 0;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sw-saved-card-actions,
.sw-saved-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  border-top: 1px dashed rgba(66, 53, 43, 0.12);
  padding-top: 12px;
  margin-top: 8px;
}

.btn-sw-load {
  background: linear-gradient(135deg, #c2832c 0%, #9f6c24 100%);
  color: #ffffff;
  border: none;
  padding: 7px 15px;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(194, 131, 44, 0.2);
}

.btn-sw-load:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(194, 131, 44, 0.35);
}

.btn-sw-delete {
  background: rgba(184, 58, 56, 0.08);
  color: #b83a38;
  border: 1px solid rgba(184, 58, 56, 0.35);
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 38px;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn-sw-delete:hover,
.btn-sw-delete:active {
  background: rgba(184, 58, 56, 0.16);
  border-color: #b83a38;
  color: #a32f2d;
  transform: translateY(-1px);
}

/* 自定義確認/輸入對話框 (最高層級，支援 iPad、手機與多層彈窗) */
#custom-dialog-modal {
  z-index: 100000 !important;
}

#custom-dialog-modal.show {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#custom-dialog-modal .modal-card {
  z-index: 100001 !important;
  max-width: 440px;
}

.sw-gender-group {
  width: 130px;
}

.sw-mobile-swipe-tip {
  display: none;
}

/* ===== 浮出全螢幕宣紙檢視視窗 (Fullscreen Parchment Modal) ===== */
.sw-fs-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(22, 16, 12, 0.88);
  backdrop-filter: blur(14px);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  animation: swFadeIn 0.22s ease-out;
}

@keyframes swFadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.sw-fs-container {
  width: 100%;
  max-width: 1480px;
  height: 94vh;
  display: flex;
  flex-direction: column;
  background: #fbf7ec;
  border: 1.5px solid rgba(194, 131, 44, 0.45);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.sw-fs-header {
  background: #ffffff;
  border-bottom: 1px solid rgba(194, 131, 44, 0.25);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.sw-fs-title-box {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Songti TC", "Noto Serif TC", serif;
  font-size: 1.12rem;
  font-weight: 700;
  color: #3d3027;
}

.sw-fs-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-sw-fs-tool {
  background: rgba(194, 131, 44, 0.09);
  border: 1px solid rgba(194, 131, 44, 0.28);
  color: #8c5b1c;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-sw-fs-tool:hover {
  background: rgba(194, 131, 44, 0.18);
  border-color: #c2832c;
  transform: translateY(-1px);
}

.btn-sw-fs-tool.primary {
  background: #3d3027;
  color: #ffffff;
  border-color: #3d3027;
}

.btn-sw-fs-tool.primary:hover {
  background: #241c16;
}

.btn-sw-fs-close {
  background: transparent;
  border: none;
  font-size: 1.3rem;
  color: #8c6023;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  line-height: 1;
}

.btn-sw-fs-close:hover {
  background: rgba(184, 58, 56, 0.1);
  color: #b83a38;
}

.sw-fs-body {
  flex: 1;
  overflow-x: auto;
  overflow-y: auto;
  padding: 30px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: #fbf7ec;
  background-image: radial-gradient(rgba(194, 131, 44, 0.18) 1.2px, transparent 1.2px);
  background-size: 24px 24px;
  -webkit-overflow-scrolling: touch;
}

.sw-fs-body .sw-sheet-paper {
  max-width: none;
  box-shadow: 0 12px 40px rgba(66, 53, 43, 0.18);
  padding: 36px 32px;
  background: #fffdf5;
  border-width: 2px;
  margin: 0 auto;
}

.sw-fs-body .sw-sheet-vertical-text {
  height: 520px;
  font-size: 16px;
  line-height: 1.7;
  gap: 16px;
  letter-spacing: 1.8px;
}

.sw-fs-body .sw-col.title-col {
  font-size: 20px;
  letter-spacing: 4px;
  padding-left: 14px;
}

/* ===== 已存疏文庫清單 支援即時檢索與全螢幕放大 ===== */
.sw-saved-search-box {
  padding: 12px 16px;
  background: #fdfaf3;
  border-bottom: 1px solid rgba(194, 131, 44, 0.18);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sw-saved-search-input-wrap {
  position: relative;
  width: 100%;
}

.sw-saved-search-input-wrap input {
  padding-left: 36px !important;
  width: 100%;
  box-sizing: border-box;
}

.sw-saved-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9f6c24;
  pointer-events: none;
  font-size: 0.9rem;
}

.sw-saved-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.btn-sw-filter-pill {
  background: #ffffff;
  border: 1px solid rgba(194, 131, 44, 0.24);
  color: #8c6023;
  font-size: 0.76rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: var(--radius-pill, 9999px);
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-sw-filter-pill:hover {
  background: #fff8eb;
  border-color: #c2832c;
}

.btn-sw-filter-pill.active {
  background: #c2832c;
  color: #ffffff;
  border-color: #a86e1f;
  box-shadow: 0 2px 6px rgba(194, 131, 44, 0.2);
}

.sw-saved-count-notice {
  font-size: 0.76rem;
  color: #9f6c24;
  padding: 2px 4px;
}

.modal-card.is-fullscreen-modal {
  width: 95vw !important;
  max-width: 1350px !important;
  height: 90vh !important;
  max-height: 90vh !important;
  display: flex;
  flex-direction: column;
}

.modal-card.is-fullscreen-modal .sw-saved-items-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 12px;
}

.btn-sw-modal-fullscreen-toggle {
  background: rgba(194, 131, 44, 0.08);
  border: 1px solid rgba(194, 131, 44, 0.25);
  color: #9f6c24;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
  margin-right: 8px;
}

.btn-sw-modal-fullscreen-toggle:hover {
  background: #c2832c;
  color: #ffffff;
  border-color: #a86e1f;
}

/* ===== 疏文專屬列印模式 (Dedicated Print Styling) =====
   精確專注於疏文宣紙本體，徹底隱藏上下周圍所有非疏文元件、按鈕、滑動提示、容器邊框與瀏覽器預設頁首頁尾 */
@page {
  size: landscape;
  margin: 6mm 8mm;
}

@media print {
  html, body {
    background: #ffffff !important;
    color: #2b1a0e !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: auto !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body * {
    visibility: hidden !important;
  }

  /* 僅讓疏文宣紙及其文字、法印可見，並隱藏內部滑動提示 */
  .sw-sheet-paper,
  .sw-sheet-paper *:not(.sw-mobile-swipe-tip):not(.sw-mobile-swipe-tip *) {
    visibility: visible !important;
  }

  /* 宣紙置中排版，保留正統硃砂雙線框與宣紙底色 */
  .sw-sheet-paper {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin: 0 auto !important;
    box-shadow: none !important;
    border: 2px solid #8c2321 !important;
    background: #fffdf6 !important;
    background-image: radial-gradient(circle at center, rgba(194, 131, 44, 0.05) 0%, transparent 70%) !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    width: max-content !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 490px !important;
    padding: 26px 30px !important;
    overflow: visible !important;
  }

  .sw-sheet-vertical-text {
    overflow: visible !important;
  }

  /* 徹底隱藏所有非疏文宣紙之介面元件、標題列、操作按鈕、提示文字 */
  header,
  nav,
  footer,
  .sidebar,
  .mobile-header-actions,
  .shuwen-header,
  .sw-master-hero-card,
  .sw-categories-bar,
  .sw-form-panel,
  .sw-panel-header,
  .sw-preview-header,
  .sw-preview-actions,
  .sw-mobile-swipe-tip,
  .sw-dual-track-box,
  .sw-knowledge-section,
  .sw-fs-header,
  .sw-fs-toolbar,
  .modal-backdrop,
  .sw-fs-modal-backdrop,
  .btn-icon {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #shuwen-view,
  .shuwen-content-wrap,
  .sw-generator-layout,
  .sw-preview-panel,
  .sw-sheet-container {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
}

/* ==========================================================================
   手寫疏文專區 - 電腦版、iPad 平板、iPhone 手機版專屬響應式微調
   ========================================================================== */

/* 1. iPad 平板與中型筆電螢幕 (<= 1140px) */
@media (max-width: 1140px) {
  .sw-generator-layout {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .sw-master-hero-card {
    padding: 22px 24px;
  }

  .sw-master-art {
    width: 52%;
    height: 78%;
    top: -4%;
    opacity: 0.78;
  }

  .sw-master-badge,
  .sw-master-title,
  .sw-master-creed {
    max-width: 66%;
  }

  .sw-master-highlights {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .sw-mobile-swipe-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.78rem;
    color: #9f6c24;
    background: rgba(194, 131, 44, 0.08);
    border: 1px dashed rgba(194, 131, 44, 0.25);
    border-radius: 8px;
    padding: 6px 12px;
    margin-bottom: 14px;
    user-select: none;
  }

  .sw-sheet-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* 2. 手機版 (<= 768px) */
@media (max-width: 768px) {
  .shuwen-content-wrap {
    padding: 12px 14px calc(45px + env(safe-area-inset-bottom, 20px)) !important;
  }

  .sw-master-hero-card {
    padding: 16px 14px;
    border-radius: 18px;
    margin-bottom: 16px;
  }

  .sw-master-art {
    top: 4px;
    right: -10%;
    width: 76%;
    height: 48%;
    opacity: 0.2;
  }

  .sw-master-hero-card::before {
    background: linear-gradient(180deg, rgba(255, 253, 248, 0.62) 0%, rgba(255, 253, 248, 0.92) 55%, rgba(255, 253, 248, 0.98) 100%);
  }

  .sw-master-badge,
  .sw-master-title,
  .sw-master-creed {
    max-width: 100%;
  }

  .sw-master-title {
    font-size: 1.2rem;
    line-height: 1.35;
  }

  .sw-master-creed {
    font-size: 0.86rem;
    line-height: 1.6;
    margin-bottom: 14px;
  }

  .sw-master-highlights {
    grid-template-columns: 1fr;
    gap: 8px;
    padding-top: 14px;
  }

  .sw-hl-item {
    gap: 10px;
  }

  .sw-hl-icon {
    width: 36px;
    height: 36px;
    font-size: 1.2rem;
    border-radius: 10px;
  }

  .sw-categories-bar {
    margin-bottom: 14px;
  }

  .sw-cat-tab {
    padding: 7px 12px;
    border-radius: 10px;
  }

  .sw-cat-text {
    font-size: 0.82rem;
  }

  .sw-form-panel, .sw-preview-panel {
    padding: 16px 14px;
    border-radius: 18px;
  }

  .sw-panel-header {
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 14px;
  }

  .sw-preview-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 14px;
  }

  .sw-preview-header .sw-panel-title {
    width: 100%;
    font-size: 1.05rem;
    white-space: nowrap;
    justify-content: flex-start;
  }

  .sw-preview-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
  }

  .btn-sw-preview-fit {
    flex-shrink: 0;
    padding: 6px 12px;
    font-size: 0.8rem;
    justify-content: center;
  }

  .btn-sw-preview-fullscreen {
    flex: 1;
    padding: 6px 12px;
    font-size: 0.8rem;
    justify-content: center;
    white-space: nowrap;
  }

  /* 防止 iOS Safari 在輸入框聚焦時自動放大畫面 (關鍵設定: 16px) */
  .sw-form-panel input,
  .sw-form-panel select,
  .sw-form-panel textarea,
  .sw-commission-card input,
  .sw-commission-card select,
  .sw-commission-card textarea {
    font-size: 16px !important;
    min-height: 44px;
    box-sizing: border-box;
  }

  .sw-bazi-inputs {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .btn-sw-action {
    min-height: 46px;
    font-size: 0.94rem;
  }

  .sw-sheet-container {
    min-height: 360px;
    padding: 10px;
    border-radius: 12px;
  }

  .sw-sheet-paper {
    padding: 18px 12px;
  }

  .sw-sheet-vertical-text {
    height: 390px;
    font-size: 13.5px;
    line-height: 1.6;
    gap: 12px;
    letter-spacing: 1.2px;
  }

  .sw-col.title-col {
    font-size: 15px;
    padding-left: 6px;
  }

  .sw-dual-track-box {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .sw-track-card {
    padding: 14px;
  }

  .btn-sw-track {
    min-height: 42px;
    padding: 8px 14px;
  }

  .sw-master-price-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .sw-price-box {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
  }

  .sw-knowledge-section {
    padding: 16px 14px;
    border-radius: 18px;
  }

  .sw-know-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .sw-commission-card {
    width: 95% !important;
    max-height: 88vh;
    padding: 18px 14px;
    border-radius: 18px;
  }

  .sw-bank-grid {
    grid-template-columns: 1fr;
  }
}

/* 3. 小型手機螢幕 (<= 480px) */
@media (max-width: 480px) {
  .sw-form-row {
    flex-direction: column;
    gap: 10px;
  }

  .sw-gender-group {
    width: 100% !important;
  }
}

/* ==========================================================================
   天時擇吉 (Zeji) 專區專屬風格與自適應佈局
   ========================================================================== */
.zeji-view-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--bg-main, #fbf9f5);
  box-sizing: border-box;
}

.zeji-content-wrap {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 24px 28px 70px;
  box-sizing: border-box;
}

.zeji-main-container {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 1. 節氣三聯面板 (左: 下一節氣 | 中: 今日通書 | 右: 當前節氣) */
.zeji-solar-trio-grid {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr) 244px;
  gap: 22px;
  align-items: stretch;
}

.zeji-solar-card {
  background-color: #fcfbf9;
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  border: 1px solid rgba(180, 130, 66, 0.22);
  border-radius: 20px;
  padding: 18px 16px 16px;
  box-shadow: 0 12px 28px rgba(66, 53, 43, 0.055);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 內層細框讓節氣卡更接近一張可分享的典雅題箋。 */
.zeji-solar-card::before {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(185, 140, 79, 0.20);
  border-radius: 13px;
  pointer-events: none;
}

.zeji-solar-card > * {
  position: relative;
  z-index: 1;
}

.zeji-solar-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(194, 131, 44, 0.12);
}

/* 下一個節氣因尚未交節，整張卡片（含底圖與文字）改為 50% 透明度表示節氣未到 */
.card-next-term {
  opacity: 0.58;
  filter: saturate(0.72);
  transition: opacity 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.card-next-term:hover {
  opacity: 0.88;
  filter: saturate(0.94);
}

.zeji-term-badge-tag {
  align-self: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 5px 11px;
  border-radius: 9999px;
  background: rgba(255, 253, 247, 0.80);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #9f6c24;
  border: 1px solid rgba(194, 131, 44, 0.35);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.zeji-term-badge-tag.current {
  background: rgba(255, 255, 255, 0.90);
  color: #2b6e39;
  border-color: rgba(66, 122, 75, 0.35);
}

.zeji-term-name-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 12px 0 7px;
  text-align: center;
}

.zeji-term-overline {
  display: block;
  width: 100%;
  color: #9b794e;
  font-family: Georgia, "Songti TC", "Noto Serif TC", serif;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.zeji-term-overline-en {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
}

.zeji-term-overline-zh {
  margin-top: 3px;
  margin-bottom: 7px;
  font-family: "Songti TC", "Noto Serif TC", serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  padding-left: 0.28em;
}

.zeji-term-emoji {
  display: none !important;
}

.zeji-term-title {
  font-family: "Songti TC", "Noto Serif TC", "Source Han Serif TC", "MingLiU", serif;
  font-size: 3.35rem;
  font-weight: 700;
  color: var(--color-coffee-dark, #241c16);
  margin: 0;
  letter-spacing: 0.22em;
  padding-left: 0.22em;
  line-height: 1.1;
  text-shadow: 0 2px 10px rgba(255, 255, 255, 0.92);
}

.zeji-term-datetime {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: rgba(255, 253, 248, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 8px 11px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.zeji-term-lbl {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--color-coffee-muted, #7c6857);
}

.zeji-term-datetime strong {
  font-size: 0.88rem;
  color: var(--color-coffee, #2d221a);
}

.zeji-term-countdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 9px;
  background: rgba(255, 253, 248, 0.68);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  font-size: 0.8rem;
  color: var(--color-coffee, #3d3027);
}

.zeji-days-pill {
  font-size: 0.82rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 8px;
  background: rgba(194, 131, 44, 0.15);
  color: #9f6c24;
}

.zeji-days-pill.current {
  background: rgba(66, 122, 75, 0.16);
  color: #256632;
}

.zeji-term-tip {
  font-family: "Songti TC", "Noto Serif TC", serif;
  font-size: 0.75rem;
  line-height: 1.65;
  color: var(--color-coffee, #3d3027);
  margin: 0;
  padding: 9px 10px;
  background: rgba(255, 253, 248, 0.76);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

/* 中央今日通書卡片 */
/* 中央今日通書卡片 · 台灣傳統手撕日曆風格排版 */
.zeji-today-center-card {
  background: linear-gradient(180deg, #fffefa 0%, #fbf7ef 100%);
  border: 1.5px solid rgba(179, 32, 29, 0.28);
  border-radius: 20px;
  padding: 16px 20px 22px;
  box-shadow: 0 8px 30px rgba(66, 53, 43, 0.08), 0 2px 6px rgba(179, 32, 29, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  position: relative;
  overflow: hidden;
}

/* 傳統撕曆金屬裝訂頭與撕孔意象 + 前後日快速切換 */
.cal-binder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, #87201d 0%, #b3201d 50%, #87201d 100%);
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 12px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 2px 6px rgba(135, 32, 29, 0.25);
  position: relative;
}

.cal-binder-center {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cal-binder-rivet {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe6a3 0%, #d4a036 60%, #8c6014 100%);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(255, 255, 255, 0.4);
}

.cal-binder-title {
  font-family: "Songti TC", "Noto Serif TC", serif;
  font-size: 0.84rem;
  letter-spacing: 2px;
  font-weight: 700;
  color: #fff6e5;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.cal-nav-btn {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  padding: 3px 9px;
  border-radius: 8px;
  font-size: 0.74rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  transition: all 0.15s ease;
}

.cal-nav-btn:hover {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.55);
  transform: translateY(-1px);
}

/* 頂部資訊條：西元年 · 月份 · 民國紀年 · 歲次干支與生肖 */
.cal-header-meta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 4px 4px 10px;
  border-bottom: 1.5px solid rgba(179, 32, 29, 0.15);
}

.cal-meta-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.82rem;
  color: var(--color-coffee, #3d3027);
}

.cal-greg-year strong,
.cal-roc-year strong {
  font-weight: 700;
  color: #87201d;
}

.cal-roc-year {
  font-size: 0.74rem;
  color: var(--color-coffee-muted, #968679);
}

.cal-meta-center {
  display: flex;
  justify-content: center;
}

.cal-month-badge {
  position: relative;
  background: transparent;
  color: #9d2622;
  font-family: "Songti TC", "Noto Serif TC", serif;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 2px 20px;
  letter-spacing: 0.22em;
}

.cal-month-badge::before,
.cal-month-badge::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 12px;
  height: 1px;
  background: rgba(157, 38, 34, 0.28);
}

.cal-month-badge::before {
  left: 0;
}

.cal-month-badge::after {
  right: 0;
}

.cal-meta-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 0.82rem;
  color: var(--color-coffee, #3d3027);
}

.cal-year-ganzhi strong {
  color: #87201d;
}

.cal-zodiac-tag {
  font-size: 0.74rem;
  color: var(--color-coffee-muted, #968679);
}

/* 核心主體：直式排版，日期放中間，放大 100%，粗體字 */
.cal-center-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 24px 12px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 16px;
}

/* 節慶視覺：景物與人物收在左右兩側，中央日期仍保有安靜的閱讀留白。 */
.cal-center-hero.has-major-festival-art {
  min-height: 230px;
  margin: 2px 0 4px;
  padding-top: 14px;
  padding-bottom: 15px;
  overflow: visible;
  background: var(--festival-solid-bg, #faf3df);
  border: 1px solid var(--festival-accent, #b07820);
  z-index: 1;
}

.cal-center-hero.has-major-festival-art::before {
  content: none;
}

.cal-major-festival-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  filter: none;
  pointer-events: none;
  user-select: none;
}

/* 人物主題節慶在日曆中退後一層，避免插畫搶過日期資訊；分享圖仍由 Canvas 以 100% 呈現。 */
.festival-mothers-day .cal-major-festival-art,
.festival-fathers-day .cal-major-festival-art,
.festival-childrens-day .cal-major-festival-art,
.festival-double-ninth .cal-major-festival-art {
  opacity: 0.8;
}

/* 四大節日保留原本橫幅底格高度，去背插畫則依 3:2 原圖比例向上下越界。 */
.festival-new-year .cal-major-festival-art,
.festival-dragon-boat .cal-major-festival-art,
.festival-zhongyuan .cal-major-festival-art,
.festival-mid-autumn .cal-major-festival-art {
  inset: 50% -38px auto;
  width: calc(100% + 76px);
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  transform: translateY(-50%);
}

.cal-header-meta,
.cal-festivals-container,
.zeji-inspect-banner {
  position: relative;
  z-index: 3;
}

.cal-center-hero.has-major-festival-art > :not(.cal-major-festival-art) {
  position: relative;
  z-index: 2;
}

.cal-major-festival-caption {
  position: absolute !important;
  top: 14px;
  right: 17px;
  writing-mode: vertical-rl;
  font-family: "Songti TC", "Noto Serif TC", serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(117, 79, 37, 0.70);
}

.cal-center-hero.has-major-festival-art .cal-giant-date {
  text-shadow: 0 0 22px rgba(255, 253, 248, 0.98), 0 6px 22px rgba(89, 56, 28, 0.12);
}

.cal-weekday-badge {
  width: min(100%, 280px);
  display: grid;
  grid-template-columns: 1fr auto auto 1fr;
  align-items: center;
  gap: 9px;
  padding: 0;
  margin-bottom: 8px;
  background: transparent !important;
}

.cal-weekday-badge::before,
.cal-weekday-badge::after {
  content: '';
  height: 1px;
  background: currentColor;
  opacity: 0.20;
}

.cal-weekday-zh {
  font-family: "Songti TC", "Noto Serif TC", serif;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.cal-weekday-en {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  opacity: 0.70;
}

.cal-weekday-badge.is-sunday {
  color: #b3201d;
  background: rgba(179, 32, 29, 0.08);
}

.cal-weekday-badge.is-saturday {
  color: #1b6843;
  background: rgba(27, 104, 67, 0.08);
}

.cal-weekday-badge.is-workday {
  color: #3d3027;
  background: rgba(66, 53, 43, 0.05);
}

/* 巨型粗體日期 (放大 100%，居中震撼主角) */
.cal-date-number-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  line-height: 0.82;
  padding: 0 0 8px;
}

.cal-giant-date {
  font-family: Didot, "Bodoni 72", "Bodoni MT", Georgia, "Noto Serif TC", serif;
  font-size: 6.35rem;
  font-weight: 500;
  line-height: 0.82;
  letter-spacing: -0px;
  text-align: center;
  user-select: none;
}

.cal-giant-date.color-sunday,
.cal-giant-date.color-holiday {
  color: #a92521;
  text-shadow: 0 8px 24px rgba(169, 37, 33, 0.10);
}

.cal-giant-date.color-saturday {
  color: #1b6843;
  text-shadow: 0 3px 12px rgba(27, 104, 67, 0.15);
}

.cal-giant-date.color-workday {
  color: #2c221b;
  text-shadow: 0 2px 8px rgba(44, 34, 27, 0.1);
}

/* 農曆月份與日期直式襯托條 */
.cal-lunar-highlight-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: min(100%, 340px);
  margin-top: 3px;
  padding: 8px 12px;
  background: transparent;
  border-top: 1px solid rgba(156, 108, 45, 0.20);
  border-bottom: 1px solid rgba(156, 108, 45, 0.20);
}

.cal-lunar-prefix {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: #967143;
}

.cal-lunar-name {
  font-family: "Songti TC", "Noto Serif TC", serif;
  font-size: 1.22rem;
  font-weight: 700;
  color: #6f4820;
  margin: 0;
  letter-spacing: 0.15em;
}

.cal-day-ganzhi-badge {
  position: relative;
  font-size: 0.72rem;
  font-weight: 600;
  color: #80633f;
  padding-left: 15px;
  letter-spacing: 0.06em;
}

.cal-day-ganzhi-badge::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 16px;
  background: rgba(156, 108, 45, 0.28);
  transform: translateY(-50%);
}

/* 節日、神佛聖誕成道日與十齋日標籤專區 */
.cal-festivals-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid rgba(66, 53, 43, 0.08);
  border-radius: 12px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02);
}

.cal-fest-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.84rem;
}

.cal-fest-card.holiday {
  background: rgba(179, 32, 29, 0.06);
  border: 1px solid rgba(179, 32, 29, 0.2);
  color: #87201d;
}

.cal-fest-card.deity {
  background: rgba(194, 131, 44, 0.08);
  border: 1px solid rgba(194, 131, 44, 0.25);
  color: #8c5b1c;
}

.fest-badge-icon {
  font-size: 1.15rem;
  line-height: 1;
}

.fest-content {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}

.fest-category {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.05);
  letter-spacing: 0.5px;
}

.fest-title-text {
  font-family: "Songti TC", "Noto Serif TC", serif;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* 狀態標籤條 (十齋日、朔望、天赦日、節氣) */
.cal-tags-badge-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding-top: 2px;
}

.cal-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
}

.cal-status-pill.zhai {
  background: rgba(27, 104, 67, 0.08);
  border: 1px solid rgba(27, 104, 67, 0.25);
  color: #165838;
}

.cal-status-pill.zhai.shuo {
  background: rgba(84, 110, 122, 0.1);
  border-color: rgba(84, 110, 122, 0.3);
  color: #37474f;
}

.cal-status-pill.zhai.wang {
  background: rgba(194, 131, 44, 0.12);
  border-color: rgba(194, 131, 44, 0.3);
  color: #8c5b1c;
}

.cal-status-pill.special.tianshe {
  background: linear-gradient(135deg, rgba(255, 238, 187, 0.8) 0%, rgba(255, 214, 102, 0.6) 100%);
  border: 1px solid #d4a036;
  color: #734c00;
  box-shadow: 0 1px 4px rgba(212, 160, 54, 0.2);
}

.cal-status-pill.special.term {
  background: rgba(43, 110, 57, 0.1);
  border: 1px solid rgba(43, 110, 57, 0.25);
  color: #1f612d;
}

.pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* 吉神方位 */
.cal-god-directions {
  font-size: 0.82rem;
  color: var(--color-coffee, #3d3027);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.meta-sep {
  color: rgba(66, 53, 43, 0.25);
  margin: 0 2px;
}

.zeji-inspect-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(194, 131, 44, 0.1);
  border: 1px solid rgba(194, 131, 44, 0.3);
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 0.8rem;
  color: #9f6c24;
  font-weight: 600;
}

.btn-zeji-back-today {
  background: #c2832c;
  color: #ffffff;
  border: none;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.76rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.zeji-pillar-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.zeji-pillar-pill {
  background: rgba(66, 53, 43, 0.05);
  border: 1px solid rgba(66, 53, 43, 0.1);
  border-radius: 8px;
  padding: 5px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--color-coffee, #3d3027);
}

.zeji-pillar-pill .lbl {
  font-size: 0.72rem;
  color: var(--color-coffee-muted, #968679);
}

.zeji-pillar-pill.primary {
  background: rgba(194, 131, 44, 0.1);
  border-color: rgba(194, 131, 44, 0.3);
  color: #9f6c24;
}

.zeji-pillar-pill.gold {
  background: rgba(194, 131, 44, 0.14);
  border-color: #c2832c;
  color: #8c5b1c;
}

.zeji-pillar-pill.dark {
  background: rgba(90, 80, 75, 0.08);
  border-color: rgba(90, 80, 75, 0.2);
  color: #554942;
}

.zeji-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding-top: 10px;
  border-top: 1px dashed rgba(66, 53, 43, 0.1);
  font-size: 0.84rem;
}

.zeji-meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--color-coffee, #3d3027);
}

.zeji-meta-item.clash {
  color: #b83a38;
}

.zeji-meta-item.clash .clash-text {
  font-weight: 700;
}

/* 2. 今日通書宜忌與吉時卡片 */
.zeji-almanac-detail-card,
.zeji-workbench-card {
  background: #ffffff;
  border: 1px solid rgba(194, 131, 44, 0.2);
  border-radius: 20px;
  padding: 24px 26px;
  box-shadow: 0 4px 18px rgba(66, 53, 43, 0.05);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.zeji-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(66, 53, 43, 0.08);
  padding-bottom: 12px;
}

.zeji-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.zeji-card-title .icon-gold {
  font-size: 1.25rem;
}

.zeji-card-title h3 {
  font-family: "Songti TC", "Noto Serif TC", serif;
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--color-coffee-dark, #241c16);
  margin: 0;
}

.zeji-date-tag,
.zeji-badge-hint {
  font-size: 0.78rem;
  color: var(--color-coffee-muted, #968679);
  background: rgba(66, 53, 43, 0.05);
  padding: 3px 9px;
  border-radius: 6px;
}

.zeji-header-actions-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-zeji-act-shuwen {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #c2832c 0%, #a4671e 100%);
  color: #ffffff;
  border: none;
  border-radius: 9999px;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(194, 131, 44, 0.25);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-zeji-act-shuwen:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(194, 131, 44, 0.35);
  filter: brightness(1.06);
}

.btn-zeji-act-shuwen:active {
  transform: translateY(0);
}

/* 宜忌雙欄方塊 */
.zeji-yiji-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.zeji-yiji-box {
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.zeji-yiji-box.box-yi {
  background: rgba(66, 122, 75, 0.06);
  border: 1px solid rgba(66, 122, 75, 0.25);
}

.zeji-yiji-box.box-ji {
  background: rgba(184, 58, 56, 0.05);
  border: 1px solid rgba(184, 58, 56, 0.25);
}

.yiji-tag-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.yiji-badge {
  font-size: 0.92rem;
  font-weight: 700;
}

.yiji-badge.yi {
  color: #2b6e39;
}

.yiji-badge.ji {
  color: #b83a38;
}

.yiji-sub {
  font-size: 0.76rem;
  color: var(--color-coffee-muted, #968679);
}

.yiji-pills-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pill-yi {
  background: #ffffff;
  color: #2b6e39;
  border: 1px solid rgba(66, 122, 75, 0.3);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
}

.pill-ji {
  background: #ffffff;
  color: #b83a38;
  border: 1px solid rgba(184, 58, 56, 0.3);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
}

/* 十二時辰輪盤一覽 */
.zeji-hours-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px dashed rgba(66, 53, 43, 0.1);
}

.zeji-hours-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.hours-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-coffee, #3d3027);
}

.hours-hint {
  font-size: 0.74rem;
  color: var(--color-coffee-muted, #968679);
}

.zeji-hours-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 6px;
}

.zeji-hour-cell {
  background: rgba(66, 53, 43, 0.03);
  border: 1px solid rgba(66, 53, 43, 0.1);
  border-radius: 8px;
  padding: 8px 4px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: default;
  transition: all 0.2s ease;
}

.zeji-hour-cell.is-good {
  background: rgba(194, 131, 44, 0.08);
  border-color: rgba(194, 131, 44, 0.3);
}

.hour-time-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-coffee, #3d3027);
}

.hour-clock {
  font-size: 0.68rem;
  color: var(--color-coffee-muted, #968679);
}

.hour-god-pill {
  font-size: 0.72rem;
  padding: 2px 4px;
  border-radius: 4px;
  display: flex;
  gap: 2px;
}

.hour-god-pill.gold {
  color: #9f6c24;
  font-weight: 700;
}

/* 3. 多需求智能擇日工坊 */
.zeji-workbench-desc {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-coffee, #3d3027);
  margin: 0;
}

.zeji-needs-selector {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.zeji-selector-label {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--color-coffee, #3d3027);
}

.zeji-needs-chips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}

.zeji-need-chip {
  background: #ffffff;
  border: 1.5px solid rgba(66, 53, 43, 0.15);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-coffee, #3d3027);
}

.zeji-need-chip:hover {
  border-color: #c2832c;
  transform: translateY(-1px);
}

.zeji-need-chip.active {
  background: linear-gradient(135deg, rgba(194, 131, 44, 0.14) 0%, rgba(194, 131, 44, 0.08) 100%);
  border-color: #c2832c;
  color: #8c5b1c;
  box-shadow: 0 2px 8px rgba(194, 131, 44, 0.15);
}

.chip-icon {
  font-size: 1.1rem;
}

.chip-name {
  flex: 1;
  text-align: left;
}

.chip-check {
  font-size: 0.8rem;
  color: #c2832c;
  font-weight: 700;
}

/* 篩選工具列 */
.zeji-filter-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(66, 53, 43, 0.03);
  border-radius: 12px;
}

.zeji-range-options {
  display: flex;
  align-items: center;
  gap: 8px;
}

.range-lbl {
  font-size: 0.82rem;
  color: var(--color-coffee-muted, #968679);
}

.btn-range-pill {
  background: #ffffff;
  border: 1px solid rgba(66, 53, 43, 0.15);
  padding: 5px 12px;
  border-radius: 9999px;
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--color-coffee, #3d3027);
  transition: all 0.2s ease;
}

.btn-range-pill.active {
  background: #c2832c;
  color: #ffffff;
  border-color: #a86e1f;
  font-weight: 600;
}

.zeji-selected-summary {
  font-size: 0.82rem;
  color: var(--color-coffee-muted, #968679);
}

.zeji-selected-summary strong {
  color: #9f6c24;
}

/* 4. 推薦結果清單 */
.zeji-results-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.zeji-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.zeji-results-header h4 {
  font-family: "Songti TC", "Noto Serif TC", serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-coffee-dark, #241c16);
  margin: 0;
}

.results-count {
  font-size: 0.82rem;
  color: var(--color-coffee-muted, #968679);
}

.results-count strong {
  color: #9f6c24;
}

.zeji-empty-results {
  text-align: center;
  padding: 36px 20px;
  background: rgba(66, 53, 43, 0.02);
  border-radius: 14px;
  color: var(--color-coffee-muted, #968679);
  font-size: 0.9rem;
}

.zeji-empty-results .empty-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 10px;
}

.zeji-results-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.zeji-result-card {
  background: #ffffff;
  border: 1px solid rgba(66, 53, 43, 0.12);
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 10px rgba(66, 53, 43, 0.03);
}

.zeji-result-card:hover {
  border-color: rgba(194, 131, 44, 0.4);
  box-shadow: 0 4px 16px rgba(194, 131, 44, 0.08);
}

.zeji-result-card.top-grade {
  border-left: 4px solid #c2832c;
  background: linear-gradient(135deg, #ffffff 0%, #fefcf9 100%);
}

.res-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px dashed rgba(66, 53, 43, 0.08);
  padding-bottom: 10px;
}

.res-date-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.res-index-badge {
  font-size: 0.74rem;
  font-weight: 600;
  background: rgba(66, 53, 43, 0.06);
  padding: 2px 8px;
  border-radius: 6px;
  color: var(--color-coffee-muted, #968679);
}

.res-solar-date {
  font-family: "Songti TC", "Noto Serif TC", serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-coffee-dark, #241c16);
  margin: 0;
}

.res-lunar-date {
  font-size: 0.86rem;
  color: #9f6c24;
  font-weight: 600;
}

.res-grade-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.res-stars {
  color: #d97706;
  font-size: 0.94rem;
  letter-spacing: 1px;
}

.res-grade-badge {
  font-size: 0.76rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(66, 53, 43, 0.08);
  color: var(--color-coffee, #3d3027);
}

.res-grade-badge.gold {
  background: rgba(194, 131, 44, 0.15);
  color: #9f6c24;
  border: 1px solid rgba(194, 131, 44, 0.3);
}

.res-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.res-matched-needs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.res-matched-needs .lbl {
  font-size: 0.8rem;
  color: var(--color-coffee-muted, #968679);
}

.matched-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.res-pill-matched {
  background: rgba(66, 122, 75, 0.1);
  color: #2b6e39;
  border: 1px solid rgba(66, 122, 75, 0.25);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
}

.res-features-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 0.82rem;
  color: var(--color-coffee, #3d3027);
}

.res-feature-item .ft-lbl {
  color: var(--color-coffee-muted, #968679);
}

.res-clash-text {
  color: #b83a38;
}

.res-reasons-box {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #9f6c24;
  background: rgba(194, 131, 44, 0.06);
  padding: 6px 10px;
  border-radius: 8px;
}

.res-good-hours-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.8rem;
}

.hours-lbl {
  color: var(--color-coffee, #3d3027);
  font-weight: 600;
}

.hours-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.res-hour-pill {
  background: rgba(194, 131, 44, 0.09);
  color: #9f6c24;
  border: 1px solid rgba(194, 131, 44, 0.2);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 600;
}

.res-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px dashed rgba(66, 53, 43, 0.08);
  padding-top: 10px;
}

.btn-res-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-res-action.primary {
  background: linear-gradient(135deg, #c2832c 0%, #9f6c24 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 2px 8px rgba(194, 131, 44, 0.25);
}

.btn-res-action.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(194, 131, 44, 0.35);
}

.btn-res-action.secondary {
  background: #ffffff;
  color: var(--color-coffee, #3d3027);
  border: 1px solid rgba(66, 53, 43, 0.2);
}

.btn-res-action.secondary:hover {
  background: rgba(66, 53, 43, 0.04);
  transform: translateY(-1px);
}

.zeji-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(251, 249, 245, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(66, 53, 43, 0.08);
  flex-shrink: 0;
}

.zeji-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.zeji-brand-title h2 {
  font-family: "Songti TC", "Noto Serif TC", serif;
  font-size: 1.18rem;
  color: var(--color-coffee-dark, #241c16);
  margin: 0;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.zeji-brand-title p {
  font-size: 0.8rem;
  color: var(--color-coffee-muted, #968679);
  margin: 2px 0 0;
}

/* ==========================================================================
   天時擇吉 (Zeji) 響應式佈局 (平板與手機版專屬強化)
   ========================================================================== */
@media (max-width: 1080px) {
  .zeji-solar-trio-grid {
    grid-template-columns: 1fr 1fr;
  }

  .zeji-today-center-card {
    grid-column: 1 / -1;
    order: -1; /* 中央卡片在平板與手機上置頂 */
  }

  .zeji-hours-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* 2. 手機版專屬優化 (<= 768px) */
@media (max-width: 768px) {
  .zeji-content-wrap {
    padding: 12px 14px calc(50px + env(safe-area-inset-bottom, 20px));
  }

  .zeji-main-container {
    gap: 16px;
  }

  /* 節氣與通書排版：今日通書置頂，左右兩節氣在下方並列呈現 */
  .zeji-solar-trio-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .zeji-today-center-card {
    grid-column: 1 / -1;
    order: -1;
    padding: 16px 14px;
    border-radius: 16px;
    gap: 12px;
  }

  .cal-giant-date {
    font-size: 4.4rem;
    line-height: 0.95;
  }

  .cal-center-hero.has-major-festival-art {
    min-height: 206px;
    padding-inline: 12px;
  }

  .cal-major-festival-art {
    opacity: 1;
  }

  .festival-new-year .cal-major-festival-art,
  .festival-dragon-boat .cal-major-festival-art,
  .festival-zhongyuan .cal-major-festival-art,
  .festival-mid-autumn .cal-major-festival-art {
    inset: 50% -24px auto;
    width: calc(100% + 48px);
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: contain;
    transform: translateY(-50%);
  }

  .cal-major-festival-caption {
    top: 12px;
    right: 10px;
    font-size: 0.6rem;
  }

  .cal-header-meta {
    padding: 4px 0 8px;
    font-size: 0.78rem;
  }

  .cal-month-badge {
    font-size: 1rem;
    padding: 3px 12px;
  }

  .cal-lunar-name {
    font-size: 1.2rem;
  }

  .cal-fest-card {
    padding: 5px 8px;
    font-size: 0.78rem;
  }

  /* 四柱神煞徽章 2x2 整齊排列 */
  .zeji-pillar-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    width: 100%;
  }

  .zeji-pillar-pill {
    padding: 6px 8px;
    font-size: 0.78rem;
    justify-content: flex-start;
  }

  .zeji-meta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-top: 8px;
    font-size: 0.8rem;
  }

  /* 節氣卡片手機版緊湊並排 */
  .card-next-term,
  .card-curr-term {
    padding: 12px 10px;
    border-radius: 14px;
    gap: 6px;
  }

  .card-next-term .zeji-term-badge-tag,
  .card-curr-term .zeji-term-badge-tag {
    font-size: 0.7rem;
    padding: 2px 7px;
  }

  .card-next-term .zeji-term-title,
  .card-curr-term .zeji-term-title {
    font-size: 2.2rem;
    letter-spacing: 2px;
    line-height: 1.1;
  }

  .card-next-term .zeji-term-datetime strong,
  .card-curr-term .zeji-term-datetime strong {
    font-size: 0.8rem;
  }

  .card-next-term .zeji-days-pill,
  .card-curr-term .zeji-days-pill {
    font-size: 0.74rem;
    padding: 2px 6px;
  }

  /* 手機版折疊冗長古文箴言，保持雙節氣並列清爽高度 */
  .card-next-term .zeji-term-tip,
  .card-curr-term .zeji-term-tip {
    display: none;
  }

  /* 今日宜忌與時辰卡片 */
  .zeji-almanac-detail-card,
  .zeji-workbench-card {
    padding: 16px 14px;
    border-radius: 16px;
    gap: 14px;
  }

  .zeji-card-title h3 {
    font-size: 1.08rem;
  }

  .zeji-yiji-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .zeji-yiji-box {
    padding: 12px 12px;
    border-radius: 12px;
  }

  .pill-yi,
  .pill-ji {
    font-size: 0.78rem;
    padding: 3px 8px;
  }

  .zeji-hours-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
  }

  .zeji-hour-cell {
    padding: 6px 2px;
    min-height: 52px;
    border-radius: 8px;
  }

  .hour-time-name {
    font-size: 0.78rem;
  }

  .hour-clock {
    font-size: 0.66rem;
  }

  .hour-god-pill {
    font-size: 0.68rem;
  }

  /* 擇日工坊多選標籤 (44px 觸控友善標準) */
  .zeji-needs-chips-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .zeji-need-chip {
    padding: 10px 10px;
    min-height: 46px;
    border-radius: 12px;
    font-size: 0.84rem;
    -webkit-tap-highlight-color: transparent;
  }

  .zeji-need-chip:active {
    transform: scale(0.98);
  }

  .chip-name {
    font-size: 0.84rem;
  }

  /* 搜尋區間分段按鈕 */
  .zeji-filter-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
  }

  .zeji-range-options {
    display: flex;
    width: 100%;
    gap: 6px;
  }

  .range-lbl {
    display: none;
  }

  .btn-range-pill {
    flex: 1;
    text-align: center;
    padding: 8px 2px;
    min-height: 38px;
    font-size: 0.8rem;
    border-radius: 8px;
    font-weight: 600;
    -webkit-tap-highlight-color: transparent;
  }

  .btn-range-pill:active {
    transform: scale(0.97);
  }

  .zeji-selected-summary {
    font-size: 0.78rem;
    line-height: 1.4;
  }

  /* 吉日推薦卡片手機版排版 */
  .zeji-result-card {
    padding: 14px 12px;
    border-radius: 14px;
    gap: 10px;
  }

  .res-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .res-date-group {
    width: 100%;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
  }

  .res-solar-date {
    font-size: 1.1rem;
  }

  .res-grade-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 6px;
    border-top: 1px dashed rgba(66, 53, 43, 0.08);
  }

  .res-features-row {
    flex-direction: column;
    gap: 4px;
    font-size: 0.78rem;
  }

  .res-reasons-box {
    font-size: 0.78rem;
    line-height: 1.45;
    padding: 6px 10px;
    border-radius: 8px;
  }

  .res-good-hours-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: 0.78rem;
  }

  .res-card-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding-top: 8px;
  }

  .btn-res-action {
    width: 100%;
    justify-content: center;
    min-height: 42px;
    font-size: 0.84rem;
    border-radius: 10px;
    -webkit-tap-highlight-color: transparent;
  }

  .btn-res-action:active {
    transform: scale(0.98);
  }
}

/* 3. 小型手機螢幕微調 (<= 380px) */
@media (max-width: 380px) {
  .zeji-solar-trio-grid {
    gap: 6px;
  }

  .card-next-term,
  .card-curr-term {
    padding: 10px 8px;
  }

  .card-next-term .zeji-term-title,
  .card-curr-term .zeji-term-title {
    font-size: 1.85rem;
    letter-spacing: 1.5px;
    line-height: 1.1;
  }

  .zeji-needs-chips-grid {
    gap: 6px;
  }

  .zeji-need-chip {
    padding: 8px 6px;
    font-size: 0.8rem;
  }

  .chip-name {
    font-size: 0.8rem;
  }
}

/* ==========================================================================
   吉日備忘箋 (Zeji Sticky Notes / Pocket Memo) 樣式
   ========================================================================== */

/* 備忘箋按鈕通用樣式 */
.btn-zeji-memos-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(194, 131, 44, 0.1);
  color: #9f6c24;
  border: 1px solid rgba(194, 131, 44, 0.3);
  padding: 6px 13px;
  border-radius: 9999px;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

/* 右側欄：上方獨立一格「吉日備忘箋」，下方「白露」 */
.zeji-curr-term-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

.zeji-curr-term-col .card-curr-term {
  flex: 1;
}

/* 獨立一格：吉日備忘箋卡片 */
.zeji-memo-standalone-card {
  background: #ffffff;
  border: 1px solid rgba(194, 131, 44, 0.28);
  border-radius: 16px;
  padding: 11px 15px;
  box-shadow: 0 4px 14px rgba(66, 53, 43, 0.04);
  cursor: pointer;
  transition: all 0.22s ease;
  user-select: none;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.zeji-memo-standalone-card:hover {
  transform: translateY(-2px);
  border-color: #c2832c;
  background: #fffdfa;
  box-shadow: 0 6px 18px rgba(194, 131, 44, 0.14);
}

.zeji-memo-standalone-card:active {
  transform: translateY(0);
}

.memo-standalone-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}

.memo-standalone-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.memo-standalone-icon {
  font-size: 1.35rem;
  line-height: 1;
  flex-shrink: 0;
}

.memo-standalone-text-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.memo-standalone-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #7c4f14;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.memo-standalone-desc {
  font-size: 0.72rem;
  color: #a88452;
  line-height: 1.2;
}

.memo-standalone-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.memo-arrow-icon {
  color: #c2832c;
  transition: transform 0.2s ease;
}

.zeji-memo-standalone-card:hover .memo-arrow-icon {
  transform: translateX(2px);
}

.btn-zeji-memos-trigger.in-workbench {
  padding: 5px 12px;
  font-size: 0.82rem;
}

.btn-zeji-memos-trigger:hover {
  background: rgba(194, 131, 44, 0.18);
  border-color: #c2832c;
  transform: translateY(-1px);
}

.memo-trigger-icon {
  font-size: 0.95rem;
}

.memo-badge {
  background: #c2832c;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* 結果區塊快捷備忘入口 */
.results-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-memo-quick-view {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #ffffff;
  border: 1px solid rgba(194, 131, 44, 0.35);
  color: #9f6c24;
  padding: 5px 12px;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 4px rgba(194, 131, 44, 0.08);
}

.btn-memo-quick-view:hover {
  background: rgba(194, 131, 44, 0.08);
  border-color: #c2832c;
}

.btn-memo-quick-view strong {
  color: #c2832c;
}

/* 卡片存入備忘按鈕樣式 */
.btn-res-action.btn-res-memo {
  background: #ffffff;
  color: #9f6c24;
  border: 1px solid rgba(194, 131, 44, 0.4);
}

.btn-res-action.btn-res-memo:hover {
  background: rgba(194, 131, 44, 0.08);
  border-color: #c2832c;
  transform: translateY(-1px);
}

.btn-memo-pin-icon {
  font-size: 0.95rem;
  line-height: 1;
  display: inline-block;
}

.btn-res-action.memo-saved {
  background: rgba(46, 125, 50, 0.1);
  color: #2e7d32;
  border: 1px solid rgba(46, 125, 50, 0.3);
}

.btn-res-action.memo-saved:hover {
  background: rgba(211, 47, 47, 0.08);
  color: #c62828;
  border-color: rgba(211, 47, 47, 0.3);
}

/* ==========================================================================
   吉日備忘箋 彈窗與便條紙卡片 (Sticky Notes Modal)
   ========================================================================== */
.zeji-memo-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: rgba(24, 18, 14, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: zejiModalFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.zeji-memo-modal-overlay.active {
  display: flex;
}

@keyframes zejiModalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.zeji-memo-modal-box {
  background: #faf8f5;
  border-radius: 22px;
  width: 860px;
  max-width: 95vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(194, 131, 44, 0.15);
  border: 1px solid rgba(194, 131, 44, 0.3);
}

/* 視窗頂部標題 */
.zeji-memo-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px 14px;
  background: #ffffff;
  border-bottom: 1px solid rgba(66, 53, 43, 0.08);
  flex-shrink: 0;
}

.modal-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-title-icon {
  font-size: 1.3rem;
}

.modal-header-title h3 {
  font-family: "Songti TC", "Noto Serif TC", serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-coffee-dark, #241c16);
  margin: 0;
}

.memo-count-tag {
  background: #c2832c;
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
}

.modal-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.memo-clear-container {
  display: inline-flex;
  align-items: center;
}

.memo-clear-confirm-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(211, 47, 47, 0.08);
  border: 1px solid rgba(211, 47, 47, 0.35);
  padding: 3px 6px 3px 10px;
  border-radius: 9999px;
  animation: zejiModalFadeIn 0.18s ease;
}

.clear-confirm-tip {
  font-size: 0.76rem;
  font-weight: 700;
  color: #c62828;
  white-space: nowrap;
}

.btn-clear-do-yes {
  background: #c62828;
  color: #ffffff;
  border: none;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-clear-do-yes:hover {
  background: #b71c1c;
  transform: scale(1.02);
}

.btn-clear-do-no {
  background: #ffffff;
  color: var(--color-coffee, #3d3027);
  border: 1px solid rgba(66, 53, 43, 0.2);
  padding: 4px 8px;
  border-radius: 9999px;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-clear-do-no:hover {
  background: rgba(66, 53, 43, 0.06);
}

.btn-memo-clear-all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid rgba(211, 47, 47, 0.3);
  color: #c62828;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-memo-clear-all:hover {
  background: rgba(211, 47, 47, 0.08);
}

.btn-memo-close {
  background: rgba(66, 53, 43, 0.06);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-coffee, #3d3027);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-memo-close:hover {
  background: rgba(66, 53, 43, 0.12);
  transform: rotate(90deg);
}

.zeji-memo-modal-subtitle {
  padding: 10px 24px;
  background: rgba(194, 131, 44, 0.05);
  border-bottom: 1px dashed rgba(194, 131, 44, 0.2);
  font-size: 0.82rem;
  color: var(--color-coffee-muted, #968679);
  line-height: 1.5;
  flex-shrink: 0;
}

.zeji-memo-modal-subtitle strong {
  color: #9f6c24;
}

/* 備忘便籤卡片滾動區 */
.zeji-memo-cards-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px 28px;
  -webkit-overflow-scrolling: touch;
}

/* 便籤網格排版 (雙欄桌面，單欄手機) */
.zeji-sticky-notes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

/* 宣紙/牛皮便條紙卡片 */
.zeji-sticky-card {
  position: relative;
  background: linear-gradient(175deg, #fffefb 0%, #fbf5e8 100%);
  border: 1px solid rgba(194, 131, 44, 0.32);
  border-radius: 16px;
  padding: 20px 18px 16px;
  box-shadow: 0 8px 24px rgba(66, 53, 43, 0.06), 0 2px 6px rgba(194, 131, 44, 0.1);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.zeji-sticky-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(194, 131, 44, 0.16);
  border-color: #c2832c;
}

/* 頂部圖釘裝飾 */
.sticky-pin-badge {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.pin-symbol {
  font-size: 1.1rem;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.15));
}

/* 便籤頂部標題 */
.sticky-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px dashed rgba(194, 131, 44, 0.25);
  padding-bottom: 10px;
}

.sticky-date-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sticky-solar-date {
  font-family: "Songti TC", "Noto Serif TC", serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-coffee-dark, #241c16);
}

.sticky-lunar-date {
  font-size: 0.82rem;
  color: #9f6c24;
  font-weight: 600;
}

.sticky-grade-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.sticky-stars {
  color: #d97706;
  font-size: 0.82rem;
  letter-spacing: 1px;
}

.sticky-grade-pill {
  background: rgba(194, 131, 44, 0.15);
  color: #9f6c24;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid rgba(194, 131, 44, 0.3);
}

/* 事項列 */
.sticky-needs-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.sticky-lbl {
  font-size: 0.78rem;
  color: var(--color-coffee-muted, #968679);
  font-weight: 600;
}

.sticky-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.sticky-pill-need {
  background: rgba(46, 125, 50, 0.09);
  color: #2e7d32;
  border: 1px solid rgba(46, 125, 50, 0.25);
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 600;
}

/* 方位與神煞指南 2x2 緊湊網格 */
.sticky-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(194, 131, 44, 0.15);
  border-radius: 10px;
  padding: 8px 10px;
}

.meta-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.meta-cell.compass-cell,
.meta-cell.clash-cell {
  grid-column: 1 / -1;
}

.cell-k {
  font-size: 0.72rem;
  color: var(--color-coffee-muted, #968679);
}

.cell-v {
  font-size: 0.78rem;
  color: var(--color-coffee-dark, #241c16);
}

.compass-v {
  color: #9f6c24;
}

.clash-v {
  color: #b83a38;
}

/* 推薦吉時 */
.sticky-hours-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.sticky-hours-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.hour-tag {
  background: rgba(194, 131, 44, 0.1);
  color: #9f6c24;
  border: 1px solid rgba(194, 131, 44, 0.22);
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 600;
}

/* 自訂便條備註框 */
.sticky-note-editbox {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px dashed rgba(194, 131, 44, 0.35);
  border-radius: 10px;
  padding: 8px 10px;
}

.note-edit-label {
  font-size: 0.74rem;
  color: #9f6c24;
  font-weight: 600;
}

.sticky-note-textarea {
  width: 100%;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--color-coffee, #3d3027);
  line-height: 1.45;
  resize: none;
  outline: none;
  padding: 2px 0 0;
}

.sticky-note-textarea::placeholder {
  color: rgba(150, 134, 121, 0.65);
  font-size: 0.78rem;
}

/* 便籤底部按鈕列 */
.sticky-footer-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 1px dashed rgba(194, 131, 44, 0.22);
  padding-top: 10px;
  margin-top: 2px;
}

.btn-sticky-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-sticky-act.copy-line {
  flex: 1;
  background: linear-gradient(135deg, #06c755 0%, #05a847 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 2px 6px rgba(6, 199, 85, 0.2);
}

.btn-sticky-act.copy-line:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.btn-sticky-act.apply-sw {
  background: rgba(194, 131, 44, 0.12);
  color: #9f6c24;
  border: 1px solid rgba(194, 131, 44, 0.3);
}

.btn-sticky-act.apply-sw:hover {
  background: rgba(194, 131, 44, 0.2);
  border-color: #c2832c;
}

.btn-sticky-act.delete {
  background: transparent;
  color: var(--color-coffee-muted, #968679);
  border: 1px solid rgba(66, 53, 43, 0.15);
  padding: 6px 8px;
}

.btn-sticky-act.delete:hover {
  background: rgba(211, 47, 47, 0.08);
  color: #c62828;
  border-color: rgba(211, 47, 47, 0.3);
}

/* 備忘箋空狀態 */
.zeji-memo-empty-state {
  text-align: center;
  padding: 48px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--color-coffee-muted, #968679);
}

.empty-pin-art {
  font-size: 3rem;
}

.zeji-memo-empty-state h4 {
  font-family: "Songti TC", "Noto Serif TC", serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-coffee-dark, #241c16);
  margin: 0;
}

.zeji-memo-empty-state p {
  font-size: 0.88rem;
  max-width: 420px;
  line-height: 1.6;
  margin: 0;
}

.btn-memo-start-browse {
  margin-top: 6px;
  background: linear-gradient(135deg, #c2832c 0%, #9f6c24 100%);
  color: #ffffff;
  border: none;
  padding: 8px 20px;
  border-radius: 9999px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(194, 131, 44, 0.25);
  transition: all 0.2s ease;
}

.btn-memo-start-browse:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(194, 131, 44, 0.35);
}

/* ==========================================================================
   吉日備忘箋 手機版響應式優化 (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {
  .zeji-curr-term-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
  }

  .zeji-memo-standalone-card {
    padding: 8px 10px;
    border-radius: 12px;
  }

  .memo-standalone-left {
    gap: 6px;
  }

  .memo-standalone-icon {
    font-size: 1.1rem;
  }

  .memo-standalone-title {
    font-size: 0.8rem;
  }

  .memo-standalone-desc {
    display: none; /* 手機版並排卡片寬度有限，隱藏副標題保持清爽高質感 */
  }

  .memo-arrow-icon {
    width: 14px;
    height: 14px;
  }

  .btn-zeji-memos-trigger.in-workbench {
    padding: 6px 12px;
    font-size: 0.8rem;
  }

  .zeji-memo-modal-overlay {
    padding: 10px;
    align-items: flex-end; /* 手機版底部抽屜彈出質感 */
  }

  .zeji-memo-modal-box {
    width: 100%;
    max-width: 100%;
    max-height: 90vh;
    border-radius: 20px 20px 12px 12px;
  }

  .zeji-memo-modal-header {
    padding: 14px 16px 12px;
  }

  .zeji-memo-modal-subtitle {
    padding: 8px 16px;
    font-size: 0.78rem;
  }

  .zeji-memo-cards-scroll {
    padding: 14px 14px 20px;
  }

  .zeji-sticky-notes-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .zeji-sticky-card {
    padding: 16px 14px 14px;
  }

  .sticky-footer-actions {
    flex-wrap: wrap;
  }

  .btn-sticky-act.copy-line {
    flex: 1 1 100%;
    min-height: 38px;
    font-size: 0.82rem;
  }

  .btn-sticky-act.apply-sw {
    flex: 1;
    min-height: 36px;
  }

  .btn-sticky-act.delete {
    min-height: 36px;
    padding: 0 14px;
  }
}

/* ==========================================================================
   天時擇吉 (Zeji) 撕曆快捷操作列、行事曆按鈕與社群分享彈窗
   ========================================================================== */

/* 1. 傳統撕曆底部快捷動作列 (大日曆卡片下方) */
.cal-quick-actions-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 14px;
  margin-top: 6px;
  border-top: 1px dashed rgba(66, 53, 43, 0.12);
  width: 100%;
}

.btn-cal-act-primary,
.btn-cal-act-share,
.btn-cal-act-sub,
.btn-cal-act-memo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 9999px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-cal-act-primary {
  background: linear-gradient(135deg, #c2832c 0%, #9f6c24 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 2px 8px rgba(194, 131, 44, 0.28);
}

.btn-cal-act-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(194, 131, 44, 0.4);
}

.btn-cal-act-share {
  background: #ffffff;
  color: #7c4f14;
  border: 1px solid rgba(194, 131, 44, 0.4);
  box-shadow: 0 2px 6px rgba(66, 53, 43, 0.04);
}

.btn-cal-act-share:hover {
  background: rgba(194, 131, 44, 0.08);
  border-color: #c2832c;
  transform: translateY(-1px);
}

.btn-cal-act-sub {
  background: transparent;
  color: var(--color-coffee-muted, #968679);
  border: 1px solid rgba(66, 53, 43, 0.15);
  font-size: 0.8rem;
}

.btn-cal-act-sub:hover {
  background: rgba(66, 53, 43, 0.04);
  color: var(--color-coffee, #3d3027);
}

.btn-cal-act-memo {
  background: #ffffff;
  color: #7c4f14;
  border: 1px solid rgba(194, 131, 44, 0.38);
  box-shadow: 0 2px 6px rgba(66, 53, 43, 0.04);
  position: relative;
}

.btn-cal-act-memo:hover {
  background: rgba(194, 131, 44, 0.08);
  border-color: #c2832c;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(194, 131, 44, 0.15);
}

.btn-cal-act-memo .cal-memo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9999px;
  background: #c2832c;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  margin-left: 2px;
}

/* 2. 推薦卡片與便籤內的行事曆 & 分享按鈕 */
.btn-res-action.cal,
.btn-sticky-act.cal {
  background: rgba(194, 131, 44, 0.1);
  color: #9f6c24;
  border: 1px solid rgba(194, 131, 44, 0.32);
}

.btn-res-action.cal:hover,
.btn-sticky-act.cal:hover {
  background: rgba(194, 131, 44, 0.18);
  border-color: #c2832c;
  transform: translateY(-1px);
}

.btn-res-action.share,
.btn-sticky-act.share {
  background: #ffffff;
  color: var(--color-coffee, #3d3027);
  border: 1px solid rgba(66, 53, 43, 0.2);
}

.btn-res-action.share:hover,
.btn-sticky-act.share:hover {
  background: rgba(66, 53, 43, 0.05);
  transform: translateY(-1px);
}

/* 3. 社群好日子分享彈窗 (Facebook, LINE, Threads 脆, X) */
.zeji-share-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  background: rgba(24, 18, 14, 0.58);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: zejiModalFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.zeji-share-modal-overlay.active {
  display: flex;
}

.zeji-share-card {
  background: #ffffff;
  border-radius: 20px;
  width: 680px;
  max-width: calc(100vw - 32px);
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px 26px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(194, 131, 44, 0.12);
  border: 1px solid rgba(194, 131, 44, 0.3);
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
}

.zeji-share-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.share-title-group {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.share-header-icon {
  font-size: 1.4rem;
  line-height: 1.2;
}

.share-title-group h3 {
  font-family: "Songti TC", "Noto Serif TC", serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-coffee-dark, #241c16);
  margin: 0;
}

.share-title-group p {
  font-size: 0.78rem;
  color: var(--color-coffee-muted, #968679);
  margin: 3px 0 0;
}

.btn-zeji-modal-close {
  background: transparent;
  border: none;
  font-size: 1.1rem;
  color: var(--color-coffee-muted, #968679);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.btn-zeji-modal-close:hover {
  background: rgba(66, 53, 43, 0.08);
  color: var(--color-coffee-dark, #241c16);
}

/* 預覽卡片 */
.zeji-share-preview-box {
  background: #faf8f5;
  border: 1px solid rgba(194, 131, 44, 0.25);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.share-prev-date {
  font-family: "Songti TC", "Noto Serif TC", serif;
  font-size: 1rem;
  font-weight: 700;
  color: #7c4f14;
}

.share-prev-yiji {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.82rem;
}

.share-prev-yiji .yi-tag {
  color: #2e7d32;
  font-weight: 600;
}

.share-prev-yiji .ji-tag {
  color: #c62828;
  font-weight: 600;
}

.share-prev-chong {
  font-size: 0.78rem;
  color: var(--color-coffee-muted, #968679);
  border-top: 1px dashed rgba(66, 53, 43, 0.1);
  padding-top: 6px;
  margin-top: 2px;
}

/* 自訂備忘輸入欄 */
.zeji-share-note-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.zeji-share-note-input-wrap label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #7c4f14;
}

.zeji-share-note-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(194, 131, 44, 0.35);
  background: #ffffff;
  font-family: inherit;
  font-size: 0.86rem;
  color: var(--color-coffee, #3d3027);
  outline: none;
  transition: all 0.2s ease;
}

.zeji-share-note-input:focus {
  border-color: #c2832c;
  box-shadow: 0 0 0 3px rgba(194, 131, 44, 0.15);
}

textarea.zeji-share-note-input {
  min-height: 68px;
  line-height: 1.45;
  resize: vertical;
}

/* 社群按鈕：白底細框、圓形品牌標誌，與長輩圖分享列使用同一語彙。 */
.zeji-share-btns-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.btn-share-channel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  padding: 10px 8px;
  border-radius: 10px;
  border: 1px solid rgba(66, 53, 43, 0.18);
  background: #ffffff;
  color: #3d3027;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.btn-share-channel:hover {
  transform: translateY(-1px);
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(53, 39, 28, 0.1);
}

.btn-share-channel:active {
  transform: translateY(0);
}

.btn-share-channel .social-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
}

/* 品牌色只留在標誌與細框，不再形成大面積色塊。 */
.btn-share-channel.line {
  color: #078a40;
  border-color: rgba(6, 199, 85, 0.28);
}

.btn-share-channel.line .social-mark { background: #06c755; font-size: 0.69rem; }

.btn-share-channel.threads {
  color: #29231f;
  border-color: rgba(41, 35, 31, 0.22);
}

.btn-share-channel.threads .social-mark { background: #29231f; }

.btn-share-channel.facebook {
  color: #1769e0;
  border-color: rgba(23, 105, 224, 0.24);
}

.btn-share-channel.facebook .social-mark { background: #1877f2; }

.btn-share-channel.twitter {
  color: #171717;
  border-color: rgba(23, 23, 23, 0.22);
}

.btn-share-channel.twitter .social-mark { background: #171717; }

/* 次要動作列 */
.zeji-share-sub-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px dashed rgba(66, 53, 43, 0.12);
  padding-top: 12px;
}

.btn-share-sub {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(66, 53, 43, 0.05);
  border: 1px solid rgba(66, 53, 43, 0.12);
  color: var(--color-coffee, #3d3027);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-share-sub:hover {
  background: rgba(194, 131, 44, 0.12);
  color: #9f6c24;
  border-color: rgba(194, 131, 44, 0.3);
}

@media (max-width: 600px) {
  .cal-quick-actions-bar {
    flex-direction: column;
    width: 100%;
  }

  .btn-cal-act-primary,
  .btn-cal-act-share,
  .btn-cal-act-sub,
  .btn-cal-act-memo {
    width: 100%;
    min-height: 42px;
  }

  .zeji-share-btns-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zeji-share-sub-actions {
    flex-direction: column;
  }

  .btn-share-sub {
    width: 100%;
    min-height: 38px;
  }
}

/* ==========================================================================
   節氣長輩圖 (Term Card) 生成與分享樣式
   ========================================================================== */

/* 1. 分享彈窗雙分頁切換 */
.zeji-share-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(66, 53, 43, 0.05);
  padding: 4px;
  border-radius: 12px;
  margin-bottom: 14px;
}

.share-tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 9px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--color-coffee-muted, #7a6a5d);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.share-tab-btn:hover {
  color: #c2832c;
  background: rgba(255, 255, 255, 0.6);
}

.share-tab-btn.active {
  background: #ffffff;
  color: #7c4f14;
  box-shadow: 0 2px 8px rgba(66, 53, 43, 0.08);
}

.tab-badge-glow {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #c2832c, #e6a84f);
  color: #ffffff;
  animation: pulseTermGlow 2s infinite ease-in-out;
}

@keyframes pulseTermGlow {
  0%, 100% { transform: scale(1); opacity: 0.95; }
  50% { transform: scale(1.05); opacity: 1; }
}

/* 2. 長輩圖預覽區 */
.zeji-term-card-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.zeji-term-camera-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 8px;
  align-items: center;
  width: 100%;
}

.btn-term-camera,
.btn-term-camera-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-term-camera-reset[hidden] {
  display: none;
}

.btn-term-camera {
  border: 1px solid rgba(139, 89, 47, 0.28);
  background: linear-gradient(135deg, #fffaf1 0%, #f5e6d0 100%);
  color: #694224;
}

.btn-term-camera.is-active {
  color: #fff;
  border-color: #77502f;
  background: linear-gradient(135deg, #9b6938 0%, #5a3823 100%);
}

.btn-term-camera-reset {
  border: 1px solid rgba(143, 57, 50, 0.24);
  background: #fff;
  color: #8f3932;
}

.btn-term-camera:hover,
.btn-term-camera-reset:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(76, 49, 29, 0.12);
}

.term-camera-input {
  display: none;
}

.term-camera-hint {
  grid-column: 1 / -1;
  color: #8b796a;
  font-size: 0.7rem;
  line-height: 1.45;
  text-align: center;
}

.term-card-canvas-wrap {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(66, 53, 43, 0.12);
  border: 1px solid rgba(194, 131, 44, 0.25);
  background: #fdfbf7;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  isolation: isolate;
}

.term-card-preview-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.term-note-transform-box {
  --term-note-control-scale: 1;
  --term-note-border-width: 2px;
  --term-note-radius: 5px;
  --term-note-hint-top: -25px;
  --term-note-handle-size: 14px;
  --term-note-handle-border: 2px;
  --term-note-handle-radius: 3px;
  --term-note-handle-offset: -8px;
  --term-note-shadow-y: 1px;
  --term-note-shadow-blur: 5px;
  --term-note-rotate-top: -48px;
  --term-note-rotate-line-top: 12px;
  --term-note-rotate-line-width: 1px;
  --term-note-rotate-line-height: 34px;
  position: absolute;
  z-index: 3;
  box-sizing: border-box;
  border: var(--term-note-border-width) dashed rgba(131, 83, 38, 0.92);
  border-radius: var(--term-note-radius);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.88), 0 4px 14px rgba(67, 43, 25, 0.16);
  transform-origin: center;
  cursor: move;
  touch-action: none;
  user-select: none;
}

.term-note-transform-box.is-empty {
  background: rgba(255, 252, 245, 0.16);
}

.term-note-editor-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.term-note-editor-svg text {
  font: 900 67px "Noto Sans TC", "PingFang TC", sans-serif;
  filter: drop-shadow(0 3px 7px rgba(248, 245, 238, 0.98));
}

.term-note-editor-hint {
  position: absolute;
  left: 50%;
  top: var(--term-note-hint-top);
  transform: translateX(-50%) scale(var(--term-note-control-scale));
  transform-origin: center bottom;
  width: max-content;
  max-width: 95%;
  padding: 3px 8px;
  border: 0;
  background: transparent;
  color: #ffffff;
  -webkit-text-stroke: 1px #6c4327;
  paint-order: stroke fill;
  text-shadow: 0 1px 2px rgba(43, 25, 13, 0.58);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
}

.term-note-resize-handle,
.term-note-rotate-handle {
  position: absolute;
  z-index: 4;
  display: block;
  width: var(--term-note-handle-size);
  height: var(--term-note-handle-size);
  box-sizing: border-box;
  border: var(--term-note-handle-border) solid #fffdf8;
  background: #8b592f;
  box-shadow: 0 var(--term-note-shadow-y) var(--term-note-shadow-blur) rgba(50, 31, 18, 0.35);
}

.term-note-resize-handle {
  border-radius: var(--term-note-handle-radius);
  cursor: nwse-resize;
}

.term-note-resize-handle.handle-nw { left: var(--term-note-handle-offset); top: var(--term-note-handle-offset); }
.term-note-resize-handle.handle-ne { right: var(--term-note-handle-offset); top: var(--term-note-handle-offset); cursor: nesw-resize; }
.term-note-resize-handle.handle-se { right: var(--term-note-handle-offset); bottom: var(--term-note-handle-offset); }
.term-note-resize-handle.handle-sw { left: var(--term-note-handle-offset); bottom: var(--term-note-handle-offset); cursor: nesw-resize; }

.term-note-rotate-handle {
  left: 50%;
  top: var(--term-note-rotate-top);
  transform: translateX(-50%);
  border-radius: 50%;
  cursor: grab;
}

.term-note-rotate-handle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: var(--term-note-rotate-line-top);
  width: var(--term-note-rotate-line-width);
  height: var(--term-note-rotate-line-height);
  background: rgba(131, 83, 38, 0.92);
  transform: translateX(-50%);
}

.canvas-loading {
  font-size: 0.88rem;
  color: #9f6c24;
  font-weight: 600;
  padding: 20px;
  text-align: center;
}

/* 3. 長輩圖操作按鈕 */
.zeji-term-card-actions {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.9fr) minmax(112px, 1.15fr);
  gap: 10px;
  margin-top: 4px;
  width: 100%;
  box-sizing: border-box;
}

.btn-term-act-primary,
.btn-term-act-line,
.btn-term-act-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  padding: 10px 9px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-term-act-primary {
  background: linear-gradient(135deg, #c2832c 0%, #9f6c24 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 2px 8px rgba(194, 131, 44, 0.25);
}

.btn-term-act-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(194, 131, 44, 0.38);
}

.btn-term-act-line {
  background: #06c755;
  color: #ffffff;
  border: none;
  box-shadow: 0 2px 8px rgba(6, 199, 85, 0.25);
}

.btn-term-act-line:hover {
  background: #05b34c;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(6, 199, 85, 0.38);
}

.btn-term-act-copy {
  background: #ffffff;
  color: #5c4634;
  border: 1px solid rgba(66, 53, 43, 0.18);
}

.btn-term-act-copy:hover {
  background: rgba(66, 53, 43, 0.05);
  border-color: #c2832c;
  transform: translateY(-1px);
}

.zeji-term-social-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.btn-term-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  padding: 9px 8px;
  border-radius: 10px;
  border: 1px solid rgba(66, 53, 43, 0.14);
  background: #fff;
  color: #3d3027;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

.btn-term-social:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(53, 39, 28, 0.12);
}

.btn-term-social .social-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  font-size: 0.88rem;
  font-weight: 800;
}

.btn-term-social.facebook { color: #1769e0; border-color: rgba(23, 105, 224, 0.24); }
.btn-term-social.facebook .social-mark { color: #fff; background: #1877f2; }
.btn-term-social.threads { color: #29231f; border-color: rgba(41, 35, 31, 0.22); }
.btn-term-social.threads .social-mark { color: #fff; background: #29231f; }
.btn-term-social.twitter { color: #171717; border-color: rgba(23, 23, 23, 0.22); }
.btn-term-social.twitter .social-mark { color: #fff; background: #171717; }

/* 4. 右側節氣卡片內的長輩圖分享按鈕 */
.btn-term-share-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(194, 131, 44, 0.32);
  color: #7c4f14;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 4px;
}

.btn-term-share-action:hover {
  background: #ffffff;
  border-color: #c2832c;
  color: #53330c;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(194, 131, 44, 0.15);
}

.btn-term-share-action.is-today-term {
  background: linear-gradient(135deg, rgba(194, 131, 44, 0.15) 0%, rgba(230, 168, 79, 0.22) 100%);
  border-color: #c2832c;
  color: #6b3e0c;
  box-shadow: 0 2px 8px rgba(194, 131, 44, 0.18);
}

.btn-term-share-action.is-today-term:hover {
  background: linear-gradient(135deg, #c2832c 0%, #9f6c24 100%);
  color: #ffffff;
}

.zeji-term-badge-tag.current.is-today-active {
  background: linear-gradient(135deg, rgba(194, 131, 44, 0.18), rgba(230, 168, 79, 0.25));
  color: #7c4f14;
  border-color: #c2832c;
  font-weight: 700;
}

@media (max-width: 600px) {
  .zeji-share-card {
    width: 100%;
    max-width: calc(100vw - 20px);
    padding: 20px 16px;
  }

  .zeji-term-card-actions {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   系統設定：全站天機大數據與熱門工具排行榜
   ========================================================================== */
#settings-modal .modal-card-settings {
  width: min(760px, calc(100vw - 32px));
  max-width: 760px;
  max-height: calc(100dvh - 32px);
  overflow: hidden;
}

#settings-modal .settings-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  padding-right: 6px;
}

.settings-tab-nav {
  display: flex;
  background: rgba(139, 90, 43, 0.08);
  border-radius: 12px;
  padding: 4px;
  gap: 6px;
  margin-bottom: 18px;
  border: 1px solid rgba(139, 90, 43, 0.12);
  position: sticky;
  top: 0;
  z-index: 4;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.settings-tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  /* 分頁增加到三個後，窄螢幕會把「系統設定」「數據報表」擠成兩行。
     文字一律不換行，寬度不足時由下方的斷點縮小字級與間距吸收。 */
  white-space: nowrap;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-coffee, #5c4a3d);
  cursor: pointer;
  transition: all 0.2s ease;
}

.settings-tab-btn.active {
  background: #ffffff;
  color: #8b2500;
  box-shadow: 0 2px 8px rgba(139, 37, 0, 0.12);
}

.settings-close-btn {
  width: 36px;
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(139, 90, 43, 0.14);
  border-radius: 9px;
  color: #765d49;
  background: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.settings-close-btn .icon {
  width: 18px;
  height: 18px;
}

.settings-close-btn:hover {
  color: #8b2500;
  border-color: rgba(139, 37, 0, 0.28);
  background: #ffffff;
}

.settings-tab-pane {
  display: none;
}

.settings-tab-pane.active {
  display: block;
}

#st-pane-config {
  max-width: 620px;
  margin: 0 auto;
}

/* 四大 KPI 金牌卡 */
.stats-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.stats-kpi-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 14px 12px;
  border: 1px solid rgba(139, 90, 43, 0.14);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stats-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(139, 90, 43, 0.12);
}

.stats-kpi-card.gold {
  border-top: 3px solid #d4af37;
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.05) 0%, #ffffff 100%);
}

.stats-kpi-card.jade {
  border-top: 3px solid #2e7d32;
  background: linear-gradient(180deg, rgba(46, 125, 50, 0.05) 0%, #ffffff 100%);
}

.stats-kpi-card.vermilion {
  border-top: 3px solid #b71c1c;
  background: linear-gradient(180deg, rgba(183, 28, 28, 0.05) 0%, #ffffff 100%);
}

.stats-kpi-card.bronze {
  border-top: 3px solid #8d6e63;
  background: linear-gradient(180deg, rgba(141, 110, 99, 0.05) 0%, #ffffff 100%);
}

.stats-kpi-icon {
  font-size: 1.3rem;
  margin-bottom: 4px;
}

.stats-kpi-val {
  font-size: 1.45rem;
  font-weight: 800;
  font-family: 'Cinzel', 'Playfair Display', -apple-system, sans-serif;
  color: #2b1d0c;
  line-height: 1.2;
}

.stats-kpi-label {
  font-size: 0.78rem;
  color: #7b6a58;
  margin-top: 4px;
  font-weight: 500;
}

/* 區塊卡片 */
.stats-section-box {
  background: #ffffff;
  border-radius: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(139, 90, 43, 0.12);
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.stats-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: #3d2b1f;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(139, 90, 43, 0.15);
}

.stats-refresh-btn {
  border: 0;
  font-size: 0.78rem;
  font-weight: 500;
  color: #8b5a2b;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(139, 90, 43, 0.08);
  transition: all 0.2s ease;
}

.stats-refresh-btn:hover {
  background: rgba(139, 90, 43, 0.16);
}

/* 排行榜條目 */
.stats-ranks-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.stats-rank-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
}

.stats-rank-badge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(139, 90, 43, 0.1);
  color: #6b4c2b;
}

.stats-rank-badge.top-1 {
  background: #d4af37;
  color: #ffffff;
}

.stats-rank-badge.top-2 {
  background: #a8a8a8;
  color: #ffffff;
}

.stats-rank-badge.top-3 {
  background: #cd7f32;
  color: #ffffff;
}

.stats-rank-tool-name {
  /* emoji + 4 個中文字在此字級下實際需要約 84px，76px 會讓文字尾端
     溢出固定寬度、視覺上疊到右側的長條圖軌道。加大並保留餘裕。 */
  width: 92px;
  flex-shrink: 0;
  font-weight: 600;
  color: #2b1d0c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stats-rank-bar-bg {
  flex: 1;
  height: 8px;
  background: rgba(139, 90, 43, 0.08);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.stats-rank-bar-fill {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #c2832c 0%, #8b2500 100%);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.stats-rank-count-box {
  min-width: 65px;
  text-align: right;
  font-size: 0.82rem;
  color: #7b6a58;
  font-weight: 600;
}

.stats-rank-count-box strong {
  color: #8b2500;
}

/* 文化實踐與生活傳承網格 */
.stats-practice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.practice-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(253, 251, 247, 0.85);
  border: 1px solid rgba(139, 90, 43, 0.1);
  border-radius: 10px;
  padding: 8px 10px;
}

.practice-item-icon {
  font-size: 1.25rem;
}

.practice-item-info {
  flex: 1;
}

.practice-item-label {
  font-size: 0.74rem;
  color: #7a6a58;
  margin-bottom: 2px;
}

.practice-item-val {
  font-size: 0.95rem;
  font-weight: 700;
  color: #2b1d0c;
}

.practice-item-val span {
  font-family: 'Cinzel', -apple-system, sans-serif;
  color: #8b2500;
}

/* 隱私註記 */
.stats-privacy-note {
  font-size: 0.78rem;
  color: #8c7b6c;
  line-height: 1.5;
  background: rgba(139, 90, 43, 0.05);
  border-left: 3px solid #8b5a2b;
  padding: 8px 10px;
  border-radius: 4px;
}

.stats-loading-hint {
  text-align: center;
  padding: 16px 0;
  color: #8c7b6c;
  font-size: 0.88rem;
}

@media (max-width: 680px) {
  .stats-kpi-grid,
  .stats-practice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats-rank-row {
    display: grid;
    grid-template-columns: 24px minmax(72px, auto) minmax(72px, 1fr);
    gap: 8px;
  }

  .stats-rank-tool-name {
    width: auto;
  }

  .stats-rank-count-box {
    grid-column: 2 / -1;
    min-width: 0;
    text-align: left;
    margin-top: -4px;
  }
}

@media (max-width: 420px) {
  .settings-tab-btn {
    padding: 8px 4px;
    font-size: 0.78rem;
    gap: 3px;
  }

  .settings-tab-btn .icon {
    width: 13px !important;
    height: 13px !important;
  }

  .settings-tab-nav {
    gap: 3px;
    padding: 3px;
  }

  .stats-kpi-grid {
    gap: 8px;
  }

  .stats-kpi-card,
  .stats-section-box {
    border-radius: 12px;
  }

  .stats-kpi-card {
    padding: 12px 8px;
  }

  .stats-section-box {
    padding: 13px 12px;
  }

  .stats-practice-grid {
    grid-template-columns: 1fr;
  }

  .stats-section-title {
    align-items: flex-start;
    gap: 10px;
  }

  .stats-refresh-btn {
    flex: 0 0 auto;
  }
}

/* 數據報表：KPI 口徑註記與排行榜輔助說明 */
.stats-kpi-note {
  font-size: 0.63rem;
  line-height: 1.35;
  color: #a3917c;
  margin-top: 3px;
  font-weight: 400;
}

.stats-section-hint {
  font-size: 0.7rem;
  line-height: 1.5;
  color: #8d7c69;
  margin: -4px 0 10px;
}

.stats-rank-visits {
  display: block;
  font-size: 0.65rem;
  color: #a3917c;
  font-weight: 400;
  margin-top: 1px;
}

/* ==========================================================================
   第十工具 · 數理測算 (Shuli View) 專屬樣式
   ========================================================================== */
.shuli-view-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--bg-main, #fbf9f5);
  box-sizing: border-box;
}

.shuli-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.shuli-brand-title h2 {
  font-family: "Songti TC", "Noto Serif TC", "Source Han Serif TC", serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #2b5a73;
  margin: 0;
  letter-spacing: 0.5px;
}

.shuli-brand-title p {
  font-size: 0.75rem;
  color: #7a6c62;
  margin: 2px 0 0;
}

.shuli-content-wrap {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 22px 20px 80px;
  box-sizing: border-box;
}

.shuli-main-container {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 1. 分類 Tab 選項列 */
.shuli-tab-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  background: #f0eae1;
  padding: 5px;
  border-radius: 14px;
  border: 1px solid rgba(180, 150, 120, 0.25);
}

.shuli-tab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: #6d5d52;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.shuli-tab-btn:hover {
  background: rgba(255, 255, 255, 0.6);
  color: #2b5a73;
}

.shuli-tab-btn.active {
  background: #ffffff;
  color: #2b5a73;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(43, 90, 115, 0.12);
}

.shuli-tab-btn .tab-icon {
  font-size: 1.05rem;
}

/* 2. 通用卡片外框 */
.shuli-card {
  background: #ffffff;
  border: 1px solid rgba(185, 140, 79, 0.18);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: 0 4px 18px rgba(66, 53, 43, 0.04);
  box-sizing: border-box;
}

/* 輸入卡片 */
.shuli-input-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.shuli-input-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.input-panel-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #5c4e43;
}

.shuli-btn-saved-records {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(43, 90, 115, 0.08);
  border: 1px solid rgba(43, 90, 115, 0.25);
  color: #2b5a73;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.shuli-btn-saved-records:hover {
  background: rgba(43, 90, 115, 0.15);
}

.shuli-btn-saved-records .saved-badge {
  background: #2b5a73;
  color: #ffffff;
  font-size: 0.68rem;
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 600;
}

.shuli-input-row {
  width: 100%;
}

.shuli-input-group {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.shuli-text-input {
  flex: 1;
  padding: 12px 16px;
  border: 1.5px solid #d4c5b5;
  border-radius: 12px;
  font-size: 1.05rem;
  letter-spacing: 0.5px;
  color: #241c16;
  background: #faf8f5;
  transition: all 0.2s ease;
}

.shuli-text-input:focus {
  outline: none;
  border-color: #2b5a73;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(43, 90, 115, 0.12);
}

.shuli-btn-calc {
  padding: 0 22px;
  background: linear-gradient(135deg, #9f8469 0%, #826950 100%);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(130, 105, 80, 0.22);
}

.shuli-btn-calc:hover {
  background: linear-gradient(135deg, #90765d 0%, #755e47 100%);
  box-shadow: 0 4px 14px rgba(130, 105, 80, 0.28);
}

.shuli-samples-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.78rem;
}

.sample-label {
  color: #8c7b6e;
}

.shuli-sample-tag {
  background: #f4ede4;
  border: 1px solid rgba(160, 130, 100, 0.2);
  color: #635346;
  padding: 3px 10px;
  border-radius: 16px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.shuli-sample-tag:hover {
  background: #ebe0d3;
  color: #2b5a73;
  border-color: #2b5a73;
}

/* 核心摘要卡片 */
.shuli-hero-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: linear-gradient(175deg, #ffffff 0%, #faf8f5 100%);
  border: 1.5px solid rgba(43, 90, 115, 0.22);
}

.hero-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  border-bottom: 1px solid #ebe4dc;
  padding-bottom: 16px;
}

.hero-cat-tag {
  display: inline-block;
  background: rgba(43, 90, 115, 0.09);
  color: #2b5a73;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  margin-bottom: 6px;
}

.hero-num-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #241c16;
  margin: 0;
  letter-spacing: 1px;
}

.hero-digits-code {
  font-size: 0.85rem;
  color: #7a6a5c;
  margin-top: 4px;
}

.hero-digits-code strong {
  font-size: 1.05rem;
  color: #2b5a73;
  letter-spacing: 1.5px;
}

.hero-subcode {
  margin-left: 6px;
  color: #9c8979;
}

.hero-ratio-box {
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ratio-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 600;
}

.lbl-auspicious {
  color: #2e7d32;
}

.lbl-inauspicious {
  color: #d32f2f;
}

.ratio-bar-track {
  width: 100%;
  height: 10px;
  background: #ffebee;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.ratio-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #43a047 0%, #2e7d32 100%);
  border-radius: 6px;
  transition: width 0.4s ease;
}

/* 磁場膠囊鏈 */
.shuli-chain-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chain-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chain-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #52443a;
}

.chain-count {
  font-size: 0.75rem;
  color: #8c7b6e;
}

.shuli-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.shuli-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 12px;
  border-radius: 12px;
  border-width: 1.5px;
  border-style: solid;
  min-width: 72px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.pill-pair {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 1px;
  line-height: 1.1;
}

.pill-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2px;
}

.pill-name {
  font-size: 0.82rem;
  font-weight: 700;
}

.pill-level {
  font-size: 0.65rem;
  color: #706256;
}

.pill-note {
  margin-top: 3px;
  font-size: 0.6rem;
  color: #8c7054;
  background: rgba(255, 255, 255, 0.8);
  padding: 1px 4px;
  border-radius: 4px;
}

/* 特殊備註 */
.shuli-special-notes-box {
  background: #fdfaf5;
  border: 1px dashed #d5c3b1;
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.special-note-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #5c4e43;
}

.special-note-item .sn-icon {
  font-size: 0.85rem;
  flex-shrink: 0;
  margin-top: 1px;
}

/* 命中三字符與四字符吉凶大格局卡片 */
.shuli-patterns-card {
  background: #ffffff;
  border: 1px solid rgba(185, 140, 79, 0.35);
  box-shadow: 0 4px 16px rgba(185, 140, 79, 0.08);
  border-radius: 16px;
  padding: 20px 24px;
}

.patterns-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(185, 140, 79, 0.28);
}

.patterns-header-icon {
  font-size: 1.45rem;
  line-height: 1;
}

.patterns-header-titles {
  flex: 1;
  min-width: 0;
}

.patterns-header-titles h4 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: #704415;
  letter-spacing: 0.5px;
}

.patterns-header-titles p {
  margin: 3px 0 0;
  font-size: 0.77rem;
  color: #8c7766;
  line-height: 1.4;
}

.patterns-count-badge {
  background: #fdf6ec;
  color: #8a571f;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 4px 12px;
  border-radius: 12px;
  border: 1px solid rgba(185, 140, 79, 0.32);
  white-space: nowrap;
}

.patterns-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pattern-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  transition: all 0.2s ease;
}

.pattern-item.auspicious {
  background: linear-gradient(135deg, rgba(235, 247, 238, 0.85), rgba(254, 252, 245, 0.95));
  border: 1px solid rgba(46, 125, 50, 0.32);
  box-shadow: 0 2px 8px rgba(46, 125, 50, 0.05);
}

.pattern-item.inauspicious {
  background: linear-gradient(135deg, rgba(254, 243, 242, 0.85), rgba(255, 249, 245, 0.95));
  border: 1px solid rgba(198, 40, 40, 0.3);
  box-shadow: 0 2px 8px rgba(198, 40, 40, 0.05);
}

.pattern-item.neutral {
  background: linear-gradient(135deg, rgba(246, 248, 250, 0.85), rgba(252, 250, 246, 0.95));
  border: 1px solid rgba(100, 116, 139, 0.28);
  box-shadow: 0 2px 8px rgba(100, 116, 139, 0.04);
}

.pattern-badge-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  gap: 6px;
  flex-shrink: 0;
}

.pattern-code-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 1.15rem;
  font-weight: 800;
  color: #2b5a73;
  background: #ffffff;
  padding: 4px 10px;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(185, 140, 79, 0.25);
  letter-spacing: 1px;
}

.pattern-type-pill {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

.pattern-type-pill.auspicious {
  background: rgba(46, 125, 50, 0.14);
  color: #2e7d32;
  border: 1px solid rgba(46, 125, 50, 0.25);
}

.pattern-type-pill.inauspicious {
  background: rgba(198, 40, 40, 0.12);
  color: #c62828;
  border: 1px solid rgba(198, 40, 40, 0.22);
}

.pattern-type-pill.neutral {
  background: rgba(100, 116, 139, 0.14);
  color: #475569;
  border: 1px solid rgba(100, 116, 139, 0.22);
}

.pattern-info-col {
  flex: 1;
  min-width: 0;
}

.pattern-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.pattern-name {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: #2d241e;
}

.pattern-tag {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(185, 140, 79, 0.16);
  color: #85521b;
  font-weight: 600;
  white-space: nowrap;
}

.pattern-summary {
  font-size: 0.84rem;
  font-weight: 600;
  color: #5c4331;
  margin-bottom: 5px;
}

.pattern-desc {
  font-size: 0.79rem;
  line-height: 1.55;
  color: #6d5d52;
  margin: 0;
}

.pattern-none-notice {
  padding: 16px 20px;
  background: #fdfbf8;
  border-radius: 12px;
  font-size: 0.82rem;
  color: #7e6e63;
  text-align: center;
  border: 1px dashed rgba(185, 140, 79, 0.3);
  line-height: 1.6;
}

/* 四大面向網格 */
.shuli-dimensions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.shuli-dim-card {
  background: #ffffff;
  border: 1px solid rgba(185, 140, 79, 0.28);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 2px 10px rgba(66, 53, 43, 0.05);
}

.dim-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dim-card-header h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: #2b5a73;
  margin: 0;
}

.dim-card-body {
  font-size: 0.83rem;
  line-height: 1.6;
  color: #54463d;
  margin: 0;
}

/* 建議方針與操作區 */
.shuli-advice-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fcfbf9;
  border-left: 4px solid #2b5a73;
}

.advice-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.advice-header h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #2b5a73;
  margin: 0;
}

.advice-body {
  font-size: 0.88rem;
  line-height: 1.65;
  color: #42362f;
  margin: 0;
}

.shuli-actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid #eee8df;
}

.shuli-btn-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.shuli-btn-action .icon {
  width: 16px;
  height: 16px;
}

.shuli-btn-action.btn-save {
  background: #f2eee8;
  color: #5c4a3b;
  border: 1px solid #d4c5b5;
}

.shuli-btn-action.btn-save:hover {
  background: #e6dfd5;
  color: #2b5a73;
}

.shuli-btn-action.btn-copy {
  background: #f7f1e9;
  color: #826950;
  border: 1px solid rgba(130, 105, 80, 0.28);
}

.shuli-btn-action.btn-copy:hover {
  background: #efe5d8;
  color: #6b5540;
}

.shuli-btn-action.btn-consult {
  background: linear-gradient(135deg, #9f8469 0%, #826950 100%);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(130, 105, 80, 0.22);
}

.shuli-btn-action.btn-consult:hover {
  background: linear-gradient(135deg, #90765d 0%, #755e47 100%);
  box-shadow: 0 4px 14px rgba(130, 105, 80, 0.28);
}

/* 八星對照小速查 */
.shuli-handbook-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fdfaf6;
  border: 1px dashed #d5c4b1;
}

.handbook-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: #635345;
}

.handbook-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 32px;
}

.hb-group h5 {
  font-size: 0.82rem;
  font-weight: 700;
  margin: 0 0 8px;
}

.hb-group.auspicious h5 {
  color: #2e7d32;
}

.hb-group.inauspicious h5 {
  color: #c62828;
}

.hb-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hb-group li {
  font-size: 0.75rem;
  color: #66574c;
  line-height: 1.45;
}

/* 空狀態 */
.shuli-empty-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 20px;
  gap: 12px;
  text-align: center;
}

.shuli-empty-card .empty-icon {
  font-size: 2.2rem;
}

.shuli-empty-card .empty-msg {
  font-size: 0.95rem;
  color: #8c7b6d;
}

/* 已存紀錄彈窗 */
.shuli-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 22, 17, 0.6);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.shuli-modal-overlay.active {
  display: flex;
}

.shuli-modal-content {
  background: #ffffff;
  border-radius: 18px;
  width: 100%;
  max-width: 580px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  border: 1px solid rgba(185, 140, 79, 0.25);
}

.shuli-modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid #eee5dc;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #faf7f2;
}

.modal-title-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-title-left h3 {
  margin: 0;
  font-size: 1rem;
  color: #2b5a73;
  font-weight: 600;
}

.modal-actions-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-clear-all {
  background: none;
  border: 1px solid #d4c5b5;
  color: #8c7664;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 0.72rem;
  cursor: pointer;
}

.btn-clear-all:hover {
  background: #feebee;
  color: #c62828;
  border-color: #ef9a9a;
}

.btn-modal-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #8c7b6d;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
}

.shuli-modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.shuli-empty-saved {
  text-align: center;
  padding: 40px 20px;
  color: #8c7c6d;
}

.shuli-empty-saved .empty-icon {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 8px;
}

.shuli-saved-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shuli-saved-item {
  background: #fbf9f5;
  border: 1px solid #e6dccc;
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.shuli-saved-item:hover {
  border-color: #2b5a73;
  background: #f4f8fa;
  transform: translateY(-1px);
}

.saved-item-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
}

.saved-cat-badge {
  color: #2b5a73;
  font-weight: 600;
}

.saved-time {
  color: #a39283;
}

.saved-item-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #241c16;
}

.saved-item-num {
  font-size: 0.78rem;
  color: #635345;
}

.saved-item-pairs {
  font-size: 0.72rem;
  color: #7d6b5c;
  background: rgba(255, 255, 255, 0.7);
  padding: 4px 8px;
  border-radius: 6px;
  margin-top: 3px;
}

.saved-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  font-size: 0.72rem;
}

.saved-ratio {
  font-weight: 600;
  color: #2e7d32;
}

.saved-btn-del {
  background: none;
  border: none;
  color: #a39283;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.72rem;
  padding: 2px 6px;
  border-radius: 4px;
}

.saved-btn-del:hover {
  color: #c62828;
  background: #ffebee;
}

.saved-btn-del .icon {
  width: 12px;
  height: 12px;
}

/* 手機版響應式微調 */
@media (max-width: 768px) {
  /* 動態視窗高度：避免行動瀏覽器網址列收合時 100vh 造成底部被裁切 */
  .shuli-view-container {
    height: 100dvh;
  }

  /* 內容區改用較窄的留白，並為 iPhone 底部主頁指示條預留安全距離 */
  .shuli-content-wrap {
    padding: 14px 12px calc(72px + env(safe-area-inset-bottom));
  }

  .shuli-main-container {
    gap: 12px;
  }

  .shuli-card {
    padding: 16px 14px;
    border-radius: 14px;
  }

  /* 分類頁籤：改 2 列網格 */
  .shuli-tab-bar {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 4px;
  }

  /* 單數個分類時，落單的最後一項跨滿兩欄，避免右側留下空格。
     使用 :nth-child(odd) 判斷，日後增減分類都不必改這條規則。 */
  .shuli-tab-btn:nth-child(odd):last-child {
    grid-column: 1 / -1;
  }

  .shuli-tab-btn {
    padding: 11px 8px;
    min-height: 44px;
    font-size: 0.85rem;
    gap: 5px;
  }

  /* 輸入列：直向堆疊，避免「即時排盤」按鈕被擠出畫面外 */
  .shuli-input-group {
    flex-direction: column;
    gap: 8px;
  }

  .shuli-text-input {
    width: 100%;
    /* 16px 以上可避免 iOS Safari 聚焦時自動放大頁面 */
    font-size: 16px;
    padding: 12px 14px;
  }

  .shuli-btn-calc {
    width: 100%;
    padding: 12px 18px;
    min-height: 46px;
  }

  .shuli-input-top-bar {
    gap: 10px;
  }

  .input-panel-title {
    font-size: 0.8rem;
    line-height: 1.35;
  }

  .shuli-btn-saved-records {
    flex-shrink: 0;
    padding: 6px 12px;
    min-height: 32px;
  }

  /* 範例標籤：改橫向捲動單行，不再每個標籤佔掉一整列 */
  .shuli-samples-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -14px;
    padding: 2px 14px;
  }

  .shuli-samples-row::-webkit-scrollbar {
    display: none;
  }

  .sample-label,
  .shuli-sample-tag {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .shuli-sample-tag {
    padding: 6px 12px;
  }

  /* 摘要卡：長號碼或長地址需可斷行，避免撐破卡片 */
  .hero-top-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 12px;
  }

  .hero-num-info {
    width: 100%;
    min-width: 0;
  }

  .hero-num-title {
    font-size: 1.35rem;
    overflow-wrap: anywhere;
  }

  .hero-digits-code {
    overflow-wrap: anywhere;
  }

  .hero-ratio-box {
    width: 100%;
    min-width: 0;
  }

  .chain-header {
    flex-wrap: wrap;
    gap: 2px 8px;
  }

  .chain-title {
    font-size: 0.8rem;
  }

  .chain-count {
    white-space: nowrap;
  }

  /* 磁場膠囊：改等寬三欄網格，排列整齊且不溢出 */
  .shuli-pills-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .shuli-pill {
    min-width: 0;
    padding: 8px 4px;
  }

  .pill-pair {
    font-size: 1.05rem;
  }

  .pill-name {
    font-size: 0.78rem;
  }

  .pill-note {
    font-size: 0.55rem;
    line-height: 1.3;
    text-align: center;
    overflow-wrap: anywhere;
  }

  .shuli-dimensions-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .shuli-dim-card {
    padding: 15px 16px;
  }

  .handbook-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* 操作按鈕：滿版直向堆疊，確保足夠的觸控面積 */
  .shuli-actions-row {
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }

  .shuli-btn-action {
    width: 100%;
    justify-content: center;
    min-height: 46px;
  }

  /* 格局卡片：標題列改為上方對齊並縮小字級，讓標題能維持單行 */
  .shuli-patterns-card {
    padding: 16px 14px;
  }

  .patterns-card-header {
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
  }

  .patterns-header-icon {
    font-size: 1.2rem;
    margin-top: 1px;
  }

  .patterns-header-titles h4 {
    font-size: 0.9rem;
    letter-spacing: 0;
  }

  .patterns-header-titles p {
    font-size: 0.72rem;
  }

  .patterns-count-badge {
    font-size: 0.72rem;
    padding: 3px 9px;
  }

  /* 格局項目：改上下堆疊，讓格局名稱與說明取得整個卡片寬度，
     不再被左側固定 80px 的代碼欄擠到斷行。 */
  .pattern-item {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px 13px;
  }

  .pattern-badge-col {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    gap: 8px;
  }

  .pattern-code-chip {
    font-size: 1.02rem;
    padding: 3px 9px;
  }

  .pattern-name {
    font-size: 0.92rem;
  }

  .pattern-summary {
    font-size: 0.8rem;
  }

  .pattern-desc {
    font-size: 0.77rem;
    line-height: 1.6;
  }

  .pattern-none-notice {
    padding: 14px 16px;
    font-size: 0.79rem;
  }

  /* 已存紀錄彈窗：改為由下而上的底部抽屜，拇指更好操作 */
  .shuli-modal-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .shuli-modal-content {
    max-width: 100%;
    max-height: 85vh;
    border-radius: 18px 18px 0 0;
  }

  .shuli-modal-header {
    padding: 14px 16px;
  }

  .shuli-modal-body {
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  }

  .btn-modal-close {
    padding: 4px 8px;
    font-size: 1.35rem;
  }
}

/* 窄螢幕（iPhone SE 等）再緊縮一階 */
@media (max-width: 380px) {
  .shuli-content-wrap {
    padding-left: 10px;
    padding-right: 10px;
  }

  .shuli-card {
    padding: 14px 12px;
  }

  .shuli-tab-btn {
    font-size: 0.8rem;
    padding: 10px 4px;
  }

  .hero-num-title {
    font-size: 1.2rem;
  }

  /* 極窄螢幕：標題已無法與徽章並排，讓徽章換行靠右另起一列 */
  .patterns-card-header {
    flex-wrap: wrap;
  }

  .patterns-count-badge {
    margin-left: auto;
  }

  .patterns-header-titles h4 {
    font-size: 0.86rem;
  }

  .shuli-pills-row {
    gap: 6px;
  }

  .pill-level {
    font-size: 0.6rem;
  }
}