/* =====================================================================
   LifeHub 介面樣式 v0.4 — 全面視覺優化
   色彩系統依 dataviz 驗證色盤：系列色/狀態色固定順序指派，文字一律用文字色階
   ===================================================================== */

:root {
  color-scheme: light;
  /* 系列色 (分類資料固定順序，維持不變 — 圖表/資料色盲可辨性驗證過，重新設計不動這組) */
  --series-blue: #2b7fd6;
  --series-orange: #d97236;
  --series-aqua: #17966e;
  --series-yellow: #c98a12;
  --series-magenta: #d1447e;
  --series-green: #3f8f3f;
  --series-violet: #6e5cc4;
  --series-red: #d84f4f;
  /* 狀態色 (不動) */
  --good: #3f8f3f;
  --warning: #c98a12;
  --serious: #d97236;
  --critical: #e0575a;
  /* 介面色 — 「低調高級感」主題：暖白背景、單一沉穩深綠色主色、少量金色點綴，
     不用漸層滿版、不用液態玻璃，靠留白、細邊框跟柔和大範圍陰影堆出質感。 */
  --accent: #2f3b34;
  --accent-strong: #232c27;
  --accent-soft: rgba(47, 59, 52, 0.07);
  --gold: #a8823a;
  --gold-soft: rgba(168, 130, 58, 0.12);
  --bg: #f6f4f0;
  --surface: #ffffff;
  --surface-2: #f1efe8;
  --border: rgba(28, 27, 25, 0.08);
  --grid-line: #ece9e2;
  --baseline: #ddd8cd;
  --gray-mid: #efece4;
  --text-primary: #1c1b19;
  --text-secondary: #5c5850;
  --text-muted: #928d82;
  --brand-grad: linear-gradient(135deg, #2f3b34, #3c4a41);
  --glow-blue: rgba(47, 59, 52, 0.14);
  --glow-violet: rgba(47, 59, 52, 0.14);
  --glow-teal: rgba(47, 59, 52, 0.12);
  --shadow-card: 0 1px 2px rgba(28, 27, 25, 0.04), 0 14px 32px -12px rgba(28, 27, 25, 0.10);
  --shadow-pop: 0 16px 44px -14px rgba(28, 27, 25, 0.18);
  /* 全站「專業風格」扁平卡片色階 — 跟上面的暖白/深綠系統統一，不再是獨立的灰白色階 */
  --flat-ink: #1c1b19;
  --flat-sub: #5c5850;
  --flat-line: rgba(28, 27, 25, 0.08);
  --flat-surface: #ffffff;
  --flat-row-hover: #f1efe8;
  --warm-ink: #4d3b22;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
/* ---------- 加入主畫面後的 App 模式：鎖住左右晃動/橡皮筋彈跳，讓版面像原生 App 一樣固定 ----------
   iOS 在「加入主畫面」的獨立視窗下沒有瀏覽器邊界吸收滑動慣性，稍微手滑或內容邊界誤差就會出現
   整頁左右晃動或上下過度彈跳的感覺。這裡鎖死水平方向 (不該有任何內容需要左右滑動整頁)，並關掉
   橡皮筋回彈，只保留正常的垂直捲動。 */
html {
  overflow-x: hidden;
  overscroll-behavior: none;
  touch-action: pan-y;
  /* 這裡故意直接補一個跟 body 背景色系一致的底色。前面幾版一直在追「為什麼會有短暫位移」，
     但即使真的把位移完全消除，只要 WebKit 內部 compositing 圖層有一丁點時間差沒對齊，
     露出來的縫隙預設會是瀏覽器畫布本身的白色 (html 這一層本來完全沒設背景色)，看起來就是
     使用者一直反應的「一塊空白」。與其繼續猜測/排除觸發位移的各種可能手勢，這裡換個角度：
     直接讓最底層的畫布本身就是跟畫面一致的底色，這樣不管未來還有沒有殘留的極短暫位移，
     露出來的都會是同色系背景而不是刺眼的白色，實際觀感上就不會再有「一塊白色」的問題。 */
  background: var(--bg);
}
body {
  font-family: "Noto Sans TC", -apple-system, "PingFang TC", "Microsoft JhengHei", "Segoe UI", sans-serif;
  /* 低調高級感：拿掉多色光暈拼貼，只留極淡的單一暖色調光暈，質感靠留白/陰影/邊框堆出來 */
  background:
    radial-gradient(1100px 560px at 18% -10%, rgba(47, 59, 52, 0.035), transparent 62%),
    var(--bg);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
  width: 100%;
  overflow-x: hidden;
  overscroll-behavior: none;
  touch-action: pan-y;
}
#app { overflow-x: hidden; touch-action: pan-y; }
/* 晴空主題不需要星空背景，改用上面 body 的柔和光暈裝飾 */
#starfield { display: none; }
#app { display: flex; min-height: 100vh; position: relative; z-index: 1; }

/* ---------- 登入畫面 ---------- */
.auth-wrap {
  flex: 1; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(47, 59, 52, 0.05), transparent 60%),
    var(--bg);
  padding: 24px;
}
.auth-card {
  width: 100%; max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: var(--shadow-pop);
}
.auth-card h1 {
  font-size: 32px; font-weight: 800; letter-spacing: -0.5px;
  background: var(--brand-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 4px;
}
.auth-card .sub { color: var(--text-muted); font-size: 13px; margin-bottom: 22px; }
.auth-toggle { margin-top: 16px; font-size: 13px; color: var(--text-muted); text-align: center; }
.auth-toggle a { color: var(--series-blue); cursor: pointer; font-weight: 600; }
.error-msg { color: var(--critical); font-size: 13px; margin-top: 10px; min-height: 18px; }

/* ---------- 側欄 (可伸縮) ---------- */
.sidebar {
  width: 224px; flex-shrink: 0;
  /* 低調高級感：拿掉毛玻璃模糊，改成實色暖白背景 + 一條細邊框 */
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 18px 12px 14px;
  display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: 0; height: 100vh;
  transition: width 0.2s ease;
  overflow-x: hidden;
}
.sidebar.collapsed { width: 68px; padding-left: 10px; padding-right: 10px; }
.sidebar-top { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 16px; }
.brand {
  font-size: 20px; font-weight: 800; letter-spacing: -0.5px;
  white-space: nowrap; overflow: hidden;
}
.brand span {
  background: var(--brand-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sidebar-toggle {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text-secondary); cursor: pointer; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.sidebar-toggle:hover { background: color-mix(in srgb, var(--series-blue) 18%, var(--surface-2)); color: var(--text-primary); }
.sidebar.collapsed .brand { display: none; }
.sidebar.collapsed .sidebar-top { justify-content: center; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  color: var(--text-secondary); font-weight: 500; font-size: 13.5px;
  cursor: pointer; user-select: none;
  border-left: 3px solid transparent;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  white-space: nowrap; position: relative;
}
.nav-item .icon { font-size: 16px; width: 22px; text-align: center; flex-shrink: 0; }
.nav-item .nav-label { overflow: hidden; text-overflow: ellipsis; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 10px 8px; }
.sidebar.collapsed .nav-item .nav-label { display: none; }
.nav-item:hover { background: var(--surface-2); color: var(--text-primary); }
.nav-item.active {
  background: var(--accent-soft);
  color: var(--accent); font-weight: 700;
  border-left-color: var(--gold);
  box-shadow: none;
}
.sidebar-footer {
  margin-top: auto; padding: 12px; font-size: 12px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden;
}
.sidebar-footer a { color: var(--series-blue); cursor: pointer; }
.sidebar.collapsed .sidebar-footer { text-align: center; padding: 12px 2px; font-size: 0; }
.sidebar.collapsed .sidebar-footer::after { content: '·'; font-size: 12px; }

/* ---------- 主區域 ---------- */
.main { flex: 1; min-width: 0; padding: 0 28px 48px; }
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 0 16px;
  position: sticky; top: 0; z-index: 5;
  background: var(--bg);
  margin-bottom: 6px;
}
.topbar h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.3px; }
.user-chip { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 13px; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--brand-grad); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
}
/* 通用的圓形圖示按鈕 (目前只有右上角「意見回饋」在用，之後有類似需求也可以直接共用) */
.icon-btn {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--flat-line);
  background: var(--flat-surface); font-size: 15px; cursor: pointer;
  transition: background 0.15s, transform 0.05s;
}
.icon-btn:hover { background: color-mix(in srgb, var(--series-blue) 9%, transparent); }
.icon-btn:active { transform: scale(0.94); }
@media (max-width: 480px) {
  /* 窄螢幕空間有限，姓名文字先讓路給「意見回饋」按鈕，右上角保留大頭貼即可辨識是誰登入 */
  #userName { display: none; }
}

/* ---------- 卡片 (全站統一：扁平、細邊框、極淺陰影的「專業風格」) ---------- */
.card {
  background: var(--flat-surface);
  border: 1px solid var(--flat-line);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.card h3 {
  font-size: 13.5px; font-weight: 700; color: var(--flat-ink);
  margin-bottom: 14px; letter-spacing: -0.1px;
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 10px; border-bottom: 1px solid var(--flat-line);
}
.card .hint { font-size: 12.5px; color: var(--flat-sub); margin-bottom: 12px; }
.num { font-variant-numeric: tabular-nums; letter-spacing: -0.2px; }
.card.clickable { cursor: pointer; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
.card.clickable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-pop), 0 0 0 1px color-mix(in srgb, var(--series-blue) 30%, transparent);
  border-color: color-mix(in srgb, var(--series-blue) 40%, var(--border));
}

/* 六邊形小圖示徽章，用在卡片標題前當視覺點綴 (內容一律用一般圓角卡片，避免文字/圖表被裁切不好讀) */
.hex-badge {
  width: 26px; height: 26px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background: var(--accent); color: #fff;
}

/* ---------- 次分頁 (同一個功能區塊底下再分類，例如交通與旅遊) ---------- */
.subnav {
  display: flex; gap: 4px; margin-bottom: 18px;
  background: transparent; border: none; border-bottom: 1px solid var(--flat-line);
  border-radius: 0; padding: 0;
  overflow-x: auto;
  touch-action: pan-x;
  /* 這是全站唯一一個「刻意」允許水平滑動的區塊 (次分頁太多會塞不下需要橫向捲動)。
     沒有這行的話，滑到底/滑過頭時 WebKit 預設的水平橡皮筋回彈動畫可能會被誤認成
     「整個畫面在左右晃」，所以這裡限制它自己捲動到底就停住，不會有彈跳效果，
     也不會把捲動手勢再往外傳給上層造成畫面跟著位移。 */
  overscroll-behavior-x: contain;
}
.subnav-item {
  /* v0.36 修正：原本是 flex:1，會強迫所有子分頁「等寬」擠在容器裡，字數多的項目 (例如
     「🔍 選股工具」) 常常被硬壓縮到比文字本身還窄，看起來像「跑掉/被裁切」；改成
     flex:0 0 auto 讓每個分頁項目照文字內容自然決定寬度，超出容器可視範圍時交給
     .subnav 本來就有的 overflow-x:auto 處理 (橫向滑動)，不會再互相擠壓變形。 */
  flex: 0 0 auto; text-align: center; white-space: nowrap;
  padding: 10px 16px; border-radius: 0;
  font-size: 13px; font-weight: 600; color: var(--flat-sub);
  border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent;
  cursor: pointer; user-select: none;
  transition: color 0.15s, border-color 0.15s;
}
.subnav-item:hover { color: var(--flat-ink); }
.subnav-item.active {
  background: transparent; color: var(--flat-ink);
  border-bottom-color: var(--flat-ink); box-shadow: none;
}
.subpanel { display: none; }
.subpanel.active { display: block; animation: subpanelIn 0.18s ease; }
@keyframes subpanelIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid-cal { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; }
.grid-cal .cal-side { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-cal { grid-template-columns: 1fr; }
  .sidebar { width: 68px; padding-left: 10px; padding-right: 10px; }
  .sidebar .nav-item .nav-label, .sidebar .brand, .sidebar .sidebar-footer { display: none; }
  .sidebar .sidebar-top { justify-content: center; }
  .sidebar .nav-item { justify-content: center; padding: 10px 8px; }
  .sidebar.collapsed { width: 68px; }
  .main { padding: 0 14px 32px; }
}

/* 首頁 hero (小螢幕/備用簡易版，完整版見 .dash-grid) */
.hero {
  border-radius: 16px; padding: 26px 26px 22px; margin-bottom: 16px;
  background:
    radial-gradient(500px 200px at 90% -20%, rgba(255, 255, 255, 0.25), transparent 60%),
    var(--brand-grad);
  color: #fff; box-shadow: var(--shadow-card);
}
.hero h3 { font-size: 20px; font-weight: 800; margin-bottom: 4px; }
.hero p { font-size: 13px; opacity: 0.88; }

/* ---------- 首頁星系版面：左右資訊卡 + 中央 AI 核心 ---------- */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 320px) 1fr;
  gap: 18px;
  align-items: start;
}
.dash-col { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 1080px) {
  .dash-grid { grid-template-columns: 1fr; }
  .dash-col { order: 2; }
  .dash-orb-col { order: 1; }
}

.dash-orb-col { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.dash-orb-card {
  width: 100%; border-radius: 22px; padding: 26px 22px 22px; text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-pop);
}
.dash-orb-card h3 { justify-content: center; font-size: 16px; }
.dash-orb-card .hello { font-size: 15px; font-weight: 700; margin: 2px 0 6px; }
.dash-orb-card .sub { font-size: 12.5px; color: var(--text-muted); margin-bottom: 18px; }

.dash-orb-visual {
  position: relative; width: 148px; height: 148px; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
}
.dash-orb-ring {
  position: absolute; inset: 0; border-radius: 50%;
  /* 低調高級感：拿掉多彩旋轉光環，改成單一主色的細緻漸淡光圈，安靜、不搶戲 */
  background: conic-gradient(from 0deg, var(--accent), var(--gold) 40%, var(--accent) 100%);
  opacity: 0.16;
  animation: dashOrbSpin 12s linear infinite;
}
.dash-orb-ring::after {
  content: ''; position: absolute; inset: 10px; border-radius: 50%; background: var(--surface);
}
.dash-orb-core {
  position: relative; width: 74px; height: 74px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 6px var(--accent-soft);
  animation: dashOrbPulse 3.2s ease-in-out infinite;
}
@keyframes dashOrbSpin { to { transform: rotate(360deg); } }
@keyframes dashOrbPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
  .dash-orb-ring, .dash-orb-core { animation: none; }
}

.dash-orb-input {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 6px 6px 16px;
}
.dash-orb-input input {
  border: none; background: transparent; padding: 6px 0;
  box-shadow: none !important;
}
.dash-orb-input button {
  border-radius: 999px; padding: 8px 16px; flex-shrink: 0;
}
.dash-orb-hint { margin-top: 10px; font-size: 11px; color: var(--text-muted); }

.dash-card { margin-bottom: 0; min-height: 168px; padding: 22px 22px 20px; }
.dash-card .stat-big { font-size: 26px; font-weight: 800; letter-spacing: -0.3px; }
.dash-card .placeholder-badge {
  display: inline-block; font-size: 11px; font-weight: 700; color: var(--series-yellow);
  background: color-mix(in srgb, var(--series-yellow) 16%, transparent);
  border-radius: 999px; padding: 2px 10px; margin-left: auto;
}
.dash-mini-list { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 7px; }
.dash-mini-list li { font-size: 12.5px; color: var(--text-secondary); display: flex; justify-content: space-between; gap: 8px; }
.dash-mini-list li .lbl { color: var(--text-muted); }

/* ---------- 首頁待辦卡片：精簡版圓形勾選框、排序切換、單筆刪除 ----------
   原本用瀏覽器原生 checkbox，不同瀏覽器長相不一致、跟其他自訂樣式的元件放在一起會顯得
   突兀老氣，這裡用 appearance:none 自己畫一個細圓框＋打勾動畫，維持跟卡片其餘部分一致的質感。 */
.dash-check {
  appearance: none; -webkit-appearance: none; margin: 0; flex-shrink: 0;
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--border); background: var(--surface);
  cursor: pointer; position: relative; transition: border-color 0.15s, background 0.15s;
}
.dash-check:hover { border-color: var(--accent); }
.dash-check:checked { background: var(--accent); border-color: var(--accent); }
.dash-check:checked::after {
  content: ''; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.dash-sort-btn {
  font-size: 11px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
  cursor: pointer; font-weight: 600;
}
.dash-sort-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.dash-task-mini-list { gap: 8px; }
.dash-task-row { display: flex; align-items: center; gap: 8px; }
.dash-task-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.dash-task-title { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-task-date { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.dash-task-date.overdue { color: var(--critical); font-weight: 700; }
.dash-task-del {
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; border: none; background: transparent;
  color: var(--text-muted); font-size: 15px; line-height: 1; cursor: pointer; opacity: 0.45;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.dash-task-del:hover { opacity: 1; background: color-mix(in srgb, var(--critical) 14%, transparent); color: var(--critical); }
@media (max-width: 760px) {
  /* 手機沒有 hover，刪除鈕預設就要看得到，不然使用者根本不知道能刪 */
  .dash-task-del { opacity: 0.6; }
}
.dash-orb-card { padding: 32px 26px 28px; }

/* ---------- 首頁「晨間簡報」主題 ----------
   低調高級感重新設計：拿掉「不同時段=不同繽紛色系」的做法 (早晨橘/午後藍/傍晚粉/深夜靛)，
   改成全時段統一使用同一套沉穩深綠+金點綴，時段差異改用文字/圖示表達，不再靠色相狂換來區分。
   這樣首頁在任何時間點打開，視覺質感都是一致、安靜的，符合「不要液態玻璃、要低調高級感」的方向。 */
#tab-dashboard { position: relative; }
#tab-dashboard .dash-grid { position: relative; z-index: 1; }

#tab-dashboard .dash-sunrise-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--border);
  padding: 4px 12px; border-radius: 999px; margin-bottom: 10px;
}
#tab-dashboard .dash-orb-card {
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-pop);
}
#tab-dashboard .dash-orb-input button { background: var(--accent); border: none; }
#tab-dashboard .dash-card {
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
#tab-dashboard .dash-card.clickable:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
  box-shadow: var(--shadow-pop);
}
#tab-dashboard .hex-badge { background: var(--accent); }

/* 時段徽章/按鈕全部沿用同一套低調配色，不再隨時段變換色相 */
#tab-dashboard .dash-period-afternoon .dash-sunrise-badge,
#tab-dashboard .dash-period-evening .dash-sunrise-badge,
#tab-dashboard .dash-period-night .dash-sunrise-badge {
  color: var(--accent); background: var(--accent-soft); border-color: var(--border);
}
#tab-dashboard .dash-period-afternoon .dash-orb-input button,
#tab-dashboard .dash-period-evening .dash-orb-input button,
#tab-dashboard .dash-period-night .dash-orb-input button { background: var(--accent); border: none; }

.dash-brief-box { margin-top: 14px; text-align: left; }
.dash-brief-btn { width: 100%; justify-content: center; font-size: 12.5px; }
.dash-brief-result {
  margin-top: 10px; padding: 12px 14px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 12.5px; line-height: 1.7; color: var(--text-secondary);
}

/* ---------- 首頁主動式提醒 (帳單到期/預算超支/待辦逾期/好幾天沒記心情) ----------
   低調高級感：跟其他卡片一樣暖白底 + 細邊框，只用左側一條細色線標示嚴重程度，
   不用滿版紅底/黃底這種比較刺眼的警示做法。 */
.dash-reminders-box { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.dash-reminder-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px 11px 13px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  font-size: 13px; color: var(--text-secondary);
  cursor: pointer; transition: transform 0.1s, box-shadow 0.15s;
}
.dash-reminder-item:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }
.dash-reminder-item.warning { border-left-color: var(--gold); }
.dash-reminder-item.critical { border-left-color: var(--critical); }
.dash-reminder-icon { font-size: 15px; flex-shrink: 0; }
.dash-reminder-text { flex: 1; }

/* ---------- 表單 ---------- */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
input, select, textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-primary);
  font-size: 13.5px;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--series-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--series-blue) 18%, transparent);
}
textarea { resize: vertical; }
.form-row { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.form-row > input, .form-row > select { flex: 1; min-width: 130px; width: auto; }
.form-row > button, .form-row > label { flex-shrink: 0; }

/* ---------- 按鈕 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 18px;
  border: none; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; font-family: inherit;
  cursor: pointer;
  transition: filter 0.15s, background 0.15s, transform 0.05s;
}
.btn:active { transform: scale(0.98); }
.btn-primary {
  background: var(--brand-grad); color: #fff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--series-blue) 35%, transparent);
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost {
  background: transparent; color: var(--series-blue);
  border: 1px solid transparent;
}
.btn-ghost:hover { background: color-mix(in srgb, var(--series-blue) 9%, transparent); }
.btn-success { background: var(--good); color: #fff; }

/* ---------- 表格 ---------- */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  text-align: left; padding: 9px 10px;
  font-size: 12px; font-weight: 700; color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
thead th:first-child { border-radius: 8px 0 0 8px; }
thead th:last-child { border-radius: 0 8px 8px 0; }
tbody td { padding: 10px; border-bottom: 1px solid var(--grid-line); }
tbody tr { transition: background 0.12s; }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: none; }

/* ---------- 徽章 / 狀態 (全站統一：方角小標籤，不是圓形聊天泡泡) ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1px;
}
.badge-positive { background: color-mix(in srgb, var(--good) 10%, transparent); color: var(--good); border: 1px solid color-mix(in srgb, var(--good) 28%, transparent); }
.badge-negative { background: color-mix(in srgb, var(--critical) 10%, transparent); color: var(--critical); border: 1px solid color-mix(in srgb, var(--critical) 28%, transparent); }
.badge-neutral { background: var(--flat-surface); color: var(--flat-sub); border: 1px solid var(--flat-line); }
.delta-up { color: var(--series-red); font-weight: 700; }     /* 台股慣例: 漲=紅 */
.delta-down { color: var(--series-green); font-weight: 700; } /* 台股慣例: 跌=綠 */
/* 股票頁沿用台股慣例 (漲=紅=positive / 跌=綠=negative)，跟其他頁面「positive=好事=綠」的意涵不同，
   所以刻意只在股票頁範圍內覆寫顏色，避免財務/心情頁的「正向」被誤讀成紅色警示 */
#tab-stocks .badge-positive { background: color-mix(in srgb, var(--series-red) 8%, transparent); color: var(--series-red); border-color: color-mix(in srgb, var(--series-red) 25%, transparent); }
#tab-stocks .badge-negative { background: color-mix(in srgb, var(--series-green) 8%, transparent); color: var(--series-green); border-color: color-mix(in srgb, var(--series-green) 25%, transparent); }

.disclaimer {
  background: var(--flat-surface);
  border: 1px solid var(--flat-line);
  color: var(--flat-sub);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 11.5px;
  line-height: 1.6;
  margin-bottom: 16px;
}

/* ---------- 數據磚 / 指標 ---------- */
.stat-tile .value { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; }
.stat-tile .label, .label { font-size: 12px; color: var(--flat-sub); }

.kv-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-top: 12px;
}
@media (max-width: 700px) { .kv-grid { grid-template-columns: repeat(2, 1fr); } }
.kv {
  background: var(--flat-row-hover);
  border: 1px solid var(--flat-line);
  border-radius: 6px;
  padding: 8px 12px;
}
.kv .k { font-size: 11.5px; color: var(--flat-sub); }
.kv .v { font-size: 14.5px; font-weight: 700; color: var(--flat-ink); font-variant-numeric: tabular-nums; }

/* 指數卡 */
.index-card { display: flex; justify-content: space-between; align-items: center; }
.index-card .idx-name { font-size: 12px; font-weight: 600; color: var(--flat-sub); text-transform: uppercase; letter-spacing: 0.3px; }
.index-card .stat-tile .value { font-size: 24px; font-weight: 700; color: var(--flat-ink); }

/* 法人分項 chips */
.inst-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.inst-chip {
  flex: 1; min-width: 120px;
  background: var(--flat-row-hover); border: 1px solid var(--flat-line);
  border-radius: 6px; padding: 8px 12px;
}
.inst-chip .k { font-size: 11.5px; color: var(--flat-sub); }
.inst-chip .v { font-size: 13.5px; font-weight: 700; color: var(--flat-ink); font-variant-numeric: tabular-nums; }

/* ---------- 資料表格 (全站共用：股票選股工具、未來其他模組需要表格時都可以直接用) ---------- */
.data-table, .stx-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.data-table th, .stx-table th {
  text-align: right; font-size: 11px; font-weight: 600; color: var(--flat-sub);
  padding: 8px 10px; border-bottom: 1px solid var(--flat-line); white-space: nowrap;
}
.data-table th:first-child, .stx-table th:first-child,
.data-table td:first-child, .stx-table td:first-child { text-align: left; }
.data-table td, .stx-table td { text-align: right; padding: 9px 10px; border-bottom: 1px solid #f1f5f9; font-variant-numeric: tabular-nums; }
.data-table tbody tr:hover, .stx-table tbody tr:hover { background: var(--flat-row-hover); }
.data-table td:first-child, .stx-table td:first-child { font-weight: 600; color: var(--flat-ink); font-variant-numeric: normal; }

/* ---------- 分隔式統計條 (取代多個獨立方塊，數字更大、用分隔線取代邊框) ---------- */
.stat-strip, .stx-stat-strip { display: flex; flex-wrap: wrap; }
.stat-strip .stat-item, .stx-stat-strip .stx-stat { flex: 1; min-width: 140px; padding: 4px 18px; border-left: 1px solid var(--flat-line); }
.stat-strip .stat-item:first-child, .stx-stat-strip .stx-stat:first-child { border-left: none; padding-left: 0; }
.stat-strip .stat-item .k, .stx-stat-strip .stx-stat .k { font-size: 11px; color: var(--flat-sub); margin-bottom: 4px; }
.stat-strip .stat-item .v, .stx-stat-strip .stx-stat .v { font-size: 20px; font-weight: 700; color: var(--flat-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.3px; }

/* ---------- 自選股：精簡數字列 (master-detail 列表) ---------- */
.stock-row-list { display: flex; flex-direction: column; gap: 8px; }
.stock-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; cursor: pointer; user-select: none;
  padding: 12px 14px; border-radius: 14px;
  background: var(--flat-surface); border: 1px solid var(--flat-line);
  transition: background 0.15s, transform 0.15s;
}
.stock-row:hover { background: var(--flat-row-hover); transform: translateY(-1px); }
.stock-row-left { min-width: 0; flex: 1; }
.chevron { display: inline-block; width: 12px; color: var(--text-muted); font-size: 11px; }
.stock-summary-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mini-stat {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--flat-surface); border: 1px solid var(--flat-line);
  border-radius: 4px; padding: 3px 8px;
  font-size: 11px; color: var(--flat-sub);
}
.mini-stat b { color: var(--flat-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.stock-row-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.stock-row-right .stat-tile .value { font-variant-numeric: tabular-nums; }
.stock-pin-btn {
  cursor: pointer; font-size: 15px; opacity: 0.45; transition: opacity 0.15s, transform 0.15s;
  padding: 2px 4px; line-height: 1;
}
.stock-pin-btn:hover { opacity: 0.8; transform: scale(1.1); }
.stock-pin-btn.active { opacity: 1; }

/* ---------- 釘選比較：多檔同時開啟時只顯示精簡數字，不用整排攤開 ---------- */
.stock-compare-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px;
}
.stock-compare-card {
  padding: 12px 14px; border-radius: 14px;
  background: var(--flat-surface); border: 1px solid var(--flat-line);
}

/* ---------- 個股詳細頁 (master-detail)：獨立頁面，多欄呈現、減少滑動 ---------- */
.stock-detail-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.stock-detail-back { flex-shrink: 0; }
.stock-detail-grid {
  display: grid; grid-template-columns: minmax(240px, 30%) minmax(320px, 1fr); gap: 16px; align-items: start;
}
.stock-detail-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.stock-detail-col .card { margin-bottom: 0; }
.stock-hero-card { text-align: left; }
.stock-hero-price { font-size: 42px; font-weight: 800; letter-spacing: -1px; margin: 4px 0; font-variant-numeric: tabular-nums; }
/* 左欄較窄 (約30%)，關鍵數據格改用2欄避免像"25,000,000 股"這種長數字被擠壓换行溢出 */
.stock-detail-col-left .kv-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) {
  .stock-detail-grid { grid-template-columns: 1fr; }
}

/* ---------- 股票頁 ----------
   低調高級感重新設計：拿掉翡翠綠滿版光暈跟玻璃卡片，改成跟全站統一的暖白卡片系統，
   只用金色 (--gold) 做「這是金融頁」的點綴 (標題文字、次分頁選中狀態)，「漲紅跌綠」
   這條台股慣例維持不動，只用在漲跌徽章上、不會被主題色搶走意義。 */
#tab-stocks { position: relative; }
#tab-stocks > * { position: relative; z-index: 1; }

#tab-stocks .num { font-variant-numeric: tabular-nums; letter-spacing: -0.2px; }

#tab-stocks .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
}
#tab-stocks .card h3 {
  color: var(--text-primary);
  border-bottom-color: var(--border);
}
#tab-stocks .disclaimer {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--flat-sub);
  border-radius: 12px;
}

/* 指數卡：拿掉底色光暈，維持全站一致的乾淨留白 */
#tab-stocks .index-card {
  align-items: center;
  border-radius: 12px; margin: -4px -6px; padding: 4px 6px;
}
#tab-stocks .index-card .idx-name { font-size: 12px; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: 0.4px; }
#tab-stocks .index-card .stat-tile .value { font-size: 25px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.4px; }

/* 次分頁：改回全站統一的細底線膠囊風，選中狀態用金色點綴，不再是滿版漸層 */
#tab-stocks .subnav { background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px; gap: 4px; }
#tab-stocks .subnav-item { border-radius: 999px; padding: 9px 16px; color: var(--flat-sub); border-bottom: none; margin-bottom: 0; }
#tab-stocks .subnav-item:hover { color: var(--text-primary); }
#tab-stocks .subnav-item.active {
  background: var(--accent); color: #fff;
  border-bottom-color: transparent;
  box-shadow: none;
}

#tab-stocks .btn-primary { background: var(--accent); border: none; }

/* 徽章：漲=紅/跌=綠沿用台股慣例，維持功能性顏色不動 */
#tab-stocks .badge-positive { box-shadow: 0 0 0 1px color-mix(in srgb, var(--series-red) 12%, transparent) inset; }
#tab-stocks .badge-negative { box-shadow: 0 0 0 1px color-mix(in srgb, var(--series-green) 12%, transparent) inset; }
#tab-stocks .badge-neutral { background: var(--surface-2); border-color: var(--border); }

#tab-stocks .mini-stat { background: var(--surface-2); border: 1px solid var(--border); }
#tab-stocks .kv { background: var(--surface-2); border: 1px solid var(--border); }
#tab-stocks .kv .v { color: var(--text-primary); }

#tab-stocks .stock-row { background: var(--surface); border: 1px solid var(--border); }
#tab-stocks .stock-row:hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--accent) 22%, var(--border)); }
#tab-stocks .stock-compare-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
#tab-stocks .stock-hero-price { color: var(--text-primary); }
#tab-stocks .stock-hero-card { background: var(--surface); }

#tab-stocks .stx-table th { color: var(--flat-sub); border-bottom-color: var(--border); }
#tab-stocks .stx-table tbody tr:hover { background: var(--surface-2); }
#tab-stocks .stx-table td:first-child { color: var(--text-primary); }

#tab-stocks .stx-stat-strip .stx-stat { border-left-color: var(--border); }
#tab-stocks .stx-stat-strip .stx-stat .v { color: var(--text-primary); }

#tab-stocks .coping-note-item { background: var(--surface); border: 1px solid var(--border); }
#tab-stocks .coping-note-item:hover { background: var(--surface-2); }

/* ---------- 簡易選股工具：結果用卡片列表呈現，取代密密麻麻的表格 ---------- */
.screener-list { display: flex; flex-direction: column; gap: 8px; }
.screener-row {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 10px 14px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--grid-line);
}
.screener-row-main { min-width: 0; }
.screener-row-stats { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- 行事曆：月曆格狀檢視 ----------
   跟 #tab-mood 同一套模式：JS (switchTab) 把這個分頁的 display 用行內樣式設成 flex
   (行內樣式優先權比外部 CSS 高，一定要跟著在這裡把 flex-direction 定義成 column，
   不然預設值是 row，桌面版會變成橫向排版)。桌面版沒有鎖高度，跟平常一樣可以往下滑，
   這裡只是把 display 從 block 換成 flex，視覺上不會有差別。 */
#tab-calendar { flex-direction: column; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-weekday { text-align: center; font-size: 12px; color: var(--text-muted); font-weight: 700; padding-bottom: 6px; }
.cal-cell {
  min-height: 76px; border-radius: 10px; padding: 6px;
  background: var(--surface-2); border: 1.5px solid transparent;
  cursor: pointer; display: flex; flex-direction: column; gap: 3px;
  transition: border-color 0.15s, background 0.15s;
}
.cal-cell:hover { border-color: color-mix(in srgb, var(--series-blue) 40%, transparent); }
.cal-cell.empty { background: transparent; cursor: default; }
.cal-cell.empty:hover { border-color: transparent; }
.cal-cell.today .cal-daynum { color: var(--series-blue); font-weight: 800; }
.cal-cell.selected { border-color: var(--series-blue); background: color-mix(in srgb, var(--series-blue) 8%, var(--surface-2)); }
.cal-daynum { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.cal-daynum-row { display: flex; align-items: baseline; gap: 4px; }
/* 農曆日期／節氣：比照使用者提供的 iPhone 內建行事曆截圖，農曆日期是數字旁邊的小灰字，
   節氣是獨立的紫色小標籤，兩者都是點綴用途，不搶事件色塊的視覺重量。 */
.cal-lunar-label { font-size: 9.5px; color: var(--text-muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-solarterm-tag {
  align-self: flex-start; font-size: 9px; font-weight: 700; border-radius: 999px;
  padding: 1px 6px; margin-top: 1px;
  background: color-mix(in srgb, var(--series-violet) 16%, transparent); color: var(--series-violet);
  white-space: nowrap;
}
.cal-chip { font-size: 10.5px; font-weight: 700; border-radius: 5px; padding: 1px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-more { font-size: 10px; color: var(--text-muted); }
.cal-chips-desktop { display: flex; flex-direction: column; gap: 3px; }
/* 手機版事件色塊 (比照 iOS 內建行事曆：格子裡直接看得到事項文字，不是只有色點)，
   平常隱藏，下面 `@media (max-width:760px)` 才會顯示出來取代桌面版的 .cal-chips-desktop。 */
.cal-chips-mobile { display: none; flex-direction: column; gap: 1px; margin-top: 1px; width: 100%; min-width: 0; }
.cal-chip-m {
  font-size: 8.5px; font-weight: 700; line-height: 1.5; border-radius: 4px; padding: 0 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;
}
.cal-more-m { font-size: 8px; color: var(--text-muted); text-align: right; padding-right: 1px; }
.cal-mobile-actions { display: none; gap: 8px; margin: -4px 0 10px; }
.cal-mobile-actions .btn { flex: 1; font-size: 12px; padding: 8px 6px; }

@media (max-width: 760px) {
  .cal-cell { min-height: 0; padding: 3px 2px; gap: 1px; }
  .cal-daynum { font-size: 11px; }
  .cal-daynum-row { gap: 2px; }
  .cal-lunar-label { font-size: 7.5px; max-width: 22px; }
  .cal-solarterm-tag { font-size: 7px; padding: 0 3px; }
  .cal-chips-desktop { display: none; }
  .cal-chips-mobile { display: flex; }
  .cal-grid { gap: 3px; }
  .cal-mobile-actions { display: flex; }

  /* ---- 手機版一頁鎖住高度、完整月份看到底，不用再往下滑 ----
     使用者傳了 iPhone 內建行事曆的截圖要求比照：整個月曆格子要在同一個畫面看完。
     做法跟 #tab-mood 的「一畫面儀表板」是同一套邏輯：用 100dvh 扣掉頂部 topbar
     (含手機瀏海安全區) 跟底部導覽列保留的淨空高度，算出月曆卡片可以用的高度，
     「新增行程」「選定日期行程」這兩張桌面版側邊卡片改成完全隱藏 (直接不佔版面)，
     點日期改用底部彈出面板 (openCalDaySheet，跟「更多功能」選單同一套元件) 呈現。
     100dvh 而不是 100vh：這個 App 主要以「加入主畫面」的獨立模式使用，這種模式下
     瀏覽器沒有網址列展開/收合的問題，dvh 在一般 Safari 分頁模式下也比較準確。 */
  #tab-calendar { height: calc(100dvh - env(safe-area-inset-top) - 70px - 110px - 12px); display: flex; flex-direction: column; overflow: hidden; }
  #tab-calendar .grid-cal { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  #tab-calendar .grid-cal > .card:first-child { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-bottom: 0; padding: 12px 12px 6px; }
  #tab-calendar .cal-side { display: none; }
  #tab-calendar .legend { display: none; }
  #calMonthNav { flex-shrink: 0; }
  #calMonthGrid { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  #calMonthGrid .cal-grid { flex: 1; min-height: 0; }
}

/* ---------- 日記：迷你月曆 (只標記有沒有寫日記) ---------- */
.mini-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mini-cal-weekday { text-align: center; font-size: 11px; color: var(--text-muted); font-weight: 700; padding-bottom: 4px; }
.mini-cal-cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 12.5px; cursor: pointer; position: relative;
  color: var(--text-secondary);
}
.mini-cal-cell:hover { background: var(--surface-2); }
.mini-cal-cell.empty { cursor: default; }
.mini-cal-cell.empty:hover { background: none; }
.mini-cal-cell.today { border: 1.5px solid var(--series-blue); color: var(--series-blue); font-weight: 700; }
.mini-cal-cell.has-mark { background: color-mix(in srgb, var(--series-blue) 10%, transparent); }
.mini-cal-dot { position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--series-blue); }

/* ---------- 深連結清單 ---------- */
.provider-item {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 8px;
  text-decoration: none; color: inherit;
  background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.provider-item:hover {
  border-color: var(--series-blue);
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
}
.provider-item .p-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.provider-item .p-avatar {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; color: #fff;
}
.provider-item .p-name { font-weight: 700; font-size: 13.5px; }
.provider-item .p-note { font-size: 12px; color: var(--text-muted); }
.provider-item .p-go { color: var(--series-blue); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.tag {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; margin-left: 6px; vertical-align: 1px;
}
.tag-fill { background: color-mix(in srgb, var(--good) 13%, transparent); color: var(--good); }
.tag-manual { background: var(--gray-mid); color: var(--text-muted); }

/* ---------- 圖表 ---------- */
.legend { display: flex; gap: 16px; margin-top: 8px; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; }
.empty-state {
  padding: 26px; text-align: center;
  color: var(--text-muted); font-size: 13px;
  background: var(--surface-2); border-radius: 10px;
}

/* ---------- AI 助理 ---------- */
.chat-box { max-height: 440px; overflow-y: auto; margin-bottom: 14px; padding: 4px 2px; }
.chat-msg {
  margin-bottom: 10px; padding: 10px 14px; border-radius: 14px;
  max-width: 82%; white-space: pre-wrap; font-size: 13.5px; line-height: 1.55;
}
.chat-user { margin-left: auto; background: var(--brand-grad); color: #fff; border-bottom-right-radius: 4px; }
.chat-ai { background: var(--gray-mid); border-bottom-left-radius: 4px; }

/* AI 主動建議「加入待辦事項」的確認卡片——刻意跟聊天泡泡分開、更明顯一點，
   但一定要使用者自己按按鈕，AI 沒有能力自己觸發建立任務。 */
.task-suggestion-card {
  max-width: 82%; margin: -4px 0 10px; padding: 10px 12px; border-radius: 12px;
  background: var(--surface-2); border: 1px dashed var(--gold, var(--border));
  font-size: 12.5px;
}
.task-suggestion-text { margin-bottom: 8px; color: var(--text-primary); }
.task-suggestion-actions { display: flex; gap: 8px; }

/* ---------- 心情陪伴 ---------- */
.mood-score-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 16px; }
.mood-score-btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text-secondary); font-weight: 700; font-size: 13.5px;
  cursor: pointer; transition: transform 0.1s, box-shadow 0.15s, background 0.15s, color 0.15s;
}
.mood-score-btn:hover { transform: translateY(-2px); }
.mood-score-btn.selected {
  background: var(--brand-grad); color: #fff; border-color: transparent;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--series-violet) 25%, transparent);
}
.mood-tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 16px; }
.mood-tag-chip {
  padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-secondary);
  cursor: pointer; user-select: none; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mood-tag-chip.selected {
  background: color-mix(in srgb, var(--series-magenta) 20%, transparent);
  border-color: var(--series-magenta); color: var(--series-magenta);
}
/* ---------- 心情頁：一畫面儀表板，鎖住視窗高度、整頁不需要滑動 ----------
   左欄 (打卡/安心小卡/生理週期) 跟中欄 (AI 陪伴對話) 固定在畫面內，
   右欄 (想法重塑練習等比較深的工具跟資料) 自己內部捲動，其他欄位跟整頁都不會被撐高。 */
#tab-mood {
  height: calc(100vh - 148px); /* 上方 topbar + .main 下 padding 的實際量測值 */
  display: flex; flex-direction: column; overflow: hidden;
  position: relative;
}
.mood-dash-topline, .mood-dash-grid { position: relative; z-index: 1; }

.mood-dash-topline {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  flex-shrink: 0; margin-bottom: 12px;
}
.mood-dash-topline-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mood-dash-sky-badge {
  font-size: 11px; font-weight: 700; color: var(--accent); white-space: nowrap;
  background: var(--accent-soft); border: 1px solid var(--border);
  padding: 4px 12px; border-radius: 999px;
}
/* v0.38 修正：這裡原本把 AI 主動關心的訊息 (內容是完整的一句話，長度不固定，例如「這幾天
   感覺你過得比較辛苦，要不要來這裡聊聊？」) 硬套用「短徽章」的樣式 (border-radius:999px、
   小 padding、沒設寬度)。徽章樣式只適合「安心專線」那種固定幾個字的短標籤；套在一整句話上，
   加上這個元素被擠在跟「晴空手札」徽章同一行 (flex 沒有換行)，瀏覽器會把它硬壓成很窄的
   寬度，逼文字換成好幾行，border-radius:999px 在窄長條上又會讓整個外框變成一個奇怪的橢圓/
   圓形，文字被包在裡面看起來像跑版、疊到其他內容上。修法：讓這個關心訊息永遠自己獨佔一行
   (flex-basis:100%，不再跟晴空手札徽章擠在同一行)，樣式改回正常的圓角矩形文字方塊，寬度
   撐滿、有正常的行距，長句子也能好好換行顯示。 */
.mood-dash-care { flex: 1 1 100%; }
.mood-dash-care:empty { display: none; }
.mood-dash-care .mood-care-banner {
  margin: 4px 0 0; padding: 10px 14px; font-size: 12.5px; line-height: 1.6;
  border-radius: 12px; width: 100%; box-sizing: border-box;
}
.mood-dash-topline-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.mood-dash-crisis-badge {
  display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
  background: rgba(244, 63, 94, 0.08);
  border: 1px solid rgba(244, 63, 94, 0.28);
  font-size: 11.5px; font-weight: 700; color: #e11d48; white-space: nowrap; cursor: default;
  box-shadow: 0 1px 4px rgba(244, 63, 94, 0.08);
}
.mood-dash-crisis-badge .mood-dash-crisis-num { color: var(--text-secondary); font-weight: 600; }

.mood-dash-grid {
  flex: 1; min-height: 0; display: grid;
  grid-template-columns: minmax(240px, 22%) minmax(320px, 30%) minmax(320px, 1fr);
  gap: 14px;
}
.mood-dash-col { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
/* 低調高級感：拿掉玻璃感／天空藍邊框，跟全站統一的暖白卡片系統一致 */
.mood-dash-col .card {
  margin-bottom: 0; padding: 16px 18px; flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}
.mood-dash-col .card h3 { margin-bottom: 6px; color: var(--text-primary); }
.mood-dash-col .card .hint { margin-bottom: 8px; }
.mood-dash-col-left { overflow-y: auto; padding-right: 4px; }
.mood-dash-col-mid { overflow: hidden; }
.mood-dash-col-mid .card.mood-chat-card { flex: 1; min-height: 0; margin-bottom: 0; }
.mood-dash-col-mid .card.mood-chat-card .chat-box { flex: 1; max-height: none; }
.mood-dash-col-right { overflow-y: auto; padding-right: 4px; padding-bottom: 4px; }

/* 對話氣泡：跟全站統一用主色 (深綠)，不再是天空藍系 */
.mood-dash-col-mid .chat-ai { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-primary); }
.mood-dash-col-mid .chat-user { background: var(--brand-grad); }
.mood-dash-col-mid .btn-primary { background: var(--accent); border: none; }

@media (max-width: 1200px) {
  #tab-mood { height: auto; overflow: visible; }
  #tab-mood::before, #tab-mood::after { display: none; }
  .mood-dash-grid { grid-template-columns: 1fr; }
  .mood-dash-col-right { overflow-y: visible; }
}

/* ---------- AI 助理「智慧對話室」 ----------
   低調高級感重新設計：拿掉靛紫光暈跟玻璃卡片，跟全站統一的暖白+深綠+金點綴系統一致，
   AI 光球改成實心主色，安靜不搶戲。 */
.assistant-wrap { max-width: 760px; margin: 0 auto; position: relative; }
.assistant-card {
  position: relative; z-index: 1;
  border-radius: 20px; padding: 24px 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column;
}
.assistant-header { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.assistant-orb {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent);
  box-shadow: 0 0 0 6px var(--accent-soft);
}
.assistant-header h3 { margin-bottom: 2px; font-size: 17px; color: var(--text-primary); }
.assistant-header .hint { margin-bottom: 0; }
.assistant-header-right { margin-left: auto; flex-shrink: 0; }
.assistant-header-right .btn { white-space: nowrap; }
.assistant-suggest-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
.assistant-suggest-chip {
  font-size: 12px; font-weight: 600; color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--border);
  padding: 6px 13px; border-radius: 999px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.assistant-suggest-chip:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.assistant-card .chat-box { flex: 1; min-height: 320px; max-height: 52vh; margin: 14px 0; }
.assistant-card .chat-ai { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-primary); }
.assistant-card .chat-user { background: var(--brand-grad); }
.assistant-card .form-row input {
  border-radius: 999px; padding: 11px 18px;
  border: 1px solid var(--border);
}
.assistant-card .form-row input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.assistant-card .btn-primary { background: var(--accent); border: none; border-radius: 999px; padding: 11px 22px; }
.assistant-card .btn-ghost:hover { color: var(--accent); }

.mood-score-slider-wrap { display: flex; align-items: center; gap: 16px; margin: 14px 0 18px; }
.mood-score-slider-wrap input[type="range"] {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--series-aqua), var(--series-yellow), var(--series-magenta));
  box-shadow: none !important;
}
.mood-score-slider-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 3px solid var(--series-violet);
  box-shadow: 0 2px 8px rgba(0,0,0,0.35); cursor: pointer;
}
.mood-score-slider-wrap input[type="range"]::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 3px solid var(--series-violet);
  box-shadow: 0 2px 8px rgba(0,0,0,0.35); cursor: pointer; border: none;
}
.mood-score-display {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; color: #fff;
  background: var(--brand-grad);
  box-shadow: 0 0 20px -4px var(--glow-violet);
}

.mood-chat-card {
  background: var(--surface);
  border-color: var(--border);
}
.mood-chat-avatar {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
  background: var(--accent);
  box-shadow: 0 0 0 6px var(--accent-soft);
}

.mood-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mood-stat-tile {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px;
}
.mood-stat-tile .mood-stat-value { font-size: 20px; font-weight: 800; letter-spacing: -0.3px; }
.mood-stat-tile .mood-stat-label { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

.mood-chat-card { min-height: 400px; display: flex; flex-direction: column; }
.mood-chat-card .chat-box { flex: 1; min-height: 220px; max-height: 40vh; overflow-y: auto; }
.mood-grid .dash-col .card { min-height: 200px; }

.mood-heatmap { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin-top: 4px; }
.mood-heatmap-cell {
  aspect-ratio: 1; border-radius: 5px; background: var(--surface);
  border: 1px solid var(--border);
}
.mood-heatmap-legend { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11px; color: var(--text-muted); }
.mood-heatmap-legend .mood-heatmap-cell { width: 12px; height: 12px; }
.mood-hotline-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.mood-hotline {
  padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--border);
}
.mood-chat-companion .chat-ai { background: color-mix(in srgb, var(--series-violet) 14%, var(--surface-2)); }
.mood-chat-companion .chat-ai.flagged { border: 1px solid color-mix(in srgb, var(--series-aqua) 45%, transparent); }

/* ---------- 首頁快速心情打卡（小尺寸版按鈕） ---------- */
.mood-score-row.sm { gap: 5px; margin: 8px 0 8px; }
.mood-score-btn.sm { width: 26px; height: 26px; font-size: 11px; }
.dash-mood-quick-note { display: flex; gap: 6px; margin-top: 4px; }
.dash-mood-quick-note input { flex: 1; font-size: 12.5px; padding: 7px 10px; }

/* ---------- 主動關心 / 提醒 banner ---------- */
.dash-care-banner {
  background: color-mix(in srgb, var(--series-magenta) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--series-magenta) 30%, var(--border));
  border-radius: 10px; padding: 8px 12px; font-size: 12.5px; line-height: 1.5;
  color: var(--text-secondary); margin-bottom: 10px;
}
.mood-care-banner {
  background: color-mix(in srgb, var(--series-magenta) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--series-magenta) 28%, var(--border));
  border-radius: 12px; padding: 12px 16px; font-size: 13.5px; line-height: 1.6;
  color: var(--text-secondary); margin-bottom: 16px;
}

/* ---------- 心情 × 行事曆 洞察 ---------- */
.mood-insight-card p { font-size: 13.5px; line-height: 1.7; color: var(--text-secondary); }

/* ---------- 這週 AI 回顧 ---------- */
.mood-weekly-review-box {
  margin-top: 10px; padding: 14px 16px; border-radius: 12px;
  background: color-mix(in srgb, var(--series-violet) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--series-violet) 28%, var(--border));
  font-size: 13.5px; line-height: 1.7; color: var(--text-secondary);
}

/* ---------- 安心小卡 ---------- */
.coping-note-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; max-height: 180px; overflow-y: auto; }
.coping-note-item {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
  padding: 10px 12px; border-radius: 6px;
  background: var(--flat-surface); border: 1px solid var(--flat-line);
  font-size: 13px; line-height: 1.6;
}
.coping-note-item:hover { background: var(--flat-row-hover); }
.coping-note-item .content { flex: 1; min-width: 0; white-space: pre-wrap; }
/* checkbox 是 <input>，全站的 input{width:100%} 規則會讓它把 flex 容器撐爆，這裡撥亂反正 */
.coping-note-item input[type="checkbox"] { width: 16px; flex: 0 0 auto; }
.coping-note-item .del-btn {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 13px; flex-shrink: 0;
}
.coping-note-item .del-btn:hover { color: var(--series-magenta); }
.coping-note-add-row { display: flex; gap: 8px; margin-top: 10px; }
.coping-note-add-row input { flex: 1; }

/* ---------- 待辦事項：拆解成小任務 + 進度追蹤 ---------- */
.task-row-wrap { margin-bottom: 8px; }
.task-row-wrap .coping-note-item { margin-bottom: 0; }
.task-subtask-progress-wrap { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.task-subtask-progress-bar { flex: 1; height: 5px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.task-subtask-progress-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.2s; }
.task-subtask-progress-label { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.task-subtask-panel {
  margin: 4px 0 8px 12px; padding: 10px 12px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
}
.task-subtask-list { display: flex; flex-direction: column; gap: 6px; }
.task-subtask-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; padding: 4px 0;
}
/* checkbox 是 <input>，全站的 input{width:100%} 規則會讓它把 flex 容器撐爆、把文字擠到換行，這裡撥亂反正 */
.task-subtask-item input[type="checkbox"] { width: 16px; flex: 0 0 auto; }
.task-subtask-item .del-btn { flex-shrink: 0; }
.task-subtask-add-row { display: flex; gap: 8px; margin-top: 8px; }
.task-subtask-add-row input { flex: 1; font-size: 12.5px; padding: 7px 10px; }

/* ---------- 待辦事項：優先度色條／過期警示／分組標題／分頁籤／篩選／批次操作 ----------
   優先度用左側細色條標示 (跟首頁的 dash-reminder-item 同一套視覺語言)，不用整列染色這種
   比較刺眼的做法；過期的任務額外加一點底色 + 文字警示樣式，兩者都不是「只靠顏色」判斷
   (仍然保留 emoji/文字)，避免色盲使用者只看顏色分辨不出來。 */
.task-row-wrap .coping-note-item { border-left: 3px solid transparent; }
.task-row-wrap.priority-high .coping-note-item { border-left-color: var(--critical); }
.task-row-wrap.priority-medium .coping-note-item { border-left-color: var(--warning); }
.task-row-wrap.priority-low .coping-note-item { border-left-color: var(--good); }
.task-row-wrap.overdue .coping-note-item { background: color-mix(in srgb, var(--critical) 7%, var(--surface)); }
.task-overdue-badge { color: var(--critical); font-weight: 700; }
.task-group-header {
  font-size: 12px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.02em;
  margin: 16px 0 6px; text-transform: uppercase;
}
.task-group-header:first-child { margin-top: 0; }
.task-view-tabs { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.task-view-tab {
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--text-secondary);
}
.task-view-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.task-filter-row { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.task-filter-row input[type="text"] { flex: 1; min-width: 140px; }
.task-filter-row select { flex: 0 0 auto; }
.task-batch-bar {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
  padding: 8px 12px; border-radius: 10px; background: var(--surface-2); font-size: 12.5px;
}
.task-advanced-toggle {
  display: inline-block; font-size: 12px; color: var(--text-secondary);
  cursor: pointer; margin-top: 8px; text-decoration: underline; text-underline-offset: 2px;
}
@media (max-width: 760px) {
  .task-filter-row select { flex: 1; min-width: 100px; }
}

/* ---------- 心情深化第二階段：跨模塊模式 / 因應技巧 / 思考記錄 ---------- */
.mood-deep-grid { display: grid; grid-template-columns: 1fr minmax(320px, 460px); gap: 16px; align-items: start; }
.mood-deep-grid .dash-col { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 1080px) {
  .mood-deep-grid { grid-template-columns: 1fr; }
}

.mood-technique-box {
  margin-top: 10px; padding: 12px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--series-yellow) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--series-yellow) 30%, var(--border));
  font-size: 13px;
}
.mood-technique-title { font-weight: 700; font-size: 13.5px; }

.mood-signal-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.mood-signal-item {
  font-size: 12.5px; color: var(--text-secondary); padding: 8px 10px;
  border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border);
}

/* v0.37 修正 (第一版)：原本 textarea 的 min-height 固定 30px，只夠放一行文字，但有些欄位
   的 placeholder 提示文字比較長 (例如「腦中冒出來的念頭是什麼？(例如：他一定討厭我了)」)，
   在窄螢幕上會自動換成兩行，第二行就被硬生生切掉，看起來像跑版、擠成一團。當時改成統一
   min-height:52px，但後來實測發現對這兩個「長文字」欄位還是差一點點高度、仍然會切到第二
   行邊緣；而套用在其他本來一行就放得下的短欄位上，又變成多留了一截不必要的空白，看起來
   反而更亂。
   v0.39 修正 (第二版)：改成用 HTML 的 rows 屬性直接告訴瀏覽器每個欄位要放幾行——文字比較
   長、看起來需要兩行的「念頭」「比較平衡的說法」兩個欄位設 rows:2，交給瀏覽器自己用實際的
   字型/行高精準算出剛好兩行的高度 (不必自己猜 px 數字，不會再有邊緣被切掉的問題)；其他一行
   就放得下的欄位維持 rows:1，不會多出用不到的空白。 */
.thought-record-form { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.thought-record-form textarea { resize: vertical; line-height: 1.5; }
.thought-record-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.thought-record-intensity-row { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
@media (max-width: 780px) {
  .thought-record-row2 { grid-template-columns: 1fr; }
}

.nav-item .nav-alert-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--series-magenta);
  margin-left: auto; box-shadow: 0 0 6px var(--glow-violet, rgba(141,127,214,0.6));
}

/* ---------- 開關 ---------- */
/* v0.40 修正：原本 align-items:center 會讓開關依「這一列文字總共換成幾行」上下置中，
   文字越長換行越多，開關就被推得越低，同一張卡片裡好幾列開關高低不一、位置亂跳，看起來
   不整齊。改成 align-items:flex-start，讓開關固定貼齊在每一列最上緣 (跟標題文字的第一行
   同高)，不管下面說明文字有幾行，開關的位置都保持一致；.module-toggle-row-switch 再用
   margin-top 微調到跟標題文字的視覺中心對齊。 */
.module-toggle-row {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--grid-line);
  font-weight: 600; font-size: 13.5px;
}
.module-toggle-row:last-child { border-bottom: none; }
.module-toggle-row-text { flex: 1; min-width: 0; }
.module-toggle-row-title { line-height: 1.5; }
.module-toggle-row-hint {
  font-weight: 400; font-size: 12px; color: var(--flat-sub);
  line-height: 1.55; margin-top: 4px;
}
.module-toggle-row-switch { flex-shrink: 0; margin-top: 1px; }
.switch { position: relative; display: inline-block; width: 42px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; inset: 0; cursor: pointer;
  background: var(--baseline); border-radius: 999px; transition: 0.2s;
}
.slider::before {
  content: ''; position: absolute; height: 18px; width: 18px;
  left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.switch input:checked + .slider { background: var(--series-blue); }
.switch input:checked + .slider::before { transform: translateX(18px); }

/* =====================================================================
   手機 App 模式：底部導覽 + 首頁小工具拼貼
   側欄選單是桌面設計，「加入主畫面」後在手機上不好點也塞不下 14 個分頁；改成手機常見的
   底部導覽列 (4 個常用 + 更多)，首頁在窄螢幕改用小工具拼貼卡片 (大小不一，不是死板網格)，
   哪些小工具要顯示可以自己在首頁按「自訂」調整 (不是每個人都常用股票)。
   ===================================================================== */
.bottomnav-mobile { display: none; }

/* 通用底部彈出選單 (更多功能 / 自訂首頁 共用一套殼) */
.sheet-overlay {
  display: none; position: fixed; inset: 0; z-index: 300;
  background: rgba(15, 18, 30, 0.45); align-items: flex-end; justify-content: center;
}
.sheet-overlay.show { display: flex; }
.sheet-panel {
  width: 100%; max-width: 480px; max-height: 78vh; overflow-y: auto;
  background: var(--flat-surface); border-radius: 24px 24px 0 0;
  padding: 10px 22px calc(22px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 40px rgba(15, 18, 30, 0.25);
}
.sheet-handle { width: 36px; height: 4px; border-radius: 2px; background: var(--flat-line); margin: 4px auto 16px; }
.sheet-title { font-size: 15.5px; font-weight: 800; margin-bottom: 14px; }

/* ---------- 意見回饋 (右上角 💬 → 彈窗表單 / 設定頁「所有回饋」列表) ---------- */
.feedback-cat-row { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.feedback-cat-btn {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--flat-line);
  background: var(--flat-surface); color: var(--flat-sub);
  font-size: 12.5px; font-weight: 700; cursor: pointer; transition: all 0.15s;
}
.feedback-cat-btn.active {
  background: var(--brand-grad); border-color: transparent; color: #fff;
}
.feedback-textarea {
  width: 100%; min-height: 110px; resize: vertical;
  border: 1px solid var(--flat-line); border-radius: 12px; padding: 12px 14px;
  font-family: inherit; font-size: 13.5px; line-height: 1.6; color: var(--flat-ink);
  margin-bottom: 14px;
}
.feedback-textarea:focus { outline: none; border-color: var(--series-blue); }
.feedback-submit-btn { width: 100%; }
.feedback-item {
  padding: 12px 0; border-bottom: 1px solid var(--flat-line);
}
.feedback-item:last-child { border-bottom: none; }
.feedback-item-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--flat-sub); margin-bottom: 6px;
}
.feedback-item-cat {
  background: color-mix(in srgb, var(--series-blue) 12%, transparent);
  color: var(--series-blue); padding: 2px 8px; border-radius: 999px; font-weight: 700;
}
.feedback-item-user { font-weight: 600; }
.feedback-item-msg { font-size: 13.5px; line-height: 1.6; color: var(--flat-ink); white-space: pre-wrap; }
.feedback-item-del {
  margin-left: auto; border: none; background: transparent; cursor: pointer;
  font-size: 13px; padding: 2px 6px; border-radius: 6px; color: var(--flat-sub);
  transition: background 0.15s, color 0.15s;
}
.feedback-item-del:hover { background: color-mix(in srgb, var(--critical) 12%, transparent); color: var(--critical); }

/* ---------- 骨架屏載入佔位 (取代「載入中...」純文字，用在首頁卡片/小工具/股票指數卡) ---------- */
@keyframes skeletonShimmer {
  0% { background-position: -120px 0; }
  100% { background-position: 120px 0; }
}
.skeleton-wrap { display: flex; flex-direction: column; gap: 8px; padding: 2px 0; }
.skeleton-line {
  height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, var(--flat-line) 25%, color-mix(in srgb, var(--flat-line) 40%, var(--flat-surface)) 42%, var(--flat-line) 58%);
  background-size: 240px 100%;
  animation: skeletonShimmer 1.3s ease-in-out infinite;
}
.skeleton-line.short { width: 55%; }

/* ---------- 分頁切換淡入動畫 (更滑順、比較不生硬的原生 App 手感) ---------- */
@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.tab-anim-in { animation: tabFadeIn 0.22s ease; }
@media (prefers-reduced-motion: reduce) {
  .tab-anim-in { animation: none; }
}

/* ---------- 下拉重新整理 (手機 App 殼模式專用；桌面版 .main 本身不是捲動容器，不需要) ---------- */
.pull-refresh-indicator {
  display: none;
  text-align: center; font-size: 12.5px; font-weight: 700; color: var(--text-secondary);
  padding: 10px 0 0; opacity: 0; transform: translateY(-40px);
}
@media (max-width: 760px) {
  .pull-refresh-indicator { display: block; }
}
.pull-refresh-indicator.ready { color: var(--series-blue); }
@keyframes prPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.pull-refresh-indicator.spinning { animation: prPulse 0.8s ease-in-out infinite; }

/* ---------- 首頁小工具拖曳排序 (自訂彈窗裡用) ---------- */
.widget-order-list { display: flex; flex-direction: column; }
.widget-order-row {
  position: relative; justify-content: flex-start; gap: 10px;
  background: var(--flat-surface);
}
.widget-order-row .switch { margin-left: auto; }
.widget-order-row.dragging {
  z-index: 20; box-shadow: var(--shadow-pop); border-radius: 10px;
  background: color-mix(in srgb, var(--series-blue) 6%, var(--flat-surface));
}
.widget-drag-handle {
  cursor: grab; font-size: 17px; color: var(--flat-sub); padding: 0 4px 0 0;
  touch-action: none; user-select: none;
}
.widget-order-row.dragging .widget-drag-handle { cursor: grabbing; }
.widget-order-label { flex: 1; }

/* ---------- 忘記密碼／備用重設碼彈窗 ---------- */
.recovery-code-box {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 19px; font-weight: 800; letter-spacing: 1.5px; text-align: center;
  background: color-mix(in srgb, var(--series-blue) 8%, transparent);
  border: 1.5px dashed var(--series-blue); border-radius: 12px;
  padding: 16px 10px; margin-bottom: 14px; color: var(--flat-ink);
  user-select: all;
}
.recovery-copy-btn { width: 100%; margin-bottom: 10px; }
.recovery-confirm-btn { width: 100%; }

@media (max-width: 760px) {
  /* ---- App shell 版面：外殼整個鎖死不滑動，只有 .main 內部自己捲動 ----
     之前 body/html 是一般文件捲動，加上 position:fixed 的底部導覽列，在 iOS Safari
     捲動網址列收合/展開時常常算錯位置，導致導覽列跑到畫面外或整個消失不見。
     改成「外殼固定、只有內容區捲動」這個 App 常見的作法後，導覽列的定位基準
     (外殼本身) 完全不會動，就不會再有這個問題。 */
  html, body { height: 100%; overflow: hidden; }
  #app { height: 100%; min-height: 0; }
  #shell { height: 100%; }
  .sidebar { display: none; }
  .main {
    height: 100%; overflow-y: auto; overflow-x: hidden;
    padding: 0 16px 110px;
    touch-action: pan-y;
    /* 手機模式下 html/body 已經被鎖死 (overflow:hidden)，真正在捲動的容器變成這裡的 .main，
       所以「防止橡皮筋回彈」這件事也要設定在 .main 身上才有用，設在 html/body 上不會生效。
       v0.19.1~v0.19.3 一直在猜「為什麼會位移」(回彈動畫、圖層合成…)，但這次自己用工具
       實際測試後找到真正的機制：CSS 有一條規則是「只設定 overflow-y、沒設定 overflow-x
       的話，overflow-x 會被瀏覽器自動當成 auto 處理」——這裡原本只寫了
       `overflow-y: auto`，等於 `.main` 其實從一開始就「順便」變成了一個獨立的水平捲動
       容器，只是因為視覺上沒有東西需要橫向捲動，一直沒被發現。只要任何原因 (手勢、瀏覽器
       自動把 focus 的輸入框捲進可視範圍等等) 讓它的 scrollLeft 被推離 0，因為 switchTab()
       切換分頁時從來沒有把 scrollLeft 歸零過，這個位移就會「卡住」一直維持著，不會自己彈
       回來——這才是使用者說「白色的部分一直都在」(不是短暫閃一下) 的真正原因。這裡直接
       明講 `overflow-x: hidden`，讓 `.main` 不再是一個可以獨立橫向捲動的容器，從源頭
       把這個可能性擋掉。 */
    overscroll-behavior: none;
  }
  /* 「加入主畫面」後沒有 Safari 網址列/瀏覽器 UI 幫忙讓開瀏海/狀態列的空間，
     這裡自己用 safe-area-inset-top 把頂端內容往下推，避免跟時間/訊號列疊在一起。 */
  /* transform: translateZ(0) 讓瀏覽器提前把這個元素獨立成一個 GPU 合成圖層，不用等到捲動
     當下才臨時決定要不要升級圖層——這正是造成上面提到的「捲動時毛玻璃元素跟著畫面一起
     短暫跳動」的常見成因，提前固定圖層可以避免那個重新合成的時間點造成視覺跳動。 */
  .topbar { padding-top: env(safe-area-inset-top); transform: translateZ(0); }
  .bottomnav-mobile {
    display: flex; position: fixed; left: 10px; right: 10px; z-index: 150;
    bottom: calc(10px + env(safe-area-inset-bottom));
    /* 低調高級感：拿掉毛玻璃模糊，改成實色深綠底 (呼應主色)，質感靠陰影堆出來就好 */
    background: var(--accent-strong);
    border-radius: 22px; padding: 9px 4px; box-shadow: 0 14px 34px -10px rgba(28, 27, 25, 0.4);
    justify-content: space-around; align-items: center;
    transform: translateY(0) translateZ(0);
    transition: transform 0.22s ease;
  }
  /* v0.33：往下捲動看內容時暫時滑出畫面，避免固定在底部的導覽列擋住正在看的內容；
     往上捲動、或從螢幕最左邊往右滑一下 (類似系統返回手勢的動作)，都可以馬上把它叫回來。 */
  /* v0.35：140% 有時候因為導覽列本身的陰影(box-shadow)還留在畫面邊緣，看起來像沒有完全
     隱藏乾淨；改用更大的位移量 (220%) 確保連陰影範圍都一起被推出畫面外，並在隱藏時關掉
     點擊事件，避免滑到一半的過程中不小心誤觸到還在動畫中的按鈕。 */
  .bottomnav-mobile.bn-hidden { transform: translateY(220%) translateZ(0); pointer-events: none; }
  .bn-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    color: rgba(255, 255, 255, 0.55); font-size: 10px; font-weight: 700; cursor: pointer;
    -webkit-tap-highlight-color: transparent; padding: 4px 0;
  }
  .bn-item.active { color: #fff; }
  .bn-icon { font-size: 19px; line-height: 1; }

  /* ---- 防止 iOS Safari 點輸入框時自動放大整個頁面 ----
     iOS Safari 有個行為：只要點到的 <input>/<textarea>/<select> 計算後的字體小於 16px，
     就會自動把整個頁面放大 (方便看清楚要打的字)，而且這個放大狀態常常在切換分頁/收起
     鍵盤之後也不會自動還原，變成整頁一直維持在放大狀態——版面看起來被裁掉一塊、卡片
     衝出畫面右邊，就是這個原因 (不是版面本身的 CSS 排版壞掉，是瀏覽器自己把整頁縮放
     等級調高了)。這裡把手機上所有表單欄位的字體都鎖在 16px 以上，從源頭讓 Safari
     不會觸發這個自動放大，桌面版不受影響 (字體還是原本比較精緻的 13.5px)。 */
  input, select, textarea { font-size: 16px; }
  .dash-mood-quick-note input { font-size: 16px; }
  .feedback-textarea { font-size: 16px; }
}

/* ---------- 首頁：小工具拼貼 (窄螢幕專用，取代星系版面) ---------- */
.dash-mobile-widgets { display: none; }
@media (max-width: 760px) {
  .dash-grid { display: none; }
  .dash-mobile-widgets { display: block; }
}
.dash-mobile-topline { display: flex; justify-content: space-between; align-items: center; margin: 6px 0 16px; gap: 12px; }
.dash-mobile-greet .hi { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.dash-mobile-greet .name { font-size: 19px; font-weight: 800; margin-top: 2px; letter-spacing: -0.3px; }
.dash-customize-btn {
  flex-shrink: 0; border: 1px solid var(--border); background: var(--surface);
  border-radius: 999px; padding: 7px 14px; font-size: 12px; font-weight: 700;
  color: var(--text-secondary); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.widget-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 76px; gap: 10px; }
.widget-grid.shortcuts { grid-auto-rows: 70px; }
.w1x1 { grid-column: span 2; grid-row: span 1; }
.w2x2 { grid-column: span 2; grid-row: span 2; }
.w4x1 { grid-column: span 4; grid-row: span 1; }
.wshort { grid-column: span 1; grid-row: span 1; }
/* 低調高級感重新設計：拿掉每個小工具各自一片飽和漸層滿版底色的做法 (拖曳自訂排序時，
   小工具被搬到顯眼位置會很違和)，改成統一的暖白卡片 + 左側一條細細的色彩強調線
   (顏色沿用原本的分類色，只是從「整片背景」收斂成「一條線」)，這樣不管小工具被拖到
   哪個位置、哪種大小，看起來都是同一套安靜的系統，不會突兀。 */
.widget {
  border-radius: 16px; padding: 14px 14px 14px 17px; display: flex; flex-direction: column; justify-content: space-between;
  color: var(--text-primary); cursor: pointer; position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s, box-shadow 0.15s;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card);
}
.widget::before {
  content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px;
  background: var(--widget-accent, var(--accent));
}
.widget:active { transform: scale(0.97); }
.widget .wt { font-size: 11px; font-weight: 800; color: var(--text-secondary); }
.widget .wv { font-size: 20px; font-weight: 800; letter-spacing: -0.3px; color: var(--text-primary); }
.widget .wv.small { font-size: 15px; }
.widget .w-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
/* 待辦小工具排到大方塊時，多顯示 1~2 筆事項標題用的迷你清單 */
.widget .w-mini-list { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.widget .w-mini-list-item {
  font-size: 10.5px; font-weight: 600; color: var(--text-secondary); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
/* 心情小工具排到大方塊時，直接放得下的 1-10 分快速評分按鈕列；按鈕本身沿用桌面版
   .mood-score-btn.sm 的樣式，這裡只調整跟小工具暖白底色搭配的地方。 */
.widget .mobile-widget-mood-row { margin-top: 6px; }
.widget .mobile-widget-mood-row .mood-score-btn.sm {
  background: var(--surface-2); color: var(--text-secondary); border: 1px solid var(--border);
}
.widget .mobile-widget-mood-row .mood-score-btn.sm.selected { background: var(--accent); color: #fff; border-color: transparent; font-weight: 800; }
.widget.light { color: var(--text-primary); background: var(--flat-surface); border: 1px solid var(--flat-line); }
.widget.light .w-sub { color: var(--text-muted); }
.widget.emerald { --widget-accent: var(--series-aqua); }
.widget.sky { --widget-accent: var(--series-blue); }
.widget.amber { --widget-accent: var(--series-yellow); }
.widget.rose { --widget-accent: var(--series-magenta); }
.widget.indigo {
  --widget-accent: var(--series-violet);
  flex-direction: row; align-items: center; justify-content: space-between;
}
.widget.indigo .wt { font-size: 12px; }
.widget.shortcut { align-items: center; text-align: center; justify-content: center; gap: 3px; }
.widget.shortcut .ic { font-size: 19px; }
.widget.shortcut .lb { font-size: 10.5px; font-weight: 700; }
.dash-mobile-widgets .section-label { font-size: 12.5px; font-weight: 800; color: var(--text-secondary); margin: 20px 2px 10px; }
.sheet-body .widget-grid { margin-top: 4px; }

/* ---------- 首頁 v0.28：單欄「以 app 為主」排版，桌面/手機共用同一份 DOM，
   不再有左右並排的欄位，天生不會有橫向捲動的問題；細線分隔取代大量卡片框線，
   顏色只留給狀態 (逾期/即將/行事曆來源)，其餘維持黑白灰階，呼應「不要很花」的要求。 ---------- */
.dash-unified { max-width: 720px; margin: 0 auto; padding: 4px 2px 40px; }
.dash-hero-eyebrow { font-size: 12px; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; }
.dash-hero-name {
  font-family: "Noto Serif TC", "PingFang TC", serif; font-size: 30px; font-weight: 700;
  margin: 8px 0 6px; letter-spacing: 0.3px; color: var(--warm-ink);
}
.dash-hero-sub { font-size: 14px; color: var(--text-secondary); margin-bottom: 10px; min-height: 20px; }
.dash-hero-quote {
  font-family: "Noto Serif TC", "PingFang TC", serif; font-size: 13.5px; color: var(--gold);
  border-left: 2px solid var(--gold-soft); padding-left: 12px; margin-bottom: 26px; line-height: 1.6;
}
.dash-hero-ask { display: flex; gap: 8px; margin-bottom: 6px; }
.dash-hero-ask input {
  flex: 1; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  font-size: 13.5px; background: var(--surface); color: var(--text-primary);
}
.dash-hero-ask button { border-radius: 10px; padding: 0 18px; }
.dash-hero-hint { font-size: 11px; color: var(--text-muted); margin-bottom: 20px; }
.dash-hero-brief { margin-bottom: 4px; }

.dash-stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 18px 0 30px; min-height: 70px; }
.dash-stat-block { padding: 16px 16px; border-left: 1px solid var(--border); }
.dash-stat-block:first-child { border-left: none; padding-left: 2px; }
.dash-stat-icon { font-size: 14px; margin-bottom: 6px; }
.dash-stat-num { font-size: 20px; font-weight: 800; color: var(--text-primary); }
.dash-stat-desc { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

.dash-section-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 10px; }
.dash-section-title { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.dash-section-action {
  font-size: 12px; color: var(--text-muted); cursor: pointer; background: none; border: none;
  padding: 3px 6px; -webkit-tap-highlight-color: transparent;
}
.dash-section-action:hover { color: var(--text-secondary); }

.dash-unified-list { margin-bottom: 32px; }
.utask-row { display: flex; align-items: center; gap: 10px; padding: 12px 2px; border-bottom: 1px solid var(--grid-line); font-size: 14px; }
.utask-row:last-child { border-bottom: none; }
.utask-prio { width: 3px; height: 16px; border-radius: 2px; flex-shrink: 0; }
.utask-prio.high { background: var(--critical); }
.utask-prio.medium { background: var(--warning); }
.utask-prio.low { background: var(--grid-line); }
.utask-prio.cal { background: var(--series-violet); }
.utask-check {
  appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--baseline); flex-shrink: 0; cursor: pointer; position: relative; margin: 0;
}
.utask-check:checked { background: var(--accent); border-color: var(--accent); }
.utask-check:checked::after {
  content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px;
  border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(45deg);
}
.utask-dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--series-violet); font-size: 10px; cursor: pointer; }
.utask-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.utask-badge { font-size: 10px; padding: 2px 7px; border-radius: 999px; font-weight: 700; flex-shrink: 0; white-space: nowrap; }
.utask-badge.cal { color: var(--series-violet); background: rgba(110, 92, 196, 0.10); }
.utask-badge.overdue { color: var(--critical); background: rgba(224, 87, 90, 0.10); }
.utask-badge.soon { color: var(--good); background: rgba(63, 143, 63, 0.10); }
.utask-meta { font-size: 11.5px; color: var(--text-muted); width: 52px; text-align: right; flex-shrink: 0; }
.utask-meta.overdue { color: var(--critical); font-weight: 700; }
.utask-meta.soon { color: var(--good); font-weight: 700; }
.utask-snooze, .utask-del {
  border: none; background: none; color: var(--text-muted); font-size: 13px; cursor: pointer;
  flex-shrink: 0; padding: 2px 4px; -webkit-tap-highlight-color: transparent;
}
.utask-snooze:hover, .utask-del:hover { color: var(--text-primary); }
.dash-unified-empty { font-size: 13px; color: var(--text-muted); padding: 16px 2px; }

.dash-mood-inline { margin-bottom: 32px; }

.dash-more-list { margin-bottom: 28px; }
.dash-more-row { display: flex; align-items: center; gap: 12px; padding: 13px 2px; border-bottom: 1px solid var(--grid-line); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dash-more-row:last-child { border-bottom: none; }
.dash-more-row:hover { background: var(--flat-row-hover); }
.dash-more-row.no-click { cursor: default; }
.dash-more-icon { font-size: 16px; width: 22px; text-align: center; flex-shrink: 0; }
.dash-more-body { flex: 1; min-width: 0; }
.dash-more-title { font-size: 12px; color: var(--text-muted); font-weight: 700; margin-bottom: 3px; }
.dash-more-content { font-size: 13.5px; color: var(--text-primary); }
.dash-more-content.hint { color: var(--text-muted); }

/* ---------- AI 助理：v0.30 改成跟首頁同一套乾淨風格，不再用浮起來的大卡片+光暈+漸層泡泡 ---------- */
.assistant-clean-title {
  font-family: "Noto Serif TC", "PingFang TC", serif; font-size: 26px; font-weight: 700;
  margin: 8px 0 6px; color: var(--warm-ink);
}
.assistant-clean-suggest-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 26px; }
.assistant-clean-chip {
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  background: transparent; border: 1px solid var(--border);
  padding: 6px 13px; border-radius: 999px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.assistant-clean-chip:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.assistant-clean-box {
  max-height: none; min-height: 200px; padding: 4px 0; margin: 0 0 20px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 16px 0;
}
.assistant-clean-box .chat-msg {
  border-radius: 12px; box-shadow: none; max-width: 78%;
}
.assistant-clean-box .chat-user { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.assistant-clean-box .chat-ai { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-primary); border-bottom-left-radius: 4px; }
.assistant-clean-ask { margin-bottom: 4px; }
.assistant-clean-ask input { border-radius: 10px; }
.assistant-clean-ask button { border-radius: 10px; }

/* ---------- 日記：標籤編輯/篩選 + 情緒關聯小徽章 ---------- */
.diary-tag-editor { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
.diary-tag-chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent);
}
.diary-tag-chip.readonly { background: var(--surface-2); color: var(--text-secondary); }
.diary-tag-chip button { border: none; background: none; cursor: pointer; color: inherit; font-size: 12px; line-height: 1; padding: 0; }
.diary-tag-input { border: 1px dashed var(--border); border-radius: 999px; padding: 3px 10px; font-size: 11.5px; background: transparent; color: var(--text-primary); width: 140px; }
.diary-tag-filter-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.diary-tag-filter-btn {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary);
  border-radius: 999px; padding: 4px 11px; font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.diary-tag-filter-btn.active { background: var(--accent); color: #fff; border-color: transparent; }
.diary-mood-badge { font-size: 11px; font-weight: 700; color: var(--series-magenta); background: rgba(209, 68, 126, 0.10); padding: 2px 7px; border-radius: 999px; }
.diary-list-row { padding: 10px 0; border-bottom: 1px solid var(--grid-line); cursor: pointer; }
.diary-list-row:hover { background: var(--flat-row-hover); }

/* ---------- 心情陪伴：v0.31 改成跟首頁同一套乾淨風格，分頁瀏覽取代鎖死視窗的三欄版面 ---------- */
.mood-clean-wrap { max-width: 720px; margin: 0 auto; position: relative; z-index: 1; }
.mood-clean-wrap .task-view-tabs { margin: 18px 0 22px; }
.mood-clean-sections { display: flex; flex-direction: column; gap: 20px; }
.mood-clean-sections .card {
  border: none; border-radius: 0; box-shadow: none; background: transparent;
  padding: 0 0 20px; margin: 0; border-bottom: 1px solid var(--grid-line);
}
.mood-clean-sections .card:last-child { border-bottom: none; padding-bottom: 4px; }
.mood-clean-sections .card h3 { margin-bottom: 6px; color: var(--text-primary); }
.mood-clean-sections .card .hint { margin-bottom: 10px; color: var(--text-muted); }
.mood-clean-sections .card.mood-chat-card { border-bottom: 1px solid var(--grid-line); }
.mood-clean-sections .card.mood-chat-card .chat-box {
  max-height: none; min-height: 180px; border-top: 1px solid var(--border); border-bottom: none;
  padding: 14px 0;
}
.mood-clean-sections .chat-ai { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-primary); }
.mood-clean-sections .chat-user { background: var(--accent); color: #fff; }

/* ---------- 記帳：v0.31 用分頁取代一次塞 7 張卡片的長頁面 ---------- */
.finance-clean-wrap { max-width: 720px; margin: 0 auto; }
.finance-clean-wrap .task-view-tabs { margin: 4px 0 18px; }
.finance-clean-sections { display: flex; flex-direction: column; gap: 16px; }

/* ---------- 人際關係：v0.31 分成「聯絡人」與「提醒與重要日子」兩個分頁 ---------- */
.rel-clean-wrap { max-width: 720px; margin: 0 auto; }
.rel-clean-wrap .task-view-tabs { margin: 4px 0 18px; }
.rel-clean-sections { display: flex; flex-direction: column; gap: 16px; }

@media (max-width: 760px) {
  .dash-unified { padding: 2px 0 32px; }
  .dash-hero-name { font-size: 25px; }
  .dash-stat-block { padding: 14px 8px; }
  .dash-stat-num { font-size: 17px; }
  .utask-meta { width: 44px; }
  .mood-clean-wrap { padding: 0 2px; }
  .mood-clean-sections { gap: 16px; }
  .finance-clean-wrap { padding: 0 2px; }
}

/* ---------- Toast / Tooltip ---------- */
.toast {
  position: fixed; right: 24px; bottom: 24px;
  background: var(--text-primary); color: var(--bg);
  padding: 11px 20px; border-radius: 12px;
  font-size: 13.5px; font-weight: 600;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  box-shadow: var(--shadow-pop);
  z-index: 100;
}
.toast.show { opacity: 1; transform: translateY(0); }
.tooltip-box {
  position: absolute; z-index: 99;
  top: -999px; left: -999px; /* 預設移出畫面之外，避免在還沒被 JS 定位前，於頁面最下方多撐出幾像素高度造成整頁多一點捲動 */
  background: var(--text-primary); color: var(--bg);
  padding: 5px 10px; border-radius: 8px;
  font-size: 12px; font-weight: 600;
  pointer-events: none; opacity: 0; transition: opacity 0.1s;
  white-space: nowrap;
}

/* =====================================================================
   深色模式
   整站絕大多數顏色都已經走 CSS 變數 (--bg / --surface / --text-* / --flat-*...)，
   所以深色模式的主體只要在 <html data-theme="dark"> 底下覆蓋這一份變數即可、
   不用整份檔案重寫一次。少數「玻璃卡片」background 是直接寫死 rgba(255,255,255,x)
   (半透明白玻璃感)，這種寫法本身沒辦法透過變數處理透明度疊加，所以額外針對這些
   selector 覆蓋成深色版的玻璃感。切換方式看 public/js/app.js 的 applyTheme()。
   ===================================================================== */
[data-theme="dark"] {
  color-scheme: dark;
  /* 深色模式沿用同一套「低調高級感」邏輯：暖調深色背景、單一主色 (提亮版深綠) + 金色點綴，
     不是隨便反轉每個頁面原本的繽紛主題色。 */
  --accent: #6b8f7a;
  --accent-strong: #3f4f45;
  --accent-soft: rgba(107, 143, 122, 0.16);
  --gold: #c9a15c;
  --gold-soft: rgba(201, 161, 92, 0.16);
  --bg: #16150f;
  --surface: #1f1e18;
  --surface-2: #262520;
  --border: rgba(237, 233, 224, 0.1);
  --grid-line: #2c2b24;
  --baseline: #3a3830;
  --gray-mid: #262520;
  --text-primary: #ede9e0;
  --text-secondary: #b3ada0;
  --text-muted: #7d7869;
  --brand-grad: linear-gradient(135deg, #6b8f7a, #55735f);
  --glow-blue: rgba(107, 143, 122, 0.22);
  --glow-violet: rgba(107, 143, 122, 0.22);
  --glow-teal: rgba(107, 143, 122, 0.2);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.32);
  --shadow-pop: 0 8px 32px rgba(0, 0, 0, 0.5);
  --flat-ink: #ede9e0;
  --flat-sub: #b3ada0;
  --flat-line: rgba(237, 233, 224, 0.1);
  --flat-surface: #1f1e18;
  --flat-row-hover: #262520;
  --warm-ink: #e6d3ae;
}
/* body 背景：深色模式下只留極淡的主色光暈，維持跟淺色模式一致的「安靜」質感 */
[data-theme="dark"] body {
  background:
    radial-gradient(1100px 560px at 18% -10%, rgba(107, 143, 122, 0.06), transparent 62%),
    var(--bg);
}
[data-theme="dark"] .sidebar { background: var(--surface); }
[data-theme="dark"] #tab-dashboard .dash-card { background: var(--surface); }
[data-theme="dark"] #tab-dashboard .dash-orb-card { background: var(--surface); }
[data-theme="dark"] #tab-stocks .card,
[data-theme="dark"] #tab-stocks .disclaimer,
[data-theme="dark"] #tab-stocks .stock-row,
[data-theme="dark"] #tab-stocks .stock-compare-card,
[data-theme="dark"] #tab-stocks .coping-note-item,
[data-theme="dark"] .mood-dash-col .card,
[data-theme="dark"] .assistant-card {
  background: var(--surface);
}
[data-theme="dark"] .topbar { background: var(--bg); }
[data-theme="dark"] .bottomnav-mobile { background: #0c0b08; }
[data-theme="dark"] .widget { background: var(--surface); }
/* 表格 hover / 分隔線在深色底下如果還是用淺色系的 #f1f5f9、#f8fafc 會反而變成一塊很亮的色塊，這裡換深色 */
[data-theme="dark"] .data-table td, [data-theme="dark"] .stx-table td { border-bottom-color: rgba(148, 163, 184, 0.14); }
[data-theme="dark"] .data-table tbody tr:hover, [data-theme="dark"] .stx-table tbody tr:hover { background: rgba(148, 163, 184, 0.06); }
/* 深色模式下切換鈕本身 (太陽/月亮圖示) */
.theme-toggle-btn { font-size: 16px; }