/*
  設計語言代號：一色到底（原名／檔名沿用：rose-blush-restrained）
  來源：2026-07-26，從 split-bill 專案定案的視覺規格出發，經過使用者用
        Artifact 反覆調整、確認後定案為「全部專案通用」的預設起手式。
  核心原則只有一句話：**選一個主題色（--accent2），這個顏色原封不動套用在
  全站所有「有顏色」的地方**（按鈕、開關開啟態、選中卡片/分頁、圖示底色、
  進度條、打勾圈），不分深淺、不做 tint/shade 變化，也不跟任何語意色
  （例如金額正負、成功/失敗）分開處理——一個專案只有一個強調色，全部統一。
  版面規則（32px 大圓角、單一柔和陰影、三欄式導覽真置中、卡片包裹＋空狀態
  例外、收據造型例外）維持不變，只有顏色是每個專案抽換的變數。
  用法：新專案要套用時，直接複製這個檔案，只需要改 --accent2 一個值
  （使用者會直接給色碼或截圖，截圖顏色一律用程式像素採樣，不能用眼睛猜），
  不用重新設計版面、不用重新問使用者要什麼配色。
  字型檔案在 design-tokens/fonts/GenSenMaruGothicTW-Bold.woff2，部署時要
  一起複製到該專案的 public/fonts/ 底下。
*/

@font-face {
  font-family: "GenSenMaruGothicTW";
  src: url("/fonts/GenSenMaruGothicTW-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* 唯一的主題色——新專案只改這一個值。全站所有「有顏色」的地方都直接
     用這個變數（或它的別名 --accent2-tint，見下），不要另外調深淺、
     不要另外做語意色（金額/狀態）系統，一個專案只有一種顏色語言。 */
  --accent2: #8E7CC3; /* fortune-lab 主題色：中飽和紫，呼應占星/紫微/塔羅的神秘感，非淺色不需黑字例外 */
  --accent2-tint: var(--accent2); /* 別名，故意跟主色相同——不要再分「淡底/實色」兩級 */
  --accent2-text: #FFFFFF;        /* 疊在主題色上面的文字/圖示顏色，預設純白，不算對比度。 */

  /* 底色 / 卡片 */
  --page-bg2: #FAFAFA;      /* 全站固定背景色 */
  --card: #FFFFFF;          /* 卡片底色，全站統一純白，不要每張卡各自配色 */

  /* 文字（中性色，不隨主題色變動） */
  --ink: #2C2A29;           /* 一般內文 */
  --ink-title: #5C534C;     /* 大標題，比純黑輕的深棕灰 */
  --ink-soft: #A09C98;      /* 次要/說明文字，只用這一個灰色 */

  /* 容器 */
  --radius2: 32px;
  --shadow2: 0px 8px 24px rgba(0, 0, 0, 0.04);
  --hairline: #F0EBE8;

  --font-main: "GenSenMaruGothicTW", -apple-system, BlinkMacSystemFont,
               "PingFang TC", "Noto Sans TC", "Segoe UI", sans-serif;
}

/* ⚠️ 圓體字型檔只有 Bold 一個字重，只能用 font-weight: 700，且只套在標題/
   強調數字這類元素——內文維持系統字體，不要整頁套用。 */
body {
  margin: 0;
  background: var(--page-bg2);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Segoe UI", sans-serif;
  line-height: 1.5;
}

.brand-font { font-family: var(--font-main); font-weight: 700; }

/* 字體層級：大標題 24px/700｜一般導覽標題 19px/700｜區塊標題 16-18px/600｜
   數據數值 20-32px/700｜次要文字 12-14px/400 */
.page-title { font-family: var(--font-main); font-size: 24px; font-weight: 700; color: var(--ink-title); }
.nav-title { font-family: var(--font-main); font-size: 19px; font-weight: 700; color: var(--ink-title); }
.section-label { font-size: 16px; font-weight: 600; color: var(--ink-title); margin: 24px 0 12px; }
.stat-value { font-family: var(--font-main); font-size: 28px; font-weight: 700; color: var(--ink); }
.sub-text { font-size: 12px; color: var(--ink-soft); }

/* 導覽列：CSS Grid 三欄式版面，標題永遠對整個畫面寬度置中，不受左右兩側
   是否對稱影響——不要用 flex + flex:1 或不對稱 padding 做假置中 */
.nav-header {
  padding: 18px 20px 14px;
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--hairline);
}
.nav-header > div:nth-child(2) { text-align: center; min-width: 0; }
.nav-header > i { justify-self: end; }
.nav-back { font-size: 18px; color: var(--ink-soft); cursor: pointer; }

/* 卡片：無邊框，純靠陰影分層次；每個功能/清單都要包成白色卡片 */
.content-card {
  background: var(--card);
  border-radius: var(--radius2);
  box-shadow: var(--shadow2);
  border: none;
  padding: 20px;
  margin-bottom: 16px;
}
/* 空狀態例外：沒資料時卡片本身要整個消失，只顯示純文字，不要顯示空白卡片框 */
.content-card:empty { display: none; }
.content-card:has(+ .empty-state.show) { display: none; }
.empty-state {
  display: none;
  text-align: center;
  font-size: 12px;
  color: var(--ink-soft);
  padding: 16px 0;
}
.empty-state.show { display: block; }

/* 按鈕：拒絕巨型滿版按鈕，CTA 維持精巧固定尺寸；兩顆並排一律同色同寬（flex:1），
   不分主/次色階，文字固定 --accent2-text（白）。 */
.btn-row { display: flex; gap: 10px; }
.btn-cta, .btn-secondary {
  display: flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 20px; flex: 1;
  background: var(--accent2); color: var(--accent2-text);
  border: none; border-radius: 999px;
  font-size: 15px; font-weight: 700; cursor: pointer;
}

/* 開關（toggle）：開啟態用主題色，關閉態固定中性灰，不要用淡主題色 */
.toggle-switch {
  width: 51px; height: 31px; border-radius: 16px;
  background: #E5E5EA; position: relative; cursor: pointer; transition: background .2s;
}
.toggle-switch .toggle-knob {
  position: absolute; top: 3px; left: 3px;
  width: 25px; height: 25px; border-radius: 50%; background: #fff;
  transition: left .2s;
}
.toggle-switch.active { background: var(--accent2); }
.toggle-switch.active .toggle-knob { left: 23px; }

/* 搜尋：搜尋框＋圖示按鈕觸發彈出面板，不要把多個篩選欄位平鋪常駐佔空間 */
.search-input {
  width: 100%; font-size: 13px; padding: 10px 14px;
  border-radius: 24px; border: 1px solid var(--hairline);
  background: #F2F2F7; box-sizing: border-box;
}

/* 圖示底色：一律用主題色（不是淡色）+ --accent2-text 當圖示顏色，
   跟按鈕、開關開啟態共用同一套視覺語言 */
.icon-badge {
  border-radius: 12px; background: var(--accent2); color: var(--accent2-text);
  display: flex; align-items: center; justify-content: center; flex: none;
}

/* 表單欄位：一律靠左對齊，標籤在上、值在下，不用外框只用底線分隔 */
.form-field { padding: 12px 2px; border-bottom: 1px solid var(--hairline); }
.form-field:last-child { border-bottom: none; }
.form-label { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--ink-soft); margin-bottom: 6px; }
.form-input { font-size: 15px; font-weight: 600; color: var(--ink); text-align: left; }

/* 選擇型元件（付款人/身份卡/分類/分段控制）：統一模式——未選中白卡+陰影、
   選中整塊填滿主題色+黑字，不用另外加勾選圖示或邊框標示選中狀態 */
.choice-chip, .choice-card, .segmented .seg, .toggle-group .opt {
  background: var(--card); box-shadow: var(--shadow2); color: var(--ink-soft);
  border-radius: 999px; font-weight: 600;
}
.choice-chip.on, .choice-card.on, .segmented .seg.on, .toggle-group .opt.on {
  background: var(--accent2); color: var(--accent2-text);
}

/* 頭像：預設用通用人形線稿圖示，不用真的頭貼、也不用可愛動物之類的裝飾插畫 */
.avatar {
  border-radius: 50%; background: var(--hairline); color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.avatar.on { background: rgba(0,0,0,.1); color: var(--ink); } /* 底色是半透明黑不是主題色，疊字固定用 --ink（深色），不要跟著 --accent2-text 變白，不然會看不見 */

/* 進度條 / 打勾圈：換到任何領域（習慣追蹤、進度型功能）都沿用同一組主題色 */
.progress-track { height: 10px; border-radius: 999px; background: var(--hairline); overflow: hidden; }
.progress-fill { height: 100%; border-radius: 999px; background: var(--accent2); }
.check-circle {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  border: 2px solid var(--hairline); display: flex; align-items: center; justify-content: center; color: transparent;
}
.check-circle.done { background: var(--accent2); border-color: var(--accent2); color: var(--accent2-text); }

/* 通知/列表未讀指示：單一小圓點，不整列變色 */
.unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent2); flex: none; }

/* 收據造型（結算/收據類畫面專用例外）：故意不套 32px 大圓角，扇形撕邊＋虛線分隔，
   是規則裡明訂的視覺例外，不是忘記套用大圓角 */
.receipt {
  background: var(--card);
  border-radius: 10px 10px 0 0;
  padding: 22px 20px 20px;
  position: relative;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
}
.receipt::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 18px;
  background: radial-gradient(circle at 9px 0, transparent 9px, var(--page-bg2) 9.5px) repeat-x;
  background-size: 18px 18px;
}
.receipt-divider { border-top: 1.5px dashed var(--hairline); margin: 10px 0; }
.receipt-row { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; font-size: 13px; color: var(--ink); }
.receipt-row .amt { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---------- fortune-lab 專屬擴充（沿用上面共用 tokens，不新增第二種顏色） ---------- */
.view { display: none; }
.view.active { display: block; }

.page-wrap { max-width: 480px; margin: 0 auto; padding: 0 16px 40px; }

.date-banner { text-align: center; padding: 6px 0 18px; }
.date-banner .d { font-family: var(--font-main); font-weight: 700; font-size: 22px; color: var(--ink-title); }
.date-banner .sub { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }

.item-card { display: flex; gap: 12px; align-items: flex-start; }
.item-card .icon-badge { width: 40px; height: 40px; font-size: 17px; }
.item-body { flex: 1; min-width: 0; }
.item-method { font-size: 11px; font-weight: 700; color: var(--accent2); letter-spacing: .03em; }
.item-title { font-family: var(--font-main); font-weight: 700; font-size: 15px; color: var(--ink-title); margin: 2px 0 6px; }
.item-content { font-size: 13.5px; color: var(--ink); line-height: 1.6; }
.item-cat { display: inline-block; font-size: 10.5px; color: var(--ink-soft); background: var(--hairline); border-radius: 999px; padding: 2px 9px; margin-top: 8px; }

.status-row { display: flex; gap: 8px; margin-top: 12px; }
.status-btn {
  flex: 1; text-align: center; padding: 8px 0; border-radius: 999px;
  background: var(--card); box-shadow: var(--shadow2); color: var(--ink-soft);
  font-size: 12.5px; font-weight: 600; cursor: pointer; border: none;
}
.status-btn i { margin-right: 4px; }
.status-btn.on { background: var(--accent2); color: var(--accent2-text); box-shadow: none; }

.history-row, .stat-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 4px; border-bottom: 1px solid var(--hairline); cursor: pointer;
}
.history-row:last-child, .stat-row:last-child { border-bottom: none; }
.history-row .d { font-weight: 600; font-size: 14px; color: var(--ink); }
.history-row .p { font-size: 12px; color: var(--ink-soft); }

.stat-row { cursor: default; align-items: center; }
.stat-rank { width: 22px; font-family: var(--font-main); font-weight: 700; color: var(--ink-soft); font-size: 13px; }
.stat-name { flex: 1; font-weight: 700; font-size: 14px; color: var(--ink-title); margin-left: 4px; }
.stat-track { flex: 1.4; margin: 0 12px; }
.stat-rate { width: 46px; text-align: right; font-family: var(--font-main); font-weight: 700; color: var(--ink); font-size: 14px; }

.tab-icon { font-size: 17px; color: var(--ink-soft); cursor: pointer; }
.tab-icon.active-page { color: var(--accent2); }