:root {
  color-scheme: light;

  /* JOHN'S 品牌色票 - Emerald（品牌主色；變數名稱沿用 amber-*，僅改色值，降低改動範圍） */
  --amber-500: #0e6b5c;
  --amber-700: #0a5147;
  --amber-300: #6bc7b8;
  --amber-100: #e3f1ed;
  --amber-50: #f2f8f6;

  /* Carbon（結構 / 中性色） */
  --carbon-900: #191a18;
  --carbon-800: #292a27;
  --carbon-700: #3d3e39;
  --carbon-500: #6d6d66;
  --carbon-300: #aaa9a0;
  --carbon-150: #d6d3c8;

  /* Ivory（背景色） */
  --ivory-500: #f6f1e5;
  --ivory-300: #faf7f0;
  --ivory-100: #fffdf8;

  /* 功能色：獨立設計，不從 Amber 延伸 */
  --income-green: #34735b;
  --income-soft: #e4efe9;
  --expense-red: #a94f45;
  --expense-soft: #f5e6e2;
  --warning: #c9862b;
  --warning-soft: #f8ecd7;
  --warning-ink: #6b4a12;

  /* 2026-10-12：預算配置視窗每個預算分類的識別色（依順序套用，跟比例色條同色）。
     刻意用低彩度、跟品牌象牙／碳黑／祖母綠同一個調性的大地色，只用在小色標跟色條上，
     不鋪滿整張卡片（Lucas 回饋彩色卡片「太 AI」，要高端一點）。 */
  --alloc-1: #0e6b5c;
  --alloc-2: #a8834a;
  --alloc-3: #3d3e39;
  --alloc-4: #7f8f86;
  --alloc-5: #9a6a57;
  --alloc-6: #b8b0a0;

  /* 語意化別名：元件實際使用這一組 */
  --bg: var(--ivory-500);
  --surface: var(--ivory-300);
  --surface-strong: var(--ivory-100);
  --ink: var(--carbon-900);
  --muted: var(--carbon-500);
  --line: var(--carbon-150);
  --primary: var(--carbon-900);
  --primary-strong: var(--carbon-800);
  --accent: var(--amber-500);
  --accent-strong: var(--amber-700);
  --accent-ink: var(--ivory-100);
  --accent-tint-ink: var(--carbon-900);
  --accent-bright: #43a394;
  --soft-green: var(--ivory-300);
  --soft-amber: var(--warning-soft);
  --danger: var(--expense-red);
  --shadow: 0 14px 40px rgb(25 26 24 / 9%);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --duration: 180ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC",
    sans-serif;
  font-synthesis: none;
}

/* 主題外觀（帳戶設定／首次使用選擇畫面可切換）：預設（無 data-theme 或 data-theme="emerald"）
   就是上面 :root 的深祖母綠；amber／indigo 覆寫品牌色階跟 accent-bright 即可，其餘語意化
   變數（accent/accent-strong/accent-ink/accent-tint-ink 等）都是從這幾個值算出來的，
   元件層級 CSS 完全不用另外處理。 */
:root[data-theme="emerald"] {
  --amber-500: #0e6b5c;
  --amber-700: #0a5147;
  --amber-300: #6bc7b8;
  --amber-100: #e3f1ed;
  --amber-50: #f2f8f6;
  --accent-bright: #43a394;
}

:root[data-theme="amber"] {
  --amber-500: #e9b949;
  --amber-700: #b98624;
  --amber-300: #f2d17d;
  --amber-100: #faedc8;
  --amber-50: #fdf7e8;
  --accent-bright: #e9b949;
}

:root[data-theme="indigo"] {
  --amber-500: #081d71;
  --amber-700: #061655;
  --amber-300: #6b7dc7;
  --amber-100: #e4e6f0;
  --amber-50: #f2f3f7;
  --accent-bright: #7586c7;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  background: var(--bg);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100dvh;
  color: var(--ink);
  background:
    radial-gradient(circle at 88% 8%, rgb(14 107 92 / 22%), transparent 20rem), var(--bg);
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
[type="file"] {
  touch-action: manipulation;
}

button {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 3px solid var(--accent-strong);
  outline-offset: 3px;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3,
strong {
  letter-spacing: -0.02em;
}

h1 {
  max-width: 19ch;
  margin-bottom: 0;
  font-size: clamp(1.55rem, 2vw, 2.25rem);
  line-height: 1.15;
}

h2 {
  margin-bottom: var(--space-2);
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
}

h3 {
  margin-bottom: var(--space-2);
  font-size: 1.15rem;
}

.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  color: white;
  background: var(--primary);
  border-radius: var(--radius-sm);
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.app-shell {
  display: grid;
  min-height: 100dvh;
}

.sidebar {
  display: none;
}

.main-content {
  width: 100%;
  max-width: 1480px;
  min-width: 0;
  margin-inline: auto;
  /* 2026-10-17：底部留白從 6.5rem 加到 7.25rem，配合 .mobile-nav 改成四邊留白的浮動藥丸（不再
     貼齊螢幕邊緣）＋「＋」鈕用 translateY(-28px) 懸浮在藥丸上方，確保最底下的內容不會被蓋到。 */
  padding: var(--space-5) var(--space-4) 7.25rem;
}

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.topbar-heading {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  align-items: flex-start;
  gap: var(--space-2);
}

.topbar-heading__row {
  display: flex;
  /* 2026-10-13：限制在標題區寬度內，標題太長時才會正確顯示「…」而不是壓到右上角按鈕下面。 */
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: var(--space-3);
}

.topbar-heading__title {
  flex: 1 1 auto;
  min-width: 0;
}

#page-title {
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(1.2rem, 6.2vw, 3.1rem);
  font-weight: 700;
  white-space: nowrap;
}

.topbar-brand {
  display: flex;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  padding: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
}

.topbar-brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.topbar-actions {
  display: none;
  gap: var(--space-3);
}

.topbar-mobile-account {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
}

.topbar-avatar-button {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  background: none;
  border: 0;
  border-radius: 50%;
  transition: transform var(--duration) var(--ease);
}

.topbar-avatar-button:active {
  transform: scale(0.96);
}

.mobile-menu-button {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: var(--surface-strong);
  border: 2px solid var(--bg);
  border-radius: 50%;
  box-shadow: 0 3px 8px rgb(25 26 24 / 20%);
  transition: transform var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

.mobile-menu-button:active {
  background: var(--amber-100);
  transform: translateY(1px) scale(0.94);
}

.mobile-menu-button span {
  width: 3px;
  height: 3px;
  flex: 0 0 auto;
  background: var(--ink);
  border-radius: 50%;
}

.page-subtitle {
  max-width: 42rem;
  margin: var(--space-2) 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.eyebrow {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-weight: 720;
  text-decoration: none;
  transition:
    transform var(--duration) var(--ease),
    background-color var(--duration) var(--ease),
    border-color var(--duration) var(--ease);
}

.button:active {
  transform: translateY(1px);
}

.button--primary {
  color: var(--accent-ink);
  background: var(--accent-bright);
}

.button--primary:hover {
  background: var(--accent-strong);
}

.button--dark {
  color: var(--accent-bright);
  background: var(--primary);
}

.button--dark:hover {
  background: var(--primary-strong);
}

.button--ghost {
  color: var(--ink);
  background: transparent;
  border-color: var(--line);
}

.button--light {
  color: var(--ink);
  background: var(--surface-strong);
  border-color: var(--line);
}

.button--light:hover {
  background: var(--amber-50);
  border-color: var(--amber-100);
}

.button--ghost:hover,
.button--soft {
  background: var(--amber-50);
  border-color: var(--amber-100);
}

.button--danger {
  color: var(--danger);
  background: transparent;
  border-color: rgb(169 79 69 / 32%);
}

.button--danger:hover {
  background: var(--expense-soft);
  border-color: rgb(169 79 69 / 52%);
}

.button--block {
  width: 100%;
}

.text-button {
  min-height: 44px;
  padding: 0;
  color: var(--ink);
  background: none;
  border: 0;
  font-weight: 750;
}

.text-button:hover {
  color: var(--primary-strong);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.text-button--danger {
  color: var(--danger);
}

.topbar-avatar-wrap {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.sync-status {
  position: absolute;
  top: -1px;
  right: -1px;
  display: block;
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.sync-status i {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: var(--muted);
  border: 2px solid var(--bg);
  border-radius: 50%;
}

.user-tag {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  padding: 0 14px;
  color: var(--ink);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 750;
  white-space: nowrap;
  transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.user-tag:hover {
  background: var(--amber-50);
  border-color: var(--amber-100);
}

.button-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-right: 0.3rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.1;
}

.button-icon--trailing {
  margin-right: 0;
  margin-left: 0.3rem;
}

.sync-status[data-status="saving"] i {
  background: var(--warning);
  animation: sync-pulse 1s ease-in-out infinite;
}

.sync-status[data-status="saved"] i {
  background: var(--income-green);
}

.sync-status[data-status="error"] i {
  background: var(--danger);
}

.account-access-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  padding: var(--space-5);
  color: white;
  background: var(--primary);
  border-radius: var(--radius-md);
}

.account-access-panel__identity,
.member-summary {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-4);
}

.account-access-panel .eyebrow {
  margin-bottom: var(--space-1);
  color: rgb(255 255 255 / 60%);
}

.account-access-panel h2,
.account-access-panel p {
  margin: 0;
}

.account-access-panel p {
  margin-top: var(--space-1);
  color: rgb(255 255 255 / 66%);
  font-size: 0.82rem;
  line-height: 1.5;
}

.plan-card--mobile {
  margin-bottom: var(--space-6);
  padding: var(--space-5);
  color: white;
  background: var(--primary);
  border-radius: var(--radius-md);
}

.plan-card--mobile .plan-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: 0.85rem;
}

.plan-card--mobile .eyebrow {
  margin: 0;
  color: rgb(255 255 255 / 62%);
}

.plan-card--mobile .progress-track {
  margin: var(--space-3) 0;
  background: rgb(255 255 255 / 14%);
}

.plan-card--mobile .progress-track > span {
  background: var(--accent-bright);
}

.plan-card--mobile p {
  margin-bottom: var(--space-4);
  color: rgb(255 255 255 / 66%);
  font-size: 0.82rem;
}

/* 2026-10-17 新增（Lucas 要求：要有「真的在倒數」的感覺）：圓環＋大數字＋說明文字（.countdown-ring，
   markup 由 app.js 的 countdownRingMarkup() 產生），取代原本單純一行紅字。這裡只放版面結構（跟顏色
   無關，三個使用情境共用），顏色交給各自情境（.plan-card--mobile／.plan-card／.install-app-card--warning）
   用 currentColor 繼承下去，不用每個情境各寫一次尺寸／版面。 */
.js-plan-warning:not([hidden]) {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-3) 0;
}

/* 2026-10-17 新增（Lucas 要求調整卡片內順序）：倒數進行中時，方案卡片（桌機側欄／手機帳戶頁）
   不顯示標語（.js-plan-copy，例如「把資源給真正需要的人！」），只留圓環警示＋升級按鈕兩個重點。
   實際排列順序（按鈕搬到圓環警示前面）由 app.js 直接搬動 DOM 節點處理，這裡只負責把標語藏起來；
   .plan-card--countdown 這個狀態 class 只加在 .plan-card／.plan-card--mobile 上，不影響總覽頁
   新卡片（#founding-inactivity-card，標語一樣正常顯示）。 */
.plan-card--countdown .js-plan-copy {
  display: none;
}

/* 2026-10-17 修正（Lucas 回報：上一版改錯方向了——他要的是桌機版「看得出來是一個深色方塊」
   的樣子套用到兩邊，不是把方塊拿掉變成純文字）：「你是第 X 位榮譽居民」這顆按鈕原本沿用
   .button--dark 的實心底色（var(--primary)）——手機版卡片背景剛好也是 var(--primary)，底色
   疊底色等於看不見；桌機版卡片背景是半透明白疊深色，同一顆按鈕底色才會明顯跳出來。這裡改成
   兩邊都固定用一個跟卡片背景不會疊色的淺色半透明底（不依賴 var(--primary) 是否剛好跟卡片背景
   相同），讓手機版也還原成跟桌機版一樣「看得出來是一個方塊」的樣子；文字維持置中、方塊維持
   滿版寬度，跟原本桌機版的樣子一致。.js-upgrade-button--badge 由 app.js 在 isFounding 時加上，
   不分平台；只影響這個狀態，試用／付費方案時真正的升級按鈕（.js-upgrade-button 本身，沒有這個
   class）維持原本的按鈕樣式不受影響。 */
.js-upgrade-button--badge {
  background: rgb(255 255 255 / 10%);
  border-color: rgb(255 255 255 / 10%);
}

.js-upgrade-button--badge:hover {
  background: rgb(255 255 255 / 16%);
}

.countdown-ring {
  position: relative;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
}

.countdown-ring__chart {
  width: 56px;
  height: 56px;
}

.countdown-ring__track {
  fill: none;
  stroke: currentColor;
  stroke-width: 7;
  opacity: 0.2;
}

.countdown-ring__value {
  fill: none;
  stroke: currentColor;
  stroke-width: 7;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dasharray var(--duration) var(--ease);
}

.countdown-ring__number {
  fill: currentColor;
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.countdown-ring__unit {
  fill: currentColor;
  font-size: 10px;
  font-weight: 600;
  opacity: 0.85;
}

.countdown-ring__message {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: currentColor;
  font-weight: 700;
}

/* 倒數剩 1 天（含）以內，圓環跟數字加呼吸脈動，強化緊張感；尊重 prefers-reduced-motion，
   不逼使用者看動畫。 */
@media (prefers-reduced-motion: no-preference) {
  .countdown-ring[data-urgent="1"] .countdown-ring__value,
  .countdown-ring[data-urgent="1"] .countdown-ring__number {
    animation: countdown-ring-pulse 1.6s ease-in-out infinite;
  }
}

@keyframes countdown-ring-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

/* 手機帳戶頁深色卡：跟上面 .plan-card--mobile p 的半透明白色不一樣，這一整塊要明顯跳出來，
   用飽和暖紅＋currentColor 讓圓環／數字統一顏色，是卡片裡唯一的紅色區塊。.countdown-ring__message
   本身也是 <p>，要另外蓋掉 .plan-card--mobile p 的半透明白色／margin，class 選擇器數量比
   .plan-card--mobile p 多一個，優先權才會夠高。 */
.plan-card--mobile .js-plan-warning {
  color: #ff8a73;
}

.plan-card--mobile .countdown-ring__message {
  margin: 0;
  color: #ff8a73;
}

.profile-mark {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 50%;
  font-weight: 850;
}

.profile-mark--large {
  width: 52px;
  height: 52px;
  flex-basis: 52px;
  font-size: 1.1rem;
}

.profile-mark img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.member-avatar {
  position: relative;
  flex: 0 0 auto;
}

.member-avatar-edit {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: var(--surface-strong);
  background: var(--ink);
  border: 2px solid var(--income-soft);
  border-radius: 50%;
  cursor: pointer;
}

.member-avatar-edit svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.user-tag--avatar {
  display: grid;
  width: 52px;
  height: 52px;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  place-items: center;
  border-radius: 50%;
}

.user-tag--avatar .profile-mark {
  width: 100%;
  height: 100%;
}

.sidebar-profile {
  display: none;
}

@keyframes sync-pulse {
  50% { opacity: 0.35; }
}

.view {
  display: none;
  animation: view-in 220ms var(--ease);
}

.view.is-active {
  display: block;
}

@keyframes view-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.summary-grid,
.content-grid,
.account-grid,
.template-grid,
.category-grid,
.budget-summary,
.investment-summary,
.investment-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.summary-grid {
  margin-bottom: var(--space-4);
}

.test-data-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.test-data-panel h3 {
  margin: var(--space-1) 0;
}

.test-data-panel p {
  margin: 0;
  color: var(--muted);
}

.entry-mode-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.entry-mode-panel h3 {
  margin: var(--space-1) 0;
}

.entry-mode-panel p {
  margin: 0;
  color: var(--muted);
}

.reconciliation-settings {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(280px, 1.15fr);
  gap: var(--space-6);
  margin-top: var(--space-5);
}

.reconciliation-settings h3 {
  margin: var(--space-1) 0;
}

.reconciliation-settings__intro p,
.reconciliation-settings__status,
.reconciliation-reminder-copy {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.reconciliation-settings__controls {
  display: grid;
  gap: var(--space-3);
}

.reconciliation-settings__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.reconciliation-settings__status {
  min-height: 1.5em;
  color: var(--primary-strong);
  font-size: 0.82rem;
  font-weight: 700;
}

.app-footer-panel {
  margin-top: var(--space-5);
  text-align: center;
}

.app-footer-panel .eyebrow {
  display: block;
}

.app-footer-panel .app-footer__version {
  margin: var(--space-1) 0 0.15rem;
  color: var(--ink);
  font-size: 0.95rem;
}

.app-footer-panel .app-footer__copyright {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

/* 版權列的兩個連結（米格創意執行／JOHN'S｜醬記）沿用周圍文字顏色，只加底線標示可點擊，
   深色（桌面側邊欄）跟淺色（帳戶頁、手機「更多功能」）兩種情境都適用，不用另外寫顏色。 */
.app-footer__copyright a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.app-footer__copyright a:hover,
.app-footer__copyright a:focus-visible {
  opacity: 0.75;
}

.auth-dialog-card {
  gap: var(--space-4);
}

#auth-guest-view,
.auth-form,
.auth-member-view,
.auth-reset-view,
.binding-section {
  display: grid;
  gap: var(--space-4);
}

#auth-guest-view[hidden],
.auth-form[hidden],
.auth-member-view[hidden],
.auth-reset-view[hidden] {
  display: none;
}

.verification-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--soft-amber);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  color: var(--warning-ink);
}

.verification-banner[hidden] {
  display: none;
}

.verification-banner button {
  white-space: nowrap;
}

.verification-banner-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* 總覽頁「設定精靈」入口 banner：跟示範模式／安裝提示共用 .verification-banner 版型，
   但那兩個是警示用的琥珀色，這裡換成跟品牌主色一致的薄荷綠，語意上是「友善的開始提示」
   而不是「需要注意的警告」；另外因為這個 banner 位在總覽頁內容裡（本月可用餘額卡片上方），
   不像示範模式／安裝提示在頂部欄位下面，所以多补一個 margin-bottom 跟下面的卡片隔開。 */
.verification-banner--highlight {
  margin-bottom: var(--space-4);
  color: var(--income-green);
  background: var(--income-soft);
}

/* 2026-10-16 新增：強制 Email 驗證規則的擋板（#verify-gate-dialog）裡的提示文字——
   跟一般表單的 .form-message 不一樣，這裡不是緊接在某個輸入欄位下面，不需要負的
   margin-top，所以蓋掉那條規則；[hidden] 交給瀏覽器內建行為隱藏即可，不需要另外寫。 */
.verify-gate-message {
  margin-top: 0;
}

.auth-tabs {
  margin-bottom: var(--space-1);
}

.auth-form label small {
  display: block;
  margin-top: var(--space-1);
  color: var(--muted);
  font-size: 0.72rem;
}

.auth-preserve-note {
  margin: 0;
  padding: var(--space-3);
  color: var(--income-green);
  background: var(--income-soft);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  line-height: 1.5;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--muted);
  font-size: 0.72rem;
  white-space: nowrap;
}

.auth-divider::before,
.auth-divider::after {
  height: 1px;
  flex: 1;
  background: var(--line);
  content: "";
}

.quick-auth-grid {
  display: grid;
  gap: var(--space-2);
}

.quick-auth-button {
  display: grid;
  min-height: 52px;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-3);
  color: var(--ink);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-weight: 720;
}

.quick-auth-button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.quick-auth-button small {
  color: var(--muted);
  font-size: 0.68rem;
}

.provider-mark {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: white;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 900;
}

.provider-mark--line {
  background: #06c755;
}

.provider-mark--google {
  color: #254054;
  background: #eef1f4;
  border: 1px solid #d7dde2;
}

.member-summary {
  padding: var(--space-4);
  background: var(--income-soft);
  border-radius: var(--radius-sm);
}

.member-summary div {
  display: grid;
  min-width: 0;
  gap: 0.15rem;
}

.member-summary span:last-child {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.78rem;
  text-overflow: ellipsis;
}

.binding-section h3,
.binding-section p {
  margin: 0;
}

.binding-section p {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.binding-list {
  display: grid;
  gap: var(--space-2);
}

.binding-list > div {
  display: grid;
  min-height: 58px;
  grid-template-columns: 30px minmax(80px, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.binding-list > div > span:nth-child(3) {
  color: var(--muted);
  font-size: 0.74rem;
}

@media (max-width: 680px) {
  .test-data-panel,
  .entry-mode-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .reconciliation-settings {
    grid-template-columns: minmax(0, 1fr);
  }

  .reconciliation-settings__actions .button {
    width: 100%;
  }

  .account-access-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .binding-list > div {
    grid-template-columns: 30px minmax(0, 1fr) auto;
  }

  .binding-list > div .button {
    grid-column: 1 / -1;
  }
}

.balance-card,
.metric-card,
.panel,
.account-card,
.budget-stat {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgb(255 253 248 / 88%);
}

.balance-card,
.metric-card {
  min-height: 156px;
  padding: var(--space-5);
}

.balance-card--hero {
  position: relative;
  overflow: hidden;
  color: white;
  background: var(--primary);
  border-color: var(--primary);
}

.balance-card__leaf {
  position: absolute;
  right: -2.5rem;
  bottom: -3rem;
  width: 12rem;
  height: 12rem;
  background: radial-gradient(circle, var(--accent-bright) 0%, var(--accent-bright) 55%, transparent 72%);
  border-radius: 50%;
  opacity: 0.35;
  pointer-events: none;
}

.overview-banner {
  margin-top: var(--space-4);
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.overview-banner__image {
  display: block;
  width: 100%;
  height: auto;
}

.balance-card p,
.metric-card p {
  color: inherit;
  opacity: 0.7;
}

.balance-card strong,
.metric-card > strong {
  display: block;
  margin: var(--space-3) 0;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-variant-numeric: tabular-nums;
}

/* 2026-10-10 新增：本月可用餘額卡片改成左右並排兩個區塊——左邊是原本的本月可用餘額，
   右邊是「生活支出剩餘／超支」，利用卡片右側原本只有裝飾圓點的空白區域放第二組數字，
   兩邊數字共用上面 .balance-card strong 同一套大字級，視覺上同樣醒目。 */
.balance-card__row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.balance-card__block {
  min-width: 0;
  flex: 1 1 140px;
}

.balance-card__block--budget {
  padding-left: var(--space-5);
  border-left: 1px solid rgb(255 255 255 / 20%);
}

.balance-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  font-size: 0.875rem;
}

.balance-meta b {
  display: block;
  margin-top: 0.2rem;
  font-variant-numeric: tabular-nums;
}

.metric-label {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
}

/* ===== 總覽最上方「安裝應用程式」卡（2026-10-12，從帳戶頁搬過來）===== */
.install-app-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: rgb(255 253 248 / 88%);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.install-app-card__icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--accent);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.install-app-card__text {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.install-app-card__text h3 {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 700;
}

.install-app-card__text p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.install-app-card__button {
  min-height: 40px;
  padding-inline: 1rem;
  font-size: 0.85rem;
  white-space: nowrap;
}

.install-app-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.install-app-card__actions .text-button {
  min-height: 40px;
  padding-inline: 0.5rem;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

/* 2026-10-17 新增：總覽頁榮譽居民未使用倒數卡（#founding-inactivity-card）——跟上面「安裝應用程式」
   同一套版型，但要讓人一眼看出「這個跟其他提示卡不一樣，是真的要注意」，改用品牌既有的支出紅
   （--expense-red／--expense-soft），不是另外發明新色，維持跟其他功能色一致的調性。 */
.install-app-card--warning {
  background: var(--expense-soft);
  border-color: rgb(169 79 69 / 32%);
}

.install-app-card--warning .install-app-card__icon {
  color: var(--expense-red);
  background: var(--surface-strong);
  border-color: rgb(169 79 69 / 32%);
}

.install-app-card--warning .install-app-card__text h3 {
  color: var(--expense-red);
}

/* 2026-10-17 新增：這張卡的圓環＋說明文字也用支出紅，跟上面 h3 同一個顏色；
   .countdown-ring__message 本身是 <p>，要蓋掉 .install-app-card__text p 原本的灰色説明文字樣式，
   class 數量要比它多才贏得了優先權。 */
.install-app-card--warning .js-plan-warning {
  color: var(--expense-red);
}

.install-app-card--warning .countdown-ring__message {
  margin: 0;
  color: var(--expense-red);
  font-size: 0.85rem;
  line-height: 1.45;
}

@media (max-width: 560px) {
  .install-app-card {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .install-app-card__button,
  .install-app-card__actions {
    grid-column: 1 / -1;
  }

  .install-app-card__actions {
    flex-direction: row-reverse;
  }

  .install-app-card__actions .install-app-card__button {
    flex: 1;
  }
}

/* ===== 總覽「今日對帳」卡（2026-10-12）=====
   跨整列；手機版用 order 排在本月可用餘額正下方，桌機版（960px 以上）排到第二列。 */
.reconciliation-card {
  grid-column: 1 / -1;
  order: 1;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: rgb(255 253 248 / 88%);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.summary-grid > .metric-card {
  order: 2;
}

/* 總覽「未配置收入」提示卡：跨整列，排在本月可用餘額正下方（今日對帳卡之前，DOM 順序決定）。 */
.summary-grid > .unallocated-card {
  grid-column: 1 / -1;
  order: 1;
  margin-bottom: 0;
}

.unallocated-card .install-app-card__text h3 {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

.reconciliation-card__icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--carbon-500);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.reconciliation-card__icon-done {
  display: none;
}

.reconciliation-card[data-state="done"] .reconciliation-card__icon {
  color: var(--accent);
}

.reconciliation-card[data-state="done"] .reconciliation-card__icon-pending {
  display: none;
}

.reconciliation-card[data-state="done"] .reconciliation-card__icon-done {
  display: block;
}

.reconciliation-card[data-state="due"] {
  border-color: color-mix(in srgb, var(--warning) 55%, var(--line));
}

.reconciliation-card[data-state="due"] .reconciliation-card__icon {
  color: var(--warning-ink);
  background: var(--warning-soft);
  border-color: color-mix(in srgb, var(--warning) 40%, transparent);
}

.reconciliation-card__text {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.reconciliation-card__text h3 {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 700;
}

.reconciliation-card__text p {
  margin: 0;
  color: var(--carbon-700);
  font-size: 0.82rem;
  font-weight: 600;
}

.reconciliation-card[data-state="due"] .reconciliation-card__text p {
  color: var(--warning-ink);
}

.reconciliation-card__text small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reconciliation-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.reconciliation-card__start {
  min-height: 40px;
  padding-inline: 0.9rem;
  font-size: 0.85rem;
  white-space: nowrap;
}

.reconciliation-card__settings {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  color: var(--carbon-500);
  background: transparent;
  border: 0;
  border-radius: 10px;
}

.reconciliation-card__settings:hover,
.reconciliation-card__settings:focus-visible {
  color: var(--ink);
  background: var(--surface-strong);
}

.reconciliation-card__settings .menu-icon {
  width: 20px;
  height: 20px;
}

/* 很窄的手機：按鈕移到第二行，避免擠壓文字。 */
@media (max-width: 380px) {
  .reconciliation-card {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .reconciliation-card__actions {
    grid-column: 1 / -1;
    justify-content: space-between;
  }

  .reconciliation-card__start {
    flex: 1;
  }
}

@media (min-width: 960px) {
  .reconciliation-card,
  .summary-grid > .unallocated-card {
    order: 3;
  }
}

.metric-card--period {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* 2026-10-07 調整：本日／本週／本月原本是分頁籤切換，一次只看得到一個區間，手機版
   卡片下方常留一大片空白；改成三列同時顯示，每列仍可點擊跳到該區間的明細。 */
.metric-period-rows {
  display: flex;
  flex-direction: column;
}

.metric-period-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  text-align: left;
  background: none;
  border: 0;
}

.metric-period-row + .metric-period-row {
  border-top: 1px solid var(--carbon-150);
}

.metric-period-row__name {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}

.metric-period-row__count {
  color: var(--muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

.metric-period-row__right {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 0 0 auto;
}

.metric-period-row__amount {
  font-weight: 720;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.metric-period-chevron {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  opacity: 0.6;
  transition: transform var(--duration) var(--ease);
}

.metric-period-row:hover .metric-period-chevron {
  transform: translateX(2px);
}

.panel {
  min-width: 0;
  padding: var(--space-5);
}

.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.section-heading h2,
.section-heading h3,
.section-heading p {
  margin-bottom: 0;
}

.section-heading p {
  max-width: 54ch;
  margin-top: var(--space-2);
  color: var(--muted);
  line-height: 1.6;
}

.section-heading--page {
  display: grid;
  margin-bottom: var(--space-6);
}

.transaction-list {
  display: grid;
  gap: 0;
}

.transaction-item {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  color: inherit;
  text-align: left;
  background: transparent;
  border-top: 0;
  border-right: 0;
  border-bottom: 1px solid var(--line);
  border-left: 0;
  border-radius: 7px;
  transition: background-color var(--duration) var(--ease);
}

.transaction-item.has-receipt-thumb {
  grid-template-columns: minmax(0, 1fr) 46px auto;
}

.transaction-receipt-thumb {
  display: block;
  width: 46px;
  height: 46px;
  overflow: hidden;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.transaction-receipt-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.transaction-receipt-thumb.is-error {
  display: none;
}

.transaction-item:hover {
  background: var(--amber-50);
}

.transaction-item:first-child {
  padding-top: 0;
}

.transaction-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.transaction-main {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.transaction-avatar {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--primary);
  background: var(--carbon-150);
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 800;
}

.transaction-avatar svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.transaction-avatar.is-income {
  color: var(--income-green);
  background: var(--income-soft);
}

.transaction-avatar.is-expense {
  color: var(--expense-red);
  background: var(--expense-soft);
}

.transaction-avatar.is-transfer,
.transaction-avatar.is-payment {
  color: var(--accent-tint-ink);
  background: var(--amber-100);
}

.transaction-avatar.is-adjustment {
  color: var(--ink-soft);
  background: var(--surface-strong);
}

.transaction-avatar.is-investment-buy {
  color: var(--expense-red);
  background: var(--expense-soft);
}

.transaction-avatar.is-investment-sell {
  color: var(--income-green);
  background: var(--income-soft);
}

.transaction-title,
.transaction-subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transaction-title {
  display: block;
  margin-bottom: 0.2rem;
  font-weight: 780;
}

.transaction-subtitle {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
}

.transaction-amount {
  text-align: right;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.transaction-amount.is-income {
  color: var(--income-green);
}

.receipt-tag {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.budget-list {
  display: grid;
  gap: var(--space-5);
}

.budget-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.budget-row__body {
  flex: 1;
  min-width: 0;
}

.budget-row__icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  color: var(--accent-strong);
  background: var(--amber-50);
  border-radius: 50%;
}

.budget-row__icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.budget-row__top,
.budget-row__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

.budget-row__top {
  margin-bottom: var(--space-2);
  font-size: 0.9rem;
}

.budget-row__top strong,
.budget-row__meta {
  font-variant-numeric: tabular-nums;
}

.budget-row__meta {
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: 0.75rem;
}

.budget-row__source-tag {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0.1rem 0.5rem;
  color: var(--accent-tint-ink);
  background: var(--amber-100);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  vertical-align: middle;
}

/* 2026-10-07 新增：母分類卡片底下的「平攤子預算」清單（年繳平攤費用，例如網路年費、車險）。 */
.sub-budget-list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.sub-budget-list__summary {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.sub-budget-row {
  display: grid;
  gap: var(--space-1);
}

.sub-budget-row__edit {
  display: block;
  width: 100%;
  padding: 0;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

.sub-budget-row__top,
.sub-budget-row__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 0.82rem;
}

.sub-budget-row__top {
  margin-bottom: var(--space-1);
}

.sub-budget-row__meta {
  margin-top: var(--space-1);
  color: var(--muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.amortization-status {
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

.amortization-status--due {
  color: var(--warning-ink);
  background: var(--warning-soft);
}

.amortization-status--overdue {
  color: var(--danger);
  background: var(--expense-soft);
}

.add-sub-budget {
  justify-self: start;
  font-size: 0.82rem;
}

/* 小型文字按鈕，用在「補記扣款」這種附加在清單項目旁、不搶視覺焦點的次要動作。
   跟 .text-button 的差異只是字級更小、不加粗——這裡是輔助動作，不是主要 CTA。 */
.link-button {
  padding: 0;
  color: var(--primary-strong);
  background: none;
  border: 0;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.link-button:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.budget-rollover-list {
  display: grid;
  gap: var(--space-2);
}





.progress-track {
  height: 8px;
  overflow: hidden;
  background: var(--carbon-150);
  border-radius: 999px;
}

.progress-track > span {
  display: block;
  height: 100%;
  background: var(--primary);
  border-radius: inherit;
  transition: width 300ms var(--ease);
}

/* 2026-10-10 重新設計：交易類型／時間範圍改成無外框的純文字下拉，靠右對齊；
   搜尋欄跟月份選擇合併成同一條膠囊造型的工具列，點放大鏡展開搜尋、點月份文字
   展開下拉選單直接跳到指定月份（取代原本的 ‹ › 左右切換）。*/
.filter-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.filter-bar__selects {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.select-ghost {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.select-ghost select {
  appearance: none;
  -webkit-appearance: none;
  width: auto;
  min-height: auto;
  height: auto;
  padding: var(--space-1) var(--space-4) var(--space-1) 0;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
  transition: color var(--duration) var(--ease);
}

.select-ghost select:hover,
.select-ghost select:focus-visible {
  color: var(--ink);
}

.select-ghost::after {
  content: "";
  position: absolute;
  right: 3px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
  transition: border-color var(--duration) var(--ease);
}

.select-ghost:hover::after,
.select-ghost:focus-within::after {
  border-color: var(--ink);
}

.filter-bar__search {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-1);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color var(--duration) var(--ease);
}

.filter-bar__search:focus-within {
  border-color: var(--amber-300);
}

/* 2026-10-10 調整：搜尋欄不用再點擊才展開，圖示＋輸入框＋清除鈕都是 .search-toggle
   底下常駐並排的子元素；圖示純粹是裝飾（真正能聚焦輸入框是靠點擊時的 JS），
   「×」只在有輸入內容時才顯示。 */
.search-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1 1 auto;
  min-width: 0;
}

.search-toggle__icon {
  display: grid;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  place-items: center;
  color: var(--muted);
  cursor: text;
}

.search-toggle__icon svg {
  width: 18px;
  height: 18px;
}

.search-toggle input {
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  padding: 0 var(--space-1);
  background: transparent;
  border: 0;
  color: var(--ink);
  font-size: 0.86rem;
}

.search-toggle input::placeholder {
  color: var(--muted);
}

.search-toggle input:focus {
  outline: none;
}

/* 瀏覽器會自動在 type="search" 欄位內建一個清除圖示，跟我們自己做的
   .search-toggle__clear 重複顯示成兩個 X，這裡統一隱藏瀏覽器內建的那顆。 */
.search-toggle input[type="search"]::-webkit-search-cancel-button,
.search-toggle input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.search-toggle__clear {
  display: grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  place-items: center;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 50%;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.search-toggle__clear:hover,
.search-toggle__clear:focus-visible {
  background: rgb(25 26 24 / 8%);
  color: var(--ink);
}

.month-trigger-wrap {
  position: relative;
  flex: 0 0 auto;
  margin-left: var(--space-1);
  padding-left: var(--space-2);
  border-left: 1px solid var(--line);
}

.month-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 var(--space-2) 0 var(--space-1);
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.month-trigger:hover,
.month-trigger:focus-visible,
.month-trigger[aria-expanded="true"] {
  background: var(--amber-100);
  color: var(--accent-strong);
}

.month-trigger__chevron {
  width: 14px;
  height: 14px;
  transition: transform var(--duration) var(--ease);
}

.month-trigger[aria-expanded="true"] .month-trigger__chevron {
  transform: rotate(180deg);
}

.month-menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  z-index: 20;
  min-width: 140px;
  max-height: 240px;
  overflow-y: auto;
  padding: var(--space-1);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
}

.month-menu[hidden] {
  display: none;
}

.month-menu__option {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 0.85rem;
  text-align: right;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease);
}

.month-menu__option:hover,
.month-menu__option:focus-visible {
  background: var(--amber-100);
}

.month-menu__option.is-selected {
  color: var(--accent-strong);
  font-weight: 700;
}

.month-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-2);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.month-nav span {
  min-width: 6em;
  text-align: center;
  font-weight: 780;
  color: var(--ink);
}

.month-nav-button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 150ms var(--ease), border-color 150ms var(--ease);
}

.month-nav-button:hover,
.month-nav-button:focus-visible {
  background: var(--amber-100);
  border-color: var(--amber-300);
}

label {
  display: grid;
  gap: var(--space-2);
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 680;
}

input,
select,
textarea {
  width: 100%;
  min-height: 46px;
  padding: 0.75rem 0.85rem;
  color: var(--ink);
  background: var(--surface-strong);
  border: 1px solid var(--carbon-150);
  border-radius: var(--radius-sm);
  font-size: 1rem;
}

textarea {
  min-height: 84px;
  resize: vertical;
  line-height: 1.5;
}

input::placeholder,
textarea::placeholder {
  color: var(--carbon-300);
}

.field-help {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
}

/* 平攤子預算對話框的扣款月份多選選單：預設瀏覽器 <select multiple> 只會顯示四行，
   拉高到一次看得到全部 12 個月份，不用再捲一次才能選到年底的月份。 */
#sub-budget-payment-months {
  height: auto;
  min-height: 11rem;
}

.empty-state {
  padding: var(--space-10) var(--space-4);
  text-align: center;
}

.empty-state p {
  margin: var(--space-2) 0 0;
  color: var(--muted);
}

.empty-state--inline {
  padding: var(--space-6) var(--space-4);
}

/* 醬記公仔插圖：空狀態與預算標題旁的識別圖 */
.empty-state__mascot,
.compact-empty__mascot {
  display: block;
  width: 104px;
  height: auto;
  margin: 0 auto var(--space-3);
}

.section-heading__mascot {
  width: 34px;
  height: auto;
  flex-shrink: 0;
}

.section-heading__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.budget-summary {
  margin-bottom: var(--space-4);
}

.investment-summary {
  margin-bottom: var(--space-4);
}

.market-quote-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgb(255 253 248 / 68%);
}

.market-quote-control > span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 650;
  line-height: 1.45;
}

.market-quote-control .button {
  min-height: 42px;
  flex: 0 0 auto;
}

.investment-content-grid {
  margin-bottom: var(--space-4);
}

.investment-summary .budget-stat {
  min-width: 0;
}

.investment-summary .budget-stat small {
  display: block;
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 560;
  line-height: 1.45;
}

.investment-summary .budget-stat small b,
.position-item em {
  font-style: normal;
  font-weight: 700;
}

.investment-summary .is-positive,
.settlement-item .is-positive,
.position-item .is-positive,
.budget-summary .is-positive {
  color: var(--income-green);
}

.investment-summary .is-negative,
.settlement-item .is-negative,
.position-item .is-negative,
.budget-summary .is-negative {
  color: var(--danger);
}

.settlement-list,
.position-list {
  display: grid;
  gap: 0;
}

.settlement-item,
.position-item {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
}

.settlement-item:first-child,
.position-item:first-child {
  padding-top: 0;
}

.settlement-item:last-child,
.position-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.settlement-item > div,
.position-item > div,
.compact-empty {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}

.settlement-item > div:last-child,
.position-item > div:last-child {
  text-align: right;
}

.settlement-item span,
.position-item span,
.compact-empty span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 540;
  line-height: 1.5;
}

.settlement-item b,
.position-item b {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 持有部位卡片改成上下排列：標題列在上，成本／市值／未實現三行對齊比較在下，
   不再用左右兩欄（原本市值字級特別大、持有成本擠在左邊小字裡，不容易一眼比較）。 */
.position-item {
  display: block;
}

.position-item .position-item-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.position-item .position-item-header strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.position-item .position-item-header span {
  flex-shrink: 0;
  white-space: nowrap;
}

.position-item .position-item-figures {
  display: grid;
  gap: var(--space-1);
}

.position-item .position-figure {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.position-item .position-figure span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 620;
}

.position-item .position-figure b {
  font-size: 0.95rem;
}

.position-item .position-figure--market b {
  font-size: 1.1rem;
}

.position-item .position-item-note {
  display: block;
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 540;
}

.recurring-item-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.recurring-item-buttons .button {
  padding: 0.5rem 0.85rem;
  font-size: 0.78rem;
}

.settlement-item.is-paused {
  opacity: 0.55;
}

@media (max-width: 480px) {
  #recurring-due-list .settlement-item, #overview-due-list .settlement-item,
  #recurring-rules-list .settlement-item {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  #recurring-due-list .settlement-item > div:last-child, #overview-due-list .settlement-item > div:last-child,
  #recurring-rules-list .settlement-item > div:last-child {
    text-align: left;
  }

  #recurring-due-list .recurring-item-buttons, #overview-due-list .recurring-item-buttons,
  #recurring-rules-list .recurring-item-buttons {
    justify-content: flex-start;
  }
}

.compact-empty {
  padding: var(--space-5) 0;
  text-align: center;
}

.investment-history {
  margin-top: var(--space-4);
}

.budget-income-overview {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
  padding: 0 0 var(--space-5);
  border-bottom: 1px solid var(--line);
}

.budget-income-overview span,
.budget-unallocated span {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 720;
}

.budget-income-overview strong {
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-variant-numeric: tabular-nums;
}

.budget-planner-heading {
  margin-bottom: var(--space-4);
}

.budget-unallocated {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background: rgb(214 211 200 / 55%);
  border-radius: var(--radius-sm);
}

.budget-unallocated strong {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

.budget-stat {
  padding: var(--space-5);
}

.budget-stat span {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.budget-stat strong {
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
}

.template-card {
  display: grid;
  min-height: 150px;
  padding: var(--space-5);
  color: white;
  text-align: left;
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: var(--radius-md);
  transition:
    transform var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
}

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

.template-card.is-active {
  outline: 3px solid rgb(14 107 92 / 72%);
  outline-offset: 3px;
}

.template-status {
  margin: var(--space-2) 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 650;
}

.template-card > span {
  align-self: start;
  color: var(--accent-bright);
  font-size: 1.4rem;
  font-weight: 820;
}

.template-card > strong {
  align-self: end;
}

.template-card > small {
  margin-top: var(--space-2);
  opacity: 0.7;
}

.template-card--muted {
  color: var(--ink);
  background: var(--ivory-300);
  border-color: var(--carbon-150);
}

.template-card--muted > span {
  color: var(--muted);
}

.account-card {
  width: 100%;
  padding: var(--space-5);
  color: var(--ink);
  text-align: left;
  transition:
    transform var(--duration) var(--ease),
    border-color var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
}

.account-card:hover {
  border-color: var(--amber-300);
  box-shadow: 0 10px 28px rgb(25 26 24 / 8%);
  transform: translateY(-2px);
}

.account-card.is-disabled {
  opacity: 0.62;
}

.account-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.account-type,
.status-badge {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 0.25rem 0.55rem;
  color: var(--income-green);
  background: var(--income-soft);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 760;
}

.account-card h3 {
  margin: var(--space-6) 0 var(--space-2);
}

.account-balance {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.account-note {
  margin: var(--space-2) 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.segmented {
  display: inline-grid;
  grid-auto-flow: column;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--carbon-150);
  border-radius: 12px;
}

.segmented button {
  min-height: 44px;
  padding: 0.55rem 1rem;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-weight: 750;
}

.segmented button.is-active {
  color: var(--ink);
  background: var(--surface-strong);
  box-shadow: 0 2px 8px rgb(25 26 24 / 8%);
}

.segmented--full {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* v381：分帳底列跟主選單共用同一種五欄導覽節奏。中央欄永遠保留給新增鈕，左右各兩欄，
   避免絕對定位的＋號覆蓋 flex 平分後落在中央附近的「結算／成員」。底座也改成內縮圓角藥丸，
   延續主選單的半透明深色、挖洞與浮起圓鈕語言。 */
.split-detail-tabs {
  --dock-base: color-mix(in srgb, var(--primary) 60%, var(--accent-strong));
  --dock-ink: color-mix(in srgb, var(--ivory-100) 90%, var(--amber-300));
  --dock-selected: color-mix(in srgb, var(--amber-300) 22%, var(--ivory-100));
  --dock-glow: color-mix(in srgb, var(--amber-300) 65%, var(--ivory-100));
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  min-height: 62px;
  margin: 0 calc(var(--space-2) * -1) calc(var(--space-2) * -1);
  padding: 0.3rem 0.35rem calc(0.3rem + env(safe-area-inset-bottom, 0px));
  background: none;
  border-radius: 28px;
}

/* 毛玻璃底色＋中央圓鈕挖洞，尺寸與主選單一致。 */
.split-detail-tabs::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 1px solid color-mix(in srgb, var(--dock-glow) 30%, transparent);
  border-radius: inherit;
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--dock-glow) 10%, transparent), color-mix(in srgb, var(--dock-base) 8%, transparent) 38%, color-mix(in srgb, var(--primary) 30%, transparent)),
    color-mix(in srgb, var(--dock-base) 72%, transparent);
  backdrop-filter: blur(12px) saturate(125%);
  -webkit-backdrop-filter: blur(12px) saturate(125%);
  -webkit-mask-image: radial-gradient(circle at 50% 10px, transparent 28px, #000 28.5px);
  mask-image: radial-gradient(circle at 50% 10px, transparent 28px, #000 28.5px);
  pointer-events: none;
}

.split-detail-tabs__tab {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  min-height: 58px;
  padding: 6px 0;
  color: var(--dock-ink);
  background: transparent;
  border: 0;
  border-radius: 20px;
  font-size: 0.68rem;
  font-weight: 400;
  white-space: nowrap;
  touch-action: manipulation;
}

.split-detail-tabs__tab[data-split-detail-tab="expenses"] { grid-column: 1; }
.split-detail-tabs__tab[data-split-detail-tab="settlement"] { grid-column: 2; }
.split-detail-tabs__tab[data-split-detail-tab="members"] { grid-column: 4; }
.split-detail-tabs__tab[data-split-open-payment-settings] { grid-column: 5; }

.split-detail-tabs__tab .nav-icon {
  flex: 0 0 21px;
  width: 21px;
  height: 21px;
  stroke-width: 1.65;
}

.split-detail-tabs__tab.is-active {
  color: var(--dock-selected);
}

.split-detail-tabs__tab:active { translate: 0 2px; }

.split-detail-tabs__tab:focus-visible,
.split-detail-tabs__add:focus-visible {
  outline: 2px solid var(--dock-selected);
  outline-offset: -2px;
}

/* ＋鈕改用 position:absolute 置中懸浮，真正脫離分頁鈕的 flex 排版（上一版只是用 translateY
   位移，其實還佔著一個 flex 版位，所以才需要另外補「邀請」鈕湊數才能置中；這次改法左右分頁鈕
   會自動平分版面，不用再靠湊數字湊對稱）。鈕本身浮在 ::before 挖的洞上面，用半透明毛玻璃
   （backdrop-filter）＋ 0.5px 透明邊框（搭配 background-clip:padding-box 讓邊框不吃到背景色），
   做法跟顏色公式都直接比照 .mobile-nav__add 最終版（v351），不再用底色描邊假裝懸浮。 */
.split-detail-tabs__add {
  position: absolute;
  z-index: 2;
  top: -18px;
  left: 50%;
  width: 54px;
  height: 54px;
  min-height: 54px;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  color: var(--primary);
  border: 0.5px solid transparent;
  background: color-mix(in srgb, color-mix(in srgb, var(--dock-base) 48%, var(--dock-glow)) 54%, transparent);
  background-clip: padding-box;
  backdrop-filter: blur(9px) saturate(125%);
  -webkit-backdrop-filter: blur(9px) saturate(125%);
  border-radius: 50%;
  font-size: 1.7rem;
  line-height: 1;
  box-shadow: none;
}

.split-detail-tabs__add:active {
  box-shadow: none;
  background-color: color-mix(in srgb, var(--dock-base) 68%, transparent);
  transform: translateX(-50%) scale(0.96);
}


.investment-fields {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  margin: 0;
  padding: var(--space-5);
  background: var(--ivory-300);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.investment-fields legend {
  padding: 0 var(--space-2);
  color: var(--ink);
  font-weight: 780;
}

.investment-fields .form-grid {
  align-items: start;
}

.investment-fields .form-grid > label {
  width: 100%;
  align-content: start;
}

.investment-fields input:not([type="hidden"]):not([type="checkbox"]),
.investment-fields select,
.investment-fields .check-control {
  height: 52px;
  min-height: 52px;
}

.recurring-fields {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  margin: 0;
  padding: var(--space-5);
  background: var(--ivory-300);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.recurring-fields__toggle {
  height: auto;
  min-height: 46px;
}

.recurring-fields__options,
.investment-recurring-fields .form-grid {
  align-items: start;
}

.investment-recurring-fields {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--line);
}

.lookup-status[data-status="loading"] {
  color: var(--muted);
}

.lookup-status[data-status="success"] {
  color: var(--income-green);
}

.lookup-status[data-status="error"] {
  color: var(--danger);
}

.check-control {
  display: flex;
  min-height: 46px;
  align-items: center;
  gap: var(--space-2);
  padding: 0.7rem 0.85rem;
  color: var(--ink);
  background: var(--surface-strong);
  border: 1px solid var(--carbon-150);
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.check-control input {
  width: 20px;
  min-height: 20px;
  margin: 0;
  accent-color: var(--primary);
}

#founding-terms-dialog {
  width: min(100% - 1.25rem, 640px);
}

.dialog-card--founding {
  gap: var(--space-4);
}

.dialog-card--founding .dialog-header {
  padding-bottom: 0;
}

.dialog-card--founding .dialog-header h2 {
  margin-top: var(--space-2);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  line-height: 1.3;
}

.founding-terms-intro {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4);
  color: var(--accent-strong);
  background: var(--amber-100);
  border: 1px solid rgb(14 107 92 / 18%);
  border-radius: var(--radius-md);
}

.founding-terms-intro__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--accent);
  background: rgb(255 255 255 / 72%);
  border-radius: 12px;
}

.founding-terms-intro__icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.founding-terms-intro strong {
  display: block;
  color: var(--accent-strong);
  font-size: 0.98rem;
  line-height: 1.5;
}

.founding-terms-intro p {
  margin: 0.15rem 0 0;
  color: var(--ink);
  font-size: 0.86rem;
  line-height: 1.6;
}

.founding-terms-rules {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.founding-terms-rules li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.founding-terms-rules__num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--accent-strong);
  background: var(--amber-100);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
}

.founding-terms-rules .is-critical .founding-terms-rules__num {
  color: #783d35;
  background: #edd0c8;
}

.founding-terms-rules strong,
.founding-terms-rules li div > span {
  display: block;
}

.founding-terms-rules strong {
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.5;
}

.founding-terms-rules .is-critical strong {
  color: #783d35;
}

.founding-terms-rules li div > span {
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.55;
}

.founding-plan-details {
  border-top: 1px solid var(--line);
  padding-top: var(--space-3);
}

.founding-plan-details summary {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 0.35rem;
  color: var(--accent-strong);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.founding-plan-details summary::-webkit-details-marker {
  display: none;
}

.founding-plan-details summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--duration) var(--ease);
}

.founding-plan-details[open] summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.founding-plan-details[open] > :not(summary) {
  margin-top: var(--space-3);
}

.founding-plan-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.founding-plan-card {
  min-width: 0;
  padding: var(--space-4);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.founding-plan-card--plus {
  border-color: var(--accent);
  box-shadow: inset 0 3px 0 var(--accent);
}

.founding-plan-card__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.founding-plan-card__title span {
  font-size: 0.95rem;
  font-weight: 800;
}

.founding-plan-card__title strong {
  color: var(--accent-strong);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}

.founding-plan-card ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: 1.1rem;
  color: var(--muted);
  font-size: 0.77rem;
  line-height: 1.5;
}

.founding-plan-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.6;
}

.founding-plan-prices {
  display: grid;
  gap: 0.35rem;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.founding-plan-prices b {
  display: inline-block;
  min-width: 5.6rem;
}

.founding-plan-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.6;
}

.founding-terms-footer {
  position: sticky;
  bottom: calc(-1 * var(--space-5));
  z-index: 2;
  display: grid;
  gap: var(--space-3);
  margin: 0 calc(-1 * var(--space-5)) calc(-1 * var(--space-5));
  padding: var(--space-4) var(--space-5) var(--space-5);
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 24px rgb(40 32 20 / 6%);
}

.founding-terms-agree {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  color: var(--ink);
  background: var(--amber-50);
  border: 2px solid var(--accent);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
  transition:
    background-color var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
}

.founding-terms-agree:hover {
  background: var(--amber-100);
}

.founding-terms-agree:has(input:checked) {
  background: var(--amber-100);
}

.founding-terms-agree:has(input:focus-visible) {
  box-shadow: 0 0 0 3px var(--amber-100);
}

.founding-terms-agree input {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  min-height: 26px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.founding-terms-agree.is-nudged {
  animation: founding-agree-nudge 0.5s var(--ease);
  box-shadow: 0 0 0 4px rgb(201 134 43 / 35%);
}

@keyframes founding-agree-nudge {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.founding-terms-actions {
  margin: 0;
  padding: 0;
}

.founding-terms-actions .button[aria-disabled="true"] {
  opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  .founding-terms-agree.is-nudged {
    animation: none;
  }
}

@media (min-width: 620px) {
  .founding-plan-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

@media (max-width: 560px) {
  .dialog-card--founding {
    padding: var(--space-4);
  }

  .founding-terms-footer {
    bottom: calc(-1 * var(--space-4));
    margin: 0 calc(-1 * var(--space-4)) calc(-1 * var(--space-4));
    padding: var(--space-3) var(--space-4) var(--space-4);
  }

  .founding-terms-actions {
    flex-direction: column-reverse;
  }

  .founding-terms-actions .button {
    width: 100%;
  }
}

.theme-option-list {
  display: grid;
  gap: var(--space-3);
}

.theme-option {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  background: var(--surface-strong);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  transition:
    border-color var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease),
    transform var(--duration) var(--ease);
}

.theme-option:hover {
  border-color: var(--amber-300);
  transform: translateY(-1px);
}

.theme-option.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--amber-100);
}

.theme-option__swatch {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 12px;
}

.theme-option__swatch[data-theme-swatch="emerald"] {
  background: linear-gradient(135deg, #0e6b5c, #0a5147);
}

.theme-option__swatch[data-theme-swatch="amber"] {
  background: linear-gradient(135deg, #e9b949, #b98624);
}

.theme-option__swatch[data-theme-swatch="indigo"] {
  background: linear-gradient(135deg, #081d71, #061655);
}

.theme-option__text {
  display: grid;
  flex: 1 1 auto;
  gap: 0.15rem;
}

.theme-option__text small {
  color: var(--muted);
  font-size: 0.76rem;
}

.theme-option__check {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity var(--duration) var(--ease);
}

.theme-option.is-selected .theme-option__check {
  opacity: 1;
}

.quick-preset {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}

.quick-preset__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.quick-preset__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}

.quick-preset__manage {
  font-size: 0.78rem;
  color: var(--accent);
  padding: 0.2rem 0.5rem;
}

.quick-preset-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.quick-preset-empty {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.quick-preset-chip {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.75rem;
  background: var(--surface-strong);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  transition:
    border-color var(--duration) var(--ease),
    transform var(--duration) var(--ease);
}

.quick-preset-chip:hover {
  border-color: var(--amber-300);
  transform: translateY(-1px);
}

.quick-preset-chip__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-align: left;
}

.quick-preset-chip__text b {
  font-size: 0.82rem;
}

.quick-preset-chip__text small {
  color: var(--muted);
  font-size: 0.7rem;
}

.quick-preset-chip__pin {
  width: 1.1rem;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
  color: var(--muted);
}

.quick-preset-chip__pin.is-pinned {
  color: var(--accent);
}

.quick-preset.is-editing .quick-preset-chip {
  border-style: dashed;
}

.quick-preset-editor {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
}

.quick-preset-editor__hint {
  margin: 0;
  font-size: 0.74rem;
  color: var(--muted);
}

.quick-preset-editor__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.quick-preset-editor__row select {
  flex: 1 1 140px;
}

.voice-entry {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}

.voice-entry__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.65rem 1rem;
  background: var(--accent-bright);
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--accent-ink);
  transition:
    background-color var(--duration) var(--ease),
    border-color var(--duration) var(--ease),
    color var(--duration) var(--ease);
}

.voice-entry__button svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.voice-entry__button:hover {
  background: var(--accent-strong);
}

.voice-entry__button.is-listening {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--accent-ink);
  animation: voice-entry-pulse 1.2s ease-in-out infinite;
}

@keyframes voice-entry-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

.voice-entry__hint {
  margin: 0;
  font-size: 0.76rem;
  color: var(--muted);
}

.voice-confirm {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
}

.voice-confirm__transcript {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}

/* 2026-10-06 調整：語音記帳確認卡片不再有自己的金額欄位（金額直接寫回上方
   表單本體的金額欄位），這裡加一行小提示文字告訴使用者金額去哪裡找了。 */
.voice-confirm__hint {
  margin: 0;
  font-size: 0.76rem;
  color: var(--muted);
}

.voice-confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* ===== 「選擇店家」視窗：附近店家＋重新定位（2026-10-12）===== */
.place-picker-nearby {
  display: grid;
  gap: var(--space-3);
}

.place-picker-nearby__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.place-picker-nearby__head > div {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.place-picker-nearby__head strong {
  font-size: 0.95rem;
}

.place-picker-nearby__head span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.place-relocate-button {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.35rem;
  min-height: 40px;
  padding-inline: 0.8rem;
  font-size: 0.82rem;
  white-space: nowrap;
}

.place-relocate-button svg {
  width: 18px;
  height: 18px;
}

.place-relocate-button[aria-busy="true"] svg {
  animation: place-relocate-spin 1.2s linear infinite;
}

@keyframes place-relocate-spin {
  to {
    transform: rotate(360deg);
  }
}

#place-nearby-list {
  max-height: 40vh;
  overflow-y: auto;
}

#place-nearby-list .nearby-place,
#place-search-list .nearby-place {
  background: var(--surface-strong);
  border: 1px solid var(--line);
}

/* 「選擇店家」視窗裡的地址允許換行（最多兩行），不再截掉。 */
#place-nearby-list .nearby-place span,
#place-search-list .nearby-place span {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.45;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.place-search-row button {
  white-space: nowrap;
}

.nearby-place.is-selected {
  border-color: var(--accent);
  background: var(--amber-50);
}

.nearby-place.is-selected strong::after {
  content: "・目前選擇";
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 650;
}

.place-picker-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.place-picker-divider::before,
.place-picker-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

@media (prefers-reduced-motion: reduce) {
  .place-relocate-button[aria-busy="true"] svg {
    animation: none;
  }
}

.place-search-row {
  display: flex;
  gap: var(--space-2);
}

.place-search-row input {
  flex: 1 1 auto;
  min-width: 0;
}

.location-actions {
  display: flex;
  gap: var(--space-2);
}

.location-actions .button--location {
  flex: 4 1 0%;
  min-width: 0;
}

.button--location-search {
  flex: 1 1 0%;
  min-width: 52px;
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

.button--location-search svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.merchant-field-row {
  display: flex;
  gap: var(--space-2);
}

.merchant-field-row input {
  flex: 1 1 auto;
  min-width: 0;
}

.button--field-search {
  flex: 0 0 48px;
  width: 48px;
  padding-left: 0;
  padding-right: 0;
}

.button--field-search svg {
  width: 20px;
  height: 20px;
}

.button--field-locate {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding-left: 0.7rem;
  padding-right: 0.7rem;
  font-size: 0.82rem;
  color: var(--accent-strong);
  background: var(--amber-50);
  border-color: var(--amber-300);
}

.button--field-locate svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.button--field-locate:hover {
  background: var(--amber-100);
  border-color: var(--accent-bright);
}

.merchant-location-hint {
  margin: var(--space-1) 0 0;
  font-size: 0.76rem;
  color: var(--muted);
}

.quick-receipt-disclosure {
  overflow: hidden;
  border: 1px solid var(--carbon-150);
  border-radius: var(--radius-sm);
}

.quick-receipt-disclosure__toggle {
  display: flex;
  width: 100%;
  min-height: 46px;
  align-items: center;
  gap: var(--space-2);
  padding: 0.7rem 0.85rem;
  color: var(--ink);
  background: var(--surface-strong);
  border: 0;
  font-weight: 600;
}

.quick-receipt-disclosure__toggle svg:first-child {
  width: 18px;
  height: 18px;
  color: var(--muted);
}

.quick-receipt-disclosure__toggle span {
  flex: 1;
  text-align: left;
}

.quick-receipt-disclosure__chevron {
  width: 18px;
  height: 18px;
  color: var(--muted);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: transform var(--duration) var(--ease);
}

.quick-receipt-disclosure__toggle[aria-expanded="true"] .quick-receipt-disclosure__chevron {
  transform: rotate(180deg);
}

.quick-receipt-disclosure__body {
  padding: var(--space-3);
  border-top: 1px solid var(--carbon-150);
}

.account-balances-pin-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.5rem 0.85rem;
  border-top: 1px solid var(--carbon-150);
  background: var(--surface-strong);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

.account-balances-pin-row input {
  width: 18px;
  min-height: 18px;
  margin: 0;
  accent-color: var(--primary);
}

.account-balance-list {
  display: grid;
}

.account-balance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

.account-balance-row + .account-balance-row {
  border-top: 1px solid var(--carbon-150);
}

.account-balance-row__name {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.account-balance-row__name strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-balance-row__type {
  color: var(--muted);
  font-size: 0.72rem;
}

.account-balance-row__amount {
  flex: 0 0 auto;
  font-weight: 720;
  white-space: nowrap;
}

/* 各帳戶餘額：跟上面「最近記錄／預算使用狀態」拉開距離，並改成綠底白字＋提示文字，
   避免像過去那樣跟其他區塊黏在一起、顏色又不夠跳，容易被使用者整個忽略掃過去。 */
#account-balances-disclosure {
  margin: var(--space-6) 0;
  border-color: var(--accent);
}

#account-balances-toggle {
  color: var(--accent-ink);
  background: var(--accent);
  transition:
    background-color var(--duration) var(--ease),
    transform var(--duration) var(--ease);
}

#account-balances-toggle:hover {
  background: var(--accent-strong);
}

#account-balances-toggle:active {
  transform: translateY(1px);
}

#account-balances-toggle svg {
  color: var(--accent-ink);
}

/* 2026-10-09 新增：總覽頁「所有功能」下拉選單按鈕，視覺比照上面「各帳戶餘額」同一組強調色樣式，
   作為頁面上最主要的功能入口，用跟「各帳戶餘額」一樣的強調色背景保持視覺一致、也更顯眼。 */
#overview-quickmenu-toggle {
  color: var(--accent-ink);
  background: var(--accent);
  transition:
    background-color var(--duration) var(--ease),
    transform var(--duration) var(--ease);
}

#overview-quickmenu-toggle:hover {
  background: var(--accent-strong);
}

#overview-quickmenu-toggle:active {
  transform: translateY(1px);
}

#overview-quickmenu-toggle svg {
  color: var(--accent-ink);
}

/* 2026-10-09 新增：補上跟其他區塊一致的下方留白，原本這個下拉選單跟下面「本月可用餘額」卡片
   中間沒有間距，緊貼在一起，看起來太擠。 */
#overview-quickmenu-disclosure {
  margin-bottom: var(--space-4);
}

#account-balances-toggle .account-balances-hint {
  flex: 0 0 auto;
  color: var(--accent-ink);
  font-size: 0.76rem;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
  opacity: 0.88;
}

/* 2026-10-09 新增：總覽頁「所有功能」下拉選單，提示文字樣式比照上面「各帳戶餘額」那一條。 */
#overview-quickmenu-toggle .account-balances-hint {
  flex: 0 0 auto;
  color: var(--accent-ink);
  font-size: 0.76rem;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
  opacity: 0.88;
}

@media (max-width: 420px) {
  .segmented--full button {
    padding-inline: 0.35rem;
    font-size: 0.88rem;
  }
}

.category-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.category-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 90px;
  padding: var(--space-4);
  text-align: left;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition:
    border-color var(--duration) var(--ease),
    background-color var(--duration) var(--ease),
    transform var(--duration) var(--ease);
}

.category-item:hover {
  background: var(--amber-50);
  border-color: var(--amber-300);
  transform: translateY(-1px);
}

.category-item span {
  font-weight: 750;
}

.category-item__icon {
  display: flex;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--accent-strong);
  background: var(--amber-50);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

.category-item__icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.category-item small {
  margin-top: auto;
  color: var(--muted);
}

.category-item.is-disabled {
  opacity: 0.55;
}

/* 2026-10-17（Lucas 要求）：原本是貼齊螢幕邊緣的全寬底色條，改成跟桌機側欄同色（var(--primary)，
   深色）、四邊都留白距的「浮動藥丸」，風格參考 Lucas 提供的截圖（深色膠囊底排＋獨立浮起的圓形
   新增鈕），視覺上更像一個懸浮在畫面上的工具列，而不是貼底的分隔列。 */
.mobile-nav {
  position: fixed;
  right: max(0.9rem, env(safe-area-inset-right));
  bottom: max(0.9rem, env(safe-area-inset-bottom));
  left: max(0.9rem, env(safe-area-inset-left));
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  min-height: 62px;
  padding: 0.3rem 0.35rem;
  background: var(--primary);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 14px 34px rgb(25 26 24 / 30%);
}

.mobile-nav button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 48px;
  padding: 0.4rem 0.2rem;
  color: rgb(255 255 255 / 62%);
  background: transparent;
  border: 0;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 730;
}

.nav-icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.mobile-nav button.is-active {
  color: var(--accent-bright);
}

/* 「＋」新增記帳鈕獨立浮在藥丸上方，用頁面底色（var(--bg)）描一圈邊框，製造「跟底排脫開、
   單獨懸浮」的效果，跟截圖參考的風格一致；底色換成 --accent-bright（亮色）才能在深色藥丸＋
   淺色背景中間都夠顯眼。 */
.mobile-nav .mobile-nav__add {
  width: 56px;
  height: 56px;
  min-height: 56px;
  margin-inline: auto;
  color: var(--primary);
  background: var(--accent-bright);
  border: 4px solid var(--bg);
  border-radius: 50%;
  font-size: 1.8rem;
  line-height: 1;
  transform: translateY(-28px);
  box-shadow: 0 10px 24px rgb(25 26 24 / 32%);
}

.dialog {
  width: min(100% - 1.25rem, 650px);
  max-height: calc(100dvh - 1.25rem);
  padding: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
}

.dialog::backdrop {
  background: rgb(25 26 24 / 56%);
  backdrop-filter: blur(3px);
}

.dialog[open] {
  animation: dialog-in 200ms var(--ease);
}

@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.99);
  }
}

.dialog-card {
  display: grid;
  gap: var(--space-5);
  max-height: calc(100dvh - 1.25rem);
  padding: var(--space-5);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

/* 2026-10-18 新增：群組詳情標題列要同時放「分帳日誌」跟「關閉」兩顆圓形圖示按鈕，
   用這個包住，.dialog-header 原本的 justify-content: space-between 才能繼續把
   這一組按鈕整體推到最右邊，不影響其他只有一顆關閉鈕的對話框。 */
.dialog-header__actions {
  display: flex;
  flex-shrink: 0;
  align-items: flex-start;
  gap: 0.5rem;
}

.dialog-header h2 {
  margin: 0;
}

.close-button {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  color: var(--ink);
  background: rgb(25 26 24 / 8%);
  border: 0;
  border-radius: 50%;
  font-size: 1.6rem;
  line-height: 1;
}

/* 2026-10-09 新增：總覽頁「所有功能」下拉選單展開後的內容，改用簡約圖示方格（不是卡片清單），
   拿掉說明文字、邊框、底色跟箭頭，降低視覺雜訊，看起來更簡約、有質感。 */
.quickmenu-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4) var(--space-1);
  padding-top: var(--space-1);
}

.quickmenu-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: var(--space-2) 0.2rem;
  color: inherit;
  text-align: center;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  transition: background-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.quickmenu-grid__item:hover .quickmenu-grid__icon,
.quickmenu-grid__item:focus-visible .quickmenu-grid__icon {
  color: var(--accent-strong);
  background: var(--amber-50);
}

.quickmenu-grid__item:active {
  transform: translateY(1px);
}

/* 2026-10-12：原本是淺綠底圓形裡放一個中文字，改成跟側邊欄同一套線條圖示。
   2026-10-13：Lucas 確認模擬圖後改成無框、圖示放大（約 34px）；點擊／滑過時才淡淡亮一個圓形底當回饋。 */
.quickmenu-grid__icon {
  position: relative;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  color: var(--accent);
  background: transparent;
  border: 0;
  border-radius: 50%;
  transition: color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

.quickmenu-grid__icon .menu-icon {
  width: 34px;
  height: 34px;
  stroke-width: 1.5;
}

.quickmenu-grid__item:active .quickmenu-grid__icon {
  background: var(--amber-100);
}

.menu-icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.quickmenu-grid__icon .recurring-due-badge {
  position: absolute;
  top: 0;
  right: 0;
  margin-left: 0;
  border: 2px solid var(--surface);
}

.quickmenu-grid__label {
  max-width: 100%;
  overflow: hidden;
  color: var(--carbon-700);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ===== 新手導覽（Driver.js 套件樣式覆蓋，套用 JOHN'S 品牌色與字體、跟其他彈窗視覺一致）===== */
.driver-popover.onboarding-popover {
  max-width: 320px;
  padding: var(--space-5);
  color: var(--ink);
  font-family: inherit;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.onboarding-popover .driver-popover-title {
  margin: 0 0 var(--space-2);
  color: var(--ink);
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 760;
  line-height: 1.4;
}

.onboarding-popover .driver-popover-description {
  margin: 0;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.65;
}

.onboarding-popover .driver-popover-footer {
  margin-top: var(--space-4);
}

.onboarding-popover .driver-popover-progress-text {
  color: var(--muted);
  font-family: inherit;
  font-size: 0.78rem;
}

.onboarding-popover .driver-popover-navigation-btns button {
  min-height: 40px;
  padding: 0.6rem 1.1rem;
  font-family: inherit;
  font-weight: 720;
  font-size: 0.88rem;
  text-shadow: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: background-color var(--duration) var(--ease);
}

.onboarding-popover .driver-popover-next-btn {
  color: var(--accent-ink);
  background: var(--accent-bright);
}

.onboarding-popover .driver-popover-next-btn:hover,
.onboarding-popover .driver-popover-next-btn:focus {
  background: var(--accent-strong);
}

.onboarding-popover .driver-popover-close-btn {
  top: var(--space-3);
  right: var(--space-3);
  color: var(--muted);
  font-size: 1.3rem;
}

.onboarding-popover .driver-popover-close-btn:hover,
.onboarding-popover .driver-popover-close-btn:focus {
  color: var(--ink);
}

/* 箭頭跟彈窗本體是不同的 DOM 元素，driver.js 不會把 popoverClass 套到箭頭上，
   所以這裡直接覆蓋套件原本的全域箭頭 class（這個 App 同時間只會有一組新手導覽樣式，
   不需要額外用 .onboarding-popover 限定範圍）。 */
.driver-popover-arrow-side-left {
  border-left-color: var(--surface);
}

.driver-popover-arrow-side-right {
  border-right-color: var(--surface);
}

.driver-popover-arrow-side-top {
  border-top-color: var(--surface);
}

.driver-popover-arrow-side-bottom {
  border-bottom-color: var(--surface);
}

/* 修正：新手導覽（Driver.js）流程中途開啟「設定精靈」dialog 時會卡死的問題。
   Driver.js 的 disableActiveInteraction 會在 body.driver-active 存在期間，
   對整個頁面套用 .driver-active *{pointer-events:none}（只留 .driver-active-element
   與 .driver-popover 兩種元素可互動）。設定精靈是另外用原生 <dialog>.showModal() 開啟，
   雖然瀏覽器會把它畫在最上層（top layer），但它在 DOM 結構上仍然是 body 的子孫節點，
   所以一樣會被那條全域規則蓋到，導致整個視窗完全無法點擊、也無法關閉。
   這裡明確把設定精靈 dialog 本身與其所有子元素排除在那條規則之外即可。 */
.driver-active #setup-wizard-dialog,
.driver-active #setup-wizard-dialog *,
/* 2026-10-12：精靈最後一步選「開始規劃」會接著開預算規劃視窗，導覽此時還在進行中，一併排除。 */
.driver-active #budget-dialog,
.driver-active #budget-dialog * {
  pointer-events: auto !important;
}


/* 2026-10-17（Lucas 要求，取代 2026-10-12 的清單版本）：「更多功能」選單原本是一份細線分隔的
   直式清單（圖示＋中文標題＋說明文字＋箭頭），8 個項目在手機上要捲動一長串才看得完；改成深色
   4x2 圖示方格（風格參考 Lucas 提供的截圖），視覺上跟桌機側欄（同樣是 var(--primary) 深色）配成
   一對。方格本身只有圖示＋中文標題，一眼就看完全部 8 個，不用捲動；原本清單版本的說明文字沒有
   丟掉，搬到每個方格右上角的獨立「i」按鈕裡，點了用既有的 appAlert() 彈出說明，不會觸發進入功能
   （HTML 結構見 index.html，`.mobile-more-tile` 包著並排的 `__button`／`__info` 兩顆按鈕，不是
   巢狀按鈕）。整個對話框改成深色主題，見下面 .dialog-card--mobile-more 的覆蓋規則。 */
.dialog-card--mobile-more {
  color: white;
  background: var(--primary);
}

.dialog-card--mobile-more .eyebrow {
  color: rgb(255 255 255 / 55%);
}

.dialog-card--mobile-more .dialog-header h2 {
  color: white;
}

.dialog-card--mobile-more .close-button {
  color: white;
  background: rgb(255 255 255 / 14%);
}

.dialog-card--mobile-more .app-footer-panel .app-footer__version {
  color: rgb(255 255 255 / 70%);
}

.dialog-card--mobile-more .app-footer-panel .app-footer__copyright {
  color: rgb(255 255 255 / 42%);
}

.mobile-more-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4) var(--space-2);
}

.mobile-more-tile {
  position: relative;
  min-width: 0;
}

.mobile-more-tile__button {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: var(--space-3) 0.2rem var(--space-2);
  color: white;
  text-align: center;
  background: rgb(255 255 255 / 9%);
  border: 0;
  border-radius: var(--radius-md);
  transition: background-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.mobile-more-tile__button:hover,
.mobile-more-tile__button:focus-visible {
  background: rgb(255 255 255 / 16%);
}

.mobile-more-tile__button:active {
  transform: translateY(1px);
}

.mobile-more-tile__icon {
  position: relative;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: var(--accent-bright);
}

.mobile-more-tile__icon .menu-icon {
  width: 26px;
  height: 26px;
  stroke-width: 1.6;
}

.mobile-more-tile__icon .recurring-due-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  margin-left: 0;
  border: 2px solid var(--primary);
}

.mobile-more-tile__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.2rem;
  min-height: 3em;
  max-width: 100%;
  color: white;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
}

.mobile-more-tile__label .mobile-more-item__beta-badge {
  flex-shrink: 0;
  color: #10291f;
}

/* 跟方塊按鈕並排（不是疊在裡面），絕對定位疊在方塊右上角，單獨可以點——點這顆不會觸發
   .mobile-more-tile__button 的 data-view 導航，只會跳出說明，見 app.js 的點擊事件委派。 */
.mobile-more-tile__info {
  position: absolute;
  top: -5px;
  right: -5px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: white;
  background: rgb(255 255 255 / 22%);
  border: 2px solid var(--primary);
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 800;
  font-style: italic;
  line-height: 1;
}

.mobile-more-tile__info:hover,
.mobile-more-tile__info:focus-visible {
  color: var(--accent-ink);
  background: var(--accent-bright);
}

/* 2026-10-17：手機版「更多功能」選單裡標示「好友分帳」還在測試階段的小標籤（Lucas 要求，原本是
   New，改成 Beta，跟分帳頁面標題旁的版本標籤共用同一套視覺語言）。方格版繼續沿用同一個 class。 */
.mobile-more-item__beta-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.05rem 0.42rem;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: var(--accent-bright);
  border-radius: 999px;
}

/* 2026-10-17：分帳頁面標題（#split-heading）旁的「Beta v1.0」版本標籤（Lucas 要求）。分帳功能還在
   持續開發中（Sprint 1+2 已上線，Sprint 3 新增分帳記帳表單、Sprint 4 結算頁都還沒做），之後每次
   新增或更新分帳功能，記得把 index.html 裡這個標籤的文字（目前是 "Beta v1.0"）往上加版號——
   這個版號只代表「分帳功能本身」的進度，跟頁尾 app.js 的 ?v= 版本號是兩回事，不要搞混。
   版本號建議對應：Sprint 3 上線 → v1.1，Sprint 4 上線 → v1.2，Sprint 5（打磨完成、正式脫離 Beta）
   → 拿掉 Beta 字樣、改成 v2.0。詳細規則見 DEPLOY_CHECKLIST.md。 */
.split-version-badge {
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-2);
  padding: 0.1rem 0.55rem;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: 0.02em;
  white-space: nowrap;
  vertical-align: middle;
  background: var(--accent-bright);
  border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
  .quickmenu-grid__icon,
  .mobile-more-tile__button {
    transition: none;
  }
}

.dialog-card--photo {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--space-3);
  background: var(--carbon-900);
}

.dialog-card--photo img {
  max-width: 100%;
  max-height: calc(100dvh - 2.5rem);
  border-radius: var(--radius-md);
}

.dialog-card--photo .close-button {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: rgb(255 255 255 / 92%);
}

.install-tutorial-inapp-notice {
  padding: var(--space-3);
  background: var(--soft-amber);
  border-radius: var(--radius-sm);
  color: var(--warning-ink);
  font-size: 0.85rem;
  line-height: 1.6;
}

.install-tutorial-inapp-notice[hidden] {
  display: none;
}

.install-tutorial-steps {
  display: grid;
  gap: var(--space-4);
}

.install-tutorial-steps[hidden] {
  display: none;
}

.install-tutorial-step {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: flex-start;
  gap: var(--space-3);
}

.install-tutorial-step__num {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 50%;
  font-weight: 800;
  font-size: 0.85rem;
}

.install-tutorial-step__body strong {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.2rem;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 750;
}

.install-tutorial-step__body strong svg {
  flex: 0 0 auto;
  color: var(--accent);
}

.install-tutorial-step__body p {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.6;
}

.install-tutorial-android-notice {
  padding: var(--space-3);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.6;
}

.install-tutorial-android-notice[hidden] {
  display: none;
}

.amount-field {
  padding: var(--space-5);
  background: var(--primary);
  border-radius: var(--radius-md);
}

.amount-field__head {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.amount-field__head > label {
  color: rgb(255 255 255 / 70%);
  font-weight: 700;
}

.amount-calculator-trigger {
  min-width: 76px;
  min-height: 44px;
  padding: 0.55rem 0.8rem;
  color: white;
  background: rgb(255 255 255 / 12%);
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: var(--radius-sm);
  font-weight: 750;
}

.amount-calculator-trigger:hover,
.amount-calculator-trigger:focus-visible,
.amount-calculator-trigger[aria-expanded="true"] {
  background: rgb(255 255 255 / 20%);
}

.amount-input {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.amount-input b {
  color: var(--accent-bright);
  font-size: 1.15rem;
}

.amount-input input {
  min-width: 0;
  padding: 0;
  color: white;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: clamp(2rem, 8vw, 3.5rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.amount-input input::placeholder {
  color: rgb(255 255 255 / 44%);
}

.amount-field--compact .amount-input input {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
}

.calculator-panel {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgb(25 26 24 / 10%);
}

.calculator-panel[hidden] {
  display: none;
}

.calculator-display {
  display: grid;
  min-height: 78px;
  align-content: center;
  justify-items: end;
  padding: var(--space-3) var(--space-4);
  overflow: hidden;
  color: white;
  background: var(--primary);
  border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
}

.calculator-display span {
  width: 100%;
  overflow: hidden;
  color: rgb(255 255 255 / 68%);
  font-size: 0.82rem;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calculator-display output {
  max-width: 100%;
  overflow: hidden;
  font-size: clamp(1.55rem, 7vw, 2.2rem);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calculator-keypad {
  display: grid;
  grid-template-columns: repeat(4, minmax(44px, 1fr));
  gap: var(--space-2);
}

.calculator-keypad button {
  min-height: 48px;
  padding: 0.5rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 1.08rem;
  font-weight: 750;
}

.calculator-keypad button:hover,
.calculator-keypad button:focus-visible {
  background: var(--amber-50);
  border-color: var(--amber-100);
}

.calculator-keypad [data-calculator-value="÷"],
.calculator-keypad [data-calculator-value="×"],
.calculator-keypad [data-calculator-value="−"],
.calculator-keypad [data-calculator-value="+"] {
  color: var(--primary-strong);
  background: var(--income-soft);
}

.calculator-key--equals {
  grid-row: span 2;
  color: var(--accent-ink) !important;
  background: var(--accent-bright) !important;
  border-color: transparent !important;
}

.calculator-key--wide {
  grid-column: span 2;
}

.calculator-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.reconciliation-form {
  gap: var(--space-4);
}

.reconciliation-recorded-balance,
.reconciliation-account-preview,
.reconciliation-difference {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.reconciliation-recorded-balance span,
.reconciliation-account-preview span,
.reconciliation-difference span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.reconciliation-recorded-balance strong,
.reconciliation-account-preview strong,
.reconciliation-difference strong {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

.reconciliation-account-preview small,
.reconciliation-difference small {
  color: var(--muted);
  line-height: 1.5;
}

.reconciliation-difference[data-state="expense"] {
  background: var(--expense-soft);
  border-color: rgb(169 79 69 / 28%);
}

.reconciliation-difference[data-state="expense"] strong {
  color: var(--danger);
}

.reconciliation-difference[data-state="income"],
.reconciliation-difference[data-state="balanced"] {
  background: var(--income-soft);
  border-color: rgb(26 112 91 / 24%);
}

.reconciliation-difference[data-state="income"] strong,
.reconciliation-difference[data-state="balanced"] strong {
  color: var(--income-green);
}

@media (max-width: 440px) {
  .calculator-panel {
    padding: var(--space-3);
  }

  .calculator-actions .button {
    flex: 1;
  }

  .reconciliation-form .dialog-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .reconciliation-form .dialog-actions .button {
    width: 100%;
  }
}

.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--space-4);
}

.expense-context {
  display: grid;
  gap: var(--space-4);
}

/* 2026-10-10 新增：快速記帳模式的欄位卡片化（取代原本的「1 額・2 定・3 傳」精靈模式）。
   Lucas 手繪標出想要的欄位順序，並要求「每個區塊獨立出來」「標題用 STEP.01 斷行呈現」，
   所以把欄位依照他畫的分組（金額／店家／語音記帳＋備註、日期時間／付款帳戶／分類、
   照片／固定收支）各自包進一張卡片，卡片裡每個欄位之間再用細線隔開，避免整頁欄位黏在一起。
   實際把哪些欄位搬進哪張卡片，由 app.js 的 applyEntryWizardMode() 處理。 */
.step-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-4) var(--space-5);
  background: var(--surface-strong);
  border: 1px solid var(--carbon-150);
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 18px rgb(25 26 24 / 5%);
}

.step-card__heading {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--carbon-150);
}

.step-card__num {
  color: var(--accent-strong);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

/* 卡片裡的欄位彼此用細線隔開；緊接在標題（.step-card__heading）後面那個欄位不用再加一條線，
   因為標題底下已經有自己的分隔線了，兩條線疊在一起會太粗。 */
.step-card > *:not(.step-card__heading) + * {
  padding-top: var(--space-4);
  border-top: 1px solid var(--carbon-150);
}

.receipt-block {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--ivory-300);
  border-radius: var(--radius-md);
}

.receipt-actions,
.receipt-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.receipt-actions p {
  margin: var(--space-1) 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

.receipt-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  flex: 0 0 auto;
}

.file-button {
  flex: 0 0 auto;
  cursor: pointer;
}

.file-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.receipt-preview {
  justify-content: flex-start;
  padding: var(--space-3);
  background: var(--surface-strong);
  border-radius: var(--radius-sm);
}

.receipt-preview img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 7px;
  cursor: pointer;
}

.receipt-preview div {
  display: grid;
}

.receipt-preview small {
  margin-top: var(--space-1);
  color: var(--muted);
}

.receipt-source-card {
  gap: var(--space-4);
}

.receipt-source-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.receipt-source-actions > button {
  display: grid;
  min-width: 0;
  min-height: 132px;
  align-content: center;
  justify-items: center;
  gap: 10px;
  padding: 18px 12px;
  color: var(--ink);
  font: inherit;
  text-align: center;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 18px;
  cursor: pointer;
}

.receipt-source-actions > button:first-child {
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
}

.receipt-source-actions svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.receipt-source-actions span {
  display: grid;
  gap: 4px;
}

.receipt-source-actions strong {
  font-size: 0.96rem;
}

.receipt-source-actions small {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.4;
}

@media (max-width: 430px) {
  .transaction-item.has-receipt-thumb {
    grid-template-columns: minmax(0, 1fr) 42px auto;
    gap: 10px;
  }

  .transaction-receipt-thumb {
    width: 42px;
    height: 42px;
    border-radius: 9px;
  }

  .receipt-source-actions {
    grid-template-columns: 1fr;
  }

  .receipt-source-actions > button {
    min-height: 88px;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    text-align: left;
  }
}

.location-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  color: var(--ink);
  background: var(--ivory-300);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
}

.location-card__header,
.location-result,
.nearby-merchants__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.location-card__header {
  align-items: center;
}

.location-badge {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 2px;
  color: var(--primary);
  background: transparent;
  border: 0;
  border-radius: 999px;
}

.location-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.location-heading strong {
  font-size: 0.88rem;
}

.location-chip__label {
  max-width: 0;
  margin-left: 0;
  overflow: hidden;
  font-size: 0.82rem;
  font-weight: 760;
  opacity: 0;
  white-space: nowrap;
  transition:
    max-width var(--duration) var(--ease),
    margin var(--duration) var(--ease),
    opacity var(--duration) var(--ease);
}

.location-badge.is-expanded .location-chip__label {
  max-width: 8rem;
  margin: 0 var(--space-2);
  opacity: 1;
}

.location-mark {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  color: var(--primary);
}

.location-mark svg,
.button--location svg,
.location-state-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.location-badge {
  min-width: 44px;
  justify-content: center;
  color: var(--muted);
}

.location-badge.is-success {
  color: var(--accent-bright);
  animation: location-confirm 220ms var(--ease);
}

.location-badge.is-error {
  color: var(--danger);
}

.location-state-icon {
  display: none;
}

.location-badge.is-idle .location-state-icon--idle,
.location-badge.is-loading .location-state-icon--loading,
.location-badge.is-success .location-state-icon--success,
.location-badge.is-error .location-state-icon--error {
  display: block;
}

.location-badge.is-loading .location-state-icon--loading {
  animation: location-spin 0.8s linear infinite;
}

.button--location {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 52px;
  color: var(--primary);
  background: rgb(14 107 92 / 50%);
  border-color: rgb(10 81 71 / 18%);
}

.button--location:hover {
  background: rgb(14 107 92 / 68%);
}

.button--location svg {
  opacity: 0.5;
}

.button--location:disabled {
  cursor: wait;
  opacity: 0.7;
}

.location-result {
  min-height: 0;
  justify-content: flex-end;
}

.selected-place {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  width: 100%;
  min-height: 66px;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  color: var(--ink);
  text-align: left;
  background: rgb(255 255 255 / 62%);
  border: 1px solid rgb(25 26 24 / 10%);
  border-radius: var(--radius-sm);
  animation: selected-place-in 240ms var(--ease);
}

.selected-place:hover {
  border-color: rgb(25 26 24 / 24%);
}

.selected-place__icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: var(--primary);
  background: rgb(14 107 92 / 50%);
  border-radius: 50%;
  font-weight: 850;
}

.selected-place__content {
  display: grid;
  min-width: 0;
  gap: 0.08rem;
}

.selected-place__content small,
.selected-place__content span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 560;
}

.selected-place__content strong {
  overflow: hidden;
  font-size: 0.88rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selected-place__chevron {
  width: 20px;
  height: 20px;
  color: var(--muted);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: transform var(--duration) var(--ease);
}

.selected-place[aria-expanded="true"] .selected-place__chevron {
  transform: rotate(180deg);
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@keyframes location-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes location-confirm {
  50% {
    transform: scale(1.06);
  }
}

@keyframes selected-place-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

.nearby-merchants {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid rgb(25 26 24 / 10%);
}

.nearby-merchants__head span {
  color: var(--muted);
  font-size: 0.72rem;
  text-align: right;
  overflow-wrap: anywhere;
}

.template-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.template-pills button {
  min-height: 40px;
  padding: 0.5rem 0.75rem;
  color: var(--income-green);
  background: var(--income-soft);
  border: 1px solid rgb(52 115 91 / 20%);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 720;
}

.nearby-list {
  display: grid;
  /* 2026-10-12：清單有高度上限可捲動時，每一列固定用內容高度，避免地址那行被壓扁遮住。 */
  grid-auto-rows: max-content;
  align-content: start;
  gap: var(--space-2);
}

.nearby-place {
  display: grid;
  width: 100%;
  min-height: 56px;
  gap: 0.2rem;
  padding: 0.75rem 0.85rem;
  color: var(--ink);
  text-align: left;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition:
    transform var(--duration) var(--ease),
    border-color var(--duration) var(--ease);
}

.nearby-place:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.nearby-place strong {
  font-size: 0.88rem;
}

.nearby-place span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nearby-empty {
  margin: 0;
  padding: var(--space-3);
  color: var(--muted);
  background: rgb(255 255 255 / 54%);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  line-height: 1.5;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding-top: var(--space-2);
}

.confirm-dialog-message {
  margin: 0;
  color: var(--ink);
  line-height: 1.6;
  white-space: pre-line;
}

/* ===== 預算配置視窗（2026-10-12 改版・高端版）=====
   原則：留白、細線、字級層次取代色塊；顏色只當小色標。 */
#budget-dialog .dialog-card {
  gap: var(--space-6);
}

.budget-base-field {
  display: grid;
  gap: 0.35rem;
  padding: 0 0 var(--space-5);
  border-bottom: 1px solid var(--line);
}

.budget-base-field__label {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.08em;
}

.budget-base-field__input {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.budget-base-field__input b {
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.budget-base-field__input input {
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: clamp(2.25rem, 9vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.budget-base-field__input input:focus-visible {
  outline: none;
}

.budget-base-field:focus-within {
  border-bottom-color: var(--ink);
}

.budget-planner-section {
  display: grid;
  gap: var(--space-3);
}

.budget-planner-section__title {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.12em;
}

.template-pills--segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 3px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.template-pills--segmented button {
  min-height: 40px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 9px;
  font-size: 0.85rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}

.template-pills--segmented button:hover {
  color: var(--ink);
}

.template-pills--segmented button.is-active {
  color: var(--ivory-100);
  background: var(--carbon-900);
}

.allocation-bar {
  display: flex;
  height: 6px;
  overflow: hidden;
  gap: 3px;
  border-radius: 999px;
}

.allocation-bar span {
  min-width: 3px;
  border-radius: 999px;
  transition: flex-grow var(--duration) var(--ease);
}

.allocation-bar .allocation-bar__rest {
  background: var(--line);
}

.allocation-bar.is-over span {
  background: var(--danger) !important;
}

.allocation-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.allocation-row {
  --alloc-color: var(--alloc-1);
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) 0 var(--space-3);
  border-bottom: 1px solid var(--line);
}

.allocation-row__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.allocation-row__swatch {
  flex: none;
  width: 3px;
  height: 18px;
  background: var(--alloc-color);
  border-radius: 2px;
}

.allocation-row .allocation-field--name {
  flex: 1;
  min-width: 0;
}

.allocation-row .allocation-name {
  width: 100%;
  min-height: 40px;
  padding: 0.25rem 0.4rem;
  margin-left: -0.4rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.allocation-row .allocation-name:hover {
  border-color: var(--line);
}

.allocation-row .allocation-name:focus {
  background: var(--surface-strong);
  border-color: var(--carbon-300);
}

.allocation-row .remove-allocation {
  display: grid;
  flex: none;
  width: 40px;
  height: 40px;
  place-items: center;
  color: var(--carbon-300);
  background: transparent;
  border: 0;
  border-radius: 8px;
  transition: color var(--duration) var(--ease);
}

.allocation-row .remove-allocation svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.allocation-row .remove-allocation:hover,
.allocation-row .remove-allocation:focus-visible {
  color: var(--danger);
}

.allocation-row__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-left: calc(3px + 0.6rem);
}

.allocation-row .allocation-field--percent {
  display: flex;
  align-items: center;
  gap: 0;
}

.allocation-row .allocation-field--percent > span:first-child {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.allocation-percent-input {
  display: flex;
  align-items: baseline;
  padding: 0 0.6rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.allocation-percent-input:focus-within {
  border-color: var(--ink);
}

.allocation-percent-input input {
  width: 3ch;
  min-width: 0;
  min-height: 40px;
  padding: 0;
  color: var(--ink);
  text-align: right;
  background: transparent;
  border: 0;
  font-size: 1rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}

.allocation-percent-input input::-webkit-outer-spin-button,
.allocation-percent-input input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.allocation-percent-input input:focus-visible {
  outline: none;
}

.allocation-percent-input b {
  margin-left: 0.15rem;
  color: var(--muted);
  font-weight: 500;
}

.allocation-row__amount {
  display: grid;
  justify-items: end;
}

.allocation-row__amount span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.allocation-row__amount output {
  color: var(--ink);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.allocation-row__advanced {
  padding-left: calc(3px + 0.6rem);
}

.allocation-row__advanced summary {
  display: flex;
  min-height: 36px;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}

.allocation-row__advanced summary::-webkit-details-marker {
  display: none;
}

.allocation-row__advanced summary::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: auto;
  border-right: 1.5px solid var(--carbon-300);
  border-bottom: 1.5px solid var(--carbon-300);
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--duration) var(--ease);
}

.allocation-row__advanced[open] summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.allocation-row__advanced summary:hover {
  color: var(--ink);
}

.allocation-row__summary {
  min-width: 0;
  overflow: hidden;
  color: var(--carbon-500);
  text-overflow: ellipsis;
  font-weight: 500;
}

.allocation-row__summary::before {
  content: "・";
  color: var(--carbon-300);
}

.allocation-row__advanced-body {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-2) 0 var(--space-2);
}

/* 進階設定裡的下拉／勾選框縮成較輕的樣式，不要跟主要欄位搶視覺。 */
.allocation-row__advanced-body select {
  min-height: 40px;
  padding-block: 0.4rem;
  font-size: 0.88rem;
  font-weight: 600;
  background-color: transparent;
}

.allocation-row__advanced-body .check-control {
  min-height: 40px;
  padding: 0.45rem 0.65rem;
  background: transparent;
  font-size: 0.82rem;
  font-weight: 600;
}

.allocation-row__advanced-body .check-control input {
  width: 16px;
  min-height: 16px;
}

.allocation-row .allocation-field--source {
  display: grid;
  gap: 0.3rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 650;
}

.allocation-add {
  justify-self: start;
  min-height: 44px;
  padding: 0 0.25rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  font-size: 0.88rem;
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: var(--carbon-300);
  text-underline-offset: 5px;
}

.allocation-add:hover,
.allocation-add:focus-visible {
  text-decoration-color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .allocation-bar span,
  .template-pills--segmented button,
  .allocation-row .remove-allocation,
  .allocation-row__advanced summary::after {
    transition: none;
  }
}

.allocation-accounts {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-2);
}

.allocation-accounts-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.allocation-account-option {
  min-height: 38px;
  padding: 0.5rem 0.75rem;
  font-weight: 500;
  font-size: 0.85rem;
}

.allocation-account-option input {
  width: 18px;
  min-height: 18px;
}

.allocation-account-option small {
  color: var(--muted);
  font-weight: 400;
}

.allocation-rollover {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.allocation-rollover-target {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.allocation-rollover-target select {
  min-width: 140px;
}

.allocation-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0;
  background: transparent;
  font-variant-numeric: tabular-nums;
}

.allocation-total span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 650;
}

.allocation-total i {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: var(--accent);
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 0.65rem;
  font-style: normal;
  font-weight: 800;
}

.allocation-total strong {
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 700;
}

.allocation-total.is-warning i {
  color: var(--warning);
}

.allocation-total.is-error span,
.allocation-total.is-error strong,
.allocation-total.is-error i {
  color: var(--danger);
}

.form-message {
  min-height: 1.3em;
  margin: -0.5rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

#simple-fields {
  display: grid;
  gap: var(--space-4);
}

.feature-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding-left: 1.25rem;
  line-height: 1.5;
}

.feature-list li::marker {
  color: var(--accent-strong);
}

.demo-note {
  margin: 0;
  padding: var(--space-4);
  color: var(--warning-ink);
  background: var(--soft-amber);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  line-height: 1.55;
}

.toast {
  position: fixed;
  right: var(--space-4);
  bottom: 7rem;
  z-index: 60;
  max-width: min(360px, calc(100% - 2rem));
  padding: var(--space-3) var(--space-4);
  color: white;
  background: var(--primary);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

@media (min-width: 640px) {
  .main-content {
    padding: var(--space-8) var(--space-6) 7.25rem;
  }

  .topbar-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
  }

  /* 2026-10-13 修正：640～959px（平板寬度）時右上角的「記一筆＋頭像」已經出現，但手機版頭像
     原本要到 960px 以上才隱藏，兩個頭像同時出現；「記一筆」也被標題擠到換行。手機版頭像改成
     640px 起就隱藏，「記一筆」固定不換行、不被壓縮。 */
  .topbar-mobile-account {
    display: none;
  }

  #quick-expense {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .balance-card--hero {
    grid-column: 1 / -1;
  }

  /* 2026-10-12：未配置收入改成整列提示卡後，第一列只剩餘額卡＋支出區間，支出區間也改整列避免留空。 */
  .summary-grid > .metric-card--period {
    grid-column: 1 / -1;
  }

  .template-grid,
  .account-grid,
  .budget-summary,
  .investment-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .section-heading--page {
    display: flex;
  }

  .section-heading--page .market-quote-control {
    max-width: 440px;
  }
}

@media (min-width: 960px) {
  .app-shell {
    grid-template-columns: 250px minmax(0, 1fr);
  }

  .sidebar {
    position: sticky;
    top: 0;
    display: flex;
    height: 100dvh;
    flex-direction: column;
    padding: var(--space-6) var(--space-4);
    color: white;
    background: var(--primary);
  }

  .brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-2);
    color: white;
    text-decoration: none;
  }

  .brand-mark {
    display: grid;
    width: 44px;
    height: 44px;
    overflow: hidden;
    place-items: center;
    border-radius: var(--radius-sm);
  }

  .brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .brand strong,
  .brand small {
    display: block;
  }

  .brand small {
    margin-top: 0.1rem;
    color: rgb(255 255 255 / 58%);
    font-size: 0.7rem;
  }

  .nav-list {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-10);
  }

  .nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 48px;
    padding: 0 var(--space-4);
    color: rgb(255 255 255 / 68%);
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    font-weight: 720;
    transition:
      color var(--duration) var(--ease),
      background-color var(--duration) var(--ease);
  }

  .nav-item:hover {
    color: white;
    background: rgb(255 255 255 / 10%);
  }

  .recurring-due-badge {
    display: inline-grid;
    min-width: 20px;
    height: 20px;
    margin-left: auto;
    padding: 0 6px;
    place-items: center;
    color: white;
    background: var(--danger);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
  }

  /* 2026-10-17：桌機側欄「好友分帳」項目的 Beta 標籤，跟手機更多功能選單、分帳頁面標題旁的
     .split-version-badge／.mobile-more-item__beta-badge 用同一套視覺語言（accent-bright 底色、
     白字圓角膠囊），讓三個地方的「還在測試中」提示看起來是同一件事。 */
  .nav-item__beta-badge {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding: 0.1rem 0.5rem;
    color: #fff;
    background: var(--accent-bright);
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.02em;
  }

  .nav-item.is-active {
    color: var(--accent-ink);
    background: var(--accent);
  }

  .sidebar-profile {
    display: flex;
    min-height: 56px;
    align-items: center;
    gap: var(--space-3);
    margin-top: auto;
    padding: var(--space-2);
    color: white;
    text-align: left;
    background: transparent;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: var(--radius-sm);
  }

  .sidebar-profile:hover {
    background: rgb(255 255 255 / 8%);
  }

  .sidebar-profile > span:last-child {
    display: grid;
    min-width: 0;
    gap: 0.1rem;
  }

  .sidebar-profile strong,
  .sidebar-profile small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar-profile small {
    color: rgb(255 255 255 / 56%);
    font-size: 0.68rem;
  }

  .plan-card {
    margin-top: var(--space-3);
    padding: var(--space-4);
    background: rgb(255 255 255 / 8%);
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: var(--radius-md);
  }

  .plan-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: 0.8rem;
  }

  .plan-card .eyebrow {
    margin: 0;
    color: rgb(255 255 255 / 62%);
  }

  .plan-card .progress-track {
    margin: var(--space-3) 0;
    background: rgb(255 255 255 / 14%);
  }

  .plan-card .progress-track > span {
    background: var(--accent);
  }

  .plan-card p {
    margin-bottom: var(--space-4);
    color: rgb(255 255 255 / 64%);
    font-size: 0.74rem;
  }

  /* 2026-10-17 新增：桌機版側邊欄同一張方案卡，圓環＋文字一樣要用紅字跳出來（跟手機版
     .plan-card--mobile .js-plan-warning 同一個邏輯，只是這裡是桌機側邊欄的版型）。桌機側欄
     空間比手機窄，圓環縮小一點避免擠壓說明文字。 */
  .plan-card .js-plan-warning {
    color: #ff8a73;
  }

  .plan-card .countdown-ring__message {
    margin: 0;
    color: #ff8a73;
    font-size: 0.78rem;
  }

  .plan-card .countdown-ring,
  .plan-card .countdown-ring__chart {
    width: 46px;
    height: 46px;
  }

  .app-footer {
    margin-top: var(--space-4);
    padding: 0 var(--space-2);
    text-align: center;
  }

  .app-footer__version {
    margin: 0 0 0.15rem;
    color: rgb(255 255 255 / 70%);
    font-size: 0.72rem;
    font-weight: 700;
  }

  .app-footer__copyright {
    margin: 0;
    color: rgb(255 255 255 / 42%);
    font-size: 0.65rem;
  }

  .main-content {
    padding: var(--space-8);
  }

  .mobile-nav {
    display: none;
  }

  /* 2026-10-09 新增：總覽頁「所有功能」下拉選單只為手機版設計，桌機版左側已經有固定顯示的
     選單（.sidebar），所以在桌機寬度直接隱藏，避免重複。 */
  #overview-quickmenu-disclosure {
    display: none;
  }

  .plan-card--mobile {
    display: none;
  }

  .topbar-brand {
    display: none;
  }

  .summary-grid {
    grid-template-columns: 1.6fr minmax(0, 1fr);
  }

  .balance-card--hero {
    grid-column: auto;
  }

  .summary-grid > .metric-card--period {
    grid-column: auto;
  }

  .content-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  }

  .template-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .account-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .budget-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* 2026-10-10：「所有記帳」頁只有收入總計／支出總計兩張卡片，共用的 .budget-summary
     在寬螢幕下固定切成 3 欄（給收支平衡表／預算頁 3 張卡片用），套用在這裡會讓 2 張卡片
     只占滿 2/3、右邊留一大塊空白，看起來沒有隨畫面變寬自適應放大。這裡用 id 選擇器
     （優先權本來就高於 .budget-summary 這個 class）讓這兩張卡片改回 2 欄滿版，
     收支平衡表／預算頁的 3 欄版面完全不受影響。 */
  #transaction-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .investment-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .investment-content-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .category-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .toast {
    bottom: var(--space-6);
  }
}

@media (min-width: 1280px) {
  .app-shell {
    grid-template-columns: 280px minmax(0, 1fr);
  }

  .main-content {
    padding: var(--space-10);
  }

  .panel {
    padding: var(--space-6);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Landing gate (guest marketing + login entry) ---- */

.landing-gate {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-y: auto;
  background: var(--bg);
  padding: var(--space-6) var(--space-4) var(--space-10);
}

.landing-gate[hidden] {
  display: none;
}

.landing-inner {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  gap: var(--space-8);
}

.landing-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.landing-brand .brand-mark--landing {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.landing-brand .brand-mark--landing img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.landing-brand strong {
  display: block;
  font-size: 1rem;
  color: var(--primary);
}

.landing-brand small {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}

.landing-hero-row {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.landing-hero {
  display: grid;
  gap: var(--space-4);
}

.landing-preview {
  display: none;
}

.landing-preview-card {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--space-6);
}

.landing-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  font-size: 0.8rem;
  font-weight: 750;
  color: var(--muted);
}

.landing-preview-month {
  color: var(--amber-500);
}

.landing-preview-stats {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.landing-preview-stat {
  flex: 1;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.landing-preview-stat--accent {
  background: var(--amber-100);
}

.landing-preview-stat--accent .landing-preview-stat-value {
  color: var(--amber-700);
}

.landing-preview-stat-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
}

.landing-preview-stat--accent .landing-preview-stat-label {
  color: var(--amber-700);
}

.landing-preview-stat-value {
  display: block;
  margin-top: 0.35rem;
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: 750;
  color: var(--ink);
}

.landing-preview-bars {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.landing-preview-bar-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.4rem;
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--ink);
}

.landing-preview-bar {
  height: 7px;
  border-radius: 999px;
  background: var(--surface);
  overflow: hidden;
}

.landing-preview-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--amber-500);
}

.landing-preview-bar--warm span {
  background: var(--warning);
}

.landing-preview-list {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.landing-preview-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.landing-preview-row-icon {
  display: inline-flex;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--warning-soft);
  color: var(--warning-ink);
}

.landing-preview-row-icon--accent {
  background: var(--amber-100);
  color: var(--amber-500);
}

.landing-preview-row-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.1;
}

.landing-preview-row-text {
  flex: 1;
  display: grid;
  gap: 0.15rem;
}

.landing-preview-row-text strong {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
}

.landing-preview-row-text small {
  font-size: 0.72rem;
  color: var(--muted);
}

.landing-preview-row-amount {
  font-size: 0.85rem;
  font-weight: 750;
  color: var(--ink);
}

.landing-hero h1 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(1.3rem, 7.6vw, 3.4rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
}

.landing-subtitle {
  margin: 0;
  max-width: 40rem;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

.founding-badge {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--amber-100);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--amber-700);
}

.founding-badge-icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 0.1rem;
  fill: currentColor;
  stroke: none;
}

.trial-badge {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--soft-amber);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--warning-ink);
}

.trial-badge-icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 0.1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

/* 2026-10-11 修正：手機版的「立即免費使用」／「先逛逛 DEMO」按鈕原本被鎖了
   max-width: 22rem（352px），比上面的標題、badge、說明文字都窄，螢幕比較寬的手機
   （例如大尺寸 iPhone）看起來會像是「按鈕沒有置中、沒有滿版」。拿掉這個上限，讓按鈕
   跟其他區塊一樣滿版對齊；桌面版（960px 以上）本來就另外設定成依內容自然寬度、並排
   顯示，不受這裡影響。 */
.landing-cta {
  display: grid;
  gap: var(--space-2);
}

.landing-cta--bottom {
  max-width: 30rem;
  margin: 0 auto;
  text-align: center;
}

.landing-features h2 {
  margin: 0 0 var(--space-4);
  font-size: 1.3rem;
  color: var(--ink);
}

.landing-feature-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

.landing-feature-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
}

.landing-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  background: var(--amber-100);
  color: var(--amber-500);
}

.landing-feature-icon svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.landing-feature-card h3 {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink);
}

.landing-feature-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.landing-disclaimer {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--income-soft);
  border-radius: var(--radius-sm);
  color: var(--income-green);
  font-size: 0.78rem;
  line-height: 1.6;
}

.landing-footer {
  margin: var(--space-2) 0 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--muted);
  display: flex;
  gap: var(--space-2);
  justify-content: center;
}

.landing-footer a {
  color: var(--muted);
  text-decoration: underline;
}

.landing-footer a:hover,
.landing-footer a:focus-visible {
  color: var(--ink);
}

@media (min-width: 640px) {
  .landing-feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .landing-gate {
    padding: var(--space-10) var(--space-8);
  }

  .landing-feature-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* 電腦版桌面寬螢幕下：Hero 區改成左右兩欄（文字＋CTA／App 畫面預覽卡片），按鈕
     改成並排、依內容自然寬度顯示（不是手機版那種整排滿版堆疊）；預覽卡片只在桌面
     顯示，手機版維持原本單欄、無預覽卡片的樣子。下面的 features 區塊維持原本較寬的
     三欄版面不受影響。 */
  .landing-inner {
    max-width: 1120px;
  }

  .landing-hero-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-10);
  }

  .landing-preview {
    display: block;
  }

  .landing-cta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
    max-width: none;
  }

  .landing-cta .button--block {
    width: auto;
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }

  .landing-cta--bottom {
    display: flex;
    justify-content: center;
  }

  .landing-cta--bottom .button--block {
    width: auto;
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}

/* 2026-10-15（v286）：未登入入口頁改為 Apple-inspired 的大字、留白與 Bento 功能敘事。
   所有選擇器都限制在 .landing-gate，避免影響登入後的 App 介面。 */
.landing-gate {
  --landing-ink: #1d1d1f;
  --landing-muted: #6e6e73;
  --landing-surface: #f5f5f7;
  --landing-line: #d2d2d7;
  --landing-green: #007a67;
  --landing-green-dark: #073f36;
  --landing-mint: #e8f6f2;
  padding: max(24px, env(safe-area-inset-top)) 20px max(64px, env(safe-area-inset-bottom));
  color: var(--landing-ink);
  background: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Noto Sans TC", sans-serif;
}

.landing-gate .landing-inner {
  width: min(100%, 1180px);
  max-width: 1180px;
  gap: 0;
}

.landing-gate .landing-brand {
  gap: 12px;
  margin-bottom: clamp(48px, 7vw, 84px);
}

.landing-gate .landing-brand .brand-mark--landing {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  box-shadow: 0 8px 24px rgba(29, 29, 31, 0.08);
}

.landing-gate .landing-brand strong {
  color: var(--landing-ink);
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.landing-gate .landing-brand small {
  margin-top: 1px;
  color: var(--landing-muted);
  font-size: 12px;
  font-weight: 600;
}

.landing-gate .landing-hero-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 48px;
  margin-bottom: clamp(96px, 12vw, 148px);
}

.landing-gate .landing-hero {
  display: grid;
  gap: 0;
  min-width: 0;
}

.landing-gate .landing-hero .eyebrow,
.landing-gate .landing-features-heading .eyebrow {
  margin: 0 0 16px;
  color: var(--landing-green);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.4;
  letter-spacing: 0.08em;
}

.landing-gate .landing-hero h1 {
  max-width: 9.5em;
  margin: 0;
  overflow: visible;
  color: var(--landing-ink);
  font-size: clamp(48px, 12vw, 82px);
  font-weight: 750;
  line-height: 0.98;
  letter-spacing: -0.065em;
  text-wrap: balance;
  text-overflow: clip;
  white-space: normal;
}

.landing-gate .landing-subtitle {
  max-width: 33em;
  margin: 26px 0 0;
  color: var(--landing-muted);
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.65;
  letter-spacing: -0.015em;
}

.landing-gate .founding-badge,
.landing-gate .trial-badge {
  gap: 10px;
  margin-top: 12px;
  padding: 14px 16px;
  border: 0;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.55;
}

.landing-gate .founding-badge {
  margin-top: 28px;
  color: #075f53;
  background: var(--landing-mint);
}

.landing-gate .trial-badge {
  color: #4b4b50;
  background: var(--landing-surface);
}

.landing-gate .founding-badge-icon,
.landing-gate .trial-badge-icon {
  flex-basis: 19px;
  width: 19px;
  height: 19px;
}

.landing-gate .landing-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  max-width: none;
  margin-top: 28px;
}

.landing-gate .landing-cta .button {
  min-height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 750;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.landing-gate .landing-cta .button--primary {
  color: #ffffff;
  background: var(--landing-green);
  border-color: var(--landing-green);
  box-shadow: none;
}

.landing-gate .landing-cta .button--ghost {
  color: var(--landing-ink);
  background: var(--landing-surface);
  border-color: transparent;
  box-shadow: none;
}

.landing-gate .landing-cta .text-button {
  min-height: 44px;
  padding: 0 8px;
  color: var(--landing-ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.landing-gate .landing-cta .button:focus-visible,
.landing-gate .landing-cta .text-button:focus-visible {
  outline: 3px solid rgba(0, 122, 103, 0.28);
  outline-offset: 3px;
}

.landing-gate .landing-preview {
  display: block;
  min-width: 0;
  padding: clamp(14px, 4vw, 28px);
  background: var(--landing-surface);
  border-radius: clamp(28px, 5vw, 42px);
}

.landing-gate .landing-preview-card {
  padding: clamp(20px, 4vw, 30px);
  background: #ffffff;
  border: 0;
  border-radius: 26px;
  box-shadow: 0 24px 70px rgba(29, 29, 31, 0.1);
}

.landing-gate .landing-preview-head {
  margin-bottom: 22px;
  color: var(--landing-muted);
  font-size: 13px;
  font-weight: 700;
}

.landing-gate .landing-preview-month {
  color: var(--landing-green);
}

.landing-gate .landing-preview-stats {
  gap: 10px;
  margin-bottom: 24px;
}

.landing-gate .landing-preview-stat {
  min-width: 0;
  padding: 15px;
  background: var(--landing-surface);
  border-radius: 16px;
}

.landing-gate .landing-preview-stat--accent {
  background: var(--landing-mint);
}

.landing-gate .landing-preview-stat--accent .landing-preview-stat-label,
.landing-gate .landing-preview-stat--accent .landing-preview-stat-value {
  color: #075f53;
}

.landing-gate .landing-preview-stat-label {
  color: var(--landing-muted);
  font-size: 11px;
}

.landing-gate .landing-preview-stat-value {
  color: var(--landing-ink);
  font-size: clamp(17px, 4vw, 23px);
  font-variant-numeric: tabular-nums;
}

.landing-gate .landing-preview-bars {
  gap: 16px;
  margin-bottom: 24px;
}

.landing-gate .landing-preview-bar-labels {
  color: var(--landing-ink);
  font-size: 12px;
}

.landing-gate .landing-preview-bar {
  height: 6px;
  background: #ececef;
}

.landing-gate .landing-preview-bar span {
  background: var(--landing-green);
}

.landing-gate .landing-preview-bar--warm span {
  background: #c77d16;
}

.landing-gate .landing-preview-list {
  gap: 14px;
  padding-top: 20px;
  border-color: #e5e5e7;
}

.landing-gate .landing-preview-row-icon {
  flex-basis: 34px;
  width: 34px;
  height: 34px;
  color: #8a5b18;
  background: #fff3df;
  border-radius: 11px;
}

.landing-gate .landing-preview-row-icon--accent {
  color: var(--landing-green);
  background: var(--landing-mint);
}

.landing-gate .landing-preview-row-text strong,
.landing-gate .landing-preview-row-amount {
  color: var(--landing-ink);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.landing-gate .landing-preview-row-text small {
  color: var(--landing-muted);
  font-size: 11px;
}

.landing-gate .landing-features {
  min-width: 0;
  margin-bottom: clamp(52px, 7vw, 76px);
}

.landing-gate .landing-features-heading {
  max-width: 760px;
  margin-bottom: clamp(32px, 5vw, 54px);
}

.landing-gate .landing-features-heading h2 {
  max-width: 13em;
  margin: 0;
  color: var(--landing-ink);
  font-size: clamp(38px, 7vw, 64px);
  font-weight: 750;
  line-height: 1.02;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.landing-gate .landing-features-heading > p:last-child {
  max-width: 35em;
  margin: 20px 0 0;
  color: var(--landing-muted);
  font-size: 17px;
  line-height: 1.65;
}

.landing-gate .landing-feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.landing-gate .landing-feature-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 190px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  overflow: hidden;
  padding: 28px;
  background: var(--landing-surface);
  border: 0;
  border-radius: 28px;
  box-shadow: none;
}

.landing-gate .landing-feature-icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  margin-bottom: auto;
  color: var(--landing-green);
  background: #ffffff;
  border-radius: 15px;
}

.landing-gate .landing-feature-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
}

.landing-gate .landing-feature-card h3 {
  color: var(--landing-ink);
  font-size: clamp(21px, 3vw, 27px);
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.landing-gate .landing-feature-card p {
  max-width: 34em;
  color: var(--landing-muted);
  font-size: 15px;
  line-height: 1.65;
}

.landing-gate .landing-feature-card--voice {
  min-height: 280px;
  color: #ffffff;
  background: var(--landing-green-dark);
}

.landing-gate .landing-feature-card--voice .landing-feature-icon {
  color: #b8f6e8;
  background: rgba(255, 255, 255, 0.1);
}

.landing-gate .landing-feature-card--voice h3 {
  color: #ffffff;
  font-size: clamp(30px, 5vw, 48px);
}

.landing-gate .landing-feature-card--voice p {
  color: #bfd0cc;
  font-size: 16px;
}

.landing-gate .landing-feature-card--investment {
  min-height: 280px;
  background: var(--landing-mint);
}

.landing-gate .landing-feature-card--investment .landing-feature-icon {
  color: #075f53;
  background: rgba(255, 255, 255, 0.72);
}

.landing-gate .landing-feature-card--investment h3 {
  font-size: clamp(28px, 4.4vw, 42px);
}

.landing-gate .landing-feature-card--payments,
.landing-gate .landing-feature-card--login {
  background: #eef1f5;
}

.landing-gate .landing-disclaimer {
  max-width: 880px;
  margin: 0 auto 28px;
  padding: 24px 0 0;
  color: var(--landing-muted);
  background: transparent;
  border-top: 1px solid #e5e5e7;
  border-radius: 0;
  font-size: 13px;
  line-height: 1.65;
  text-align: center;
}

.landing-gate .landing-cta--bottom {
  display: flex;
  max-width: none;
  justify-content: center;
  margin: 0 auto 44px;
}

.landing-gate .landing-cta--bottom .button--block {
  width: auto;
  min-width: 200px;
}

.landing-gate .landing-footer {
  margin: 0;
  color: var(--landing-muted);
  font-size: 12px;
}

.landing-gate .landing-footer a {
  color: var(--landing-muted);
  text-underline-offset: 3px;
}

@media (hover: hover) {
  .landing-gate .landing-cta .button--primary:hover {
    background: #006553;
    border-color: #006553;
    transform: translateY(-1px);
  }

  .landing-gate .landing-cta .button--ghost:hover {
    background: #e9e9ec;
    transform: translateY(-1px);
  }

  .landing-gate .landing-cta .text-button:hover,
  .landing-gate .landing-footer a:hover {
    color: var(--landing-green);
  }
}

@media (min-width: 640px) {
  .landing-gate {
    padding-right: 32px;
    padding-left: 32px;
  }

  .landing-gate .landing-cta {
    grid-template-columns: repeat(2, minmax(0, max-content));
    align-items: center;
  }

  .landing-gate .landing-cta .text-button {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .landing-gate .landing-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing-gate .landing-feature-card--voice {
    grid-column: 1 / -1;
  }

}

@media (min-width: 960px) {
  .landing-gate {
    padding: 40px 48px 72px;
  }

  .landing-gate .landing-hero-row {
    grid-template-columns: minmax(0, 0.94fr) minmax(440px, 1.06fr);
    gap: clamp(56px, 7vw, 96px);
    min-height: 620px;
  }

  .landing-gate .landing-hero h1 {
    font-size: clamp(62px, 6.3vw, 86px);
  }

  .landing-gate .landing-preview {
    padding: 28px;
  }

  .landing-gate .landing-feature-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 20px;
  }

  .landing-gate .landing-feature-card {
    min-height: 220px;
    padding: 32px;
  }

  .landing-gate .landing-feature-card--voice {
    grid-column: span 7;
    min-height: 330px;
  }

  .landing-gate .landing-feature-card--investment {
    grid-column: span 5;
    min-height: 330px;
  }

  .landing-gate .landing-feature-card--ledger,
  .landing-gate .landing-feature-card--location,
  .landing-gate .landing-feature-card--receipt {
    grid-column: span 4;
  }

  .landing-gate .landing-feature-card--budget,
  .landing-gate .landing-feature-card--payments,
  .landing-gate .landing-feature-card--install,
  .landing-gate .landing-feature-card--login {
    grid-column: span 6;
  }

}

@media (max-width: 420px) {
  .landing-gate .landing-preview-stats {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-gate .landing-preview-row {
    align-items: flex-start;
  }

  .landing-gate .landing-preview-row-amount {
    max-width: 35%;
    text-align: right;
  }
}

/* 2026-10-12：設定精靈「規劃第一個月的預算」步驟，輸入框下方的說明文字跟輸入框保持距離。 */
.setup-wizard-step label + .field-help {
  margin-top: 10px;
}

/* ===== 底部「＋」記帳方式選擇（2026-10-12）===== */
.dialog--sheet[open] {
  margin-top: auto;
  margin-bottom: max(0.75rem, env(safe-area-inset-bottom));
}

.entry-chooser__options {
  display: grid;
  gap: var(--space-3);
}

.entry-chooser__option {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4);
  color: inherit;
  text-align: left;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

.entry-chooser__option:hover,
.entry-chooser__option:focus-visible {
  background: var(--amber-50);
  border-color: var(--accent);
}

.entry-chooser__icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.entry-chooser__text {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.entry-chooser__text strong {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
}

.entry-chooser__text small {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

/* ===== 語音記帳畫面（2026-10-12）===== */
.voice-quick__stage {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

.voice-quick__mic {
  position: relative;
  display: grid;
  width: 104px;
  height: 104px;
  place-items: center;
  color: var(--accent-ink);
  background: var(--accent);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 12px 30px rgb(14 107 92 / 28%);
  transition: transform var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

.voice-quick__mic svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.voice-quick__mic::before {
  content: "";
  position: absolute;
  inset: -10px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
}

.voice-quick[data-state="listening"] .voice-quick__mic::before {
  animation: voice-quick-pulse 1.6s ease-out infinite;
}

.voice-quick[data-state="listening"] .voice-quick__mic {
  background: var(--accent-strong);
}

@keyframes voice-quick-pulse {
  0% {
    opacity: 0.55;
    transform: scale(0.92);
  }

  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

.voice-quick__wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 36px;
}

.voice-quick__wave span {
  width: 5px;
  height: 6px;
  background: var(--carbon-300);
  border-radius: 999px;
  transition: background-color var(--duration) var(--ease);
}

.voice-quick[data-state="listening"] .voice-quick__wave span {
  background: var(--accent);
  animation: voice-quick-wave 0.9s ease-in-out infinite;
}

.voice-quick[data-state="listening"] .voice-quick__wave span:nth-child(2) { animation-delay: -0.75s; }
.voice-quick[data-state="listening"] .voice-quick__wave span:nth-child(3) { animation-delay: -0.6s; }
.voice-quick[data-state="listening"] .voice-quick__wave span:nth-child(4) { animation-delay: -0.45s; }
.voice-quick[data-state="listening"] .voice-quick__wave span:nth-child(5) { animation-delay: -0.3s; }
.voice-quick[data-state="listening"] .voice-quick__wave span:nth-child(6) { animation-delay: -0.15s; }
.voice-quick[data-state="listening"] .voice-quick__wave span:nth-child(7) { animation-delay: -0.5s; }

@keyframes voice-quick-wave {
  0%,
  100% {
    height: 6px;
  }

  50% {
    height: 32px;
  }
}

.voice-quick__status {
  margin: 0;
  color: var(--carbon-700);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
}

.voice-quick[data-state="error"] .voice-quick__status {
  color: var(--danger);
}

.voice-quick__label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.12em;
}

.voice-quick__example,
.voice-quick__result {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.voice-quick__example-text {
  margin: 0;
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 700;
}

.voice-quick__example-help {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.voice-quick__transcript {
  margin: 0;
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 700;
}

.voice-quick__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-1) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.voice-quick__fields div {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.voice-quick__fields dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
}

.voice-quick__fields dd {
  overflow: hidden;
  margin: 0;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-quick__fields dd.is-missing {
  color: var(--danger);
}

.voice-quick__edit {
  justify-self: start;
  min-height: 36px;
  color: var(--muted);
  font-size: 0.82rem;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .voice-quick[data-state="listening"] .voice-quick__mic::before,
  .voice-quick[data-state="listening"] .voice-quick__wave span {
    animation: none;
  }

  .voice-quick[data-state="listening"] .voice-quick__wave span {
    height: 20px;
  }
}

/* ===== 總覽「預算使用狀態」手機版圓環（2026-10-13）=====
   640px 以下顯示圓環、隱藏長條列表；640px 以上相反。 */
.budget-rings {
  display: grid;
  gap: var(--space-4);
}

#overview-budgets {
  display: none;
}

@media (min-width: 640px) {
  .budget-rings {
    display: none;
  }

  #overview-budgets {
    display: grid;
  }
}

.budget-rings__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4) var(--space-2);
}

.budget-ring {
  --ring-color: var(--accent);
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.2rem;
  min-width: 0;
  text-align: center;
}

.budget-ring[data-state="warn"] {
  --ring-color: var(--warning);
}

.budget-ring[data-state="over"] {
  --ring-color: var(--danger);
}

.budget-ring__chart {
  width: 84px;
  height: 84px;
  margin-bottom: 0.25rem;
}

.budget-ring__track {
  fill: none;
  stroke: var(--line);
  stroke-width: 7;
}

.budget-ring__value {
  fill: none;
  stroke: var(--ring-color);
  stroke-width: 7;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dasharray var(--duration) var(--ease);
}

.budget-ring[data-state="empty"] .budget-ring__value,
.budget-ring.is-zero .budget-ring__value {
  stroke: transparent;
}

.budget-ring__chart text {
  fill: var(--ink);
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.budget-ring[data-state="over"] .budget-ring__chart text,
.budget-ring[data-state="over"] .budget-ring__status {
  fill: var(--danger);
  color: var(--danger);
}

.budget-ring[data-state="warn"] .budget-ring__status {
  color: var(--warning-ink);
}

.budget-ring__name {
  max-width: 100%;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.budget-ring__status {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.budget-ring__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
  margin-top: 0.15rem;
}

.budget-ring__tag {
  padding: 0.1rem 0.45rem;
  color: var(--accent-strong);
  background: var(--amber-100);
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 650;
}

.budget-ring__tag--borrow {
  color: var(--warning-ink);
  background: var(--warning-soft);
}

.budget-row__meta--borrow {
  color: var(--warning-ink);
  font-size: 0.76rem;
}


.allocation-borrow {
  display: grid;
  gap: var(--space-2);
}

.allocation-borrow[hidden] {
  display: none;
}

.budget-ring__add,
.budget-ring__sub-count {
  min-height: 32px;
  margin-top: 0.1rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
}

.budget-ring__add {
  padding: 0 0.25rem;
  background: transparent;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.budget-ring__add:hover,
.budget-ring__add:focus-visible {
  color: var(--accent);
}

.budget-ring__sub-count {
  display: inline-flex;
  align-items: center;
}

.budget-rings__subs {
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.budget-rings__subs-title {
  margin: 0 0 var(--space-2);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .budget-ring__value {
    transition: none;
  }
}

/* ===== 信封袋（2026-10-13，原平攤子預算）===== */
.envelope-strip {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.envelope-strip__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.envelope-strip__head > div {
  display: grid;
  gap: 0.15rem;
}

.envelope-strip__head strong {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
}

.envelope-strip__head span {
  color: var(--muted);
  font-size: 0.78rem;
}

.envelope-strip__add {
  flex: none;
  min-height: 36px;
  padding: 0 0.25rem;
  color: var(--accent);
  background: transparent;
  border: 0;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}

.envelope-strip__list {
  display: flex;
  gap: var(--space-3);
  margin: 0 calc(var(--space-1) * -1);
  padding: var(--space-1);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.envelope-strip__list::-webkit-scrollbar {
  display: none;
}

.envelope {
  position: relative;
  display: grid;
  flex: 0 0 132px;
  align-content: start;
  gap: 0.2rem;
  padding: 34px var(--space-3) var(--space-3);
  overflow: hidden;
  color: inherit;
  text-align: left;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 14px;
  scroll-snap-align: start;
  transition: border-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.envelope:hover,
.envelope:focus-visible {
  border-color: var(--accent);
}

.envelope:active {
  transform: translateY(1px);
}

.envelope__flap {
  position: absolute;
  inset: 0 0 auto;
  height: 24px;
  background: #ebe4d2;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.envelope__name {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.envelope__monthly {
  color: var(--muted);
  font-size: 0.75rem;
}

.envelope__bar {
  display: block;
  height: 6px;
  margin: 0.35rem 0 0.2rem;
  overflow: hidden;
  background: var(--line);
  border-radius: 999px;
}

.envelope__bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width var(--duration) var(--ease);
}

.envelope__bar--large {
  height: 8px;
}

.envelope__amount {
  color: var(--muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.envelope__amount b {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
}

.envelope__tag {
  justify-self: start;
  margin-top: 0.35rem;
  padding: 0.15rem 0.55rem;
  color: var(--accent-strong);
  background: var(--amber-100);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 650;
}

.envelope__tag--due {
  color: var(--warning-ink);
  background: var(--warning-soft);
}

.envelope__tag--overdue {
  color: var(--danger);
  background: var(--expense-soft);
}

.envelope--add {
  flex-basis: 64px;
  place-content: center;
  justify-items: center;
  padding: var(--space-3);
  color: var(--muted);
  background: transparent;
  border-style: dashed;
  font-size: 1.4rem;
}

.envelope--add.envelope--empty {
  flex: 1 1 auto;
  min-height: 120px;
  gap: 0.35rem;
  text-align: center;
}

.envelope--add small {
  font-size: 0.78rem;
  line-height: 1.5;
}

/* 新增／編輯信封 */
.envelope-preview {
  display: flex;
  justify-content: center;
  padding: var(--space-2) 0 var(--space-1);
}

.envelope--preview {
  flex-basis: auto;
  width: min(200px, 70%);
  pointer-events: none;
}

.envelope-question {
  display: grid;
  gap: var(--space-2);
}

.envelope-question__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 700;
}

.envelope-question__title b {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: var(--accent-strong);
  background: var(--amber-100);
  border-radius: 50%;
  font-size: 0.75rem;
}

.envelope-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.envelope-chips button {
  min-height: 36px;
  padding: 0 0.85rem;
  color: var(--carbon-700);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}

.envelope-chips button.is-on {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

.envelope-amount-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-2);
}

.envelope-amount {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.55rem 0.8rem;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.envelope-amount:focus-within {
  border-color: var(--accent);
}

.envelope-amount b {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.envelope-amount input {
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.envelope-amount input:focus-visible {
  outline: none;
}

.envelope-month select {
  height: 100%;
  min-height: 48px;
  font-size: 1rem;
  font-weight: 650;
}

.envelope-hint {
  margin: 0;
  color: var(--accent-strong);
  font-size: 0.82rem;
  font-weight: 600;
}

.envelope-advanced {
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
}

.envelope-advanced summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 40px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}

.envelope-advanced summary::-webkit-details-marker {
  display: none;
}

.envelope-advanced summary::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: auto;
  border-right: 1.5px solid var(--carbon-300);
  border-bottom: 1.5px solid var(--carbon-300);
  transform: translateY(-2px) rotate(45deg);
}

.envelope-advanced[open] summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.envelope-advanced summary span {
  overflow: hidden;
  color: var(--carbon-500);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.envelope-advanced__body {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

.envelope-advanced__label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 650;
}

.envelope-months {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.3rem;
}

.envelope-months button {
  min-height: 38px;
  color: var(--carbon-700);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 0.8rem;
  font-weight: 600;
}

.envelope-months button.is-on {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

/* 點開信封／從信封付款 */
.envelope-detail__pane {
  display: grid;
  gap: var(--space-3);
}

.envelope-detail__status {
  margin: 0;
  padding: 0.6rem 0.8rem;
  color: var(--warning-ink);
  background: var(--warning-soft);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 650;
}

.envelope-detail__status[data-state="overdue"] {
  color: var(--danger);
  background: var(--expense-soft);
}

.envelope-detail__box {
  display: grid;
  gap: 0.2rem;
  padding: var(--space-4);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.envelope-detail__box > span:first-child {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.envelope-detail__box strong {
  color: var(--ink);
  font-size: 2rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.envelope-detail__box-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--muted);
  font-size: 0.78rem;
}

.envelope-detail__rows {
  display: grid;
  gap: 0.45rem;
  margin: 0;
}

.envelope-detail__rows div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 0.88rem;
}

.envelope-detail__rows dt {
  color: var(--muted);
}

.envelope-detail__rows dd {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  text-align: right;
}

.envelope-detail__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-2);
}

.envelope-detail__note {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.envelope-amount--large {
  display: grid;
  gap: 0.3rem;
}

.envelope-pay__label {
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 700;
}

.envelope-amount__row {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.envelope-amount--large input {
  font-size: 1.8rem;
}

.envelope-pay__explain {
  margin: 0;
  padding: 0.6rem 0.8rem;
  color: var(--accent-strong);
  background: var(--amber-50);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  line-height: 1.5;
}

.envelope-pay__explain[data-state="over"] {
  color: var(--warning-ink);
  background: var(--warning-soft);
}

@media (prefers-reduced-motion: reduce) {
  .envelope,
  .envelope__bar i {
    transition: none;
  }
}

/* ===== 語音記帳「這樣說」卡片改版（2026-10-13）===== */
.voice-quick__tokens {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5rem;
}

.voice-quick__token {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
}

.voice-quick__token b {
  padding: 0.45rem 0.75rem;
  color: var(--ink);
  background: #f2ede1;
  border-radius: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  white-space: nowrap;
}

.voice-quick__token small {
  color: var(--danger);
  font-size: 0.78rem;
  font-weight: 700;
}

.voice-quick__plus {
  padding-top: 0.45rem;
  color: var(--carbon-300);
  font-size: 1rem;
}

.voice-quick__example .voice-quick__example-help {
  display: flex;
  gap: 0.4rem;
  align-items: flex-start;
  margin-top: 0.35rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}

.voice-quick__example-help > span {
  display: grid;
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 0.15rem;
  place-items: center;
  color: var(--carbon-500);
  border: 1.5px solid var(--carbon-300);
  border-radius: 50%;
  font-size: 0.6rem;
  font-weight: 800;
}

.voice-quick__add-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--muted);
  font-size: 0.8rem;
}

.voice-quick__add-sub button {
  flex: none;
  min-height: 34px;
  padding: 0 0.8rem;
  color: var(--accent-strong);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
}

/* ===== 分類子項目膠囊編輯（2026-10-13）===== */
.subcategory-editor {
  display: grid;
  gap: var(--space-2);
}

.subcategory-editor__label {
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 700;
}

.subcategory-editor__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.5rem;
  padding-top: 0.3rem;
}

.subcategory-editor__chips:empty {
  display: none;
}

.subcategory-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 0.8rem;
  color: var(--ink);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}

.subcategory-chip__remove {
  position: absolute;
  top: -7px;
  right: -7px;
  display: grid;
  width: 20px;
  height: 20px;
  padding: 0;
  place-items: center;
  color: #fff;
  background: var(--carbon-500);
  border: 2px solid var(--surface);
  border-radius: 50%;
  font-size: 0.7rem;
  line-height: 1;
}

.subcategory-chip__remove::before {
  content: "";
  position: absolute;
  inset: -10px;
}

.subcategory-chip__remove:hover,
.subcategory-chip__remove:focus-visible {
  background: var(--danger);
}

.subcategory-editor__add {
  display: flex;
  gap: var(--space-2);
}

.subcategory-editor__add input {
  flex: 1 1 auto;
  min-width: 0;
}

.subcategory-editor__add .button {
  flex: none;
  white-space: nowrap;
}

/* ===== 2026-10-13：夢想熱氣球 ===== */
.dream-balloon {
  display: block;
  overflow: visible;
}

.dream-balloon text {
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}

/* 總覽：灌色氣球一排 */
.dream-row {
  display: flex;
  gap: var(--space-3);
  margin: 0 calc(var(--space-1) * -1);
  padding: var(--space-1);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.dream-row::-webkit-scrollbar {
  display: none;
}

.dream-row__item {
  display: grid;
  flex: 0 0 136px;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 0.15rem;
  padding: var(--space-3) var(--space-2);
  color: inherit;
  text-align: center;
  background: linear-gradient(180deg, #e3eef4 0%, var(--surface-strong) 100%);
  border: 1px solid var(--line);
  border-radius: 14px;
  scroll-snap-align: start;
  transition: border-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.dream-row__item:hover,
.dream-row__item:focus-visible,
.dream-sky:hover,
.dream-sky:focus-visible {
  border-color: var(--accent);
}

.dream-row__item:active,
.dream-sky:active {
  transform: translateY(1px);
}

.dream-row__item .dream-balloon {
  margin-bottom: 0.3rem;
}

.dream-row__item strong,
.dream-sky__name {
  max-width: 100%;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dream-row__item span,
.dream-sky__amount {
  color: var(--muted);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dream-empty {
  display: grid;
  flex: 1 1 auto;
  justify-items: center;
  gap: 0.25rem;
  width: 100%;
  padding: var(--space-4) var(--space-3);
  color: inherit;
  text-align: center;
  background: linear-gradient(180deg, #e3eef4 0%, var(--surface-strong) 100%);
  border: 1px dashed var(--carbon-300, var(--line));
  border-radius: 14px;
}

.dream-empty strong {
  margin-top: 0.35rem;
  color: var(--ink);
  font-size: 0.95rem;
}

.dream-empty span {
  color: var(--muted);
  font-size: 0.8rem;
}

/* 夢想目標頁：天空卡片 */
.dream-sky-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-3);
}

.dream-sky-grid > .dream-empty {
  grid-column: 1 / -1;
}

.dream-sky {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 0.15rem;
  padding: 0 0 var(--space-3);
  overflow: hidden;
  color: inherit;
  text-align: center;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: border-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.dream-sky__scene {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 0.35rem;
}

.dream-sky__bg {
  fill: #e9f2f0;
}

.dream-sky.is-reached .dream-sky__bg {
  fill: #f6efdc;
}

.dream-sky__tick {
  stroke: #9fb3b0;
  stroke-dasharray: 2 3;
  stroke-opacity: 0.28;
  stroke-width: 0.6;
}

.dream-sky__tick-dot {
  fill: #9fb3b0;
  fill-opacity: 0.45;
}

.dream-sky__tick-label {
  fill: #9a6b4b;
  fill-opacity: 0.4;
  font-size: 6.5px;
  font-variant-numeric: tabular-nums;
}

.dream-sky__goal {
  stroke: #c9b98f;
  stroke-dasharray: 3 2;
  stroke-width: 0.9;
}

.dream-sky__goal-label {
  fill: #8a7748;
  font-size: 7.5px;
  font-weight: 700;
}

.dream-sky__name,
.dream-sky__amount {
  padding: 0 var(--space-2);
}

.dream-sky--add {
  align-content: center;
  min-height: 220px;
  padding: var(--space-3);
  color: var(--accent);
  background: transparent;
  border-style: dashed;
}

.dream-sky--add span {
  font-size: 1.8rem;
  line-height: 1;
}

.dream-sky--add small {
  font-size: 0.85rem;
  font-weight: 700;
}

/* 新增／編輯夢想 */
.dream-form__preview,
.dream-detail__hero {
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  padding: var(--space-3) 0 var(--space-2);
  background: linear-gradient(180deg, #dbe9f2 0%, #f3efe4 60%, transparent 100%);
  border-radius: 14px;
}

.dream-form__preview strong {
  color: var(--ink);
  font-size: 0.95rem;
}

.dream-form__month input {
  width: 100%;
  min-height: 44px;
  font-size: 1rem;
}

/* 達成目標的彩帶 */
.dream-confetti {
  position: fixed;
  inset: 0;
  z-index: 2000;
  overflow: hidden;
  pointer-events: none;
}

.dream-confetti[hidden] {
  display: none;
}

.dream-confetti span {
  position: absolute;
  top: -40px;
  font-size: 1.4rem;
  animation: dream-confetti-fall 2s ease-in forwards;
}

@keyframes dream-confetti-fall {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(0);
  }
  100% {
    opacity: 0;
    transform: translateY(105vh) rotate(540deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dream-confetti {
    display: none;
  }
}

/* ===== 2026-10-13：語音記帳辨識結果改版（v213）===== */
.voice-quick__tokens {
  gap: 0.25rem;
}

.voice-quick__token b {
  padding: 0.4rem 0.55rem;
  font-size: 0.95rem;
}

.voice-quick__token--optional b {
  background: transparent;
  border: 1.5px dashed var(--carbon-300);
}

.voice-quick__plus {
  padding-top: 0.4rem;
  font-size: 0.85rem;
}

.voice-quick__heard {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.voice-quick__heard span {
  flex: none;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.12em;
}

.voice-quick__heard q {
  min-width: 0;
  color: var(--ink);
  font-weight: 650;
  quotes: none;
}

.voice-quick__parsed {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.voice-quick__parsed[hidden] {
  display: none;
}

.voice-quick__hero {
  display: grid;
  justify-items: center;
  gap: 0.1rem;
}

.voice-quick__hero span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 650;
}

.voice-quick__hero strong {
  color: var(--ink);
  font-size: 2.1rem;
  font-weight: 750;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.voice-quick__hero strong.is-missing {
  color: var(--danger);
  font-size: 1.3rem;
}

.voice-quick__cells {
  display: grid;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.voice-quick__cell {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto 10px;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0 0.85rem;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.voice-quick__cell + .voice-quick__cell {
  border-top: 1px solid var(--line);
}

.voice-quick__cell::after {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1.5px solid var(--carbon-300);
  border-right: 1.5px solid var(--carbon-300);
  transform: rotate(45deg);
}

.voice-quick__cell[aria-expanded="true"]::after {
  transform: translateY(-2px) rotate(135deg);
}

.voice-quick__cell:hover,
.voice-quick__cell:focus-visible,
.voice-quick__cell[aria-expanded="true"] {
  background: var(--surface-strong);
}

.voice-quick__cell small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
}

.voice-quick__cell b {
  overflow: hidden;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-quick__cell i {
  padding: 0.1rem 0.4rem;
  color: #8a6420;
  background: var(--amber-50, #fbf3e2);
  border-radius: 999px;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.voice-quick__cell i.is-heard {
  color: var(--accent-strong, var(--accent));
  background: #e3f0ec;
}

.voice-quick__accounts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.voice-quick__accounts[hidden] {
  display: none;
}

.voice-quick__accounts button {
  min-height: 36px;
  padding: 0 0.85rem;
  color: var(--carbon-700, var(--ink));
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}

.voice-quick__accounts button.is-on {
  color: var(--accent-ink, #fff);
  background: var(--accent);
  border-color: var(--accent);
}

.voice-quick__tip {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  text-align: center;
}

/* 2026-10-13（v215）：夢想表單第 4 題「從哪個帳戶存錢」 */
.envelope-question > select {
  width: 100%;
  min-height: 48px;
  font-size: 1rem;
}

.envelope-question > .field-help {
  margin: 0;
}

/* 2026-10-13（v216）：「這樣說」先放整句範例，拆解改成較小的說明 */
.voice-quick__say {
  margin: 0;
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 750;
  text-align: center;
  white-space: nowrap;
  word-spacing: 0.2em;
}

.voice-quick__breakdown-label {
  margin-top: 0.35rem;
  padding-top: 0.75rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  text-align: center;
  border-top: 1px dashed var(--line);
}

.voice-quick__example .voice-quick__token b {
  padding: 0.3rem 0.5rem;
  font-size: 0.85rem;
  font-weight: 650;
}

.voice-quick__example .voice-quick__token small {
  font-size: 0.72rem;
}

.voice-quick__example .voice-quick__plus {
  padding-top: 0.3rem;
  font-size: 0.75rem;
}

/* 2026-10-13（v217）：說明拆成兩行，第二行不再重複分隔線 */
.voice-quick__example .voice-quick__example-help + .voice-quick__example-help {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ===== 2026-10-13（v218）：資料備份／從備份還原 ===== */
.backup-panel {
  display: grid;
  gap: var(--space-3);
}

.backup-panel__last {
  margin: 0.2rem 0 0;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 650;
}

.backup-panel__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.backup-panel__undo {
  color: var(--muted);
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.backup-panel__soon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding-top: var(--space-3);
  color: var(--muted);
  font-size: 0.85rem;
  border-top: 1px dashed var(--line);
}

.backup-panel__soon span {
  padding: 0.1rem 0.5rem;
  color: var(--muted);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 650;
}

.backup-dialog__pane {
  display: grid;
  gap: var(--space-3);
}

.backup-dialog__pane[hidden] {
  display: none;
}

.backup-file {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.backup-file__icon {
  display: grid;
  flex: none;
  width: 36px;
  height: 44px;
  place-items: center;
  color: #fffdf8;
  background: var(--accent);
  border-radius: 6px;
  font-size: 0.65rem;
  font-weight: 700;
}

.backup-file div {
  display: grid;
  min-width: 0;
}

.backup-file strong {
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.backup-file div span {
  color: var(--muted);
  font-size: 0.8rem;
}

.backup-dialog__rows {
  display: grid;
  margin: 0;
}

.backup-dialog__rows div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px dashed var(--line);
}

.backup-dialog__rows div:last-child {
  border-bottom: 0;
}

.backup-dialog__rows dt {
  color: var(--muted);
  font-size: 0.85rem;
}

.backup-dialog__rows dd {
  margin: 0;
  color: var(--ink);
  font-weight: 650;
  text-align: right;
}

.backup-dialog__warn,
.backup-dialog__owner {
  margin: 0;
  padding: 0.7rem 0.85rem;
  color: #7a5512;
  background: #fbf1dd;
  border-radius: 10px;
  font-size: 0.85rem;
  line-height: 1.55;
}

.backup-dialog__owner {
  color: var(--danger);
  background: #f8e6e2;
  font-weight: 650;
}

.backup-dialog__ok {
  margin: 0;
  padding: 0.8rem 0.9rem;
  color: #0b5547;
  background: #e3f0ec;
  border-radius: 10px;
  font-weight: 650;
  line-height: 1.55;
}

.backup-dialog__error {
  margin: 0;
  color: var(--danger);
  font-weight: 650;
  line-height: 1.6;
}

.backup-panel__note {
  margin: 0.5rem 0 0;
  padding: 0.6rem 0.75rem;
  color: #7a5512;
  background: #fbf1dd;
  border-radius: 10px;
  font-size: 0.8rem;
  line-height: 1.55;
}

/* 2026-10-13（v219）修正：iPhone Safari 的日期／時間輸入框有內建最小寬度、不吃 width:100%，
   修改記帳時（日期、時間欄位直接顯示，時間還帶秒數）內容會比畫面寬，導致整個畫面可以縮放、左右滑動。
   讓日期／時間欄位照容器寬度顯示，並禁止對話框內容橫向捲動。 */
input[type="date"],
input[type="time"] {
  display: block;
  min-width: 0;
  max-width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value {
  text-align: left;
}

.dialog-card {
  overflow-x: hidden;
}

/* 2026-10-13（v219）：天空卡片下方名稱區接續天空漸層的最底色，整張卡片連成一片 */
.dream-sky:not(.dream-sky--add) {
  background: #fbf8f1;
  border-color: #e6e2d6;
}

/* ===== 2026-10-13（v220）：分享醬記 ===== */
.topbar-share {
  display: grid;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  color: var(--ink);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.topbar-share:hover,
.topbar-share:focus-visible {
  background: var(--amber-50);
  border-color: var(--amber-100);
}

.topbar-share svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.topbar-actions .topbar-share {
  width: 38px;
  height: 38px;
}

@media (min-width: 640px) {
  .topbar-share--mobile {
    display: none;
  }
}

.share-dialog__preview {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.share-dialog__preview img {
  flex: none;
  border-radius: 12px;
}

.share-dialog__preview div {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.share-dialog__preview strong {
  color: var(--ink);
  font-size: 0.95rem;
}

.share-dialog__preview span {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.share-dialog__preview small {
  color: var(--accent-strong);
  font-size: 0.78rem;
  font-weight: 650;
}

.share-dialog__actions {
  display: grid;
  gap: 0.6rem;
}

.share-option {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 54px;
  padding: 0 1rem;
  color: var(--ink);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: 0.98rem;
  font-weight: 700;
  text-align: left;
}

.share-option[hidden] {
  display: none;
}

.share-option:hover,
.share-option:focus-visible {
  border-color: var(--accent);
}

.share-option__icon {
  display: grid;
  flex: none;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.6rem;
  font-weight: 800;
}

.share-option__icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.share-option--line .share-option__icon {
  color: #ffffff;
  background: #06c755;
  border-color: #06c755;
}

/* 手機版：分享＋頭像固定在右上角、跟日期同一行，標題往下一行用滿整個寬度，不會被擠成「…」。 */
.topbar-mobile-tools {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.5rem;
}

@media (max-width: 639px) {
  .topbar {
    position: relative;
  }

  .topbar-mobile-tools {
    position: absolute;
    top: 0;
    right: 0;
  }

  .topbar-heading__title #today-label {
    display: flex;
    min-height: 44px;
    align-items: center;
    padding-right: 104px;
  }

  .topbar-heading__row {
    align-items: flex-end;
  }
}

@media (min-width: 640px) {
  .topbar-mobile-tools {
    display: none;
  }
}

/* ===== 2026-10-13（v220）：收支平衡表分析——只用主色綠＋輔助色橘，圖示用單色線條 ===== */
.bs-period {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  margin-bottom: var(--space-3);
  padding: 3px;
  background: #ebe5d6;
  border-radius: 12px;
}

.bs-period button {
  min-height: 36px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 9px;
  font-weight: 700;
}

.bs-period button.is-on {
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 1px 3px rgb(25 26 24 / 8%);
}

.bs-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.bs-kpi {
  display: grid;
  align-content: start;
  gap: 0.15rem;
  min-width: 0;
  padding: 0.85rem;
  border: 1px solid transparent;
  border-radius: 16px;
}

.bs-kpi small {
  margin-top: 0.45rem;
  font-size: 0.8rem;
  font-weight: 700;
}

.bs-kpi strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 1.2rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bs-kpi strong.is-negative {
  color: #a44a27;
}

.bs-kpi em {
  color: var(--muted);
  font-size: 0.74rem;
  font-style: normal;
}

.bs-kpi__icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: #ffffff;
  border-radius: 50%;
}

.bs-kpi__icon svg,
.bs-chip svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.bs-kpi__spark {
  width: 100%;
  height: 24px;
  margin-top: 0.3rem;
}

.bs-kpi--expense {
  background: #fbefe7;
  border-color: #f3dccd;
}

.bs-kpi--expense .bs-kpi__icon {
  background: #d9663f;
}

.bs-kpi--expense small {
  color: #a44a27;
}

.bs-kpi--income,
.bs-kpi--net {
  background: #e8f2ee;
  border-color: #d3e6de;
}

.bs-kpi--income .bs-kpi__icon {
  background: #0e6b5c;
}

.bs-kpi--net .bs-kpi__icon {
  background: #2a8a77;
}

.bs-kpi--income small,
.bs-kpi--net small {
  color: var(--accent-strong);
}

.bs-kpi--plain {
  background: var(--surface-strong);
  border-color: var(--line);
}

.bs-kpi--plain small {
  color: var(--muted);
}

.bs-kpi__icon--soft {
  color: var(--accent);
  background: #e8f2ee;
}

.bs-kpi__bar {
  display: block;
  height: 7px;
  margin: 0.45rem 0 0.2rem;
  overflow: hidden;
  background: #ece6d8;
  border-radius: 4px;
}

.bs-kpi__bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
}

.bs-grid {
  display: grid;
  gap: var(--space-4);
}

.bs-card {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.bs-card[hidden] {
  display: none;
}

.bs-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.bs-card__head h3 {
  margin: 0.1rem 0 0;
  font-size: 1.05rem;
}

.bs-pro {
  flex: none;
  padding: 0.15rem 0.6rem;
  color: #8a5a2b;
  background: #f8ece0;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

.bs-empty,
.bs-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.bs-trend {
  position: relative;
}

.bs-trend__chart {
  display: block;
  width: 100%;
  height: auto;
  touch-action: pan-y;
}

.bs-grid-line {
  stroke: #efe9dc;
}

.bs-axis {
  fill: #8a877c;
  font-size: 8.5px;
}

.bs-trend__guide {
  stroke: #d9663f;
  stroke-opacity: 0.35;
  stroke-dasharray: 2 3;
}

.bs-trend__tip {
  position: absolute;
  display: grid;
  min-width: 76px;
  padding: 0.3rem 0.55rem;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: 0 4px 12px rgb(25 26 24 / 8%);
  transform: translateX(-50%);
  pointer-events: none;
}

.bs-trend__tip strong {
  color: #a44a27;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.bs-trend__tip span {
  color: var(--muted);
  font-size: 0.7rem;
}

.bs-legend {
  display: flex;
  gap: 1rem;
  color: var(--muted);
  font-size: 0.76rem;
}

.bs-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.bs-legend i {
  width: 14px;
  height: 3px;
  border-radius: 2px;
}

.bs-legend i.is-dashed {
  background: repeating-linear-gradient(90deg, #b5b0a3 0 4px, transparent 4px 7px);
}

.bs-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.85rem;
  background: #e8f2ee;
  border-radius: 12px;
}

.bs-callout small {
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
}

.bs-callout strong {
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
}

.bs-callout > span {
  color: var(--accent);
  font-size: 1.2rem;
}

.bs-callout.is-up {
  background: #fbefe7;
}

.bs-callout.is-up strong,
.bs-callout.is-up > span {
  color: #a44a27;
}

.bs-rings {
  display: block;
  width: 100%;
  height: auto;
}

.bs-ring-track {
  stroke: #f1ece0;
}

.bs-ring-label {
  fill: #4f4c44;
  font-size: 10px;
}

.bs-ring-pct {
  fill: #191a18;
  font-weight: 700;
}

.bs-legend-list,
.bs-top {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bs-legend-list li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto 38px;
  gap: 0.6rem;
  align-items: center;
  padding: 0.45rem 0;
  border-bottom: 1px solid #efe9dc;
}

.bs-legend-list li:last-child,
.bs-top li:last-child {
  border-bottom: 0;
}

.bs-chip {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: var(--accent);
  background: #e8f2ee;
  border-radius: 9px;
}

.bs-icon-letter {
  font-size: 0.8rem;
  font-weight: 750;
}

.bs-legend-name {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  overflow: hidden;
  font-weight: 650;
  white-space: nowrap;
}

.bs-legend-name i {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.bs-legend-amount {
  font-variant-numeric: tabular-nums;
}

.bs-legend-pct {
  color: var(--muted);
  font-size: 0.8rem;
  text-align: right;
}

.bs-budget-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.bs-budget {
  display: grid;
  min-width: 0;
  padding: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.bs-budget__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
}

.bs-budget__head .bs-chip {
  width: 26px;
  height: 26px;
}

.bs-budget__amount {
  margin-top: 0.45rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.bs-budget__pct {
  color: var(--muted);
  font-size: 0.75rem;
  text-align: right;
}

.bs-top li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.55rem 0;
  border-bottom: 1px solid #efe9dc;
  cursor: pointer;
}

.bs-top__text {
  display: grid;
  min-width: 0;
}

.bs-top__text strong {
  overflow: hidden;
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bs-top__text small {
  color: var(--muted);
  font-size: 0.74rem;
}

.bs-pill {
  padding: 0.12rem 0.55rem;
  color: var(--accent-strong);
  background: #e8f2ee;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.bs-top__amount {
  color: #a44a27;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (min-width: 960px) {
  .bs-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .bs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

/* ===== 2026-10-13（v221）：桌機版右上角整理（手機版不變）=====
   分享按鈕跟頭像一樣大；「記一筆」改成固定在右下角的浮動按鈕，每一頁都看得到。
   640～959px 底部已有「＋」功能列，右上角的「記一筆」先隱藏，避免兩個新增按鈕。 */
@media (min-width: 640px) {
  .topbar-actions .topbar-share {
    width: 52px;
    height: 52px;
  }

  .topbar-actions .topbar-share svg {
    width: 22px;
    height: 22px;
  }
}

@media (min-width: 640px) and (max-width: 959px) {
  #quick-expense {
    display: none;
  }
}

@media (min-width: 960px) {
  #quick-expense {
    position: fixed;
    right: 32px;
    bottom: 32px;
    z-index: 40;
    min-height: 56px;
    padding: 0 1.4rem 0 1.15rem;
    border-radius: 999px;
    font-size: 1rem;
    box-shadow: 0 10px 28px rgb(14 107 92 / 28%), 0 2px 6px rgb(25 26 24 / 12%);
    transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
  }

  #quick-expense:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgb(14 107 92 / 32%), 0 3px 8px rgb(25 26 24 / 14%);
  }

  #quick-expense .button-icon {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
  }

  #quick-expense .button-icon--trailing {
    display: none;
  }
}

/* 未登入時右上角是「登入／註冊」文字膠囊（高 36px），分享按鈕跟著縮小，不要比膠囊大一截。 */
@media (min-width: 640px) {
  .topbar-actions:has(.user-tag:not(.user-tag--avatar)) .topbar-share {
    width: 40px;
    height: 40px;
  }

  .topbar-actions:has(.user-tag:not(.user-tag--avatar)) .topbar-share svg {
    width: 19px;
    height: 19px;
  }
}

/* 2026-10-13（v222）：帳戶依類別分組 */
.account-groups {
  display: grid;
  gap: var(--space-6);
}

.account-group {
  display: grid;
  gap: var(--space-3);
}

.account-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
}

.account-group__head h3 {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  font-size: 1.05rem;
}

.account-group__head small {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.account-group__total {
  color: var(--ink);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.account-group__total.is-negative {
  color: #a44a27;
}

/* ===== 2026-10-13（v223）：總覽黑卡改參考圖排版——標題＋i、一句白話說明、大數字、
   分隔線下兩欄小數字，最底下一行目前預算配置＋「查看預算」 ===== */
.balance-card__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.balance-card .balance-card__title p {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 750;
  opacity: 1;
}

.balance-card__info {
  display: grid;
  width: 26px;
  height: 26px;
  padding: 0;
  place-items: center;
  color: rgb(255 255 255 / 78%);
  background: transparent;
  border: 0;
  border-radius: 50%;
}

.balance-card__info svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.balance-card__info:hover,
.balance-card__info:focus-visible {
  color: #ffffff;
  background: rgb(255 255 255 / 10%);
}

.balance-card__desc {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.82rem;
  opacity: 0.72;
}

.balance-card--hero .balance-card__block > strong {
  margin: var(--space-3) 0 var(--space-4);
}

.balance-card--hero .balance-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid rgb(255 255 255 / 18%);
}

.balance-card--hero .balance-meta span {
  color: rgb(255 255 255 / 72%);
}

.balance-card--hero .balance-meta b {
  color: #ffffff;
  font-size: 1.05rem;
}

.balance-card__footer {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-3) 0 0;
  color: rgb(255 255 255 / 78%);
  text-align: left;
  background: transparent;
  border: 0;
  border-top: 1px solid rgb(255 255 255 / 18%);
  border-radius: 0;
}

.balance-card__footer-label,
.balance-card__footer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
}

.balance-card__footer-label svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #e3b04b;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.balance-card__footer-link {
  color: #e3b04b;
  font-weight: 750;
}

.balance-card__footer-link svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.balance-card__footer:hover .balance-card__footer-link {
  color: #f0c56a;
}

/* 2026-10-13（v224）：手機版也維持左右並排（Lucas：上下排列佔太高），說明改短版、數字與間距縮小。 */
.balance-card__desc .desc-short {
  display: none;
}

@media (max-width: 639px) {
  .balance-card--hero {
    padding: var(--space-4);
  }

  .balance-card--hero .balance-card__row {
    flex-wrap: nowrap;
    gap: var(--space-3);
  }

  .balance-card--hero .balance-card__block {
    flex: 1 1 0;
  }

  .balance-card--hero .balance-card__block--budget {
    padding-left: var(--space-3);
  }

  .balance-card__desc .desc-long {
    display: none;
  }

  .balance-card__desc .desc-short {
    display: inline;
  }

  .balance-card .balance-card__title p {
    font-size: 0.95rem;
  }

  .balance-card__info {
    width: 22px;
    height: 22px;
  }

  .balance-card__info svg {
    width: 17px;
    height: 17px;
  }

  .balance-card__desc {
    font-size: 0.75rem;
  }

  .balance-card--hero .balance-card__block > strong {
    margin: var(--space-2) 0 var(--space-3);
    font-size: 1.55rem;
  }

  .balance-card--hero .balance-meta {
    gap: var(--space-2);
    font-size: 0.75rem;
  }

  .balance-card--hero .balance-meta b {
    font-size: 0.88rem;
  }

  .balance-card__footer {
    margin-top: var(--space-3);
  }
}

@media (max-width: 639px) {
  .balance-card--hero .balance-meta span,
  .balance-card--hero .balance-meta b,
  .balance-card--hero .balance-card__block > strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ===== 2026-10-13（v225）：總覽「常用功能」膠囊快捷列（取代「所有功能」九宮格）=====
   iOS 風格：米白膠囊容器、細邊框、極輕陰影、線條圖示；選中的那顆淡底＋名稱；右邊獨立綠色＋。 */
.quick-dock {
  margin-bottom: var(--space-4);
}

.quick-dock__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
  padding: 0 var(--space-1);
}

.quick-dock__head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 750;
}

.quick-dock__edit {
  min-height: 36px;
  padding: 0 0.25rem;
  color: var(--accent);
  font-size: 0.88rem;
  font-weight: 700;
}

.quick-dock__bar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quick-dock__pill {
  flex: 1 1 auto;
  min-width: 0;
  height: 60px;
  padding: 5px;
  background: #fffdf8;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 2px 10px rgb(25 26 24 / 5%);
}

.quick-dock__track {
  display: flex;
  height: 100%;
  align-items: center;
  gap: 2px;
  padding-right: 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* 右側淡出，暗示還有更多可以滑 */
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent);
  -webkit-touch-callout: none;
  user-select: none;
}

.quick-dock__track::-webkit-scrollbar {
  display: none;
}

.quick-dock__item {
  position: relative;
  flex: none;
  scroll-snap-align: start;
  transition: transform 180ms var(--ease), opacity 160ms var(--ease);
}

.quick-dock__btn {
  position: relative;
  display: flex;
  height: 48px;
  min-width: 48px;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 12px;
  color: var(--carbon-700, #4f4c44);
  background: transparent;
  border: 0;
  border-radius: 999px;
  transition: background-color 200ms var(--ease), color 200ms var(--ease), gap 200ms var(--ease);
}

.quick-dock__btn .menu-icon {
  flex: none;
  width: 23px;
  height: 23px;
  stroke-width: 1.7;
}

.quick-dock__btn:hover {
  background: rgb(25 26 24 / 4%);
}

.quick-dock__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.quick-dock__label {
  max-width: 0;
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transition: max-width 220ms var(--ease), opacity 200ms var(--ease);
}

.quick-dock__item.is-active .quick-dock__btn {
  gap: 8px;
  color: var(--ink);
  background: #f1ece0;
}

.quick-dock__item.is-active .quick-dock__label {
  max-width: 8em;
  opacity: 1;
}

.quick-dock__btn .recurring-due-badge {
  position: absolute;
  top: 6px;
  left: 28px;
  margin-left: 0;
  border: 2px solid #fffdf8;
}

.quick-dock__remove {
  position: absolute;
  top: 0;
  right: 0;
  display: none;
  width: 20px;
  height: 20px;
  padding: 0;
  place-items: center;
  color: #ffffff;
  background: var(--ink);
  border: 2px solid #fffdf8;
  border-radius: 50%;
}

.quick-dock__remove svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2.6;
}

/* 移除標記本身很小，但點擊範圍放大到 32px */
.quick-dock__remove::after {
  position: absolute;
  inset: -6px;
  content: "";
}

.quick-dock.is-editing .quick-dock__remove {
  display: grid;
}

.quick-dock.is-editing .quick-dock__btn {
  cursor: grab;
}

.quick-dock__item.is-dragging {
  z-index: 2;
  transform: scale(1.08);
}

.quick-dock__item.is-dragging .quick-dock__btn {
  background: #ffffff;
  box-shadow: 0 6px 16px rgb(25 26 24 / 16%);
  cursor: grabbing;
}

.quick-dock__item.is-entering {
  animation: quick-dock-in 220ms var(--ease);
}

.quick-dock__item.is-leaving {
  opacity: 0;
  transform: scale(0.8);
}

@keyframes quick-dock-in {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
}

.quick-dock__empty {
  margin: 0;
  padding: 0 0.9rem;
  color: var(--muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

.quick-dock__add {
  display: grid;
  flex: none;
  width: 54px;
  height: 54px;
  padding: 0;
  place-items: center;
  color: #ffffff;
  background: var(--accent);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgb(14 107 92 / 24%);
  transition: transform 160ms var(--ease), background-color 160ms var(--ease);
}

.quick-dock__add:hover {
  background: var(--accent-strong);
}

.quick-dock__add:active {
  transform: scale(0.95);
}

.quick-dock__add svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2.2;
}

.quick-dock__hint {
  margin: 0.45rem 0 0;
  padding: 0 var(--space-1);
  color: var(--muted);
  font-size: 0.75rem;
}

/* 「新增常用功能」底部抽屜：手機貼底、桌機置中 */
.dialog--sheet .quick-dock-sheet {
  gap: var(--space-3);
}

.quick-dock-sheet__grabber {
  display: none;
  width: 40px;
  height: 4px;
  margin: -0.4rem auto 0;
  background: #d8d2c3;
  border-radius: 999px;
}

.quick-dock-sheet__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.quick-dock-sheet__item {
  display: flex;
  min-height: 56px;
  align-items: center;
  gap: 0.65rem;
  padding: 0 0.75rem;
  color: var(--ink);
  text-align: left;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-weight: 700;
}

.quick-dock-sheet__item:hover,
.quick-dock-sheet__item:focus-visible {
  border-color: var(--accent);
}

.quick-dock-sheet__icon {
  display: grid;
  flex: none;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--accent);
  background: #e8f2ee;
  border-radius: 10px;
}

.quick-dock-sheet__plus {
  width: 18px;
  height: 18px;
  margin-left: auto;
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-width: 2.2;
}

.quick-dock-sheet__empty {
  margin: 0;
  padding: var(--space-4) 0;
  color: var(--muted);
  text-align: center;
}

/* 2026-10-18 新增：群組卡片「⋯」捷徑選單，跟「新增常用功能」抽屜共用外殼（.dialog--sheet／grabber／
   header），但清單是單欄、一列一個動作（不是兩欄的方塊），比較接近一般 App 的操作選單樣式。 */
.split-group-menu-sheet__list {
  display: grid;
  gap: 0.35rem;
}

.split-group-menu-sheet__item {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0.25rem;
  color: var(--ink);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 12px;
  font-weight: 650;
}

.split-group-menu-sheet__item:hover,
.split-group-menu-sheet__item:focus-visible {
  background: var(--surface-strong);
}

.split-group-menu-sheet__item .menu-icon {
  flex: none;
  color: var(--muted);
}

.split-group-menu-sheet__item--danger,
.split-group-menu-sheet__item--danger .menu-icon {
  color: var(--danger, #b04437);
}

@media (max-width: 639px) {
  .dialog--sheet {
    width: 100%;
    max-width: 100%;
    margin: auto 0 0;
  }

  .dialog--sheet .dialog-card {
    padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0;
  }

  .dialog--sheet[open] {
    animation: quick-dock-sheet-up 260ms var(--ease);
  }

  .quick-dock-sheet__grabber {
    display: block;
  }
}

@keyframes quick-dock-sheet-up {
  from {
    transform: translateY(40px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quick-dock__item,
  .quick-dock__btn,
  .quick-dock__label,
  .quick-dock__add {
    transition: none;
  }

  .quick-dock__item.is-entering,
  .dialog--sheet[open] {
    animation: none;
  }
}

/* 修正：捲動容器會把超出上緣的 − 標記切掉，標記改放在圖示右上角內側；抽屜項目名稱不換行。 */
.quick-dock__remove {
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
}

.quick-dock-sheet__item span:not(.quick-dock-sheet__icon) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 320～360px 的小手機：黑卡下方兩欄小數字放不下會被截成「$52,…」，改成一欄。 */
@media (max-width: 360px) {
  .balance-card--hero .balance-meta {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
  }
}

/* 2026-10-13（v226）：選中底塊改成一塊獨立的膠囊，點別顆時滑過去（見 app.js quickDockSlideTo）。
   按下時圖示微微縮小，讓手機上有「按到了」的回饋。 */
.quick-dock__track {
  position: relative;
}

.quick-dock__indicator {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 0;
  height: 48px;
  margin-top: -24px;
  background: #f1ece0;
  border-radius: 999px;
  pointer-events: none;
}

.quick-dock__indicator[hidden] {
  display: none;
}

.quick-dock__item {
  z-index: 1;
}

.quick-dock__item.is-active .quick-dock__btn {
  background: transparent;
}

.quick-dock__btn:hover {
  background: transparent;
}

@media (hover: hover) {
  .quick-dock__item:not(.is-active) .quick-dock__btn:hover {
    background: rgb(25 26 24 / 4%);
  }
}

.quick-dock__btn:active .menu-icon {
  transform: scale(0.9);
}

.quick-dock__btn .menu-icon {
  transition: transform 120ms var(--ease);
}

.quick-dock__btn {
  -webkit-tap-highlight-color: transparent;
}

/* ===== 2026-10-13（v228）：總覽「各帳戶餘額」信用卡式卡片 ===== */
.acct-cards {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.acct-cards__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
}

.acct-cards__head h2 {
  margin: 0.1rem 0 0;
  font-size: 1.15rem;
}

.acct-carousel {
  display: flex;
  gap: 12px;
  margin: 0 calc(var(--space-4) * -1);
  padding: 4px var(--space-4) 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding: 0 var(--space-4);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.acct-carousel::-webkit-scrollbar {
  display: none;
}

.acct-card {
  position: relative;
  display: grid;
  flex: 0 0 min(86%, 340px);
  aspect-ratio: 85.6 / 53.98;
  min-height: 140px;
  grid-template-rows: auto 1fr auto;
  padding: 18px 20px;
  overflow: hidden;
  color: #ffffff;
  text-align: left;
  border: 0;
  border-radius: 20px;
  box-shadow: 0 8px 22px rgb(25 26 24 / 14%);
  scroll-snap-align: start;
  transition: transform 160ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.acct-card::after {
  position: absolute;
  top: -40%;
  right: -25%;
  width: 70%;
  height: 120%;
  content: "";
  background: radial-gradient(circle, rgb(255 255 255 / 14%), transparent 65%);
  pointer-events: none;
}

.acct-card:active {
  transform: scale(0.98);
}

.acct-card--green {
  background: linear-gradient(135deg, #0e6b5c, #0a5147);
}

.acct-card--mint {
  background: linear-gradient(135deg, #3f9482, #2a8a77);
}

.acct-card--amber {
  color: #191a18;
  background: linear-gradient(135deg, #f0c766, #e9b949);
}

.acct-card--carbon {
  background: linear-gradient(135deg, #2b2c29, #191a18);
}

.acct-card--gold {
  color: #f0c766;
  background: linear-gradient(135deg, #2b2c29, #191a18);
}

.acct-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.acct-card__top strong {
  overflow: hidden;
  font-size: 1rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acct-card__chip {
  flex: none;
  width: 36px;
  height: 27px;
  fill: rgb(255 255 255 / 22%);
  stroke: rgb(255 255 255 / 45%);
  stroke-width: 1.2;
}

.acct-card--amber .acct-card__chip {
  fill: rgb(25 26 24 / 10%);
  stroke: rgb(25 26 24 / 35%);
}

.acct-card__mark {
  flex: none;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  opacity: 0.7;
}

.acct-card__balance {
  align-self: center;
  font-size: 1.9rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.acct-card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.8rem;
  opacity: 0.85;
}

.acct-card__sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acct-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: -4px;
}

.acct-dots i {
  width: 6px;
  height: 6px;
  background: #d8d2c3;
  border-radius: 999px;
  transition: width 200ms var(--ease), background-color 200ms var(--ease);
}

.acct-dots i.is-on {
  width: 18px;
  background: var(--accent);
}

.acct-details {
  display: grid;
  margin: 0;
}

.acct-details div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
}

.acct-details div:last-child {
  border-bottom: 0;
}

.acct-details dt {
  color: var(--muted);
  font-size: 0.85rem;
}

.acct-details dd {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acct-cards__add {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: #ffffff;
  background: var(--primary, #191a18);
  border: 0;
  border-radius: 999px;
  font-weight: 700;
}

.acct-cards__add svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2.2;
}

.acct-cards__empty {
  margin: 0;
  padding: var(--space-4);
  color: var(--muted);
}

@media (min-width: 960px) {
  .acct-card {
    flex-basis: 320px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .acct-card,
  .acct-dots i {
    transition: none;
  }
}

.acct-cards__actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.acct-cards__nav {
  display: none;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  color: var(--ink);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 1.1rem;
  line-height: 1;
}

@media (hover: hover) and (pointer: fine) {
  .acct-cards__nav {
    display: grid;
  }
}

/* ===== v228 疊卡：前一張完整、後兩張往上錯開露出名稱與餘額，上下滑動翻卡 ===== */
.acct-stack {
  position: relative;
  height: 176px;
  margin-top: 60px;
  touch-action: auto;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  user-select: none;
  outline: none;
}

.acct-stack.is-double {
  margin-top: 34px;
}

.acct-stack.is-single {
  margin-top: 0;
}

.acct-stack:focus-visible .acct-card[data-depth="0"] {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.acct-stack .acct-card {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 0;
  cursor: pointer;
  transform-origin: top center;
  transition: transform 300ms var(--ease), opacity 300ms var(--ease), box-shadow 300ms var(--ease);
}

.acct-stack .acct-card:active {
  transform: none;
}

.acct-stack .acct-card[data-depth="0"] {
  z-index: 3;
  transform: translateY(0) scale(1);
}

.acct-stack .acct-card[data-depth="1"] {
  z-index: 2;
  transform: translateY(-30px) scale(0.94);
  box-shadow: 0 4px 12px rgb(25 26 24 / 10%);
}

.acct-stack .acct-card[data-depth="2"] {
  z-index: 1;
  transform: translateY(-56px) scale(0.88);
  box-shadow: none;
}

.acct-stack .acct-card[data-depth="hidden"] {
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-56px) scale(0.84);
}

.acct-stack .acct-card.is-dragging {
  transition: none;
}

/* 後面的卡片只露出上緣：名稱＋小字餘額，晶片與大字餘額先藏起來 */
.acct-card__peek-balance {
  display: none;
  margin-left: auto;
  font-size: 0.9rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.acct-stack .acct-card:not([data-depth="0"]) .acct-card__peek-balance {
  display: inline;
}

.acct-stack .acct-card:not([data-depth="0"]) .acct-card__chip,
.acct-stack .acct-card:not([data-depth="0"]) .acct-card__mark {
  display: none;
}

.acct-stack .acct-card[data-depth="1"]::before,
.acct-stack .acct-card[data-depth="2"]::before {
  position: absolute;
  inset: 0;
  content: "";
  background: rgb(255 255 255 / 10%);
  pointer-events: none;
}

.acct-cards__count {
  margin-right: 0.25rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.acct-cards__nav svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

@media (min-width: 960px) {
  .acct-stack {
    max-width: 420px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .acct-stack .acct-card {
    transition: none;
  }
}

/* 調整：露出的上緣要放得下一行名稱＋餘額 */
.acct-stack {
  margin-top: 78px;
}

.acct-stack.is-double {
  margin-top: 44px;
}

.acct-stack .acct-card[data-depth="1"] {
  transform: translateY(-42px) scale(0.95);
}

.acct-stack .acct-card[data-depth="2"],
.acct-stack .acct-card[data-depth="hidden"] {
  transform: translateY(-78px) scale(0.9);
}

.acct-stack .acct-card[data-depth="hidden"] {
  transform: translateY(-78px) scale(0.86);
}

.acct-stack .acct-card:not([data-depth="0"]) .acct-card__top {
  padding-top: 0;
  margin-top: -6px;
}

/* 2026-10-13（v229）：帳戶卡片移到「今日對帳」正下方（同在 .summary-grid 裡，排序跟今日對帳一樣、DOM 在它後面）。 */
.summary-grid > .acct-cards {
  grid-column: 1 / -1;
  order: 1;
  margin-bottom: 0;
}

@media (min-width: 960px) {
  .summary-grid > .acct-cards {
    order: 3;
  }
}

/* ===== 2026-10-13（v230）：電腦版疊卡改成往右疊、左右翻（手機維持上下） ===== */
@media (min-width: 960px) {
  .acct-stack,
  .acct-stack.is-double {
    max-width: 560px;
    margin-top: 0;
    margin-right: 0;
    touch-action: pan-y;
  }

  .acct-stack .acct-card {
    right: 120px;
    transform-origin: right center;
  }

  .acct-stack .acct-card[data-depth="1"] {
    transform: translateX(62px) scale(0.93);
  }

  .acct-stack .acct-card[data-depth="2"] {
    transform: translateX(116px) scale(0.86);
  }

  .acct-stack .acct-card[data-depth="hidden"] {
    transform: translateX(116px) scale(0.82);
  }

  .acct-stack.is-double .acct-card {
    right: 62px;
  }

  .acct-stack.is-single .acct-card {
    right: 0;
  }

  /* 往右疊時露出的是卡片右緣：名稱／小字餘額藏起來，只留色塊與右上角品牌標記 */
  .acct-stack .acct-card:not([data-depth="0"]) .acct-card__top strong,
  .acct-stack .acct-card:not([data-depth="0"]) .acct-card__peek-balance,
  .acct-stack .acct-card:not([data-depth="0"]) .acct-card__balance,
  .acct-stack .acct-card:not([data-depth="0"]) .acct-card__bottom {
    visibility: hidden;
  }

  .acct-stack .acct-card:not([data-depth="0"]) .acct-card__chip,
  .acct-stack .acct-card:not([data-depth="0"]) .acct-card__mark {
    display: inline;
  }

  .acct-stack .acct-card:not([data-depth="0"]) {
    cursor: pointer;
  }

  .acct-stack .acct-card[data-depth="0"] {
    cursor: grab;
  }
}

@media (min-width: 960px) {
  /* 前面那張要留出右側 120px 給後面兩張露出，不能用 width:100% */
  .acct-stack .acct-card {
    width: auto;
  }
}

/* ===== 2026-10-13（v230）：帳戶卡片 12 種類型各自配色 ===== */
.acct-card--cash { color: #191a18; background: linear-gradient(135deg, #f0c766, #e2ad3f); }
.acct-card--bank { color: #ffffff; background: linear-gradient(135deg, #0e6b5c, #0a5147); }
.acct-card--credit { color: #ffffff; background: linear-gradient(135deg, #2f302c, #191a18); }
.acct-card--billing { color: #ffffff; background: linear-gradient(135deg, #5d6c7b, #45515d); }
.acct-card--stored { color: #ffffff; background: linear-gradient(135deg, #c27450, #a3593a); }
.acct-card--epayment { color: #ffffff; background: linear-gradient(135deg, #3d5d8f, #2b4470); }
.acct-card--insurance { color: #ffffff; background: linear-gradient(135deg, #7c4f6d, #5e3a53); }
.acct-card--goal { color: #ffffff; background: linear-gradient(135deg, #5f93b6, #457a9c); }
.acct-card--settlement { color: #ffffff; background: linear-gradient(135deg, #6e7944, #545d32); }
.acct-card--investment { color: #f0c766; background: linear-gradient(135deg, #2f302c, #191a18); }
.acct-card--liability { color: #ffffff; background: linear-gradient(135deg, #8c3f3c, #6c2d2b); }
.acct-card--loan { color: #ffffff; background: linear-gradient(135deg, #6e4d35, #533927); }

.acct-card--cash .acct-card__chip {
  fill: rgb(25 26 24 / 10%);
  stroke: rgb(25 26 24 / 35%);
}

/* ===== 2026-10-13（v231）：帳戶頁卡片改信用卡樣式（沿用總覽 .acct-card 與類型配色） ===== */
.account-card.acct-card--page {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 0.35rem;
  padding: 18px 20px;
  border: 0;
  border-radius: 20px;
  box-shadow: 0 8px 22px rgb(25 26 24 / 14%);
}

.account-card.acct-card--page:hover {
  box-shadow: 0 12px 28px rgb(25 26 24 / 20%);
  transform: translateY(-2px);
}

.account-card.acct-card--page.is-disabled {
  filter: grayscale(0.85);
  opacity: 0.6;
}

.acct-card--page .acct-card__balance {
  font-size: 1.7rem;
}

.acct-card__meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acct-card__status {
  flex: none;
  padding: 0.12rem 0.55rem;
  background: rgb(255 255 255 / 18%);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}

.acct-card--cash .acct-card__status {
  background: rgb(25 26 24 / 10%);
}

.acct-card__progress {
  display: block;
  height: 6px;
  overflow: hidden;
  background: rgb(255 255 255 / 25%);
  border-radius: 999px;
}

.acct-card__progress i {
  display: block;
  height: 100%;
  background: #ffffff;
  border-radius: 999px;
}

.acct-card--page .acct-card__sub {
  font-size: 0.78rem;
  opacity: 0.85;
}

/* 2026-10-16（Lucas：螢幕變寬卡片會變形）：「我的帳戶」卡片格線改成 auto-fill＋寬度上限，
   不再用 repeat(3, minmax(0, 1fr)) 把每欄等分拉滿——那種寫法在寬螢幕、或某個分類只剩一張卡
   （例如只有一個現金帳戶）獨佔一整列時，卡片會被拉成極扁的長條，跟信用卡比例差很多。
   欄數交給瀏覽器依可用寬度自動決定；畫面變寬只會多排幾欄，不會把既有卡片拉變形。
   2026-10-16 二次調整（Lucas：總覽疊卡 .acct-card 那個比例才是對的，帳戶頁卡片還是不對）：
   寬度上限、比例改成直接比照總覽疊卡 .acct-card 的尺寸。
   2026-10-16 三次調整（Lucas：比例還是怪怪的，應該高一點，並附上信用卡實際規格 ISO/IEC 7810
   ID-1：85.60mm × 53.98mm，長寬比例約 1.586:1）：把真正的比例（aspect-ratio: 85.6 / 53.98）
   直接定義在上面共用的 .acct-card 基礎規則上，總覽疊卡與帳戶頁卡片都吃同一個數字來源，不用
   各自維護一份、也不會再對不齊。這裡只保留寬度上限，比例交給基礎規則。 */
.account-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 340px));
}

.account-card.acct-card--page {
  max-width: 340px;
}

/* 2026-10-16 新增：帳戶設定裡的卡片封面圖上傳／預覽區。 */
.account-cover-field {
  display: grid;
  gap: var(--space-2);
}

.field-label-text {
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 680;
}

.account-cover-preview {
  position: relative;
  display: grid;
  width: 100%;
  max-width: 320px;
  overflow: hidden;
  background: var(--surface-strong) linear-gradient(135deg, var(--carbon-150), var(--carbon-100));
  background-position: center;
  background-size: cover;
  border: 1px solid var(--carbon-150);
  border-radius: var(--radius-md);
  aspect-ratio: 1.7 / 1;
  place-items: center;
}

.account-cover-upload-button {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  color: #ffffff;
  background: rgb(25 26 24 / 55%);
  border: 0;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 650;
  backdrop-filter: blur(2px);
}

.account-cover-upload-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

/* 2026-10-16 新增：帳戶卡片套用自訂封面圖後的樣式。用 .acct-card.acct-card--has-cover
   雙 class 疊高選擇器優先權，蓋過前面依帳戶類型決定底色的 .acct-card--{type} 規則
   （不管哪一段生效，雙 class 優先權都比單 class 高，不受這條規則寫在檔案哪裡影響）。
   實際圖片網址是 app.js accountCoverStyleAttr() 組成的 inline style（蓋掉 background-image），
   這裡只負責 size/position 跟蓋在圖片上的文字陰影，確保白字在任何照片上都看得清楚。 */
.acct-card.acct-card--has-cover {
  color: #ffffff;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  text-shadow: 0 1px 4px rgb(0 0 0 / 50%);
}

/* ===== 2026-10-13（v231）：電腦版帳戶卡片區改左右兩欄（Lucas：視覺怪怪的）=====
   左：疊卡；右：帳戶資訊＋新增帳戶。後面露出的卡片只留顏色（不再出現被切掉的 JOHN'S 字樣）。 */
@media (min-width: 960px) {
  .acct-cards {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-areas:
      "head head"
      "stack details"
      "stack add";
    grid-template-rows: auto 1fr auto;
    column-gap: var(--space-6);
    row-gap: var(--space-3);
    align-items: start;
  }

  .acct-cards__head {
    grid-area: head;
  }

  .acct-cards .acct-stack {
    grid-area: stack;
    width: 100%;
    max-width: 520px;
  }

  .acct-cards .acct-details {
    grid-area: details;
    align-self: center;
  }

  .acct-cards .acct-cards__add {
    grid-area: add;
    align-self: end;
  }

  .acct-stack .acct-card:not([data-depth="0"]) .acct-card__chip,
  .acct-stack .acct-card:not([data-depth="0"]) .acct-card__mark {
    display: none;
  }
}

/* ===== 2026-10-13（v232）：電腦版疊卡改成真實信用卡比例 85.6 × 54（Lucas：卡片尺寸不對）=====
   前面那張卡固定寬度、高度用比例算；後面兩張往右露出 62px／116px，堆疊區寬度＝卡寬＋露出。 */
@media (min-width: 960px) {
  .acct-cards {
    --acct-card-w: clamp(280px, 24vw, 360px);
  }

  .acct-cards .acct-stack,
  .acct-cards .acct-stack.is-double,
  .acct-cards .acct-stack.is-single {
    width: calc(var(--acct-card-w) + 120px);
    max-width: 100%;
    height: calc(var(--acct-card-w) * 54 / 85.6);
  }

  .acct-cards .acct-stack.is-double {
    width: calc(var(--acct-card-w) + 62px);
  }

  .acct-cards .acct-stack.is-single {
    width: var(--acct-card-w);
  }

  .acct-cards .acct-stack .acct-card {
    right: auto;
    width: var(--acct-card-w);
    max-width: calc(100% - 120px);
    height: 100%;
    padding: 22px 24px;
  }

  .acct-cards .acct-stack.is-double .acct-card {
    max-width: calc(100% - 62px);
  }

  .acct-cards .acct-stack.is-single .acct-card {
    max-width: 100%;
  }
}

/* ===== 2026-10-13（v233）：總覽疊卡下方的帳戶類型篩選（全部顯示／現金／銀行／信用卡／電子支付／儲值） ===== */
.acct-filter {
  display: flex;
  gap: 6px;
  padding: 2px 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.acct-filter::-webkit-scrollbar {
  display: none;
}

.acct-filter button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 14px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
  background: #ebe5d6;
  border: 0;
  border-radius: 999px;
  transition: background 160ms var(--ease), color 160ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.acct-filter button:hover {
  color: var(--ink);
}

.acct-filter button.is-on {
  color: #ffffff;
  background: var(--ink);
}

.acct-filter button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

@media (min-width: 960px) {
  .acct-cards {
    grid-template-areas:
      "head head"
      "stack details"
      "stack add"
      "filter .";
    grid-template-rows: auto 1fr auto auto;
  }

  .acct-cards .acct-filter {
    grid-area: filter;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
}

/* ===== 2026-10-13（v234）：手機版「我的帳戶」簡約化（Lucas）=====
   拿掉外框與底色、不顯示帳戶類型／本月流入流出／最近一筆，新增帳戶改成標題列「全部帳戶」右邊的小按鈕，
   整區移到「常用功能」下方、「本月剩多少」上方。電腦版不變。 */
.acct-cards__add-inline {
  display: none;
}

@media (max-width: 959px) {
  .summary-grid > .acct-cards {
    order: -1;
  }

  .summary-grid > .acct-cards.panel {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .acct-cards .acct-details,
  .acct-cards .acct-cards__add {
    display: none;
  }

  .acct-cards__head {
    align-items: center;
  }

  .acct-cards__actions {
    gap: 0.6rem;
  }

  .acct-cards__add-inline {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    gap: 0.2rem;
    padding: 0 12px 0 9px;
    color: #ffffff;
    font-size: 0.84rem;
    font-weight: 700;
    white-space: nowrap;
    background: var(--ink);
    border: 0;
    border-radius: 999px;
    -webkit-tap-highlight-color: transparent;
  }

  .acct-cards__add-inline svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 2.2;
  }
}

/* ===== 2026-10-14（v234）：帳戶卡片改用 Lucas 指定的大地色票（棕 5 色＋綠 5 色），另補 2 色湊滿 12 種類型 =====
   補的 2 色：#7E6F3C 橄欖金（介於棕綠之間）、#C4A57A 淺焦糖。
   淺色卡（A68A64／B6AD90／C2C5AA／A4AC86／C4A57A）用深色字，其餘白字；對比度都 ≥ 4.5。 */
.acct-card--cash { color: #ffffff; background: linear-gradient(135deg, #9d7043, #936639 55%, #855b31); }
.acct-card--bank { color: #ffffff; background: linear-gradient(135deg, #3c4731, #333d29 55%, #2a3322); }
.acct-card--credit { color: #ffffff; background: linear-gradient(135deg, #633714, #582f0e 55%, #4a270b); }
.acct-card--billing { color: #191a18; background: linear-gradient(135deg, #ae936e, #a68a64 55%, #9a7f5a); }
.acct-card--stored { color: #191a18; background: linear-gradient(135deg, #ccae85, #c4a57a 55%, #b8996f); }
.acct-card--epayment { color: #ffffff; background: linear-gradient(135deg, #6e7652, #656d4a 55%, #5a6141); }
.acct-card--insurance { color: #ffffff; background: linear-gradient(135deg, #4a513b, #414833 55%, #383e2b); }
.acct-card--goal { color: #191a18; background: linear-gradient(135deg, #adb590, #a4ac86 55%, #98a07b); }
.acct-card--settlement { color: #191a18; background: linear-gradient(135deg, #bdb599, #b6ad90 55%, #aba286); }
.acct-card--investment { color: #ffffff; background: linear-gradient(135deg, #89582b, #7f4f24 55%, #72461f); }
.acct-card--liability { color: #ffffff; background: linear-gradient(135deg, #877843, #7e6f3c 55%, #726435); }
.acct-card--loan { color: #191a18; background: linear-gradient(135deg, #c9ccb2, #c2c5aa 55%, #b6b99e); }

/* 白字卡：晶片、狀態膠囊用白色半透明；深字卡：改深色半透明 */
.acct-card--cash .acct-card__chip {
  fill: rgb(255 255 255 / 22%);
  stroke: rgb(255 255 255 / 45%);
}

.acct-card--cash .acct-card__status {
  background: rgb(255 255 255 / 18%);
}

.acct-card--billing .acct-card__chip,
.acct-card--stored .acct-card__chip,
.acct-card--goal .acct-card__chip,
.acct-card--settlement .acct-card__chip,
.acct-card--loan .acct-card__chip {
  fill: rgb(25 26 24 / 10%);
  stroke: rgb(25 26 24 / 35%);
}

.acct-card--billing .acct-card__status,
.acct-card--stored .acct-card__status,
.acct-card--goal .acct-card__status,
.acct-card--settlement .acct-card__status,
.acct-card--loan .acct-card__status {
  background: rgb(25 26 24 / 10%);
}

.acct-card--billing .acct-card__progress,
.acct-card--stored .acct-card__progress,
.acct-card--goal .acct-card__progress,
.acct-card--settlement .acct-card__progress,
.acct-card--loan .acct-card__progress {
  background: rgb(25 26 24 / 14%);
}

.acct-card--billing .acct-card__progress i,
.acct-card--stored .acct-card__progress i,
.acct-card--goal .acct-card__progress i,
.acct-card--settlement .acct-card__progress i,
.acct-card--loan .acct-card__progress i {
  background: #191a18;
}

/* ===== 2026-10-14（v235）：帳戶卡片改「毛玻璃＋長虹玻璃」質感（Lucas：降低飽和度、提升質感）=====
   每種類型一組低飽和底色（原色票飽和度 ×0.55），以 86% 不透明鋪底＋backdrop-filter 毛玻璃，
   疊在後面的卡片會隱約透出來；上面再加一層細直紋（長虹玻璃）與斜向光澤。白字／深字對比度都 ≥ 4.5。 */
.acct-card--cash { --acct-rgb: 117 94 71; }
.acct-card--bank { --acct-rgb: 47 52 42; }
.acct-card--credit { --acct-rgb: 66 45 28; }
.acct-card--billing { --acct-rgb: 151 136 115; }
.acct-card--stored { --acct-rgb: 179 162 139; }
.acct-card--epayment { --acct-rgb: 89 93 75; }
.acct-card--insurance { --acct-rgb: 58 62 51; }
.acct-card--goal { --acct-rgb: 159 163 143; }
.acct-card--settlement { --acct-rgb: 173 168 153; }
.acct-card--investment { --acct-rgb: 98 74 52; }
.acct-card--liability { --acct-rgb: 102 95 69; }
.acct-card--loan { --acct-rgb: 189 191 176; }

.acct-card[class*="acct-card--"] {
  background:
    linear-gradient(115deg, rgb(255 255 255 / 20%) 0%, rgb(255 255 255 / 5%) 38%, rgb(255 255 255 / 0%) 60%),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0%) 0, rgb(255 255 255 / 7%) 5px, rgb(0 0 0 / 5%) 10px, rgb(255 255 255 / 0%) 12px),
    rgb(var(--acct-rgb, 89 93 75) / 86%);
  border: 1px solid rgb(255 255 255 / 24%);
  box-shadow: 0 10px 28px rgb(25 26 24 / 12%), inset 0 1px 0 rgb(255 255 255 / 22%);
  -webkit-backdrop-filter: blur(18px) saturate(80%);
  backdrop-filter: blur(18px) saturate(80%);
}

.acct-card[class*="acct-card--"]::after {
  background: radial-gradient(circle, rgb(255 255 255 / 10%), transparent 65%);
}

/* ===== 2026-10-14（v235）：手機版總覽各區塊間距拉開（Lucas） ===== */
@media (max-width: 959px) {
  .quick-dock {
    margin-bottom: var(--space-8);
  }

  .summary-grid,
  .content-grid {
    gap: var(--space-6);
  }

  .summary-grid {
    margin-bottom: var(--space-6);
  }

  .summary-grid > .acct-cards {
    margin-bottom: var(--space-2);
  }

  .acct-cards .acct-filter {
    margin-top: var(--space-2);
  }
}

/* ===== 2026-10-14（v235 追加）：手機版間距再拉開；「本月剩多少」移回「我的帳戶」上方（Lucas：兩區對調） ===== */
@media (max-width: 959px) {
  .quick-dock {
    margin-bottom: var(--space-10);
  }

  .summary-grid,
  .content-grid {
    gap: var(--space-10);
  }

  .summary-grid {
    margin-bottom: var(--space-10);
  }

  .summary-grid > .acct-cards {
    order: 0;
    margin-bottom: 0;
  }
}

/* ===== 2026-10-14（v235 追加）：總覽依「先做事 → 看結果 → 看細節」排序，手機與電腦一致（Lucas 確認）=====
   常用功能 → 待辦（未配置收入、今日對帳，只在需要時出現）→ 本月剩多少＋支出區間（電腦並排）→ 我的帳戶
   → 最近記錄／本月規劃／夢想熱氣球（content-grid，DOM 本來就在 summary-grid 後面）。
   用 id／雙 class 提高權重，蓋過前面各斷點的 order 設定。 */
.summary-grid > #unallocated-card {
  order: -3;
}

.summary-grid > #reconciliation-card {
  order: -2;
}

.summary-grid > .balance-card--hero,
.summary-grid > .metric-card.metric-card--period {
  order: -1;
}

.summary-grid > #account-balances-panel {
  order: 1;
}

/* ===== 2026-10-14（v235 追加）：顏色收斂回「象牙白／碳黑＋一個主題色」（Lucas 同意）=====
   - 帳戶卡片 12 色 → 3 色調（依帳戶性質）：資金類＝主題色、信用／負債類＝碳灰、投資／保障類＝暖灰；全部白字。
   - 「本月剩多少」卡＝主題色毛玻璃；淺金連結改白字。
   - 主題色取 --amber-700（翠綠／琥珀／靛藍主題會自動跟著換）再混碳灰降飽和；不支援 color-mix 的瀏覽器用翠綠版固定色。 */
:root {
  --glass-accent: #2f4a43;
  --glass-carbon: #3d3e39;
  --glass-warm: #5e5d56;
}

@supports (color: color-mix(in oklab, red, blue)) {
  :root {
    --glass-accent: color-mix(in oklab, var(--amber-700) 62%, var(--carbon-700));
  }
}

.acct-card--cash,
.acct-card--bank,
.acct-card--epayment,
.acct-card--stored,
.acct-card--billing,
.acct-card--settlement {
  --acct-glass: var(--glass-accent);
}

.acct-card--credit,
.acct-card--liability,
.acct-card--loan {
  --acct-glass: var(--glass-carbon);
}

.acct-card--investment,
.acct-card--insurance,
.acct-card--goal {
  --acct-glass: var(--glass-warm);
}

.acct-card[class*="acct-card--"] {
  color: #ffffff;
  background:
    linear-gradient(115deg, rgb(255 255 255 / 20%) 0%, rgb(255 255 255 / 5%) 38%, rgb(255 255 255 / 0%) 60%),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0%) 0, rgb(255 255 255 / 7%) 5px, rgb(0 0 0 / 5%) 10px, rgb(255 255 255 / 0%) 12px),
    var(--acct-glass, var(--glass-accent));
}

@supports (color: color-mix(in oklab, red, blue)) {
  .acct-card[class*="acct-card--"] {
    background:
      linear-gradient(115deg, rgb(255 255 255 / 20%) 0%, rgb(255 255 255 / 5%) 38%, rgb(255 255 255 / 0%) 60%),
      repeating-linear-gradient(90deg, rgb(255 255 255 / 0%) 0, rgb(255 255 255 / 7%) 5px, rgb(0 0 0 / 5%) 10px, rgb(255 255 255 / 0%) 12px),
      color-mix(in srgb, var(--acct-glass, var(--glass-accent)) 90%, transparent);
  }
}

.acct-card[class*="acct-card--"] .acct-card__chip {
  fill: rgb(255 255 255 / 22%);
  stroke: rgb(255 255 255 / 45%);
}

.acct-card[class*="acct-card--"] .acct-card__status {
  background: rgb(255 255 255 / 18%);
}

.acct-card[class*="acct-card--"] .acct-card__progress {
  background: rgb(255 255 255 / 25%);
}

.acct-card[class*="acct-card--"] .acct-card__progress i {
  background: #ffffff;
}

/* 琥珀主題的 amber-700 比較亮，多混碳灰才能讓白字對比 ≥ 4.5 */
@supports (color: color-mix(in oklab, red, blue)) {
  :root[data-theme="amber"] {
    --glass-accent: color-mix(in oklab, var(--amber-700) 42%, var(--carbon-700));
  }
}

/* ===== 2026-10-14（v235 追加）：支出區間拿掉白底，只留線框（Lucas） ===== */
.summary-grid > .metric-card.metric-card--period {
  background: transparent;
  border: 1px solid var(--carbon-150);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ===== 2026-10-14（v236）：手機疊卡改真實信用卡比例＋帳戶卡片避開「本月剩多少」的主題色（Lucas）=====
   1. 手機（<960px）疊卡高度原本固定 176px（寬約 343px，比例 1.95），改用 aspect-ratio 85.6:54；
      寬度上限 440px，平板不會變超大卡。
   2. 主題色只留給「本月剩多少」：資金類卡片改碳灰、信用／負債類改更深的碳黑、投資／保障類維持暖灰。 */
@media (max-width: 959px) {
  .acct-stack,
  .acct-stack.is-double,
  .acct-stack.is-single {
    width: 100%;
    max-width: 440px;
    height: auto;
    aspect-ratio: 85.6 / 54;
  }
}

:root {
  --glass-deep: #262723;
}

.acct-card--cash,
.acct-card--bank,
.acct-card--epayment,
.acct-card--stored,
.acct-card--billing,
.acct-card--settlement {
  --acct-glass: var(--glass-carbon);
}

.acct-card--credit,
.acct-card--liability,
.acct-card--loan {
  --acct-glass: var(--glass-deep);
}

/* ===== 2026-10-14（v237）：手機版頁首——分享＋頭像自成一列，跟 Logo／標題拉開；日期緊貼在標題正上方（Lucas） ===== */
@media (max-width: 639px) {
  .topbar-heading {
    padding-top: 64px;
  }

  .topbar-heading__row {
    align-items: center;
  }

  .topbar-heading__title #today-label {
    display: block;
    min-height: 0;
    margin: 0 0 0.2rem;
    padding-right: 0;
  }
}

/* ===== 2026-10-14（v237）：手機版支出區間拿掉線框、往上貼近「本月剩多少」（Lucas 試看）===== */
@media (max-width: 959px) {
  .summary-grid > .metric-card.metric-card--period {
    margin-top: calc(var(--space-10) * -1 + var(--space-2));
    padding-top: var(--space-3);
    border: 0;
    border-radius: 0;
  }
}

/* ===== 2026-10-14（v237）：手機版「我的帳戶」拿掉標題（各帳戶餘額／我的帳戶），張數＋箭頭＋全部帳戶＋新增置中（Lucas）=====
   標題只是視覺隱藏，螢幕報讀仍讀得到（區塊 aria-labelledby 指向它）。 */
@media (max-width: 959px) {
  .acct-cards__head {
    justify-content: center;
  }

  .acct-cards__head > div:first-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ===== 2026-10-14（v238）：帳戶類型篩選放入全部 11 種類型（夢想基金不在總覽疊卡裡所以不列），膠囊縮小（Lucas） ===== */
.acct-filter {
  gap: 5px;
}

.acct-filter button {
  min-height: 28px;
  padding: 0 11px;
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}

/* ===== 2026-10-14（v238）：「今日對帳」卡精簡（Lucas：區塊很突兀）=====
   標題＝狀態（今天還沒對帳／今天 HH:MM 已對帳），第二行「帳戶・目前餘額」；拿掉提醒時間那行與齒輪
   （提醒設定在帳戶頁「每日對帳」）；圖示改淡底無框；按鈕改黑色膠囊「對帳」；不再用橘色框，到時間只把圖示染琥珀。 */
.reconciliation-card {
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.reconciliation-card[data-state="due"] {
  border-color: var(--line);
}

.reconciliation-card__icon {
  width: 40px;
  height: 40px;
  color: var(--carbon-700);
  background: rgb(25 26 24 / 5%);
  border: 0;
  border-radius: 12px;
}

.reconciliation-card__icon .menu-icon {
  width: 20px;
  height: 20px;
}

.reconciliation-card[data-state="due"] .reconciliation-card__icon {
  border: 0;
}

.reconciliation-card__text h3 {
  font-size: 0.95rem;
}

.reconciliation-card__text p,
.reconciliation-card__settings {
  display: none;
}

.reconciliation-card__start,
.reconciliation-card__start.button--primary {
  min-height: 36px;
  padding-inline: 1.1rem;
  color: #ffffff;
  background: var(--ink);
  border-color: var(--ink);
  border-radius: 999px;
  font-size: 0.85rem;
}

.reconciliation-card__start.button--ghost {
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
}

@media (max-width: 380px) {
  .reconciliation-card {
    grid-template-columns: 40px minmax(0, 1fr) auto;
  }

  .reconciliation-card__actions {
    grid-column: auto;
  }

  .reconciliation-card__start {
    flex: none;
  }
}

/* ===== 2026-10-14（v239）：「今日對帳」移到「我的帳戶」卡片正下方（Lucas：看完卡片金額再按對帳），手機與電腦一致 ===== */
.summary-grid > #reconciliation-card {
  order: 2;
}

/* 手機：今日對帳跟上面的帳戶卡片是同一組，間距從 40px 收到 16px */
@media (max-width: 959px) {
  .summary-grid > #reconciliation-card {
    margin-top: calc(var(--space-10) * -1 + var(--space-4));
  }
}

/* 手機：常用功能貼近下面的「本月剩多少」，間距 40px → 16px（Lucas） */
@media (max-width: 959px) {
  .quick-dock {
    margin-bottom: var(--space-4);
  }
}

/* ===== 2026-10-14（v240）：iPhone 換新圖示提醒卡（沿用 .install-app-card） ===== */
.icon-refresh-card__icon {
  overflow: hidden;
  padding: 0;
  background: transparent;
  border: 0;
}

.icon-refresh-card__icon img {
  display: block;
  width: 100%;
  height: 100%;
}

.icon-refresh-card__sync {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  font-weight: 650;
}

.icon-refresh-card__sync[data-state="ok"] {
  color: var(--income-green);
}

.icon-refresh-card__sync[data-state="pending"] {
  color: var(--warning-ink);
}

.icon-refresh-card__actions {
  display: flex;
  gap: var(--space-2);
}

.icon-refresh-card__actions .button {
  flex: 1;
}

.icon-refresh-card__howto {
  margin-top: 0.35rem;
  padding: 0.5rem 0.7rem;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 650;
  background: rgb(25 26 24 / 5%);
  border-radius: 10px;
}

/* ===== 2026-10-14（v242）：有新版本提示條（固定在最上方、關不掉，點了就更新） ===== */
.app-update-banner {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  left: 50%;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0.5rem 0.45rem 1rem;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 650;
  white-space: nowrap;
  background: var(--ink);
  border-radius: 999px;
  box-shadow: 0 10px 28px rgb(25 26 24 / 22%);
  transform: translateX(-50%);
}

.app-update-banner[hidden] {
  display: none;
}

.app-update-banner button {
  min-height: 32px;
  padding: 0 0.9rem;
  color: var(--ink);
  font-weight: 750;
  background: #ffffff;
  border: 0;
  border-radius: 999px;
}

/* 2026-10-14（v242）：只有一張帳戶卡時不需要翻卡手勢，上下滑交給頁面捲動 */
.acct-stack.is-single {
  touch-action: pan-y;
}

.acct-stack.is-single .acct-card[data-depth="0"] {
  cursor: pointer;
}

/* ===== 2026-10-14（v243）：換圖示提醒「怎麼做」改成三個圖文步驟（斷行） ===== */
.icon-refresh-card__steps {
  display: grid;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
  padding: 0.7rem 0.75rem;
  list-style: none;
  background: rgb(25 26 24 / 5%);
  border-radius: 12px;
}

.icon-refresh-card__steps[hidden] {
  display: none;
}

.icon-refresh-card__steps li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.4;
}

.icon-refresh-card__steps b {
  font-variant-numeric: tabular-nums;
}

.icon-refresh-card__step-icon {
  display: grid;
  flex: none;
  width: 32px;
  height: 32px;
  place-items: center;
  color: var(--ink);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 9px;
}

.icon-refresh-card__step-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

/* 步驟清單放在卡片文字下方、跨整張卡片寬度，三步各一行比較好讀 */
.icon-refresh-card .icon-refresh-card__steps {
  grid-column: 1 / -1;
  margin: 0;
}

/* ===== 2026-10-14（v244）：最新消息——鈴鐺（分享與頭像中間）＋紅點＋通知清單 ===== */
.topbar-bell {
  position: relative;
}

.topbar-bell__dot {
  position: absolute;
  top: 9px;
  right: 10px;
  display: none;
  width: 9px;
  height: 9px;
  background: var(--expense-red);
  border: 2px solid var(--surface-strong);
  border-radius: 50%;
}

.topbar-actions .topbar-bell .topbar-bell__dot {
  top: 7px;
  right: 8px;
}

.topbar-bell.has-unread .topbar-bell__dot {
  display: block;
}

/* 2026-10-18 改版（Lucas 要求）：原本只在未讀數字「剛出現那一刻」搖一下（animation 的 1 代表只播
   一次），改成只要還有未讀，就持續每 3.2 秒搖擺＋放大縮小一次，提醒效果更明顯，不是看到那一瞬間
   沒注意到就錯過了。節奏上搖擺動作本身大約落在每個循環的前 0.8 秒，其餘時間是靜止的，不是一直抖
   不停。 */
.topbar-bell.has-unread svg {
  animation: news-bell-pulse 3.2s var(--ease) infinite;
  transform-origin: 50% 15%;
}

@keyframes news-bell-pulse {
  0%, 55%, 100% { transform: rotate(0) scale(1); }
  5% { transform: rotate(14deg) scale(1.14); }
  10% { transform: rotate(-12deg) scale(1.1); }
  15% { transform: rotate(8deg) scale(1.12); }
  20% { transform: rotate(-5deg) scale(1.04); }
  25% { transform: rotate(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .topbar-bell.has-unread svg {
    animation: none;
  }
}

.news-dialog {
  display: grid;
  gap: var(--space-3);
}

.news-list {
  display: grid;
  gap: var(--space-3);
  max-height: min(68vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.news-item {
  display: grid;
  gap: 0.45rem;
  padding: var(--space-4);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.news-item.is-new {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}

.news-item__meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
}

.news-item__badge {
  padding: 0.05rem 0.45rem;
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 750;
  background: var(--expense-red);
  border-radius: 999px;
}

.news-item h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.4;
}

.news-item p {
  margin: 0;
  color: var(--carbon-700);
  font-size: 0.88rem;
  line-height: 1.65;
  white-space: pre-line;
}

.news-item__image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 280px;
  object-fit: cover;
  border-radius: 10px;
}

.news-item__link {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-self: start;
  gap: 0.3rem;
  padding: 0 0.95rem;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  background: var(--ink);
  border-radius: 999px;
}

.news-item__link svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

/* 2026-10-18（v389）：最新消息改成手風琴——.news-item 本身是 <details>，預設收合，
   點標題（.news-item__summary）才展開 .news-item__panel。沿用 .budget-card__details／
   .split-import-trigger 同一套慣例：summary 拿掉瀏覽器原生的三角形 marker，改用自己放的
   .news-item__chevron，展開時用 details[open] 直接轉向，不用另外寫 JS 切 class。 */
.news-item > summary {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  list-style: none;
  cursor: pointer;
}

.news-item > summary::-webkit-details-marker {
  display: none;
}

.news-item__summary-copy {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.news-item__summary-copy strong {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.4;
}

.news-item__summary-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-item__kind {
  color: var(--muted);
  font-weight: 700;
}

.news-item__kind--split {
  color: var(--accent);
}

.news-item__chevron {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  color: var(--muted);
  transition: transform var(--duration) var(--ease);
}

.news-item[open] .news-item__chevron {
  transform: rotate(180deg);
}

.news-item__panel {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.6rem;
}

.news-empty {
  margin: 0;
  padding: var(--space-5) var(--space-3);
  color: var(--muted);
  font-size: 0.88rem;
  text-align: center;
}

/* 鈴鐺右上角改成未讀數字（v244，Lucas） */
.topbar-bell .topbar-bell__dot,
.topbar-actions .topbar-bell .topbar-bell__dot {
  top: -4px;
  right: -4px;
  min-width: 19px;
  height: 19px;
  width: auto;
  padding: 0 5px;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 15px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  background: var(--expense-red);
  border: 2px solid var(--bg);
  border-radius: 999px;
}

.topbar-actions .topbar-bell .topbar-bell__dot {
  top: -5px;
  right: -5px;
}

/* 最新消息：YouTube 影片內嵌（16:9） */
.news-item__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000000;
  border-radius: 10px;
}

.news-item__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ===== 2026-10-18 新增（Lucas 要求）：分帳日誌——誰都可以改/刪分帳紀錄之後補上的
   可查性，列出每一筆新增／修改／刪除，是誰、什麼時候、動了什麼。版面刻意跟
   .news-list／.news-item 的卡片式列表同一套視覺語彙（同樣是群組功能裡「一串時間
   排序的事件」），但不直接共用 class，避免「日誌」跟「最新消息」的語意混在一起。 ===== */
.split-log-list {
  display: grid;
  gap: var(--space-3);
  max-height: min(68vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.split-log-item {
  display: grid;
  gap: 0.35rem;
  padding: var(--space-4);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.split-log-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
}

.split-log-item__action {
  padding: 0.05rem 0.5rem;
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 750;
  border-radius: 999px;
}

.split-log-item__action--create {
  background: var(--income-green);
}

.split-log-item__action--update {
  background: var(--accent);
}

.split-log-item__action--delete {
  background: var(--expense-red);
}

.split-log-item__action--restore {
  background: var(--primary);
}

/* v405：刪除那一則的「還原這筆」按鈕與「已還原」標記 */
.split-log-item__restore {
  justify-self: start;
  min-height: 36px;
  margin-top: 0.15rem;
  padding: 0 14px;
  font-size: 0.85rem;
  border-radius: 999px;
}

.split-log-item__restored {
  justify-self: start;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 650;
}

.split-log-item__summary {
  margin: 0;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.5;
}

.split-log-item__changes {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--carbon-700);
  font-size: 0.85rem;
  line-height: 1.6;
}

/* ===== 2026-10-14（v245）：管理者才看得到的後台齒輪（頭像右邊） ===== */
.topbar-admin {
  text-decoration: none;
}

.topbar-admin[hidden] {
  display: none;
}

/* ===== v406（Lucas）：登出放進「帳號設定」最上面的會員資訊列（右側），用淡色外框、不搶眼 ===== */
.member-summary__logout {
  flex: 0 0 auto;
  min-height: 36px;
  margin-left: auto;
  padding: 0 14px;
  color: var(--expense-red);
  font-size: 0.85rem;
  border-color: currentColor;
}

/* ===== 2026-10-14（v246）：語音記帳——提示改深酒紅、「手動記帳」捷徑在記帳按鈕左邊（Lucas） ===== */
.voice-quick__example .voice-quick__example-help {
  color: #7d1f2c;
  font-weight: 650;
}

.voice-quick__example-help > span {
  color: #7d1f2c;
  border-color: #7d1f2c;
}

.voice-quick .dialog-actions {
  align-items: center;
}

.voice-quick__manual {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-right: auto;
}

.voice-quick__manual svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.voice-quick__token small {
  white-space: nowrap;
}

/* 很窄的手機（≤360px）：拆開來看那排縮小一點，「店家或項目」不換行也不會撐破視窗 */
@media (max-width: 360px) {
  .voice-quick__tokens {
    gap: 0.1rem;
  }

  .voice-quick__example .voice-quick__token b,
  .voice-quick__token b {
    padding: 0.35rem 0.4rem;
    font-size: 0.85rem;
  }

  .voice-quick__example .voice-quick__token small,
  .voice-quick__token small {
    font-size: 0.68rem;
  }

  .voice-quick__plus {
    font-size: 0.7rem;
  }
}

@media (max-width: 360px) {
  .voice-quick__say {
    font-size: 1.05rem;
    white-space: normal;
  }

  .voice-quick__tokens {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.4rem;
  }
}

/* ===== 2026-10-14（v248）：預算頁改版——本月收入、調整按鈕滿版、每個分類一張算式卡、結轉附算式 ===== */
.budget-income-overview {
  align-items: center;
  margin-bottom: var(--space-4);
}

.budget-income-overview > div {
  display: grid;
  gap: 0.2rem;
}

.budget-income-overview small {
  color: var(--muted);
  font-size: 0.78rem;
}

.budget-adjust-button {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-bottom: var(--space-5);
}

.budget-unallocated[hidden] {
  display: none;
}

.budget-unallocated span strong {
  font-size: 1rem;
  color: var(--ink);
}

.budget-breakdown {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

@media (min-width: 960px) {
  .budget-breakdown {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

.budget-breakdown__empty {
  margin: 0;
  padding: var(--space-5);
  color: var(--muted);
  text-align: center;
}

.budget-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  background: rgb(255 253 248 / 88%);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.budget-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.budget-card__head h3 {
  margin: 0;
  font-size: 1.05rem;
}


.budget-card__icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: none;
  place-items: center;
  color: var(--accent);
  background: var(--amber-50);
  border-radius: 11px;
}

.budget-card__icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.budget-card__math {
  display: grid;
  gap: 0.45rem;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-strong);
  border-radius: 12px;
}

.budget-card__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--carbon-700);
  font-size: 0.86rem;
}

.budget-card__row b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.budget-card__row--minus b {
  color: var(--expense-red);
}

.budget-card__row--plus b {
  color: var(--income-green);
}

.budget-card__result {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--line);
}

.budget-card__result span {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
}

.budget-card__result strong {
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
}

.budget-card[data-state="over"] .budget-card__result strong,
.budget-card[data-state="over"] .budget-card__result span {
  color: var(--expense-red);
}

.budget-card__bar {
  display: block;
  height: 7px;
  overflow: hidden;
  background: #ebe5d6;
  border-radius: 999px;
}

.budget-card__bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
}

.budget-card[data-state="warn"] .budget-card__bar i {
  background: var(--warning);
}

.budget-card[data-state="over"] .budget-card__bar i {
  background: var(--expense-red);
}

.budget-card__note {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}




/* ===== v249：預算卡算式第一行附小字乘法、結轉列改兩行 ===== */


.budget-card__row {
  align-items: center;
}






/* ===== v250：依帳戶追蹤的預算卡——展開看本月算進來的每一筆 ===== */
.budget-card__details {
  border-top: 1px solid var(--line);
  padding-top: var(--space-3);
}

.budget-card__details summary {
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.budget-card__details summary::-webkit-details-marker {
  display: none;
}

.budget-card__details summary::after {
  content: " ›";
}

.budget-card__details[open] summary::after {
  content: " ˅";
}

.budget-card__details ul {
  display: grid;
  gap: 0.5rem;
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.budget-card__details li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 0.84rem;
}

.budget-card__details li span {
  display: grid;
  min-width: 0;
}

.budget-card__details li b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.budget-card__details li small {
  color: var(--muted);
  font-size: 0.74rem;
}

.budget-card__details li em {
  flex: none;
  font-style: normal;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.budget-card__details li em.is-in {
  color: var(--expense-red);
}

.budget-card__details li em.is-out {
  color: var(--income-green);
}

.budget-card__details p {
  margin: var(--space-3) 0 0;
  color: var(--muted);
  font-size: 0.76rem;
}

/* ===== 2026-10-14（v252）：語音記股票確認卡 ===== */
.voice-invest {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.voice-invest[hidden] {
  display: none;
}

.voice-invest__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.voice-invest__head strong {
  font-size: 1.15rem;
}

.voice-invest__action {
  padding: 0.2rem 0.6rem;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 750;
  background: var(--expense-red);
  border-radius: 999px;
}

.voice-invest__action[data-action="sell"] {
  background: var(--income-green);
}

.voice-invest__math {
  display: grid;
  gap: 0.4rem;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-strong);
  border-radius: 12px;
}

.voice-invest__math > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 0.88rem;
}

.voice-invest__math span {
  color: var(--muted);
}

.voice-invest__math b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.voice-invest__math .is-total {
  padding-top: 0.4rem;
  border-top: 1px dashed var(--line);
}

.voice-invest__math .is-total b {
  font-size: 1.15rem;
}

.voice-invest__status {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--income-green);
}

.voice-invest__status[data-state="warn"] {
  color: #7d1f2c;
}

.voice-quick__stock-tip {
  margin: 0.6rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}

.voice-quick .dialog-actions .button {
  white-space: nowrap;
}

@media (max-width: 420px) {
  .voice-quick .dialog-actions {
    gap: 0.4rem;
  }

  .voice-quick .dialog-actions .button {
    padding-inline: 0.8rem;
  }
}

/* 手機：按鈕放不下時，「確認／記帳」大按鈕換到下一行滿版，手動記帳、重說在上一行 */
@media (max-width: 480px) {
  .voice-quick .dialog-actions {
    flex-wrap: wrap;
  }

  .voice-quick .dialog-actions #voice-quick-save {
    flex: 1 1 100%;
    order: 3;
  }
}

/* ===== 2026-10-14（v253）：「這樣說」解說卡——左右滑動，一種語音功能一張 ===== */
.voice-guide {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.voice-guide[hidden] {
  display: none;
}

.voice-guide__tabs {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.voice-guide__tabs button {
  min-height: 32px;
  padding: 0 14px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  background: #ebe5d6;
  border: 0;
  border-radius: 999px;
}

.voice-guide__tabs button.is-on {
  color: #ffffff;
  background: var(--ink);
}

.voice-guide__track {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  gap: 0;
}

.voice-guide__track::-webkit-scrollbar {
  display: none;
}

.voice-guide__slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.voice-guide__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.voice-guide__dots i {
  width: 6px;
  height: 6px;
  background: var(--carbon-150);
  border-radius: 999px;
  transition: width 0.2s var(--ease), background-color 0.2s var(--ease);
}

.voice-guide__dots i.is-on {
  width: 18px;
  background: var(--ink);
}

/* 解說卡在窄螢幕：範例句與拆解標籤可以換行，卡片不會被撐寬 */
.voice-guide__slide .voice-quick__say {
  white-space: normal;
  text-wrap: balance;
}

.voice-guide__slide .voice-quick__tokens {
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 0.45rem;
}

.voice-guide__slide .voice-quick__example-help {
  min-width: 0;
}

.voice-guide__slide .voice-quick__say {
  word-break: keep-all;
}

/* ===== v254：解說卡左右箭頭（只在滑鼠裝置顯示，手機用滑的） ===== */
.voice-guide__viewport {
  position: relative;
  min-width: 0;
}

.voice-guide__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: none;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  color: var(--ink);
  background: rgb(255 253 248 / 94%);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgb(25 26 24 / 12%);
  transform: translateY(-50%);
  cursor: pointer;
}

.voice-guide__arrow--prev {
  left: -12px;
}

.voice-guide__arrow--next {
  right: -12px;
}

.voice-guide__arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.voice-guide__arrow:hover,
.voice-guide__arrow:focus-visible {
  background: #ffffff;
}

@media (hover: hover) and (pointer: fine) {
  .voice-guide__arrow {
    display: grid;
  }
}

/* ===== 2026-10-14（v255）：語音記帳——解說卡不斷行、按鈕固定在底部（左手動、右記帳）（Lucas 手機測試） ===== */
/* 範例句與拆解標籤用「跟螢幕寬度走」的字級（min 取 rem 與 vw 較小者），
   就算手機系統字體調大也維持一行，不會把「買入」擠到第二行 */
.voice-guide__slide .voice-quick__say {
  font-size: min(1.25rem, 4.6vw);
  white-space: nowrap;
  word-spacing: 0.12em;
}

.voice-guide__slide .voice-quick__tokens {
  flex-wrap: nowrap;
  gap: 2px;
}

.voice-guide__slide .voice-quick__token {
  min-width: 0;
}

.voice-guide__slide .voice-quick__token b {
  padding: 0.3em 0.45em;
  font-size: min(0.85rem, 3.5vw);
  white-space: nowrap;
}

.voice-guide__slide .voice-quick__token small {
  font-size: min(0.72rem, 3vw);
}

.voice-guide__slide .voice-quick__plus {
  font-size: min(0.7rem, 2.8vw);
}

/* 按鈕列：永遠一行，左邊手動記帳、右邊記帳（較寬），黏在視窗底部不用滑到底 */
.voice-quick .dialog-actions {
  position: sticky;
  bottom: calc(-1 * var(--space-5));
  z-index: 3;
  flex-wrap: nowrap;
  margin: 0 calc(-1 * var(--space-5)) calc(-1 * var(--space-5));
  padding: var(--space-3) var(--space-5) var(--space-5);
  background: linear-gradient(to bottom, rgb(255 253 248 / 0%), var(--surface) 30%);
}

.voice-quick .dialog-actions .voice-quick__manual {
  flex: 0 0 auto;
  margin-right: 0;
}

.voice-quick .dialog-actions #voice-quick-save {
  flex: 1 1 auto;
  order: 0;
}

@media (max-width: 480px) {
  .voice-quick .dialog-actions {
    flex-wrap: nowrap;
  }

  .voice-quick .dialog-actions #voice-quick-save {
    flex: 1 1 auto;
    order: 0;
  }

  /* 手機：麥克風區收緊一點，整個畫面少滑 */
  .voice-quick {
    gap: var(--space-4);
  }

  .voice-quick__stage {
    gap: var(--space-2);
    padding: 0;
  }

  .voice-quick__mic {
    width: 84px;
    height: 84px;
  }

  .voice-quick__mic svg {
    width: 36px;
    height: 36px;
  }
}

/* ===== 2026-10-14（v256）：語音停頓倒數線——線縮完就自動結束 ===== */
.voice-quick__countdown {
  width: 96px;
  height: 3px;
  overflow: hidden;
  background: var(--carbon-150, #e3ded2);
  border-radius: 999px;
}

.voice-quick__countdown[hidden] {
  display: none;
}

.voice-quick__countdown i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
  transform-origin: left center;
}

.voice-quick:not([data-state="listening"]) .voice-quick__countdown {
  display: none;
}

/* ===== 2026-10-14（v257）：語音記帳金額改成可直接輸入的欄位 ===== */
.voice-quick__hero {
  cursor: text;
}

.voice-quick__amount-field {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.15rem;
  max-width: 100%;
  padding: 0.1rem 0.4rem 0.2rem;
  border-bottom: 1.5px dashed var(--carbon-300);
  transition: border-color var(--duration) var(--ease);
}

.voice-quick__amount-field:focus-within {
  border-bottom: 1.5px solid var(--accent);
}

.voice-quick__amount-field em {
  color: var(--muted);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 700;
}

.voice-quick__amount-field input {
  width: 5.6ch;
  min-width: 0;
  padding: 0;
  color: var(--ink);
  font: inherit;
  font-size: 2.1rem;
  font-weight: 750;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  text-align: left;
  background: transparent;
  border: 0;
  outline: none;
  max-inline-size: 100%;
}

.voice-quick__amount-field input::placeholder {
  color: #b5524c;
  font-size: 1.4rem;
  font-weight: 700;
}

.voice-quick__amount-field.is-missing {
  border-bottom-color: #b5524c;
}

.voice-quick__amount-field.is-missing:focus-within {
  border-bottom-color: var(--accent);
}

.voice-quick__amount-hint {
  margin-top: 0.15rem;
  color: #7d1f2c;
  font-size: 0.75rem;
  font-weight: 650;
}

/* ===== 2026-10-15（v287）：語音支出的一鍵分類建議＋待分類提醒 ===== */
.voice-quick__classification {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  color: var(--ink);
  background: #fff7e5;
  border: 1px solid color-mix(in srgb, var(--warning) 42%, var(--line));
  border-radius: var(--radius-md);
}

.voice-quick__classification[hidden] {
  display: none;
}

.voice-quick__classification > div:first-child {
  display: grid;
  gap: 0.2rem;
}

.voice-quick__classification strong {
  font-size: 0.95rem;
  line-height: 1.45;
}

.voice-quick__classification small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.voice-quick__suggestions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.voice-quick__suggestions button,
.voice-quick__defer {
  min-height: 44px;
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.35;
}

.voice-quick__suggestions button {
  color: var(--primary-strong);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
}

.voice-quick__suggestions button:hover,
.voice-quick__suggestions button:focus-visible {
  color: #ffffff;
  background: var(--primary-strong);
  border-color: var(--primary-strong);
}

.voice-quick__defer {
  justify-self: start;
  min-height: 44px;
  padding-inline: 0;
  color: #7d1f2c;
  background: transparent;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===== 2026-10-18（v402）：語音記帳「你是在這裡消費嗎？」定位確認卡 ===== */
.voice-place {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: var(--radius-md);
}

.voice-place[hidden],
.voice-place__actions[hidden],
.voice-place__others[hidden] {
  display: none;
}

.voice-place__head {
  display: grid;
  gap: 0.2rem;
}

.voice-place__head strong {
  font-size: 0.95rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.voice-place__head small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.voice-place__head small:empty {
  display: none;
}

.voice-place[data-state="locating"] .voice-place__head strong {
  color: var(--muted);
  font-weight: 650;
}

.voice-place__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.voice-place__yes,
.voice-place__no,
.voice-place__option,
.voice-place__manual {
  min-height: 44px;
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1.35;
}

.voice-place__yes {
  color: #ffffff;
  background: var(--primary-strong);
  border: 1px solid var(--primary-strong);
}

.voice-place__no,
.voice-place__option {
  color: var(--primary-strong);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
}

.voice-place__no:hover,
.voice-place__no:focus-visible,
.voice-place__option:hover,
.voice-place__option:focus-visible {
  color: #ffffff;
  background: var(--primary-strong);
  border-color: var(--primary-strong);
}

.voice-place__others {
  display: grid;
  gap: var(--space-2);
}

.voice-place__option {
  display: grid;
  gap: 0.1rem;
  text-align: left;
}

.voice-place__option span {
  font-size: 0.76rem;
  font-weight: 600;
  opacity: 0.75;
}

.voice-place__manual {
  justify-self: start;
  padding-inline: 0;
  color: var(--muted);
  background: transparent;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pending-classification-card {
  order: 2;
  border-color: color-mix(in srgb, var(--warning) 45%, var(--line));
}

.pending-classification-card .reconciliation-card__icon {
  color: var(--warning-ink);
  background: var(--warning-soft);
}

.pending-classification-card .reconciliation-card__text p {
  display: block;
  color: var(--warning-ink);
}

.pending-classification-card .reconciliation-card__start,
.pending-classification-card .reconciliation-card__start.button--primary {
  color: var(--ink);
  background: var(--warning-soft);
  border-color: color-mix(in srgb, var(--warning) 48%, var(--line));
}

@media (max-width: 380px) {
  .voice-quick__suggestions {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===== 2026-10-15（v289）：語音記帳介面簡化 =====
   取消教學輪播與卡中卡，開始說話前只留兩句靜態範例；
   辨識完成後將麥克風區收成簡短狀態列，主視覺回到金額、分類與帳戶確認。 */
.voice-quick__prompts {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.voice-quick__prompts[hidden] {
  display: none;
}

.voice-quick__prompts-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.voice-quick__prompts-head strong {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 750;
}

.voice-quick__prompts-head small {
  color: var(--muted);
  font-size: 0.72rem;
  white-space: nowrap;
}

.voice-quick__prompt-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block: 1px solid var(--line);
}

.voice-quick__prompt-list li {
  display: grid;
  grid-template-columns: 5.2rem minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-3);
  min-width: 0;
  padding: 0.7rem 0;
}

.voice-quick__prompt-list li + li {
  border-top: 1px solid var(--line);
}

.voice-quick__prompt-list span {
  color: var(--accent-strong);
  font-size: 0.75rem;
  font-weight: 750;
}

.voice-quick__prompt-list q {
  min-width: 0;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.voice-quick__prompts > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.55;
}

/* v291：店家、分類與帳戶都留在語音確認視窗內修改，不再把使用者送往完整手動表單。 */
.voice-quick__inline-editor,
.voice-quick__classification-editor {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--line);
}

.voice-quick__inline-editor[hidden],
.voice-quick__classification-editor[hidden],
.voice-quick__suggestions[hidden],
.voice-quick__defer[hidden] {
  display: none;
}

.voice-quick__inline-editor > span,
.voice-quick__classification-editor label > span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.voice-quick__inline-editor input,
.voice-quick__classification-editor select {
  width: 100%;
  min-height: 44px;
  padding: 0 0.8rem;
  color: var(--ink);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
}

.voice-quick__inline-editor input:focus-visible,
.voice-quick__classification-editor select:focus-visible {
  border-color: var(--accent);
  outline: 3px solid color-mix(in srgb, var(--accent) 18%, transparent);
  outline-offset: 1px;
}

.voice-quick__inline-editor small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.5;
}

.voice-quick__classification-editor {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.voice-quick__classification-editor label {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

@media (max-width: 380px) {
  .voice-quick__classification-editor {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 辨識完成後，「重說」已經在底部，不再同時保留大麥克風佔用首屏高度。 */
.voice-quick[data-state="done"] .voice-quick__stage {
  display: block;
  padding: 0.75rem 0.9rem;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  border-radius: 14px;
}

.voice-quick[data-state="done"] .voice-quick__mic,
.voice-quick[data-state="done"] .voice-quick__wave,
.voice-quick[data-state="done"] .voice-quick__countdown {
  display: none;
}

.voice-quick[data-state="done"] .voice-quick__status {
  margin: 0;
  color: var(--accent-strong);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
}

/* 結果本身不再多包一張大卡，只保留資訊分隔與可點選的欄位。 */
.voice-quick__result {
  gap: var(--space-3);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.voice-quick__classification {
  padding: var(--space-3) 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--warning) 42%, var(--line));
  border-radius: 0;
}

.voice-quick__suggestions button {
  background: var(--surface-strong);
}

@media (max-width: 420px) {
  .voice-quick__prompts-head {
    display: grid;
    gap: 0.15rem;
  }

  .voice-quick__prompts-head small {
    white-space: normal;
  }

  .voice-quick__prompt-list li {
    grid-template-columns: 4.7rem minmax(0, 1fr);
    gap: var(--space-2);
  }
}

/* ===== 2026-10-14（v259）：手機版其他頁面顯示整條「常用功能」（由 placeQuickDock() 搬進 #quick-dock-slot） ===== */
.quick-dock-slot:empty {
  display: none;
}

.quick-dock-slot > .quick-dock {
  margin-bottom: var(--space-5);
}

/* ===== 2026-10-14（v260）：「我的部位」證券 App 式表格——一檔一列，上下兩行數字對齊 ===== */
.position-table {
  display: grid;
  grid-template-columns: minmax(3.6em, 1fr) auto auto auto auto;
  column-gap: 10px;
  margin: 0 calc(-1 * var(--space-2));
  font-variant-numeric: tabular-nums;
}

/* 每一列用 subgrid 共用同一組欄寬，各列數字上下對齊 */
.position-table__head,
.position-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  padding: 0 var(--space-2);
}

.position-table__head {
  padding-block: 8px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.35;
  background: #f4f0e6;
  border-radius: 10px;
}

.position-table__head span:not(:first-child),
.position-row__cell {
  text-align: right;
}

.position-row {
  padding-block: 12px;
  border-bottom: 1px solid var(--line);
}

.position-row:last-child {
  border-bottom: 0;
}

.position-row__name {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.position-row__name small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
}

.position-row__name strong {
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.position-row__name em {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.68rem;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.position-row__cell {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.position-row__cell b {
  color: var(--ink);
  font-size: min(0.9rem, 3.5vw);
  font-weight: 700;
  white-space: nowrap;
}

.position-row__cell small {
  min-height: 1em;
  color: var(--muted);
  font-size: 0.72rem;
  white-space: nowrap;
}

.position-row__cell.is-positive b,
.position-row__cell.is-positive small {
  color: var(--income-green);
}

.position-row__cell.is-negative b,
.position-row__cell.is-negative small {
  color: var(--danger, #a2463f);
}

.position-table__note {
  margin: var(--space-3) 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  text-align: center;
}

@media (max-width: 380px) {
  .position-table {
    column-gap: 6px;
  }

  .position-row__name strong {
    font-size: 0.84rem;
  }
}

/* ===== 2026-10-14（v260）：投資頁上方改成證券 App「庫存分析」排版 ===== */
.investment-summary.is-broker {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

@media (min-width: 960px) {
  .investment-summary.is-broker {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}

.broker-card,
.broker-share {
  padding: var(--space-4);
  background: #fffdf8;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 2px 10px rgb(25 26 24 / 4%);
}

.broker-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.broker-ring {
  position: relative;
  flex: none;
  width: 112px;
  height: 112px;
  color: var(--ink);
}

.broker-ring svg,
.broker-share__donut svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.broker-ring circle,
.broker-share__donut circle {
  fill: none;
  stroke-width: 11;
}

.broker-ring__track {
  stroke: #ece6d8;
}

.broker-ring__value {
  stroke: var(--carbon-300, #b9b3a6);
  stroke-linecap: round;
}

.broker-ring.is-positive .broker-ring__value {
  stroke: var(--income-green);
}

.broker-ring.is-negative .broker-ring__value {
  stroke: var(--danger);
}

.broker-ring > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}

.broker-ring small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
}

.broker-ring b {
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.broker-ring.is-positive b {
  color: var(--income-green);
}

.broker-ring.is-negative b {
  color: var(--danger);
}

.broker-card__value {
  display: grid;
  min-width: 0;
  justify-items: end;
  gap: 2px;
  text-align: right;
}

.broker-card__value small {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 650;
}

.broker-card__value strong {
  color: var(--ink);
  font-size: min(2rem, 8vw);
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.broker-card__value em {
  color: var(--muted);
  font-size: 0.7rem;
  font-style: normal;
}

.broker-card__tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.broker-card__tiles > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
  background: #f4f0e6;
  border-radius: 14px;
}

.broker-card__tiles small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 650;
}

.broker-card__tiles b {
  color: var(--ink);
  font-size: min(1.15rem, 4.6vw);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.broker-card__extra {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px var(--space-3);
  margin: var(--space-3) 2px 0;
  color: var(--muted);
  font-size: 0.76rem;
}

.broker-card__extra b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.broker-card .is-positive {
  color: var(--income-green);
}

.broker-card .is-negative {
  color: var(--danger);
}

.broker-share {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.broker-share__donut {
  position: relative;
  flex: none;
  width: 108px;
  height: 108px;
}

.broker-share__donut circle {
  stroke-width: 14;
}

.broker-share__donut > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 750;
  line-height: 1.3;
  text-align: center;
}

.broker-share__legend {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.broker-share__legend li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
}

.broker-share__legend i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.broker-share__legend span {
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.broker-share__legend b {
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* v260：跟證券 App 一樣，庫存表格緊接在總覽下面（交割款提醒移到後面） */
.investment-content-grid > .position-panel {
  order: -1;
}

/* v260：投資頁「更新行情」列改滿版，跟下面的庫存卡片同寬（Lucas） */
[data-view-panel="investments"] > .section-heading--page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

[data-view-panel="investments"] > .section-heading--page .market-quote-control {
  width: 100%;
  max-width: none;
}

/* v262：交割款提醒——金額已在記帳時扣過，用一般字色＋小字說明，不用警示紅 */
.settlement-item__amount {
  display: grid;
  justify-items: end;
  gap: 2px;
  text-align: right;
}

.settlement-item__amount b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.settlement-item__amount small {
  color: var(--muted);
  font-size: 0.72rem;
}

.settlement-item__balance {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.76rem;
}

.settlement-item__balance b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.settlement-item__balance b.is-negative {
  color: var(--danger);
}

/* ===== v262：持有庫存——點個股展開交易紀錄 ===== */
.position-row[data-position-key] {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms var(--ease);
}

@media (hover: hover) {
  .position-row[data-position-key]:hover {
    background: rgb(25 26 24 / 3%);
  }
}

.position-row[data-position-key]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 10px;
}

.position-row__name strong::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  vertical-align: 0.18em;
  border-right: 1.5px solid var(--carbon-300, #b9b3a6);
  border-bottom: 1.5px solid var(--carbon-300, #b9b3a6);
  transform: rotate(45deg);
  transition: transform 180ms var(--ease);
}

.position-row.is-open .position-row__name strong::after {
  transform: translateY(2px) rotate(-135deg);
}

.position-row.is-open {
  border-bottom-color: transparent;
}

.position-history {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  margin: 0 var(--space-2) var(--space-3);
  padding: 10px 12px;
  background: #f4f0e6;
  border-radius: 14px;
}

.position-history[hidden] {
  display: none;
}

.position-history__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 6px 0;
}

.position-history__item + .position-history__item {
  border-top: 1px dashed rgb(25 26 24 / 12%);
}

.position-history__item > div {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 8px;
  row-gap: 2px;
  min-width: 0;
}

.position-history__action {
  padding: 2px 7px;
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 750;
  background: #fffdf8;
  border-radius: 999px;
}

.position-history__action--sell {
  color: var(--income-green);
}

.position-history__item b {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
}

.position-history__item small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.72rem;
}

.position-history__item > strong {
  flex: none;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.position-history__empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  text-align: center;
}

/* v263：股價欄下方的漲跌幅（顏色跟醬記一致：漲綠、跌紅） */
.position-row__cell small.is-up {
  color: var(--income-green);
}

.position-row__cell small.is-down {
  color: var(--danger);
}

/* ===== v264：交割款提醒卡片——標題列＋兩行金額對照，重點用紅色 ===== */
.settlement-card {
  display: grid;
  gap: 10px;
  padding: 14px 0;
}

.settlement-card + .settlement-card {
  border-top: 1px solid var(--line);
}

.settlement-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.settlement-card__head strong {
  min-width: 0;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 800;
}

.settlement-card__date {
  flex: none;
  padding: 4px 10px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 750;
  background: #f1ece0;
  border-radius: 999px;
}

.settlement-card__date.is-today {
  color: #ffffff;
  background: var(--danger);
}

.settlement-card__rows {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 12px 14px;
  background: #f6f2e9;
  border-radius: 14px;
}

.settlement-card__rows > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.settlement-card__rows dt {
  min-width: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 650;
}

.settlement-card__rows dd {
  flex: none;
  margin: 0;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.settlement-card__rows dd.is-debit {
  color: var(--danger);
}

.settlement-card__rows dd.is-credit {
  color: var(--income-green);
}

.settlement-card__note {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
}

/* ===== v265：帳戶卡片右下「編輯帳戶」按鈕＋帳戶交易紀錄視窗 ===== */
.acct-card__edit {
  flex: none;
  min-height: 30px;
  padding: 0 12px;
  color: inherit;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 750;
  background: rgb(255 255 255 / 16%);
  border: 1px solid rgb(255 255 255 / 35%);
  border-radius: 999px;
  cursor: pointer;
}

.acct-card__edit:hover,
.acct-card__edit:focus-visible {
  background: rgb(255 255 255 / 28%);
}

.account-tx__balance {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.account-tx__balance b {
  color: var(--ink);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.account-tx__balance b.is-negative {
  color: var(--danger);
}

.account-tx__list {
  max-height: min(60vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.account-tx__more {
  margin: var(--space-3) 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  text-align: center;
}

/* ===== v266：交易明細視窗——金額大字、照片滿版縮圖（點了放大）、欄位清單 ===== */
.tx-detail__amount {
  margin: -6px 0 0;
  font-size: 2rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.tx-detail__amount.is-out {
  color: var(--ink);
}

.tx-detail__amount.is-in {
  color: var(--income-green);
}

.tx-detail__photo {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  background: #f1ece0;
  border: 1px solid var(--line);
  border-radius: 16px;
  cursor: zoom-in;
}

.tx-detail__photo[hidden] {
  display: none;
}

.tx-detail__photo img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
}

.tx-detail__rows {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--line);
}

.tx-detail__rows > div {
  display: grid;
  grid-template-columns: 6.5em minmax(0, 1fr);
  gap: var(--space-3);
  padding: 11px 2px;
  border-bottom: 1px solid var(--line);
}

.tx-detail__rows dt {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 650;
}

.tx-detail__rows dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 650;
  text-align: right;
  overflow-wrap: anywhere;
}

/* ===== v267：明細頁收支總計——收支平衡表風格小卡；收入可展開明細 ===== */
#transaction-totals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.tx-total {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "icon label" "value value";
  align-items: center;
  gap: 10px 10px;
  padding: 16px;
  color: var(--ink);
  font: inherit;
  text-align: left;
  border-radius: 20px;
}

.tx-total i {
  grid-area: icon;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #ffffff;
  font-style: normal;
  font-weight: 800;
  border-radius: 50%;
}

.tx-total > span {
  grid-area: label;
  display: grid;
  font-size: 0.86rem;
  font-weight: 750;
}

.tx-total em {
  color: var(--muted);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 650;
}

.tx-total strong {
  grid-area: value;
  font-size: min(1.6rem, 6.4vw);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tx-total--income {
  background: #e7efea;
  border: 1px solid #cfe0d6;
  cursor: pointer;
}

.tx-total--income i {
  background: #2f5d50;
}

.tx-total--income > span {
  color: #2f5d50;
}

.tx-total--income.is-open {
  box-shadow: inset 0 0 0 2px #2f5d50;
}

.tx-total--expense {
  background: #f7ece6;
  border: 1px solid #efd9cd;
}

.tx-total--expense i {
  background: #c0613f;
}

.tx-total--expense > span {
  color: #a24a2c;
}

.tx-income-list {
  grid-column: 1 / -1;
  padding: 8px 14px;
  background: #fffdf8;
  border: 1px solid var(--line);
  border-radius: 18px;
}

.tx-income-list[hidden] {
  display: none;
}

.tx-income-list ul {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tx-income-list li + li {
  border-top: 1px solid var(--line);
}

.tx-income-list li button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 10px 0;
  color: inherit;
  font: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.tx-income-list li span {
  display: grid;
  min-width: 0;
}

.tx-income-list li b {
  font-size: 0.9rem;
}

.tx-income-list li small {
  color: var(--muted);
  font-size: 0.72rem;
}

.tx-income-list li strong,
.tx-income-list > p b {
  flex: none;
  color: var(--income-green);
  font-variant-numeric: tabular-nums;
}

.tx-income-list > p {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 10px 0 4px;
  font-size: 0.86rem;
  font-weight: 750;
  border-top: 2px solid var(--line);
}

.tx-income-list__empty {
  color: var(--muted);
  justify-content: center !important;
  border-top: 0 !important;
}

/* v268：收入明細下方另列「帳戶校正（不算收入）」 */
.tx-income-list__corrections {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}

.tx-income-list__corrections h4 {
  margin: 4px 0 2px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
}

.tx-income-list li strong.is-muted {
  color: var(--muted);
}

/* ===== v270：證券帳戶交割銀行設定＋記帳表單快選 ===== */
.settlement-bank-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.settlement-bank-default {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--carbon-300, #b9b3a6);
  font-size: 1.1rem;
  cursor: pointer;
}

.settlement-bank-default input {
  position: absolute;
  opacity: 0;
}

.settlement-bank-default:has(input:checked) {
  color: #c49a5a;
}

.settlement-bank-default:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  border-radius: 8px;
}

.settlement-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 6px;
}

.settlement-chips[hidden] {
  display: none;
}

.settlement-chip {
  min-height: 32px;
  padding: 0 12px;
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  background: #f1ece0;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
}

.settlement-chip.is-on {
  color: #ffffff;
  background: var(--ink);
}

/* v273：持有庫存展開的每筆交易可以點（看明細／修改） */
button.position-history__item {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

@media (hover: hover) {
  button.position-history__item:hover {
    background: rgb(255 255 255 / 55%);
  }
}

.position-history__info {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 8px;
  row-gap: 2px;
  min-width: 0;
}

.position-history__item > strong {
  margin-left: auto;
}

.position-history__chevron {
  flex: none;
  width: 7px;
  height: 7px;
  margin-left: 4px;
  border-top: 1.5px solid var(--carbon-300, #b9b3a6);
  border-right: 1.5px solid var(--carbon-300, #b9b3a6);
  transform: rotate(45deg);
}

/* v274：投資頁證券帳戶切換 */
.investment-broker-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-3);
}

.investment-broker-filter[hidden] {
  display: none;
}

.investment-broker-filter button {
  min-height: 34px;
  padding: 0 14px;
  color: var(--muted);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 750;
  background: #ebe5d6;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.investment-broker-filter button.is-on {
  color: #ffffff;
  background: var(--ink);
}

/* v275：成本下方各證券帳戶成本 */
.broker-card__breakdown {
  display: grid;
  gap: 2px;
  margin: 4px 0 0;
  padding: 6px 0 0;
  list-style: none;
  border-top: 1px dashed rgb(25 26 24 / 15%);
}

.broker-card__breakdown li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* v276：已實現損益可點開明細 */
.broker-card__realized {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  color: inherit;
  font: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.broker-card__realized i {
  width: 6px;
  height: 6px;
  margin-left: 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.broker-card__realized[aria-expanded="true"] i {
  transform: rotate(-135deg);
}

.realized-list {
  margin-top: var(--space-3);
  padding: 10px 12px;
  background: #f4f0e6;
  border-radius: 14px;
}

.realized-list[hidden] {
  display: none;
}

.realized-list__formula {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.72rem;
}

.realized-list ul {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.realized-list li + li {
  border-top: 1px dashed rgb(25 26 24 / 12%);
}

.realized-list li button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 8px 0;
  color: inherit;
  font: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.realized-list li span {
  display: grid;
  min-width: 0;
}

.realized-list li b {
  font-size: 0.86rem;
}

.realized-list li small {
  color: var(--muted);
  font-size: 0.72rem;
}

.realized-list li strong {
  flex: none;
  font-variant-numeric: tabular-nums;
}

.realized-list__total {
  display: flex;
  justify-content: space-between;
  margin: 4px 0 0;
  padding-top: 8px;
  font-size: 0.84rem;
  font-weight: 750;
  border-top: 2px solid rgb(25 26 24 / 10%);
}

/* v277：投資頁搜尋框 */
.investment-search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-3);
  padding: 0 16px;
  background: #fffdf8;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.investment-search svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
}

.investment-search input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 46px;
  padding: 0;
  color: var(--ink);
  font: inherit;
  font-size: 0.92rem;
  background: transparent;
  border: 0;
  outline: none;
}

.investment-search:focus-within {
  border-color: var(--accent);
}

/* v278：搜尋結果直接接在搜尋框下面 */
.investment-search-results {
  margin: -4px 0 var(--space-4);
  padding: 12px 16px;
  background: #fffdf8;
  border: 1px solid var(--line);
  border-radius: 20px;
}

.investment-search-results[hidden] {
  display: none;
}

.investment-search-results__head {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 750;
}

.investment-search-results__empty {
  margin: 6px 0;
  color: var(--muted);
  font-size: 0.84rem;
}

/* v279：常用功能「固定收支」的待確認數字——紅底白字圓點在手機也要有（原本底色只寫在電腦版 media query 裡） */
.quick-dock__btn .recurring-due-badge {
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  place-items: center;
  color: #ffffff;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1;
  background: var(--danger);
  border-radius: 999px;
}

.quick-dock__btn .recurring-due-badge[hidden] {
  display: none;
}

/* v280：固定收支頁摘要改成收支平衡表風格的 2×2 淡色小卡 */
#recurring-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.tx-total--static {
  cursor: default;
}

.tx-total--invest {
  background: #eceff1;
  border: 1px solid #d9dfe3;
}

.tx-total--invest i {
  background: #5d6f7a;
}

.tx-total--invest > span {
  color: #4b5c66;
}

.tx-total--net {
  background: #e3ece7;
  border: 1px solid #cbdcd2;
}

.tx-total--net i {
  background: #3f7a63;
}

.tx-total--net > span {
  color: #2f5d50;
}

@media (min-width: 960px) {
  #recurring-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ===== v281：固定收支清單——一列一筆，點了編輯 ===== */
.recurring-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 10px;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 14px 2px;
  color: inherit;
  font: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.recurring-row:last-child {
  border-bottom: 0;
}

.recurring-row__main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.recurring-row__main strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.98rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recurring-row__main small {
  color: var(--muted);
  font-size: 0.78rem;
}

.recurring-row__main em {
  color: var(--danger);
  font-style: normal;
  font-weight: 700;
}

.recurring-row > b {
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
}

.recurring-row > b.is-positive {
  color: var(--income-green);
}

.recurring-row > b.is-negative {
  color: var(--ink);
}

.recurring-row.is-paused {
  opacity: 0.55;
}

.recurring-row__chevron {
  width: 7px;
  height: 7px;
  border-top: 1.5px solid var(--carbon-300, #b9b3a6);
  border-right: 1.5px solid var(--carbon-300, #b9b3a6);
  transform: rotate(45deg);
}

@media (hover: hover) {
  .recurring-row:hover {
    background: rgb(25 26 24 / 3%);
  }
}

.recurring-edit-actions {
  flex-wrap: wrap;
}

.recurring-edit-actions .button--primary {
  margin-left: auto;
}

.danger-text {
  color: var(--danger);
}

/* v282：待確認記帳顯示扣款帳戶 */
.recurring-due-account {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.8rem;
}

.recurring-due-account b {
  color: var(--ink);
}

/* v284：手機的待確認記帳——左邊名稱與說明，右上金額，按鈕靠右（跟電腦版同樣的左右配置） */
@media (max-width: 480px) {
  #recurring-due-list .settlement-item, #overview-due-list .settlement-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-2) var(--space-3);
  }

  #recurring-due-list .recurring-item-actions, #overview-due-list .recurring-item-actions {
    display: contents;
  }

  #recurring-due-list .recurring-item-actions > b, #overview-due-list .recurring-item-actions > b {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
  }

  #recurring-due-list .recurring-item-buttons, #overview-due-list .recurring-item-buttons {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

/* v285：沒有帳戶的類型膠囊隱藏 */
.acct-filter[hidden],
.acct-filter button[hidden] {
  display: none;
}

/* ===== v292：股票語音示範＋階段式「請說成交價」 ===== */
/* v293：股票示範兩句上下排，中間「或」，說明另起一行，不再被擠進左欄跑版 */
.voice-quick__prompt-stack {
  display: grid;
  justify-items: start;
  gap: 2px;
  min-width: 0;
}

.voice-quick__prompt-stack em {
  color: var(--muted);
  font-size: 0.74rem;
  font-style: normal;
}

.voice-quick__prompt-stack small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.5;
}

.voice-invest__ask {
  display: grid;
  gap: 6px;
  margin-top: var(--space-3);
  padding: 14px;
  text-align: center;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 16px;
}

.voice-invest__ask[hidden] {
  display: none;
}

.voice-invest__ask strong {
  color: #2f5d50;
  font-size: 1.1rem;
}

.voice-invest__ask small {
  color: var(--muted);
  font-size: 0.78rem;
}

.voice-invest__ask-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}

.voice-invest__ask-input {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.voice-invest__ask-input input {
  width: 7.5em;
  min-height: 42px;
  padding: 0;
  font: inherit;
  font-weight: 700;
  background: transparent;
  border: 0;
  outline: none;
}

/* ===== v294：語音記帳開始畫面——精緻、安靜、一個焦點（Lucas：不要太 AI） ===== */
/* 標題只留給螢幕報讀器，畫面上只有關閉鈕 */
#voice-quick-dialog .voice-quick > .dialog-header .eyebrow,
#voice-quick-dialog .voice-quick > .dialog-header h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

#voice-quick-dialog .voice-quick > .dialog-header {
  justify-content: flex-end;
  margin-bottom: -8px;
}

#voice-quick-dialog .voice-quick__stage {
  gap: 14px;
  padding: 8px 0 4px;
}

/* 麥克風：深墨色實心、細白邊，不要光暈 */
#voice-quick-dialog .voice-quick__mic {
  width: 84px;
  height: 84px;
  color: var(--accent-ink);
  background: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent), 0 0 0 7px var(--surface), 0 0 0 8px color-mix(in srgb, var(--accent) 22%, transparent);
}

#voice-quick-dialog .voice-quick__mic svg {
  width: 30px;
  height: 30px;
  stroke-width: 1.5;
}

/* 聆聽時：外圈慢慢呼吸，取代灰點波形 */
#voice-quick-dialog .voice-quick__wave {
  display: none;
}

#voice-quick-dialog .voice-quick__mic::before {
  inset: -14px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}

#voice-quick-dialog .voice-quick[data-state="listening"] .voice-quick__mic::before {
  animation: voice-quick-breathe 2.4s ease-in-out infinite;
}

@keyframes voice-quick-breathe {
  0%, 100% { opacity: 0.15; transform: scale(0.94); }
  50% { opacity: 0.6; transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  #voice-quick-dialog .voice-quick[data-state="listening"] .voice-quick__mic::before {
    animation: none;
    opacity: 0.4;
  }
}

#voice-quick-dialog .voice-quick__status {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* 範例：兩行安靜的灰字，上下各一條極淡的細線 */
#voice-quick-dialog .voice-quick__prompts {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin: 6px 0 0;
  padding: 18px 0 16px;
  text-align: center;
  background: none;
  border: 0;
  border-top: 1px solid rgb(31 36 33 / 8%);
  border-bottom: 1px solid rgb(31 36 33 / 8%);
}

#voice-quick-dialog .voice-quick__sample {
  margin: 0;
  color: #3a3f3b;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.06em;
}

#voice-quick-dialog .voice-quick__sample::before {
  content: "「";
  color: var(--muted);
}

#voice-quick-dialog .voice-quick__sample::after {
  content: "」";
  color: var(--muted);
}

#voice-quick-dialog .voice-quick__sample-note {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

/* 還沒有辨識結果時：不顯示「記帳」大按鈕，「手動記帳」改成低調的文字連結 */
#voice-quick-dialog .voice-quick:has(#voice-quick-result[hidden]) #voice-quick-save,
#voice-quick-dialog .voice-quick:has(#voice-quick-result[hidden]) #voice-quick-retry {
  display: none;
}

#voice-quick-dialog .voice-quick:has(#voice-quick-result[hidden]) .dialog-actions {
  justify-content: center;
  position: static;
  margin: 0;
  padding: 0;
  background: none;
}

#voice-quick-dialog .voice-quick:has(#voice-quick-result[hidden]) .voice-quick__manual {
  min-height: 36px;
  padding: 0 8px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 500;
  background: none;
  border: 0;
  box-shadow: none;
}

/* ===== v295：語音辨識結果畫面——跟開始畫面同一套安靜、精緻的風格（Lucas） ===== */
/* 狀態列：拿掉綠色膠囊框，改成一行置中的小灰字 */
#voice-quick-dialog .voice-quick[data-state="done"] .voice-quick__stage {
  padding: 0;
  background: none;
  border: 0;
}

#voice-quick-dialog .voice-quick[data-state="done"] .voice-quick__status {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-align: center;
}

/* 「聽到」：不要標籤與分隔線，只留一行淡淡的引號原句 */
#voice-quick-dialog .voice-quick__heard {
  justify-content: center;
  margin: 0;
  padding: 0;
  text-align: center;
  border: 0;
}

#voice-quick-dialog .voice-quick__heard span {
  display: none;
}

#voice-quick-dialog .voice-quick__heard q {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* 金額：主角。標籤更小、字距更寬；有金額時不顯示紅字提示，虛線改成極淡細線 */
#voice-quick-dialog .voice-quick__hero > span:first-child {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
}

#voice-quick-dialog .voice-quick__amount-field {
  border-bottom: 1px solid rgb(31 36 33 / 12%);
}

#voice-quick-dialog .voice-quick__amount-field input {
  font-size: 2.6rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

#voice-quick-dialog .voice-quick__amount-field em {
  color: var(--muted);
  font-size: 1.1rem;
  font-weight: 500;
}

#voice-quick-dialog .voice-quick__hero:not(:has(.is-missing)) .voice-quick__amount-hint {
  display: none;
}

/* 三個欄位：拿掉外框與彩色徽章，改成細線分隔的清單，狀態用小灰字 */
#voice-quick-dialog .voice-quick__cells {
  background: none;
  border: 0;
  border-top: 1px solid rgb(31 36 33 / 8%);
  border-radius: 0;
}

#voice-quick-dialog .voice-quick__cell {
  min-height: 54px;
  padding: 0 2px;
  border-bottom: 1px solid rgb(31 36 33 / 8%);
}

#voice-quick-dialog .voice-quick__cell + .voice-quick__cell {
  border-top: 0;
}

#voice-quick-dialog .voice-quick__cell small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

#voice-quick-dialog .voice-quick__cell b {
  font-size: 1rem;
  font-weight: 600;
}

#voice-quick-dialog .voice-quick__cell i {
  padding: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 500;
  background: none;
}

#voice-quick-dialog .voice-quick__cell i.is-heard {
  color: var(--muted);
}

/* 按鈕：主按鈕滿版深墨色；「重說」「手動記帳」變成下方兩個文字連結 */
#voice-quick-dialog .voice-quick:has(#voice-quick-result:not([hidden])) .dialog-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
}

#voice-quick-dialog .voice-quick:has(#voice-quick-result:not([hidden])) #voice-quick-save {
  grid-column: 1 / -1;
  order: -1;
  min-height: 52px;
  color: var(--accent-ink);
  font-weight: 600;
  letter-spacing: 0.06em;
  background: var(--accent);
  border: 0;
  border-radius: 14px;
}

#voice-quick-dialog .voice-quick:has(#voice-quick-result:not([hidden])) #voice-quick-save:disabled {
  color: color-mix(in srgb, var(--accent-ink) 75%, transparent);
  background: color-mix(in srgb, var(--accent) 40%, var(--surface));
}

#voice-quick-dialog .voice-quick:has(#voice-quick-result:not([hidden])) #voice-quick-retry,
#voice-quick-dialog .voice-quick:has(#voice-quick-result:not([hidden])) .voice-quick__manual {
  justify-content: center;
  min-height: 40px;
  padding: 0 8px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 500;
  background: none;
  border: 0;
  box-shadow: none;
}

#voice-quick-dialog .voice-quick:has(#voice-quick-result:not([hidden])) #voice-quick-retry[hidden] {
  display: none;
}

/* ===== v296：股票語音——第二步只顯示乾淨的「請說成交價」；確認卡手續費、證券帳戶可點改 ===== */
#voice-quick-dialog .voice-quick.is-asking-price .voice-quick__heard,
#voice-quick-dialog .voice-quick.is-asking-price .voice-invest__head,
#voice-quick-dialog .voice-quick.is-asking-price #voice-invest-math,
#voice-quick-dialog .voice-quick.is-asking-price #voice-invest-status,
#voice-quick-dialog .voice-quick.is-asking-price #voice-quick-save {
  display: none;
}

/* 第二步時麥克風照常顯示（state 是 done 也要看得到），讓人知道正在聽／點一下再說 */
#voice-quick-dialog .voice-quick.is-asking-price .voice-quick__mic {
  display: grid;
}

#voice-quick-dialog .voice-quick.is-asking-price .voice-quick__stage {
  display: grid;
  justify-items: center;
}

#voice-quick-dialog .voice-quick.is-asking-price .voice-invest__ask {
  margin-top: 0;
  padding: 8px 0 4px;
  background: none;
  border: 0;
}

#voice-quick-dialog .voice-invest__ask strong {
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

#voice-quick-dialog .voice-invest__ask small {
  letter-spacing: 0.04em;
}

#voice-quick-dialog #voice-invest-use-quote {
  min-height: 40px;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  background: none;
  border: 1px solid rgb(31 36 33 / 18%);
  border-radius: 999px;
}

/* 確認卡可點的列 */
.voice-invest__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 8px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

.voice-invest__row b {
  text-align: right;
}

.voice-invest__row i {
  width: 6px;
  height: 6px;
  border-top: 1.5px solid var(--carbon-300, #b9b3a6);
  border-right: 1.5px solid var(--carbon-300, #b9b3a6);
  transform: rotate(45deg);
}

.voice-invest__editor {
  display: grid;
  gap: 4px;
  padding: 8px 0;
}

.voice-invest__editor input {
  min-height: 42px;
  padding: 0 12px;
  font: inherit;
  font-weight: 700;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.voice-invest__editor small {
  color: var(--muted);
  font-size: 0.72rem;
}

.voice-invest__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 0;
}

.voice-invest__choices button {
  min-height: 34px;
  padding: 0 12px;
  color: var(--ink);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 650;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.voice-invest__choices button.is-on {
  color: var(--accent-ink);
  background: var(--accent);
}

/* 底部按鈕列：實心底＋上方細線，內容捲到下面時不會跟按鈕疊在一起 */
#voice-quick-dialog .voice-quick:has(#voice-quick-result:not([hidden])) .dialog-actions {
  padding-top: 12px;
  background: var(--surface);
  border-top: 1px solid rgb(31 36 33 / 8%);
}

.voice-invest__row {
  font-size: 0.88rem;
  line-height: inherit;
}

/* ===== v300：手動記帳簡化版面（五種類型共用骨架，配色跟著主題色） ===== */
#entry-form.entry-simple {
  gap: var(--space-3);
}

#entry-form.entry-simple > .dialog-header .eyebrow,
#entry-form.entry-simple > .dialog-header h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

#entry-form.entry-simple > .dialog-header {
  justify-content: flex-end;
  margin-bottom: -10px;
}

/* 舊版面的元件：一律收起（元素仍保留在文件裡，避免其他程式找不到） */
#entry-form.entry-simple .step-card,
#entry-form.entry-simple #quick-preset,
#entry-form.entry-simple #voice-entry,
#entry-form.entry-simple #voice-confirm,
#entry-form.entry-simple #expense-context,
#entry-form.entry-simple .receipt-actions {
  display: none !important;
}

/* 類型膠囊 */
#entry-form.entry-simple > .segmented {
  gap: 4px;
  padding: 4px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  border-radius: 999px;
}

#entry-form.entry-simple > .segmented button {
  min-height: 36px;
  font-size: 0.86rem;
  border-radius: 999px;
}

#entry-form.entry-simple > .segmented button.is-active {
  color: var(--accent-ink);
  background: var(--accent);
  box-shadow: none;
}

/* icon 列 */
.entry-iconbar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.entry-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px;
  color: var(--ink);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}

.entry-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.entry-icon--date {
  margin-right: auto;
}

.entry-icon[aria-expanded="true"],
.entry-icon.has-value {
  color: var(--accent-strong, var(--accent));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}

.entry-panel {
  display: grid;
  gap: 8px;
  padding: 12px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  border-radius: 14px;
}

.entry-panel[hidden] {
  display: none;
}

#entry-panel-date {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}

#entry-panel-date > .entry-datetime-field {
  min-width: 0;
}

#entry-panel-date input[name="date"],
#entry-panel-date input[name="time"] {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding-right: 42px;
  padding-left: 12px;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  text-overflow: clip;
}

#entry-panel-date .entry-datetime-field > label {
  display: block;
  margin-bottom: 7px;
}

#entry-panel-date .entry-datetime-control {
  position: relative;
  min-width: 0;
}

#entry-panel-date .entry-native-picker-trigger {
  position: absolute;
  top: 50%;
  right: 5px;
  width: 34px;
  height: 34px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  border-radius: 11px;
  overflow: hidden;
}

#entry-panel-date .entry-native-picker-trigger svg {
  width: 19px;
  height: 19px;
  pointer-events: none;
}

#entry-panel-date .entry-native-picker {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

#entry-panel-date .entry-datetime-hint {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

@media (max-width: 420px) {
  #entry-panel-date {
    gap: 8px;
    padding: 10px;
  }

  #entry-panel-date input[name="date"],
  #entry-panel-date input[name="time"] {
    min-height: 46px;
    font-size: 1rem;
    letter-spacing: -0.02em;
  }
}

#entry-panel-photo .receipt-block {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

/* 金額：最上面、最大 */
#entry-form.entry-simple .amount-field {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 6px 0 2px;
  background: none;
  border: 0;
  box-shadow: none;
}

#entry-form.entry-simple .amount-field__head {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

#entry-form.entry-simple .amount-field__head label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
}

#entry-form.entry-simple .amount-calculator-trigger {
  color: var(--muted);
  font-size: 0.78rem;
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
}

#entry-form.entry-simple .amount-input {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  color: var(--ink);
  background: none;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}

#entry-form.entry-simple .amount-input b {
  color: var(--muted);
  font-size: 1rem;
  font-weight: 500;
}

#entry-form.entry-simple .amount-input input {
  max-width: 8ch;
  color: var(--ink);
  font-size: 2.6rem;
  font-weight: 600;
  text-align: center;
  background: transparent;
  border: 0;
}

/* 必填欄位：一列一欄，標籤在左、值在右，細線分隔 */
#entry-form.entry-simple #entry-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}

#entry-form.entry-simple #entry-form-grid > label {
  display: grid;
  grid-template-columns: 6.2em minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
  min-height: 54px;
  margin: 0;
  padding: 6px 2px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}

#entry-form.entry-simple #entry-form-grid > label[hidden] {
  display: none;
}

#entry-form.entry-simple #entry-form-grid > label > span:first-child {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
}

#entry-form.entry-simple #entry-form-grid > label > select,
#entry-form.entry-simple #entry-form-grid > label > input {
  min-height: 42px;
  padding: 0 22px 0 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  text-align: right;
  text-align-last: right;
  background-color: transparent;
  border: 0;
  box-shadow: none;
}

#entry-form.entry-simple #entry-form-grid > label > small,
#entry-form.entry-simple #entry-form-grid > label > .settlement-chips,
#entry-form.entry-simple #entry-form-grid > label > p {
  grid-column: 1 / -1;
}

#entry-form.entry-simple #merchant-field .merchant-input-row,
#entry-form.entry-simple #merchant-field > div {
  min-width: 0;
}

#entry-form.entry-simple #merchant-field input {
  text-align: left;
  font-weight: 600;
  background: transparent;
  border: 0;
}

/* 更多選項 */
.entry-more {
  border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}

.entry-more[hidden] {
  display: none;
}

.entry-more > summary {
  padding: 12px 2px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.entry-more > summary::-webkit-details-marker {
  display: none;
}

.entry-more > summary::after {
  content: " ›";
}

.entry-more[open] > summary::after {
  content: " ˅";
}

.entry-more__body {
  display: grid;
  gap: 10px;
  padding-bottom: 8px;
}

/* 改用語音記帳 */
.entry-voice-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  color: var(--muted);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  background: none;
  border: 0;
  cursor: pointer;
}

.entry-voice-link[hidden] {
  display: none;
}

.entry-voice-link svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

/* 按鈕：取消收起（右上已有 ✕），主按鈕滿版主題色，刪除改成文字連結 */
#entry-form.entry-simple > .dialog-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

#entry-form.entry-simple > .dialog-actions [data-close-dialog] {
  display: none;
}

#entry-form.entry-simple #save-entry {
  order: -1;
  min-height: 52px;
  color: var(--accent-ink);
  font-weight: 600;
  letter-spacing: 0.06em;
  background: var(--accent);
  border: 0;
  border-radius: 14px;
}

#entry-form.entry-simple #delete-entry {
  min-height: 38px;
  color: var(--danger);
  font-size: 0.84rem;
  background: none;
  border: 0;
  box-shadow: none;
}

#entry-form.entry-simple #delete-entry[hidden] {
  display: none;
}

/* v300 細修：金額、店家列 */
#entry-form.entry-simple .amount-field__head label {
  display: none;
}

#entry-form.entry-simple .amount-field__head {
  justify-content: flex-end;
}

#entry-form.entry-simple .amount-calculator-trigger {
  min-height: 30px;
  padding: 0 10px;
}

#entry-form.entry-simple .amount-input {
  display: flex;
  align-items: baseline;
  justify-content: center;
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
}

#entry-form.entry-simple .amount-input input {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  color: var(--ink);
}

#entry-form.entry-simple .amount-input input::placeholder {
  color: color-mix(in srgb, var(--ink) 25%, transparent);
}

#entry-form.entry-simple .merchant-field-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

#entry-form.entry-simple .merchant-field-row input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 42px;
  padding: 0;
}

#entry-form.entry-simple .merchant-field-row .button {
  flex: none;
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  color: var(--muted);
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
}

#entry-form.entry-simple .merchant-field-row .button span {
  display: none;
}

#entry-form.entry-simple .merchant-field-row .button svg {
  width: 18px;
  height: 18px;
}

#entry-form.entry-simple .merchant-location-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

/* v300：手動記帳分類建議膠囊 */
.entry-category-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 2px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}

.entry-category-suggest[hidden] {
  display: none;
}

.entry-category-suggest small {
  flex: 1 1 100%;
  color: var(--muted);
  font-size: 0.76rem;
}

.entry-category-suggest button {
  min-height: 34px;
  padding: 0 12px;
  color: var(--accent-strong, var(--accent));
  font: inherit;
  font-size: 0.84rem;
  font-weight: 650;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
  border-radius: 999px;
  cursor: pointer;
}

/* v300：列內的長說明在簡化版面不顯示 */
#entry-form.entry-simple #payment-target-help,
#entry-form.entry-simple #investment-account-help {
  display: none;
}

/* v301：交割銀行有膠囊時不顯示下拉選單；膠囊用主題色、放在標籤右邊的值欄位 */
label.has-settlement-chips > select {
  display: none !important;
}

#entry-form.entry-simple #entry-form-grid > label.has-settlement-chips > .settlement-chips {
  grid-column: 2;
  justify-content: flex-end;
  margin: 0;
}

#entry-form .settlement-chip.is-on {
  color: var(--accent-ink);
  background: var(--accent);
}

/* ===== v302：投資簡化版面 ===== */
#entry-form.entry-simple .investment-fields {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

#entry-form.entry-simple .investment-fields[hidden] {
  display: none;
}

#entry-form.entry-simple .investment-fields > legend {
  display: none;
}

/* 買進／賣出時：大金額欄位、交易動作下拉、代號／名稱兩格都收起，改用下面的新元件 */
#entry-form.entry-simple.is-investment.invest-trade .amount-field,
#entry-form.entry-simple.is-investment .investment-fields .form-grid > label:has(#entry-investment-action),
#entry-form.entry-simple.is-investment .investment-fields .form-grid > label:has(#entry-security-code),
#entry-form.entry-simple.is-investment .investment-fields .form-grid > label:has(#entry-security-name),
#entry-form.entry-simple.is-investment #investment-hint {
  display: none;
}

#entry-form.entry-simple.is-investment:not(.invest-trade) .investment-position-field,
#entry-form.entry-simple.is-investment:not(.invest-trade) .invest-quick-shares,
#entry-form.entry-simple.is-investment:not(.invest-trade) .invest-total,
#entry-form.entry-simple.is-investment:not(.invest-trade) .invest-costs-toggle {
  display: none;
}

.invest-action-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr 0.8fr 1fr;
  gap: 6px;
}

.invest-action-toggle button {
  min-height: 44px;
  color: var(--ink);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 650;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}

.invest-action-toggle button.is-on {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

.invest-action-toggle button[data-invest-action="sell"].is-on {
  color: #fff;
  background: var(--danger);
  border-color: var(--danger);
}

.invest-query-field {
  display: grid;
  grid-template-columns: 4em minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 2px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}

.invest-query-field > span {
  color: var(--muted);
  font-size: 0.8rem;
}

.invest-query-field input {
  min-height: 44px;
  padding: 0;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 650;
  background: transparent;
  border: 0;
  outline: none;
}

.invest-suggest {
  display: grid;
  gap: 2px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.invest-suggest[hidden] {
  display: none;
}

.invest-suggest button {
  display: flex;
  gap: 10px;
  min-height: 42px;
  align-items: center;
  padding: 0 10px;
  color: var(--ink);
  font: inherit;
  font-size: 0.92rem;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.invest-suggest button:hover,
.invest-suggest button:focus-visible {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.invest-suggest small {
  padding: 8px 10px;
  color: var(--muted);
}

/* 股數、成交價並排 */
#entry-form.entry-simple .investment-fields .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

#entry-form.entry-simple .investment-fields .form-grid > label {
  display: grid;
  gap: 4px;
  margin: 0;
}

#entry-form.entry-simple .investment-fields .form-grid > label > span:first-child {
  color: var(--muted);
  font-size: 0.78rem;
}

#entry-form.entry-simple .investment-position-field input {
  min-height: 52px;
  font-size: 1.35rem;
  font-weight: 650;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}

#entry-form.entry-simple .investment-fee-field,
#entry-form.entry-simple .investment-tax-field {
  display: none;
}

#entry-form.entry-simple.show-invest-costs .investment-fee-field,
#entry-form.entry-simple.show-invest-costs.invest-trade .investment-tax-field {
  display: grid;
}

#entry-form.entry-simple .investment-fee-field small,
#entry-form.entry-simple .investment-tax-field small {
  font-size: 0.7rem;
}

.invest-quick-shares {
  grid-column: 1 / -1;
  display: flex;
  gap: 6px;
}

.invest-quick-shares button {
  min-height: 32px;
  padding: 0 12px;
  color: var(--accent-strong, var(--accent));
  font: inherit;
  font-size: 0.8rem;
  font-weight: 650;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.invest-quick-shares button[data-add-shares="0"] {
  margin-left: auto;
  color: var(--muted);
  background: none;
}

.invest-total {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 2px 0;
  border-top: 1px dashed color-mix(in srgb, var(--ink) 12%, transparent);
}

.invest-total span {
  color: var(--muted);
  font-size: 0.82rem;
}

.invest-total b {
  font-size: 1.5rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.invest-costs-toggle {
  grid-column: 1 / -1;
  justify-self: end;
  padding: 2px 0;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  background: none;
  border: 0;
  cursor: pointer;
}

.invest-costs-toggle::after {
  content: " ›";
}

.invest-costs-toggle[aria-expanded="true"]::after {
  content: " ˅";
}

/* 轉帳對調鈕 */
#entry-form.entry-simple #transfer-to-field {
  grid-template-columns: 6.2em minmax(0, 1fr) auto;
}

.entry-swap {
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--accent-strong, var(--accent));
  font-size: 1rem;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

/* v302 修正：手續費／交易稅預設收起，點「手續費 $X ›」才出現 */
#entry-form.entry-simple .investment-fields .form-grid > label.investment-fee-field,
#entry-form.entry-simple .investment-fields .form-grid > label.investment-tax-field {
  display: none;
}

#entry-form.entry-simple.show-invest-costs .investment-fields .form-grid > label.investment-fee-field,
#entry-form.entry-simple.show-invest-costs.invest-trade .investment-fields .form-grid > label.investment-tax-field {
  display: grid;
}

/* ===== v306：手動記帳視覺層級——一眼先看到金額，其他退到後面（Lucas：不知道要先看哪裡） ===== */
/* 1. 類型膠囊、icon 列縮小變淡，當作工具列 */
#entry-form.entry-simple > .segmented {
  padding: 3px;
}

#entry-form.entry-simple > .segmented button {
  min-height: 32px;
  font-size: 0.8rem;
  font-weight: 600;
}

#entry-form.entry-simple .entry-iconbar .entry-icon {
  min-height: 34px;
  padding: 0 10px;
  font-size: 0.8rem;
  color: var(--muted);
  border-color: transparent;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}

#entry-form.entry-simple .entry-icon svg {
  width: 17px;
  height: 17px;
}

/* 2. 金額是主角：主題色淡底的大卡片，金額置中大字，標籤「這筆支出」在上，計算機縮成角落小字 */
#entry-form.entry-simple .amount-field {
  position: relative;
  padding: 18px 16px 16px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: 20px;
}

#entry-form.entry-simple .amount-field__head {
  position: absolute;
  top: 10px;
  right: 10px;
  width: auto;
}

#entry-form.entry-simple .amount-calculator-trigger {
  min-height: 26px;
  padding: 0 9px;
  font-size: 0.72rem;
  background: var(--surface);
}

#entry-form.entry-simple .amount-field::before {
  content: attr(data-amount-label);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}

#entry-form.entry-simple .amount-input {
  max-width: 300px;
  border-bottom: 0;
}

#entry-form.entry-simple .amount-input b {
  color: var(--accent-strong, var(--accent));
  font-size: 1.3rem;
  font-weight: 600;
}

#entry-form.entry-simple .amount-input input {
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

#entry-form.entry-simple .amount-input input::placeholder {
  color: color-mix(in srgb, var(--ink) 18%, transparent);
}

/* 3. 欄位清單：放進白色圓角卡片，標籤小灰字、值一般粗細，不跟金額搶 */
#entry-form.entry-simple #entry-form-grid {
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 18px;
}

#entry-form.entry-simple #entry-form-grid > label:last-of-type,
#entry-form.entry-simple #entry-form-grid > label:last-child {
  border-bottom: 0;
}

#entry-form.entry-simple #entry-form-grid > label > span:first-child {
  font-size: 0.78rem;
}

#entry-form.entry-simple #entry-form-grid > label > select,
#entry-form.entry-simple #entry-form-grid > label > input,
#entry-form.entry-simple #merchant-field input {
  font-size: 0.98rem;
  font-weight: 500;
}

/* 4. 更多選項、語音連結更低調 */
#entry-form.entry-simple .entry-more {
  border-top: 0;
}

#entry-form.entry-simple .entry-more > summary {
  padding: 6px 2px;
  font-size: 0.8rem;
}

/* v306：NT$ 貼著金額，整組置中 */
#entry-form.entry-simple .amount-input {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  justify-content: center;
  justify-self: center;
}

#entry-form.entry-simple .amount-input input {
  flex: none;
  width: 2ch;
  min-width: 1.4ch;
  text-align: left;
}

/* ===== v307：投資畫面跟支出同一套層級——買賣切換變輕、交易內容收在白卡、成交金額是主角 ===== */
/* 買賣切換：改成跟上方類型同樣的分段膠囊，不再是四顆大按鈕 */
#entry-form.entry-simple .invest-action-toggle {
  gap: 3px;
  padding: 3px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border-radius: 999px;
}

#entry-form.entry-simple .invest-action-toggle button {
  min-height: 34px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 999px;
}

#entry-form.entry-simple .invest-action-toggle button.is-on {
  color: var(--accent-ink);
  background: var(--accent);
}

#entry-form.entry-simple .invest-action-toggle button[data-invest-action="sell"].is-on {
  color: #fff;
  background: var(--danger);
}

/* 交易內容：白色圓角卡片 */
#entry-form.entry-simple .investment-fields {
  gap: 0;
  padding: 0;
}

#entry-form.entry-simple .invest-action-toggle {
  margin-bottom: 12px;
}

#entry-form.entry-simple .invest-query-field,
#entry-form.entry-simple .investment-fields .form-grid {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}

#entry-form.entry-simple .invest-query-field {
  padding: 0 14px;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
}

#entry-form.entry-simple .invest-query-field input {
  font-size: 0.98rem;
  font-weight: 500;
}

#entry-form.entry-simple .invest-suggest {
  border-radius: 0;
  border-top: 0;
  border-bottom: 0;
}

#entry-form.entry-simple .investment-fields .form-grid {
  padding: 12px 14px 14px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 0 0 18px 18px;
  column-gap: 10px;
  row-gap: 10px;
}

#entry-form.entry-simple .investment-position-field input {
  min-height: 48px;
  font-size: 1.25rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--ink) 3%, var(--surface));
  border: 0;
  border-radius: 12px;
}

#entry-form.entry-simple .invest-quick-shares button {
  min-height: 30px;
  font-size: 0.76rem;
}

/* 成交金額：主題色淡底的主角區塊（跟支出的金額卡同一個樣子） */
#entry-form.entry-simple .invest-total {
  display: grid;
  justify-items: center;
  gap: 2px;
  margin-top: 4px;
  padding: 14px 12px 10px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: 16px;
}

#entry-form.entry-simple .invest-total span {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}

#entry-form.entry-simple .invest-total b {
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

#entry-form.entry-simple .invest-costs-toggle {
  justify-self: center;
  margin-top: -6px;
  font-size: 0.78rem;
}

/* v307 細修：成交金額置中；交割銀行膠囊換到標籤下一行、靠左排；證券帳戶欄位讓出寬度 */
#entry-form.entry-simple .invest-total {
  justify-content: center;
  text-align: center;
}

#entry-form.entry-simple .invest-total b {
  justify-self: center;
}

#entry-form.entry-simple #entry-form-grid > label.has-settlement-chips {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 8px;
  padding: 12px 2px;
}

#entry-form.entry-simple #entry-form-grid > label.has-settlement-chips > .settlement-chips {
  grid-column: 1;
  justify-content: flex-start;
}

#entry-form.entry-simple.is-investment #entry-form-grid > label {
  grid-template-columns: 4.8em minmax(0, 1fr);
}

#entry-form.entry-simple.is-investment #entry-form-grid > label.has-settlement-chips {
  grid-template-columns: minmax(0, 1fr);
}

#entry-form.entry-simple.is-investment #entry-form-grid > label > select {
  font-size: 0.9rem;
}

/* ===== v308：店家欄位排版——第一行「店家或項目」＋右邊兩個圖示，第二行店名全寬，第三行小字說明 ===== */
#entry-form.entry-simple #entry-form-grid > #merchant-field {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 4px;
  padding: 12px 2px 12px;
}

#entry-form.entry-simple #merchant-field > span:first-child {
  grid-column: 1;
  grid-row: 1;
}

#entry-form.entry-simple #merchant-field .merchant-field-row {
  display: contents;
}

#entry-form.entry-simple #merchant-field #merchant-location-fill {
  grid-column: 2;
  grid-row: 1;
}

#entry-form.entry-simple #merchant-field #merchant-place-search {
  grid-column: 3;
  grid-row: 1;
}

#entry-form.entry-simple #merchant-field .merchant-field-row input {
  grid-column: 1 / -1;
  grid-row: 2;
  min-height: 40px;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: left;
}

#entry-form.entry-simple #merchant-field .merchant-location-hint {
  grid-column: 1 / -1;
  grid-row: 3;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}

#entry-form.entry-simple #merchant-field .merchant-field-row .button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
}

/* ===== v309：帳戶列——名稱一行、餘額小字在下面；轉帳對調鈕放在兩個帳戶中間的分隔線上 ===== */
#entry-form.entry-simple #entry-form-grid > label > select + .entry-balance-note {
  grid-column: 2;
  margin-top: -8px;
  padding-right: 22px;
  color: var(--muted);
  font-size: 0.74rem;
  text-align: right;
}

#entry-form.entry-simple #entry-form-grid > label > .entry-balance-note:empty {
  display: none;
}

#entry-form.entry-simple #entry-form-grid > label.has-settlement-chips > .entry-balance-note {
  display: none;
}

#entry-form.entry-simple #transfer-to-field {
  position: relative;
  grid-template-columns: 6.2em minmax(0, 1fr);
}

#entry-form.entry-simple #transfer-to-field .entry-swap {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: 32px;
  height: 32px;
  font-size: 0.95rem;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  transform: translate(-50%, -50%);
}

/* ===== v310：帳戶欄位改成原地展開的清單（不跳出手機系統選單） ===== */
#entry-form.entry-simple #entry-form-grid > label.has-account-picker > select,
#entry-form.entry-simple #entry-form-grid > label.has-account-picker > .entry-balance-note {
  display: none !important;
}

#entry-form.entry-simple #entry-form-grid > label.has-settlement-chips > .entry-picker-btn,
#entry-form.entry-simple #entry-form-grid > label.has-settlement-chips > .entry-picker-list {
  display: none !important;
}

.entry-picker-btn {
  grid-column: 2;
  display: grid;
  justify-items: end;
  gap: 1px;
  min-height: 42px;
  padding: 4px 22px 4px 0;
  color: var(--ink);
  font: inherit;
  text-align: right;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a958a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right center / 16px;
  border: 0;
  cursor: pointer;
}

.entry-picker-btn[aria-expanded="true"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a958a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E");
}

.entry-picker-btn b {
  font-size: 0.98rem;
  font-weight: 500;
}

.entry-picker-btn small {
  color: var(--muted);
  font-size: 0.74rem;
}

.entry-picker-list {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
  margin: 4px 0 6px;
  padding: 6px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  border-radius: 14px;
}

.entry-picker-list[hidden] {
  display: none;
}

.entry-picker-list button {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px;
  color: var(--ink);
  font: inherit;
  text-align: left;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
}

.entry-picker-list button b {
  font-size: 0.95rem;
  font-weight: 500;
}

.entry-picker-list button small {
  flex: none;
  color: var(--muted);
  font-size: 0.74rem;
}

.entry-picker-list button.is-on {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.entry-picker-list button.is-on b {
  font-weight: 650;
}

.entry-picker-list button {
  align-items: center;
}

/* v311：分類、子項目的原地清單用膠囊排列 */
.entry-picker-list--chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.entry-picker-list--chips button {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
}

.entry-picker-list--chips button b {
  font-size: 0.88rem;
}

/* ===== v312：爆預算時——金額、說明、右下光暈都改用「查看預算」同一個強調色（Lucas） ===== */
.balance-card--hero.is-over-budget #monthly-living-budget-amount,
.balance-card--hero.is-over-budget #monthly-living-budget-desc {
  color: #e3b04b;
}

.balance-card--hero.is-over-budget .balance-card__leaf {
  background: radial-gradient(circle, #e3b04b 0%, #e3b04b 55%, transparent 72%);
  opacity: 0.28;
}

/* v313：本月剩多少旁的百分比（還剩收入的幾 %） */
.balance-card__percent {
  color: rgb(255 255 255 / 72%);
  font-size: 0.9rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.balance-card__percent[hidden] {
  display: none;
}

/* ===== 2026-10-17：分帳功能 Sprint 2（群組／成員畫面）=====
   盡量沿用現有 class：卡片格線比照 .dream-sky-grid，表單／訊息比照 .form-help／
   .form-message，按鈕／對話框比照既有 .button／.dialog-card 慣例，這裡只新增
   分帳畫面獨有、找不到現成樣式可套用的部分。 */

.split-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}

/* 2026-10-18：卡片外面多包一層 wrap，讓「⋯」選單鈕可以跟卡片本體（也是一顆 button）當手足元素，
   不用巢狀 button。wrap 本身用 flex 撐滿格子高度，裡面的卡片 flex:1 填滿，視覺上跟改版前一樣。 */
.split-group-card-wrap {
  position: relative;
  display: flex;
}

.split-group-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 152px;
  padding: var(--space-4);
  text-align: left;
  color: var(--split-card-ink, var(--ink));
  background: var(--split-card-bg, var(--surface-strong));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.split-group-card:not(.split-group-card--add) {
  border-color: transparent;
}

.split-group-card:hover {
  border-color: var(--accent-bright);
  transform: translateY(-1px);
}

.split-group-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  /* 右邊預留「⋯」選單鈕（絕對定位疊在卡片上）的寬度，避免跟日期文字重疊。 */
  padding-right: 30px;
}

.split-group-card__date {
  color: var(--split-card-muted, var(--muted));
  font-size: 0.78rem;
}

.split-group-card__menu {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 1;
  display: flex;
  width: 26px;
  height: 26px;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid var(--split-card-muted, var(--line));
  border-radius: 50%;
  color: var(--split-card-muted, var(--muted));
  font: inherit;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.split-group-card__menu:hover,
.split-group-card__menu:focus-visible {
  border-color: currentColor;
}

.split-group-card__name {
  display: -webkit-box;
  overflow: hidden;
  color: var(--split-card-ink, var(--ink));
  font-size: 1.02rem;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.split-group-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
}

.split-group-card__balance {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.split-group-card__balance small {
  color: var(--split-card-muted, var(--muted));
  font-size: 0.74rem;
}

.split-group-card__balance strong {
  overflow: hidden;
  color: var(--split-card-ink, var(--ink));
  font-size: 1.12rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.split-group-card__avatars {
  display: flex;
  flex: none;
}

.split-group-card__avatar {
  display: flex;
  width: 32px;
  height: 32px;
  flex: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-left: -10px;
  background: var(--surface);
  border: 2px solid var(--split-card-ring, #fff);
  border-radius: 50%;
  color: var(--ink);
  font-size: 0.78rem;
}

.split-group-card__avatar:first-child {
  margin-left: 0;
}

.split-group-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.split-group-card__avatar--more {
  background: var(--split-card-muted, var(--line));
  color: var(--split-card-ink, var(--ink));
  font-size: 0.72rem;
}

.split-group-card--add {
  display: grid;
  gap: var(--space-2);
  align-items: center;
  justify-items: center;
  justify-content: center;
  min-height: 152px;
  color: var(--muted);
  background: transparent;
  border-style: dashed;
}

.split-group-card--add .split-group-card__icon {
  font-size: 1.6rem;
}

.split-import-trigger {
  display: grid;
  width: 100%;
  min-height: 62px;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  align-items: center;
  gap: var(--space-3);
  padding: 0.65rem 0.8rem;
  color: var(--primary);
  text-align: left;
  background: color-mix(in srgb, var(--accent-bright) 12%, var(--surface-strong));
  border: 1px solid color-mix(in srgb, var(--accent-bright) 38%, var(--line));
  border-radius: var(--radius-md);
  box-shadow: 0 10px 24px rgb(25 26 24 / 7%);
  cursor: pointer;
  transition:
    transform var(--duration) var(--ease),
    background-color var(--duration) var(--ease),
    border-color var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
}

.split-import-trigger:hover {
  background: color-mix(in srgb, var(--accent-bright) 18%, var(--surface-strong));
  border-color: color-mix(in srgb, var(--accent-bright) 56%, var(--line));
  box-shadow: 0 12px 28px rgb(25 26 24 / 10%);
  transform: translateY(-1px);
}

.split-import-trigger:active {
  transform: translateY(0) scale(0.99);
}

.split-import-trigger__icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: var(--accent-ink);
  background: var(--accent-bright);
  border-radius: 12px;
}

.split-import-trigger__icon svg {
  width: 20px;
  height: 20px;
}

.split-import-trigger__copy {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.split-import-trigger__copy strong {
  font-size: 0.94rem;
  line-height: 1.2;
}

.split-import-trigger__copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 620;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.split-import-trigger__chevron {
  width: 18px;
  height: 18px;
  color: var(--muted);
  transition: transform var(--duration) var(--ease);
}

.split-import-trigger:hover .split-import-trigger__chevron {
  transform: translateX(2px);
}

.split-import-picker {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  padding: var(--space-5) 0;
}

.split-import-summary {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--surface);
  border-radius: var(--radius-md);
}

/* 2026-10-18（Lucas 回報：匯入後跟原本 App 的結算金額對不上）：這個區塊原本是灰色、預設收合的
   <details>，很容易被忽略，而這裡列的「看不懂、不會匯入」的資料如果真的有，匯入後的餘額一定會
   跟原始資料對不上。改成警示色（跟表單驗證錯誤同一套 --warning token）、而且有資料時預設直接展開
   （見 app.js 的 open 屬性），確保匯入前這個落差一定會被看到。 */
.split-import-issues {
  padding: var(--space-3);
  background: var(--warning-soft);
  border-radius: var(--radius-md);
}

.split-import-issues summary {
  color: var(--warning-ink);
  font-weight: 650;
  cursor: pointer;
}

.split-import-issues ul {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
  color: var(--ink);
  font-size: 0.86rem;
}

.split-import-members {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.split-import-member-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
}

.split-import-member-row input[type="text"] {
  width: 100%;
}

@media (min-width: 640px) {
  [data-view-panel="split"] > .section-heading--page {
    align-items: flex-end;
  }

  .split-import-trigger {
    width: auto;
    min-width: 190px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .split-import-trigger,
  .split-import-trigger__chevron {
    transition: none;
  }
}


.split-member-list {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.split-members-guide {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-4);
  padding: var(--space-4);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-bright) 15%, var(--surface-strong)), var(--surface-strong));
  border: 1px solid color-mix(in srgb, var(--accent-bright) 32%, var(--line));
  border-radius: var(--radius-md);
}

.split-members-guide[hidden] {
  display: none;
}

.split-members-guide .eyebrow {
  margin: 0;
  color: var(--accent-strong);
}

.split-members-guide h4,
.split-members-guide p {
  margin: 0;
}

.split-members-guide h4 {
  font-size: 1rem;
  line-height: 1.4;
}

.split-members-guide p {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.65;
}

.split-members-guide ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;
}

.split-members-guide li {
  display: grid;
  gap: 0.35rem;
  justify-items: center;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 650;
  text-align: center;
}

.split-members-guide li span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: var(--accent-ink);
  background: var(--accent-bright);
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 760;
}

.split-member-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
}

.split-member-row:last-child {
  border-bottom: none;
}

.split-member-row__avatar {
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-weight: 700;
  background: var(--surface-strong);
  border-radius: 50%;
}

.split-member-row__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.split-member-row__info {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.split-member-row__info small {
  color: var(--muted);
}

.split-add-member-form {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.split-add-member-form input {
  flex: 1;
  min-width: 0;
}

.split-invite-section {
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.split-invite-output {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.split-invite-output input {
  flex: 1;
  min-width: 0;
  color: var(--muted);
}

/* 2026-10-17：邀請連結旁的「分享」按鈕（Lucas 要求，放在「複製」左邊），點了優先叫出系統原生
   分享選單（navigator.share，手機上可以直接分享到 LINE／訊息等），不支援的瀏覽器（大多是桌機）
   就自動退回跟「複製」按鈕一樣的複製連結行為，邏輯見 app.js 的 shareSplitInviteLink()。 */
.split-invite-share {
  flex: 0 0 auto;
  padding: 0.65rem;
}

.split-invite-share svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.1;
}

/* 2026-10-17：群組詳情對話框底部的「刪除群組」危險區塊（Lucas 要求，輸入群組名稱才能
   刪除的防呆見 app.js 的 openSplitDeleteGroupDialog()）。只用一條分隔線跟 .split-invite-section
   拉開距離，視覺上刻意跟上面的一般操作區隔開，不用額外的紅色底色，避免對話框看起來太驚悚。 */
.split-danger-zone {
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.split-danger-zone .field-help {
  margin-bottom: var(--space-3);
}

.split-join-options {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.split-join-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  text-align: left;
  color: inherit;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--duration) var(--ease);
}

.split-join-option:hover {
  border-color: var(--accent-bright);
}

/* 語音記帳：墨綠水波。只呈現辨識狀態，不代表實際音量。 */
#voice-quick-dialog .voice-quick__mic {
  isolation: isolate;
  margin: 32px 0;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 12%, transparent);
}
#voice-quick-dialog .voice-quick__mic > svg { position: relative; z-index: 1; }
#voice-quick-dialog .voice-quick__water {
  position: absolute;
  inset: -32px;
  z-index: -1;
  pointer-events: none;
  transition: transform 300ms ease, opacity 300ms ease;
}
#voice-quick-dialog .voice-quick__water i {
  position: absolute;
  inset: 0;
  background: var(--accent);
  opacity: .08;
  border-radius: 44% 56% 57% 43% / 51% 43% 57% 49%;
  animation: voice-water-drift 9s linear infinite paused;
}
#voice-quick-dialog .voice-quick__water i:nth-child(2) { inset: 10px; opacity: .12; animation-duration: 7s; animation-direction: reverse; }
#voice-quick-dialog .voice-quick__water i:nth-child(3) { inset: 20px; opacity: .16; animation-duration: 5s; }
#voice-quick-dialog .voice-quick__mic::before {
  inset: -18px;
  border: 1px solid var(--accent);
  opacity: .12;
  animation: voice-water-breathe 3.5s ease-in-out infinite;
  pointer-events: none;
}
#voice-quick-dialog .voice-quick[data-state="listening"] .voice-quick__mic { animation: none; }
#voice-quick-dialog .voice-quick[data-state="listening"] .voice-quick__water i { animation-play-state: running; }
#voice-quick-dialog .voice-quick[data-state="listening"] .voice-quick__mic::before { animation: voice-water-ripple 2.4s ease-out infinite; }
#voice-quick-dialog .voice-quick__processing { display: none; position: absolute; gap: 7px; color: var(--accent-ink); }
#voice-quick-dialog .voice-quick__processing i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: voice-water-dot 1s ease-in-out infinite; }
#voice-quick-dialog .voice-quick__processing i:nth-child(2) { animation-delay: .15s; }
#voice-quick-dialog .voice-quick__processing i:nth-child(3) { animation-delay: .3s; }
#voice-quick-dialog .voice-quick[data-state="processing"] .voice-quick__processing { display: flex; }
#voice-quick-dialog .voice-quick[data-state="processing"] .voice-quick__mic > svg { opacity: 0; }
#voice-quick-dialog .voice-quick[data-state="processing"] .voice-quick__water { transform: scale(.75); opacity: .5; }
#voice-quick-dialog .voice-quick[data-state="done"] .voice-quick__status::before { content: "✓"; display: inline-block; margin-right: .5em; color: var(--accent); }
#voice-quick-dialog .voice-quick[data-state="error"] .voice-quick__water { opacity: .35; }
#voice-quick-dialog:not([open]) .voice-quick__mic *,
#voice-quick-dialog:not([open]) .voice-quick__mic::before { animation-play-state: paused; }
@keyframes voice-water-drift {
  0% { rotate: 0deg; scale: 1; border-radius: 44% 56% 57% 43% / 51% 43% 57% 49%; }
  35% { scale: 1.06; border-radius: 55% 45% 42% 58% / 43% 55% 45% 57%; }
  70% { scale: .97; border-radius: 48% 52% 58% 42% / 57% 49% 51% 43%; }
  100% { rotate: 360deg; scale: 1; border-radius: 44% 56% 57% 43% / 51% 43% 57% 49%; }
}
@keyframes voice-water-breathe { 50% { transform: scale(1.12); opacity: .05; } }
@keyframes voice-water-ripple { from { transform: scale(.95); opacity: .25; } to { transform: scale(1.45); opacity: 0; } }
@keyframes voice-water-dot { 0%,70%,100% { transform: translateY(0); opacity: .5; } 35% { transform: translateY(-6px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  #voice-quick-dialog .voice-quick__mic *,
  #voice-quick-dialog .voice-quick__mic::before { animation: none !important; transition: none; }
}

/* v388：語音示範改由 JS 洗牌，一次只掛載一個可見句子，避免 CSS 負延遲造成兩句交疊。 */
#voice-quick-dialog .voice-quick__sample-stage {
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  min-height: 3rem;
}
#voice-quick-dialog .voice-quick__sample-stage .voice-quick__sample {
  display: none;
  grid-area: 1 / 1;
  color: var(--ink);
  font-size: clamp(1rem, 4.6vw, 1.2rem);
  white-space: nowrap;
}
#voice-quick-dialog .voice-quick__sample-stage .voice-quick__sample.is-active {
  display: block;
  animation: voice-example-enter 220ms var(--ease, ease-out) both;
}
#voice-quick-dialog .voice-quick__sample span {
  display: inline-block;
}
#voice-quick-dialog .voice-quick__sample-value { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--accent-strong); }
#voice-quick-dialog .voice-quick__sample-toggle {
  min-width: 88px;
  min-height: 44px;
  padding: 8px 12px;
  margin: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .7rem;
  letter-spacing: .04em;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
#voice-quick-dialog .voice-quick__sample-toggle:hover { color: var(--accent-strong); }
#voice-quick-dialog .voice-quick__sample-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#voice-quick-dialog:not([open]) .voice-quick__sample,
#voice-quick-dialog .voice-quick__prompts[hidden] .voice-quick__sample { animation: none; }
/* 暫停時保留目前這一句，不把全部句子攤開造成擁擠。 */
#voice-quick-dialog .is-motion-paused .voice-quick__sample,
#voice-quick-dialog .is-motion-paused .voice-quick__sample span { animation: none; }
@keyframes voice-example-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  #voice-quick-dialog .voice-quick__sample-stage .voice-quick__sample.is-active { animation: none; }
  #voice-quick-dialog .voice-quick__sample-toggle { display: none; }
}

/* v338：語音視窗獨立的深墨綠色票，涵蓋收音、編輯與股票確認。 */
#voice-quick-dialog {
  color-scheme: dark;
  --surface: #142923;
  --surface-strong: #1c352d;
  --ink: #f6f2e8;
  --muted: #b0c2b8;
  --line: #385247;
  --primary: #a5dfc4;
  --primary-strong: #a5dfc4;
  --accent: #86d5b5;
  --accent-strong: #a5dfc4;
  --accent-ink: #10291f;
  --accent-tint-ink: #f6f2e8;
  --accent-bright: #a5dfc4;
  --amber-50: #203d32;
  --amber-100: #294a3d;
  --amber-300: #86d5b5;
  --income-green: #86d5b5;
  --expense-red: #ffaea4;
  --danger: #ffaea4;
  --warning: #e9c587;
  --warning-ink: #e9c587;
  --warning-soft: #3c3525;
  --voice-mic: #167765;
  --voice-mic-ink: #fffaf0;
  color: var(--ink);
}
#voice-quick-dialog .voice-quick {
  background: radial-gradient(ellipse at 50% 22%, #224438 0%, var(--surface) 64%);
  box-shadow: inset 0 1px 0 rgb(190 232 207 / 8%);
}
#voice-quick-dialog .close-button {
  color: var(--ink);
  background: rgb(190 232 207 / 8%);
}
#voice-quick-dialog .close-button:hover { background: rgb(190 232 207 / 14%); }
#voice-quick-dialog .voice-quick__mic {
  color: var(--voice-mic-ink);
  background: var(--voice-mic);
  box-shadow: inset 0 1px 0 rgb(220 255 237 / 12%), 0 8px 28px rgb(0 0 0 / 12%);
}
#voice-quick-dialog .voice-quick__water i { opacity: .045; }
#voice-quick-dialog .voice-quick__water i:nth-child(2) { opacity: .065; }
#voice-quick-dialog .voice-quick__water i:nth-child(3) { opacity: .085; }
#voice-quick-dialog .voice-quick__processing { color: var(--voice-mic-ink); }
#voice-quick-dialog .voice-quick__prompts,
#voice-quick-dialog .voice-quick__cells,
#voice-quick-dialog .voice-quick__cell,
#voice-quick-dialog .voice-quick__amount-field,
#voice-quick-dialog .voice-quick:has(#voice-quick-result:not([hidden])) .dialog-actions {
  border-color: var(--line);
}
#voice-quick-dialog .voice-quick__amount-field:focus-within { border-color: var(--accent); }
#voice-quick-dialog .voice-quick__amount-field.is-missing { border-color: var(--danger); }
#voice-quick-dialog .voice-quick__amount-field input::placeholder,
#voice-quick-dialog .voice-quick__amount-hint,
#voice-quick-dialog .voice-invest__status[data-state="warn"] { color: var(--danger); }
#voice-quick-dialog .voice-quick__defer { color: var(--warning); }
#voice-quick-dialog .voice-quick__suggestions button:hover,
#voice-quick-dialog .voice-quick__suggestions button:focus-visible {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}
#voice-quick-dialog .voice-invest__action { color: var(--accent-ink); }
#voice-quick-dialog .voice-invest__editor input { color: var(--ink); }
#voice-quick-dialog #voice-invest-use-quote { border-color: var(--line); }
#voice-quick-dialog .voice-quick[data-state="error"] .voice-quick__status { color: var(--danger); }

/* v339：收音介面懸浮於遮罩上；只有示範膠囊及完成確認卡有底色。 */
#voice-quick-dialog::backdrop {
  background: rgb(8 19 16 / 80%);
  backdrop-filter: blur(10px) saturate(.65);
  -webkit-backdrop-filter: blur(10px) saturate(.65);
}
#voice-quick-dialog .voice-quick {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  gap: 20px;
}
#voice-quick-dialog .voice-quick > .dialog-header { margin-bottom: 0; }
#voice-quick-dialog .close-button {
  color: var(--ink);
  background: rgb(246 242 232 / 7%);
}
#voice-quick-dialog .voice-quick__stage { gap: 10px; padding: 10px 0 0; }
#voice-quick-dialog .voice-quick__mic {
  margin: 30px 0 26px;
  background: radial-gradient(circle at 38% 28%, #218873, #116452 85%);
  box-shadow: inset 0 1px 0 rgb(226 255 239 / 16%), 0 12px 36px rgb(0 0 0 / 14%);
}
#voice-quick-dialog .voice-quick__water { inset: -42px; }
#voice-quick-dialog .voice-quick__water i {
  background: radial-gradient(ellipse at 46% 48%, rgb(134 213 181 / 65%), transparent 70%);
  opacity: .14;
}
#voice-quick-dialog .voice-quick__water i:nth-child(2) { inset: 6px; opacity: .12; }
#voice-quick-dialog .voice-quick__water i:nth-child(3) { inset: 18px; opacity: .1; }
#voice-quick-dialog .voice-quick__mic::before {
  inset: -35px;
  border: 0;
  background: radial-gradient(ellipse, rgb(134 213 181 / 20%), transparent 68%);
}
#voice-quick-dialog .voice-quick__status {
  color: var(--ink);
  font-weight: 400;
  letter-spacing: .06em;
  text-shadow: 0 1px 8px rgb(0 0 0 / 25%);
}
#voice-quick-dialog .voice-quick__prompts {
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}
#voice-quick-dialog .voice-quick__sample-stage {
  width: fit-content;
  max-width: 100%;
  min-height: 56px;
  padding: 12px 22px;
  overflow: hidden;
  border: 1px solid rgb(203 233 214 / 12%);
  border-radius: 999px;
  background: rgb(20 41 35 / 82%);
  box-shadow: 0 6px 24px rgb(0 0 0 / 10%);
}
#voice-quick-dialog .voice-quick__sample-stage .voice-quick__sample {
  font-size: 1.05rem;
  letter-spacing: .04em;
}
#voice-quick-dialog .voice-quick__sample-note { margin: 0; color: var(--muted); }
#voice-quick-dialog .voice-quick__sample-toggle {
  min-height: 44px;
  color: var(--muted);
  text-decoration-color: rgb(176 194 184 / 35%);
}
#voice-quick-dialog .voice-quick[data-state="listening"] .voice-quick__heard,
#voice-quick-dialog .voice-quick[data-state="processing"] .voice-quick__heard {
  justify-self: center;
  padding: 12px 20px;
  border: 1px solid rgb(203 233 214 / 12%);
  border-radius: 24px;
  background: rgb(20 41 35 / 82%);
}
/* 完成後才展開實心確認卡，包含股票兩階段流程的最後確認。 */
#voice-quick-dialog .voice-quick[data-state="done"]:not(.is-asking-price) {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgb(190 232 207 / 8%);
}
#voice-quick-dialog .voice-quick.is-asking-price .voice-invest__ask-input { background: rgb(20 41 35 / 82%); }
#voice-quick-dialog .voice-quick.is-asking-price .voice-invest__ask strong { color: var(--ink); }
@media (max-width: 380px) {
  #voice-quick-dialog .voice-quick__sample-stage { padding-inline: 16px; }
  #voice-quick-dialog .voice-quick__sample-stage .voice-quick__sample { font-size: 1rem; }
}
/* 辨識中途文字及股票詢價仍屬懸浮階段，底部操作不鋪底板。 */
#voice-quick-dialog .voice-quick:not([data-state="done"]):has(#voice-quick-result) .dialog-actions,
#voice-quick-dialog .voice-quick.is-asking-price:has(#voice-quick-result) .dialog-actions {
  display: flex;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
}
#voice-quick-dialog .voice-quick:not([data-state="done"]):has(#voice-quick-result) #voice-quick-save,
#voice-quick-dialog .voice-quick:not([data-state="done"]):has(#voice-quick-result) #voice-quick-retry { display: none; }

/* v340：聆聽時以三道錯開擴散的細線聲波，補足柔光的動態辨識度。 */
#voice-quick-dialog .voice-quick[data-state="listening"] .voice-quick__water {
  inset: -32px;
}
#voice-quick-dialog .voice-quick[data-state="listening"] .voice-quick__water i {
  inset: 0;
  border: 1.25px solid #a6ebcb;
  border-radius: 50%;
  background: transparent;
  opacity: 0;
  animation: voice-listening-ring 2.4s cubic-bezier(.2,.45,.45,1) infinite;
}
#voice-quick-dialog .voice-quick[data-state="listening"] .voice-quick__water i:nth-child(2) { animation-delay: -.8s; }
#voice-quick-dialog .voice-quick[data-state="listening"] .voice-quick__water i:nth-child(3) { animation-delay: -1.6s; }
@keyframes voice-listening-ring {
  0% { opacity: 0; transform: scale(.54); }
  12% { opacity: .72; }
  60% { opacity: .34; }
  100% { opacity: 0; transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  #voice-quick-dialog .voice-quick[data-state="listening"] .voice-quick__water i { opacity: 0; transform: none; }
  #voice-quick-dialog .voice-quick[data-state="listening"] .voice-quick__water i:first-child { opacity: .22; }
}

/* v342：更多功能以深炭底、留白圖示與單一說明入口呈現。 */
#mobile-more-dialog .dialog-card--mobile-more {
  padding: 24px 20px 18px;
  gap: 18px;
  background: #191d1b;
}
#mobile-more-dialog .dialog-header { align-items: center; }
#mobile-more-dialog .dialog-header h2 { font-size: 1.15rem; font-weight: 500; }
#mobile-more-dialog .close-button { background: rgb(255 255 255 / 7%); }
#mobile-more-dialog .close-button:hover { background: rgb(255 255 255 / 12%); }
#mobile-more-dialog .mobile-more-grid { gap: 12px 8px; }
#mobile-more-dialog .mobile-more-tile__button {
  padding: 12px 2px 6px;
  gap: 8px;
  background: transparent;
  border-radius: 12px;
}
#mobile-more-dialog .mobile-more-tile__button:hover,
#mobile-more-dialog .mobile-more-tile__button:focus-visible { background: rgb(255 255 255 / 6%); }
#mobile-more-dialog .mobile-more-tile__button:focus-visible,
#mobile-more-dialog .close-button:focus-visible,
#mobile-more-dialog .mobile-more-help summary:focus-visible { outline-color: #8ad4bb; }
#mobile-more-dialog .mobile-more-tile__icon { color: #69bca8; }
#mobile-more-dialog .mobile-more-tile__label { font-size: .75rem; font-weight: 400; color: #f1f2eb; }
#mobile-more-dialog .mobile-more-item__beta-badge {
  padding: 0 6px;
  color: #a8dfca;
  background: #29453a;
  font-weight: 500;
}
#mobile-more-dialog .mobile-more-help { min-width: 0; color: #b6c5bc; }
#mobile-more-dialog .mobile-more-help summary {
  padding: 12px 8px;
  min-height: 44px;
  text-align: center;
  font-size: .78rem;
  cursor: pointer;
}
#mobile-more-dialog .mobile-more-help summary:hover { color: #f1f2eb; }
#mobile-more-dialog .mobile-more-help dl { margin: 10px 0 0; padding: 14px 0 0; border-top: 1px solid rgb(255 255 255 / 10%); }
#mobile-more-dialog .mobile-more-help dl > div { display: grid; grid-template-columns: 4.5em minmax(0,1fr); gap: 12px; margin-bottom: 14px; font-size: .78rem; line-height: 1.6; }
#mobile-more-dialog .mobile-more-help dt { color: #f1f2eb; font-weight: 500; }
#mobile-more-dialog .mobile-more-help dd { margin: 0; }
#mobile-more-dialog .app-footer-panel { display: grid; margin-top: 0; gap: 4px; padding: 12px 0 0; border-top: 1px solid rgb(255 255 255 / 8%); }
#mobile-more-dialog .app-footer-panel .app-footer__version { margin: 0; color: #a8b5ad; font-size: .72rem; font-weight: 400; }
#mobile-more-dialog .app-footer-panel .app-footer__copyright { margin: 0; color: #a8b5ad; font-size: .7rem; line-height: 1.6; }
#mobile-more-dialog .app-footer__copyright a { text-decoration-color: rgb(168 181 173 / 35%); }

/* v343：柔霧白滑動功能列。與核准樣本一致，以輕薄雙向陰影呈現浮起感。 */
@media (max-width: 959px) {
  .main-content { padding-bottom: calc(12rem + env(safe-area-inset-bottom)); }
  .mobile-nav {
    --dock-paper: #edf1f2;
    --dock-ink: #64716e;
    --dock-selected: #206f5b;
    display: block;
    bottom: max(.75rem, env(safe-area-inset-bottom));
    min-height: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }
  .mobile-nav__hint {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 26px;
    padding: 3px 10px;
    color: #4d6157;
    background: rgb(237 241 242 / 94%);
    border-radius: 12px;
    font-size: .7rem;
    line-height: 1.5;
    text-align: center;
  }
  .mobile-nav__base {
    position: relative;
    padding: 6px 0;
    background: var(--dock-paper);
    border-radius: 28px;
    box-shadow: -5px -5px 14px rgb(255 255 255 / 85%), 5px 6px 14px rgb(117 137 143 / 30%);
  }
  .mobile-nav__viewport {
    display: flex;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    border-radius: 28px;
    -webkit-overflow-scrolling: touch;
    user-select: none;
  }
  .mobile-nav__viewport::-webkit-scrollbar { display: none; }
  .mobile-nav__viewport.is-dragging { scroll-snap-type: none; }
  .mobile-nav__page {
    flex: 0 0 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 0 8px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .mobile-nav__page > button:nth-child(3) { grid-column: 4; }
  .mobile-nav__page > button:nth-child(4) { grid-column: 5; }
  .mobile-nav .mobile-nav__page > button {
    min-width: 0;
    min-height: 58px;
    height: 100%;
    padding: 6px 0;
    gap: 7px;
    color: var(--dock-ink);
    font-size: .68rem;
    font-weight: 400;
    border-radius: 20px;
    white-space: nowrap;
    transition: color 160ms ease, translate 140ms ease;
  }
  .mobile-nav .mobile-nav__page > button.is-active { color: var(--dock-selected); }
  .mobile-nav .mobile-nav__page > button:active { translate: 0 2px; }
  .mobile-nav .mobile-nav__page .nav-icon,
  .mobile-nav .mobile-nav__page .menu-icon { width: 21px; height: 21px; flex: 0 0 21px; stroke-width: 1.65; }
  .mobile-nav .mobile-nav__icon { display: grid; position: relative; place-items: center; width: 21px; height: 21px; }
  .mobile-nav__label { display: flex; flex-direction: column; align-items: center; gap: 2px; }
  .mobile-nav .mobile-more-item__beta-badge { position: absolute; top: -3px; right: 0; padding: 0 4px; color: #206f5b; background: #d5e7de; font-size: .5rem; }
  .mobile-nav .mobile-nav__page > button { position: relative; }
  .mobile-nav .recurring-due-badge { position: absolute; top: -5px; right: -8px; }
  .mobile-nav .mobile-nav__add {
    position: absolute;
    top: -18px;
    left: 50%;
    width: 54px;
    height: 54px;
    min-height: 54px;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    color: var(--dock-selected);
    background: var(--dock-paper);
    border: 3px solid var(--dock-paper);
    box-shadow: -4px -4px 9px rgb(255 255 255 / 85%), 4px 5px 10px rgb(117 137 143 / 30%);
    font-weight: 400;
    font-size: 1.7rem;
  }
  .mobile-nav .mobile-nav__add:active { box-shadow: inset 2px 2px 5px #b6c3c655, inset -2px -2px 5px #ffffffcc; }
  .mobile-nav__pager { display: flex; justify-content: center; align-items: center; margin: 8px auto 0; width: fit-content; border-radius: 30px; background: rgb(237 241 242 / 94%); }
  .mobile-nav .mobile-nav__dot,
  .mobile-nav .mobile-nav__arrow { width: 44px; height: 44px; min-height: 44px; padding: 0; color: #427260; }
  .mobile-nav .mobile-nav__arrow { font-size: 1.35rem; font-weight: 400; }
  .mobile-nav .mobile-nav__arrow:disabled { opacity: .3; }
  .mobile-nav__dot::before { content: ''; width: 5px; height: 5px; border-radius: 9px; background: #85958d; opacity: .45; transition: width 180ms ease; }
  .mobile-nav__dot[aria-pressed="true"]::before { width: 19px; opacity: 1; background: #397e68; }
  .mobile-nav button:focus-visible { outline: 2px solid var(--dock-selected); outline-offset: -2px; }
  .mobile-nav .is-active .nav-icon,
  .mobile-nav .is-active .menu-icon { animation: mobile-dock-select 280ms ease-out; }
  .mobile-nav__group { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@keyframes mobile-dock-select { 40% { transform: translateY(-2px) scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
  .mobile-nav *, .mobile-nav *::before { animation: none !important; transition: none !important; scroll-behavior: auto; }
}
@media (max-width: 959px) {
  .mobile-nav__page > button > span:last-child { min-height: 30px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
  .mobile-nav .mobile-more-item__beta-badge { position: static; font-size: .5rem; }
}

/* v344：底座加深為霧面灰綠，分組標籤與分頁點收進底座。 */
@media (max-width: 959px) {
  .mobile-nav { --dock-paper: #35443d; --dock-ink: #d1dbd5; --dock-selected: #b4efd0; }
  .mobile-nav__base { box-shadow: -5px -5px 14px rgb(255 255 255 / 8%), 5px 6px 14px rgb(22 39 29 / 28%); }
  .mobile-nav .mobile-nav__add { box-shadow: -4px -4px 9px rgb(255 255 255 / 8%), 4px 5px 10px rgb(15 30 21 / 30%); }
  .mobile-nav .mobile-nav__add:active { box-shadow: inset 2px 2px 5px #18271f66, inset -2px -2px 5px #d7efdf12; }
  .mobile-nav__pager { margin: 0 auto; background: transparent; }
  .mobile-nav__dot::before { background: #a8bdb0; opacity: .6; }
  .mobile-nav__dot[aria-pressed="true"]::before { background: #c4efd8; }
  .mobile-nav .mobile-more-item__beta-badge { color: #c5f0dc; background: #486555; }
  .mobile-nav__group { display: block; position: static; width: auto; height: auto; overflow: visible; clip-path: none; margin: 0 0 8px; color: #c4d1c9; font-size: .7rem; line-height: 1.5; text-align: center; letter-spacing: .08em; white-space: normal; }
}

/* v345：上方保留深綠毛玻璃底座；分頁與名稱懸浮於底座外，不再延伸色塊。 */
@media (max-width: 959px) {
  .mobile-nav { --dock-ink: #e0e9e2; --dock-selected: #b9efd2; }
  .mobile-nav__base {
    background: linear-gradient(135deg, rgb(129 171 143 / 16%), rgb(43 80 57 / 8%)), rgb(20 43 30 / 72%);
    backdrop-filter: blur(12px) saturate(125%);
    -webkit-backdrop-filter: blur(12px) saturate(125%);
    border: 1px solid rgb(186 220 196 / 30%);
    box-shadow: inset 0 1px 0 rgb(219 245 225 / 12%), 0 8px 22px rgb(17 40 26 / 23%);
  }
  .mobile-nav .mobile-nav__add {
    color: #123c2e;
    background: linear-gradient(145deg, #75cbb5, #43ab92 55%, #2b947c);
    border-color: #365e4b;
    box-shadow: inset 0 1px 1px rgb(225 255 238 / 35%), 0 4px 12px rgb(16 41 27 / 28%);
  }
  .mobile-nav .mobile-nav__add:active { box-shadow: inset 1px 2px 5px rgb(12 68 49 / 28%); }
  .mobile-nav__pager { margin-top: 2px; background: transparent; }
  .mobile-nav__dot::before { background: #5b7867; opacity: .75; box-shadow: 0 0 4px rgb(255 253 245 / 95%); }
  .mobile-nav__dot[aria-pressed="true"]::before { background: #25664e; }
  .mobile-nav__group { color: #294b3a; margin-bottom: 0; text-shadow: 0 0 4px #fffdf5, 0 1px 3px #fffdf5, 1px 0 2px #fffdf5; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 959px) { .mobile-nav__base { background: rgb(29 53 39 / 94%); } }
}

/* v346：分組名稱移至左上、Beta 貼齊圖示，移除第二行標籤預留高度。 */
@media (max-width: 959px) {
  .mobile-nav__group {
    position: absolute;
    left: 14px;
    top: -26px;
    max-width: calc(50% - 44px);
    margin: 0;
    font-size: .66rem;
    line-height: 1.5;
    letter-spacing: .04em;
    text-align: left;
    white-space: nowrap;
  }
  .mobile-nav__base { padding: 4px 0; }
  .mobile-nav .mobile-nav__page > button { min-height: 54px; padding: 6px 0; gap: 5px; }
  .mobile-nav__page > button > span:last-child { min-height: 0; }
  .mobile-nav .mobile-nav__label { gap: 0; }
  .mobile-nav [data-view="split"] .mobile-more-item__beta-badge {
    position: absolute;
    top: -6px;
    left: calc(100% - 14px);
    right: auto;
    padding: 1px 4px;
    font-size: .5rem;
    line-height: 1.35;
    border-radius: 999px;
    white-space: nowrap;
    pointer-events: none;
  }
}

/* v347：底列材質使用既有主題色階，跟隨 emerald／amber／indigo 即時切換。 */
@media (max-width: 959px) {
  .mobile-nav {
    --dock-base: color-mix(in srgb, var(--primary) 60%, var(--accent-strong));
    --dock-paper: var(--dock-base);
    --dock-ink: color-mix(in srgb, var(--ivory-100) 90%, var(--amber-300));
    --dock-selected: color-mix(in srgb, var(--amber-300) 22%, var(--ivory-100));
    --dock-caption: color-mix(in srgb, var(--primary) 55%, var(--accent-strong));
    --dock-glow: color-mix(in srgb, var(--amber-300) 65%, var(--ivory-100));
  }
  .mobile-nav__base {
    background: linear-gradient(135deg, color-mix(in srgb, var(--dock-glow) 16%, transparent), color-mix(in srgb, var(--accent-strong) 8%, transparent)), color-mix(in srgb, var(--dock-base) 72%, transparent);
    border-color: color-mix(in srgb, var(--dock-glow) 30%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--dock-glow) 12%, transparent), 0 8px 22px color-mix(in srgb, var(--dock-base) 23%, transparent);
  }
  .mobile-nav .mobile-nav__add {
    color: var(--primary);
    background: linear-gradient(145deg, color-mix(in srgb, var(--amber-300) 75%, var(--ivory-100)), var(--accent-bright) 55%, color-mix(in srgb, var(--accent-bright) 85%, var(--accent-strong)));
    border-color: color-mix(in srgb, var(--dock-base) 70%, var(--accent-bright));
    box-shadow: inset 0 1px 1px color-mix(in srgb, var(--ivory-100) 35%, transparent), 0 4px 12px color-mix(in srgb, var(--dock-base) 28%, transparent);
  }
  .mobile-nav .mobile-nav__add:active { box-shadow: inset 1px 2px 5px color-mix(in srgb, var(--accent-strong) 28%, transparent); }
  .mobile-nav__dot::before { background: color-mix(in srgb, var(--dock-caption) 65%, var(--surface)); box-shadow: 0 0 4px var(--surface-strong); }
  .mobile-nav__dot[aria-pressed="true"]::before { background: var(--dock-caption); }
  .mobile-nav__group { color: var(--dock-caption); text-shadow: 0 0 4px var(--surface-strong), 0 1px 3px var(--surface-strong), 1px 0 2px var(--surface-strong); }
  .mobile-nav .mobile-more-item__beta-badge { color: var(--dock-selected); background: color-mix(in srgb, var(--dock-base) 70%, var(--accent-bright)); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 959px) { .mobile-nav__base { background: color-mix(in srgb, var(--dock-base) 94%, transparent); } }
}

/* v348：移除可見分組文字，底列下移，底部只保留裝置安全區。 */
@media (max-width: 959px) {
  .mobile-nav { bottom: env(safe-area-inset-bottom, 0px); }
  .mobile-nav__pager { margin: -4px auto 0; }
  .main-content { padding-bottom: calc(8.5rem + env(safe-area-inset-bottom)); }
}

/* v349：尚未開放的配色僅供預覽，原生停用以避免誤點。 */
.theme-option:disabled { cursor: not-allowed; opacity: .65; }
.theme-option:disabled:hover { border-color: var(--line); background: var(--surface-strong); box-shadow: none; transform: none; }
.theme-option:disabled .theme-option__text small { color: var(--muted); }

/* v350：中央鈕移除外圈、改為稍淡灰綠；基座刷入柔和深色漸層。 */
@media (max-width: 959px) {
  .mobile-nav__base {
    background: linear-gradient(115deg, color-mix(in srgb, var(--dock-glow) 10%, transparent), color-mix(in srgb, var(--dock-base) 8%, transparent) 38%, color-mix(in srgb, var(--primary) 30%, transparent)), color-mix(in srgb, var(--dock-base) 72%, transparent);
  }
  .mobile-nav .mobile-nav__add {
    border: 0;
    color: var(--ivory-100);
    background: color-mix(in srgb, var(--dock-base) 48%, var(--dock-glow));
    box-shadow: 0 4px 12px color-mix(in srgb, var(--dock-base) 22%, transparent);
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 959px) { .mobile-nav__base { background: color-mix(in srgb, var(--dock-base) 94%, transparent); } }
}

/* v351：基座實際挖空中央圓鈕周圍，圓鈕本身另取背景做透明毛玻璃。 */
@media (max-width: 959px) {
  .mobile-nav__base {
    background: none;
    border-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
  .mobile-nav__base::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    border: 1px solid color-mix(in srgb, var(--dock-glow) 30%, transparent);
    background: linear-gradient(115deg, color-mix(in srgb, var(--dock-glow) 10%, transparent), color-mix(in srgb, var(--dock-base) 8%, transparent) 38%, color-mix(in srgb, var(--primary) 30%, transparent)), color-mix(in srgb, var(--dock-base) 72%, transparent);
    backdrop-filter: blur(12px) saturate(125%);
    -webkit-backdrop-filter: blur(12px) saturate(125%);
    -webkit-mask-image: radial-gradient(circle at 50% 9px, transparent 28px, #000 28.5px);
    mask-image: radial-gradient(circle at 50% 9px, transparent 28px, #000 28.5px);
    pointer-events: none;
  }
  .mobile-nav__viewport { position: relative; z-index: 1; }
  .mobile-nav .mobile-nav__add {
    z-index: 2;
    color: var(--primary);
    border: 0.5px solid transparent;
    background: color-mix(in srgb, color-mix(in srgb, var(--dock-base) 48%, var(--dock-glow)) 54%, transparent);
    background-clip: padding-box;
    backdrop-filter: blur(9px) saturate(125%);
    -webkit-backdrop-filter: blur(9px) saturate(125%);
    box-shadow: none;
  }
  .mobile-nav .mobile-nav__add:active { box-shadow: none; background-color: color-mix(in srgb, var(--dock-base) 68%, transparent); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 959px) {
    .mobile-nav__base::before { background: color-mix(in srgb, var(--dock-base) 94%, transparent); }
    .mobile-nav .mobile-nav__add { background-color: color-mix(in srgb, var(--dock-base) 85%, var(--dock-glow)); }
  }
}

/* v354：帳戶卡片長按後才進入拖曳；一般手勢保留頁面捲動。 */
.acct-stack.is-holding { cursor: grabbing; }

/* v356：左右跟手翻卡，上下與雙指縮放保留瀏覽器原生操作。 */
.acct-stack { touch-action: pan-y pinch-zoom; }
.acct-stack.is-single { touch-action: auto; }
.acct-stack .acct-card { transition: transform 240ms var(--ease), opacity 240ms var(--ease), box-shadow 240ms var(--ease); }
.acct-stack .acct-card.is-dragging { transition: none; will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .acct-stack .acct-card { transition: none; }
}

/* v357：輕量滑動教學浮層，不影響卡片點擊與捲動。 */
.acct-swipe-hint {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: inherit;
  pointer-events: none;
  color: #fff;
  text-shadow: 0 1px 5px rgb(0 0 0 / 55%);
  font-size: .85rem;
  font-weight: 650;
}
.acct-swipe-hint > span:last-child {
  background: rgb(13 36 30 / 78%);
  border-radius: 999px;
  padding: 7px 14px;
}
.acct-swipe-hint__gesture {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgb(13 36 30 / 65%);
  animation: acct-swipe-demo 1.5s ease-in-out 3;
}
.acct-swipe-hint__gesture svg { width: 100%; height: 100%; }
@keyframes acct-swipe-demo {
  0%, 100% { transform: translateX(20px); opacity: .8; }
  50% { transform: translateX(-20px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .acct-swipe-hint__gesture { animation: none; }
}

/* Sprint 3：沿用既有表單、dialog 與主題 tokens，只補分帳內容的排版。 */
/* 2026-10-18 新增（Lucas 回報：底部分頁籤中間浮起的＋號鈕跟「分帳紀錄」空狀態的「記第一筆」
   CTA 擠在一起，視覺上疊在同一個位置）：根因是 .split-detail-tabs__add 用 position:absolute
   浮在分頁籤列上方 18px（詳見 .split-detail-tabs__add 的註解），當分頁內容很短（例如還沒有
   任何紀錄的空狀態）時，捲動容器根本不用捲動，浮起的＋號鈕就會直接疊在空狀態最下面的內容上。
   這裡幫三個分頁（分帳紀錄／結算／成員）統一留一段底部留白（跟＋號鈕浮起的高度加一點緩衝），
   確保不管內容多短，最後一塊內容都不會被浮起的＋號鈕蓋到；同時「記第一筆」這顆重複按鈕本身
   也拿掉了（見 app.js 的 renderSplitExpenses()），兩個改動一起解決這個疊圖問題。 */
.split-detail-panel { padding-bottom: var(--space-8); }
.split-expenses-section { margin-bottom: var(--space-5); }
.split-expenses-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.split-expenses-heading h3 { margin: 0; }
/* 2026-10-18 第三次改版（Lucas 要求改成跟醬記主帳本「收支流水」同一套樣式）：不再自己維護一套
   .split-expense-row 樣式，整列直接重用主帳本收支流水的 .transaction-item／.transaction-main／
   .transaction-avatar／.transaction-title／.transaction-subtitle／.transaction-amount（定義在前面
   第 1658 行附近），這裡只補分帳專屬的頭像底色、以及應收/應付這兩個金額上色修飾類別。
   .transaction-list 的 gap 本來就是 0（用 .transaction-item 自己的 border-bottom 分隔每一列），
   分帳列表沿用同一套密度，所以把原本的 gap:8px 卡片間距拿掉。 */
.split-expense-list { display: grid; gap: 0; }
.split-expense-item__avatar {
  overflow: hidden;
  color: var(--muted);
  background: var(--surface-strong);
}
.split-expense-item__avatar img { width: 100%; height: 100%; object-fit: cover; }
.transaction-amount.is-receivable { color: var(--accent-strong); }
.transaction-amount.is-payable { color: var(--danger, #b04437); }
.split-expense-fields { display: grid; gap: 16px; border: 0; padding: 0; margin: 0; min-width: 0; }
.split-expense-fields > label, .split-expense-columns label { display: grid; gap: 6px; min-width: 0; }
.split-expense-fields input:not([type="radio"]), .split-expense-fields textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.split-expense-fields input:disabled, .split-expense-fields textarea:disabled { opacity: 1; color: var(--muted); }
.split-expense-columns { display: grid; grid-template-columns: minmax(72px, 1fr) minmax(0, 2fr); gap: 12px; }
.split-choice { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.split-choice legend { margin-bottom: 8px; font-weight: 650; }
.split-choice label { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--surface-strong); cursor: pointer; }
.split-choice input { width: 16px; height: 16px; accent-color: var(--accent); }
.split-avatar-picker { display: grid; gap: 10px; }
.split-avatar-picker > span:first-child { font-weight: 650; }
#split-payer-note, #split-recipient-note { margin: -4px 0 0; color: var(--danger, #b04437); }
#split-payer-note[hidden], #split-recipient-note[hidden] { display: none; }
.split-avatar-options { display: flex; flex-wrap: wrap; gap: 14px 12px; padding-block: 2px; }
.split-avatar-option { display: grid; justify-items: center; gap: 4px; width: 66px; padding: 0; background: transparent; border: 0; color: inherit; cursor: pointer; }
.split-avatar-option:disabled { cursor: not-allowed; opacity: .55; }
.split-avatar-option__frame { position: relative; display: inline-flex; }
.split-avatar-option__avatar { display: flex; width: 52px; height: 52px; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; background: var(--surface-strong); border: 2px solid var(--line); font-size: 1.05rem; font-weight: 700; color: var(--muted); transition: border-color 140ms ease, box-shadow 140ms ease; }
.split-avatar-option__avatar img { width: 100%; height: 100%; object-fit: cover; }
.split-avatar-option[aria-pressed="true"] .split-avatar-option__avatar, .split-avatar-option[aria-checked="true"] .split-avatar-option__avatar { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.split-avatar-option__check { position: absolute; right: -2px; bottom: -2px; display: none; width: 19px; height: 19px; align-items: center; justify-content: center; background: var(--accent); border: 2px solid var(--surface); border-radius: 50%; color: #fff; font-size: .62rem; line-height: 1; }
.split-avatar-option[aria-pressed="true"] .split-avatar-option__check, .split-avatar-option[aria-checked="true"] .split-avatar-option__check { display: flex; }
.split-avatar-option__name { max-width: 66px; overflow: hidden; color: var(--muted); font-size: .74rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.split-avatar-option[aria-pressed="true"] .split-avatar-option__name, .split-avatar-option[aria-checked="true"] .split-avatar-option__name { color: var(--ink); font-weight: 650; }
.split-avatar-options--multi .split-avatar-option__avatar { border-radius: 16px; }
.split-expense-shares { display: grid; gap: 8px; }
.split-share-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 130px); gap: 12px; align-items: center; }
.split-share-row > span { overflow-wrap: anywhere; }
.split-share-row input, .split-share-row output { text-align: right; font-variant-numeric: tabular-nums; }
#split-shares-total.is-error { color: var(--danger, #b04437); }
.split-receipt-preview { margin-top: 16px; display: grid; gap: 8px; justify-items: start; }
.split-receipt-preview[hidden] { display: none; }
.split-receipt-preview img { display: block; max-width: 100%; max-height: 280px; object-fit: contain; border-radius: var(--radius-sm); }
.split-expense-actions { flex-wrap: wrap; }
.split-expense-actions > .text-button { margin-right: auto; min-height: 44px; }

/* v360：總覽固定在第一格；滑動頁保留第一格與中央新增按鈕的位置。 */
@media (max-width: 959px) {
  .mobile-nav__page > button:nth-child(1) { grid-column: 2; }
  .mobile-nav__page > button:nth-child(2) { grid-column: 4; }
  .mobile-nav__page > button:nth-child(3) { grid-column: 5; }
  .mobile-nav .mobile-nav__home {
    position: absolute;
    z-index: 2;
    top: 4px;
    bottom: 4px;
    left: 8px;
    width: calc((100% - 16px) / 5);
    min-width: 0;
    min-height: 54px;
    padding: 6px 0;
    gap: 5px;
    color: var(--dock-ink);
    font-size: .68rem;
    font-weight: 400;
    border-radius: 20px;
    white-space: nowrap;
    transition: color 160ms ease, translate 140ms ease;
  }
  .mobile-nav .mobile-nav__home.is-active { color: var(--dock-selected); }
  .mobile-nav .mobile-nav__home:active { translate: 0 2px; }
  .mobile-nav .mobile-nav__home .nav-icon { width: 21px; height: 21px; flex: 0 0 21px; stroke-width: 1.65; }
}

/* v361：轉帳只顯示收款人，不顯示多人分攤控制。 */
#split-recipient-picker[hidden], #split-participants-picker[hidden], #split-mode-options[hidden], #split-expense-shares[hidden] { display: none; }

/* Sprint 4：獨立幣別結算、每人淨額與轉帳關係對照。 */
.split-settlement-section { padding-block: 20px; border-top: 1px solid var(--line); margin-bottom: 16px; }
.split-settlement-currency { padding-block: 12px; border-top: 1px solid var(--line); }
.split-settlement-currency h4 { margin: 0 0 12px; }
.split-settlement-balances, .split-settlement-history ul { list-style: none; margin: 0; padding: 0; }
.split-settlement-balances li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; overflow-wrap: anywhere; }
.split-settlement-balances strong { font-variant-numeric: tabular-nums; }
.split-settlement-balances .is-receivable { color: var(--accent-strong); }
.split-settlement-balances .is-payable { color: var(--danger, #b04437); }
/* 2026-10-18 新增：應收/應付清單跟轉帳建議卡片改成頭像為主，參考其他分帳 App 的頭像辨識習慣，
   但配色跟疊放方式維持跟本站既有的頭像樣式（.split-member-row__avatar 等）一致，不是直接照抄。 */
.split-settlement-balance-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.split-settlement-balance-row__avatar {
  display: flex;
  width: 28px;
  height: 28px;
  flex: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--surface);
  border-radius: 50%;
}
.split-settlement-balance-row__avatar img { width: 100%; height: 100%; object-fit: cover; }
.split-settlement-balance-row__name { overflow-wrap: anywhere; }
.split-settlement-plans { display: grid; gap: 8px; }
.split-settlement-plan { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 12px; background: var(--surface-strong); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.split-settlement-plan__who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.split-settlement-plan__who > span:last-child { display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.split-settlement-plan__avatars { display: flex; align-items: center; gap: 4px; flex: none; }
.split-settlement-plan__avatar {
  display: flex;
  width: 32px;
  height: 32px;
  flex: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--surface);
  border: 2px solid var(--surface);
  border-radius: 50%;
}
.split-settlement-plan__avatar img { width: 100%; height: 100%; object-fit: cover; }
.split-settlement-plan__arrow { color: var(--muted); font-size: 1rem; line-height: 1; }
.split-settlement-plan strong { font-variant-numeric: tabular-nums; }
.split-settlement-cleared { color: var(--accent-strong); }
.split-settlement-history { margin-top: 12px; }
.split-settlement-history summary { cursor: pointer; min-height: 44px; padding-block: 10px; }
.split-settlement-history li { padding: 10px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.split-settlement-history small { display: block; color: var(--muted); }

/* v385：結算付款流程。延續醬記的高留白、細線與單一品牌色，不用厚重陰影；
   帳號是需要精準核對的資料，因此用等寬數字與獨立複製按鈕，避免把整張卡片做成模糊點擊區。 */
.split-settlement-heading { align-items: center; gap: var(--space-3); }
.split-settlement-heading__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); }
.split-settlement-heading__actions .text-button { color: var(--muted); font-size: 0.78rem; }
.split-settlement-heading__actions .text-button:first-child { color: var(--accent-strong); }

.split-payment-settings,
.split-payment-view { gap: var(--space-5); }
.split-payment-privacy {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--income-soft) 74%, white);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--radius-md);
}
.split-payment-privacy svg {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}
.split-payment-privacy p { display: grid; gap: 4px; margin: 0; line-height: 1.55; }
.split-payment-privacy span { color: var(--muted); font-size: 0.78rem; }
.split-payment-method-editor { display: grid; gap: var(--space-3); }
.split-payment-settings__empty {
  display: grid;
  gap: 6px;
  padding: var(--space-6) var(--space-4);
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
}
.split-payment-settings__empty p { max-width: 28rem; margin: 0 auto; color: var(--muted); font-size: 0.82rem; line-height: 1.65; }
.split-payment-method-edit {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.split-payment-method-edit__heading { display: flex; align-items: center; gap: var(--space-2); }
.split-payment-method-edit__heading strong { flex: 1; }
.split-payment-method-edit__heading .text-button { min-height: 36px; font-size: 0.76rem; }
.split-payment-method-edit label { display: grid; gap: 7px; }
.split-payment-method-edit label > span { color: var(--muted); font-size: 0.75rem; font-weight: 700; }
.split-payment-add-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }

.split-payment-method-icon {
  display: inline-flex;
  width: 38px;
  height: 38px;
  flex: none;
  align-items: center;
  justify-content: center;
  color: var(--accent-strong);
  background: var(--income-soft);
  border-radius: 12px;
}
.split-payment-method-icon svg,
.split-payment-empty__icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}
.split-payment-recipient {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: var(--space-2) 0 var(--space-5);
  border-bottom: 1px solid var(--line);
}
.split-payment-recipient__amount {
  color: var(--ink);
  font-size: clamp(1.7rem, 8vw, 2.35rem);
  font-weight: 780;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}
.split-payment-recipient__arrow { color: var(--accent-strong); font-size: 1.6rem; line-height: 1; }
.split-payment-recipient__avatar {
  display: flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--accent-strong);
  background: var(--income-soft);
  border-radius: 50%;
  font-size: 1.05rem;
  font-weight: 800;
}
.split-payment-recipient__avatar img { width: 100%; height: 100%; object-fit: cover; }
.split-payment-method-list { display: grid; gap: var(--space-2); }
.split-payment-method-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.split-payment-method-card__body { display: grid; min-width: 0; gap: 3px; }
.split-payment-method-card__body strong,
.split-payment-method-card__body code,
.split-payment-method-card__body small { overflow-wrap: anywhere; }
.split-payment-method-card__body code {
  color: var(--ink);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.035em;
}
.split-payment-method-card__body small { color: var(--muted); }
.split-payment-copy { min-height: 40px; padding-inline: 0.8rem; white-space: nowrap; }
.split-payment-note {
  margin: 0;
  padding: var(--space-3);
  color: var(--muted);
  background: var(--amber-50);
  border-radius: var(--radius-sm);
  font-size: 0.76rem;
  line-height: 1.65;
}
.split-payment-empty {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-4);
  text-align: center;
}
.split-payment-empty__icon {
  display: inline-flex;
  width: 72px;
  height: 72px;
  align-items: center;
  justify-content: center;
  color: var(--accent-strong);
  background: var(--income-soft);
  border-radius: 24px;
}
.split-payment-empty__icon svg { width: 34px; height: 34px; }
.split-payment-empty p { max-width: 28rem; margin: -4px 0 0; color: var(--muted); line-height: 1.65; }
.split-payment-view__actions .button { min-width: 0; }

@media (max-width: 600px) {
  .split-settlement-heading { align-items: flex-start; }
  .split-settlement-heading__actions { display: grid; justify-items: end; gap: 0; }
  .split-payment-add-actions { grid-template-columns: 1fr; }
  .split-payment-method-card { grid-template-columns: auto minmax(0, 1fr); }
  .split-payment-copy { grid-column: 1 / -1; width: 100%; }
  .split-payment-view__actions { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .split-payment-view__actions .button { width: 100%; padding-inline: 0.65rem; }
}

/* Sprint 5：沿用 IP 插圖與全站空狀態，避免額外厚重底板。 */
.split-empty-state { grid-column: 1 / -1; width: 100%; min-width: 0; box-sizing: border-box; padding: 20px 12px; background: transparent; }
.split-empty-state p { max-width: 34em; margin: 8px auto 16px; color: var(--muted); line-height: 1.7; overflow-wrap: anywhere; }
.split-empty-state .empty-state__mascot { width: 88px; height: 84px; object-fit: contain; }
.split-empty-state > strong { display: block; color: var(--ink); font-size: 1rem; }
.split-empty-state .button { min-height: 44px; max-width: 100%; white-space: normal; }
#split-expense-list .split-empty-state, #split-settlement-content .split-empty-state { padding-block: 12px; }

/* ===== v387：分帳新增紀錄與醬記手動支出共用同一套視覺語言 ===== */
.split-entry-simple {
  gap: var(--space-3);
}
.split-entry-simple > .dialog-header .eyebrow,
.split-entry-simple > .dialog-header h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.split-entry-simple > .dialog-header { justify-content: flex-end; margin-bottom: -10px; }
.split-entry-scope { margin: -4px 0 2px; text-align: center; }
.split-entry-types {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  border-radius: 999px;
}
.split-entry-types label {
  justify-content: center;
  min-height: 36px;
  padding: 0 10px;
  background: transparent;
  border-radius: 999px;
}
.split-entry-types input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.split-entry-types label:has(input:checked) {
  color: var(--accent-ink);
  background: var(--accent);
}
.split-entry-types label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.split-entry-panel { margin-top: -6px; }
.split-entry-panel > label { display: grid; gap: 6px; }
.split-entry-amount { margin-top: 0; }
.split-entry-details,
.split-avatar-picker {
  display: grid;
  gap: 0;
  padding: 0 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.split-entry-details > label {
  display: grid;
  grid-template-columns: minmax(72px, .42fr) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 60px;
  border-bottom: 1px solid var(--line);
}
.split-entry-details > label:last-child { border-bottom: 0; }
.split-entry-details > label > span { color: var(--muted); font-size: .82rem; font-weight: 650; }
.split-entry-details input {
  padding-inline: 0;
  text-align: right;
  font-weight: 700;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.split-entry-simple .split-avatar-picker { gap: 10px; padding-block: 16px; }
.split-entry-simple #split-mode-options { margin-top: 8px; }
.split-entry-simple #split-mode-options label {
  color: var(--muted);
  background: var(--surface-strong);
  border: 1px solid transparent;
}
.split-entry-simple #split-mode-options label:has(input:checked) {
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
}
.split-entry-simple .split-expense-shares {
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.split-entry-simple #split-shares-total { margin: -8px 4px 0; }
.split-entry-simple .split-expense-actions { display: grid; grid-template-columns: 1fr; }
.split-entry-simple .split-entry-close { display: none; }
.split-entry-simple #split-expense-save { width: 100%; min-height: 52px; }
.split-entry-simple #split-expense-delete { justify-self: start; margin: 0; }

/* 語音分帳：辨識後只呈現「選群組 → 選成員」兩個必要決策。 */
.voice-split { display: grid; gap: 14px; }
.voice-split[hidden] { display: none; }
.voice-split__summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.voice-split__label {
  display: grid;
  min-width: 48px;
  min-height: 34px;
  place-items: center;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 760;
}
.voice-split__summary > div { display: grid; gap: 3px; min-width: 0; }
.voice-split__summary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-split__summary small { color: var(--muted); }
.voice-split__summary > b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.voice-split__step {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: color-mix(in srgb, var(--surface-strong) 82%, transparent);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.voice-split__step[hidden] { display: none; }
.voice-split__step > div:first-child { display: flex; align-items: center; gap: 9px; }
.voice-split__step > div:first-child > span {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 50%;
  font-size: .72rem;
  font-weight: 780;
}
.voice-split__step > p { margin: -5px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.55; }
.voice-split__groups { display: grid; gap: 8px; }
.voice-split__group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  min-height: 56px;
  padding: 10px 12px;
  color: var(--ink);
  font: inherit;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
}
.voice-split__group span { grid-column: 1; color: var(--muted); font-size: .7rem; }
.voice-split__group strong { grid-column: 1; }
.voice-split__group small { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--accent); font-weight: 700; }
.voice-split__group.is-selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.voice-split__members { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
.voice-split__members .split-avatar-option { flex: 0 0 66px; }
.voice-split__empty { display: grid; gap: 10px; justify-items: start; }
.voice-split__empty p,
.voice-split__invalid { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.6; }
.voice-split__message { margin: 0; }
#voice-quick-dialog .voice-quick.is-split .voice-quick__stage { display: none; }
#voice-quick-dialog .voice-quick.is-split .voice-quick__result { gap: 12px; }

@media (max-width: 520px) {
  .split-entry-simple { width: min(100%, 32rem); padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); }
  .split-entry-scope { padding-inline: 12px; font-size: .72rem; }
  .split-entry-simple .split-avatar-options { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; }
  .split-entry-simple .split-avatar-option { flex: 0 0 66px; }
  .voice-split__summary { grid-template-columns: auto minmax(0, 1fr); }
  .voice-split__summary > b { grid-column: 2; }
}

/* v410：日期已移到標題上方，副標只剩「誰先付 多少」，回到單行（太長用省略號），避免換行跑版 */
.split-expense-item .transaction-main { min-width: 0; }
.split-expense-item .transaction-main > div { min-width: 0; }

/* v409／v410：分帳紀錄的日期時間移到標題上方（Lucas 要求） */
.split-expense-item__date { display: block; margin-bottom: 2px; color: var(--muted); font-size: 0.76rem; line-height: 1.3; }

/* v411／v412：「誰先付 多少」改成淺灰底膠囊（Lucas 要求） */
.split-expense-item .split-expense-item__payer {
  display: inline-block;
  max-width: 100%;
  margin-top: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  /* v412→v413：Lucas 要再淡一點、膠囊和字再小一點；底色很淺，文字用次要灰才看得到 */
  background: rgba(109, 109, 102, 0.09);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

/* v414：分帳紀錄金額上方的「你欠 Ben／Ben 欠你」，跟左邊日期同樣大小與灰色 */
.split-expense-item__money { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.split-expense-item__relation { color: var(--muted); font-size: 0.76rem; line-height: 1.3; font-weight: 500; white-space: nowrap; }

/* v414：多人一起付 */
.split-payer-extra { display: grid; gap: 8px; }
.split-payer-extra__add,
.split-payer-extra__choice,
.split-payer-extra__cancel {
  justify-self: start;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px dashed var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--accent-strong);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}
.split-payer-extra__choice { border-style: solid; color: var(--ink, inherit); }
.split-payer-extra__cancel { border: 0; color: var(--muted); }
.split-payer-extra__choices { display: flex; flex-wrap: wrap; gap: 8px; }
.split-payer-extra__ask { margin: 4px 0 0; font-size: 0.86rem; font-weight: 650; }
.split-payer-extra__row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 36px; align-items: center; gap: 8px; min-height: 44px; }
.split-payer-extra__row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.split-payer-extra__row output { text-align: right; font-weight: 650; padding-right: 10px; }
.split-payer-extra__row input { width: 100%; min-height: 40px; text-align: right; }
.split-payer-extra__hint { font-style: normal; font-size: 0.72rem; color: var(--muted); }
.split-payer-extra__remove { width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(109, 109, 102, 0.1); color: var(--muted); font-size: 1.1rem; cursor: pointer; }
.split-payer-extra__status { margin: 0; }
.split-payer-extra__status.is-error { color: var(--danger, #b04437); }

/* ===== v415：新增分帳兩步驟（Lucas 要求） ===== */
.split-step { display: grid; gap: var(--space-3); }
.split-step[hidden] { display: none; }

/* 金額旁的幣別膠囊：點了才展開幣別欄位 */
.split-currency-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  min-height: 32px;
  padding: 2px 6px 2px 10px;
  border: 1px solid color-mix(in srgb, var(--accent-bright, var(--accent)) 40%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-bright, var(--accent)) 12%, transparent);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.split-currency-chip b { font-size: 1rem; }
.split-currency-chip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; opacity: .75; }

/* 第一步：預設分法摘要 */
.split-quick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}
.split-quick[hidden] { display: none; }
.split-quick__label { color: var(--muted); font-size: .82rem; font-weight: 650; }
.split-quick strong { font-size: .95rem; text-align: right; }

/* 第二步：頂部摘要（點了回第一步） */
.split-step-summary {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.split-step-summary svg { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; }
.split-step-summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.split-step-summary i { font-style: normal; color: var(--accent-strong); font-size: .82rem; font-weight: 650; }
.split-step-summary:disabled { cursor: default; }
.split-step-summary:disabled i, .split-step-summary:disabled svg { display: none; }

/* 如何分：標題列右側的小下拉＋說明 */
.split-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.split-picker-head > span:first-child { font-weight: 650; }
.split-mode-select-wrap { display: inline-flex; align-items: center; gap: 6px; }
.split-mode-select-wrap select {
  min-height: 36px;
  padding: 4px 30px 4px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background-color: var(--surface);
  font: inherit;
  font-size: .86rem;
  font-weight: 650;
  color: var(--accent-strong);
}
.split-help-toggle {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
}
.split-entry-simple #split-participants-picker #split-shares-help { margin: 0; }

/* 試算結果卡 */
.split-trial {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.split-trial__title { color: var(--muted); font-size: .82rem; font-weight: 650; }
.split-entry-simple .split-trial .split-expense-shares { padding: 0; border: 0; background: none; }
.split-entry-simple .split-trial #split-shares-total { margin: 0; }
.split-trial__preview {
  margin: 4px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-weight: 700;
  font-size: .92rem;
}
.split-trial__preview.is-receivable { color: var(--accent-strong); }
.split-trial__preview.is-payable { color: var(--danger, #b04437); }

/* 按鈕：第一步「調整分法」＋「直接記帳」並排；第二步只有「記帳 TWD 350」 */
.split-entry-simple .split-expense-actions:has(#split-step-next:not([hidden])) { grid-template-columns: 1fr 1fr; }
.split-entry-simple .split-expense-actions:has(#split-step-next:not([hidden])):has(#split-expense-save[hidden]) { grid-template-columns: 1fr; }
.split-entry-simple #split-step-next { width: 100%; min-height: 52px; }

/* ===== v416：分帳紀錄明細（點紀錄先看說明，按「編輯」才進編輯） ===== */
.split-detail { width: min(100%, 30rem); gap: var(--space-3); }
.split-detail__body { display: grid; gap: 14px; }
.split-detail__hero { display: grid; gap: 2px; }
.split-detail__hero strong { font-size: 2rem; line-height: 1.15; letter-spacing: -.01em; }
.split-detail__hero span { color: var(--muted); font-size: .86rem; }
.split-detail__relation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: rgba(109, 109, 102, 0.08);
  font-weight: 650;
}
.split-detail__relation strong { font-size: 1.15rem; }
.split-detail__relation.is-receivable { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent-strong); }
.split-detail__relation.is-payable { background: color-mix(in srgb, var(--danger, #b04437) 9%, var(--surface)); color: var(--danger, #b04437); }
.split-detail__section {
  display: grid;
  gap: 6px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.split-detail__section h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 650;
}
.split-detail__section h3 span { font-weight: 500; }
.split-detail__section ul { display: grid; margin: 0; padding: 0; list-style: none; }
.split-detail__person {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  border-bottom: 1px solid var(--line);
}
.split-detail__person:last-child { border-bottom: 0; }
.split-detail__who { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.split-detail__who > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.split-detail__who small { color: var(--muted); font-weight: 500; }
.split-detail__person strong { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.split-detail__avatar {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border-radius: 50%;
  background: rgba(109, 109, 102, 0.12);
  color: var(--muted);
  font-size: .8rem;
  font-weight: 700;
}
.split-detail__avatar img { width: 100%; height: 100%; object-fit: cover; }
.split-detail__me {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent-strong);
  font-size: .7rem;
  font-style: normal;
  font-weight: 700;
  vertical-align: 1px;
}
.split-detail__transfer { display: flex; align-items: center; gap: 8px; min-height: 48px; font-weight: 650; }
.split-detail__transfer > span[aria-hidden] { color: var(--muted); margin-inline: 4px; }
.split-detail__note { margin: 0; white-space: pre-wrap; line-height: 1.6; }
.split-detail__receipt img { display: block; width: 100%; max-height: 260px; object-fit: cover; border-radius: 12px; }
.split-detail__meta { margin: 0; color: var(--muted); font-size: .78rem; text-align: center; }
.split-detail__actions { display: grid; grid-template-columns: 1fr 1fr; }
.split-detail__actions:has(#split-detail-edit[hidden]) { grid-template-columns: 1fr; }
.split-detail__actions .button { width: 100%; min-height: 48px; }
.split-detail__owe { display: grid; gap: 4px; margin: -6px 0 0; padding: 8px 16px 10px; list-style: none; border-radius: 0 0 var(--radius-md) var(--radius-md); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.split-detail__owe li { display: flex; justify-content: space-between; gap: 12px; font-size: .86rem; color: var(--accent-strong); }
.split-detail__owe b { font-variant-numeric: tabular-nums; }
.split-detail__relation:has(+ .split-detail__owe) { border-radius: var(--radius-md) var(--radius-md) 0 0; }

/* v417：分帳明細「每個人的結果」——付了／分攤／結果合在一列 */
.split-detail__who > span:last-child { display: grid; gap: 1px; }
.split-detail__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.split-detail__calc { color: var(--muted); font-size: .76rem; font-weight: 500; }
.split-detail__person { min-height: 56px; padding-block: 6px; }
.split-detail__person strong.is-receivable,
.split-detail__group strong.is-receivable { color: var(--accent-strong); }
.split-detail__person strong.is-payable,
.split-detail__group strong.is-payable { color: var(--danger, #b04437); }
.split-detail__group { border-bottom: 0; }
.split-detail__group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding-block: 6px;
  cursor: pointer;
  list-style: none;
}
.split-detail__group summary::-webkit-details-marker { display: none; }
.split-detail__group summary strong { flex-shrink: 0; }
.split-detail__group ul { padding-left: 12px; border-left: 2px solid var(--line); }
.split-detail__avatar--group { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent-strong); }
.split-detail__hint { margin: 4px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.5; }
.split-detail__relation > span { flex: 1; min-width: 0; }
.split-detail__relation > strong { flex-shrink: 0; white-space: nowrap; }
.split-detail__chev { display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-3px) rotate(45deg); transition: transform .2s; }
.split-detail__group details[open] .split-detail__chev { transform: translateY(1px) rotate(-135deg); }
/* v419：右側「可收回 11,200」較長時，左側小字可換行，不要被截斷 */
.split-detail__who > span:last-child { overflow: visible; white-space: normal; min-width: 0; }
.split-detail__calc { white-space: normal; line-height: 1.35; }
.split-detail__person > strong,
.split-detail__group summary > strong { white-space: nowrap; text-align: right; }
.split-detail__calc > span { white-space: nowrap; }

/* v420：最新消息「全部標為已讀」 */
.news-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: -4px; color: var(--muted); font-size: .86rem; font-weight: 600; }
.news-toolbar[hidden] { display: none; }
.news-toolbar .text-button { min-height: 36px; color: var(--accent-strong); font-weight: 700; }

/* v424：主畫面 App 總覽「下拉重新整理」 */
.pull-refresh {
  position: fixed;
  top: calc(env(safe-area-inset-top) - 44px);
  left: 50%;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 6px 18px rgba(18, 24, 26, 0.1);
  color: var(--muted);
  font-size: .82rem;
  font-weight: 650;
  opacity: 0;
  transform: translate(-50%, 0);
  pointer-events: none;
  transition: opacity .15s;
}
.pull-refresh.is-visible { opacity: 1; }
.pull-refresh.is-ready { color: var(--accent-strong); }
.pull-refresh__icon {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  transition: transform .2s;
}
.pull-refresh.is-ready .pull-refresh__icon { transform: rotate(180deg); }
.pull-refresh.is-loading .pull-refresh__icon { animation: pull-refresh-spin .7s linear infinite; }
@keyframes pull-refresh-spin { to { transform: rotate(360deg); } }

/* v427：主畫面 App 關掉瀏覽器內建的下拉重新整理／回彈，統一用醬記自己的下拉（才有提示和音效） */
html.is-installed-app,
html.is-installed-app body { overscroll-behavior-y: none; }
.pull-refresh { z-index: 9999; }

/* v429：修改信箱（帳號設定的未驗證提示、驗證擋板） */
.verification-banner__actions { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.change-email-form { display: grid; gap: 8px; width: 100%; }
.change-email-form[hidden] { display: none; }
.change-email-form label { display: grid; gap: 6px; color: var(--ink, inherit); font-weight: 650; }
.change-email-form input { width: 100%; min-height: 44px; }
.change-email-form .form-message:empty { display: none; }
.verify-gate-change { justify-self: start; margin: 4px 0; min-height: 44px; color: var(--accent-strong); font-weight: 700; }

/* ===== v430：客服與回報 ===== */
.news-item--support { grid-template-columns: minmax(0, 1fr) auto; align-items: center; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.news-item--support .news-item__summary-copy { display: grid; gap: 4px; min-width: 0; }
.news-item--support small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-item__kind--support { color: var(--danger, #b04437); }
.news-item__chev { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; }
.support-unread-badge { position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--danger, #b04437); color: #fff; font-size: 0.68rem; font-weight: 800; line-height: 18px; text-align: center; }
.support-unread-badge[hidden] { display: none; }
.support-entry-link { display: block; margin: 4px auto 0; min-height: 44px; color: var(--accent-strong); font-weight: 700; }

.support-dialog { width: min(100%, 34rem); min-width: 0; max-width: 100%; gap: var(--space-3); }
.support-view { display: grid; min-width: 0; max-width: 100%; gap: 12px; }
.support-view[hidden] { display: none; }
.support-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; min-width: 0; max-width: 100%; gap: 4px; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.support-tabs[hidden] { display: none; }
.support-tabs button { min-width: 0; max-width: 100%; min-height: 38px; padding: 5px 8px; overflow-wrap: anywhere; white-space: normal; line-height: 1.25; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer; }
.support-tabs button.is-on { background: var(--accent); color: var(--accent-ink); }
.support-thread-list { display: grid; min-width: 0; max-width: 100%; gap: 8px; }
.support-thread-item { display: grid; gap: 3px; width: 100%; min-width: 0; max-width: 100%; padding: 12px 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.support-thread-item.is-unread { border-color: color-mix(in srgb, var(--danger, #b04437) 40%, var(--line)); }
.support-thread-item__top { display: flex; min-width: 0; max-width: 100%; justify-content: space-between; align-items: center; gap: 10px; }
.support-thread-item__top strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-thread-item small { min-width: 0; max-width: 100%; color: var(--muted); font-size: .78rem; overflow-wrap: anywhere; }
.support-thread-item__preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--danger, #b04437); vertical-align: 1px; }
.support-status { flex-shrink: 0; margin-right: 6px; padding: 1px 8px; border-radius: 999px; background: rgba(109, 109, 102, 0.12); color: var(--muted); font-size: .72rem; font-weight: 700; font-style: normal; }
.support-status--open { background: color-mix(in srgb, var(--danger, #b04437) 12%, var(--surface)); color: var(--danger, #b04437); }
.support-status--answered { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent-strong); }
.support-empty { margin: 8px 0; color: var(--muted); text-align: center; line-height: 1.6; }
.support-back { justify-self: start; min-height: 40px; padding: 0 4px; border: 0; background: none; color: var(--accent-strong); font: inherit; font-weight: 700; cursor: pointer; }
.support-form label { display: grid; gap: 6px; font-weight: 650; }
.support-form label[hidden] { display: none; }
.support-form select, .support-form input, .support-form textarea, .support-reply textarea { width: 100%; min-height: 44px; font: inherit; }
.support-images { display: grid; gap: 8px; }
.support-images__add { justify-self: start; position: relative; cursor: pointer; }
.support-images__preview { display: flex; flex-wrap: wrap; gap: 8px; }
.support-images__preview:empty { display: none; }
.support-thumb { position: relative; width: 72px; height: 72px; }
.support-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.support-thumb button { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(23, 35, 31, 0.8); color: #fff; font-size: .9rem; line-height: 24px; cursor: pointer; }
.support-thread-head { display: grid; gap: 4px; }
.support-thread-head small { color: var(--muted); }
.support-context { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: rgba(109, 109, 102, 0.08); font-size: .76rem; color: var(--muted); word-break: break-all; }
.support-context b { color: var(--ink, inherit); margin-right: 4px; }
.support-messages { display: grid; gap: 10px; max-height: min(48vh, 420px); overflow-y: auto; padding: 4px 2px; }
.support-msg { justify-self: start; display: grid; gap: 6px; max-width: 86%; padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: var(--surface); border: 1px solid var(--line); }
.support-msg.is-mine { justify-self: end; border-radius: 14px 14px 4px 14px; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.support-msg.is-staff:not(.is-mine) { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.support-msg p { margin: 0; white-space: pre-wrap; line-height: 1.6; word-break: break-word; }
.support-msg img { display: block; max-width: 200px; max-height: 240px; border-radius: 10px; object-fit: cover; }
.support-msg small { color: var(--muted); font-size: .72rem; }
.support-reply { display: grid; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.support-reply__actions { display: flex; justify-content: space-between; gap: 8px; }
.support-reply .form-message:empty, .support-form .form-message:empty { display: none; }
.support-admin-actions { display: flex; justify-content: flex-end; }
.support-admin-actions[hidden] { display: none; }
.mobile-more-tile__icon { position: relative; }

/* v4.51：客服視窗在手機開啟「全部對話」時，頁籤的長文字、管理數量與清單內容
   不得用內容最小寬度把卡片撐出螢幕。這裡只限制客服視窗，避免影響其他 dialog。 */
#support-dialog .dialog-header,
#support-dialog .support-form,
#support-dialog .support-thread-head,
#support-dialog .support-messages,
#support-dialog .support-reply {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 420px) {
  #support-dialog .support-dialog {
    width: 100%;
    padding: 18px;
  }

  #support-dialog .dialog-header {
    gap: 12px;
  }

  #support-dialog .support-tabs button {
    padding-inline: 6px;
    font-size: 0.78rem;
  }

  #support-dialog .support-thread-item {
    padding-inline: 12px;
  }

  #support-dialog .support-thread-item__top {
    align-items: flex-start;
    gap: 8px;
  }

  #support-dialog .support-status {
    margin-right: 0;
  }
}

/* v433：更多功能「客服與回報」移到功能說明下方 */
#mobile-more-dialog .mobile-more-support {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  justify-self: center;
  margin: 4px auto 0;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 999px;
  background: transparent;
  color: #b6c5bc;
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
}
#mobile-more-dialog .mobile-more-support:hover { color: #f1f2eb; background: rgb(255 255 255 / 6%); }
#mobile-more-dialog .mobile-more-support svg { width: 18px; height: 18px; fill: none; stroke: #8ad4bb; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.support-unread-badge--inline { position: static; }

/* v434：卡關提示泡泡（底部導覽列上方） */
.struggle-hint {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 108px);
  z-index: 80;
  display: grid;
  gap: 10px;
  width: min(calc(100vw - 32px), 360px);
  padding: 14px 16px 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 14px 36px rgba(18, 24, 26, 0.18);
  opacity: 0;
  transform: translate(-50%, 16px);
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.struggle-hint.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.struggle-hint__text { margin: 0; font-weight: 650; line-height: 1.55; }
.struggle-hint__actions { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
.struggle-hint__primary, .struggle-hint__ghost { min-height: 44px; border-radius: 12px; font: inherit; font-weight: 700; cursor: pointer; }
.struggle-hint__primary { border: 0; background: var(--accent); color: var(--accent-ink); }
.struggle-hint__ghost { border: 1px solid var(--line); background: transparent; color: var(--ink, inherit); }
.struggle-hint__never { justify-self: center; min-height: 32px; border: 0; background: none; color: var(--muted); font: inherit; font-size: .78rem; text-decoration: underline; cursor: pointer; }
@media (min-width: 900px) { .struggle-hint { bottom: 32px; left: auto; right: 32px; transform: translate(0, 16px); } .struggle-hint.is-visible { transform: none; } }

/* v435：最新消息逐則刪除、工具列 */
.news-item__meta { position: relative; }
.news-item__delete {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-left: auto;
  margin-right: -6px;
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
}
.news-item__delete:hover, .news-item__delete:focus-visible { background: rgba(109, 109, 102, 0.12); color: var(--danger, #b04437); outline: none; }
.news-item__delete svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.news-toolbar .text-button:disabled { color: var(--muted); opacity: .6; cursor: default; }

/* v436：客服通知「已解決」 */
.news-item__resolve {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin-left: auto;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 999px;
  color: var(--accent-strong);
  font-size: .76rem;
  font-weight: 700;
  cursor: pointer;
}
.news-item__resolve:hover, .news-item__resolve:focus-visible { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); outline: none; }
.support-status--resolved { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent-strong); }
.support-resolve { display: grid; gap: 6px; }
.support-resolve[hidden] { display: none; }
.support-resolve__button { justify-self: stretch; min-height: 44px; color: var(--accent-strong); font-weight: 700; }
.support-resolve__button[hidden] { display: none; }

/* v437：iPhone 主畫面 App 登入接力 */
.oauth-handoff { gap: var(--space-3); }
.oauth-handoff__steps { margin: 0; padding-left: 1.2rem; display: grid; gap: 6px; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.oauth-handoff__steps strong { color: var(--ink, inherit); }
.oauth-handoff__code-box { display: grid; gap: 2px; justify-items: center; padding: 14px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.oauth-handoff__code-box span { color: var(--muted); font-size: .8rem; font-weight: 650; }
.oauth-handoff__code-box strong { font-size: 2.4rem; letter-spacing: .3em; padding-left: .3em; color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.oauth-handoff__status { margin: 0; min-height: 1.4em; text-align: center; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.oauth-handoff__status[data-tone="error"] { color: var(--danger, #b04437); }
.oauth-handoff__status[data-tone="ok"] { color: var(--accent-strong); font-weight: 700; }
.oauth-handoff__actions { display: grid; gap: 8px; }
.oauth-handoff__actions [hidden] { display: none; }
.oauth-handoff__actions .text-button { justify-self: center; min-height: 44px; }

/* ===== v441（Lucas 要求）：登入首頁、登入視窗套用「登入確認頁」的品牌風格 =====
   淡綠漸層背景、開心公仔從白色圓角大卡片上方探出來、深綠大按鈕。只改外觀，文字與流程不變。 */
#landing-gate {
  --brand-ink: #17231f;
  --brand-muted: #5f6b66;
  --brand-green: #12372f;
  --brand-soft: #e3efe9;
  --brand-card: #fffdf7;
  background: radial-gradient(120% 60% at 50% 0%, #e6f0eb 0%, #f3f0e8 55%, #f3f0e8 100%);
}
#landing-gate .landing-hero {
  position: relative;
  margin-top: 72px;
  padding: 92px 24px 28px;
  border-radius: 28px;
  background: var(--brand-card);
  box-shadow: 0 20px 50px rgba(23, 35, 31, 0.12);
  text-align: center;
  justify-items: center;
}
#landing-gate .landing-mascot {
  position: absolute;
  top: -80px;
  left: 50%;
  width: 168px;
  height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 12px 18px rgba(18, 55, 47, 0.18));
  animation: landing-mascot-pop .55s cubic-bezier(.2, 1.4, .4, 1) both;
  pointer-events: none;
}
@keyframes landing-mascot-pop {
  from { transform: translate(-50%, 20px) scale(.7); opacity: 0; }
  to { transform: translate(-50%, 0) scale(1); opacity: 1; }
}
#landing-gate .landing-hero .eyebrow { margin-bottom: 12px; color: var(--brand-muted); letter-spacing: .08em; }
#landing-gate .landing-hero h1 {
  max-width: 7.5em;
  margin-inline: auto;
  color: var(--brand-ink);
  font-size: clamp(40px, 10.5vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.04em;
}
#landing-gate .landing-subtitle { margin-top: 18px; margin-inline: auto; color: var(--brand-muted); font-size: 16px; }
#landing-gate .founding-badge,
#landing-gate .trial-badge { width: 100%; text-align: left; border-radius: 18px; }
#landing-gate .founding-badge { margin-top: 22px; background: var(--brand-soft); color: var(--brand-green); }
#landing-gate .founding-badge strong { font-size: 1.15em; }
#landing-gate #landing-founding-count { font-size: 1.45em; font-weight: 800; }
#landing-gate .trial-badge { background: #f6f3ec; color: #4b4b50; }
#landing-gate .landing-cta { width: 100%; margin-top: 22px; }
#landing-gate .landing-cta .button { min-height: 54px; border-radius: 16px; font-size: 16px; font-weight: 800; }
#landing-gate .landing-cta .button--primary { background: var(--brand-green); border-color: var(--brand-green); box-shadow: 0 10px 22px rgba(18, 55, 47, 0.22); }
#landing-gate .landing-cta .button--ghost { background: #efeadf; color: #36443f; }
#landing-gate .landing-cta .text-button { min-height: 48px; color: var(--brand-green); font-size: 16px; font-weight: 750; }
#landing-gate .landing-preview-card,
#landing-gate .landing-feature,
#landing-gate .landing-faq details { border-radius: 24px; }
@media (min-width: 960px) {
  #landing-gate .landing-hero { margin-top: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  #landing-gate .landing-mascot { animation: none; }
}

/* 登入／註冊視窗：上方小公仔、LINE／Google 大按鈕 */
/* v443（Lucas 回報：帳號設定跑版、公仔被切掉、下面滑不到）：
   v441 為了讓公仔凸出卡片，把 .dialog-card 改成 overflow: visible，卻也拿掉了卡片原本的 overflow-y: auto，
   內容比螢幕高時整張卡片直接長到螢幕外、沒有任何可以捲動的容器；卡片又貼齊視窗最上方，凸出的公仔就被螢幕頂端切掉。
   修正：卡片保持 overflow: visible（公仔不被裁切），改成「公仔＋標題列固定、.auth-dialog-body 自己捲動」；
   對話框上方預留公仔凸出的高度，整體高度扣掉安全區域，用 dvh（舊瀏覽器退回 vh）。 */
#auth-dialog {
  --auth-mascot-overhang: 44px;
  top: env(safe-area-inset-top, 0px);
  bottom: env(safe-area-inset-bottom, 0px);
  max-height: calc(100vh - 1.25rem);
  max-height: calc(100dvh - 1.25rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  padding-top: var(--auth-mascot-overhang);
  overflow: visible;
}
#auth-dialog .auth-dialog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 1.25rem - var(--auth-mascot-overhang));
  max-height: calc(100dvh - 1.25rem - var(--auth-mascot-overhang) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  padding-top: 58px;
  overflow: visible;
}
#auth-dialog .dialog-header { flex: 0 0 auto; }
#auth-dialog .auth-dialog-body {
  display: grid;
  flex: 1 1 auto;
  gap: var(--space-4);
  min-height: 0;
  /* 左右、下方多留一點空間再用負邊距抵銷，按鈕陰影／focus 外框不會被捲動容器裁切 */
  margin: 0 -6px -18px;
  padding: 4px 6px 24px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
#auth-dialog .auth-mascot {
  position: absolute;
  top: calc(var(--auth-mascot-overhang) * -1);
  left: 50%;
  z-index: 1;
  width: 96px;
  height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 10px 14px rgba(18, 55, 47, 0.18));
  pointer-events: none;
}
/* 帳號設定開著時，背景頁面不跟著捲動 */
html:has(#auth-dialog[open]) { overflow: hidden; }
#auth-dialog .quick-auth-button { min-height: 54px; border-radius: 16px; font-size: 15px; font-weight: 800; }
#auth-dialog .auth-form .button--primary { min-height: 54px; border-radius: 16px; font-weight: 800; box-shadow: 0 10px 22px rgba(18, 55, 47, 0.18); }

/* v444（Lucas 要求）：分帳紀錄已結清的那一筆／那個人改成灰色，不再用應收綠／應付紅 */
.transaction-amount.is-settled { color: var(--muted); font-weight: 650; }
.split-detail__relation.is-settled { background: rgba(109, 109, 102, 0.08); color: var(--muted); }
.split-detail__relation.is-settled strong { color: var(--muted); }
.split-detail__person strong.is-settled,
.split-detail__group strong.is-settled { color: var(--muted); font-weight: 650; }

/* ===== v4.45 第一階段：新版分帳結算介面 =====
   先用既有結算／收款 API 完成資訊層級與手機版互動；部分收款、付款方式分類、代為結清與撤銷
   尚未寫入資料模型的功能，統一以「即將開發」膠囊明確標示，不放會誤導使用者的假按鈕。 */
#split-group-dialog-card.is-settlement-view {
  gap: clamp(18px, 4vw, 28px);
  background: #fbf8f1;
}
#split-group-dialog-card.is-settlement-view > .dialog-header { align-items: center; }
#split-group-dialog-card.is-settlement-view > .dialog-header .eyebrow { color: #74746d; }
#split-group-dialog-card.is-settlement-view > .dialog-header h2 {
  margin-top: 6px;
  font-size: clamp(1.85rem, 7vw, 2.7rem);
  line-height: 1.05;
  letter-spacing: -0.045em;
}
.split-settlement-refresh svg { width: 22px; height: 22px; }
#split-group-dialog-card.is-settlement-view .split-settlement-section {
  margin: 0;
  padding: 0;
  border: 0;
}
#split-settlement-content { min-width: 0; }
#split-group-dialog-card.is-settlement-view #split-settlement-content {
  display: grid;
  gap: clamp(28px, 6vw, 42px);
}
.split-settlement-dashboard { display: grid; min-width: 0; gap: clamp(28px, 5vw, 38px); }
.split-settlement-hero {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 270px;
  align-content: start;
  gap: 10px;
  padding: clamp(24px, 5vw, 34px);
  overflow: hidden;
  color: #f9f7f1;
  background: #20221f;
  border-radius: clamp(28px, 6vw, 40px);
  box-shadow: 0 22px 46px rgba(30, 37, 33, 0.13);
}
.split-settlement-hero.is-receivable,
.split-settlement-hero.is-cleared { background: #0d6d60; }
.split-settlement-hero__eyebrow {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9rem;
  font-weight: 750;
  letter-spacing: 0.08em;
}
.split-settlement-hero__title {
  position: relative;
  z-index: 1;
  margin-top: 10px;
  font-size: clamp(1.05rem, 4.3vw, 1.35rem);
}
.split-settlement-hero__mascot {
  position: absolute;
  top: 8px;
  right: -8px;
  width: clamp(112px, 29vw, 158px);
  height: auto;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.16));
  pointer-events: none;
}
.split-settlement-hero__amount {
  position: relative;
  z-index: 1;
  display: flex;
  max-width: calc(100% - 92px);
  align-items: baseline;
  gap: 10px;
  font-variant-numeric: tabular-nums;
}
.split-settlement-hero__amount span { color: rgba(255, 255, 255, 0.82); font-size: 1rem; font-weight: 800; }
.split-settlement-hero__amount b {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: clamp(2.65rem, 11vw, 4.1rem);
  font-weight: 850;
  line-height: 1;
  letter-spacing: -0.055em;
}
.split-settlement-hero > p {
  position: relative;
  z-index: 1;
  margin: 8px 0 14px;
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(0.86rem, 3.5vw, 1rem);
  line-height: 1.55;
}
.split-settlement-progress,
.split-settlement-group-progress__bar,
.split-settlement-mini-progress {
  position: relative;
  display: block;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
}
.split-settlement-progress { height: 9px; }
.split-settlement-progress > i,
.split-settlement-group-progress__bar > i,
.split-settlement-mini-progress > i {
  display: block;
  height: 100%;
  background: #efc06b;
  border-radius: inherit;
}
.split-settlement-hero.is-receivable .split-settlement-progress > i,
.split-settlement-hero.is-cleared .split-settlement-progress > i { background: #a8e2d7; }
.split-settlement-hero__foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}
.split-settlement-group-progress {
  display: grid;
  grid-template-columns: auto minmax(64px, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: -16px;
  color: #70716b;
  font-size: 0.86rem;
}
.split-settlement-group-progress strong { color: #242623; font-size: 1rem; }
.split-settlement-group-progress__bar { height: 7px; background: #d8d5cc; }
.split-settlement-group-progress__bar > i { background: #0d6d60; }
.split-settlement-group-progress > b { font-weight: 500; }
.split-settlement-block { display: grid; min-width: 0; gap: 14px; }
.split-settlement-section-title {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.split-settlement-section-title h4 { margin: 0; font-size: clamp(1.25rem, 5vw, 1.55rem); letter-spacing: -0.03em; }
.split-settlement-section-title > span { color: #74746d; font-size: 0.86rem; text-align: right; }
.split-settlement-task-list {
  display: grid;
  overflow: hidden;
  background: #fffdf8;
  border: 1px solid #dad6cc;
  border-radius: 28px;
}
.split-settlement-task {
  display: grid;
  gap: 14px;
  padding: clamp(18px, 4vw, 26px);
  border-bottom: 1px solid #e4e0d7;
}
.split-settlement-task:last-of-type { border-bottom: 0; }
.split-settlement-task__top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
}
.split-settlement-task__avatar,
.split-settlement-person__avatar,
.split-settlement-history__avatar,
.split-settlement-suggestion__avatar,
.split-settlement-complete__avatar {
  display: grid;
  overflow: hidden;
  place-items: center;
  color: #0b5f55;
  background: #e5f4f1;
  border: 1px solid #cae5df;
  border-radius: 50%;
  font-weight: 800;
}
.split-settlement-task__avatar { width: 54px; height: 54px; }
.split-settlement-task__avatar img,
.split-settlement-person__avatar img,
.split-settlement-history__avatar img,
.split-settlement-suggestion__avatar img,
.split-settlement-complete__avatar img,
.split-settlement-avatar-stack__item img { width: 100%; height: 100%; object-fit: cover; }
.split-settlement-task__person { display: grid; min-width: 0; gap: 4px; }
.split-settlement-task__person strong { overflow-wrap: anywhere; font-size: 1.05rem; }
.split-settlement-task__person small { color: #74746d; }
.split-settlement-task__amount {
  font-size: clamp(1.3rem, 5vw, 1.75rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
}
.split-settlement-task__received { min-height: 42px; color: #0b5f55; background: #f1faf8; border-color: #cae5df; }
.split-settlement-task__hint {
  padding: 12px 14px;
  color: #6a4a13;
  background: #fbefd8;
  border: 1px solid #efd39d;
  border-radius: 16px;
  font-size: 0.83rem;
  line-height: 1.5;
}
.split-settlement-task__actions { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; gap: 12px; }
.split-settlement-task__actions .button { width: 100%; min-height: 50px; }
.split-coming-soon {
  display: inline-flex;
  width: fit-content;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.7rem;
  color: #79581c;
  background: #f7ecd6;
  border: 1px solid #ead3a5;
  border-radius: 999px;
  font-size: 0.71rem;
  font-weight: 750;
  line-height: 1.2;
  white-space: nowrap;
}
.split-settlement-show-more { min-height: 48px; color: #0b5f55; font-weight: 750; }
.split-settlement-my-cleared { display: grid; justify-items: center; gap: 5px; padding: 26px 18px; text-align: center; }
.split-settlement-my-cleared span { color: #74746d; font-size: 0.84rem; }
.split-settlement-overview,
.split-settlement-fold {
  overflow: hidden;
  background: #fffdf8;
  border: 1px solid #dad6cc;
  border-radius: 28px;
}
.split-settlement-overview > summary,
.split-settlement-fold > summary {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
}
.split-settlement-overview > summary::-webkit-details-marker,
.split-settlement-fold > summary::-webkit-details-marker { display: none; }
.split-settlement-overview > summary::after,
.split-settlement-fold > summary::after {
  content: "+";
  flex: 0 0 auto;
  color: #8c8c84;
  font-size: 1.45rem;
  font-weight: 400;
}
.split-settlement-overview[open] > summary::after,
.split-settlement-fold[open] > summary::after { content: "−"; }
.split-settlement-overview > summary > span:nth-child(2),
.split-settlement-fold > summary > span:first-child { display: grid; min-width: 0; flex: 1; gap: 4px; }
.split-settlement-overview summary strong,
.split-settlement-fold summary strong { font-size: 1.05rem; }
.split-settlement-overview summary small,
.split-settlement-fold summary small { color: #74746d; line-height: 1.45; }
.split-settlement-avatar-stack { display: flex; flex: 0 0 auto; padding-left: 10px; }
.split-settlement-avatar-stack__item {
  display: grid;
  width: 34px;
  height: 34px;
  margin-left: -10px;
  overflow: hidden;
  place-items: center;
  color: #434640;
  background: #f4efe3;
  border: 2px solid #fffdf8;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 800;
}
.split-settlement-overview__tools { display: grid; gap: 12px; padding: 0 22px 18px; }
.split-settlement-overview__tools input {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  background: #fbf8f1;
  border: 1px solid #d8d4ca;
  border-radius: 999px;
}
.split-settlement-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.split-settlement-filter button {
  min-height: 34px;
  padding: 0.35rem 0.85rem;
  color: #73736c;
  background: #f5f0e6;
  border: 0;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 750;
}
.split-settlement-filter button[aria-pressed="true"] { color: #fff; background: #20221f; }
.split-settlement-overview__list { border-top: 1px solid #e4e0d7; }
.split-settlement-person {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid #e4e0d7;
}
.split-settlement-person:last-of-type { border-bottom: 0; }
.split-settlement-person.is-cleared { opacity: 0.52; }
.split-settlement-person__avatar { width: 50px; height: 50px; color: #4a4c48; background: #f5f1e7; border-color: #ded8c9; }
.split-settlement-person__body { display: grid; min-width: 0; gap: 6px; }
.split-settlement-person__body strong { overflow-wrap: anywhere; font-size: 1rem; }
.split-settlement-person__body small { color: #74746d; }
.split-settlement-mini-progress { width: min(100%, 160px); height: 5px; background: #e7e3da; }
.split-settlement-mini-progress > i { background: #0d6d60; }
.split-settlement-person__amount { display: grid; justify-items: end; gap: 4px; font-variant-numeric: tabular-nums; }
.split-settlement-person__amount small { color: #74746d; }
.split-settlement-person__amount strong { color: #a74f43; font-size: 1.15rem; }
.split-settlement-person[data-direction="receivable"] .split-settlement-person__amount strong { color: #0b5f55; }
.split-settlement-person.is-cleared .split-settlement-person__amount strong { color: #74746d; font-size: 0.9rem; }
.split-settlement-overview__empty,
.split-settlement-fold__empty { margin: 0; padding: 24px; color: #74746d; text-align: center; }
.split-settlement-secondary { display: grid; gap: 12px; }
.split-settlement-fold > summary { min-height: 68px; }
.split-settlement-fold > summary > .split-coming-soon { flex: 0 0 auto; }
.split-settlement-fold__body { border-top: 1px solid #e4e0d7; }
.split-settlement-suggestion {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #e4e0d7;
}
.split-settlement-suggestion:last-child { border-bottom: 0; }
.split-settlement-suggestion__people { display: flex; align-items: center; gap: 3px; color: #74746d; }
.split-settlement-suggestion__avatar { width: 30px; height: 30px; font-size: 0.7rem; }
.split-settlement-suggestion > span:nth-child(2) { display: grid; min-width: 0; gap: 3px; }
.split-settlement-suggestion small { color: #74746d; font-variant-numeric: tabular-nums; }
.split-settlement-suggestion .text-button { color: #0b5f55; font-weight: 750; }
.split-settlement-history { margin: 0; }
.split-settlement-history ul { margin: 0; padding: 0; list-style: none; }
.split-settlement-history li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #e4e0d7;
}
.split-settlement-history li:last-child { border-bottom: 0; }
.split-settlement-history__avatar { width: 38px; height: 38px; font-size: 0.74rem; }
.split-settlement-history li > span { display: grid; min-width: 0; gap: 4px; }
.split-settlement-history li > span small { color: #74746d; }
.split-settlement-history li > b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.split-settlement-complete { display: grid; gap: 36px; }
.split-settlement-complete__card {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: clamp(28px, 6vw, 42px) clamp(18px, 5vw, 34px);
  text-align: center;
  background: #f0faf7;
  border: 1px solid #cbe8e1;
  border-radius: 36px;
}
.split-settlement-complete__card > img { width: min(54vw, 240px); height: auto; }
.split-settlement-complete__card h4 { margin: -6px 0 0; color: #0b5f55; font-size: clamp(2rem, 8vw, 3rem); letter-spacing: -0.045em; }
.split-settlement-complete__card > p { max-width: 29rem; margin: 0; color: #74746d; font-size: 1rem; line-height: 1.65; }
.split-settlement-complete__stats { display: grid; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.split-settlement-complete__stats > span { display: grid; gap: 5px; padding: 15px 8px; background: #fffdf8; border: 1px solid #dad6cc; border-radius: 18px; color: #74746d; font-size: 0.76rem; }
.split-settlement-complete__stats strong { color: #20221f; font-size: clamp(1rem, 4vw, 1.35rem); overflow-wrap: anywhere; }
.split-settlement-complete__people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(66px, 1fr));
  gap: 18px 10px;
  padding: 24px 18px;
  background: #fffdf8;
  border: 1px solid #dad6cc;
  border-radius: 28px;
}
.split-settlement-complete__people > span { display: grid; justify-items: center; gap: 7px; color: #74746d; }
.split-settlement-complete__avatar { width: 48px; height: 48px; }

@media (max-width: 520px) {
  #split-group-dialog-card.is-settlement-view { padding-inline: 16px; }
  .split-settlement-hero { min-height: 250px; padding: 24px 22px; border-radius: 30px; }
  .split-settlement-hero__mascot { top: 14px; right: -12px; width: 116px; }
  .split-settlement-hero__amount { max-width: calc(100% - 62px); gap: 7px; }
  .split-settlement-group-progress { grid-template-columns: minmax(0, 1fr) auto; }
  .split-settlement-group-progress__bar { grid-row: 2; grid-column: 1 / -1; }
  .split-settlement-section-title { align-items: flex-start; }
  .split-settlement-task__top { grid-template-columns: auto minmax(0, 1fr) auto; }
  .split-settlement-task__received { grid-column: 2 / -1; width: 100%; }
  .split-settlement-task__amount { font-size: 1.35rem; }
  .split-settlement-person { grid-template-columns: auto minmax(0, 1fr); }
  .split-settlement-person__amount { grid-column: 2; justify-items: start; grid-auto-flow: column; align-items: baseline; }
  .split-settlement-suggestion { grid-template-columns: auto minmax(0, 1fr); }
  .split-settlement-suggestion > :last-child { grid-column: 2; justify-self: start; }
  .split-settlement-history li { grid-template-columns: auto minmax(0, 1fr); }
  .split-settlement-history li > b { grid-column: 2; }
  .split-settlement-fold > summary > .split-coming-soon { display: none; }
}

/* v4.47：Email 驗證擋板「自動繼續」提示＋驗證完成畫面 */
.verify-gate-waiting {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.verify-gate-waiting__dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 999px;
  animation: verify-gate-pulse 1.6s ease-in-out infinite;
}

@keyframes verify-gate-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}

.verify-done-card {
  justify-items: center;
  text-align: center;
}

.verify-done-mascot {
  width: 120px;
  height: auto;
}

.verify-done-card h2 {
  margin: 0;
  font-size: 1.45rem;
}

.verify-done-card p {
  margin: 0;
  color: var(--ink);
  line-height: 1.6;
}

.verify-done-card .verify-done-hint {
  color: var(--muted);
  font-size: 0.82rem;
}

.verify-done-actions {
  justify-content: center;
  width: 100%;
}

@media (max-width: 560px) {
  .verify-done-actions {
    flex-direction: column-reverse;
  }

  .verify-done-actions .button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .verify-gate-waiting__dot {
    animation: none;
  }
}

/* v4.48（Lucas）：帳號設定最上面的會員資訊改成跟「我的帳戶」頁同款深色卡（頭像設定、名稱、Email、登出），
   手機版的方案卡（.plan-card--mobile）也搬進帳號設定，帳戶頁登入後不再顯示這兩張。 */
.auth-member-view .member-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-4);
  padding: var(--space-5);
  color: white;
  background: var(--primary);
  border-radius: var(--radius-md);
}

.auth-member-view .member-summary .eyebrow {
  margin: 0 0 0.1rem;
  color: rgb(255 255 255 / 60%);
}

.auth-member-view .member-summary strong {
  overflow: hidden;
  font-size: 1.35rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-member-view .member-summary span:last-child {
  color: rgb(255 255 255 / 66%);
  font-size: 0.82rem;
  white-space: nowrap;
}

.auth-member-view .member-avatar-edit {
  border-color: var(--primary);
}

.auth-member-view .member-summary__logout {
  align-self: start;
  color: #ff9a87;
  background: transparent;
  border-color: rgb(255 154 135 / 55%);
}

.auth-member-view .member-summary__logout:hover {
  color: white;
  background: rgb(255 154 135 / 18%);
}

.auth-member-view .plan-card--mobile {
  margin: 0;
}

@media (max-width: 959px) {
  .account-access-panel.is-authenticated {
    display: none;
  }
}

/* v4.60（Lucas 要求）：最新消息分段（未讀與待處理／今天／最近 7 天／最近 30 天）＋底部收合的「較早的消息」 */
.news-section,
.news-older__list {
  display: grid;
  gap: var(--space-3);
}

.news-section__title {
  margin: var(--space-2) 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.news-section:first-child .news-section__title {
  margin-top: 0;
}

.news-older {
  border-top: 1px solid var(--line);
  padding-top: var(--space-3);
}

.news-older__summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  color: var(--accent-strong);
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.news-older__summary::-webkit-details-marker {
  display: none;
}

.news-older__summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--duration) var(--ease);
}

.news-older[open] .news-older__summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.news-older[open] .news-older__list {
  margin-top: var(--space-2);
}

/* v4.61（Lucas：分帳怎麼算看不懂）：結算卡片下方「這個數字怎麼算出來的」 */
.split-settlement-breakdown {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.split-settlement-breakdown summary {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--accent-strong);
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.split-settlement-breakdown summary::-webkit-details-marker {
  display: none;
}

.split-settlement-breakdown summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--duration) var(--ease);
}

.split-settlement-breakdown[open] summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.split-settlement-breakdown__hint {
  margin: var(--space-1) 0 var(--space-2);
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

.split-settlement-breakdown ul {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.split-settlement-breakdown li,
.split-settlement-breakdown__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.6rem 0;
}

.split-settlement-breakdown li + li {
  border-top: 1px solid var(--line);
}

.split-settlement-breakdown li span {
  display: grid;
  min-width: 0;
  gap: 0.1rem;
}

.split-settlement-breakdown li b {
  overflow: hidden;
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.split-settlement-breakdown li small {
  color: var(--muted);
  font-size: 0.76rem;
}

.split-settlement-breakdown li strong {
  flex: 0 0 auto;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.split-settlement-breakdown .is-receivable {
  color: var(--accent-strong);
}

.split-settlement-breakdown .is-payable {
  color: var(--expense-red);
}

.split-settlement-breakdown__total {
  margin-top: var(--space-1);
  border-top: 2px solid var(--ink);
  font-weight: 800;
}

.split-settlement-breakdown__total strong {
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

/* ===== v4.62（Lucas 要求）：總覽頁頂部 Banner 輪播 =====
   收合時是細長小圖，展開（電腦滑鼠移上去／手機點一下）換成大圖；切換效果由後台設定：slide／fade／vertical。
   手機版右上角按鈕跟標題之間拉開距離，Banner 就放在這段空間裡。 */
.home-banner {
  position: relative;
  width: 100%;
  margin-bottom: var(--space-3);
}

.home-banner[hidden] {
  display: none;
}

.home-banner__viewport {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: var(--surface-strong);
  box-shadow: 0 6px 18px rgb(40 32 20 / 8%);
  transition: height 0.35s var(--ease);
}

.home-banner__slide {
  position: absolute;
  inset: 0 0 auto;
  display: block;
  visibility: hidden;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.55s var(--ease), opacity 0.55s var(--ease), visibility 0s linear 0.55s;
  -webkit-tap-highlight-color: transparent;
}

.home-banner__slide.is-active,
.home-banner__slide.is-leaving {
  visibility: visible;
  transition: transform 0.55s var(--ease), opacity 0.55s var(--ease), visibility 0s;
}

.home-banner__slide.is-active {
  position: relative;
}

.home-banner__slide:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
  border-radius: 14px;
}

.home-banner__small,
.home-banner__large {
  display: block;
  width: 100%;
  height: auto;
}

.home-banner__large,
.home-banner.is-expanded .home-banner__small {
  display: none;
}

.home-banner.is-expanded .home-banner__large {
  display: block;
}

/* 切換效果：左右滑動 */
.home-banner--slide .home-banner__slide { transform: translateX(100%); }
.home-banner--slide .home-banner__slide.is-leaving { transform: translateX(-100%); }
/* 切換效果：上下捲動 */
.home-banner--vertical .home-banner__slide { transform: translateY(100%); }
.home-banner--vertical .home-banner__slide.is-leaving { transform: translateY(-100%); }
/* 切換效果：淡入淡出 */
.home-banner--fade .home-banner__slide { opacity: 0; }
.home-banner--fade .home-banner__slide.is-leaving { opacity: 0; }
.home-banner .home-banner__slide.is-active { transform: none; opacity: 1; }

.home-banner__close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: none;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  color: #fff;
  background: rgb(20 24 22 / 55%);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.home-banner__close svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.home-banner.is-expanded .home-banner__close {
  display: grid;
}

@media (hover: hover) and (pointer: fine) {
  .home-banner.is-expanded .home-banner__close {
    display: none;
  }
}

.home-banner__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.home-banner__dots button {
  width: 6px;
  height: 6px;
  padding: 0;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: width 0.25s var(--ease), background-color 0.25s var(--ease);
}

.home-banner__dots button.is-active {
  width: 18px;
  background: var(--accent);
}

@media (max-width: 639px) {
  /* 手機版：右上角圓形按鈕往下一點、跟系統狀態列拉開；標題區上方預留空間給按鈕＋Banner。 */
  .topbar-mobile-tools {
    top: 8px;
  }

  .topbar-heading {
    padding-top: 72px;
  }

  .home-banner {
    margin-bottom: var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-banner__viewport,
  .home-banner__slide,
  .home-banner__slide.is-active,
  .home-banner__slide.is-leaving {
    transition: none;
  }
}

/* ===== v4.64（Lucas 要求）：「醬記安全嗎？」公仔對話頁 ===== */
#privacy-dialog {
  width: min(100% - 1.25rem, 560px);
}

.privacy-dialog {
  gap: var(--space-4);
}

.privacy-chat {
  display: grid;
  gap: var(--space-3);
}

.privacy-msg {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  animation: privacy-pop 0.32s var(--ease) both;
}

.privacy-msg--me {
  justify-content: flex-end;
}

.privacy-msg__avatar {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  object-fit: contain;
  padding: 4px;
  background: var(--amber-100);
  border-radius: 50%;
}

.privacy-msg__bubbles {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.privacy-bubble {
  margin: 0;
  padding: 0.7rem 0.95rem;
  color: var(--ink);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 18px 18px 18px 6px;
  font-size: 0.92rem;
  line-height: 1.6;
}

.privacy-bubble b {
  color: var(--accent-strong);
  font-weight: 800;
}

.privacy-msg--me .privacy-bubble {
  max-width: 85%;
  color: #fff;
  background: var(--accent-strong);
  border-color: transparent;
  border-radius: 18px 18px 6px 18px;
  font-weight: 700;
}

.privacy-typing .privacy-bubble {
  display: inline-flex;
  gap: 5px;
  padding: 0.95rem 1rem;
}

.privacy-typing i {
  width: 7px;
  height: 7px;
  background: var(--muted);
  border-radius: 50%;
  animation: privacy-dot 1s ease-in-out infinite;
}

.privacy-typing i:nth-child(2) { animation-delay: 0.15s; }
.privacy-typing i:nth-child(3) { animation-delay: 0.3s; }

.privacy-closing__cta {
  justify-self: start;
  margin-top: 4px;
}

.privacy-asks {
  position: sticky;
  bottom: calc(-1 * var(--space-5));
  z-index: 2;
  display: grid;
  gap: var(--space-2);
  margin: 0 calc(-1 * var(--space-5)) calc(-1 * var(--space-5));
  padding: var(--space-3) var(--space-5) var(--space-5);
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 24px rgb(40 32 20 / 6%);
}

.privacy-asks__label {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.privacy-asks__list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.privacy-asks__list::-webkit-scrollbar {
  display: none;
}

.privacy-ask {
  flex: 0 0 auto;
  max-width: 240px;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  color: var(--accent-strong);
  background: var(--amber-100);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 16px;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  cursor: pointer;
}

.privacy-ask.is-asked {
  color: var(--muted);
  background: transparent;
  border-color: var(--line);
}

.privacy-asks__all {
  justify-self: center;
  min-height: 36px;
  font-size: 0.82rem;
}

.privacy-asks__all[hidden] {
  display: none;
}

@keyframes privacy-pop {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes privacy-dot {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}

@media (max-width: 560px) {
  .privacy-asks {
    bottom: calc(-1 * var(--space-4));
    margin: 0 calc(-1 * var(--space-4)) calc(-1 * var(--space-4));
    padding: var(--space-3) var(--space-4) var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .privacy-msg,
  .privacy-typing i {
    animation: none;
  }
}

/* 更多功能：「醬記安全嗎？」跟客服按鈕同款，堆在客服上方 */
#mobile-more-dialog .mobile-more-privacy {
  margin-top: 4px;
}

#mobile-more-dialog .mobile-more-privacy + .mobile-more-support {
  margin-top: -4px;
}

/* v4.65：Banner 位置在總覽「常用功能」跟「本月剩多少」之間（Lucas 決定）；加上「關閉這張」 */
.home-banner--overview {
  margin: var(--space-2) 0 var(--space-5);
}

.home-banner__dismiss {
  /* 掛在 Banner 右上角外側的小圓章，不蓋到圖片右邊常見的按鈕文字 */
  position: absolute;
  top: -9px;
  right: -7px;
  z-index: 2;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  padding: 0;
  color: var(--muted);
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgb(40 32 20 / 12%);
  cursor: pointer;
}

.home-banner__dismiss::before {
  /* 實際可點範圍放大到 44px，圖示維持小小的不擋畫面 */
  content: "";
  position: absolute;
  inset: -8px;
}

.home-banner__dismiss svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}

/* 觸控裝置展開時，右上角換成「收合」的 ×，不同時出現兩個 */
.home-banner.is-expanded .home-banner__dismiss {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  /* 電腦滑鼠一移上去就展開，收合狀態的 × 點不到，所以展開時也顯示「關閉這張」 */
  .home-banner.is-expanded .home-banner__dismiss {
    display: grid;
  }
}

/* v4.69：帳號設定「音效檢查」結果文字，保留換行 */
.sound-check-status {
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
  min-width: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted, #5b6b66);
}
.sound-check-status:empty {
  display: none;
}

/* v4.73：語音視窗的失敗診斷資訊（截圖回報用） */
#voice-quick-dialog .voice-diag {
  margin: 10px 14px 0;
  padding: 8px 10px;
  max-height: 34vh;
  overflow: auto;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.45);
  color: #eaf3ef;
  font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
  word-break: break-all;
  text-align: left;
  user-select: text;
  -webkit-user-select: text;
}
#voice-quick-dialog .voice-diag[hidden] { display: none; }
#voice-quick-dialog .voice-diag-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}
#voice-quick-dialog .voice-diag-actions .voice-diag-toggle { margin: 0; }
#voice-quick-dialog .voice-text {
  display: flex;
  gap: 8px;
  margin: 10px 14px 0;
}
#voice-quick-dialog .voice-text[hidden] { display: none; }
#voice-quick-dialog .voice-text__input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 16px; /* 16px 以上 iPhone 才不會自動放大畫面 */
}
#voice-quick-dialog .voice-text__submit { flex: none; }
/* v4.78／v4.79：iPhone 語音記帳 Beta 標示，放在「正在聆聽…」狀態文字下方；
   用琥珀色底＋深色字，在深綠色語音畫面上一眼就看得到（原本薄荷綠底白字對比太低）。 */
#voice-quick-dialog .voice-beta-badge {
  display: inline-flex;
  align-items: center;
  align-self: center;
  margin: 0;
  padding: 0.2rem 0.8rem;
  border-radius: 999px;
  background: #ffc247;
  color: #2b1d00;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.03em;
  white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(255, 194, 71, 0.45), 0 2px 10px rgba(255, 194, 71, 0.28);
}
#voice-quick-dialog .voice-beta-badge[hidden] { display: none; }
/* v4.80：辨識結果畫面（#voice-quick-result 顯示時）標籤改放卡片最底下，上方那顆隱藏 */
#voice-quick-dialog .voice-beta-foot { display: none; }
#voice-quick-dialog .voice-quick:has(#voice-quick-result:not([hidden])) .voice-quick__stage .voice-beta-badge { display: none; }
#voice-quick-dialog .voice-quick:has(#voice-quick-result:not([hidden])) .voice-beta-foot {
  display: flex;
  justify-content: center;
  padding: 2px 0 14px;
}
#voice-quick-dialog .voice-diag-toggle {
  display: block;
  margin: 6px auto 0;
  padding: 2px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
}


/* v4.81（Lucas）：語音辨識結果畫面的相機／備註圖示（同手動記帳的 icon 列）與照片預覽 */
.voice-quick__extras {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.voice-quick__iconbar {
  justify-content: flex-start;
}

.voice-quick__photo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  border-radius: 14px;
}

.voice-quick__photo[hidden] {
  display: none;
}

.voice-quick__photo img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 8px;
}

.voice-quick__photo img[hidden] {
  display: none;
}

.voice-quick__photo-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.voice-quick__photo-text strong {
  font-size: 0.86rem;
}

.voice-quick__photo-text small {
  color: var(--muted);
  font-size: 0.74rem;
}

.voice-quick__note-panel textarea {
  width: 100%;
  min-height: 64px;
  padding: 0.6rem 0.75rem;
  font: inherit;
  font-size: 0.92rem;
  resize: vertical;
}

.voice-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}


/* v4.82（Lucas）：診斷改成點「開始診斷」才展開，內容可複製；上方一行說明這是開發階段才顯示的工具 */
#voice-quick-dialog .voice-dev {
  margin: 12px 14px 0;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 255, 255, 0.18);
}
#voice-quick-dialog .voice-dev__note {
  margin: 0 0 4px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
}
#voice-quick-dialog .voice-diag-actions {
  flex-wrap: wrap;
  gap: 2px 4px;
}
#voice-quick-dialog .voice-diag-actions .voice-diag-toggle {
  min-height: 34px;
  padding: 2px 8px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  white-space: nowrap;
}
#voice-quick-dialog .voice-diag-panel { margin: 8px 0 0; }
#voice-quick-dialog .voice-diag-panel[hidden] { display: none; }
#voice-quick-dialog .voice-diag-panel .voice-diag {
  margin: 0;
  cursor: copy;
}
#voice-quick-dialog .voice-diag-copy {
  display: block;
  width: 100%;
  margin-top: 8px;
  min-height: 40px;
  font-size: 0.86rem;
}

/* v4.85（Lucas）：辨識結果出現後不再顯示「開發階段功能」區塊（開始診斷／測麥克風／鍵盤輸入／改用麥克風）。
   等待聆聽或失敗時仍會顯示，診斷還能用。 */
#voice-quick-dialog:has(#voice-quick-result:not([hidden])) .voice-dev {
  display: none;
}

/* v4.86（Lucas）：「開發階段功能」預設收起，點「偵錯模式」展開／收起；辨識結果頁整塊不顯示（取代 v4.85 的規則）。 */
#voice-quick-dialog .voice-dev-wrap {
  margin-top: 6px;
  text-align: center;
}
#voice-quick-dialog .voice-dev-open {
  min-height: 32px;
  padding: 0 10px;
  color: rgba(255, 255, 255, 0.5);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.04em;
  background: none;
  border: 0;
  cursor: pointer;
}
#voice-quick-dialog .voice-dev-open[aria-expanded="true"] {
  color: rgba(255, 255, 255, 0.75);
}
#voice-quick-dialog .voice-dev[hidden] {
  display: none;
}
#voice-quick-dialog:has(#voice-quick-result:not([hidden])) .voice-dev-wrap,
#voice-quick-dialog:has(#voice-quick-result:not([hidden])) #voice-mode-toggle {
  display: none;
}
/* 「手動記帳」旁的「改用鍵盤聽寫」：跟「手動記帳」同樣低調的文字按鈕 */
.voice-quick__keyboard {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.voice-quick__keyboard[hidden] {
  display: none;
}
.voice-quick__keyboard svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}
#voice-quick-dialog .voice-quick:has(#voice-quick-result[hidden]) .dialog-actions {
  gap: 4px 14px;
  flex-wrap: wrap;
}
#voice-quick-dialog .voice-quick:has(#voice-quick-result[hidden]) .voice-quick__keyboard {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 8px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 500;
  background: none;
  border: 0;
  box-shadow: none;
}

/* v4.87（Lucas）：診斷面板的主按鈕改成「回報問題給客服（自動帶入診斷內容）」，原本的複製降成下方小字按鈕 */
#voice-quick-dialog .voice-diag-copyonly {
  display: block;
  margin: 6px auto 0;
  min-height: 32px;
  padding: 0 10px;
  color: rgba(255, 255, 255, 0.6);
  font: inherit;
  font-size: 12px;
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* v4.88（Lucas）：備份頁的「匯出單一帳戶明細」面板 */
.account-export-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.account-export-fields label {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}
.account-export-fields label span {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
}
.account-export-fields__wide {
  grid-column: 1 / -1;
}
.account-export-fields select,
.account-export-fields input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
}

/* v4.90（Lucas）：投資交割帳戶提示——選到銀行時說明買進／賣出的錢往哪裡走；選到證券帳戶時警告現金不會被記錄 */
.settlement-hint {
  grid-column: 1 / -1;
  margin: 4px 0 10px;
  color: #6b6558;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.5;
}

.settlement-hint[hidden] {
  display: none;
}

.settlement-hint p {
  margin: 0;
}

.settlement-hint--warn {
  padding: 8px 10px;
  color: #7a3b00;
  background: #fff4e0;
  border: 1px solid #f0c987;
  border-radius: 10px;
}

.settlement-hint__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.settlement-hint__actions button {
  min-height: 32px;
  padding: 0 12px;
  color: #7a3b00;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  background: #ffffff;
  border: 1px solid #d9a85a;
  border-radius: 999px;
  cursor: pointer;
}

.settlement-hint__actions button.is-create {
  border-style: dashed;
}

#entry-form-grid > .settlement-hint {
  grid-column: 1 / -1;
  order: 99; /* 投資簡化版面用 order 重排各列，提示要排在最後（交割扣款帳戶那一列的下面） */
}

/* ===== v4.93：銀行明細匯入（永豐）——帳戶頁入口、帳戶設定區塊、全螢幕審核對話框 ===== */
.bank-import-entry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: var(--space-3);
}

.bank-import-entry small,
.bank-import__sub {
  color: var(--muted);
}

.bank-import__sub {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
}

.bank-import-settings {
  display: grid;
  gap: 0.4rem;
}

.bank-import-settings__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.bank-import-dialog {
  width: min(100% - 1.25rem, 720px);
}

.bank-import {
  gap: var(--space-4, 1rem);
  padding-bottom: 0;
}

.bank-import__body {
  display: grid;
  gap: var(--space-4, 1rem);
  min-width: 0;
}

.bank-import__footer {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin: 0 calc(-1 * var(--space-5));
  padding: var(--space-3) var(--space-5) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--line);
}

.bank-import__footer .button--primary {
  flex: 1 1 auto;
  max-width: 22rem;
}

.bank-import__message {
  margin: 0;
  line-height: 1.6;
}

.bank-import__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.bank-import__stats div {
  display: grid;
  gap: 0.15rem;
  padding: 0.6rem 0.5rem;
  text-align: center;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.bank-import__stats b {
  font-size: 1.35rem;
}

.bank-import__stats span {
  color: var(--muted);
  font-size: 0.8125rem;
}

.bank-import__warning {
  margin: 0;
  padding: 0.6rem 0.75rem;
  color: var(--warning-ink);
  font-size: 0.875rem;
  line-height: 1.55;
  background: var(--warning-soft);
  border-radius: 12px;
}

.bank-import__reconcile {
  padding: 0.6rem 0.75rem;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.bank-import__reconcile summary {
  cursor: pointer;
  font-weight: 600;
}

.bank-import__reconcile summary small {
  display: block;
  color: var(--muted);
  font-weight: 400;
  font-size: 0.8125rem;
}

.bank-import__reconcile dl {
  display: grid;
  gap: 0.3rem;
  margin: 0.6rem 0;
}

.bank-import__reconcile dl div {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.875rem;
}

.bank-import__reconcile dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.bank-import__section {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
}

.bank-import__section > .field-help {
  margin: 0;
}

.bank-import__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.bank-import__section-head h3 {
  margin: 0;
  font-size: 1rem;
}

.bank-import__section-head h3 small {
  margin-left: 0.4rem;
  color: var(--muted);
  font-weight: 400;
}

.bank-import__rows {
  display: grid;
  gap: 0.4rem;
}

.bank-import-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem 0.5rem;
  padding: 0.6rem 0.7rem;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.bank-import-row.is-skipped {
  opacity: 0.6;
}

.bank-import-row__main {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.6rem;
  cursor: pointer;
}

.bank-import-row__main input {
  width: 1.2rem;
  height: 1.2rem;
  margin: 0.1rem 0 0;
  accent-color: var(--accent);
}

.bank-import-row__text {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.bank-import-row__side {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.4rem;
}

.bank-import-row__title {
  min-width: 0;
  overflow-wrap: anywhere;
}

.bank-import-row__amount {
  flex: 0 0 auto;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.bank-import-row__amount.is-in {
  color: var(--income-green);
}

.bank-import-row__detail {
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.bank-import-row__controls {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-left: 1.8rem;
}

.bank-import-row__controls select {
  flex: 1 1 9rem;
  min-width: 0;
}

.bank-import-row__skip {
  min-height: 32px;
  padding: 0;
  font-size: 0.8125rem;
}

.bank-import__app-only {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}

.bank-import__app-only li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  overflow-wrap: anywhere;
}

.bank-import__app-only span:last-child {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.bank-import__choices {
  display: grid;
  gap: 0.5rem;
}

.bank-import__choice {
  display: grid;
  gap: 0.2rem;
  padding: 0.75rem 0.85rem;
  color: var(--ink);
  font: inherit;
  text-align: left;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}

.bank-import__choice span {
  color: var(--muted);
  font-size: 0.8125rem;
}

.bank-import__check {
  display: grid;
  gap: 0.3rem;
  padding: 0.75rem 0.85rem;
  font-size: 0.875rem;
  line-height: 1.55;
  background: var(--warning-soft);
  color: var(--warning-ink);
  border-radius: 12px;
}

.bank-import__check.is-ok {
  background: var(--income-soft);
  color: var(--income-green);
}

.bank-import__check strong {
  font-size: 1rem;
}

@media (max-width: 560px) {
  .bank-import-dialog {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
  }

  .bank-import-dialog .dialog-card {
    height: 100dvh;
    max-height: 100dvh;
    padding-top: calc(var(--space-5) + env(safe-area-inset-top, 0px));
    border-radius: 0;
    grid-template-rows: auto 1fr auto;
    align-content: stretch;
  }

  .bank-import__body {
    align-content: start;
  }
}

/* ===== v4.94：總覽疊卡下方「目前篩選的帳戶合計」（Lucas） ===== */
.acct-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.acct-total[hidden] {
  display: none;
}

.acct-total__label {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
}

.acct-total__label small {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
}

.acct-total__amount {
  flex: 0 0 auto;
  color: var(--ink);
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

.acct-total__amount.is-negative {
  color: var(--danger);
}

/* ===== v4.95：銀行匯入 Sprint 3——設為固定收支勾選、期初差額校正卡 ===== */
.bank-import-row__recurring {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 1.8rem;
  color: var(--ink);
  font-size: 0.8125rem;
  cursor: pointer;
}

.bank-import-row__recurring input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--accent);
}

.bank-import__fix {
  display: grid;
  gap: 0.4rem;
  padding: 0.75rem 0.85rem;
  font-size: 0.875rem;
  line-height: 1.55;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.bank-import__fix strong {
  font-size: 1rem;
}

.bank-import__fix span {
  color: var(--muted);
}

.bank-import__fix .button {
  justify-self: start;
}

/* ===== v4.96：分帳 × 醬記帳本——分帳代墊款帳戶卡、分帳表單「記到醬記」、記帳表單「這筆是分帳」、結算頁還款卡 ===== */
.acct-card--receivable { color: #ffffff; background: linear-gradient(135deg, #5b7f8a, #47656e 55%, #3b555d); }

.split-ledger-link,
.entry-split {
  display: grid;
  gap: 0.6rem;
  padding: 0.75rem 0.85rem;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.split-ledger-link[hidden],
.entry-split[hidden],
.split-ledger-link__body[hidden],
.entry-split__body[hidden] {
  display: none;
}

.split-ledger-link__body,
.entry-split__body {
  display: grid;
  gap: 0.6rem;
}

.split-ledger-link__body label,
.entry-split__body label {
  display: grid;
  gap: 0.3rem;
}

.split-ledger-link__body .field-help,
.entry-split__body .field-help {
  margin: 0;
}

.entry-split__members {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.entry-split__member {
  min-height: 36px;
  padding: 0 14px;
  color: var(--muted);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  background: #ebe5d6;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.entry-split__member.is-on {
  color: #ffffff;
  background: var(--accent);
}

.split-ledger-repay {
  display: grid;
  gap: 0.6rem;
  margin-bottom: var(--space-4, 1rem);
  padding: 0.8rem 0.9rem;
  background: var(--warning-soft);
  color: var(--warning-ink);
  border-radius: 14px;
}

.split-ledger-repay label {
  display: grid;
  gap: 0.3rem;
}

.split-ledger-repay label.check-control {
  display: flex;
}

.split-ledger-repay ul {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.split-ledger-repay li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 0.75rem;
  padding: 0.5rem 0.6rem;
  color: var(--ink);
  background: var(--surface-strong);
  border-radius: 10px;
}

.split-ledger-repay__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ===== v4.97（Lucas 選 B）：帳戶頁「錢包疊卡」——同一類卡片疊在一起，後面的只露出上緣（名稱＋餘額），
   最前面那張（.is-front）完整顯示；版面高度從「每張一整張卡」縮成「一張卡＋每多一個帳戶約 60px」。 ===== */
.account-grid.account-wallet {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 340px;
}

/* 共用 .acct-card 的 flex: 0 0 min(86%, 340px) 是給總覽橫向疊卡用的寬度；這裡是直向排列，不取消會變成高度 340px */
.account-wallet .account-card.acct-card--page {
  flex: none;
  width: 100%;
  max-width: 340px;
}

.account-wallet .account-card.acct-card--page:not(.is-front) {
  aspect-ratio: auto;
  height: 78px;
  min-height: 0;
  margin-bottom: -18px;
  padding-top: 16px;
  padding-bottom: 16px;
  grid-template-rows: auto;
  align-content: start;
  box-shadow: 0 -3px 12px rgb(25 26 24 / 12%);
}

.account-wallet .account-card.acct-card--page:not(.is-front) > :not(.acct-card__top) {
  display: none;
}

.account-wallet .account-card.acct-card--page:not(.is-front) .acct-card__peek-balance {
  display: inline;
}

.account-wallet .account-card.acct-card--page:not(.is-front) .acct-card__chip,
.account-wallet .account-card.acct-card--page:not(.is-front) .acct-card__mark {
  display: none;
}

.account-wallet .account-card.acct-card--page.is-front {
  box-shadow: 0 -3px 12px rgb(25 26 24 / 12%), 0 8px 22px rgb(25 26 24 / 14%);
}

/* 疊在一起時停用的卡片不能半透明（會透出下面那張），改成只灰階 */
.account-wallet .account-card.acct-card--page.is-disabled {
  opacity: 1;
  filter: grayscale(0.9) brightness(1.08);
}

.account-wallet .account-card.acct-card--page:hover {
  transform: translateY(-3px);
}

/* 電腦寬螢幕：各類別並排，不會只有窄窄一條 */
@media (min-width: 960px) {
  .account-groups {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    align-items: start;
  }
}

/* ===== v4.98（Lucas 指定總覽順序）：常用功能 → Banner → 本月剩多少＋支出區間 → 預算／夢想（用過才出現）
   → 帳戶預覽 → 最近記錄 → 提醒。各區塊各自一個容器、照 DOM 順序排，不再靠 order 調位置；
   沿用 .summary-grid／.content-grid 外框，原本的卡片樣式（例如帳戶疊卡在手機上的透明外框）照舊。 ===== */
#overview-plan[hidden],
#overview-plan [hidden] {
  display: none !important;
}

.overview-plan,
.overview-recent {
  margin-bottom: var(--space-4);
}

.content-grid.overview-recent,
.content-grid.overview-plan.is-single,
.summary-grid.overview-accounts,
.summary-grid.overview-reminders {
  grid-template-columns: minmax(0, 1fr);
}

.summary-grid.overview-reminders > * {
  grid-column: 1 / -1;
  order: 0;
  margin-top: 0;
  margin-bottom: 0;
}

@media (max-width: 959px) {
  .overview-plan,
  .overview-recent {
    margin-bottom: var(--space-10);
  }

  .summary-grid.overview-reminders {
    gap: var(--space-4);
  }
}

/* 舊規則用 #id 指定今日對帳／未配置收入的 order 與手機負邊距（權重比上面的 class 高），在提醒區一律取消 */
.summary-grid.overview-reminders > #reconciliation-card,
.summary-grid.overview-reminders > #unallocated-card,
.summary-grid.overview-reminders > #pending-classification-card {
  order: 0;
  margin-top: 0;
  margin-bottom: 0;
}

/* ===== v4.99：交易明細「設為固定收支」 ===== */
.tx-detail__recurring {
  display: grid;
  gap: 0.5rem;
  padding: 0.75rem 0.85rem;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.tx-detail__recurring[hidden],
.tx-detail__recurring-body[hidden] {
  display: none;
}

.tx-detail__recurring-body label {
  display: grid;
  gap: 0.3rem;
}

.tx-detail__recurring .field-help {
  margin: 0;
}

/* ===== v5.00：繳款「實際繳款金額」與帳戶設定「帳單其他費用」 ===== */
.entry-bill-extra,
.bill-extra-settings {
  display: grid;
  gap: 0.5rem;
  padding: 0.75rem 0.85rem;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.entry-bill-extra[hidden],
.entry-bill-extra__diff[hidden],
#entry-bill-extra-category-field[hidden] {
  display: none;
}

.entry-bill-extra label,
.entry-bill-extra__diff,
.bill-extra-settings label {
  display: grid;
  gap: 0.3rem;
}

.entry-bill-extra .field-help,
.bill-extra-settings .field-help,
.entry-bill-extra__summary {
  margin: 0;
}

.entry-bill-extra__summary {
  font-size: 0.875rem;
  line-height: 1.55;
}

/* ===== v5.01：帳單母子紀錄、交易明細「拆成代收帳單」 ===== */
.bill-group {
  display: grid;
  border-bottom: 1px solid var(--line);
}

.bill-group .bill-group__parent {
  border-bottom-color: transparent;
}

.bill-group__children {
  display: grid;
  gap: 0.15rem;
  margin: -0.35rem 0 0.6rem 3.1rem;
  padding: 0 0 0.6rem 0.75rem;
  border-left: 2px solid var(--line);
}

.bill-group__child {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.45rem 0.25rem;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.bill-group__child-icon {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--surface-strong);
  font-size: 0.75rem;
  font-weight: 700;
}

.bill-group__child-icon svg {
  width: 0.95rem;
  height: 0.95rem;
}

.bill-group__child-text {
  display: grid;
  min-width: 0;
}

.bill-group__child-text b {
  font-size: 0.9rem;
}

.bill-group__child-text small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.bill-group__child strong {
  font-size: 0.9rem;
  white-space: nowrap;
}

.tx-detail__billsplit,
.tx-detail__billsplit-body {
  display: grid;
  gap: 0.55rem;
}

.tx-detail__billsplit[hidden],
.tx-detail__billsplit-body[hidden],
#tx-detail-billsplit-category-field[hidden],
#tx-detail-billsplit-open[hidden] {
  display: none;
}

.tx-detail__billsplit-body {
  padding: 0.75rem 0.85rem;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.tx-detail__billsplit-body label {
  display: grid;
  gap: 0.3rem;
}

.tx-detail__billsplit-body .field-help {
  margin: 0;
}

/* ===== v5.06：分類／子項目改用「醬糰實心」icon（category-icons.js；規格見 _非部署資料/設計稿/分類icon/ICON_SPEC.md）=====
   顏色取自醬記公仔（醬記綠＋醬記金），刻意不跟著琥珀／靛藍主題換色；深墨綠的語音視窗改用淺綠。
   icon 的填色寫在 SVG 自己的群組上，外層 .xxx svg 給舊線條 icon 的 fill／stroke 已由 jkIconMarkup() 的行內 style 蓋掉。 */
:root {
  --jk-icon-main: #0e6b5c;
  --jk-icon-accent: #e9b949;
}

#voice-quick-dialog {
  --jk-icon-main: #86d5b5;
}

.jk-icon {
  flex: none;
  overflow: visible;
}

.category-item__icon .jk-icon,
.transaction-avatar .jk-icon {
  width: 24px;
  height: 24px;
}

.bs-chip .jk-icon {
  width: 20px;
  height: 20px;
}

/* 記帳表單：分類、子項目膠囊與目前選擇前面的 icon */
.entry-picker-list--chips button .jk-icon {
  width: 20px;
  height: 20px;
  margin-left: -4px;
}

.entry-picker-list--chips button:has(> .jk-icon) {
  justify-content: flex-start;
  gap: 6px;
}

.entry-picker-btn:has(> .jk-icon) {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.entry-picker-btn > .jk-icon {
  width: 22px;
  height: 22px;
}

/* 分類設定：子項目膠囊 */
.subcategory-chip:has(> .jk-icon) {
  gap: 5px;
  padding-left: 0.55rem;
}

.subcategory-chip > .jk-icon {
  width: 18px;
  height: 18px;
}

/* ===== v5.07（Lucas）：帳單母子紀錄的上下間距 =====
   母列是 .bill-group 裡的第一個元素，會吃到 .transaction-item:first-child 的 padding-top:0，跟上一筆貼在一起；
   改成跟一般交易列一樣的上下留白，子紀錄區塊和下一筆之間也留同樣的距離。整組在清單第一／最後時才收掉外側留白。 */
.bill-group .bill-group__parent {
  padding-top: var(--space-4);
  padding-bottom: var(--space-3);
}

.bill-group:first-child .bill-group__parent {
  padding-top: 0;
}

.bill-group__children {
  gap: var(--space-1);
  margin: 0 0 var(--space-4) 3.1rem;
  padding: var(--space-1) 0 var(--space-1) 0.75rem;
}

.bill-group__child {
  padding: var(--space-2) 0.25rem;
}

.bill-group:last-child {
  border-bottom: 0;
}

.bill-group:last-child .bill-group__children {
  margin-bottom: 0;
}

/* ===== v5.08：記帳表單的功能 icon（醬糰實心）=====
   1) 最上面的日期／照片／備註換成 feature icon；#entry-form.entry-simple .entry-icon svg 的 17px 要用同樣權重蓋掉。 */
.entry-icon .jk-icon,
#entry-form.entry-simple .entry-icon .jk-icon {
  width: 22px;
  height: 22px;
}

/* 2) 分帳／固定收支：同一列兩張卡片（設計稿 feature-toggles.html 的 B）；只剩一張時自己佔滿一整列 */
.entry-feature-tiles {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 8px;
}

.entry-feature-tiles[hidden],
.entry-feature-tile[hidden] {
  display: none;
}

.entry-feature-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px 10px;
  color: var(--ink);
  font: inherit;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  cursor: pointer;
}

.entry-feature-tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.entry-feature-tile__chip {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #eaf4f0;
  border-radius: 12px;
}

.entry-feature-tile__chip .jk-icon {
  width: 26px;
  height: 26px;
}

.entry-feature-tile__text {
  display: grid;
  min-width: 0;
  line-height: 1.3;
}

.entry-feature-tile__text b {
  font-size: 0.95rem;
}

.entry-feature-tile__text small {
  color: var(--muted);
  font-size: 0.72rem;
}

.entry-feature-tile__tick {
  position: absolute;
  top: -6px;
  right: -6px;
  display: none;
  width: 20px;
  height: 20px;
  background: var(--accent);
  border-radius: 50%;
}

.entry-feature-tile__tick::after {
  position: absolute;
  top: 4px;
  left: 6px;
  width: 5px;
  height: 9px;
  content: "";
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.entry-feature-tile.is-on {
  background: #f2f8f6;
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.entry-feature-tile.is-on .entry-feature-tile__tick {
  display: block;
}

/* 卡片關閉時，原本的設定區（分帳群組／固定收支週期）整塊收起；開啟才展開 */
.entry-split.is-feature-off,
.recurring-fields.is-feature-off {
  display: none;
}

/* ===== v5.10（Lucas）：手動記帳一個畫面放得下，不用往下滑 =====
   頂部關閉鍵併進 icon 列、金額卡變矮、欄位列與卡片收緊、間距 12→8；消費項目列用跟金額卡一樣的淡綠底，旁邊加麥克風。 */
#entry-form.entry-simple {
  gap: 8px;
}

#entry-form.entry-simple > .dialog-header {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

#entry-form.entry-simple .entry-iconbar .close-button {
  flex: none;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  font-size: 1.15rem;
}

#entry-form.entry-simple > .segmented button {
  min-height: 30px;
}

#entry-form.entry-simple .amount-field {
  padding: 8px 14px 4px;
  border-radius: 18px;
}

#entry-form.entry-simple .amount-field__head {
  top: 8px;
}

#entry-form.entry-simple .amount-input input {
  font-size: 2.4rem;
}

#entry-form.entry-simple .amount-input b {
  font-size: 1.1rem;
}

#entry-form.entry-simple #entry-form-grid > label {
  min-height: 44px;
  padding: 2px 2px;
}

#entry-form.entry-simple #entry-form-grid > label > select,
#entry-form.entry-simple #entry-form-grid > label > input {
  min-height: 38px;
}

#entry-form.entry-simple .merchant-field-row input {
  min-height: 36px;
}

#entry-form.entry-simple .merchant-field-row .button {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
}

#entry-form.entry-simple .merchant-location-hint {
  font-size: 0.68rem;
  line-height: 1.35;
}

/* v5.96：保留原本右上角定位／放大鏡，店家文字欄右側另外放一顆明確的「搜尋」按鈕。 */
#entry-form.entry-simple #merchant-field .merchant-field-row input[name="merchant"] {
  grid-column: 1 / 3;
  grid-row: 2;
}

#entry-form.entry-simple #merchant-field #merchant-inline-search {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  width: auto;
  min-width: 58px;
  height: 36px;
  min-height: 36px;
  padding: 0 12px;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--accent);
  border: 0;
  border-radius: 12px;
  box-shadow: 0 7px 16px color-mix(in srgb, var(--accent) 18%, transparent);
}

#entry-form.entry-simple #merchant-field #merchant-inline-search span {
  display: inline;
}

#entry-form.entry-simple #merchant-field #merchant-inline-search[hidden] {
  display: none;
}

/* 消費項目：跟金額卡同樣的淡綠底，提醒這格要自己填；麥克風在右邊 */
#entry-form.entry-simple #entry-form-grid > #item-field {
  grid-template-columns: 6.2em minmax(0, 1fr);
  margin: 4px -8px;
  padding: 0 10px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: 12px;
}

#entry-form.entry-simple #entry-form-grid > #item-field > input {
  padding-right: 4px;
}

.entry-item-voice {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--accent-strong, var(--accent));
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 50%;
  cursor: pointer;
}

.entry-item-voice[hidden] {
  display: none;
}

.entry-item-voice svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 分帳／固定收支卡片也收矮一點 */
#entry-form.entry-simple .entry-feature-tile {
  padding: 8px 10px;
  border-radius: 14px;
}

#entry-form.entry-simple .entry-feature-tile__chip {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

#entry-form.entry-simple .entry-feature-tile__chip .jk-icon {
  width: 22px;
  height: 22px;
}

/* 卡片說明字一行就好，不要擠成兩行把卡片撐高；390 寬以上整句放得下，更窄才出現「…」 */
#entry-form.entry-simple .entry-feature-tile {
  column-gap: 8px;
  padding-right: 8px;
  padding-left: 8px;
}

#entry-form.entry-simple .entry-feature-tile__chip {
  width: 32px;
  height: 32px;
}

#entry-form.entry-simple .entry-feature-tile__text small {
  overflow: hidden;
  font-size: 0.64rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 矮螢幕（iPhone SE、Safari 上下工具列都出現時）再收一點，記帳鍵才不會掉到畫面外 */
@media (max-height: 740px) {
  #entry-form.entry-simple {
    gap: 6px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  #entry-form.entry-simple .amount-input input {
    font-size: 2.1rem;
  }

  #entry-form.entry-simple #entry-form-grid > label {
    min-height: 40px;
    padding-top: 0;
    padding-bottom: 0;
  }

  #entry-form.entry-simple #entry-form-grid > label > select,
  #entry-form.entry-simple #entry-form-grid > label > input {
    min-height: 34px;
  }

  #entry-form.entry-simple .entry-feature-tile {
    padding: 6px 10px;
  }

  #entry-form.entry-simple .entry-feature-tile__text small {
    display: none;
  }

  #entry-form.entry-simple #save-entry {
    min-height: 46px;
  }
}

/* ===== v5.11（Lucas）：計算機浮在金額卡正下方，蓋在其他欄位上面，不再把表單往下推 ===== */
#entry-form {
  position: relative;
}

.calculator-panel--float {
  position: absolute;
  right: 10px;
  left: 10px;
  z-index: 40;
  gap: 8px;
  padding: 10px;
  box-shadow: 0 18px 44px rgb(25 26 24 / 28%), 0 0 0 1px rgb(25 26 24 / 6%);
}

.calculator-panel--float .calculator-display {
  min-height: 60px;
}

.calculator-panel--float .calculator-keypad {
  gap: 6px;
}

.calculator-panel--float .calculator-keypad button {
  min-height: 46px;
}

/* ===== v500（2026-10-25）：語音記帳改版——從下方滑出的淺色面板，聽到的話是主角 =====
   設計稿：醬記語音記帳改版（準備說話／說話中／確認記帳／少了金額）。
   取代 v338／v339 的深墨綠懸浮畫面；沿用 App 本來的墨綠與象牙白，這一段放在最後，所以覆蓋前面所有 #voice-quick-dialog 規則。 */
#voice-quick-dialog {
  color-scheme: light;
  --surface: #faf7f0;
  --surface-strong: #fffdf8;
  --ink: #191a18;
  --muted: #6d6d66;
  --line: #d6d3c8;
  --primary: #191a18;
  --primary-strong: #292a27;
  --accent: #0e6b5c;
  --accent-strong: #0a5147;
  --accent-ink: #fffdf8;
  --accent-tint-ink: #191a18;
  --accent-bright: #43a394;
  --amber-50: #f2f8f6;
  --amber-100: #e3f1ed;
  --amber-300: #6bc7b8;
  --income-green: #34735b;
  --expense-red: #a94f45;
  --danger: #a94f45;
  --warning: #c9862b;
  --warning-ink: #6b4a12;
  --warning-soft: #f8ecd7;
  --voice-mic: #0e6b5c;
  --voice-mic-ink: #fffdf8;
  width: min(100%, 480px);
  max-width: 100%;
  max-height: 100dvh;
  margin: auto auto 0;
  color: var(--ink);
}

#voice-quick-dialog[open] {
  animation: voice-sheet-in 260ms var(--ease);
}

@keyframes voice-sheet-in {
  from { transform: translateY(100%); }
}

#voice-quick-dialog::backdrop {
  background: rgb(25 26 24 / 56%);
  backdrop-filter: blur(3px) saturate(1);
  -webkit-backdrop-filter: blur(3px) saturate(1);
}

#voice-quick-dialog .voice-quick {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-height: calc(100dvh - 52px);
  padding: 22px 24px calc(24px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -10px 40px rgb(25 26 24 / 18%);
}

#voice-quick-dialog .voice-quick:not([data-state="done"]) {
  min-height: min(640px, calc(100dvh - 52px));
}

/* 面板上緣的把手 */
#voice-quick-dialog .voice-quick::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  width: 40px;
  height: 5px;
  background: var(--line);
  border-radius: 3px;
  transform: translateX(-50%);
}

/* 標題列：左邊標題、右邊關閉 */
#voice-quick-dialog .voice-quick > .dialog-header {
  order: 0;
  align-items: center;
  justify-content: space-between;
  margin: 6px 0 0;
}

#voice-quick-dialog .voice-quick > .dialog-header h2 {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  color: var(--ink);
  font-size: 1.06rem;
  font-weight: 600;
  white-space: normal;
}

#voice-quick-dialog .close-button {
  margin-right: -10px;
  color: #3d3e39;
  background: transparent;
}

#voice-quick-dialog .close-button:hover {
  background: rgb(25 26 24 / 6%);
}

/* 版面順序：範例（或聽到的話）在上，麥克風在下；確認畫面維持「狀態列→結果」 */
#voice-quick-dialog .voice-quick__prompts,
#voice-quick-dialog .voice-quick__result {
  order: 1;
}

#voice-quick-dialog .voice-quick__stage {
  order: 4;
}

#voice-quick-dialog .voice-text { order: 3; }
#voice-quick-dialog .voice-dev-wrap { order: 5; }
#voice-quick-dialog .voice-quick .dialog-actions { order: 6; }
#voice-quick-dialog .voice-beta-foot { order: 7; }

#voice-quick-dialog .voice-quick[data-state="done"] .voice-quick__stage { order: 1; }
#voice-quick-dialog .voice-quick[data-state="done"] .voice-quick__result { order: 2; }

/* 範例：固定列出的灰色大字，不是辨識結果 */
#voice-quick-dialog .voice-quick__prompts {
  flex: 1 1 auto;
  justify-items: start;
  align-content: center;
  gap: 14px;
  margin: 0;
  padding: 0 0 12px;
  text-align: left;
}

#voice-quick-dialog .voice-quick__sample-lead {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

#voice-quick-dialog .voice-quick__sample-stage {
  display: grid;
  gap: 8px;
  justify-items: start;
  width: 100%;
  min-height: 0;
  padding: 0;
  overflow: visible;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#voice-quick-dialog .voice-quick__sample-stage .voice-quick__sample {
  display: block;
  grid-area: auto;
  color: var(--muted);
  font-size: clamp(1.45rem, 7.4vw, 1.9rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  white-space: normal;
  animation: none;
}

#voice-quick-dialog .voice-quick__sample::before,
#voice-quick-dialog .voice-quick__sample::after {
  content: none;
}

#voice-quick-dialog .voice-quick__sample-value {
  color: inherit;
  font-weight: 500;
}

/* 麥克風與狀態 */
#voice-quick-dialog .voice-quick__stage {
  gap: 14px;
  padding: 0;
}

#voice-quick-dialog .voice-quick__mic {
  margin: 14px 0 12px;
}

#voice-quick-dialog .voice-quick__water i {
  background: radial-gradient(ellipse at 46% 48%, rgb(14 107 92 / 55%), transparent 70%);
}

#voice-quick-dialog .voice-quick__status {
  color: #3d3e39;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0;
  text-shadow: none;
}

#voice-quick-dialog .voice-quick[data-state="error"] .voice-quick__status {
  color: var(--danger);
}

/* 說話中：麥克風變成「說完了」，點一下就整理 */
#voice-quick-dialog .voice-quick__mic-done {
  display: none;
  position: relative;
  color: var(--voice-mic-ink);
  font-size: 0.95rem;
  font-weight: 600;
}

#voice-quick-dialog .voice-quick[data-state="listening"] .voice-quick__mic > svg {
  display: none;
}

#voice-quick-dialog .voice-quick[data-state="listening"] .voice-quick__mic-done {
  display: block;
}

/* 停頓倒數線：線縮完就自動整理 */
#voice-quick-dialog .voice-quick__countdown {
  width: 120px;
  background: #e3f1ed;
}

/* 說話中／整理中：聽到的話用大字顯示在上方 */
#voice-quick-dialog .voice-quick[data-state="listening"] .voice-quick__result,
#voice-quick-dialog .voice-quick[data-state="processing"] .voice-quick__result {
  flex: 1 1 auto;
  align-content: center;
  padding: 0 0 12px;
}

#voice-quick-dialog .voice-quick[data-state="listening"] .voice-quick__heard,
#voice-quick-dialog .voice-quick[data-state="processing"] .voice-quick__heard {
  justify-self: start;
  justify-content: flex-start;
  padding: 0;
  text-align: left;
  background: none;
  border: 0;
  box-shadow: none;
}

#voice-quick-dialog .voice-quick[data-state="listening"] .voice-quick__heard q,
#voice-quick-dialog .voice-quick[data-state="processing"] .voice-quick__heard q {
  color: var(--ink);
  font-size: clamp(1.7rem, 9vw, 2.5rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  quotes: none;
}

/* 底部：「用打的」「手動記帳」兩顆圓角按鈕 */
#voice-quick-dialog .voice-quick:has(#voice-quick-result[hidden]) .dialog-actions,
#voice-quick-dialog .voice-quick[data-state="listening"] .dialog-actions {
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 0;
  background: none;
}

#voice-quick-dialog .voice-quick:has(#voice-quick-result[hidden]) .voice-quick__manual,
#voice-quick-dialog .voice-quick:has(#voice-quick-result[hidden]) .voice-quick__keyboard,
#voice-quick-dialog .voice-quick[data-state="listening"] .voice-quick__manual,
#voice-quick-dialog .voice-quick[data-state="listening"] .voice-quick__keyboard {
  min-height: 44px;
  padding: 0 16px;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 500;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: none;
}

#voice-quick-dialog .voice-quick:has(#voice-quick-result[hidden]) .dialog-actions:has(#voice-mode-toggle[hidden]) {
  justify-content: center;
}

/* 確認畫面：主按鈕沿用墨綠，「重說」「手動記帳」維持低調文字 */
#voice-quick-dialog .voice-quick[data-state="done"] .voice-quick__stage {
  background: none;
  border: 0;
}

#voice-quick-dialog .voice-quick[data-state="done"] .voice-quick__status {
  color: var(--muted);
}

/* 偵錯工具：一般用戶看不到；網址加 ?voicedebug=1 才顯示 */
#voice-quick-dialog:not(.is-voice-debug) .voice-dev-wrap {
  display: none;
}

#voice-quick-dialog .voice-dev-open,
#voice-quick-dialog .voice-dev-open[aria-expanded="true"],
#voice-quick-dialog .voice-diag-copyonly,
#voice-quick-dialog .voice-dev__note {
  color: var(--muted);
}

#voice-quick-dialog .voice-dev {
  border-top-color: var(--line);
}

#voice-quick-dialog .voice-diag-actions .voice-diag-toggle {
  color: var(--ink);
}

@media (min-width: 640px) {
  #voice-quick-dialog {
    margin: auto;
  }

  #voice-quick-dialog .voice-quick {
    border-radius: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #voice-quick-dialog[open] {
    animation: none;
  }
}

/* ===== v501（2026-10-25）：只聽到品項、沒聽到金額——只追問一句「多少錢？」 ===== */
#voice-quick-dialog .voice-quick.is-asking-amount .voice-quick__result {
  order: 1;
  flex: 1 1 auto;
  align-content: center;
  gap: 20px;
  padding: 0 0 12px;
}

#voice-quick-dialog .voice-quick.is-asking-amount .voice-quick__stage {
  order: 4;
  display: grid;
  justify-items: center;
  padding: 0;
  background: none;
  border: 0;
}

#voice-quick-dialog .voice-quick.is-asking-amount .voice-quick__mic {
  display: grid;
}

/* 聽到的品項用大字，後面留一格虛線等金額 */
#voice-quick-dialog .voice-quick.is-asking-amount .voice-quick__heard {
  justify-self: start;
  justify-content: flex-start;
  text-align: left;
}

#voice-quick-dialog .voice-quick.is-asking-amount .voice-quick__heard q {
  color: var(--ink);
  font-size: clamp(1.7rem, 9vw, 2.5rem);
  font-weight: 600;
  line-height: 1.3;
}

#voice-quick-dialog .voice-quick.is-asking-amount .voice-quick__heard q::after {
  content: "";
  display: inline-block;
  min-width: 96px;
  margin-left: 12px;
  border-bottom: 3px dashed var(--accent);
}

#voice-quick-dialog .voice-quick__ask-amount strong {
  display: block;
  color: var(--ink);
  font-size: 1.4rem;
  font-weight: 600;
}

#voice-quick-dialog .voice-quick__ask-amount p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* 金額欄＋「下一步」同一列；其他欄位先收起來 */
#voice-quick-dialog .voice-quick.is-asking-amount .voice-quick__parsed {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

#voice-quick-dialog .voice-quick.is-asking-amount .voice-quick__parsed > :not(.voice-quick__hero):not(.voice-quick__amount-next) {
  display: none;
}

#voice-quick-dialog .voice-quick.is-asking-amount .voice-quick__hero {
  flex: 1 1 auto;
  min-width: 0;
}

#voice-quick-dialog .voice-quick.is-asking-amount .voice-quick__hero > span:first-child,
#voice-quick-dialog .voice-quick.is-asking-amount .voice-quick__amount-hint {
  display: none;
}

#voice-quick-dialog .voice-quick.is-asking-amount .voice-quick__amount-field {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 52px;
  padding: 0 14px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 14px;
}

#voice-quick-dialog .voice-quick.is-asking-amount .voice-quick__amount-field:focus-within {
  border-color: var(--accent);
}

#voice-quick-dialog .voice-quick.is-asking-amount .voice-quick__amount-field em {
  font-size: 1.06rem;
}

#voice-quick-dialog .voice-quick.is-asking-amount .voice-quick__amount-field input {
  width: 100% !important;
  font-size: 1.06rem;
  font-weight: 500;
  letter-spacing: 0;
}

#voice-quick-dialog .voice-quick__amount-next {
  flex: 0 0 auto;
  min-height: 52px;
  padding: 0 18px;
  color: var(--accent-ink);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  background: var(--ink);
  border: 0;
  border-radius: 14px;
  cursor: pointer;
}

#voice-quick-dialog .voice-quick__amount-next:disabled {
  opacity: 0.4;
  cursor: default;
}

/* 底部：「整句重說」「手動記帳」兩顆圓角按鈕，不顯示「記帳」 */
#voice-quick-dialog .voice-quick.is-asking-amount:has(#voice-quick-result:not([hidden])) #voice-quick-save {
  display: none;
}

#voice-quick-dialog .voice-quick.is-asking-amount:has(#voice-quick-result:not([hidden])) .dialog-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

#voice-quick-dialog .voice-quick.is-asking-amount:has(#voice-quick-result:not([hidden])) #voice-quick-retry,
#voice-quick-dialog .voice-quick.is-asking-amount:has(#voice-quick-result:not([hidden])) .voice-quick__manual {
  min-height: 44px;
  padding: 0 16px;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 500;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 22px;
}

#voice-quick-dialog .voice-quick.is-asking-amount .voice-quick__amount-field input::placeholder {
  color: var(--muted);
  font-weight: 400;
}

#voice-quick-dialog .voice-quick.is-asking-amount .voice-quick__status::before {
  content: none;
}

/* ===== v5.13：交易類型／預算群組 icon（醬糰實心）的尺寸 ===== */
.budget-row__icon .jk-icon,
.budget-card__icon .jk-icon {
  width: 24px;
  height: 24px;
}

.bill-group__child-icon .jk-icon {
  width: 0.95rem;
  height: 0.95rem;
}

/* ===== v502（2026-10-25）：夢想目標頁視覺對齊醬記 =====
   問題：藍色天空、橘粉／紫／藍氣球、咖啡色字都不在醬記的色票裡；頁首標題重複；卡片太高、空白多；
   百分比寫在淡色氣球上看不清；新增入口有三個。改成：薄荷綠天空、品牌色氣球、一行摘要、較矮的卡片。 */
.dream-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
}

.dream-summary__text {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.dream-summary__text {
  display: grid;
  gap: 2px;
}

.dream-summary__main {
  color: var(--ink);
  font-size: 1.1rem;
}

.dream-summary__main strong {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.dream-summary__sub {
  font-size: 0.8rem;
}

.dream-summary__add {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 18px;
  color: var(--accent-ink);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  background: var(--accent);
  border: 0;
  border-radius: 22px;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease);
}

.dream-summary__add:hover,
.dream-summary__add:focus-visible {
  background: var(--accent-strong);
}

.dream-sky-grid {
  gap: 14px;
}

.dream-sky:not(.dream-sky--add) {
  gap: 2px;
  padding-bottom: 14px;
  background: var(--surface-strong);
  border-color: var(--line);
  border-radius: 20px;
}

.dream-sky__scene {
  margin-bottom: 10px;
}

.dream-sky__goal {
  stroke: #b8b0a0;
  stroke-dasharray: 3 3;
  stroke-width: 0.8;
}

.dream-sky__goal-label {
  fill: #5b5c55;
  font-size: 7px;
  font-weight: 600;
}

.dream-sky__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  box-sizing: border-box;
  gap: 8px;
  width: 100%;
  padding: 0 14px;
}

.dream-sky .dream-sky__row .dream-sky__name {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  font-size: 0.95rem;
  text-align: left;
}

.dream-sky__percent {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.dream-sky.is-reached .dream-sky__percent {
  color: #8a6416;
}

.dream-sky .dream-sky__amount {
  box-sizing: border-box;
  width: 100%;
  padding: 0 14px;
  text-align: left;
}

/* 總覽的夢想氣球一排、空狀態：天空也從藍色換成薄荷綠 */
.dream-row__item,
.dream-empty {
  background: linear-gradient(180deg, #d6ebe4 0%, var(--surface-strong) 100%);
}


/* ===== v5.16（Lucas）：要使用者自己輸入的欄位，都跟金額卡一樣有淺綠色的底 =====
   顏色跟金額卡、消費項目列同一組（accent 7% 混 surface、accent 16% 邊線）。
   選擇類的欄位（分類、帳戶、日期）不算；支出的「店家」是定位自動帶入的，不上色。 */
#entry-form {
  --typed-fill: color-mix(in srgb, var(--accent) 7%, var(--surface));
  --typed-line: color-mix(in srgb, var(--accent) 16%, transparent);
}

/* 有自己外框的輸入框：換底色和邊線色 */
#entry-form #entry-bill-actual,
#entry-form #entry-transfer-fee,
#entry-form #entry-security-code,
#entry-form #entry-security-name,
#entry-form #entry-investment-fee,
#entry-form #entry-investment-tax,
#entry-form #entry-investment-recurring-month,
#entry-form #entry-investment-recurring-day,
#entry-form #entry-recurring-month,
#entry-form #entry-recurring-day,
#entry-form textarea[name="note"] {
  background: var(--typed-fill);
  border-color: var(--typed-line);
}

/* 投資的股數、成交單價：本來沒有邊線，換底色並用內陰影補一圈細線（不改變大小） */
#entry-form #entry-shares,
#entry-form #entry-unit-price {
  background: var(--typed-fill);
  box-shadow: inset 0 0 0 1px var(--typed-line);
}

/* 投資的「股票」搜尋列、收入的「收入來源」：整列淺綠 */
#entry-form[data-entry-kind="income"] #merchant-field {
  background: var(--typed-fill);
  border: 1px solid var(--typed-line);
  border-radius: 12px;
}

/* 股票搜尋列是跟下面股數／單價接在一起的卡片上半部：只換底色和線色，形狀照舊 */
#entry-form.entry-simple .invest-query-field {
  background: var(--typed-fill);
  border-color: var(--typed-line);
}

#entry-form[data-entry-kind="income"] #entry-form-grid > #merchant-field {
  margin: 4px -8px;
  padding: 6px 10px;
}

/* ===== v5.19（Lucas 設計稿 account-card.html）：帳戶區塊——磨砂玻璃疊卡、翻面看交易、卡片裡編輯 ===== */
.acct-glass {
  --jkc-ink: #fffdf8;
  overflow: hidden;
}

.acct-glass__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.acct-glass__head h2 {
  margin: 0 auto 0 0;
  font-size: 1.25rem;
}

.acct-glass__all {
  padding: 6px 4px;
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  background: none;
  border: 0;
  cursor: pointer;
}

.acct-glass__add {
  padding: 8px 14px;
  color: #fff;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  background: #0e6b5c;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

/* 合計卡：區塊主角 */
.acct-glass .acct-glass__total {
  display: grid;
  gap: 2px;
  margin: 12px 0 0;
  padding: 16px 18px;
  color: #fff;
  background: linear-gradient(135deg, #0e6b5c, #0a5147);
  border: 0;
  border-radius: 20px;
}

.acct-glass .acct-glass__total[hidden] {
  display: none;
}

.acct-glass .acct-total__label {
  font-size: 0.8rem;
  opacity: 0.8;
}

.acct-glass .acct-total__amount {
  margin: 0;
  color: #fff;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.acct-glass .acct-total__amount.is-negative {
  color: #ffd7cf;
}

.acct-glass .acct-total__row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 0.8rem;
  opacity: 0.9;
}

/* 類型篩選：帶 icon、橫向捲動、兩端淡出＋箭頭（箭頭只在有滑鼠的裝置出現） */
.acct-hscroll {
  position: relative;
  margin: 14px -16px 0;
}

.acct-hscroll[hidden] {
  display: none;
}

.acct-hscroll::before,
.acct-hscroll::after {
  position: absolute;
  top: 0;
  bottom: 4px;
  z-index: 1;
  width: 44px;
  content: "";
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

.acct-hscroll::before {
  left: 0;
  background: linear-gradient(90deg, var(--surface), transparent);
}

.acct-hscroll::after {
  right: 0;
  background: linear-gradient(270deg, var(--surface), transparent);
}

.acct-hscroll.can-left::before,
.acct-hscroll.can-right::after {
  opacity: 1;
}

.acct-harrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: none;
  width: 30px;
  height: 30px;
  margin-top: -17px;
  padding: 0;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  line-height: 1;
  background: var(--surface-strong, #fffdf8);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgb(0 0 0 / 10%);
  cursor: pointer;
}

.acct-harrow--l {
  left: 6px;
}

.acct-harrow--r {
  right: 6px;
}

@media (hover: hover) and (pointer: fine) {
  .acct-hscroll.can-left .acct-harrow--l,
  .acct-hscroll.can-right .acct-harrow--r {
    display: block;
  }
}

.acct-glass .acct-filter {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0;
  padding: 0 16px 4px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  cursor: grab;
}

.acct-glass .acct-filter::-webkit-scrollbar,
.jkc-types::-webkit-scrollbar {
  display: none;
}

.acct-glass .acct-filter.is-grabbing,
.jkc-types.is-grabbing {
  cursor: grabbing;
  scroll-behavior: auto;
  user-select: none;
}

.acct-glass .acct-filter button {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 13px 0 9px;
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 650;
  background: #e7e2d6;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.acct-glass .acct-filter button[hidden] {
  display: none;
}

.acct-glass .acct-filter button.is-on {
  color: #fffdf8;
  background: #191a18;
  --jk-icon-main: #86d5b5;
}

.acct-filter__icon {
  display: inline-flex;
}

.acct-filter__icon .jk-icon {
  width: 19px;
  height: 19px;
}

.acct-glass.is-card-open .acct-hscroll,
.acct-glass.is-card-open .acct-glass__total {
  opacity: 0.45;
  pointer-events: none;
}

/* 疊卡場景：卡片後面墊幾團很淡的品牌色光，磨砂玻璃才看得出來 */
.acct-scene {
  position: relative;
  margin: 16px -16px 0;
  padding: 0 16px;
}

.acct-scene::before {
  position: absolute;
  inset: -10px 0 -20px;
  z-index: 0;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(38% 34% at 18% 30%, rgb(14 107 92 / 55%), transparent 70%),
    radial-gradient(34% 30% at 82% 22%, rgb(233 185 73 / 60%), transparent 70%),
    radial-gradient(40% 36% at 70% 82%, rgb(194 116 80 / 45%), transparent 70%),
    radial-gradient(30% 30% at 25% 85%, rgb(61 93 143 / 35%), transparent 70%);
  background-size: 140% 140%;
  filter: blur(6px);
  animation: jkc-drift 18s ease-in-out infinite alternate;
}

@keyframes jkc-drift {
  0% { background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%; transform: scale(1); }
  50% { background-position: 30% 20%, 70% 30%, 60% 80%, 20% 70%; transform: scale(1.04); }
  100% { background-position: 10% 40%, 90% 10%, 80% 60%, 10% 90%; transform: scale(1); }
}

.jkc-stack {
  position: relative;
  z-index: 1;
  min-height: 60px;
  outline: none;
  touch-action: pan-y;
  transition: height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.jkc-stack .acct-cards__empty {
  position: relative;
  margin: 0;
  padding: 18px 4px;
  color: var(--muted);
}

.jkc {
  --jk-icon-main: #fffdf8;
  position: absolute;
  top: 86px;
  right: 0;
  left: 0;
  height: 212px;
  color: #fffdf8;
  background: linear-gradient(140deg, var(--c1), var(--c2));
  border: 1px solid rgb(255 255 255 / 34%);
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 45%), inset 0 -1px 0 rgb(0 0 0 / 10%), 0 14px 34px rgb(25 26 24 / 22%);
  cursor: pointer;
  user-select: none;
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  transform-origin: 50% 0;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s, top 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.jkc::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  border-radius: inherit;
  mix-blend-mode: overlay;
  opacity: 0.22;
}

.jkc::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(160deg, rgb(255 255 255 / 28%) 0%, rgb(255 255 255 / 6%) 32%, transparent 55%);
  border-radius: inherit;
}

.jkc.is-dragging {
  transition: none;
}

.jkc.is-open {
  cursor: default;
  user-select: text;
}

/* 類型色（帶透明度，後面的光透得出來） */
.jkc--cash { --c1: rgb(240 199 102 / 78%); --c2: rgb(226 173 63 / 62%); --jk-icon-main: #3d2f0e; color: #2a2005; }
.jkc--bank { --c1: rgb(14 107 92 / 72%); --c2: rgb(10 81 71 / 55%); }
.jkc--credit { --c1: rgb(47 48 44 / 78%); --c2: rgb(25 26 24 / 62%); }
.jkc--billing { --c1: rgb(93 108 123 / 74%); --c2: rgb(69 81 93 / 58%); }
.jkc--stored { --c1: rgb(194 116 80 / 74%); --c2: rgb(163 89 58 / 58%); }
.jkc--epayment { --c1: rgb(61 93 143 / 74%); --c2: rgb(43 68 112 / 58%); }
.jkc--investment { --c1: rgb(47 48 44 / 80%); --c2: rgb(25 26 24 / 64%); color: #f3d27e; }
.jkc--loan { --c1: rgb(110 77 53 / 76%); --c2: rgb(83 57 39 / 60%); }
.jkc--settlement { --c1: rgb(110 121 68 / 74%); --c2: rgb(84 93 50 / 58%); }
.jkc--liability { --c1: rgb(140 63 60 / 76%); --c2: rgb(108 45 43 / 60%); }
.jkc--receivable,
.jkc--insurance,
.jkc--goal { --c1: rgb(124 79 109 / 74%); --c2: rgb(94 58 83 / 58%); }

/* 自訂封面：封面鋪滿，上面疊淡淡的明暗漸層，文字與 icon 用白色 */
.jkc.has-cover {
  --jk-icon-main: #fffdf8;
  color: #fffdf8;
  background: linear-gradient(140deg, rgb(255 255 255 / 10%), rgb(0 0 0 / 34%)), var(--cover) center / cover no-repeat;
}

/* 動態光影：1. 掃光（只有最前面那張、沒翻開時）2. 游標光點＋微傾 */
.jkc__glare,
.jkc__spot {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: screen;
}

.jkc__glare::before {
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: 0;
  width: 45%;
  content: "";
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 10%) 30%, rgb(255 255 255 / 32%) 50%, rgb(255 255 255 / 10%) 70%, transparent);
  filter: blur(2px);
  opacity: 0;
  transform: translateX(-160%) rotate(18deg);
}

.jkc.is-front:not(.is-open) .jkc__glare::before {
  animation: jkc-sheen 7s ease-in-out 1.2s infinite;
}

@keyframes jkc-sheen {
  0%, 6% { transform: translateX(-160%) rotate(18deg); opacity: 0; }
  10% { transform: translateX(-130%) rotate(18deg); opacity: 1; }
  46% { transform: translateX(300%) rotate(18deg); opacity: 1; }
  50%, 100% { transform: translateX(330%) rotate(18deg); opacity: 0; }
}

.jkc__spot {
  background: radial-gradient(circle at var(--mx, 30%) var(--my, 25%), rgb(255 255 255 / 30%), rgb(255 255 255 / 9%) 30%, transparent 58%);
  opacity: 0;
  transition: opacity 0.35s;
}

.jkc.is-lit .jkc__spot {
  opacity: 1;
}

.jkc.is-lit {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 70%), inset 0 -1px 0 rgb(0 0 0 / 10%), 0 18px 40px rgb(25 26 24 / 26%);
}

.jkc.is-tilting {
  transition: transform 0.14s ease-out, opacity 0.35s, top 0.45s, height 0.45s;
}

/* 翻面：平面 rotateY 模擬（iOS Safari 3D 下 backdrop-filter 會失效） */
.jkc.jkc--flip-out {
  animation: jkc-flip-out 0.22s ease-in forwards;
}

.jkc.jkc--flip-in {
  animation: jkc-flip-in 0.26s ease-out;
}

@keyframes jkc-flip-out {
  to { transform: perspective(900px) rotateY(90deg) scale(0.98); }
}

@keyframes jkc-flip-in {
  from { transform: perspective(900px) rotateY(-90deg) scale(0.98); }
  to { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .jkc .jkc__glare::before,
  .acct-scene::before {
    animation: none !important;
  }

  .jkc.is-tilting {
    transform: none !important;
  }

  .jkc.jkc--flip-in,
  .jkc.jkc--flip-out {
    animation: none !important;
  }
}

/* 正面 */
.jkc__face {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 12px 18px 16px;
}

.jkc__face--back {
  display: none;
  overflow: hidden;
  padding: 14px 16px 16px;
}

.jkc.show-back .jkc__face--front {
  display: none;
}

.jkc.show-back .jkc__face--back {
  display: block;
}

.jkc__top {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 32px;
}

.jkc__ic {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 18%));
}

.jkc--cash:not(.has-cover) .jkc__ic {
  filter: none;
}

.jkc__ic .jk-icon {
  width: 26px;
  height: 26px;
}

.jkc__nm {
  min-width: 0;
  overflow: hidden;
  font-size: 1rem;
  font-weight: 750;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.jkc__pk {
  margin-left: auto;
  font-size: 0.95rem;
  font-weight: 750;
  white-space: nowrap;
}

.jkc__mk {
  display: none;
  margin-left: auto;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  opacity: 0.7;
}

.jkc.is-front .jkc__pk {
  display: none;
}

.jkc.is-front .jkc__mk {
  display: block;
}

.jkc__emv {
  position: absolute;
  top: 58px;
  left: 18px;
  width: 40px;
  height: 30px;
}

.jkc__emv rect {
  fill: #e9c773;
  stroke: rgb(120 90 30 / 45%);
}

.jkc__emv path {
  fill: none;
  stroke: rgb(120 90 30 / 45%);
  stroke-width: 1.2;
}

.jkc__nfc {
  position: absolute;
  top: 62px;
  left: 66px;
  width: 18px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
  opacity: 0.75;
}

.jkc__amt {
  position: absolute;
  bottom: 52px;
  left: 18px;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.jkc__amt small {
  margin-right: 5px;
  font-size: 0.875rem;
  font-weight: 700;
  opacity: 0.85;
}

.jkc__no {
  position: absolute;
  right: 18px;
  bottom: 58px;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  opacity: 0.75;
}

.jkc__ft {
  position: absolute;
  right: 18px;
  bottom: 14px;
  left: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.8rem;
}

.jkc__type {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.jkc__gbtn {
  flex: none;
  padding: 5px 12px;
  color: inherit;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  background: rgb(255 255 255 / 16%);
  border: 1px solid rgb(255 255 255 / 36%);
  border-radius: 999px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.jkc--cash:not(.has-cover) .jkc__gbtn {
  background: rgb(255 255 255 / 30%);
  border-color: rgb(255 255 255 / 55%);
}

/* 頁碼與提示 */
.acct-pager {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 6px;
}

.acct-pager[hidden],
.acct-hint[hidden] {
  display: none;
}

.acct-pager button {
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--ink);
  font: inherit;
  background: var(--surface-strong, #fffdf8);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
}

.acct-pager small {
  min-width: 44px;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}

.acct-hint {
  position: relative;
  z-index: 1;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  text-align: center;
}

.acct-glass.is-card-open .acct-pager,
.acct-glass.is-card-open .acct-hint {
  visibility: hidden;
}

/* 背面：交易紀錄 */
.jkc-bh {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}

.jkc-bh b {
  min-width: 0;
  overflow: hidden;
  font-size: 1rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.jkc-bh__x {
  margin-left: auto;
}

.jkc-bal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 4px 0 6px;
  padding: 0 0 10px;
  border-bottom: 1px solid rgb(255 255 255 / 18%);
}

.jkc-bal span {
  font-size: 0.78rem;
  opacity: 0.8;
}

.jkc-bal strong {
  font-size: 1.4rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.jkc-day {
  margin: 10px 0 2px;
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0.65;
}

.jkc-tx {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 2px;
  color: inherit;
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid rgb(255 255 255 / 14%);
  cursor: pointer;
}

.jkc-tx__i {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: #0e6b5c;
  font-size: 0.8rem;
  font-weight: 700;
  background: rgb(255 253 248 / 90%);
  border-radius: 11px;
  --jk-icon-main: #0e6b5c;
}

.jkc-tx__i svg {
  width: 21px;
  height: 21px;
}

.jkc-tx__i svg:not(.jk-icon) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.jkc-tx b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 0.875rem;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.jkc-tx b small {
  display: block;
  overflow: hidden;
  font-size: 0.72rem;
  font-weight: 500;
  text-overflow: ellipsis;
  opacity: 0.75;
}

.jkc-tx strong {
  flex: none;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.jkc-empty {
  margin: 14px 0;
  font-size: 0.85rem;
  opacity: 0.8;
}

.jkc-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 0.8rem;
}

.jkc-link {
  padding: 4px 0;
  color: inherit;
  font: inherit;
  font-weight: 700;
  background: none;
  border: 0;
  cursor: pointer;
}

.jkc-link--small {
  margin-left: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  opacity: 0.85;
}

.jkc--cash:not(.has-cover) .jkc-bal,
.jkc--cash:not(.has-cover) .jkc-tx,
.jkc--cash:not(.has-cover) .jkc-sec,
.jkc--cash:not(.has-cover) .jkc-acts {
  border-color: rgb(42 32 5 / 12%);
}

/* 卡片裡編輯：把帳戶設定表單搬進來，拿掉對話框外框，只留極簡欄位（細線分區、無框輸入） */
#simple-form.is-in-card {
  display: block;
  width: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  color: inherit;
  background: none;
  border: 0;
  box-shadow: none;
}

#simple-form.is-in-card > :not(#simple-fields) {
  display: none !important;
}

#simple-form.is-in-card #simple-fields {
  display: block;
  margin: 0;
  padding: 0;
}

#simple-form.is-in-card input,
#simple-form.is-in-card select,
#simple-form.is-in-card textarea {
  min-height: 0;
  color: inherit;
  font: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: none;
}

#simple-form.is-in-card select option {
  color: #191a18;
}

#simple-form.is-in-card .field-help,
#simple-form.is-in-card small {
  color: inherit;
  opacity: 0.7;
}

.jkc-ed__name {
  flex: 1;
  min-width: 0;
  padding: 2px 0 !important;
  font-size: 1.1rem !important;
  font-weight: 750 !important;
  border-bottom: 1px solid transparent !important;
}

.jkc-ed__name:hover,
.jkc-ed__name:focus {
  border-bottom-color: rgb(255 255 255 / 55%) !important;
}

.jkc-ed__x {
  margin-left: auto;
  padding: 4px;
  color: inherit;
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  background: none;
  border: 0;
  opacity: 0.75;
  cursor: pointer;
}

.jkc-sec {
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid rgb(255 255 255 / 16%);
}

.jkc-sec[hidden],
.jkc-sec:empty {
  display: none;
}

.jkc-ed__head + .jkc-sec {
  border-top: 0;
}

.jkc-lab {
  display: block;
  margin-bottom: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.65;
}

.jkc-help {
  font-size: 0.78rem;
  opacity: 0.8;
}

.jkc-covers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.jkc-cv {
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  background: var(--p, linear-gradient(140deg, var(--c1), var(--c2)));
  border: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 35%);
  cursor: pointer;
}

.jkc-cv.on {
  box-shadow: 0 0 0 2px currentColor;
}

.jkc-cv--up {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: auto;
  height: auto;
  margin-left: 4px;
  color: inherit;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 650;
  background: none;
  box-shadow: none;
  opacity: 0.85;
}

.jkc-cv--up .jk-icon {
  width: 18px;
  height: 18px;
}

.jkc-types {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
  cursor: grab;
}

.jkc-ty {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 0 8px;
  color: inherit;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  background: none;
  border: 0;
  opacity: 0.6;
  cursor: pointer;
}

.jkc-ty .jk-icon {
  width: 26px;
  height: 26px;
}

.jkc-ty.on {
  font-weight: 750;
  opacity: 1;
}

.jkc-ty.on::after {
  position: absolute;
  right: 25%;
  bottom: 0;
  left: 25%;
  height: 2px;
  content: "";
  background: currentColor;
  border-radius: 1px;
}

.jkc-last4 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-variant-numeric: tabular-nums;
}

.jkc-last4 > span {
  font-size: 1.1rem;
  letter-spacing: 0.18em;
  opacity: 0.55;
}

.jkc-last4 input {
  width: 5.2em;
  padding: 0 0 2px !important;
  font-size: 1.35rem !important;
  font-weight: 750 !important;
  letter-spacing: 0.22em;
  border-bottom: 1px dashed rgb(255 255 255 / 45%) !important;
}

.jkc-last4 input:focus {
  border-bottom-style: solid !important;
  border-bottom-color: rgb(255 255 255 / 85%) !important;
}

.jkc-last4 input::placeholder,
.jkc-note::placeholder,
.jkc-ed__name::placeholder {
  color: inherit;
  opacity: 0.4;
}

.jkc--cash:not(.has-cover) .jkc-last4 input {
  border-bottom-color: rgb(42 32 5 / 35%) !important;
}

.jkc-money {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.jkc-money > span {
  font-size: 0.875rem;
  font-weight: 700;
  opacity: 0.7;
}

.jkc-money input {
  width: 100%;
  padding: 0 !important;
  font-size: 1.9rem !important;
  font-weight: 800 !important;
}

.jkc-adjust {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.jkc-adjust[hidden] {
  display: none;
}

.jkc-adj {
  display: flex;
  gap: 7px;
  margin: 0;
  font-size: 0.75rem;
  opacity: 0.9;
}

.jkc-adj::before {
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 6px;
  content: "";
  background: #e9b949;
  border-radius: 50%;
}

.jkc-inline,
.jkc-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
}

.jkc-inline select {
  flex: 1;
  padding: 4px 0 !important;
  font-weight: 650 !important;
  border-bottom: 1px solid rgb(255 255 255 / 35%) !important;
}

.jkc-check input {
  width: 18px;
  height: 18px;
  accent-color: #86d5b5;
}

.jkc-note {
  width: 100%;
  padding: 0 !important;
  font-size: 0.95rem !important;
}

/* 類型專屬設定（電子支付綁定、證券交割、銀行匯入、帳單額外費用）：沿用原本欄位，樣式收成同一套極簡 */
.jkc-extra label,
.jkc-extra .bank-import-settings,
.jkc-extra .bill-extra-settings {
  display: grid;
  gap: 6px;
  margin: 0 0 10px;
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
}

.jkc-extra label > span:first-child {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.65;
}

.jkc-extra select,
.jkc-extra input:not([type="checkbox"]):not([type="radio"]) {
  padding: 4px 0 !important;
  border-bottom: 1px solid rgb(255 255 255 / 35%) !important;
}

.jkc-extra .check-control {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
  padding: 0;
  background: none;
  border: 0;
}

.jkc-extra .check-control input {
  width: 18px;
  height: 18px;
  accent-color: #86d5b5;
}

.jkc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.jkc-row b {
  font-size: 0.9rem;
}

.jkc-row small {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
}

.jkc-tog {
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
  padding: 0;
  background: rgb(255 255 255 / 25%);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s;
}

.jkc-tog::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  content: "";
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgb(0 0 0 / 25%);
  transition: transform 0.2s;
}

.jkc-tog.on {
  background: #86d5b5;
}

.jkc-tog.on::after {
  transform: translateX(18px);
}

.jkc--cash:not(.has-cover) .jkc-tog {
  background: rgb(42 32 5 / 18%);
}

.jkc--cash:not(.has-cover) .jkc-tog.on {
  background: #0e6b5c;
}

.jkc-acts {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid rgb(255 255 255 / 16%);
}

.jkc-del {
  margin-right: auto;
  padding: 0;
  color: #ffb4aa;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 650;
  background: none;
  border: 0;
  cursor: pointer;
}

.jkc--cash:not(.has-cover) .jkc-del {
  color: #8c2f26;
}

.jkc-cancel {
  padding: 0;
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 650;
  background: none;
  border: 0;
  opacity: 0.8;
  cursor: pointer;
}

.jkc-save {
  padding: 9px 20px;
  color: #0a3d34;
  font: inherit;
  font-weight: 800;
  background: #fffdf8;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.jkc--cash:not(.has-cover) .jkc-save {
  color: #fffdf8;
  background: #2a2005;
}

/* 明細頁：從卡片「看全部明細」帶進來的帳戶篩選 */
.transaction-account-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 6px 8px 6px 14px;
  font-size: 0.85rem;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 999px;
}

.transaction-account-chip button {
  width: 26px;
  height: 26px;
  padding: 0;
  color: inherit;
  font: inherit;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

/* 今日對帳：醬記 icon、主按鈕醬記綠，已對帳時淡綠底＋淺色「再對一次」 */
.reconciliation-card__icon .jk-icon {
  width: 26px;
  height: 26px;
}

#reconciliation-card .reconciliation-card__start.button--primary {
  color: #fff;
  background: #0e6b5c;
  border-color: #0e6b5c;
}

#reconciliation-card[data-state="done"] .reconciliation-card__icon {
  background: #e3f1ec;
}

#reconciliation-card[data-state="done"] .reconciliation-card__start {
  color: #0e6b5c;
  background: #eaf4f0;
  border-color: transparent;
}

/* v5.19 修正：面板是單欄 grid，要限制成 minmax(0,1fr)，篩選列才不會把整個區塊撐寬；面板本身沒有左右內距，不用負邊界 */
.acct-glass {
  grid-template-columns: minmax(0, 1fr);
  overflow: visible;
}

.acct-glass > * {
  min-width: 0;
}

.acct-glass .acct-hscroll {
  margin: 14px 0 0;
}

.acct-glass .acct-filter {
  padding: 0 0 4px;
}

.acct-glass .acct-hscroll::before {
  background: linear-gradient(90deg, #f6f1e5, transparent);
}

.acct-glass .acct-hscroll::after {
  background: linear-gradient(270deg, #f6f1e5, transparent);
}

.acct-glass .acct-scene {
  margin: 16px 0 0;
  padding: 0;
  overflow-x: clip;
}

/* v5.19 修正：卡片翻開時，頁碼與提示整個收起來（不留空白） */
.acct-glass.is-card-open .acct-pager,
.acct-glass.is-card-open .acct-hint {
  display: none;
}

/* ===== v5.20（Lucas：桌面版跑版）：帳戶區塊的電腦版排法 =====
   舊的電腦版規則（v232／v234）把 .acct-cards 排成 head／stack／details／add／filter 五格，新版元素對不上格子才會散開。
   電腦版改成：標題列橫跨整排；左欄＝合計卡、類型篩選；右欄＝疊卡（寬度固定在 340–420px，跟手機版同一套卡片尺寸）。 */
.acct-glass {
  --acct-fade: #f6f1e5;
}

.acct-glass .acct-hscroll::before {
  background: linear-gradient(90deg, var(--acct-fade), transparent);
}

.acct-glass .acct-hscroll::after {
  background: linear-gradient(270deg, var(--acct-fade), transparent);
}

@media (min-width: 960px) {
  .acct-cards.acct-glass {
    --acct-fade: #fffdf8;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
    grid-template-areas:
      "head head"
      "total scene"
      "filter scene"
      ". scene";
    grid-template-rows: auto auto auto 1fr;
    column-gap: var(--space-8);
    row-gap: 0;
    align-items: start;
  }

  .acct-glass .acct-glass__head {
    grid-area: head;
  }

  .acct-glass .acct-glass__total {
    grid-area: total;
  }

  .acct-glass .acct-hscroll {
    grid-area: filter;
  }

  .acct-glass .acct-scene {
    grid-area: scene;
    width: 100%;
    margin-top: 12px;
  }

  .acct-glass .acct-glass__total .acct-total__amount {
    font-size: 2.4rem;
  }
}

/* ===== v5.20（Lucas）：帳戶卡片改「陶瓷白」——更乾淨 =====
   1. 拿掉卡片後方的多彩光暈。
   2. 卡片一律陶瓷白（不透明，不再用 backdrop-filter），只在卡片底部留一條類型色的色條；文字深色、icon 用醬記綠＋金。
   3. 背面（交易、編輯）跟著改成淺色系的細線、按鈕與開關。自訂封面的卡維持封面＋白字。 */
.acct-glass .acct-scene::before {
  content: none;
  animation: none;
}

.jkc {
  --jkc-strip: #0e6b5c;
  --jk-icon-main: #0e6b5c;
  color: #191a18;
  background: linear-gradient(160deg, #fffdf8 0%, #f6f2ea 100%);
  border: 1px solid rgb(25 26 24 / 9%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 90%), 0 1px 2px rgb(25 26 24 / 6%), 0 10px 26px rgb(25 26 24 / 10%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  overflow: hidden;
}

.jkc::before {
  opacity: 0.06;
}

.jkc::after {
  top: auto;
  height: 10px;
  background: var(--jkc-strip);
  border-radius: 0 0 22px 22px;
}

.jkc.show-back::after {
  height: 6px;
}

/* 每種類型只用在底部色條 */
.jkc--cash { --jkc-strip: #e2ad3f; }
.jkc--bank { --jkc-strip: #0e6b5c; }
.jkc--credit { --jkc-strip: #2f302c; }
.jkc--billing { --jkc-strip: #5d6c7b; }
.jkc--stored { --jkc-strip: #c27450; }
.jkc--epayment { --jkc-strip: #3d5d8f; }
.jkc--investment { --jkc-strip: #b8902f; }
.jkc--loan { --jkc-strip: #6e4d35; }
.jkc--settlement { --jkc-strip: #6e7944; }
.jkc--liability { --jkc-strip: #8c3f3c; }
.jkc--receivable,
.jkc--insurance,
.jkc--goal { --jkc-strip: #7c4f6d; }

.jkc--cash,
.jkc--bank,
.jkc--credit,
.jkc--billing,
.jkc--stored,
.jkc--epayment,
.jkc--investment,
.jkc--loan,
.jkc--settlement,
.jkc--liability,
.jkc--receivable,
.jkc--insurance,
.jkc--goal {
  --jk-icon-main: #0e6b5c;
  color: #191a18;
}

.jkc__ic {
  filter: none;
}

.jkc__mk,
.jkc__no {
  color: #6d6d66;
  opacity: 1;
}

.jkc__nfc {
  opacity: 0.45;
}

.jkc__amt small {
  color: #a94f45;
  opacity: 1;
}

.jkc__ft {
  bottom: 20px;
  color: #6d6d66;
}

.jkc__gbtn,
.jkc--cash:not(.has-cover) .jkc__gbtn {
  color: #191a18;
  background: rgb(25 26 24 / 5%);
  border: 1px solid rgb(25 26 24 / 12%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* 掃光與游標光點：白卡上改成很淡的灰影，才看得出來又不搶眼 */
.jkc__glare,
.jkc__spot {
  mix-blend-mode: normal;
}

.jkc__glare::before {
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0%) 30%, rgb(255 255 255 / 70%) 50%, rgb(255 255 255 / 0%) 70%, transparent);
}

.jkc__spot {
  background: radial-gradient(circle at var(--mx, 30%) var(--my, 25%), rgb(255 255 255 / 75%), rgb(255 255 255 / 0%) 45%);
}

.jkc.is-lit {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 95%), 0 1px 2px rgb(25 26 24 / 6%), 0 14px 32px rgb(25 26 24 / 14%);
}

/* 背面：淺色細線、深色字 */
.jkc .jkc-bal,
.jkc .jkc-tx,
.jkc .jkc-sec,
.jkc .jkc-acts,
.jkc--cash:not(.has-cover) .jkc-bal,
.jkc--cash:not(.has-cover) .jkc-tx,
.jkc--cash:not(.has-cover) .jkc-sec,
.jkc--cash:not(.has-cover) .jkc-acts {
  border-color: rgb(25 26 24 / 9%);
}

.jkc .jkc-tx__i {
  background: #eaf4f0;
}

.jkc .jkc-day,
.jkc .jkc-lab,
.jkc .jkc-bal span {
  color: #6d6d66;
  opacity: 1;
}

.jkc .jkc-ed__name:hover,
.jkc .jkc-ed__name:focus {
  border-bottom-color: rgb(25 26 24 / 30%) !important;
}

.jkc .jkc-last4 input,
.jkc--cash:not(.has-cover) .jkc-last4 input {
  border-bottom-color: rgb(25 26 24 / 30%) !important;
}

.jkc .jkc-last4 input:focus {
  border-bottom-color: #0e6b5c !important;
}

.jkc .jkc-inline select,
.jkc .jkc-extra select,
.jkc .jkc-extra input:not([type="checkbox"]):not([type="radio"]) {
  border-bottom-color: rgb(25 26 24 / 20%) !important;
}

.jkc .jkc-check input,
.jkc .jkc-extra .check-control input {
  accent-color: #0e6b5c;
}

.jkc .jkc-tog,
.jkc--cash:not(.has-cover) .jkc-tog {
  background: rgb(25 26 24 / 16%);
}

.jkc .jkc-tog.on,
.jkc--cash:not(.has-cover) .jkc-tog.on {
  background: #0e6b5c;
}

.jkc .jkc-del,
.jkc--cash:not(.has-cover) .jkc-del {
  color: #a94f45;
}

.jkc .jkc-save,
.jkc--cash:not(.has-cover) .jkc-save {
  color: #fffdf8;
  background: #0e6b5c;
}

.jkc .jkc-cv {
  box-shadow: inset 0 0 0 1px rgb(25 26 24 / 15%);
}

.jkc .jkc-cv--type {
  --p: linear-gradient(160deg, #fffdf8 0%, #f6f2ea 70%, var(--jkc-strip) 70%);
}

.jkc .jkc-cv.on {
  box-shadow: 0 0 0 2px #0e6b5c;
}

/* 自訂封面：維持封面＋白字，底部色條照樣保留 */
.jkc.has-cover {
  --jk-icon-main: #fffdf8;
  color: #fffdf8;
  background: linear-gradient(140deg, rgb(255 255 255 / 10%), rgb(0 0 0 / 34%)), var(--cover) center / cover no-repeat;
  border-color: rgb(255 255 255 / 30%);
}

.jkc.has-cover .jkc__mk,
.jkc.has-cover .jkc__no,
.jkc.has-cover .jkc__ft {
  color: #fffdf8;
}

.jkc.has-cover .jkc__gbtn {
  color: #fffdf8;
  background: rgb(255 255 255 / 16%);
  border-color: rgb(255 255 255 / 36%);
}

/* ===== v5.20 細修（Lucas）=====
   1. 陶瓷白加一層釉面光澤：左上柔和高光＋斜向一道淡亮帶＋上緣亮邊、底部微微內陰影，像上了釉的瓷器。
   2. 合計卡標題「淨資產（已扣欠款）」改醬記金。
   3. 交易背面整張可以點，點了翻回正面（游標變手指）。 */
.jkc {
  background:
    linear-gradient(118deg, rgb(255 255 255 / 0%) 34%, rgb(255 255 255 / 55%) 44%, rgb(255 255 255 / 0%) 54%),
    radial-gradient(120% 75% at 18% 0%, rgb(255 255 255 / 95%) 0%, rgb(255 255 255 / 0%) 62%),
    linear-gradient(160deg, #fffdf8 0%, #f3eee5 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 100%),
    inset 0 -14px 24px -18px rgb(120 100 70 / 22%),
    0 1px 2px rgb(25 26 24 / 6%),
    0 12px 28px rgb(25 26 24 / 12%);
}

.jkc.is-lit {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 100%),
    inset 0 -14px 24px -18px rgb(120 100 70 / 22%),
    0 1px 2px rgb(25 26 24 / 6%),
    0 16px 34px rgb(25 26 24 / 16%);
}

.jkc.has-cover {
  background: linear-gradient(140deg, rgb(255 255 255 / 10%), rgb(0 0 0 / 34%)), var(--cover) center / cover no-repeat;
}

.acct-glass .acct-total__label {
  color: #e9b949;
  font-weight: 700;
  opacity: 1;
}

.jkc.is-open.show-back:not(:has(#simple-form)) {
  cursor: pointer;
}

/* v5.20（Lucas）：拿掉疊卡下方的文字提示，改回只用左右滑動示範動畫（v358）；動畫疊在最前面那張卡上 */
.jkc-stack > .acct-swipe-hint {
  inset: auto 0 0;
  height: 214px;
  border-radius: 22px;
  z-index: 200;
}

/* v5.20（Lucas）：語音記帳鈕放在「記帳」右邊——記帳約 ¾、麥克風約 ¼，只放圖示；淺綠底，主次分明 */
#entry-form.entry-simple > .dialog-actions:has(> #entry-voice-button:not([hidden])) {
  grid-template-columns: 3fr 1fr;
  column-gap: 10px;
}

#entry-form.entry-simple > .dialog-actions > #delete-entry {
  grid-column: 1 / -1;
}

.entry-voice-button {
  order: -1;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  border-radius: 14px;
  cursor: pointer;
}

.entry-voice-button[hidden] {
  display: none;
}

.entry-voice-button svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* v5.21（Lucas）：合計卡「欠款」可以點，展開列出欠錢的帳戶 */
.acct-glass .acct-total__debt {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: -3px -6px;
  padding: 3px 6px;
  color: inherit;
  font: inherit;
  text-decoration: underline dotted rgb(255 255 255 / 55%);
  text-underline-offset: 3px;
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.acct-glass .acct-total__debt svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}

.acct-glass .acct-total__debt[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.acct-glass .acct-debts {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgb(255 255 255 / 18%);
}

.acct-glass .acct-debts__note {
  margin: 0 0 6px;
  font-size: 0.75rem;
  opacity: 0.8;
}

.acct-glass .acct-debts ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.acct-glass .acct-debts button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  color: #fff;
  font: inherit;
  text-align: left;
  background: rgb(255 255 255 / 10%);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

.acct-debts__name {
  display: grid;
  min-width: 0;
  font-size: 0.86rem;
  font-weight: 650;
}

.acct-debts__name small {
  font-size: 0.7rem;
  font-weight: 500;
  opacity: 0.75;
}

.acct-glass .acct-debts b {
  flex: 0 0 auto;
  color: #ffd7cf;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

/* ===== v5.22（Lucas）：首頁小工具——總覽每個區塊是一個 .home-widget；編輯模式縮成一列一列；小工具頁卡片＋即時預覽 ===== */
.home-widget[hidden],
.home-widget[data-empty] {
  display: none !important;
}

/* 每個小工具自己一個外框，原本兩欄的 grid 改單欄（電腦版並排交給下面 .home-widgets 的 grid） */
.home-widget.summary-grid,
.home-widget.content-grid {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 960px) {
  .home-widgets {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    column-gap: var(--space-4);
    align-items: start;
  }

  .home-widget {
    grid-column: 1 / -1;
    min-width: 0;
  }

  /* 本月剩多少＋支出區間、預算＋夢想：照原本的設計相鄰時並排 */
  .home-widgets:not(.is-editing) > .home-widget.is-paired {
    grid-column: auto;
  }
}

/* 手機版支出區間原本往上貼著「本月剩多少」；不是緊跟在後面時取消 */
@media (max-width: 959px) {
  .home-widget[data-widget="period"]:not(.is-after-month) > .metric-card.metric-card--period {
    margin-top: 0;
  }
}

.home-widgets-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 var(--space-6, 24px);
}

.home-widgets-actions__button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 18px;
  color: var(--ink, #17231f);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 650;
  background: color-mix(in srgb, var(--surface, #fff) 70%, transparent);
  border: 1px solid var(--line, #e2ddd0);
  border-radius: 999px;
  cursor: pointer;
}

.home-widgets-actions__button[hidden] {
  display: none;
}

.home-widgets-actions__button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-widgets-actions__button--primary {
  color: #fff;
  background: var(--accent, #0e6b5c);
  border-color: transparent;
}

/* 編輯模式：小工具內容收起，只留一列（名稱、說明、↑↓、移除／固定）；沒內容的也列出來 */
.home-widgets.is-editing {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-bottom: var(--space-4, 16px);
}

.home-widgets.is-editing > .home-widget[data-empty]:not([hidden]) {
  display: block !important;
}

.home-widgets.is-editing > .home-widget {
  display: block;
  margin: 0;
  padding: 0;
}

/* v5.65：編輯模式不再收成清單，區塊照原樣顯示（長的只露出上半部），整塊可以拖；內容暫時不能點 */
.home-widgets.is-editing > .home-widget > :not(.home-widget__bar):not(.home-widget__handle) {
  pointer-events: none;
}

.home-widget__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 6px;
  background: var(--surface, #fffdf8);
  border: 1px solid var(--line, #e2ddd0);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgb(23 35 31 / 6%);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.home-widget.is-locked > .home-widget__bar {
  background: color-mix(in srgb, var(--accent, #0e6b5c) 6%, var(--surface, #fffdf8));
}

.home-widget.is-dragging > .home-widget__bar {
  border-color: var(--accent, #0e6b5c);
  box-shadow: 0 10px 24px rgb(23 35 31 / 18%);
  transform: scale(1.02);
}

.home-widgets.is-sorting {
  touch-action: none;
}

.home-widget__grip {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 40px;
  color: var(--muted, #8a8f88);
  cursor: grab;
  touch-action: none;
}

.home-widget__grip svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.home-widget__name {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  gap: 2px;
}

.home-widget__name b {
  font-size: 0.95rem;
}

.home-widget__name small {
  overflow: hidden;
  color: var(--muted, #8a8f88);
  font-size: 0.75rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.home-widget__moves {
  display: flex;
  flex: 0 0 auto;
  gap: 2px;
}

.home-widget__moves button,
.home-widget__remove {
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding: 0;
  color: var(--ink, #17231f);
  font: inherit;
  background: none;
  border: 1px solid var(--line, #e2ddd0);
  border-radius: 10px;
  cursor: pointer;
}

.home-widget__moves svg,
.home-widget__lock svg,
.widget-card__status svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-widget__remove {
  flex: 0 0 auto;
  padding: 0 10px;
  white-space: nowrap;
  color: #a94f45;
  font-size: 0.8rem;
  font-weight: 650;
  border-color: color-mix(in srgb, #a94f45 35%, transparent);
}

.home-widget__lock {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
  padding: 0 4px;
  color: var(--accent, #0e6b5c);
  font-size: 0.78rem;
  font-weight: 650;
}

/* 小工具頁 */
.widget-gallery {
  display: grid;
  gap: var(--space-6, 24px);
  padding-bottom: var(--space-8, 32px);
}

.widget-gallery__group h3 {
  margin: 0 0 10px;
  color: var(--muted, #8a8f88);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.widget-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.widget-card {
  display: grid;
  overflow: hidden;
  background: var(--surface, #fffdf8);
  border: 1px solid var(--line, #e2ddd0);
  border-radius: 20px;
}

.widget-card.is-on {
  border-color: color-mix(in srgb, var(--accent, #0e6b5c) 40%, transparent);
}

.widget-card__preview {
  position: relative;
  height: 170px;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent, #0e6b5c) 5%, #f6f1e5);
  pointer-events: none;
}

.widget-card__preview::after {
  position: absolute;
  inset: auto 0 0;
  height: 36px;
  background: linear-gradient(transparent, color-mix(in srgb, var(--accent, #0e6b5c) 5%, #f6f1e5));
  content: "";
}

/* 預覽縮成 55%：外層寬度放大成 1/0.55 再縮回來，內容排版跟首頁一樣 */
.widget-card__scaler {
  width: calc(100% / 0.55);
  margin: 0 !important;
  padding: 14px;
  transform: scale(0.55);
  transform-origin: top left;
}

.widget-card__scaler > * {
  margin: 0 !important;
}

.widget-card__empty {
  display: grid;
  place-items: center;
  height: 100%;
  margin: 0;
  padding: 0 20px;
  color: var(--muted, #8a8f88);
  font-size: 0.82rem;
  text-align: center;
}

.widget-card__body {
  display: grid;
  gap: 4px;
  padding: 12px 14px 14px;
}

.widget-card__body h4 {
  margin: 0;
  font-size: 1rem;
}

.widget-card__body p {
  margin: 0;
  color: var(--muted, #8a8f88);
  font-size: 0.8rem;
  line-height: 1.5;
}

.widget-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.widget-card__status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent, #0e6b5c);
  font-size: 0.8rem;
  font-weight: 650;
}

.widget-card__button {
  min-height: 36px;
  padding: 0 14px;
  color: #a94f45;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  background: none;
  border: 1px solid color-mix(in srgb, #a94f45 35%, transparent);
  border-radius: 999px;
  cursor: pointer;
}

.widget-card__button--add {
  flex: 1 1 auto;
  color: #fff;
  background: var(--accent, #0e6b5c);
  border-color: transparent;
}

/* v5.24（Lucas）：不該是負數的帳戶另外提醒（金色，跟欠款分開） */
.acct-glass .acct-total__warn {
  color: #f1cf7a;
  text-decoration-color: rgb(241 207 122 / 60%);
}

.acct-glass .acct-debts--warn {
  border-top-color: rgb(241 207 122 / 35%);
}

.acct-glass .acct-debts--warn .acct-debts__note {
  color: #f6dfa3;
  opacity: 1;
}

/* ===== v5.27（Lucas）：總覽頁「純化版」配色——米色中性＋一種綠（品牌主題色 var(--accent)）＋一點金（只留「查看預算」）。
   先只套總覽頁（[data-view-panel="overview"] 範圍），其他頁面確認後再跟進。紅色只留給真的要提醒的地方（爆預算、刪除）。 ===== */
body:has([data-view-panel="overview"].is-active) {
  background: #ede6da;
}

[data-view-panel="overview"] {
  --bg: #ede6da;
  --surface: #f6f1ea;
  --surface-strong: #f6f1ea;
  --ink: #2f2b27;
  --muted: #7a726a;
  --line: #dcd3c5;
  --carbon-150: #dcd3c5;
  --acct-fade: #ede6da;
  color: var(--ink);
}

/* 本月剩多少：黑卡改暖灰（Lucas 試看 Warm Grey；色票標的 #644872 是紫色、跟色塊不符，照色塊取 #6e6862），
   裝飾光暈拿掉（爆預算時保留提醒） */
[data-view-panel="overview"] .balance-card--hero {
  background: #6e6862;
  border-color: #6e6862;
}

[data-view-panel="overview"] .balance-card--hero:not(.is-over-budget) .balance-card__leaf {
  display: none;
}

/* 暖灰底上原本的金色（#e3b04b）跟底色都偏暖、對比只有約 2.9:1，看起來髒——改淺沙金 #f5e6c4（約 4.4:1），
   爆預算的提醒光暈也改成同色、淡一點 */
[data-view-panel="overview"] .balance-card--hero .balance-card__footer-link,
[data-view-panel="overview"] .balance-card--hero.is-over-budget #monthly-living-budget-amount,
[data-view-panel="overview"] .balance-card--hero.is-over-budget #monthly-living-budget-desc {
  color: #f5e6c4;
}

[data-view-panel="overview"] .balance-card--hero .balance-card__footer-label svg {
  stroke: #f5e6c4;
}

[data-view-panel="overview"] .balance-card--hero.is-over-budget .balance-card__leaf {
  background: radial-gradient(circle, #f5e6c4 0%, #f5e6c4 55%, transparent 72%);
  opacity: 0.16;
}

/* 我的錢：深綠漸層卡改成淺米卡片＋細框，標題與提醒改暖灰／深字 */
[data-view-panel="overview"] .acct-glass .acct-glass__total {
  color: var(--ink);
  background: #f6f1ea;
  border: 1px solid #dcd3c5;
}

[data-view-panel="overview"] .acct-glass .acct-total__label {
  color: #7a726a;
  opacity: 1;
}

[data-view-panel="overview"] .acct-glass .acct-total__amount {
  color: var(--ink);
}

[data-view-panel="overview"] .acct-glass .acct-total__amount.is-negative {
  color: #a94f45;
}

[data-view-panel="overview"] .acct-glass .acct-total__row {
  color: #7a726a;
  opacity: 1;
}

[data-view-panel="overview"] .acct-glass .acct-total__debt,
[data-view-panel="overview"] .acct-glass .acct-total__warn {
  color: var(--ink);
  text-decoration-color: #b9b0a2;
}

[data-view-panel="overview"] .acct-glass .acct-debts {
  border-top-color: #dcd3c5;
}

[data-view-panel="overview"] .acct-glass .acct-debts__note,
[data-view-panel="overview"] .acct-glass .acct-debts--warn .acct-debts__note {
  color: #7a726a;
}

[data-view-panel="overview"] .acct-glass .acct-debts button {
  color: var(--ink);
  background: #ede6da;
}

[data-view-panel="overview"] .acct-glass .acct-debts b {
  color: var(--ink);
}

/* 類型篩選：一般米色，選中的用品牌綠 */
[data-view-panel="overview"] .acct-glass .acct-filter button {
  color: var(--ink);
  background: #e5ddd0;
}

[data-view-panel="overview"] .acct-glass .acct-filter button.is-on {
  color: #fff;
  background: var(--accent);
  --jk-icon-main: #fff;
  --jk-icon-accent: #e9b949;
}

/* 帳戶卡片底部色條：統一品牌綠（類型看圖示就分得出來） */
[data-view-panel="overview"] .jkc {
  --jkc-strip: var(--accent);
}

/* ===== v5.28（Lucas）：總覽「本月剩多少／預算剩多少」卡片 icon（米白主體＋醬記金點綴，示意 summary-card.html） ===== */
.balance-card--hero {
  --jk-icon-main: #f6f2e8;
  --jk-icon-accent: #e9b949;
}

.balance-card--hero .balance-card__title {
  display: inline-flex;
  gap: 7px;
}

.balance-card--hero .balance-card__title > .jk-icon,
.balance-card--hero .balance-card__state-icon .jk-icon {
  flex: none;
  width: 22px;
  height: 22px;
}

.balance-card--hero .balance-card__state-icon {
  display: inline-flex;
  flex: none;
}

.balance-card--hero .balance-card__state-icon:empty {
  display: none;
}

.balance-card--hero .balance-meta span:has(> .jk-icon) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 6px;
  align-items: center;
}

.balance-card--hero .balance-meta span > .jk-icon {
  grid-row: span 2;
  align-self: start;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.balance-card--hero .balance-meta__label {
  min-width: 0;
  overflow: hidden;
  font-style: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.balance-card--hero .balance-meta span:has(> .jk-icon) b {
  min-width: 0;
  margin-top: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.balance-card--hero .balance-card__footer-label > .jk-icon {
  flex: none;
  width: 22px;
  height: 22px;
}

/* 手機版（≤639px）：一欄只有約 150px 寬——標題不換行（字、icon、間距略縮），四個小標籤改成一欄一個，數字才不會被截成「$42…」 */
@media (max-width: 639px) {
  .balance-card--hero .balance-card__title {
    gap: 4px;
    flex-wrap: nowrap;
  }

  .balance-card--hero .balance-card__title p {
    font-size: 0.95rem;
    white-space: nowrap;
  }

  .balance-card--hero .balance-card__title > .jk-icon,
  .balance-card--hero .balance-card__state-icon .jk-icon {
    width: 19px;
    height: 19px;
  }

  .balance-card--hero .balance-card__percent {
    font-size: 0.75rem;
  }

  .balance-card--hero .balance-card__info {
    flex: none;
  }

  .balance-card--hero .balance-meta:has(.jk-icon) {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  /* 沒有預算（右半邊隱藏）時左邊整張寬，收入／支出照舊左右並排 */
  .balance-card--hero:has(#monthly-living-budget[hidden]) .balance-meta:has(.jk-icon) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== v5.29（Lucas 設計稿 budget-usage.html A 方案）：總覽「預算使用狀態」清單＋進度條，手機、桌機同一套 =====
   原本 640px 以下顯示圓環、以上顯示長條的切換拿掉。綠＝品牌主題色；金色斜紋＝挪用的錢；深金字 #8a6418＝挪用說明。 */
#overview-budgets {
  display: block;
  --jk-icon-main: var(--accent);
  --jk-icon-accent: #e9b949;
}

#overview-budgets[hidden] {
  display: none;
}

#overview-budget-panel .overview-budget-adjust {
  color: var(--accent);
  font-weight: 700;
}

.obu-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 4px;
}

.obu-total span {
  color: var(--muted);
  font-size: 0.82rem;
}

.obu-total b {
  font-size: 0.95rem;
}

.obu-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: 6px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.obu-rows .obu-row:first-child {
  border-top: 0;
}

.obu-row__icon {
  display: flex;
  grid-row: span 2;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent) 9%, #fff);
}

.obu-row__icon svg {
  width: 26px;
  height: 26px;
}

.obu-row__name {
  min-width: 0;
  font-size: 1rem;
  font-weight: 750;
}

.obu-row__name small {
  margin-left: 6px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.obu-row__main {
  text-align: right;
  line-height: 1.25;
}

.obu-row__main b {
  display: block;
  font-size: 1.05rem;
  white-space: nowrap;
}

.obu-row__main small {
  color: var(--muted);
  font-size: 0.75rem;
}

.obu-row[data-state="ok"] .obu-row__main b {
  color: var(--accent);
}

.obu-row[data-state="warn"] .obu-row__main b {
  color: var(--warning-ink, #6b4a12);
}

.obu-row[data-state="covered"] .obu-row__main b {
  color: #8a6418;
}

.obu-row[data-state="over"] .obu-row__main b {
  color: var(--danger);
}

.obu-row[data-state="empty"] .obu-row__main b {
  color: var(--muted);
  font-weight: 600;
}

.obu-bar {
  position: relative;
  grid-column: 2 / 4;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #ebe6da;
}

.obu-bar i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
}

.obu-bar__own {
  background: var(--accent);
}

.obu-row[data-state="warn"] .obu-bar__own {
  background: var(--warning, #c9862b);
}

.obu-row[data-state="over"]:not(:has(.obu-bar__borrow)) .obu-bar__own,
.obu-bar__over {
  background: var(--danger);
}

.obu-bar__borrow,
.obu-legend__borrow {
  background: repeating-linear-gradient(135deg, #d9b25e 0 5px, #e9c97f 5px 10px);
}

.obu-sub {
  display: flex;
  flex-wrap: wrap;
  grid-column: 2 / 4;
  justify-content: space-between;
  gap: 4px 12px;
  color: var(--muted);
  font-size: 0.78rem;
}

.obu-sub__note {
  color: #8a6418;
  font-weight: 650;
}

.obu-flow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 11px 12px;
  font-size: 0.85rem;
  background: #faf3e3;
  border-radius: 14px;
}

.obu-flow > .jk-icon {
  flex: none;
  width: 24px;
  height: 24px;
}

.obu-flow b {
  font-weight: 750;
}

.obu-flow__link {
  flex: none;
  margin-left: auto;
  padding: 0;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  background: none;
  border: 0;
  cursor: pointer;
}

.obu-legend {
  display: flex;
  gap: 14px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.75rem;
}

.obu-legend i {
  display: inline-block;
  width: 12px;
  height: 8px;
  margin-right: 5px;
  vertical-align: middle;
  border-radius: 2px;
}

.obu-legend__own {
  background: var(--accent);
}

/* ===== v5.30（Lucas：卡片陰影左右被框切掉）=====
   疊卡場景為了滑動時卡片不超出畫面用了 overflow-x: clip，裁切框剛好跟卡片一樣寬，左右陰影就被切成一塊方框。
   裁切框往左右各多留 16px（用負邊界＋同寬內距，卡片位置與寬度不變），陰影就能完整淡出。 */
.acct-glass .acct-scene {
  width: auto;
  margin-inline: -16px;
  padding-inline: 16px;
}

@media (min-width: 960px) {
  .acct-glass .acct-scene {
    width: calc(100% + 32px);
  }
}


/* ===== v5.31（Lucas，設計稿 my-money.html）：「我的錢」合計卡改版 =====
   錢包 icon 標題、存款分布條、存款／欠款／帳戶三格、負餘額提醒列。卡片底色、圓角、內距沿用目前的 #acct-total，
   裡面全部用新的 .mm* 類別（跟舊的 .acct-total__*、.acct-debts* 不共用），並用 #acct-total 提高權重。
   #acct-total 是 container：手機太窄時三格改成「icon＋標籤」在上、數字在下，不會換行擠壞。 */
#acct-total {
  --jk-icon-main: #0e6b5c;
  --jk-icon-accent: #e9b949;
  container-type: inline-size;
}

#acct-total .mm {
  display: grid;
  min-width: 0;
  color: #191a18;
}

#acct-total .mm-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6d6d66;
  font-size: 0.9rem;
  font-weight: 700;
}

#acct-total .mm-head .jk-icon {
  flex: none;
  width: 22px;
  height: 22px;
}

#acct-total .mm-amount {
  display: block;
  margin: 4px 0 12px;
  color: #191a18;
  font-size: clamp(1.9rem, 10cqw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

#acct-total .mm-amount.is-negative {
  color: #a94f45;
}

#acct-total .mm-amount small {
  margin-right: 6px;
  font-size: 0.5em;
  font-weight: 800;
}

/* 存款分布條：依帳戶類型分段，段與段之間 2px 縫；太小的段至少留 4px 才看得到 */
#acct-total .mm-bar {
  display: flex;
  height: 10px;
  gap: 2px;
  overflow: hidden;
  background: #ebe6da;
  border-radius: 999px;
}

#acct-total .mm-bar i {
  display: block;
  min-width: 4px;
  height: 100%;
}

#acct-total .mm-leg {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 8px 0 14px;
  color: #6d6d66;
  font-size: 0.78rem;
}

#acct-total .mm-leg span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

#acct-total .mm-leg .jk-icon {
  flex: none;
  width: 16px;
  height: 16px;
}

#acct-total .mm-leg b {
  color: #191a18;
  font-weight: 700;
}

#acct-total .mm-leg i {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

/* 三格數字：上面一條細線，格與格之間細直線 */
#acct-total .mm-stats {
  display: grid;
  /* 三等分；但每格至少放得下自己的內容（icon＋數字），數字絕不截斷 */
  grid-template-columns: repeat(3, minmax(max-content, 1fr));
  border-top: 1px solid #e5dfd2;
}

#acct-total .mm-stats--one {
  grid-template-columns: minmax(0, 1fr);
}

#acct-total .mm-st {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 6px;
  margin: 0;
  padding: 12px 8px 4px 0;
  color: inherit;
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 0;
}

#acct-total .mm-st + .mm-st {
  padding-left: 12px;
  border-left: 1px solid #e5dfd2;
}

#acct-total .mm-st__ic {
  display: flex;
  grid-row: span 2;
}

#acct-total .mm-st__ic:empty {
  display: none;
}

#acct-total .mm-st .jk-icon {
  flex: none;
  width: 24px;
  height: 24px;
}

#acct-total .mm-st em {
  color: #6d6d66;
  font-size: 0.78rem;
  font-style: normal;
  white-space: nowrap;
}

#acct-total .mm-st b {
  font-size: clamp(0.8rem, 4.2cqw, 1rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#acct-total .mm-st b.is-sm {
  font-size: clamp(0.72rem, 3.6cqw, 0.9rem);
}

#acct-total .mm-st b.is-xs {
  font-size: clamp(0.66rem, 3.1cqw, 0.8rem);
}

#acct-total .mm-st b.is-negative {
  color: #a94f45;
}

#acct-total .mm-st--btn {
  cursor: pointer;
}

#acct-total .mm-st--btn em::after {
  content: " ›";
  color: #0e6b5c;
  font-weight: 700;
}

#acct-total .mm-st--btn[aria-expanded="true"] em::after {
  content: " ⌄";
}

/* 容器太窄（小手機）：icon＋標籤在上一行、數字獨佔下一行，數字才放得下 */
@container (max-width: 300px) {
  #acct-total .mm-st {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 2px;
  }

  #acct-total .mm-st__ic {
    grid-row: auto;
  }

  #acct-total .mm-st .jk-icon {
    width: 20px;
    height: 20px;
  }

  #acct-total .mm-st b {
    grid-column: 1 / -1;
  }

  #acct-total .mm-st + .mm-st {
    padding-left: 8px;
  }
}

/* 負餘額提醒列：整條淡黃底按鈕 */
#acct-total .mm-warn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 12px 0 0;
  padding: 10px 12px;
  color: #6b4a12;
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  background: #faf0dc;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
}

#acct-total .mm-warn .jk-icon {
  flex: none;
  width: 24px;
  height: 24px;
}

#acct-total .mm-warn b {
  font-weight: 800;
}

#acct-total .mm-warn__ch {
  margin-left: auto;
  font-weight: 800;
  transition: transform 0.2s ease;
}

#acct-total .mm-warn[aria-expanded="true"] .mm-warn__ch {
  transform: rotate(90deg);
}

/* 展開的清單（欠款、負餘額共用） */
#acct-total .mm-list {
  margin-top: 8px;
  padding: 4px 4px 2px;
}

#acct-total .mm-list p {
  margin: 4px 8px 6px;
  color: #6d6d66;
  font-size: 0.78rem;
  line-height: 1.5;
}

#acct-total .mm-list ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#acct-total .mm-li {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 9px 8px;
  color: inherit;
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-top: 1px solid #e5dfd2;
  border-radius: 0;
  cursor: pointer;
}

#acct-total .mm-list li:first-child .mm-li {
  border-top: 0;
}

#acct-total .mm-li__ic {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: #eef4f1;
  border-radius: 11px;
}

#acct-total .mm-li__ic .jk-icon {
  width: 22px;
  height: 22px;
}

#acct-total .mm-li__n {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  line-height: 1.3;
}

#acct-total .mm-li__n small {
  display: block;
  color: #6d6d66;
  font-size: 0.75rem;
  font-weight: 500;
}

#acct-total .mm-li b {
  flex: none;
  color: #a94f45;
  font-variant-numeric: tabular-nums;
}

#acct-total .mm-li__go {
  flex: none;
  color: #0e6b5c;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

#acct-total .mm button:focus-visible {
  outline: 2px solid #0e6b5c;
  outline-offset: 2px;
}


/* ===== v5.32（Lucas，選定「B1 白瓷實體卡」）：帳戶卡片重新設計 =====
   實體卡比例（358×226）、icon 直接放在卡面上（不加色框）、金色晶片＋感應符號、壓印感的末四碼、信用卡卡別標誌、
   近 7 天走勢、最下面一條「最近一筆」。類型顏色只用在最近一筆那條和走勢線。
   前面那些 .jkc__top／.jkc__emv／.jkc__amt… 是舊版正面的樣式，正面不再使用它們（背面、編輯畫面還是用 .jkc__ic、.jkc__gbtn 等）。 */
.jkc {
  height: 226px;
  max-width: 440px;
  margin-inline: auto;
  container-type: inline-size;
}

.jkc-stack > .acct-swipe-hint {
  height: 228px;
}

/* 白瓷卡面：極淡的同心圓防偽紋＋斜線、斜向反光、立體邊緣 */
.jkc:not(.has-cover) {
  background:
    linear-gradient(118deg, rgb(255 255 255 / 0%) 34%, rgb(255 255 255 / 52%) 44%, rgb(255 255 255 / 0%) 54%),
    radial-gradient(120% 75% at 12% 0%, rgb(255 255 255 / 95%) 0%, rgb(255 255 255 / 0%) 62%),
    repeating-radial-gradient(circle at 100% 0%, rgb(14 107 92 / 6%) 0 1px, rgb(255 255 255 / 0%) 1px 7px),
    repeating-linear-gradient(118deg, rgb(120 100 70 / 4%) 0 1px, rgb(255 255 255 / 0%) 1px 6px),
    linear-gradient(160deg, #fffdf8 0%, #f1ebe0 100%);
  border-color: rgb(25 26 24 / 11%);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -2px 0 rgb(120 100 70 / 20%),
    0 1px 2px rgb(25 26 24 / 8%),
    0 14px 28px rgb(25 26 24 / 17%);
}

/* 原本底部那條類型色帶換成「最近一筆」那條；翻到背面（看交易、編輯）時還是用色帶 */
.jkc:not(.show-back)::after {
  display: none;
}

.jkc:not(.show-back) .jkc__face--front {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.jkf-top {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  height: 62px;
  padding: 14px 16px 0;
}

.jkf-ic {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
}

.jkf-ic .jk-icon {
  width: 100%;
  height: 100%;
}

.jkf-tt {
  display: grid;
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}

.jkf-nm {
  overflow: hidden;
  font-size: 1.05rem;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.jkf-ty {
  overflow: hidden;
  color: #6d6d66;
  font-size: 0.78rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.jkf-pk {
  display: none;
  margin-left: auto;
  font-size: 0.95rem;
  font-weight: 750;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.jkf-edit {
  flex: none;
  padding: 6px 12px;
  color: #191a18;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  background: #f3eee4;
  border: 1px solid #ddd6c7;
  border-radius: 999px;
}

/* 疊在後面的卡只露出卡頂：名稱＋金額 */
.jkc:not(.is-front) .jkf-top {
  height: 44px;
  padding-top: 9px;
}

.jkc:not(.is-front) .jkf-ic {
  width: 26px;
  height: 26px;
}

.jkc:not(.is-front) .jkf-pk {
  display: block;
}

.jkc:not(.is-front) .jkf-edit,
.jkc:not(.is-front) .jkf-ty {
  display: none;
}

.jkf-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
  padding: 4px 18px 8px;
}

.jkf-body.is-plain {
  justify-content: center;
  gap: 8px;
}

.jkf-chiprow {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
}

.jkf-chip {
  width: 44px;
  height: 32px;
}

.jkf-nfc {
  width: 20px;
  height: 20px;
  opacity: 0.55;
}

.jkf-row2 {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.jkf-amt {
  min-width: 0;
  font-size: clamp(1.5rem, 9cqw, 2.1rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.jkf-amt small {
  margin-right: 6px;
  color: #a94f45;
  font-size: 1rem;
  font-weight: 800;
}

.jkf-spark {
  flex: none;
  width: 86px;
  height: 30px;
  margin-bottom: 3px;
}

.jkf-spark__area {
  fill: color-mix(in srgb, var(--jkc-strip) 14%, transparent);
}

.jkf-spark__line {
  fill: none;
  stroke: var(--jkc-strip);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.jkf-spark__dot {
  fill: #fff;
  stroke: var(--jkc-strip);
  stroke-width: 2;
}

.jkf-row3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 24px;
}

/* 壓印感：上方一道白光、下方一道暗影，像卡片上凸起的壓字 */
.jkf-no {
  color: #8d887a;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-shadow: 0 1px 0 #fff, 0 -1px 0 rgb(0 0 0 / 22%);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.jkf-net {
  display: flex;
  flex: none;
  align-items: center;
  height: 24px;
}

.jkf-net svg {
  width: auto;
  height: 24px;
}

.jkf-band {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 18px;
  font-size: 0.82rem;
  background: color-mix(in srgb, var(--jkc-strip) 9%, #f4efe6);
  border-top: 1px solid color-mix(in srgb, var(--jkc-strip) 24%, transparent);
}

.jkf-band__lab,
.jkf-band__d {
  flex: none;
  color: #6d6d66;
  font-size: 0.76rem;
}

.jkf-band__t {
  min-width: 0;
  overflow: hidden;
  font-weight: 650;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.jkf-band b {
  flex: none;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.jkf-band b.is-in {
  color: #0e6b5c;
}

.jkf-band.is-empty .jkf-band__t {
  color: #6d6d66;
  font-weight: 500;
}

/* 卡片太窄（小手機）：走勢圖先收起來，數字才放得下 */
@container (max-width: 300px) {
  .jkf-spark {
    display: none;
  }

  .jkf-top {
    gap: 9px;
    padding-inline: 12px;
  }

  .jkf-band {
    padding-inline: 12px;
  }
}

/* 有自訂封面圖：照片鋪滿、疊暗色漸層，文字改白色 */
.jkc.has-cover .jkf-nm,
.jkc.has-cover .jkf-amt,
.jkc.has-cover .jkf-pk,
.jkc.has-cover .jkf-band,
.jkc.has-cover .jkf-band__t,
.jkc.has-cover .jkf-band b {
  color: #fffdf8;
}

.jkc.has-cover .jkf-ty,
.jkc.has-cover .jkf-band__lab,
.jkc.has-cover .jkf-band__d {
  color: rgb(255 253 248 / 82%);
}

.jkc.has-cover .jkf-no {
  color: rgb(255 253 248 / 90%);
  text-shadow: 0 1px 2px rgb(0 0 0 / 45%);
}

.jkc.has-cover .jkf-amt small {
  color: #ffb4a8;
}

.jkc.has-cover .jkf-edit {
  color: #fffdf8;
  background: rgb(255 255 255 / 16%);
  border-color: rgb(255 255 255 / 36%);
}

.jkc.has-cover .jkf-band {
  background: rgb(0 0 0 / 34%);
  border-top-color: rgb(255 255 255 / 20%);
}

.jkc.has-cover .jkf-band b.is-in {
  color: #9ee6cf;
}

.jkc.has-cover .jkf-spark__line {
  stroke: #fffdf8;
}

.jkc.has-cover .jkf-spark__area {
  fill: rgb(255 255 255 / 16%);
}

.jkc.has-cover .jkf-spark__dot {
  stroke: #fffdf8;
}

.jkc.has-cover .jkf-net {
  padding: 2px 8px;
  background: rgb(255 255 255 / 92%);
  border-radius: 7px;
}

/* ===== 新增／編輯信用卡的「卡別」單選 ===== */
#simple-form .card-brand-field {
  display: grid;
  gap: 8px;
}

#simple-form .card-brand-field__lab {
  color: #6d6d66;
  font-size: 0.8rem;
  font-weight: 700;
}

#simple-form .card-brand-field__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#simple-form .card-brand {
  position: relative;
  display: inline-flex;
  margin: 0;
}

#simple-form .card-brand input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  opacity: 0;
}

#simple-form .card-brand span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 12px;
  color: #191a18;
  font-size: 0.85rem;
  font-weight: 650;
  background: #f3eee4;
  border: 1.5px solid #ddd6c7;
  border-radius: 14px;
}

#simple-form .card-brand svg {
  width: auto;
  height: 22px;
}

#simple-form .card-brand input:checked + span {
  background: #e3f1ed;
  border-color: #0e6b5c;
  box-shadow: 0 0 0 1px #0e6b5c inset;
}

#simple-form .card-brand input:focus-visible + span {
  outline: 2px solid #0e6b5c;
  outline-offset: 2px;
}


/* ===== v5.33：修「我的錢」卡片內容只佔 3/4 寬（iPhone 實拍）=====
   舊的 .acct-total 留著 justify-content: space-between，#acct-total 現在是 grid，這個設定讓唯一那一欄不會被撐滿、
   只剩內容的寬度（金額小、帳戶少的時候最明顯）。明確指定「一欄、撐滿」，不再依賴瀏覽器怎麼解讀。 */
#acct-total {
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
}

#acct-total .mm {
  width: 100%;
}

/* ===== v5.36（Lucas）：記帳列改成「液態玻璃」細長膠囊＋表單底部很淡的流光 =====
   只動記帳表單最底下那一列（記帳＋麥克風）與表單底部的背景，其他按鈕、欄位都不碰。
   膠囊是 .dialog-actions 第一列後面的兩層偽元素（霧面玻璃＋彩色亮邊）：用偽元素而不是把整個容器變膠囊，
   是因為編輯舊交易時「刪除」鈕會出現在同一個容器的下一列，不能被包進膠囊裡。 */
@keyframes jkEntryGlow {
  0%   { background-position: 0% 100%, 100% 92%, 50% 100%, 0 0; background-size: 250px 140px, 230px 130px, 270px 130px, 100% 100%; }
  25%  { background-position: 45% 90%, 60% 100%, 100% 94%, 0 0; background-size: 300px 150px, 260px 120px, 230px 140px, 100% 100%; }
  50%  { background-position: 100% 100%, 0% 90%, 15% 100%, 0 0; background-size: 250px 130px, 230px 150px, 280px 120px, 100% 100%; }
  75%  { background-position: 55% 94%, 75% 100%, 0% 92%, 0 0; background-size: 290px 140px, 250px 130px, 240px 140px, 100% 100%; }
  100% { background-position: 0% 100%, 100% 92%, 50% 100%, 0 0; background-size: 250px 140px, 230px 130px, 270px 130px, 100% 100%; }
}
/* 表單底部流光：三團很淡的柔光慢慢飄移（5 秒一圈）。背景畫在卡片自己身上，表單其他區塊都是不透明的，
   所以只有記帳膠囊後面（玻璃透出來的地方）看得到。這張卡只有記帳視窗開著時才存在，視窗關了動畫就停。 */
#entry-dialog .dialog-card.entry-simple {
  background-color: var(--surface);
  background-image:
    radial-gradient(closest-side, rgb(30 150 132 / 62%), rgb(30 150 132 / 0%)),
    radial-gradient(closest-side, rgb(250 172 40 / 56%), rgb(250 172 40 / 0%)),
    radial-gradient(closest-side, rgb(100 165 240 / 54%), rgb(100 165 240 / 0%)),
    linear-gradient(180deg, var(--surface) 0%, var(--surface) 78%, color-mix(in srgb, var(--accent) 8%, var(--surface)) 100%);
  background-repeat: no-repeat;
  background-size: 250px 140px, 230px 130px, 270px 130px, 100% 100%;
  background-position: 0% 100%, 100% 100%, 50% 100%, 0 0;
  animation: jkEntryGlow 5s ease-in-out infinite;
}

#entry-dialog #entry-form.entry-simple > .dialog-actions {
  position: relative;
  align-items: center;
  gap: 8px;
  padding: 4px;
  margin-top: 12px; /* 膠囊跟上面的「分帳／固定收支」拉開距離（Lucas：不要貼在一起） */
}
#entry-dialog #entry-form.entry-simple > .dialog-actions:has(> #entry-voice-button:not([hidden])) {
  grid-template-columns: minmax(0, 1fr) 54px;
  column-gap: 8px;
}
/* 膠囊本體（第一列、48px 高）：霧面玻璃＋內側高光＋柔和陰影 */
#entry-dialog #entry-form.entry-simple > .dialog-actions::before,
#entry-dialog #entry-form.entry-simple > .dialog-actions::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 0;
  height: 48px;
  border-radius: 999px;
  pointer-events: none;
}
#entry-dialog #entry-form.entry-simple > .dialog-actions::before {
  background: linear-gradient(180deg, rgb(255 255 255 / 55%), rgb(255 255 255 / 18%));
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 65%),
    inset 0 2px 3px rgb(255 255 255 / 90%),
    inset 0 -2px 4px rgb(60 90 80 / 18%),
    0 10px 22px rgb(40 70 60 / 20%);
}
/* 彩色亮邊：上緣一小段黃綠、粉紫折光（只有 1px 的邊） */
#entry-dialog #entry-form.entry-simple > .dialog-actions::after {
  padding: 1px;
  background: linear-gradient(100deg, rgb(190 255 150 / 0%) 20%, rgb(190 255 150 / 85%) 45%, rgb(255 190 230 / 70%) 62%, rgb(255 255 255 / 0%) 80%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0.8;
}
/* 「記帳」：透明底、深色字，坐在玻璃上 */
#entry-dialog #entry-form.entry-simple > .dialog-actions > #save-entry {
  position: relative;
  z-index: 1;
  height: 40px;
  min-height: 0;
  color: color-mix(in srgb, var(--accent-strong) 55%, var(--primary));
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  background: transparent;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* 麥克風：品牌深綠、邊緣柔霧的圓角鈕（不用黑色） */
#entry-dialog #entry-form.entry-simple > .dialog-actions > #entry-voice-button {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 40px;
  min-height: 0;
  color: var(--ivory-100);
  background: radial-gradient(70% 90% at 50% 40%, color-mix(in srgb, var(--accent-bright) 45%, var(--accent-strong)) 0%, color-mix(in srgb, var(--accent-bright) 20%, var(--accent-strong)) 55%, color-mix(in srgb, var(--accent-bright) 20%, var(--accent-strong)) 100%);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 0 10px 4px rgb(31 91 78 / 38%), inset 0 1px 2px rgb(255 255 255 / 28%);
}
#entry-dialog #entry-form.entry-simple > .dialog-actions > #entry-voice-button svg { width: 19px; height: 19px; stroke-width: 2; }
#entry-dialog #entry-form.entry-simple > .dialog-actions > #save-entry:active,
#entry-dialog #entry-form.entry-simple > .dialog-actions > #entry-voice-button:active { transform: translateY(1px) scale(0.985); }
#entry-dialog #entry-form.entry-simple > .dialog-actions > #delete-entry { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  #entry-dialog .dialog-card.entry-simple { animation: none; }
}

/* ===== v5.37（Lucas）：主選單改成深綠玻璃，中間「＋」圓鈕改成品牌綠半透明（68%、無漸層） =====
   只動主選單（手機底部那條）：選單本體半透明、後面的內容會被模糊透出來，邊緣一圈亮邊加上緣的黃綠／粉紫折光，
   跟記帳列（v5.36）同一種玻璃語言。圖示與文字顏色沿用原本的 --dock-ink／--dock-selected，不改。
   外陰影用 .mobile-nav__base 自己的 box-shadow（box-shadow 只畫在框外，玻璃底下和中央圓鈕那塊不會有）；不能用 filter:drop-shadow——
   filter 會讓裡面 ::before 的 backdrop-filter 只看得到 .mobile-nav__base 裡面的東西，模糊就失效了。 */
@media (max-width: 959px) {
  body .mobile-nav__base {
    box-shadow: 0 10px 18px rgb(20 60 50 / 30%);
  }
  body .mobile-nav__base::before {
    border: 0;
    background:
      linear-gradient(180deg, rgb(255 255 255 / 16%) 0%, rgb(255 255 255 / 0%) 45%),
      linear-gradient(120deg, color-mix(in srgb, color-mix(in srgb, var(--accent-bright) 30%, var(--accent-strong)) 36%, transparent), color-mix(in srgb, color-mix(in srgb, var(--accent-bright) 8%, var(--accent-strong)) 46%, transparent));
    backdrop-filter: blur(9px) saturate(160%) brightness(0.84);
    -webkit-backdrop-filter: blur(9px) saturate(160%) brightness(0.84);
    box-shadow:
      inset 0 0 0 1px rgb(255 255 255 / 30%),
      inset 0 2px 3px rgb(255 255 255 / 45%),
      inset 0 -3px 6px rgb(5 30 25 / 35%);
  }
  /* 彩色亮邊：1px 邊框上一小段黃綠、粉紫折光 */
  .mobile-nav__base::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(100deg, rgb(190 255 150 / 0%) 12%, rgb(190 255 150 / 90%) 34%, rgb(255 190 230 / 75%) 52%, rgb(255 255 255 / 0%) 72%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: 0.85;
  }
  /* 中間「＋」：品牌綠 68%、純色（沒有漸層與高光）、自己也做背景模糊；外圈一圈很淡的白邊讓它跟選單分開 */
  body .mobile-nav .mobile-nav__add {
    color: #fff;
    background: color-mix(in srgb, var(--accent) 68%, transparent);
    background-image: none;
    background-clip: padding-box;
    border: 0;
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    box-shadow: 0 0 0 3px rgb(255 255 255 / 30%), 0 8px 16px rgb(20 60 50 / 22%);
  }
  body .mobile-nav .mobile-nav__add:active {
    background-color: color-mix(in srgb, var(--accent) 82%, transparent);
    box-shadow: 0 0 0 3px rgb(255 255 255 / 30%), 0 4px 10px rgb(20 60 50 / 22%);
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 959px) {
    body .mobile-nav__base::before { background: color-mix(in srgb, var(--accent-strong) 94%, transparent); }
    body .mobile-nav .mobile-nav__add { background-color: var(--accent); }
  }
}

/* ===== v5.38（Lucas）：好友分帳群組裡的底部選單（分帳紀錄／結算／成員／設定收款）也改成跟主選單同一種深綠玻璃 =====
   材質、顏色、透明度都跟 v5.37 的主選單一樣；圖示與文字顏色沿用 .split-detail-tabs 原本的 --dock-ink／--dock-selected。
   外陰影一樣用容器自己的 box-shadow（不用 filter，否則 ::before 的 backdrop-filter 會失效）。 */
.split-detail-tabs {
  box-shadow: 0 10px 18px rgb(20 60 50 / 30%);
}
.split-detail-tabs::before {
  border: 0;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 16%) 0%, rgb(255 255 255 / 0%) 45%),
    linear-gradient(120deg, color-mix(in srgb, color-mix(in srgb, var(--accent-bright) 30%, var(--accent-strong)) 36%, transparent), color-mix(in srgb, color-mix(in srgb, var(--accent-bright) 8%, var(--accent-strong)) 46%, transparent));
  backdrop-filter: blur(9px) saturate(160%) brightness(0.84);
  -webkit-backdrop-filter: blur(9px) saturate(160%) brightness(0.84);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 30%),
    inset 0 2px 3px rgb(255 255 255 / 45%),
    inset 0 -3px 6px rgb(5 30 25 / 35%);
}
.split-detail-tabs::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(100deg, rgb(190 255 150 / 0%) 12%, rgb(190 255 150 / 90%) 34%, rgb(255 190 230 / 75%) 52%, rgb(255 255 255 / 0%) 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0.85;
}
/* 中間「＋」：跟主選單一樣——品牌綠 68%、純色無漸層、blur 10px、白色 ＋、外圈 30% 白邊 */
.split-detail-tabs .split-detail-tabs__add {
  color: #fff;
  background: color-mix(in srgb, var(--accent) 68%, transparent);
  background-image: none;
  background-clip: padding-box;
  border: 0;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 0 0 3px rgb(255 255 255 / 30%), 0 8px 16px rgb(20 60 50 / 22%);
}
.split-detail-tabs .split-detail-tabs__add:active {
  background-color: color-mix(in srgb, var(--accent) 82%, transparent);
  box-shadow: 0 0 0 3px rgb(255 255 255 / 30%), 0 4px 10px rgb(20 60 50 / 22%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .split-detail-tabs::before { background: color-mix(in srgb, var(--accent-strong) 94%, transparent); }
  .split-detail-tabs .split-detail-tabs__add { background-color: var(--accent); }
}

/* ===== v5.39（Lucas）：①編輯卡片不要有白色光暈 ②帳戶頁（瀏覽全部）改用最新卡片 ③新增／編輯帳戶對話框改成卡片編輯器版面 ===== */

/* ① 卡片翻開（編輯帳戶、交易背面）後，游標白光與掃光都不要；白光會蓋住字 */
.jkc.show-back .jkc__spot,
.jkc.show-back .jkc__glare,
.jkc.is-open .jkc__spot,
.jkc.is-open .jkc__glare {
  display: none;
}

/* ② 帳戶頁：每一類帳戶是一疊跟總覽一樣的疊卡（.jkc-stack；排版、左右滑動、翻背面都由 app.js 的疊卡程式負責），
   這裡只補每一疊自己的外框與頁碼。 */
/* v5.41：卡片外框不能裁切（會把左右陰影切掉）。拖曳翻卡時卡片會往旁邊飛出去，為了不讓頁面出現橫向捲動，
   改成在帳戶頁所在的 .main-content（一直到螢幕邊緣、含左右 16px 內距）用 overflow-x: clip——陰影可以畫進左右內距，飛出去的部分在螢幕邊緣才被裁。只有目前在帳戶頁時才套用。 */
.main-content:has(> .view[data-view-panel="accounts"].is-active) {
  overflow-x: clip;
}
.account-group .acct-stack-wrap {
  position: relative;
  max-width: 440px;
}
.account-group .acct-pager {
  margin-top: 8px;
}
.account-group .acct-stack-wrap.is-card-open .acct-pager {
  display: none;
}
/* 帳戶頁疊卡有好幾疊：外框不要把翻開的卡片裁掉，停用的卡灰階 */
.account-group .jkc-stack .jkc.is-disabled {
  filter: grayscale(0.9) brightness(1.06);
}

/* ③ 新增／編輯帳戶對話框＝卡片編輯器：#simple-form 本身就是那張 .dialog-card，所以直接把表單變成 .jkc
   （類型色、白瓷卡面、細線分區、大金額…整套沿用）。.jkc 原本是絕對定位的疊卡，位置、高度、游標都要還原成一般對話框。 */
#simple-form.jkc--dialog {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  display: block;
  height: auto;
  max-height: calc(100dvh - 1.25rem);
  padding: 18px 20px 22px;
  overflow-x: hidden;
  overflow-y: auto;
  cursor: auto;
  user-select: auto;
  -webkit-user-select: auto;
  container-type: normal;
  transition: none;
  transform: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* 表單裡原本的標題列、按鈕列都不要（卡片編輯器自己有標題＋取消／儲存） */
#simple-form.is-card-dialog > :not(#simple-fields) {
  display: none !important;
}
#simple-form.is-card-dialog #simple-fields {
  display: block;
  margin: 0;
  padding: 0;
}
#simple-form.is-card-dialog input,
#simple-form.is-card-dialog select,
#simple-form.is-card-dialog textarea {
  min-height: 0;
  color: inherit;
  font: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: none;
}
#simple-form.is-card-dialog select option {
  color: #191a18;
}
#simple-form.is-card-dialog .field-help,
#simple-form.is-card-dialog small {
  color: inherit;
  opacity: 0.7;
}
/* 新增帳戶：還沒有帳戶，所以沒有刪除、使用中開關 */
#simple-form.is-new-account .jkc-del,
#simple-form.is-new-account .jkc-row {
  display: none;
}

/* ===== v5.42（Lucas）：簽帳金融卡「圈存」 =====
   ① 玻璃質感的開關（照 Lucas 給的參考圖：透明膠囊底座＋白色亮面圓鈕；打開＝品牌綠玻璃、圓鈕滑到右邊）
   ② 帳戶設定的「支援簽帳」列、記帳表單的「簽帳」列
   ③ 帳戶卡片：圈存中小標、背面的圈存清單；明細列表的「圈存中」標籤；「我的錢」下面的超過 5 天提醒 */
.glass-switch {
  position: relative;
  display: inline-flex;
  flex: none;
  width: 36px;
  height: 20px;
  vertical-align: middle;
}
/* 真正的 checkbox 疊在最上面、完全透明：點哪裡都會切換，鍵盤、螢幕閱讀器都正常 */
.glass-switch .glass-switch__input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.glass-switch__track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, rgb(255 255 255 / 70%), rgb(255 255 255 / 22%));
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 75%),
    inset 0 2px 3px rgb(255 255 255 / 90%),
    inset 0 -1px 2px rgb(60 90 80 / 22%),
    0 0 0 1px rgb(60 90 80 / 14%),
    0 2px 5px rgb(40 70 60 / 12%);
  transition: background 0.28s ease, box-shadow 0.28s ease;
}
.glass-switch__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff 0%, #f6f8f7 52%, #dde5e2 100%);
  box-shadow: 0 1px 3px rgb(25 26 24 / 30%), inset 0 -1px 2px rgb(60 90 80 / 20%);
  transition: transform 0.3s cubic-bezier(0.3, 1.35, 0.5, 1);
}
.glass-switch__input:checked + .glass-switch__track {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 34%), rgb(255 255 255 / 0%) 58%),
    color-mix(in srgb, var(--accent) 68%, transparent);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 45%),
    inset 0 2px 3px rgb(255 255 255 / 55%),
    inset 0 -2px 4px rgb(5 40 32 / 30%),
    0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent),
    0 2px 5px color-mix(in srgb, var(--accent) 26%, transparent);
}
.glass-switch__input:checked + .glass-switch__track .glass-switch__knob {
  transform: translateX(16px);
}
.glass-switch__input:focus-visible + .glass-switch__track {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .glass-switch__track,
  .glass-switch__knob { transition: none; }
}

/* 記帳表單的簽帳列：左邊「簽帳」，右邊「圈存中／一般記帳」＋開關 */
.entry-hold-switch {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  line-height: 1;
}
.entry-hold-switch b {
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 20px;
}
/* 簽帳列：跟上下列拉開一點距離；說明文字小一號、淡色、跟連結同一行，不要擠成兩三行 */
#entry-form.entry-simple #entry-form-grid > #entry-hold-field {
  row-gap: 6px;
  min-height: 0;
  padding: 14px 2px 12px;
}
#entry-hold-field .field-help {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.6;
}
#entry-hold-field .field-help .text-button {
  display: inline;
  min-height: 0;
  height: auto;
  /* 上下用 padding＋負 margin 把點擊範圍撐大（手指好按），但不佔版面、不會把這一行撐高 */
  margin: -10px 0;
  padding: 10px 2px 10px 8px;
  line-height: inherit;
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
}
#entry-form.entry-simple #entry-form-grid > #entry-hold-amount-field {
  padding-block: 10px;
}

/* 帳戶設定（含卡片裡編輯）的「支援簽帳」列 */
.hold-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
}
.hold-field__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.hold-field__text b {
  font-size: 0.95rem;
  font-weight: 700;
}
.hold-field__text small {
  font-size: 0.78rem;
  line-height: 1.4;
  opacity: 0.7;
}

/* 帳戶卡片正面：圈存中小標（跟末四碼同一列） */
.jkf-hold {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 3px 10px;
  color: color-mix(in srgb, var(--jkc-strip) 82%, #191a18);
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
  background: color-mix(in srgb, var(--jkc-strip) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--jkc-strip) 28%, transparent);
  border-radius: 999px;
}
.jkf-hold.is-stale {
  color: #8a5a00;
  background: #fff4d6;
  border-color: #e9c46a;
}

/* 帳戶卡片背面：可用／帳面小字＋圈存清單 */
.jkc-bal__sub {
  margin: -2px 0 8px;
  font-size: 0.76rem;
  opacity: 0.75;
}
.jkc-hold {
  margin: 4px 0 10px;
  padding: 10px 12px 8px;
  background: rgb(14 107 92 / 7%);
  border: 1px solid rgb(14 107 92 / 18%);
  border-radius: 14px;
}
.jkc-hold__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.jkc-hold__head b {
  font-size: 0.86rem;
}
.jkc-hold__head small {
  font-size: 0.72rem;
  opacity: 0.7;
}
.jkc-hold ul {
  display: grid;
  gap: 4px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
.jkc-hold__item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.jkc-hold__row {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 6px 0;
  color: inherit;
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
.jkc-hold__t {
  display: grid;
  min-width: 0;
  font-size: 0.88rem;
  font-weight: 700;
}
.jkc-hold__t small {
  font-size: 0.72rem;
  font-weight: 500;
  opacity: 0.7;
}
.jkc-hold__item.is-stale .jkc-hold__t small {
  color: #8a5a00;
  font-weight: 700;
  opacity: 1;
}
.jkc-hold__row b {
  flex: none;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.jkc-hold__ok,
#acct-total .mm-li__btn {
  flex: none;
  padding: 6px 14px;
  color: #fff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  background: color-mix(in srgb, var(--accent) 88%, #000);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

/* 明細列表的「圈存中」標籤 */
.receipt-tag.hold-tag {
  color: #8a5a00;
  background: #fff4d6;
}
#acct-total .mm-li--hold {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.reconciliation-hold-hint {
  margin: -2px 0 8px;
  line-height: 1.5;
}

/* v5.42（Lucas：選單再透視一點）：玻璃底色透明度從 62～70% 降到 36～46%，後面的內容透得更明顯；
   同時把玻璃後面的畫面壓暗一點（brightness 0.82）並給圖示、文字淡淡的陰影，透出白色卡片時米白字也看得清楚。 */
@media (max-width: 959px) {
  .mobile-nav .mobile-nav__page > button,
  .mobile-nav .mobile-nav__home {
    text-shadow: 0 1px 3px rgb(5 40 32 / 55%);
  }
  .mobile-nav .mobile-nav__page .nav-icon,
  .mobile-nav .mobile-nav__page .menu-icon,
  .mobile-nav .mobile-nav__home .nav-icon {
    filter: drop-shadow(0 1px 2px rgb(5 40 32 / 50%));
  }
}
.split-detail-tabs__tab {
  text-shadow: 0 1px 3px rgb(5 40 32 / 55%);
}
.split-detail-tabs__tab .nav-icon {
  filter: drop-shadow(0 1px 2px rgb(5 40 32 / 50%));
}

/* v5.43：語音記帳面板的柔光律動——很淡的薄荷／琥珀／淺藍光斑緩緩飄移，墊在文字下面。 */
#voice-quick-dialog .voice-quick {
  isolation: isolate;
  /* v5.127：橫向仍裁掉柔光，縱向改成可捲——展開「偵錯模式」後內容比面板高，原本 hidden 會把診斷按鈕切掉 */
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#voice-quick-dialog .voice-quick::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse 260px 170px at 20% 78%, rgb(134 213 181 / 17%), transparent 70%),
    radial-gradient(ellipse 230px 150px at 82% 60%, rgb(233 197 135 / 11%), transparent 70%),
    radial-gradient(ellipse 240px 160px at 55% 22%, rgb(150 200 235 / 10%), transparent 70%);
  background-repeat: no-repeat;
  animation: voiceQuickGlow 7s ease-in-out infinite;
  will-change: background-position;
}
@keyframes voiceQuickGlow {
  0%, 100% { background-position: 0 0, 0 0, 0 0; opacity: .85; }
  33% { background-position: 70px -50px, -60px 40px, 40px 60px; opacity: 1; }
  66% { background-position: 110px 20px, -90px -30px, -50px 90px; opacity: .9; }
}
@media (prefers-reduced-motion: reduce) {
  #voice-quick-dialog .voice-quick::after { animation: none; }
}

/* ===== v5.43（Lucas）：語音辨識後的記帳畫面，視覺跟手動記帳統一 =====
   金額卡、欄位列（標籤在左、值靠右＋箭頭）、照片／備註圖示、簽帳開關、玻璃膠囊的「記帳」鈕，全部照手動記帳的樣子。
   只改外觀，不動語音辨識與存檔的流程。 */
#voice-quick-dialog .voice-quick:not(.is-asking-amount) .voice-quick__hero {
  gap: 0;
  padding: 10px 14px 6px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 18px;
}
#voice-quick-dialog .voice-quick:not(.is-asking-amount) .voice-quick__hero > span:first-child {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
}
#voice-quick-dialog .voice-quick:not(.is-asking-amount) .voice-quick__amount-field {
  border-bottom: 0;
}
#voice-quick-dialog .voice-quick:not(.is-asking-amount) .voice-quick__amount-field em {
  color: var(--accent-strong);
  font-size: 1.1rem;
  font-weight: 700;
}
#voice-quick-dialog .voice-quick:not(.is-asking-amount) .voice-quick__amount-field input {
  font-size: 2.4rem;
  font-weight: 700;
}

/* 欄位列：標籤在左、值靠右、最右邊箭頭 */
#voice-quick-dialog .voice-quick__cell,
#voice-quick-dialog .voice-quick__hold {
  display: grid;
  grid-template-columns: 4.6em minmax(0, 1fr) auto auto 10px;
  align-items: center;
  column-gap: 0;
  min-height: 54px;
  padding: 6px 2px;
}
#voice-quick-dialog .voice-quick__cell small,
#voice-quick-dialog .voice-quick__hold small {
  grid-column: 1;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0;
}
#voice-quick-dialog .voice-quick__cell-icon {
  display: inline-flex;
  grid-column: 2;
  justify-self: end;
  margin-right: 8px;
}
#voice-quick-dialog .voice-quick__cell-icon:empty { display: none; }
#voice-quick-dialog .voice-quick__cell-icon .jk-icon { width: 26px; height: 26px; }
#voice-quick-dialog .voice-quick__cell b,
#voice-quick-dialog .voice-quick__hold b {
  grid-column: 3;
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#voice-quick-dialog .voice-quick__cell i {
  grid-column: 4;
  margin-left: 8px;
}
#voice-quick-dialog .voice-quick__cell::after {
  grid-column: 5;
}
/* 簽帳列：跟欄位同一種列；開關是玻璃開關（跟手動記帳同一個元件） */
#voice-quick-dialog .voice-quick__hold {
  border-bottom: 1px solid rgb(31 36 33 / 8%);
}
#voice-quick-dialog .voice-quick__hold[hidden] { display: none; }
#voice-quick-dialog .voice-quick__hold .glass-switch {
  grid-column: 4 / 6;
  margin-left: 10px;
}

/* 照片／備註圖示：跟手動記帳一樣的膠囊底＋醬糰 icon */
#voice-quick-dialog .voice-quick__iconbar .entry-icon {
  width: 44px;
  height: 34px;
  min-height: 0;
  padding: 0;
  background: rgb(25 26 24 / 4%);
  border: 0;
  border-radius: 999px;
  box-shadow: none;
}
#voice-quick-dialog .voice-quick__iconbar .entry-icon .jk-icon { width: 22px; height: 22px; }
#voice-quick-dialog .voice-quick__iconbar .entry-icon[aria-expanded="true"],
#voice-quick-dialog .voice-quick__iconbar .entry-icon.has-value {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
}

/* 「記帳」：玻璃膠囊（跟手動記帳同一個）。膠囊是 .dialog-actions 的兩層偽元素，下面「手動記帳／重說」維持文字連結。 */
#voice-quick-dialog .voice-quick:has(#voice-quick-result:not([hidden])) .dialog-actions {
  position: relative;
  padding: 4px;
}
#voice-quick-dialog .voice-quick:has(#voice-quick-result:not([hidden])) .dialog-actions::before,
#voice-quick-dialog .voice-quick:has(#voice-quick-result:not([hidden])) .dialog-actions::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 0;
  height: 48px;
  border-radius: 999px;
  pointer-events: none;
}
#voice-quick-dialog .voice-quick:has(#voice-quick-result:not([hidden])) .dialog-actions::before {
  background: linear-gradient(180deg, rgb(255 255 255 / 55%), rgb(255 255 255 / 18%));
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 65%),
    inset 0 2px 3px rgb(255 255 255 / 90%),
    inset 0 -2px 4px rgb(60 90 80 / 18%),
    0 10px 22px rgb(40 70 60 / 20%);
}
#voice-quick-dialog .voice-quick:has(#voice-quick-result:not([hidden])) .dialog-actions::after {
  padding: 1px;
  background: linear-gradient(100deg, rgb(190 255 150 / 0%) 20%, rgb(190 255 150 / 85%) 45%, rgb(255 190 230 / 70%) 62%, rgb(255 255 255 / 0%) 80%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0.8;
}
#voice-quick-dialog .voice-quick:has(#voice-quick-result:not([hidden])) .dialog-actions > #voice-quick-save {
  position: relative;
  z-index: 1;
  height: 40px;
  min-height: 0;
  color: color-mix(in srgb, var(--accent-strong) 55%, var(--primary));
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  background: transparent;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
}
#voice-quick-dialog .voice-quick:has(#voice-quick-result:not([hidden])) .dialog-actions > #voice-quick-save:disabled {
  color: color-mix(in srgb, var(--accent-strong) 55%, var(--primary));
  background: transparent;
  opacity: 0.5;
}
/* 結果畫面：膠囊後面的柔光比聆聽畫面明顯一點（玻璃才看得出來），位置落在記帳膠囊附近 */
#voice-quick-dialog .voice-quick:has(#voice-quick-result:not([hidden]))::after {
  background:
    radial-gradient(closest-side, rgb(30 150 132 / 38%), rgb(30 150 132 / 0%)),
    radial-gradient(closest-side, rgb(250 172 40 / 34%), rgb(250 172 40 / 0%)),
    radial-gradient(closest-side, rgb(100 165 240 / 32%), rgb(100 165 240 / 0%));
  background-repeat: no-repeat;
  background-size: 250px 200px, 230px 190px, 270px 190px;
  background-position: 0% 100%, 100% 100%, 50% 100%;
  animation: voiceResultGlow 5s ease-in-out infinite;
}
@keyframes voiceResultGlow {
  0%, 100% { background-position: 0% 100%, 100% 96%, 50% 100%; }
  25% { background-position: 45% 94%, 60% 100%, 100% 97%; }
  50% { background-position: 100% 100%, 0% 94%, 15% 100%; }
  75% { background-position: 55% 97%, 75% 100%, 0% 95%; }
}
@media (prefers-reduced-motion: reduce) {
  #voice-quick-dialog .voice-quick:has(#voice-quick-result:not([hidden]))::after { animation: none; }
}

/* v5.43 微調：語音面板現在是米白底，醬糰 icon 用跟手動記帳一樣的品牌綠；膠囊不要滿版（拿掉舊的上緣線與負邊界），柔光再淡一點 */
#voice-quick-dialog { --jk-icon-main: #0e6b5c; }
#voice-quick-dialog .voice-quick:has(#voice-quick-result:not([hidden])) .dialog-actions {
  margin: 4px 0 0;
  border-top: 0;
}
#voice-quick-dialog .voice-quick:has(#voice-quick-result:not([hidden]))::after {
  background:
    radial-gradient(closest-side, rgb(30 150 132 / 30%), rgb(30 150 132 / 0%)),
    radial-gradient(closest-side, rgb(250 172 40 / 26%), rgb(250 172 40 / 0%)),
    radial-gradient(closest-side, rgb(100 165 240 / 26%), rgb(100 165 240 / 0%));
  background-repeat: no-repeat;
  background-size: 250px 170px, 230px 160px, 270px 160px;
}
/* 只追問金額的畫面沒有「記帳」鈕，不要留下空的玻璃膠囊；柔光回到聆聽時那種淡淡的 */
#voice-quick-dialog .voice-quick.is-asking-amount .dialog-actions::before,
#voice-quick-dialog .voice-quick.is-asking-amount .dialog-actions::after {
  display: none;
}
#voice-quick-dialog .voice-quick.is-asking-amount:has(#voice-quick-result:not([hidden]))::after {
  background:
    radial-gradient(ellipse 260px 170px at 20% 78%, rgb(134 213 181 / 17%), transparent 70%),
    radial-gradient(ellipse 230px 150px at 82% 60%, rgb(233 197 135 / 11%), transparent 70%),
    radial-gradient(ellipse 240px 160px at 55% 22%, rgb(150 200 235 / 10%), transparent 70%);
  background-repeat: no-repeat;
  background-size: auto;
  animation: voiceQuickGlow 7s ease-in-out infinite;
}

/* v5.43 修：柔光被「卡掉」（畫面上出現一條直線邊界）。原因：光斑整層用 no-repeat 搬移，搬到的時候圖層邊緣就露出來。
   改成跟手動記帳一樣——每個光斑是自己有固定大小、邊緣淡到全透明（closest-side）的圖層，怎麼飄都不會有邊；顏色也調深一點。 */
@keyframes voiceGlowDrift {
  0%, 100% { background-position: 10% 90%, 95% 55%, 55% 20%; }
  33% { background-position: 40% 70%, 70% 80%, 80% 35%; }
  66% { background-position: 75% 95%, 35% 45%, 25% 15%; }
}
#voice-quick-dialog .voice-quick::after,
#voice-quick-dialog .voice-quick.is-asking-amount:has(#voice-quick-result:not([hidden]))::after {
  background:
    radial-gradient(closest-side, rgb(30 150 132 / 34%), rgb(30 150 132 / 0%)),
    radial-gradient(closest-side, rgb(250 172 40 / 28%), rgb(250 172 40 / 0%)),
    radial-gradient(closest-side, rgb(100 165 240 / 26%), rgb(100 165 240 / 0%));
  background-repeat: no-repeat;
  background-size: 300px 230px, 280px 210px, 280px 210px;
  background-position: 10% 90%, 95% 55%, 55% 20%;
  animation: voiceGlowDrift 7s ease-in-out infinite;
  opacity: 1;
}
#voice-quick-dialog .voice-quick:has(#voice-quick-result:not([hidden])):not(.is-asking-amount)::after {
  background:
    radial-gradient(closest-side, rgb(30 150 132 / 46%), rgb(30 150 132 / 0%)),
    radial-gradient(closest-side, rgb(250 172 40 / 40%), rgb(250 172 40 / 0%)),
    radial-gradient(closest-side, rgb(100 165 240 / 38%), rgb(100 165 240 / 0%));
  background-repeat: no-repeat;
  background-size: 270px 190px, 250px 180px, 290px 180px;
  background-position: 0% 100%, 100% 100%, 50% 100%;
  animation: voiceResultGlow 5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  #voice-quick-dialog .voice-quick::after { animation: none !important; }
}

/* v5.43 實機修正：1) 照片／備註圖示置中（跑版）；2) 底部按鈕區原本有不透明底色與框線，玻璃膠囊後面看不到柔光、整塊像貼了一張框 → 全部設成透明、無框線。 */
#voice-quick-dialog .voice-quick__iconbar .entry-icon {
  align-items: center;
  justify-content: center;
}
#voice-quick-dialog .voice-quick:has(#voice-quick-result:not([hidden])) .dialog-actions,
#voice-quick-dialog .voice-quick:has(#voice-quick-result:not([hidden])) .voice-beta-foot {
  background: transparent;
  background-image: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* v5.45：語音示範底下一行小字，教怎麼指定付款帳戶（品牌綠、字小） */
#voice-quick-dialog .voice-quick__sample-tip {
  margin: 14px 0 0;
  color: #0e6b5c;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.5;
}
#voice-quick-dialog .voice-quick__sample-tip b {
  font-weight: 700;
}

/* ===== v5.47：總覽「使用者狀態」（只有管理者看得到） ===== */
.admin-activity[hidden] { display: none; }
.admin-activity__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 4px 0 12px;
}
.admin-activity__stats > div {
  display: grid;
  gap: 2px;
  padding: 10px 6px;
  text-align: center;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: 14px;
}
.admin-activity__stats b { color: var(--ink); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.admin-activity__stats span { color: var(--muted); font-size: 0.7rem; }
.admin-activity__list { display: grid; margin: 0; padding: 0; list-style: none; }
.admin-activity__row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  min-height: 54px;
  padding: 6px 2px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.admin-activity__row:last-child { border-bottom: 0; }
.admin-activity__rank { color: var(--muted); font-size: 0.8rem; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.admin-activity__who, .admin-activity__when { display: grid; min-width: 0; }
.admin-activity__who b, .admin-activity__when b { overflow: hidden; color: var(--ink); font-size: 0.95rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.admin-activity__who small, .admin-activity__when small { overflow: hidden; color: var(--muted); font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-activity__when { justify-items: end; text-align: right; }
.admin-activity__row.is-today .admin-activity__when b { color: #0e6b5c; }
.admin-activity__row.is-week .admin-activity__when b { color: #9a6a12; }
.admin-activity__row.is-old .admin-activity__when b,
.admin-activity__row.is-none .admin-activity__when b { color: var(--muted); }
.admin-activity__empty { padding: 14px 2px; color: var(--muted); font-size: 0.85rem; }
.admin-activity__more { margin-top: 6px; }

/* ===== v5.48（Lucas）：語音記帳待分類——「看全部分類」與全部分類膠囊（沿用手動記帳的 .entry-picker-list--chips） ===== */
.voice-quick__more {
  justify-self: start;
  min-height: 40px;
  padding: 0 4px;
  color: var(--accent);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 750;
  background: none;
  border: 0;
  cursor: pointer;
}

.voice-quick__more[hidden],
.voice-quick__all[hidden] {
  display: none;
}

.voice-quick__all {
  max-height: none;
  margin: 0;
}

/* ===== v5.50（Lucas）：總覽抬頭標語可換行（後台按 Enter）＋小字下面的連結 ===== */
#page-title,
#page-subtitle {
  white-space: pre-line;
}

.page-subtitle-link {
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.page-subtitle-link[hidden] {
  display: none;
}

.page-subtitle-link:hover,
.page-subtitle-link:focus-visible {
  text-decoration: underline;
}

/* ===== v5.51（Lucas）：隱藏金額（防旁人偷看）——html.amounts-hidden 時金額變圓點（●●●●），不支援的瀏覽器改模糊。
   範圍：總覽各小工具的金額＋所有交易清單的金額（明細、最近記錄、帳戶交易）。百分比、分布條保留。 ===== */
.mm-head {
  display: flex;
  align-items: center;
}

.mm-eye {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: -6px -6px -6px auto;
  padding: 0;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.mm-eye:hover,
.mm-eye:focus-visible {
  color: var(--ink);
  background: rgb(0 0 0 / 5%);
}

.mm-eye svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* v5.52（Lucas）：改成長按金額切換顯示／隱藏；遮住時小金額顯示「***」，主要大金額顯示「***長按開啟顯示***」 */
:is(#monthly-balance, #monthly-income, #monthly-expense, #monthly-living-budget-amount, #monthly-living-budget-allocated, #monthly-living-budget-spent, .metric-period-row__amount, .obu-total span, .obu-row__main b, .obu-sub span, .mm-amount, .mm-st b, .jkf-amt, .jkf-band b, .jkf-pk, #reconciliation-card-account, .transaction-amount, #unallocated-income) {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

html.amounts-hidden :is(#monthly-balance, #monthly-income, #monthly-expense, #monthly-living-budget-amount, #monthly-living-budget-allocated, #monthly-living-budget-spent, .metric-period-row__amount, .obu-total span, .obu-row__main b, .obu-sub span, .mm-amount, .mm-st b, .jkf-amt, .jkf-band b, .jkf-pk, #reconciliation-card-account, .transaction-amount, #unallocated-income) {
  position: relative;
  visibility: hidden;
}

html.amounts-hidden :is(#monthly-balance, #monthly-income, #monthly-expense, #monthly-living-budget-amount, #monthly-living-budget-allocated, #monthly-living-budget-spent, .metric-period-row__amount, .obu-total span, .obu-row__main b, .obu-sub span, .mm-amount, .mm-st b, .jkf-amt, .jkf-band b, .jkf-pk, #reconciliation-card-account, .transaction-amount, #unallocated-income)::after {
  position: absolute;
  top: 50%;
  left: 0;
  visibility: visible;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
  content: "***";
  transform: translateY(-50%);
}

html.amounts-hidden :is(.transaction-amount, .metric-period-row__amount, .obu-row__main b, .jkf-pk)::after {
  right: 0;
  left: auto;
}

html.amounts-hidden :is(#monthly-balance, #monthly-living-budget-amount, .mm-amount)::after {
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  content: "***長按開啟顯示***";
}

html.amounts-hidden .balance-card--hero :is(#monthly-balance, #monthly-income, #monthly-expense, #monthly-living-budget-amount, #monthly-living-budget-allocated, #monthly-living-budget-spent)::after {
  color: rgb(255 255 255 / 80%);
}

/* v5.55：持有庫存展開後，「獲利了結紀錄」分隔線（點一下顯示／隱藏已經賣光那段的買賣） */
.position-history__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  margin: 4px 0;
  padding: 0 8px;
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.position-history__divider::before,
.position-history__divider::after {
  content: "";
  flex: 1 1 24px;
  border-top: 1px dashed color-mix(in srgb, var(--ink) 22%, transparent);
}
.position-history__divider i {
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.position-history__divider.is-open i { margin-top: 3px; transform: rotate(-135deg); }
.position-history__closed[hidden] { display: none; }

/* v5.57：銀行明細「股票款」旁的「補登投資紀錄」按鈕 */
.bank-import-row__fill {
  min-height: 36px;
  padding: 0 14px;
  font-size: 0.85rem;
  color: #0e6b5c;
  border-color: color-mix(in srgb, #0e6b5c 35%, transparent);
  border-radius: 999px;
}

/* v5.58：庫存股數跟買賣紀錄對不上時的提示 */
.position-history__mismatch {
  display: grid;
  gap: 4px;
  margin: 0 0 8px;
  padding: 10px 12px;
  color: #7a4a05;
  font-size: 0.82rem;
  line-height: 1.5;
  background: color-mix(in srgb, #e9b949 18%, var(--surface));
  border: 1px solid color-mix(in srgb, #e9b949 40%, transparent);
  border-radius: 12px;
}
.position-history__mismatch .text-button { justify-self: start; min-height: 32px; color: #0e6b5c; font-weight: 700; }

/* v5.58：獨立的「獲利了結紀錄」區塊（每一檔一列，點開看那一段買賣） */
.closed-list { display: grid; }
.closed-group { border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.closed-group:last-child { border-bottom: 0; }
.closed-group__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 12px;
  align-items: center;
  column-gap: 10px;
  width: 100%;
  min-height: 64px;
  padding: 8px 2px;
  color: var(--ink);
  font: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.closed-group__name { display: grid; min-width: 0; }
.closed-group__name small { color: var(--muted); font-size: 0.72rem; font-weight: 600; }
.closed-group__name strong { font-size: 1rem; }
.closed-group__name em { color: var(--muted); font-size: 0.72rem; font-style: normal; }
.closed-group__gain { display: grid; justify-items: end; }
.closed-group__gain b { font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.closed-group__gain small { color: var(--muted); font-size: 0.7rem; }
.closed-group__gain.is-positive b { color: #0e6b5c; }
.closed-group__gain.is-negative b { color: #a8453a; }
.closed-group__head > i {
  width: 7px;
  height: 7px;
  border-right: 1.6px solid var(--muted);
  border-bottom: 1.6px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.closed-group__head.is-open > i { transform: rotate(-135deg); }
.closed-group__list { display: grid; padding: 0 0 8px; background: color-mix(in srgb, var(--accent) 4%, var(--surface)); border-radius: 14px; }
.closed-group__list[hidden] { display: none; }

/* ===== v5.59（Lucas）：投資頁「持有庫存」加 icon（設計稿 設計稿/分類icon/holdings.html）===== */
.position-panel__heading { display: flex; align-items: center; gap: 10px; }
.position-panel__icon {
  display: flex;
  flex: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: #eef4f1;
  border-radius: 13px;
}
.position-panel__icon .jk-icon { width: 26px; height: 26px; }

/* 總覽列：總市值／總成本／總損益 */
.position-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.position-summary__cell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 7px;
  align-items: center;
  min-width: 0;
  padding: 0 8px;
}
.position-summary__cell + .position-summary__cell { border-left: 1px solid var(--line); }
.position-summary__icon { display: flex; grid-row: span 3; }
.position-summary__icon .jk-icon { width: 22px; height: 22px; }
.position-summary__cell em { color: var(--muted); font-size: 0.72rem; font-style: normal; }
.position-summary__cell b { font-size: min(0.92rem, 3.6vw); font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.position-summary__cell small { color: var(--muted); font-size: 0.7rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.position-summary__cell b.is-positive, .position-summary__cell small.is-positive { color: var(--income-green); }
.position-summary__cell b.is-negative, .position-summary__cell small.is-negative { color: var(--danger, #a2463f); }
.position-summary__cell b.is-positive::before { content: "▲ "; font-size: 0.75em; }
.position-summary__cell b.is-negative::before { content: "▼ "; font-size: 0.75em; }
.position-summary__note { margin: 0 0 10px; color: var(--muted); font-size: 0.72rem; }

/* 每檔：左邊類型 icon，右邊代號／名稱／證券帳戶 */
.position-row__name {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 8px;
  align-items: center;
}
.position-row__ic {
  display: flex;
  grid-row: span 3;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  background: #eef4f1;
  border-radius: 10px;
}
.position-row__ic .jk-icon { width: 21px; height: 21px; }
.position-row__name > small, .position-row__name > strong, .position-row__name > em { grid-column: 2; }
.position-row__name em { white-space: normal; }
.position-row__tag {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  color: #5a4a1e;
  font-size: 10px;
  font-weight: 800;
  vertical-align: 2px;
  background: #f3e6c8;
  border-radius: 5px;
}

/* ▲▼：正數▲、負數▼（用 ::before，螢幕報讀不會重複念；aria-label 已有完整文字） */
.position-row__cell small.is-up::before,
.position-row__cell.is-positive b:not(:empty)::before,
.position-row__cell.is-positive small:not(:empty)::before { content: "▲ "; font-size: 0.75em; }
.position-row__cell small.is-down::before,
.position-row__cell.is-negative b:not(:empty)::before,
.position-row__cell.is-negative small:not(:empty)::before { content: "▼ "; font-size: 0.75em; }

/* 交易紀錄動作 icon（不能被撐開：只有文字那一欄 flex:1） */
.position-history__ai {
  display: flex;
  flex: none;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  background: #f5efe2;
  border-radius: 9px;
}
.position-history__ai .jk-icon { width: 20px; height: 20px; }
button.position-history__item .position-history__info { flex: 1 1 auto; min-width: 0; }

/* 底部說明前的資訊 icon */
.position-table__note { display: flex; align-items: flex-start; justify-content: center; gap: 8px; text-align: left; }
.position-table__info { flex: none; width: 16px; height: 16px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* v5.59 版面修正：標題靠左（舊的 space-between 把文字推到右邊）；總覽列窄螢幕不截斷 */
.position-panel__heading { justify-content: flex-start; text-align: left; }
.position-summary { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); }
.position-summary__cell { column-gap: 5px; padding: 0 6px; }
.position-summary__icon .jk-icon { width: 20px; height: 20px; }
.position-summary__cell b { font-size: min(0.86rem, 3.3vw); }

/* v5.59 窄螢幕（手機）：數字欄佔掉大半寬度，名稱欄只剩約 80px，類型 icon 改成跟代號同一行（縮小），名稱用整欄寬度換行，不被擠成一個字一行 */
@media (max-width: 460px) {
  .position-table { column-gap: 6px; }
  .position-row__name { grid-template-columns: auto minmax(0, 1fr); column-gap: 5px; row-gap: 1px; }
  .position-row__ic { grid-row: 1; grid-column: 1; width: 22px; height: 22px; border-radius: 7px; }
  .position-row__ic .jk-icon { width: 16px; height: 16px; }
  .position-row__name > small { grid-row: 1; grid-column: 2; }
  .position-row__name > strong { grid-row: 2; grid-column: 1 / -1; }
  .position-row__name > em { grid-row: 3; grid-column: 1 / -1; }
}
@media (max-width: 460px) {
  .position-summary__cell { column-gap: 4px; padding: 0 5px; }
  .position-summary__icon .jk-icon { width: 17px; height: 17px; }
  .position-summary__cell b { font-size: min(0.8rem, 3.1vw); }
  .position-summary__cell em { font-size: 0.68rem; }
}

/* v5.59：桌機版「持有庫存」跟「交割款提醒」並排，面板本身只有約 380px 寬，所以窄版排法依面板寬度（container query）而不是螢幕寬度 */
.position-panel { container-type: inline-size; }
@container (max-width: 520px) {
  .position-table { column-gap: 6px; }
  .position-row__name { grid-template-columns: auto minmax(0, 1fr); column-gap: 5px; row-gap: 1px; }
  .position-row__ic { grid-row: 1; grid-column: 1; width: 22px; height: 22px; border-radius: 7px; }
  .position-row__ic .jk-icon { width: 16px; height: 16px; }
  .position-row__name > small { grid-row: 1; grid-column: 2; }
  .position-row__name > strong { grid-row: 2; grid-column: 1 / -1; }
  .position-row__name > em { grid-row: 3; grid-column: 1 / -1; }
  .position-summary__cell { column-gap: 4px; padding: 0 5px; }
  .position-summary__icon .jk-icon { width: 17px; height: 17px; }
  .position-summary__cell b { font-size: 0.8rem; }
  .position-summary__cell em { font-size: 0.68rem; }
}

/* ===== v5.60：總覽「股票行情」小工具 ===== */
.home-stocks[hidden] { display: none; }
.home-stocks__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 6px;
  padding: 9px 12px;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  border-radius: 14px;
  font-size: 0.82rem;
}
.home-stocks__total[hidden] { display: none; }
.home-stocks__total span { color: var(--muted); }
.home-stocks__total b { font-size: 1rem; font-variant-numeric: tabular-nums; }
.home-stocks__total b.is-positive { color: var(--income-green); }
.home-stocks__total b.is-negative { color: var(--danger, #a2463f); }
.home-stocks__total b.is-positive::before { content: "▲ "; font-size: 0.75em; }
.home-stocks__total b.is-negative::before { content: "▼ "; font-size: 0.75em; }
.home-stocks__list { display: grid; }
.home-stock {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 10px;
  width: 100%;
  min-height: 60px;
  padding: 8px 4px;
  color: var(--ink);
  font: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 0;
  cursor: pointer;
}
.home-stock:last-of-type { border-bottom: 0; }
@media (hover: hover) { .home-stock:hover { background: rgb(25 26 24 / 3%); } }
.home-stock__ic {
  display: flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  background: #eef4f1;
  border-radius: 10px;
}
.home-stock__ic .jk-icon { width: 21px; height: 21px; }
.home-stock__name, .home-stock__price, .home-stock__gain { display: grid; min-width: 0; gap: 1px; }
.home-stock__name small { color: var(--muted); font-size: 0.72rem; font-weight: 650; }
.home-stock__name b { overflow: hidden; font-size: 0.92rem; text-overflow: ellipsis; white-space: nowrap; }
.home-stock__tag {
  margin-left: 4px;
  padding: 0 5px;
  color: #5a4a1e;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  background: #f3e6c8;
  border-radius: 5px;
}
.home-stock__price, .home-stock__gain { justify-items: end; text-align: right; font-variant-numeric: tabular-nums; }
.home-stock__price b, .home-stock__gain b { font-size: 0.92rem; font-weight: 700; white-space: nowrap; }
.home-stock__price small, .home-stock__gain small { color: var(--muted); font-size: 0.72rem; white-space: nowrap; }
.home-stock__price small.is-positive, .home-stock__gain.is-positive b { color: var(--income-green); }
.home-stock__price small.is-negative, .home-stock__gain.is-negative b { color: var(--danger, #a2463f); }
.home-stock__price small.is-positive::before, .home-stock__gain.is-positive b::before { content: "▲ "; font-size: 0.75em; }
.home-stock__price small.is-negative::before, .home-stock__gain.is-negative b::before { content: "▼ "; font-size: 0.75em; }
.home-stocks__more, .home-stocks__empty { margin: 8px 0 0; color: var(--muted); font-size: 0.78rem; text-align: center; }
.home-stocks__all { margin-top: 6px; }
.home-stocks__all[hidden] { display: none; }
@media (max-width: 400px) {
  .home-stock { column-gap: 8px; grid-template-columns: 28px minmax(0, 1fr) auto auto; }
  .home-stock__ic { width: 28px; height: 28px; }
  .home-stock__ic .jk-icon { width: 19px; height: 19px; }
  .home-stock__price b, .home-stock__gain b { font-size: 0.86rem; }
}

/* ===== v5.61（Lucas 給的看盤小工具樣子）：股票行情改成深色看盤卡——名稱／代號、當日走勢小圖、股價／漲跌幅；台股習慣紅漲綠跌 ===== */
.home-stocks {
  color: #f3f1ea;
  background: linear-gradient(165deg, #2c2e2d 0%, #1b1c1c 100%);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 26px;
  box-shadow: 0 14px 34px rgb(20 24 22 / 22%);
  --stock-up: #ff5b4f;
  --stock-down: #43d36b;
}
.home-stocks .eyebrow { color: rgb(243 241 234 / 58%); }
.home-stocks h2 { color: #fff; }
.home-stocks .text-button { color: #8fe0bb; }
.home-stocks__list { gap: 0; }
.home-stock {
  grid-template-columns: minmax(0, 1fr) 112px auto;
  column-gap: 12px;
  min-height: 68px;
  padding: 10px 2px;
  color: #fff;
  border-bottom: 1px solid rgb(255 255 255 / 11%);
}
.home-stock:last-of-type { border-bottom: 0; }
@media (hover: hover) { .home-stock:hover { background: rgb(255 255 255 / 5%); } }
.home-stock__name b { color: #fff; font-size: 1.08rem; font-weight: 750; }
.home-stock__name small { color: rgb(243 241 234 / 52%); font-size: 0.82rem; font-weight: 600; }
.home-stock__name b::before { margin-right: 5px; font-size: 0.7em; vertical-align: 0.1em; }
.home-stock.is-up .home-stock__name b::before { content: "▲"; color: var(--stock-up); }
.home-stock.is-down .home-stock__name b::before { content: "▼"; color: var(--stock-down); }
.home-stock__spark { display: block; width: 112px; height: 40px; overflow: visible; }
.home-stock__base { stroke: rgb(255 255 255 / 38%); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.home-stock__line { fill: none; stroke: rgb(255 255 255 / 70%); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.home-stock__area { fill: rgb(255 255 255 / 10%); stroke: none; }
.home-stock.is-up .home-stock__line { stroke: var(--stock-up); }
.home-stock.is-up .home-stock__area { fill: rgb(255 91 79 / 16%); }
.home-stock.is-down .home-stock__line { stroke: var(--stock-down); }
.home-stock.is-down .home-stock__area { fill: rgb(67 211 107 / 16%); }
.home-stock__price b { color: #fff; font-size: 1.12rem; font-weight: 750; }
.home-stock__price small { color: rgb(243 241 234 / 60%); font-size: 0.86rem; font-weight: 650; }
.home-stock.is-up .home-stock__price small { color: var(--stock-up); }
.home-stock.is-down .home-stock__price small { color: var(--stock-down); }
.home-stock__price small::before { content: none !important; }
.home-stocks__more, .home-stocks__empty { color: rgb(243 241 234 / 55%); }
@media (max-width: 400px) {
  .home-stock { grid-template-columns: minmax(0, 1fr) 84px auto; column-gap: 8px; }
  .home-stock__spark { width: 84px; }
  .home-stock__name b { font-size: 1rem; }
  .home-stock__price b { font-size: 1.02rem; }
}

/* v5.61 配色調整（Lucas：截圖只是參考，要維持醬記基本配色）：深墨綠底（跟主選單同一家族）、米白字、醬記金按鈕；
   漲跌照醬記規則——漲（賺）用醬記淺綠、跌（賠）用醬記珊瑚紅，不採用台股紅漲綠跌。 */
.home-stocks {
  color: #f6f2e8;
  background: linear-gradient(165deg, #174a3f 0%, #0d2e27 100%);
  border: 1px solid rgb(166 235 203 / 16%);
  box-shadow: 0 14px 34px rgb(10 40 32 / 26%);
  --stock-up: #86d5b5;
  --stock-down: #ffaea4;
}
.home-stocks .eyebrow { color: rgb(246 242 232 / 62%); }
.home-stocks .text-button { color: #e9c587; }
.home-stock { border-bottom-color: rgb(246 242 232 / 12%); }
.home-stock__name small { color: rgb(246 242 232 / 55%); }
.home-stock__base { stroke: rgb(246 242 232 / 38%); }
.home-stock__line { stroke: rgb(246 242 232 / 70%); }
.home-stock__area { fill: rgb(246 242 232 / 10%); }
.home-stock.is-up .home-stock__area { fill: rgb(134 213 181 / 18%); }
.home-stock.is-down .home-stock__area { fill: rgb(255 174 164 / 18%); }
.home-stock__price small { color: rgb(246 242 232 / 62%); }
.home-stocks__more, .home-stocks__empty { color: rgb(246 242 232 / 58%); }

/* v5.61：「今日對帳」卡的上負邊距是為了貼在「我的帳戶」正下方；中間隔了別的小工具（例如股票行情）時要取消，不然會壓在它上面 */
@media (max-width: 959px) {
  .home-widget[data-widget="reconcile"] > #reconciliation-card { margin-top: 0; }
  .home-widget[data-widget="accounts"] + .home-widget[data-widget="reconcile"] > #reconciliation-card { margin-top: calc(var(--space-10) * -1 + var(--space-4)); }
}

/* v5.61 再調整（Lucas：底色以米色為主，跟帳戶卡片類似，不要太深）：米白瓷底、深色字、品牌綠連結；漲（賺）綠、跌（賠）紅 */
.home-stocks {
  color: var(--ink);
  background: linear-gradient(165deg, #fffdf8 0%, #f6f1e4 100%);
  border: 1px solid #ddd6c7;
  box-shadow: 0 8px 22px rgb(60 50 30 / 8%);
  --stock-up: #34735b;
  --stock-down: #b3473d;
}
.home-stocks .eyebrow { color: var(--muted); }
.home-stocks h2 { color: var(--ink); }
.home-stocks .text-button { color: #0e6b5c; }
.home-stock { color: var(--ink); border-bottom-color: color-mix(in srgb, var(--ink) 10%, transparent); }
@media (hover: hover) { .home-stock:hover { background: rgb(25 26 24 / 3%); } }
.home-stock__name b { color: var(--ink); }
.home-stock__name small { color: var(--muted); }
.home-stock__base { stroke: rgb(25 26 24 / 28%); }
.home-stock__line { stroke: rgb(25 26 24 / 55%); }
.home-stock__area { fill: rgb(25 26 24 / 6%); }
.home-stock.is-up .home-stock__area { fill: rgb(52 115 91 / 14%); }
.home-stock.is-down .home-stock__area { fill: rgb(179 71 61 / 12%); }
.home-stock__price b { color: var(--ink); }
.home-stock__price small { color: var(--muted); }
.home-stocks__more, .home-stocks__empty { color: var(--muted); }

/* v5.63：股票名稱前的迷你今日 K 棒（取代 ▲▼；漲綠跌紅、開＝當日第一筆、收＝最新價、影線＝今天高低） */
.home-stock.is-up .home-stock__name b::before,
.home-stock.is-down .home-stock__name b::before { content: none; }
.home-stock__candle {
  display: inline-block;
  width: 10px;
  height: 22px;
  margin-right: 7px;
  vertical-align: -4px;
  color: rgb(25 26 24 / 40%);
  overflow: visible;
}
.home-stock__candle line { stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.home-stock__candle rect { fill: currentColor; }
.home-stock.is-up .home-stock__candle { color: var(--stock-up); }
.home-stock.is-down .home-stock__candle { color: var(--stock-down); }

/* ===== v5.64：小工具右上角的拖曳小圖示（長按排序／移除）＋股票行情區塊間距 ===== */
.home-widgets:not(.is-editing) > .home-widget { position: relative; }
.home-widget__handle {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--muted, #6d6d66);
  background: color-mix(in srgb, var(--surface, #fffdf8) 70%, transparent);
  border: 0;
  border-radius: 999px;
  opacity: 0.55;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.home-widget__handle svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.home-widget__handle:hover, .home-widget__handle:focus-visible { opacity: 1; }
.home-widgets.is-editing .home-widget__handle { display: none; }
/* 有標題列的小工具，右邊讓出圖示的位置，不蓋到「＋ 新增…」這類按鈕 */
.home-widget .section-heading { padding-right: 30px; }
.home-widget .dream-row-panel .section-heading,
.home-widget.overview-stocks .section-heading { padding-right: 30px; }

/* 股票行情跟下一個區塊的間距，跟預算／夢想／最近記錄一致 */
@media (max-width: 959px) {
  .overview-stocks { margin-bottom: var(--space-10); }
}
/* 支出區間第一列的箭頭在右上角，圖示往上挪一點避開 */
.home-widget[data-widget="period"] > .home-widget__handle { top: -6px; }

/* ===== v5.65（Lucas）：編輯首頁改成「區塊視覺化拖曳」——每個區塊保留原本的樣子（有預覽），整塊按住就能拖，拖的時候區塊跟著手指走、其他區塊讓位 ===== */
.home-widgets.is-editing { gap: 16px; }
.home-widgets.is-editing > .home-widget:not([data-empty]) {
  position: relative;
  max-height: 230px;
  overflow: hidden;
  border-radius: 24px;
  outline: 2px dashed rgb(14 107 92 / 38%);
  outline-offset: 3px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  animation: homeWidgetWiggle 0.32s ease-in-out infinite alternate;
}
.home-widgets.is-editing > .home-widget:not([data-empty])::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  z-index: 4;
  height: 54px;
  background: linear-gradient(180deg, rgb(236 230 218 / 0%), rgb(236 230 218 / 92%));
  pointer-events: none;
}
@keyframes homeWidgetWiggle {
  from { transform: rotate(-0.25deg); }
  to { transform: rotate(0.25deg); }
}
.home-widgets.is-editing > .home-widget.is-dragging {
  z-index: 20;
  animation: none;
  opacity: 0.94;
  box-shadow: 0 20px 44px rgb(23 35 31 / 28%);
  cursor: grabbing;
}
/* 工具列浮在每個區塊上方：握把、名稱、移除／固定 */
.home-widgets.is-editing > .home-widget:not([data-empty]) > .home-widget__bar {
  position: absolute;
  inset: 10px 10px auto 10px;
  z-index: 6;
  padding: 4px 8px 4px 4px;
  background: color-mix(in srgb, var(--surface, #fffdf8) 92%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgb(23 35 31 / 14%);
}
.home-widgets.is-editing > .home-widget:not([data-empty]) > .home-widget__bar .home-widget__name small,
.home-widgets.is-editing > .home-widget:not([data-empty]) > .home-widget__bar .home-widget__moves { display: none; }
.home-widgets.is-editing > .home-widget > .home-widget__bar .home-widget__grip { width: 34px; height: 34px; }
.home-widgets.is-editing > .home-widget.is-dragging > .home-widget__bar { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .home-widgets.is-editing > .home-widget:not([data-empty]) { animation: none; }
}

/* ===== v5.66（Lucas：編輯首頁再簡約）：區塊名稱不顯示（區塊本身就是預覽）、拖曳與移除集中在右上角兩顆小圓鈕、加浮動「完成」 ===== */
.home-widgets.is-editing { gap: 14px; }
.home-widgets.is-editing > .home-widget:not([data-empty]) {
  outline: 1.5px dashed rgb(14 107 92 / 26%);
  outline-offset: 3px;
  animation: none;
}
.home-widgets.is-editing > .home-widget:not([data-empty])::after { height: 36px; }
.home-widgets.is-editing > .home-widget:not([data-empty]) > .home-widget__bar {
  inset: 8px 8px auto auto;
  left: auto;
  width: auto;
  gap: 8px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.home-widgets.is-editing > .home-widget:not([data-empty]) > .home-widget__bar .home-widget__name { display: none; }
.home-widgets.is-editing > .home-widget:not([data-empty]) > .home-widget__bar .home-widget__grip,
.home-widgets.is-editing > .home-widget:not([data-empty]) > .home-widget__bar .home-widget__remove,
.home-widgets.is-editing > .home-widget:not([data-empty]) > .home-widget__bar .home-widget__lock {
  display: grid;
  width: 34px;
  height: 34px;
  min-width: 0;
  padding: 0;
  place-items: center;
  background: rgb(255 253 248 / 94%);
  border: 1px solid rgb(25 26 24 / 10%);
  border-radius: 999px;
  box-shadow: 0 3px 10px rgb(23 35 31 / 16%);
}
.home-widgets.is-editing > .home-widget:not([data-empty]) > .home-widget__bar .home-widget__grip svg { width: 18px; height: 18px; }
.home-widgets.is-editing > .home-widget:not([data-empty]) > .home-widget__bar .home-widget__remove { font-size: 0; }
.home-widgets.is-editing > .home-widget:not([data-empty]) > .home-widget__bar .home-widget__remove::before {
  content: "×";
  color: #a94f45;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
}
.home-widgets.is-editing > .home-widget:not([data-empty]) > .home-widget__bar .home-widget__lock { font-size: 0; color: var(--muted, #6d6d66); }
.home-widgets.is-editing > .home-widget:not([data-empty]) > .home-widget__bar .home-widget__lock svg { width: 16px; height: 16px; }
/* 沒有內容的區塊（預算、夢想還沒用過）沒有預覽可看，才留一條小字名稱列 */
.home-widgets.is-editing > .home-widget[data-empty] > .home-widget__bar .home-widget__name small,
.home-widgets.is-editing > .home-widget[data-empty] > .home-widget__bar .home-widget__moves { display: none; }
.home-widgets.is-editing > .home-widget[data-empty] > .home-widget__bar { padding: 6px 8px 6px 4px; box-shadow: none; border-style: dashed; background: transparent; }
.home-widgets.is-editing > .home-widget[data-empty] > .home-widget__bar .home-widget__name b { color: var(--muted, #6d6d66); font-size: 0.85rem; font-weight: 600; }
.home-widgets.is-editing > .home-widget[data-empty] > .home-widget__bar .home-widget__remove { padding: 0 8px; font-size: 0.78rem; }

/* 浮動「完成」：編輯首頁時固定在畫面右上角 */
.home-widgets-done-float {
  position: fixed;
  top: max(12px, env(safe-area-inset-top, 0px));
  right: 14px;
  z-index: 60;
  min-height: 38px;
  padding: 0 20px;
  color: #fff;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  background: var(--accent, #0e6b5c);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgb(14 107 92 / 35%);
  cursor: pointer;
}
.home-widgets-done-float[hidden] { display: none; }
/* 「完成」改放畫面右下（主選單上方），不蓋到最上面區塊右上角的拖曳／移除鈕 */
.home-widgets-done-float {
  top: auto;
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  right: 16px;
}
/* v5.67：浮動「完成」一律放在最上層，高過主選單與其他浮層 */
.home-widgets-done-float { z-index: 9000; }

/* v5.67（Lucas：完成鈕要在區塊裡，不要浮動）：每個區塊右上角 [完成][握把][×]，浮動版取消 */
.home-widgets-done-float { display: none !important; }
.home-widget__done {
  flex: none;
  min-height: 34px;
  padding: 0 14px;
  color: #fff;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--accent, #0e6b5c);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgb(14 107 92 / 30%);
  cursor: pointer;
}
.home-widgets.is-editing > .home-widget[data-empty] > .home-widget__bar .home-widget__done { min-height: 30px; padding: 0 12px; }

/* v5.67（Lucas）：「完成」跟握把、×一樣是白底圓圈，裡面一個品牌綠的打勾 */
.home-widget__done,
.home-widgets.is-editing > .home-widget[data-empty] > .home-widget__bar .home-widget__done {
  display: grid;
  flex: none;
  width: 34px;
  height: 34px;
  min-height: 0;
  padding: 0;
  place-items: center;
  font-size: 0;
  background: rgb(255 253 248 / 94%);
  border: 1px solid rgb(25 26 24 / 10%);
  border-radius: 999px;
  box-shadow: 0 3px 10px rgb(23 35 31 / 16%);
}
.home-widget__done::before {
  content: "✓";
  color: #0e6b5c;
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
}

/* v5.68：打勾改用 SVG 置中（文字 ✓ 字形偏一邊）；整塊區塊內容不攔截捲動，只有 ⠿ 能拖 */
.home-widget__done::before {
  content: "";
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e6b5c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.6 4.6L19 7.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.home-widgets.is-editing > .home-widget { cursor: default; }
.home-widgets.is-editing > .home-widget:not([data-empty]) { cursor: default; }
.home-widgets.is-editing .home-widget__grip { cursor: grab; touch-action: none; }

/* ===== v5.69：獲利了結紀錄——累計總額＋月份箭頭＋當月合計；我的帳戶的小工具鈕挪到「我的錢」眼睛旁，不擋「＋ 新增」 ===== */
.closed-total {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 2px 10px;
  margin: 0 0 12px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: 16px;
}
.closed-total span { color: var(--muted); font-size: 0.82rem; font-weight: 600; }
.closed-total b { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.closed-total small { grid-column: 1 / -1; color: var(--muted); font-size: 0.72rem; }
.closed-total b.is-positive, .closed-summary b.is-positive { color: var(--income-green); }
.closed-total b.is-negative, .closed-summary b.is-negative { color: var(--danger, #a2463f); }
.closed-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 4px 0 4px;
  padding: 0 2px;
  font-size: 0.82rem;
}
.closed-summary[hidden] { display: none; }
.closed-summary span { color: var(--muted); }
.closed-summary b { font-size: 1rem; font-variant-numeric: tabular-nums; }
.closed-list__empty { margin: 10px 0; color: var(--muted); font-size: 0.82rem; text-align: center; }
.investment-closed .month-nav[hidden] { display: none; }
/* 我的帳戶：右上角有「瀏覽全部／＋ 新增」，小工具鈕改放到「我的錢」眼睛旁（眼睛左邊）；編輯模式的 ✓ ✕ ⠿ 也一樣 */
.home-widget[data-widget="accounts"] > .home-widget__handle { top: 75px; right: 53px; }
.home-widgets.is-editing > .home-widget[data-widget="accounts"]:not([data-empty]) > .home-widget__bar { inset: 71px 53px auto auto; }

/* ===== v5.70（Lucas）：股票行情右上角加「顯示方式」鈕——上下列表／左右滑動卡片（省上下空間） ===== */
.home-stocks__tools { display: flex; align-items: center; gap: 10px; }
.home-stocks__layout {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  color: var(--accent-strong, var(--accent));
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 10px;
  cursor: pointer;
}
.home-stocks__layout::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--layout-icon) center / contain no-repeat;
  mask: var(--layout-icon) center / contain no-repeat;
  --layout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='7' height='14' rx='2'/%3E%3Crect x='14' y='5' width='7' height='14' rx='2'/%3E%3C/svg%3E");
}
.home-stocks__layout[data-mode="row"]::before {
  --layout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E");
}
.home-stocks__list[data-layout="row"] {
  display: flex;
  gap: 10px;
  margin: 0 -4px;
  padding: 2px 4px 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.home-stocks__list[data-layout="row"]::-webkit-scrollbar { display: none; }
.home-stocks__list[data-layout="row"] .home-stock {
  flex: 0 0 132px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: 6px;
  padding: 12px;
  text-align: left;
  scroll-snap-align: start;
  background: color-mix(in srgb, var(--ink) 4%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  border-radius: 16px;
}
.home-stocks__list[data-layout="row"] .home-stock__name b { font-size: 0.98rem; }
.home-stocks__list[data-layout="row"] .home-stock__spark { width: 100%; height: 38px; }
.home-stocks__list[data-layout="row"] .home-stock__price { justify-items: start; text-align: left; }
.home-stocks__list[data-layout="row"] .home-stock__price b { font-size: 1.05rem; }
/* v5.70 修正（Lucas）：「＋ 新增投資」不換行，跟右上角拖曳圖示同一列同高；切換鈕、新增鈕一起排在圖示左邊 */
.home-stocks { position: relative; }
.home-stocks__tools {
  position: absolute;
  top: 8px;
  right: 40px;
  z-index: 2;
  height: 26px;
  gap: 8px;
}
.home-stocks__tools .text-button { padding: 0; font-size: 0.86rem; line-height: 26px; white-space: nowrap; }
.home-stocks__layout { width: 26px; height: 26px; border-radius: 8px; }
.home-stocks__layout::before { width: 14px; height: 14px; }
.home-stocks .section-heading > div:first-child { padding-right: 0; }
.home-stocks .section-heading { padding-top: 30px; padding-right: 0; }

/* ===== v5.72（Lucas 設計稿）：獲利了結紀錄加 icon、賺賠比例條、點「賺／賠」列出清單；▲▼ 只是視覺輔助 ===== */
.closed-heading { display: flex; align-items: center; justify-content: flex-start; gap: 10px; }
.closed-heading__icon { display: flex; flex: none; width: 40px; height: 40px; align-items: center; justify-content: center; background: #faf1dc; border-radius: 13px; }
.closed-heading__icon .jk-icon { width: 26px; height: 26px; }
.closed-total.is-win { background: #eef3ef; }
.closed-total.is-loss { background: #f6ece8; }
.has-arrow-up::before { content: "▲ "; font-size: 0.6em; vertical-align: 0.15em; }
.has-arrow-down::before { content: "▼ "; font-size: 0.6em; vertical-align: 0.15em; }
.closed-wl { display: flex; grid-column: 1 / -1; align-items: center; gap: 10px; margin-top: 8px; }
.closed-ratio { display: flex; flex: 1; min-width: 0; height: 8px; gap: 2px; overflow: hidden; background: color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 999px; }
.closed-ratio i { display: block; height: 100%; }
.closed-ratio i.is-win { background: #34735b; }
.closed-ratio i.is-loss { background: #a94f45; }
.closed-chips { display: flex; gap: 8px; }
.closed-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px 10px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  white-space: nowrap;
  background: rgb(255 255 255 / 62%);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
}
.closed-chip::after { content: "›"; margin-left: 3px; opacity: 0.7; }
.closed-chip.is-win { color: #34735b; }
.closed-chip.is-loss { color: #a94f45; }
.closed-chip[aria-pressed="true"] { color: #fff; }
.closed-chip.is-win[aria-pressed="true"] { background: #34735b; }
.closed-chip.is-loss[aria-pressed="true"] { background: #a94f45; }
.closed-chip[aria-pressed="true"]::after { content: "✕"; font-size: 0.85em; }
.closed-chip:disabled { opacity: 0.4; cursor: default; }
.closed-filter { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; padding: 10px 12px; font-size: 0.84rem; font-weight: 700; border-radius: 14px; }
.closed-filter[hidden] { display: none; }
.closed-filter.is-win { color: #235c47; background: #e2efe8; }
.closed-filter.is-loss { color: #8a3a31; background: #f6e3df; }
.closed-filter button { padding: 0; color: inherit; font: inherit; font-size: 0.78rem; font-weight: 700; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; cursor: pointer; }
.closed-month-label { display: inline-flex; align-items: center; gap: 7px; }
.closed-month-label > i { display: inline-flex; width: 22px; height: 22px; }
.closed-month-label .jk-icon { width: 22px; height: 22px; }
.closed-group__head { grid-template-columns: 36px minmax(0, 1fr) auto 12px; }
.closed-group__ic { display: flex; width: 36px; height: 36px; align-items: center; justify-content: center; background: #eef4f1; border-radius: 11px; }
.closed-group__ic .jk-icon { width: 23px; height: 23px; }
.closed-group__month { color: #3d3e39; font-weight: 700; }
.closed-badge { display: inline-block; margin-top: 2px; padding: 1px 8px; font-size: 11px !important; font-weight: 800; border-radius: 999px; }
.closed-badge.is-positive { color: #235c47 !important; background: #e2efe8; }
.closed-badge.is-negative { color: #8a3a31 !important; background: #f6e3df; }
.closed-summary b.has-arrow-up::before, .closed-summary b.has-arrow-down::before { vertical-align: 0.1em; }
/* 投資頁的股票行情：跟總覽同一張卡，只是沒有右上角的小工具拖曳圖示，按鈕靠右 */
.home-stocks--page { margin-bottom: 16px; }
.home-stocks--page .home-stocks__tools { right: 16px; }

/* ===== v5.73（Lucas）：固定收支編輯視窗加「歷史紀錄」——確認記過的帳可以點開修改、最近一次可以撤銷 ===== */
.recurring-history { margin: 14px 0 4px; }
.recurring-history h3 { margin: 0 0 6px; font-size: 0.92rem; }
.recurring-history__list { display: grid; max-height: 220px; overflow-y: auto; border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.recurring-history__item { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.recurring-history__main {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 2px;
  color: var(--ink);
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
.recurring-history__main span { display: grid; min-width: 0; }
.recurring-history__main small { color: var(--muted); font-size: 0.72rem; }
.recurring-history__main strong { font-variant-numeric: tabular-nums; }
.recurring-history__main strong.is-positive { color: var(--income-green); }
.recurring-history__main strong.is-negative { color: var(--danger, #a2463f); }
.recurring-history__undo { flex: none; padding: 5px 12px; color: #8a3a31; font: inherit; font-size: 0.8rem; font-weight: 700; background: #f6e3df; border: 0; border-radius: 999px; cursor: pointer; }
.recurring-history__empty { margin: 6px 0 0; color: var(--muted); font-size: 0.8rem; }

/* ===== v5.79（Lucas）：總覽小字改成「廣播器 icon＋跑馬燈」（app.js setPageSubtitle／layoutPageTicker） ===== */
#page-subtitle.is-ticker {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  width: 100%;
  max-width: min(42rem, 100%);
  white-space: nowrap;
}

#page-subtitle .ticker-icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--accent);
}

#page-subtitle .ticker-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
}

#page-subtitle .ticker-track {
  display: flex;
  width: max-content;
  animation: page-ticker-scroll var(--ticker-duration, 20s) linear infinite;
  will-change: transform;
}

#page-subtitle .ticker-item {
  flex: none;
  padding-right: 3rem;
}

#page-subtitle .ticker-viewport:hover .ticker-track {
  animation-play-state: paused;
}

@keyframes page-ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-1 * var(--ticker-shift, 100%))); }
}

@media (prefers-reduced-motion: reduce) {
  #page-subtitle.is-ticker { white-space: normal; align-items: flex-start; }
  #page-subtitle .ticker-icon { margin-top: 0.2em; }
  #page-subtitle .ticker-viewport { -webkit-mask-image: none; mask-image: none; }
  #page-subtitle .ticker-track { width: auto; animation: none; }
  #page-subtitle .ticker-item { white-space: normal; padding-right: 0; }
  #page-subtitle .ticker-item[aria-hidden="true"] { display: none; }
}

/* v5.81：跑馬燈多則文案之間的分隔小圓點 */
#page-subtitle .ticker-sep {
  display: inline-block;
  padding: 0 1.4rem;
  color: var(--accent);
  opacity: 0.6;
}

#page-subtitle .ticker-item {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  #page-subtitle .ticker-item { display: block; white-space: normal; }
  #page-subtitle .ticker-sep { padding: 0 0.5em; }
}

/* ===== v5.82（Lucas）：看盤小幫手——「今天怎麼走」白話卡、怎麼看 K 棒、成本價線 ===== */
.home-stock__candle {
  padding: 6px 8px;
  margin: -6px -1px -6px -8px;
  box-sizing: content-box;
  cursor: pointer;
}
.home-stock__cost-line { stroke: #d9a13b; stroke-width: 1; stroke-dasharray: 3 3; fill: none; vector-effect: non-scaling-stroke; }
.home-stocks__help::before { display: none; }
.home-stocks__help { font: 800 14px/1 inherit; font-family: inherit; }

.stock-today-dialog { --sd-up: #34735b; --sd-down: #b3473d; --sd-cost: #c58a1f; }
.stock-today { width: min(100%, 430px); }
.stock-today__content { display: grid; gap: 14px; max-height: min(78vh, 640px); overflow: auto; padding: 4px 2px 2px; }
.stock-today__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stock-today__head b { display: block; font-size: 1.05rem; }
.stock-today__head small { display: block; color: var(--muted); }
.stock-today__price { text-align: right; }
.stock-today__price b { font-size: 1.25rem; }
.stock-today__price.is-up small, .stock-today__cost.is-up b { color: var(--sd-up); }
.stock-today__price.is-down small, .stock-today__cost.is-down b { color: var(--sd-down); }
.stock-today__section h3 { margin: 0 0 8px; font-size: 0.95rem; }
.stock-today__bar { position: relative; height: 80px; margin: 6px 4px 4px; }
.stock-today__track { position: absolute; left: 0; right: 0; top: 18px; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 10%, transparent); }
.stock-today__body { position: absolute; top: 14px; height: 16px; border-radius: 4px; background: color-mix(in srgb, var(--muted) 55%, transparent); }
.stock-today__bar.is-up .stock-today__body { background: color-mix(in srgb, var(--sd-up) 55%, transparent); }
.stock-today__bar.is-down .stock-today__body { background: color-mix(in srgb, var(--sd-down) 55%, transparent); }
.stock-today__now, .stock-today__cost-tick { position: absolute; top: 8px; width: 3px; height: 28px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); }
.stock-today__cost-tick { background: var(--sd-cost); }
.stock-today__now span, .stock-today__cost-tick span { position: absolute; top: -17px; left: 50%; transform: translateX(-50%); font-size: 0.7rem; font-weight: 700; white-space: nowrap; }
.stock-today__cost-tick span { top: 31px; color: var(--sd-cost); }
.stock-today__low, .stock-today__high { position: absolute; bottom: 0; font-size: 0.72rem; color: var(--muted); }
.stock-today__low { left: 0; }
.stock-today__high { right: 0; }
.stock-today__lines { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 0.9rem; line-height: 1.6; }
.stock-today__lines li { padding-left: 14px; position: relative; }
.stock-today__lines li::before { content: ""; position: absolute; left: 2px; top: 0.7em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.stock-today__cost { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stock-today__cost > div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 5%, transparent); }
.stock-today__cost small { color: var(--muted); font-size: 0.75rem; }
.stock-today__cost b { font-size: 1.1rem; }
.stock-today__hint, .stock-today__empty { margin: 8px 0 0; font-size: 0.82rem; color: var(--muted); line-height: 1.6; }
.stock-today__note { margin: 0; font-size: 0.76rem; color: var(--muted); line-height: 1.6; }
.stock-today__guide { border-top: 1px solid var(--line, color-mix(in srgb, var(--ink) 12%, transparent)); padding-top: 10px; }
.stock-today__guide summary { cursor: pointer; font-weight: 700; font-size: 0.9rem; }
.kguide { display: grid; gap: 12px; margin-top: 10px; }
.kguide__main { width: 100%; max-width: 300px; margin: 0 auto; }
.kguide__wick { stroke: var(--sd-up, #34735b); stroke-width: 3; stroke-linecap: round; }
.kguide__real { fill: var(--sd-up, #34735b); }
.kguide__tick line { stroke: color-mix(in srgb, var(--ink) 35%, transparent); stroke-width: 1; stroke-dasharray: 3 3; }
.kguide__text text { font-size: 12px; fill: var(--ink); dominant-baseline: central; }
.kguide__text .kguide__strong { font-weight: 800; }
.kguide__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 0.86rem; line-height: 1.5; }
.kguide__list li { display: flex; align-items: center; gap: 10px; }
.kguide__mini { flex: none; }
.kguide__mini line { stroke: var(--ink); stroke-width: 2; }
.kguide__mini rect { fill: var(--ink); opacity: 0.75; }
.kguide__tip { margin: 0; font-size: 0.8rem; color: var(--muted); line-height: 1.6; }

/* ===== v5.83（Lucas）：股票漲跌／賺賠顏色改成台股習慣——漲、賺＝紅，跌、賠＝綠（只動投資相關畫面；收入、支出、預算的顏色不變） ===== */
:root {
  --tw-up: #c8402f;
  --tw-down: #2d7a58;
  --tw-up-soft: #f9e4df;
  --tw-down-soft: #e2efe8;
}
.home-stocks { --stock-up: var(--tw-up); --stock-down: var(--tw-down); }
.home-stock.is-up .home-stock__area { fill: rgb(200 64 47 / 12%); }
.home-stock.is-down .home-stock__area { fill: rgb(45 122 88 / 14%); }
.position-row__cell small.is-up,
.position-row__cell.is-positive b,
.position-row__cell.is-positive small,
.position-summary__cell b.is-positive,
.position-summary__cell small.is-positive,
.investment-summary .is-positive,
.position-item .is-positive,
.broker-card .is-positive,
.home-stocks__total b.is-positive { color: var(--tw-up); }
.position-row__cell small.is-down,
.position-row__cell.is-negative b,
.position-row__cell.is-negative small,
.position-summary__cell b.is-negative,
.position-summary__cell small.is-negative,
.investment-summary .is-negative,
.position-item .is-negative,
.broker-card .is-negative,
.home-stocks__total b.is-negative { color: var(--tw-down); }
.broker-ring.is-positive .broker-ring__value { stroke: var(--tw-up); }
.broker-ring.is-negative .broker-ring__value { stroke: var(--tw-down); }
.broker-ring.is-positive b { color: var(--tw-up); }
.broker-ring.is-negative b { color: var(--tw-down); }
.closed-group__gain.is-positive b { color: var(--tw-up); }
.closed-group__gain.is-negative b { color: var(--tw-down); }
.closed-total.is-win { background: var(--tw-up-soft); }
.closed-total.is-loss { background: var(--tw-down-soft); }
.closed-ratio i.is-win { background: var(--tw-up); }
.closed-ratio i.is-loss { background: var(--tw-down); }
.closed-chip.is-win { color: var(--tw-up); }
.closed-chip.is-loss { color: var(--tw-down); }
.closed-chip.is-win[aria-pressed="true"] { background: var(--tw-up); color: #fff; }
.closed-chip.is-loss[aria-pressed="true"] { background: var(--tw-down); color: #fff; }
.closed-filter.is-win { color: #8f2b1f; background: var(--tw-up-soft); }
.closed-filter.is-loss { color: #1f5c43; background: var(--tw-down-soft); }
.closed-badge.is-positive { color: #8f2b1f !important; background: var(--tw-up-soft); }
.closed-badge.is-negative { color: #1f5c43 !important; background: var(--tw-down-soft); }
.stock-today-dialog { --sd-up: var(--tw-up); --sd-down: var(--tw-down); }

/* ===== v5.83（Lucas）：持有庫存字太小——手機（面板寬度 ≤ 560px）改成「一檔一張卡」：第一行名稱＋損益（大字），第二行股價、均價、市值各有小標題 ===== */
@container (max-width: 560px) {
  .position-table { display: block; margin: 0; }
  .position-table__head { display: none; }
  .position-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 12px;
    align-items: start;
    padding: 18px 4px;
  }
  .position-row__name { grid-column: 1 / 3; grid-row: 1; row-gap: 4px; }
  .position-row__name > small { font-size: 0.85rem; }
  .position-row__name > strong { font-size: 1.15rem; line-height: 1.3; }
  .position-row__name > em { font-size: 0.82rem; }
  .position-row__ic { width: 26px; height: 26px; }
  .position-row__ic .jk-icon { width: 19px; height: 19px; }
  .position-row__cell { gap: 4px; text-align: left; }
  .position-row__cell::before { content: attr(data-label); color: var(--muted); font-size: 0.8rem; font-weight: 650; }
  .position-row__cell b { font-size: 1.12rem; font-weight: 800; }
  .position-row__cell small { font-size: 0.88rem; }
  .position-row__cell:nth-child(2) { grid-column: 1; grid-row: 2; }
  .position-row__cell:nth-child(3) { grid-column: 2; grid-row: 2; }
  .position-row__cell:nth-child(4) { grid-column: 3; grid-row: 2; }
  .position-row__cell:nth-child(5) { grid-column: 3; grid-row: 1; text-align: right; }
  .position-row__cell:nth-child(5) b { font-size: 1.35rem; }
  .position-row__cell:nth-child(5)::before { font-size: 0.78rem; }
  .position-row__cell small.is-up::before,
  .position-row__cell.is-positive b:not(:empty)::before,
  .position-row__cell.is-positive small:not(:empty)::before,
  .position-row__cell small.is-down::before,
  .position-row__cell.is-negative b:not(:empty)::before,
  .position-row__cell.is-negative small:not(:empty)::before { font-size: 0.7em; }
}

/* ===== v5.84（Lucas）：「更多功能」選單背景改成跟主選單同一種深綠玻璃（配方取自 v5.37 的 .mobile-nav__base：
   半透明綠漸層＋上緣白色高光＋亮邊＋背景模糊）。選單比底部那條大很多、裡面有白字，所以綠色比主選單稍實一點（68～80%），
   確保文字在任何背景上都讀得清楚。系統設定「降低透明度」時退回實心深綠。 ===== */
#mobile-more-dialog .dialog-card--mobile-more {
  position: relative;
  isolation: isolate;
  border: 0;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 16%) 0%, rgb(255 255 255 / 0%) 45%),
    linear-gradient(120deg, color-mix(in srgb, color-mix(in srgb, var(--accent-bright) 30%, var(--accent-strong)) 36%, transparent), color-mix(in srgb, color-mix(in srgb, var(--accent-bright) 8%, var(--accent-strong)) 46%, transparent));
  -webkit-backdrop-filter: blur(9px) saturate(160%) brightness(0.9);
  backdrop-filter: blur(9px) saturate(160%) brightness(0.9);
  box-shadow:
    0 18px 40px rgb(10 40 32 / 38%),
    inset 0 0 0 1px rgb(255 255 255 / 28%),
    inset 0 2px 3px rgb(255 255 255 / 38%),
    inset 0 -3px 6px rgb(5 30 25 / 35%);
}
#mobile-more-dialog .dialog-card--mobile-more::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(100deg, rgb(190 255 150 / 0%) 12%, rgb(190 255 150 / 85%) 34%, rgb(255 190 230 / 70%) 52%, rgb(255 255 255 / 0%) 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0.8;
}
#mobile-more-dialog .dialog-card--mobile-more > * { position: relative; z-index: 1; }
#mobile-more-dialog .close-button { background: rgb(255 255 255 / 12%); }
#mobile-more-dialog .close-button:hover { background: rgb(255 255 255 / 18%); }
#mobile-more-dialog .mobile-more-tile__button:hover,
#mobile-more-dialog .mobile-more-tile__button:focus-visible { background: rgb(255 255 255 / 10%); }
#mobile-more-dialog .mobile-more-tile__icon { color: #fff; }
@media (prefers-reduced-transparency: reduce) {
  #mobile-more-dialog .dialog-card--mobile-more { background: #1c3d34; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ===== v5.85（Lucas）：「更多功能」要跟主選單一模一樣的顏色（v5.84 太深），而且圖示與文字加陰影讓它在淺色玻璃上也清楚 =====
   顏色：主選單的玻璃顏色是「半透明綠疊在明亮的頁面上」＝淺灰綠（實測約 rgb 140～155, 150～165, 140～153）；選單是對話框，後面多一層
   56% 深色遮罩（.dialog::backdrop），照主選單的透明度會被染成深灰，所以直接用主選單實際呈現出來的淺灰綠當底色（94% 不透明，
   保留一點玻璃感與模糊）。文字與圖示加深綠色柔影，白字在淺玻璃上也不會糊掉。 */
#mobile-more-dialog .dialog-card--mobile-more { text-shadow: 0 1px 3px rgb(0 0 0 / 32%); }
#mobile-more-dialog .dialog-card--mobile-more svg,
#mobile-more-dialog .mobile-more-tile__icon .menu-icon { filter: drop-shadow(0 1px 2px rgb(0 0 0 / 35%)); }
#mobile-more-dialog .mobile-more-tile__label { color: #fff; }
#mobile-more-dialog .mobile-more-help,
#mobile-more-dialog .app-footer-panel .app-footer__version,
#mobile-more-dialog .app-footer-panel .app-footer__copyright { color: #f6fbf8; }
#mobile-more-dialog .close-button { background: rgb(255 255 255 / 22%); }
#mobile-more-dialog .mobile-more-support { color: #fff; border-color: rgb(255 255 255 / 45%); background: rgb(255 255 255 / 10%); }
#mobile-more-dialog .mobile-more-support svg { color: #fff; stroke: #fff; }
#mobile-more-dialog .mobile-more-item__beta-badge { color: #fff; background: rgb(255 255 255 / 24%); border: 1px solid rgb(255 255 255 / 45%); }
#mobile-more-dialog .mobile-more-help summary,
#mobile-more-dialog .mobile-more-tile__icon,
#mobile-more-dialog .mobile-more-tile__label,
#mobile-more-dialog .app-footer-panel * { color: #fff; }
#mobile-more-dialog .app-footer-panel a { text-decoration-color: rgb(255 255 255 / 70%); }

/* v5.85：這個選單才是真的玻璃——後面的內容要透出來。對話框預設的 56% 深遮罩會把玻璃染黑，這個選單改成很淡的遮罩（不模糊），
   讓選單後面的頁面維持明亮，跟底部主選單看到的底一樣。 */
#mobile-more-dialog::backdrop {
  background: rgb(20 40 34 / 14%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ===== v5.86（Lucas）：按「＋」選記帳方式（第一次問、之後記住）＋長按「＋」改用另一種的提示 ===== */
.entry-mode { width: min(100%, 400px); }
.entry-mode h2 { font-size: 1.15rem; line-height: 1.4; }
.entry-mode__choices { display: grid; gap: 12px; margin-top: 4px; }
.entry-mode__choice {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 72px;
  padding: 14px 16px;
  color: var(--ink);
  font: inherit;
  text-align: left;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface, #fffdf8));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 16px;
  cursor: pointer;
}
.entry-mode__choice:hover, .entry-mode__choice:focus-visible { background: color-mix(in srgb, var(--accent) 13%, var(--surface, #fffdf8)); }
.entry-mode__choice:active { transform: scale(0.99); }
.entry-mode__choice strong { display: block; font-size: 1.05rem; }
.entry-mode__choice small { display: block; margin-top: 2px; color: var(--muted); font-size: 0.85rem; line-height: 1.45; }
.entry-mode__icon { display: grid; flex: none; width: 46px; height: 46px; place-items: center; color: #fff; background: var(--accent); border-radius: 14px; }
.entry-mode__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.entry-mode__note { margin: 4px 0 0; color: var(--muted); font-size: 0.8rem; line-height: 1.6; }

.mobile-nav__add { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
/* 預設是語音時，「＋」右下角一個小麥克風，提醒「按下去會開語音」 */
.mobile-nav__add.is-voice-default::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6b57' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21'/%3E%3C/svg%3E") center / 11px no-repeat;
  box-shadow: 0 1px 3px rgb(0 0 0 / 25%);
}
.add-hold-hint {
  position: fixed;
  z-index: 60;
  transform: translate(-50%, -100%);
  padding: 8px 14px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  background: rgb(25 40 34 / 88%);
  border-radius: 999px;
  box-shadow: 0 6px 16px rgb(0 0 0 / 22%);
  pointer-events: none;
}
.add-hold-hint.is-armed { background: var(--accent); }

/* v5.86：選擇記帳方式的對話框也改成跟主選單、更多功能同一種玻璃（透明綠、上緣高光、亮邊、白字、淡遮罩），簡約一體 */
#entry-mode-dialog::backdrop { background: rgb(20 40 34 / 14%); -webkit-backdrop-filter: none; backdrop-filter: none; }
#entry-mode-dialog .entry-mode {
  position: relative;
  isolation: isolate;
  color: #fff;
  border: 0;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 16%) 0%, rgb(255 255 255 / 0%) 45%),
    linear-gradient(120deg, color-mix(in srgb, color-mix(in srgb, var(--accent-bright) 30%, var(--accent-strong)) 36%, transparent), color-mix(in srgb, color-mix(in srgb, var(--accent-bright) 8%, var(--accent-strong)) 46%, transparent));
  -webkit-backdrop-filter: blur(9px) saturate(160%) brightness(0.9);
  backdrop-filter: blur(9px) saturate(160%) brightness(0.9);
  box-shadow:
    0 18px 40px rgb(10 40 32 / 30%),
    inset 0 0 0 1px rgb(255 255 255 / 28%),
    inset 0 2px 3px rgb(255 255 255 / 38%),
    inset 0 -3px 6px rgb(5 30 25 / 30%);
  text-shadow: 0 1px 3px rgb(0 0 0 / 32%);
}
#entry-mode-dialog .entry-mode::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(100deg, rgb(190 255 150 / 0%) 12%, rgb(190 255 150 / 85%) 34%, rgb(255 190 230 / 70%) 52%, rgb(255 255 255 / 0%) 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0.8;
}
#entry-mode-dialog .entry-mode > * { position: relative; z-index: 1; }
#entry-mode-dialog .eyebrow,
#entry-mode-dialog h2,
#entry-mode-dialog .entry-mode__note { color: #fff; }
#entry-mode-dialog .eyebrow { opacity: 0.85; }
#entry-mode-dialog .close-button { color: #fff; background: rgb(255 255 255 / 18%); }
#entry-mode-dialog .close-button:hover { background: rgb(255 255 255 / 26%); }
#entry-mode-dialog .entry-mode__choice {
  color: #fff;
  background: rgb(255 255 255 / 12%);
  border: 1px solid rgb(255 255 255 / 40%);
}
#entry-mode-dialog .entry-mode__choice:hover,
#entry-mode-dialog .entry-mode__choice:focus-visible { background: rgb(255 255 255 / 20%); }
#entry-mode-dialog .entry-mode__choice small { color: #fff; opacity: 0.9; }
#entry-mode-dialog .entry-mode__icon { color: #fff; background: transparent; border: 1.5px solid rgb(255 255 255 / 75%); border-radius: 50%; }
#entry-mode-dialog .entry-mode__icon svg { filter: drop-shadow(0 1px 2px rgb(0 0 0 / 30%)); }
@media (prefers-reduced-transparency: reduce) {
  #entry-mode-dialog .entry-mode { background: #3d5d52; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
#entry-mode-dialog .entry-mode__note { text-wrap: pretty; }
/* v5.86（Lucas）：兩個選項改成膠囊按鈕；說明分三行，第一行大字、後兩行中字 */
#entry-mode-dialog .entry-mode__choice { min-height: 64px; padding: 10px 22px 10px 10px; border-radius: 999px; }
#entry-mode-dialog .entry-mode__icon { width: 44px; height: 44px; }
#entry-mode-dialog .entry-mode__note { display: grid; gap: 4px; margin-top: 8px; text-align: center; }
#entry-mode-dialog .entry-mode__note strong { font-size: 1.05rem; font-weight: 700; }
#entry-mode-dialog .entry-mode__note span { font-size: 0.9rem; opacity: 0.92; }

/* ===== v5.87（Lucas）：Android 頂端「安裝醬記 App」橫幅——跟主選單同一種玻璃（透明綠、上緣高光、亮邊、白字） ===== */
.install-top-banner {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 560px;
  margin: calc(env(safe-area-inset-top, 0px) + 8px) 12px 0;
  padding: 10px 10px 10px 12px;
  color: #fff;
  border-radius: 22px;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 16%) 0%, rgb(255 255 255 / 0%) 45%),
    linear-gradient(120deg, color-mix(in srgb, color-mix(in srgb, var(--accent-bright) 30%, var(--accent-strong)) 36%, transparent), color-mix(in srgb, color-mix(in srgb, var(--accent-bright) 8%, var(--accent-strong)) 46%, transparent));
  -webkit-backdrop-filter: blur(9px) saturate(160%) brightness(0.84);
  backdrop-filter: blur(9px) saturate(160%) brightness(0.84);
  box-shadow:
    0 10px 18px rgb(20 60 50 / 30%),
    inset 0 0 0 1px rgb(255 255 255 / 30%),
    inset 0 2px 3px rgb(255 255 255 / 45%),
    inset 0 -3px 6px rgb(5 30 25 / 35%);
  text-shadow: 0 1px 3px rgb(0 0 0 / 32%);
  animation: install-top-in 360ms var(--ease, ease-out);
}
.install-top-banner[hidden] { display: none; }
.install-top-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(100deg, rgb(190 255 150 / 0%) 12%, rgb(190 255 150 / 90%) 34%, rgb(255 190 230 / 75%) 52%, rgb(255 255 255 / 0%) 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0.85;
}
.install-top-banner__icon { flex: none; width: 40px; height: 40px; border-radius: 11px; box-shadow: 0 2px 6px rgb(0 0 0 / 22%); }
.install-top-banner__text { display: grid; flex: 1; min-width: 0; gap: 1px; }
.install-top-banner__text strong { font-size: 0.98rem; line-height: 1.3; }
.install-top-banner__text small { font-size: 0.78rem; opacity: 0.95; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.install-top-banner__install {
  flex: none;
  min-height: 38px;
  padding: 0 18px;
  color: #fff;
  font: inherit;
  font-weight: 800;
  background: rgb(255 255 255 / 22%);
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: 999px;
  cursor: pointer;
  text-shadow: inherit;
}
.install-top-banner__install:active { background: rgb(255 255 255 / 32%); }
.install-top-banner__close {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  color: #fff;
  font: inherit;
  font-size: 1.15rem;
  line-height: 1;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  text-shadow: inherit;
}
@keyframes install-top-in { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .install-top-banner { animation: none; } }
@media (min-width: 584px) { .install-top-banner { margin-inline: auto; } }
@media (prefers-reduced-transparency: reduce) {
  .install-top-banner { background: #3d5d52; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* v5.87：iPhone 安裝教學影片視窗——跟頂端橫幅、主選單同一種玻璃 */
#install-video-dialog::backdrop { background: rgb(20 40 34 / 30%); }
#install-video-dialog .install-video {
  position: relative;
  isolation: isolate;
  width: min(100%, 440px);
  color: #fff;
  border: 0;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 16%) 0%, rgb(255 255 255 / 0%) 45%),
    linear-gradient(120deg, color-mix(in srgb, color-mix(in srgb, var(--accent-bright) 30%, var(--accent-strong)) 62%, transparent), color-mix(in srgb, color-mix(in srgb, var(--accent-bright) 8%, var(--accent-strong)) 72%, transparent));
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 18px 40px rgb(10 40 32 / 30%), inset 0 0 0 1px rgb(255 255 255 / 28%), inset 0 2px 3px rgb(255 255 255 / 38%);
  text-shadow: 0 1px 3px rgb(0 0 0 / 30%);
}
#install-video-dialog h2 { color: #fff; font-size: 1.1rem; }
#install-video-dialog .close-button { color: #fff; background: rgb(255 255 255 / 18%); }
.install-video__more {
  justify-self: center;
  margin-top: 10px;
  min-height: 40px;
  padding: 0 20px;
  color: #fff;
  font: inherit;
  font-weight: 700;
  background: rgb(255 255 255 / 16%);
  border: 1px solid rgb(255 255 255 / 50%);
  border-radius: 999px;
  cursor: pointer;
  text-shadow: inherit;
}

/* ===== v5.87／v5.90（Lucas）：iPhone 安裝教學動畫——整支手機＋手指依序點擊（Safari／Chrome）；v5.90 依 Lucas 的 iPhone 實際截圖重畫：
   Safari 下方是「‹｜≡ johns.tw ↻｜分頁」三段玻璃列，≡ 打開選單 →「分享」→ 分享選單先「檢視較多」才有「加入主畫面」。 ===== */
.install-anim__tabs { display: flex; justify-content: center; gap: 6px; margin: 2px 0 10px; }
.install-anim__tabs button {
  min-height: 34px; padding: 0 18px; color: #fff; font: inherit; font-size: 0.88rem; font-weight: 700;
  background: rgb(255 255 255 / 10%); border: 1px solid rgb(255 255 255 / 40%); border-radius: 999px; cursor: pointer; text-shadow: inherit;
}
.install-anim__tabs button[aria-selected="true"] { color: #1f4f43; background: #fff; text-shadow: none; }
.install-anim { display: flex; justify-content: center; }
.install-anim__caption { min-height: 2.9em; margin: 12px 4px 4px; font-size: 0.98rem; font-weight: 700; line-height: 1.45; text-align: center; }
.install-anim__dots { display: flex; justify-content: center; gap: 8px; }
.install-anim__dots button { width: 8px; height: 8px; padding: 0; background: rgb(255 255 255 / 40%); border: 0; border-radius: 50%; cursor: pointer; }
.install-anim__dots button.is-active { width: 22px; background: #fff; border-radius: 999px; }

.ph { position: relative; width: 206px; height: 424px; padding: 9px; background: #1c1f1e; border-radius: 40px; box-shadow: 0 14px 30px rgb(0 0 0 / 35%), inset 0 0 0 2px #3a3f3d; text-shadow: none; }
.ph-island { position: absolute; top: 17px; left: 50%; width: 62px; height: 18px; transform: translateX(-50%); background: #000; border-radius: 999px; z-index: 6; }
.ph-screen { position: relative; width: 100%; height: 100%; overflow: hidden; color: #1c1f1e; background: #f6f2e8; border-radius: 31px; font-size: 9px; }
.ph-screen svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ph-status { position: absolute; top: 0; left: 0; right: 0; height: 30px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px 0 22px; font-size: 9px; z-index: 2; }
.ph-status span { width: 22px; height: 8px; border: 1px solid #1c1f1e; border-radius: 3px; }
.ph-page { position: absolute; top: 34px; left: 0; right: 0; bottom: 52px; padding: 6px 10px; display: grid; align-content: start; gap: 7px; }
.ph[data-browser="chrome"] .ph-page { top: 62px; bottom: 40px; }
.ph-page__head { display: flex; align-items: center; gap: 6px; font-size: 9.5px; }
.ph-page__head img { width: 22px; height: 22px; border-radius: 6px; }
.ph-page__card { height: 46px; background: #fffdf6; border-radius: 10px; box-shadow: 0 1px 2px rgb(0 0 0 / 8%); }
.ph-page__card--dark { height: 64px; background: #5f5c55; }

/* Safari（iOS 26）：下方三段玻璃列 */
.ph-sbar { position: absolute; left: 6px; right: 6px; bottom: 10px; display: flex; align-items: center; gap: 5px; z-index: 2; }
.ph-sbar__round, .ph-sbar__pill { background: rgb(232 232 226 / 92%); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%), 0 2px 5px rgb(0 0 0 / 12%); }
.ph-sbar__round { display: grid; flex: none; width: 30px; height: 30px; place-items: center; border-radius: 50%; }
.ph-sbar__pill { display: flex; flex: 1; align-items: center; justify-content: space-between; height: 30px; padding: 0 8px; border-radius: 999px; }
.ph-sbar__pill b { font-size: 10px; font-weight: 600; }
.ph-sbar__icon { display: grid; width: 20px; height: 20px; place-items: center; }
.ph-sbar svg { width: 14px; height: 14px; }
/* ≡ 選單：深灰半透明玻璃、白字 */
.ph-menu {
  position: absolute; left: 16px; right: 30px; bottom: 46px; z-index: 3; padding: 5px 0; color: #fff;
  background: rgb(112 114 110 / 92%); border-radius: 18px; box-shadow: 0 8px 20px rgb(0 0 0 / 25%), inset 0 0 0 1px rgb(255 255 255 / 25%);
  opacity: 0; transform: scale(0.85); transform-origin: 20% 100%; transition: opacity 250ms, transform 300ms cubic-bezier(.2,.8,.2,1); pointer-events: none;
}
.ph-menu__item { display: flex; align-items: center; gap: 8px; height: 22px; padding: 0 12px; font-size: 9.5px; }
.ph-menu__item svg { width: 13px; height: 13px; flex: none; }
.ph-menu i { display: block; height: 1px; margin: 3px 12px; background: rgb(255 255 255 / 25%); }
.ph-screen[data-screen="menu"] .ph-menu { opacity: 1; transform: none; }
.ph-screen[data-screen="menu"] .ph-menu__item[data-anim-target="share"] { background: rgb(255 255 255 / 16%); }

/* Chrome：上方網址列＋下方工具列 */
.ph-url { flex: 1; display: block; padding: 6px 10px; text-align: center; background: #e7e3d9; border-radius: 10px; font-size: 9px; }
.ph-chrome-bar { position: absolute; top: 32px; left: 8px; right: 6px; display: flex; align-items: center; gap: 4px; }
.ph-toolbar { position: absolute; left: 0; right: 0; bottom: 4px; height: 30px; display: flex; align-items: center; justify-content: space-around; padding: 0 6px; }
.ph-btn { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 8px; color: #3c4043; }
.ph-btn svg { width: 15px; height: 15px; }

/* iOS 分享選單：收合 → 檢視較多（展開清單） */
.ph-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; height: 74%; padding: 12px 10px 8px; z-index: 4;
  background: rgb(240 240 237 / 97%); border-radius: 22px 22px 0 0; box-shadow: 0 -6px 16px rgb(0 0 0 / 18%);
  transform: translateY(102%); transition: transform 420ms cubic-bezier(.2,.8,.2,1), height 380ms cubic-bezier(.2,.8,.2,1);
}
.ph-sheet__head { display: flex; gap: 7px; padding-bottom: 7px; border-bottom: 1px solid rgb(0 0 0 / 10%); }
.ph-sheet__thumb { display: grid; flex: none; width: 30px; height: 30px; place-items: center; background: #2f6b5c; border-radius: 7px; }
.ph-sheet__thumb img { width: 20px; height: 20px; border-radius: 5px; }
.ph-sheet__head > span:last-child { display: grid; gap: 1px; min-width: 0; }
.ph-sheet__head b { font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-sheet__head small { color: #888; font-size: 7.5px; }
.ph-sheet__head em { justify-self: start; margin-top: 2px; padding: 1px 7px; font-size: 7px; font-style: normal; background: rgb(0 0 0 / 7%); border-radius: 999px; }
.ph-sheet__people, .ph-sheet__apps, .ph-sheet__acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 7px 0; border-bottom: 1px solid rgb(0 0 0 / 8%); }
.ph-sheet__people { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ph-sheet__people span, .ph-sheet__apps span, .ph-sheet__acts span { display: grid; justify-items: center; gap: 3px; font-size: 7px; text-align: center; line-height: 1.2; }
.ph-sheet__people i { width: 28px; height: 28px; background: #c9c7c1; border-radius: 50%; }
.ph-sheet__apps i { width: 28px; height: 28px; background: #d2d0ca; border-radius: 8px; }
.ph-sheet__apps i.is-air { background: #3b8be8; } .ph-sheet__apps i.is-msg { background: #43c25a; } .ph-sheet__apps i.is-mail { background: #3a86e6; }
.ph-sheet__acts { border-bottom: 0; }
.ph-sheet__acts i { display: grid; width: 28px; height: 28px; place-items: center; font-style: normal; background: #dedcd6; border-radius: 50%; }
.ph-sheet__acts svg { width: 14px; height: 14px; }
.ph-sheet__acts b { font-weight: 400; }
.ph-sheet__more-up { display: none !important; }
.ph-sheet__list { display: none; overflow: hidden; background: #fff; border-radius: 12px; }
.ph-sheet__list div { display: flex; align-items: center; gap: 8px; height: 21px; padding: 0 10px; border-bottom: 1px solid #eee; font-size: 9px; }
.ph-sheet__list svg { width: 13px; height: 13px; flex: none; }
.ph-screen[data-screen="sheet"] .ph-sheet,
.ph-screen[data-screen="sheetMore"] .ph-sheet,
.ph-screen[data-screen="add"] .ph-sheet { transform: none; }
.ph-screen[data-screen="sheet"] .ph-sheet__more i { background: #cfe5dc; }
.ph-screen[data-screen="sheetMore"] .ph-sheet,
.ph-screen[data-screen="add"] .ph-sheet { height: 93%; }
.ph-screen[data-screen="sheetMore"] .ph-sheet__list,
.ph-screen[data-screen="add"] .ph-sheet__list { display: block; }
.ph-screen[data-screen="sheetMore"] .ph-sheet__more-down,
.ph-screen[data-screen="add"] .ph-sheet__more-down { display: none !important; }
.ph-screen[data-screen="sheetMore"] .ph-sheet__more-up,
.ph-screen[data-screen="add"] .ph-sheet__more-up { display: grid !important; }
.ph-screen[data-screen="sheetMore"] b.ph-sheet__more-up,
.ph-screen[data-screen="add"] b.ph-sheet__more-up { display: block !important; }
.ph-screen[data-screen="sheetMore"] .ph-sheet__target { background: #e9f3ef; font-weight: 700; }

/* 加入主畫面頁、主畫面 */
.ph-add { position: absolute; inset: 0; padding: 32px 10px 0; background: #f2f1ef; transform: translateY(102%); transition: transform 420ms cubic-bezier(.2,.8,.2,1); z-index: 5; }
.ph-add__bar { display: flex; align-items: center; justify-content: space-between; height: 26px; font-size: 9px; }
.ph-add__bar span { color: #2f6fd6; } .ph-add__ok { font-weight: 800; }
.ph-add__row { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px; background: #fff; border-radius: 10px; }
.ph-add__row img { width: 34px; height: 34px; border-radius: 8px; }
.ph-add__row span { display: grid; } .ph-add__row small { color: #777; font-size: 8px; }
.ph-screen[data-screen="add"] .ph-add { transform: none; }
.ph-home { position: absolute; inset: 0; padding: 42px 14px 0; background: linear-gradient(160deg, #2d6b5c 0%, #a6c7b5 55%, #e6d7b8 100%); opacity: 0; transition: opacity 400ms; z-index: 6; }
.ph-home__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 10px; }
.ph-app { aspect-ratio: 1; background: hsl(var(--h) 25% 82% / 85%); border-radius: 9px; }
.ph-home__johns { display: grid; justify-items: center; gap: 2px; min-width: 0; color: #fff; font-size: 7.5px; transform: scale(0); }
.ph-home__johns img { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 9px; box-shadow: 0 0 0 2px #fff, 0 0 12px 3px rgb(255 255 255 / 75%); }
.ph-screen[data-screen="home"] .ph-home { opacity: 1; }
.ph-screen[data-screen="home"] .ph-home__johns { animation: ph-pop 600ms 350ms cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes ph-pop { to { transform: scale(1); } }

/* 手指 */
.ph-finger {
  position: absolute; left: var(--x, 62%); top: var(--y, 70%); width: 34px; height: 44px; z-index: 9; pointer-events: none;
  transform: translate(-30%, -8%); opacity: 0; transition: left 900ms cubic-bezier(.4,0,.2,1), top 900ms cubic-bezier(.4,0,.2,1), opacity 250ms;
}
.ph-finger.is-visible { opacity: 1; }
.ph-finger svg { width: 100%; height: 100%; fill: #fff; stroke: #1c1f1e; stroke-width: 2.4; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 35%)); transition: transform 150ms; transform-origin: 40% 10%; }
.ph-finger.is-tap svg { transform: scale(0.88); }
.ph-finger__ripple { position: absolute; left: 30%; top: 8%; width: 30px; height: 30px; margin: -15px 0 0 -15px; background: rgb(47 111 214 / 35%); border-radius: 50%; transform: scale(0); opacity: 0; }
.ph-finger.is-tap .ph-finger__ripple { animation: ph-ripple 500ms ease-out; }
@keyframes ph-ripple { from { transform: scale(0.3); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ph-sheet, .ph-add, .ph-home, .ph-finger, .ph-menu { transition: none; }
  .ph-screen[data-screen="home"] .ph-home__johns { animation: none; transform: none; }
}
@media (max-height: 700px) { .ph { width: 180px; height: 370px; } }

/* ===== v5.89（Lucas）：安裝橫幅收起後的浮動安裝鈕——右下、主選單上方，同一種玻璃；點了再展開橫幅 ===== */
.install-fab {
  position: fixed;
  right: 14px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 128px);
  z-index: 70;
  display: grid;
  width: 56px;
  height: 56px;
  padding: 0;
  place-items: center;
  align-content: center;
  gap: 1px;
  color: #fff;
  font: inherit;
  font-size: 0.66rem;
  font-weight: 800;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 18%) 0%, rgb(255 255 255 / 0%) 50%),
    linear-gradient(120deg, color-mix(in srgb, color-mix(in srgb, var(--accent-bright) 30%, var(--accent-strong)) 62%, transparent), color-mix(in srgb, color-mix(in srgb, var(--accent-bright) 8%, var(--accent-strong)) 72%, transparent));
  -webkit-backdrop-filter: blur(9px) saturate(160%) brightness(0.84);
  backdrop-filter: blur(9px) saturate(160%) brightness(0.84);
  box-shadow:
    0 8px 18px rgb(20 60 50 / 32%),
    inset 0 0 0 1px rgb(255 255 255 / 34%),
    inset 0 2px 3px rgb(255 255 255 / 45%),
    inset 0 -3px 6px rgb(5 30 25 / 35%);
  text-shadow: 0 1px 3px rgb(0 0 0 / 32%);
  animation: install-fab-in 320ms var(--ease, ease-out);
}
.install-fab[hidden] { display: none; }
.install-fab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 30%)); }
.install-fab:active { transform: scale(0.95); }
@keyframes install-fab-in { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .install-fab { animation: none; } }
@media (prefers-reduced-transparency: reduce) { .install-fab { background: #3d5d52; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* v5.89：浮動鈕在淺色頁面上要夠明顯——改成「⬇ 安裝 App」膠囊、綠色更實（85～92%） */
.install-fab {
  display: inline-flex;
  width: auto;
  height: 46px;
  padding: 0 18px 0 14px;
  gap: 6px;
  font-size: 0.92rem;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 18%) 0%, rgb(255 255 255 / 0%) 50%),
    linear-gradient(120deg, color-mix(in srgb, color-mix(in srgb, var(--accent-bright) 30%, var(--accent-strong)) 85%, transparent), color-mix(in srgb, color-mix(in srgb, var(--accent-bright) 8%, var(--accent-strong)) 92%, transparent));
}
.install-fab svg { width: 20px; height: 20px; }

/* ===== v5.91（Lucas）：教學視窗的「圖文步驟」——STEP.01～，每步一張縮小的靜態手機畫面＋標題 ===== */
#install-video-dialog.is-steps .install-anim,
#install-video-dialog.is-steps .install-anim__caption,
#install-video-dialog.is-steps .install-anim__dots { display: none; }
.install-steps { display: grid; gap: 10px; max-height: min(62vh, 560px); margin: 0; padding: 0 2px; overflow-y: auto; list-style: none; -webkit-overflow-scrolling: touch; }
.install-steps[hidden] { display: none; }
.install-step { display: flex; align-items: center; gap: 14px; padding: 10px; background: rgb(255 255 255 / 12%); border: 1px solid rgb(255 255 255 / 28%); border-radius: 18px; }
.install-step__phone { flex: none; width: 112px; height: 231px; overflow: hidden; }
.install-step__phone .ph { transform: scale(0.545); transform-origin: top left; }
.install-step__text { display: grid; gap: 6px; }
.install-step__label { justify-self: start; padding: 2px 10px; color: #1f4f43; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; background: #fff; border-radius: 999px; text-shadow: none; }
.install-step__text strong { font-size: 1rem; line-height: 1.45; }
/* 靜態畫面：不要任何過場，直接停在那一步的樣子 */
.ph-screen.is-static, .ph-screen.is-static * { transition: none !important; animation: none !important; }
.ph-screen.is-static .ph-home__johns { transform: none; }
.ph-screen.is-static .ph-finger::after {
  content: ""; position: absolute; left: 30%; top: 8%; width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border: 2px solid rgb(47 111 214 / 70%); border-radius: 50%; background: rgb(47 111 214 / 18%);
}

/* ===== v5.92（Lucas）：記帳的「分帳」——點擊要分攤的人（文字更直接）＋平均分攤／自訂金額（例如總共 230：你 105、朋友 125） ===== */
.entry-split__label { margin: 0; font-size: 0.86rem; font-weight: 800; }
.entry-split__label[hidden], .entry-split__mode[hidden], .entry-split__custom[hidden] { display: none; }
.entry-split__mode { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: #ebe5d6; border-radius: 999px; }
.entry-split__mode button { min-height: 34px; color: var(--muted); font: inherit; font-size: 0.86rem; font-weight: 800; background: transparent; border: 0; border-radius: 999px; cursor: pointer; }
.entry-split__mode button[aria-pressed="true"] { color: #fff; background: var(--accent); }
.entry-split__custom { display: grid; gap: 0.5rem; }
.entry-split__rows { display: grid; gap: 0.45rem; }
.entry-split__row { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 6px 6px 14px; background: #fffdf6; border: 1px solid var(--line); border-radius: 12px; font-weight: 700; }
.entry-split__money { display: flex; align-items: center; gap: 4px; width: 150px; padding: 0 12px; background: #f4f0e6; border-radius: 10px; }
.entry-split__money i { color: var(--muted); font-style: normal; font-weight: 800; }
.entry-split__money input { width: 100%; min-width: 0; min-height: 40px; padding: 0; color: var(--ink); font: inherit; font-size: 1.05rem; font-weight: 800; text-align: right; background: transparent; border: 0; outline: 0; }
.entry-split__status { margin: 0; font-size: 0.84rem; font-weight: 800; color: var(--muted); }
.entry-split__status[data-tone="ok"] { color: #0e6b5c; }
.entry-split__status[data-tone="warn"] { color: #b3472d; }

/* v5.98（Lucas：成交金額是算出來的，不是要填的欄位；有底色用戶會直接點它輸入、以為壞掉）：拿掉淺色底與框，只當算出來的結果顯示 */
#entry-form.entry-simple .invest-total {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 6px 12px 0;
  pointer-events: none;
}

/* v5.100（Lucas）：成本卡裡各證券帳戶的明細字太小，放大；首頁庫存總覽小工具 */
.broker-card__breakdown { gap: 6px; margin-top: 8px; padding-top: 10px; }
.broker-card__breakdown li { align-items: baseline; font-size: 1.02rem; font-weight: 700; }
.broker-card__breakdown li span:last-child { color: var(--ink); font-size: 1.1rem; font-weight: 800; }
.home-portfolio { cursor: pointer; }
.home-portfolio[hidden] { display: none; }
/* v5.100：成本卡很窄，帳戶名稱放大後會被擠成直排；改成名稱一行、金額一行 */
.broker-card__breakdown li { display: grid; gap: 0; justify-content: stretch; }
.broker-card__breakdown li span:first-child { white-space: nowrap; }
.broker-card__breakdown li span:last-child { text-align: right; }

/* v5.101：投資表單「補登舊紀錄」開關 */
.invest-backfill { grid-column: 1 / -1; display: grid; gap: 4px; margin-top: 4px; padding: 4px 2px; }
.invest-backfill__check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 1rem; font-weight: 700; cursor: pointer; }
.invest-backfill__check input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--accent); }
.invest-backfill small { color: var(--muted); font-size: 0.8rem; line-height: 1.4; }

/* v5.102（Lucas）：庫存分析——上方三格總覽、每檔多顯示股數與損益；漲（賺）紅、跌（賠）綠跟股價同一套顏色 */
.home-stocks__summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 8px; padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); }
.home-stocks__summary > div { display: grid; gap: 4px; min-width: 0; }
.home-stocks__summary small { color: var(--muted); font-size: 0.72rem; font-weight: 650; line-height: 1.25; }
.home-stocks__summary b { overflow: hidden; color: var(--ink); font-size: 1.02rem; font-weight: 800; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.home-stocks__summary .is-up b { color: var(--stock-up); }
.home-stocks__summary .is-down b { color: var(--stock-down); }
.home-stock__name .home-stock__shares { color: var(--ink); font-size: 0.78rem; font-weight: 700; }
.home-stock__price .home-stock__gainline { margin-top: 2px; font-size: 0.74rem; font-weight: 750; white-space: nowrap; }
.home-stock__price .home-stock__gainline.is-up { color: var(--stock-up); }
.home-stock__price .home-stock__gainline.is-down { color: var(--stock-down); }
.home-stock { min-height: 80px; }

/* v5.102 調整（Lucas）：右邊由上到下＝損益金額、目前行情、損益比（以成本算）；字放大 */
.home-stock__price .home-stock__gain-amount { font-size: 1.12rem; font-weight: 800; color: var(--ink); }
.home-stock__price .home-stock__quote { color: var(--ink); font-size: 0.95rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.home-stock__price .home-stock__gain-ratio { margin: 0; font-size: 0.95rem; font-weight: 800; }
.home-stock__price .home-stock__gain-amount.is-up, .home-stock__price .home-stock__gain-ratio.is-up { color: var(--stock-up); }
.home-stock__price .home-stock__gain-amount.is-down, .home-stock__price .home-stock__gain-ratio.is-down { color: var(--stock-down); }
.home-stock { min-height: 92px; }

/* v5.102（Lucas）：庫存總覽卡——累積損益／成本總額改成跟庫存分析一樣的緊湊兩格（不再被成本明細撐高）；各證券帳戶成本移到下面整列顯示 */
.broker-card__tiles { gap: 8px; padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); }
.broker-card__tiles > div { align-content: start; padding: 0; background: transparent; border-radius: 0; }
.broker-card__tiles small { font-size: 0.78rem; }
.broker-card__tiles b { font-size: 1.25rem; }
.broker-card > .broker-card__breakdown { margin: 0; padding: 10px 0 2px; border-top: 0; gap: 6px; }
.broker-card > .broker-card__breakdown li { display: flex; justify-content: space-between; align-items: baseline; }
.broker-card > .broker-card__breakdown li span:first-child { font-size: 0.95rem; }
.broker-card > .broker-card__breakdown li span:last-child { font-size: 1.05rem; }

/* v5.102（Lucas）：庫存市值要一眼看清——獨佔一列、字放大；成本總額、累積損益在下面兩格 */
.home-stocks__summary { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
.home-stocks__summary .home-stocks__summary-main { grid-column: 1 / -1; gap: 2px; }
.home-stocks__summary .home-stocks__summary-main small { font-size: 0.86rem; }
.home-stocks__summary .home-stocks__summary-main b { font-size: 2.3rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; }
.home-stocks__summary > div:not(.home-stocks__summary-main) b { font-size: 1.2rem; }

/* v5.102（Lucas）：成本總額點一下展開各證券帳戶成本 */
.broker-card__costtoggle, .home-stocks__costtoggle { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 0; color: inherit; font: inherit; text-align: left; background: transparent; border: 0; cursor: pointer; }
.broker-card__costtoggle small, .home-stocks__costtoggle small { display: inline-flex; align-items: center; gap: 6px; }
.broker-card__costtoggle b { color: var(--ink); font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.broker-card__costtoggle small, .home-stocks__costtoggle small { color: var(--muted); font-size: 0.78rem; font-weight: 650; }
.broker-card__costtoggle i, .home-stocks__costtoggle i { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.broker-card__costtoggle[aria-expanded="true"] i, .home-stocks__costtoggle[aria-expanded="true"] i { transform: rotate(-135deg); }
.broker-card__breakdown[hidden], .home-stocks__cost-list[hidden] { display: none; }
.home-stocks__cost-list { grid-column: 1 / -1; display: grid; gap: 8px; margin: 0; padding: 10px 0 0; list-style: none; border-top: 1px dashed color-mix(in srgb, var(--ink) 15%, transparent); }
.home-stocks__cost-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; color: var(--muted); font-size: 0.95rem; font-weight: 700; }
.home-stocks__cost-list li span:last-child { color: var(--ink); font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }

/* v5.103（Lucas）：追蹤清單 */
.watch-form { display: flex; gap: 8px; margin: 4px 0 8px; }
.watch-form input { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; color: var(--ink); font: inherit; font-size: 1rem; background: color-mix(in srgb, var(--ink) 4%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 14px; }
.watch-form .button { min-height: 44px; flex: none; padding: 0 18px; }
.watch-stock { grid-template-columns: minmax(0, 1fr) 112px auto; align-items: center; cursor: pointer; }
.watch-stock .home-stock__quote-big { color: var(--ink); font-size: 1.12rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.watch-stock .home-stock__price .home-stock__gain-ratio { margin: 0; font-size: 0.95rem; font-weight: 800; }
.watch-stock .home-stock__price .home-stock__gain-ratio.is-up { color: var(--stock-up); }
.watch-stock .home-stock__price .home-stock__gain-ratio.is-down { color: var(--stock-down); }
.watch-stock__analysis { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--muted); font-size: 0.82rem; font-weight: 650; line-height: 1.4; }
.watch-stock__remove { flex: none; min-height: 32px; padding: 0 10px; color: var(--muted); font: inherit; font-size: 0.8rem; font-weight: 700; background: transparent; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius: 999px; cursor: pointer; }

/* v5.104（Lucas）：股票行情／庫存分析改成搜尋欄，搜到直接加入追蹤；追蹤中的股票接在庫存下面 */
.watch-form { position: relative; display: block; margin: 4px 0 10px; }
.watch-form input { width: 100%; min-height: 46px; padding: 0 16px; color: var(--ink); font: inherit; font-size: 1rem; background: color-mix(in srgb, var(--ink) 4%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 999px; box-sizing: border-box; }
.watch-suggest { display: grid; margin-top: 6px; overflow: hidden; background: var(--surface, #fffdf8); border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 16px; box-shadow: 0 10px 24px rgb(60 50 30 / 12%); }
.watch-suggest[hidden] { display: none; }
.watch-suggest button { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; color: var(--ink); font: inherit; font-size: 0.98rem; text-align: left; background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); cursor: pointer; }
.watch-suggest button:last-child { border-bottom: 0; }
.watch-suggest button b { margin-right: 8px; font-variant-numeric: tabular-nums; }
.watch-suggest button em { flex: none; color: #0e6b5c; font-size: 0.85rem; font-style: normal; font-weight: 800; }
.watch-suggest small { padding: 14px 16px; color: var(--muted); }
.home-stocks__sub { margin: 14px 0 2px; color: var(--muted); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.08em; }
.home-stocks__summary[hidden] { display: none; }

/* v5.104（Lucas）：小工具頁每個分類要有明顯段落與標題圖示 */
.widget-gallery { gap: 40px; }
.widget-gallery__group { padding-top: 6px; }
.widget-gallery__head { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.widget-gallery__group .widget-gallery__head h3 { margin: 0; color: var(--ink); font-size: 1.25rem; font-weight: 800; letter-spacing: 0.02em; }
.widget-gallery__head small { margin-left: auto; color: var(--muted); font-size: 0.82rem; font-weight: 650; }
.widget-gallery__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; color: #0e6b5c; background: color-mix(in srgb, #0e6b5c 12%, var(--surface, #fffdf8)); border-radius: 14px; }
.widget-gallery__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ===== v5.105（Lucas）：主選單「總覽 收支 ＋ 理財 更多」＋往上彈出的泡泡膠囊選單 =====
   膠囊材質跟主選單同一種深綠玻璃（配方取自 v5.37 .mobile-nav__base::before）；彈出時由下往上一顆顆、帶一點回彈。
   選單層 z-index 在主選單底下：分類按鈕仍可直接點、切換到另一組。 */
.nav-bubbles { position: fixed; inset: 0; z-index: 19; }
.nav-bubbles[hidden] { display: none; }
.nav-bubbles__scrim { position: absolute; inset: 0; background: rgb(18 30 25 / 0%); transition: background 220ms ease, backdrop-filter 220ms ease; }
.nav-bubbles.is-open .nav-bubbles__scrim { background: rgb(18 30 25 / 26%); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.nav-bubbles__stack { position: absolute; display: flex; flex-direction: column-reverse; align-items: center; gap: 10px; }
.nav-bubbles__stack[data-align="right"] { align-items: flex-end; }
.nav-bubble {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 22px 0 16px;
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgb(5 30 25 / 35%);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 16%) 0%, rgb(255 255 255 / 0%) 45%),
    linear-gradient(120deg, color-mix(in srgb, color-mix(in srgb, var(--accent-bright) 30%, var(--accent-strong)) 62%, transparent), color-mix(in srgb, color-mix(in srgb, var(--accent-bright) 8%, var(--accent-strong)) 72%, transparent));
  -webkit-backdrop-filter: blur(10px) saturate(160%) brightness(0.9);
  backdrop-filter: blur(10px) saturate(160%) brightness(0.9);
  box-shadow:
    0 10px 22px rgb(10 40 32 / 26%),
    inset 0 0 0 1px rgb(255 255 255 / 30%),
    inset 0 2px 3px rgb(255 255 255 / 40%),
    inset 0 -3px 6px rgb(5 30 25 / 30%);
  opacity: 0;
  transform: translateY(16px) scale(0.6);
  transform-origin: 50% 100%;
  transition:
    transform 340ms cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i, 0) * 45ms),
    opacity 200ms ease calc(var(--i, 0) * 45ms);
}
.nav-bubbles__stack[data-align="right"] .nav-bubble { transform-origin: 100% 100%; }
.nav-bubbles.is-open .nav-bubble { opacity: 1; transform: none; }
.nav-bubbles.is-closing .nav-bubble { transition: transform 150ms ease-in, opacity 150ms ease-in; transform: translateY(10px) scale(0.8); }
.nav-bubble svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 1px rgb(5 30 25 / 30%)); }
.nav-bubble:active { transform: scale(0.96); }
.nav-bubble.is-current { box-shadow: 0 10px 22px rgb(10 40 32 / 26%), inset 0 0 0 2px rgb(190 255 200 / 85%), inset 0 2px 3px rgb(255 255 255 / 40%); }
.nav-bubble__beta { padding: 2px 8px; font-size: 0.72rem; font-style: normal; font-weight: 800; background: rgb(255 255 255 / 22%); border-radius: 999px; }
.mobile-nav .mobile-nav__page > button.mobile-nav__cat.is-active,
.mobile-nav .mobile-nav__page > button.mobile-nav__cat.is-open { color: var(--dock-selected); }
.mobile-nav .mobile-nav__page > button.mobile-nav__cat.is-open .nav-icon { transform: translateY(-2px); transition: transform 200ms ease; }
@media (prefers-reduced-motion: reduce) {
  .nav-bubble, .nav-bubbles.is-closing .nav-bubble { transform: none; transition: opacity 150ms ease; }
}
@media (prefers-reduced-transparency: reduce) {
  .nav-bubble { background: #2c5b4f; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (min-width: 960px) { .nav-bubbles { display: none; } }

/* ===== v5.106（Lucas 選 B 方案）：泡泡膠囊改成「一片玻璃選單卡」——所有項目在同一張深綠玻璃卡裡，細線分隔，
   底部小尖角指向按鈕；卡片從按鈕位置縮放彈出，裡面每列依序淡入。覆蓋 v5.105 的膠囊樣式。 ===== */
.nav-bubbles__stack {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-width: 200px;
  padding: 6px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 16%) 0%, rgb(255 255 255 / 0%) 40%),
    linear-gradient(120deg, color-mix(in srgb, color-mix(in srgb, var(--accent-bright) 30%, var(--accent-strong)) 70%, transparent), color-mix(in srgb, color-mix(in srgb, var(--accent-bright) 8%, var(--accent-strong)) 80%, transparent));
  -webkit-backdrop-filter: blur(14px) saturate(160%) brightness(0.9);
  backdrop-filter: blur(14px) saturate(160%) brightness(0.9);
  box-shadow:
    0 18px 40px rgb(10 40 32 / 30%),
    inset 0 0 0 1px rgb(255 255 255 / 28%),
    inset 0 2px 3px rgb(255 255 255 / 35%);
  opacity: 0;
  transform: translateY(10px) scale(0.86);
  transform-origin: var(--tail-x, 50%) calc(100% + 8px);
  transition: transform 300ms cubic-bezier(0.34, 1.4, 0.64, 1), opacity 180ms ease;
}
.nav-bubbles__stack::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: calc(var(--tail-x, 50%) - 8px);
  width: 16px;
  height: 16px;
  border-radius: 0 0 4px 0;
  background: color-mix(in srgb, color-mix(in srgb, var(--accent-bright) 8%, var(--accent-strong)) 80%, transparent);
  box-shadow: inset -1px -1px 0 rgb(255 255 255 / 28%);
  transform: rotate(45deg);
}
.nav-bubbles.is-open .nav-bubbles__stack { opacity: 1; transform: none; }
.nav-bubbles.is-closing .nav-bubbles__stack { opacity: 0; transform: translateY(6px) scale(0.92); transition: transform 140ms ease-in, opacity 140ms ease-in; }
.nav-bubbles__stack .nav-bubble,
.nav-bubbles__stack[data-align="right"] .nav-bubble {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  gap: 12px;
  font-size: 0.98rem;
  font-weight: 650;
  text-align: left;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  border-radius: 14px;
  opacity: 0;
  transform: translateY(6px);
  transition: transform 260ms ease calc(80ms + var(--i, 0) * 35ms), opacity 220ms ease calc(80ms + var(--i, 0) * 35ms), background 120ms ease;
}
.nav-bubbles__stack .nav-bubble + .nav-bubble::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 1px;
  background: rgb(255 255 255 / 16%);
}
.nav-bubbles.is-open .nav-bubbles__stack .nav-bubble { opacity: 1; transform: none; }
.nav-bubbles.is-closing .nav-bubbles__stack .nav-bubble { opacity: 0; transform: none; transition: opacity 100ms ease; }
.nav-bubbles__stack .nav-bubble:active { background: rgb(255 255 255 / 12%); transform: none; }
.nav-bubbles__stack .nav-bubble.is-current { background: rgb(255 255 255 / 14%); box-shadow: none; }
.nav-bubbles__stack .nav-bubble.is-current::after { content: ""; width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: rgb(190 255 200); }
.nav-bubbles__stack .nav-bubble__beta { margin-left: 2px; }
@media (hover: hover) { .nav-bubbles__stack .nav-bubble:hover { background: rgb(255 255 255 / 10%); } }
@media (prefers-reduced-motion: reduce) {
  .nav-bubbles__stack, .nav-bubbles.is-closing .nav-bubbles__stack, .nav-bubbles__stack .nav-bubble { transform: none; transition: opacity 150ms ease; }
}
@media (prefers-reduced-transparency: reduce) {
  .nav-bubbles__stack { background: #2c5b4f; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav-bubbles__stack::after { background: #2c5b4f; }
}

/* v5.107（Lucas）：主選單離底部的距離跟左右一樣（左右 0.9rem）；原本底下有分組小圓點，拿掉後選單貼到最底。
   有 Home 指示條的 iPhone 至少讓出安全區。 */
@media (max-width: 959px) {
  .mobile-nav { bottom: max(0.9rem, env(safe-area-inset-bottom, 0px)); }
}

/* ===== v5.108（Lucas）：分期付款頁與新增視窗 ===== */
.section-heading--page:has([data-installment-new]) { align-items: flex-end; gap: 12px; }
.installment-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 8px; }
.installment-list[hidden] { display: none; }
.installment-list--done { margin-top: 28px; }
.installment-list__title { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 0.95rem; font-weight: 800; }
.installment-card { display: grid; gap: 10px; padding: 18px; background: var(--surface, #fffdf8); border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); border-radius: 22px; box-shadow: 0 8px 22px rgb(60 50 30 / 7%); }
.installment-card.is-due { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.installment-card.is-done { opacity: 0.78; }
.installment-card__head { display: flex; align-items: center; gap: 10px; }
.installment-card__head strong { flex: 1; min-width: 0; overflow: hidden; font-size: 1.12rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.installment-card__icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; color: #0e6b5c; background: color-mix(in srgb, #0e6b5c 12%, var(--surface, #fffdf8)); border-radius: 12px; }
.installment-card__icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.installment-card__amount { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.installment-card__amount span { color: var(--muted); font-size: 0.85rem; font-weight: 700; }
.installment-card__amount b { font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.installment-card__amount small { color: var(--muted); font-size: 0.8rem; }
.installment-card__bar { height: 10px; overflow: hidden; background: color-mix(in srgb, var(--ink) 8%, transparent); border-radius: 999px; }
.installment-card__bar i { display: block; height: 100%; background: linear-gradient(90deg, #2f7a62, #4fa983); border-radius: inherit; transition: width 400ms ease; }
.installment-card__meta { display: flex; justify-content: space-between; gap: 10px; margin: 0; color: var(--muted); font-size: 0.88rem; }
.installment-card__meta b { color: var(--ink); font-variant-numeric: tabular-nums; }
.installment-card__confirm { width: 100%; min-height: 46px; }
.installment-tag { margin-left: 6px; padding: 1px 8px; color: #0e6b5c; font-size: 0.72rem; font-style: normal; font-weight: 800; background: color-mix(in srgb, #0e6b5c 12%, transparent); border-radius: 999px; vertical-align: 2px; }
.installment-form { display: grid; gap: 14px; }
.installment-form__field { display: grid; gap: 6px; }
.installment-form__field > span, .installment-form__field > label { font-size: 0.9rem; font-weight: 750; }
.installment-form__field input { width: 100%; min-height: 46px; padding: 0 14px; font: inherit; font-size: 1rem; color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, var(--surface, #fffdf8)); border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 14px; box-sizing: border-box; }
.installment-form__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.installment-form__chips button { min-height: 36px; padding: 0 14px; font: inherit; font-size: 0.88rem; font-weight: 700; color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); border-radius: 999px; cursor: pointer; }
.installment-form__more summary { color: #0e6b5c; font-size: 0.9rem; font-weight: 750; cursor: pointer; }
.installment-form__more[open] { display: grid; gap: 8px; }
.installment-form__more small { color: var(--muted); font-size: 0.8rem; line-height: 1.5; }
.installment-form__preview { margin: 0; padding: 12px 14px; font-size: 0.92rem; font-weight: 700; line-height: 1.5; background: color-mix(in srgb, #0e6b5c 8%, var(--surface, #fffdf8)); border-radius: 14px; }
.installment-form__hint { margin: 0; color: var(--muted); font-size: 0.82rem; line-height: 1.5; }
.installment-form__actions { display: flex; justify-content: flex-end; gap: 10px; }
.installment-form__delete { margin-right: auto; color: var(--danger, #b04437); }

/* v5.108（Lucas）：分期除不盡的零頭放首期（預設）或最後一期 */
.installment-form__remainder { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.installment-form__remainder[hidden] { display: none; }
.installment-form__remainder > span { font-size: 0.9rem; font-weight: 750; }
.installment-form__remainder label { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-size: 0.95rem; font-weight: 650; cursor: pointer; }
.installment-form__remainder input { width: 20px; height: 20px; margin: 0; accent-color: #0e6b5c; }

/* ===== v5.108（Lucas，設計稿 分類icon/recurring-list.html「加 icon」）：固定收支頁加 icon ===== */
/* 1. 上方四張小卡：箭頭符號換成 icon（34px 半透明白底塊、22px icon），icon 在左跨兩行，標籤和金額在右上下排；只改這一頁 */
#recurring-summary .tx-total {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "icon label" "icon value";
  column-gap: 10px;
  row-gap: 2px;
  padding: 12px 14px;
}
#recurring-summary .tx-total i {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: rgb(255 255 255 / 70%);
  color: var(--ink);
}
#recurring-summary .tx-total i .jk-icon { width: 22px; height: 22px; }
#recurring-summary .tx-total > span { font-size: 0.8rem; }
#recurring-summary .tx-total strong { font-size: min(1.1rem, 4.8vw); }

/* 2. 清單標題前的循環月曆 icon */
.recurring-rules-heading { display: flex; align-items: center; gap: 10px; }
.recurring-heading-icon { display: flex; flex: none; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 13px; background: #eef4f1; }
.recurring-heading-icon .jk-icon { width: 26px; height: 26px; }

/* 3. 每條規則前面的分類 icon（38px 底塊、24px icon；收入淡綠、存錢目標淡金） */
.recurring-rule-icon { display: flex; flex: none; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 12px; background: #eef4f1; }
.recurring-rule-icon.is-income { background: #e5f0ea; }
.recurring-rule-icon.is-goal { background: #faf1dc; }
.recurring-rule-icon .jk-icon { width: 24px; height: 24px; }
.recurring-row { grid-template-columns: auto minmax(0, 1fr) auto 10px; gap: 10px; }
.recurring-row.is-paused { opacity: 0.55; }

/* 4. 小字：循環小 icon＋頻率、帳戶；右邊金額下面的到期標籤 */
.recurring-row__main small { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.recurring-row__freq { display: inline-flex; align-items: center; gap: 3px; }
.recurring-row__freq .jk-icon { width: 14px; height: 14px; }
.recurring-row__right { display: grid; justify-items: end; text-align: right; line-height: 1.3; }
.recurring-row__right b { font-size: 1.02rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.recurring-row__right b.is-positive { color: var(--income-green); }
.recurring-row__right b.is-negative { color: var(--ink); }
.recurring-due-tag { display: inline-block; margin-top: 3px; padding: 1px 8px; font-size: 11px; font-weight: 800; white-space: nowrap; border-radius: 999px; color: #6b4a12; background: #faf0dc; }
.recurring-due-tag.is-today { color: #fff; background: #c9862b; }
.recurring-due-tag.is-later { color: var(--muted); background: #f1ece2; }

/* 5. 待確認記帳：每項左邊同一個分類 icon（放在原本左邊那塊裡，手機的左右排版不受影響） */
.recurring-due-main { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.recurring-due-main > div { display: grid; gap: 2px; min-width: 0; }

/* v5.108（Lucas）：總覽最下面的版本與版權 */
.overview-footer { margin: 28px 0 8px; text-align: center; }
.overview-footer .app-footer__version { margin: 0 0 2px; color: var(--muted); font-size: 0.78rem; font-weight: 700; }
.overview-footer .app-footer__copyright { margin: 0; color: var(--muted); font-size: 0.74rem; }
/* v5.108 修正：待確認記帳的 icon 跟名稱同一列（蓋過舊的 .settlement-item 子元素排版）；清單標題靠左；小卡長金額可換行不溢出 */
#recurring-due-list .recurring-due-main, #overview-due-list .recurring-due-main { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; min-width: 0; }
#recurring-due-list .recurring-due-main > .recurring-rule-icon, #overview-due-list .recurring-due-main > .recurring-rule-icon { flex: none; }
#recurring-due-list .recurring-due-main > div, #overview-due-list .recurring-due-main > div { display: grid; gap: 2px; min-width: 0; }
.section-heading.recurring-rules-heading { justify-content: flex-start; }
#recurring-summary .tx-total > span, #recurring-summary .tx-total strong { min-width: 0; overflow-wrap: anywhere; }
#recurring-summary .tx-total strong { white-space: normal; font-size: min(1.05rem, 4.5vw); }

/* v5.109（Lucas）：分期方式（信用卡／無卡分期／AFTEE／其他）與繳款資訊 */
.installment-form__label { font-size: 0.9rem; font-weight: 750; }
.installment-form__chips button[aria-pressed="true"] { color: #fff; background: #0e6b5c; border-color: #0e6b5c; }
.installment-form__providers { padding: 10px; background: color-mix(in srgb, #0e6b5c 6%, var(--surface, #fffdf8)); border-radius: 14px; }
.installment-form__providers button { background: var(--surface, #fffdf8); }
.installment-form__provider-hint { color: var(--muted); font-size: 0.82rem; line-height: 1.5; }
#installment-provider-other { width: 100%; min-height: 44px; padding: 0 14px; font: inherit; font-size: 1rem; color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, var(--surface, #fffdf8)); border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 14px; box-sizing: border-box; }
#installment-provider-other[hidden] { display: none; }
#installment-pay-info { width: 100%; min-height: 64px; padding: 10px 14px; font: inherit; font-size: 0.95rem; line-height: 1.5; color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, var(--surface, #fffdf8)); border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 14px; box-sizing: border-box; resize: vertical; }
.installment-card__title { display: grid; flex: 1; min-width: 0; }
.installment-card__title strong { overflow: hidden; font-size: 1.12rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.installment-card__title small { overflow: hidden; color: var(--muted); font-size: 0.8rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.installment-card__payinfo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 12px; background: color-mix(in srgb, var(--ink) 4%, var(--surface, #fffdf8)); border-radius: 12px; }
.installment-card__payinfo span { grid-column: 1; color: var(--muted); font-size: 0.78rem; font-weight: 750; }
.installment-card__payinfo p { grid-column: 1; margin: 0; font-size: 0.9rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.installment-card__payinfo button { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

/* ===== v5.110（Lucas，設計稿 分類icon/installment-form.html「加 icon」）：分期表單改版 =====
   欄位收進同一張白卡、每列左邊一個 icon；分期方式 2×2 方塊；期數膠囊；試算卡（填好＝深綠）。
   全部限定在 #installment-dialog 底下，蓋過 v5.108／v5.109 的舊表單樣式。 */
#installment-dialog .installment-form { gap: 12px; --if-line: color-mix(in srgb, var(--ink) 12%, transparent); --if-soft: color-mix(in srgb, var(--ink) 4%, var(--surface, #fffdf8)); }
#installment-dialog .installment-form__header { align-items: flex-start; }
#installment-dialog .installment-form__title { display: flex; align-items: center; gap: 10px; }
#installment-dialog .installment-form__title-icon { display: flex; flex: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 14px; background: #faf1dc; }
#installment-dialog .installment-form__title-icon .jk-icon { width: 28px; height: 28px; }

/* 白卡與每一列 */
#installment-dialog .installment-form__rows { display: grid; overflow: hidden; background: color-mix(in srgb, #ffffff 82%, var(--surface, #fffdf8)); border: 1px solid var(--if-line); border-radius: 20px; }
#installment-dialog .installment-form__row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; min-height: 58px; padding: 8px 14px; transition: background 140ms ease; }
#installment-dialog .installment-form__row + .installment-form__row { border-top: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); }
#installment-dialog .installment-form__icon { display: flex; flex: none; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 11px; background: #eef4f1; transition: background 140ms ease; }
#installment-dialog .installment-form__icon .jk-icon { width: 22px; height: 22px; }
#installment-dialog .installment-form__row:focus-within { background: #f6faf8; }
#installment-dialog .installment-form__row:focus-within > .installment-form__icon { background: #dcece5; }
#installment-dialog .installment-form__cell { display: grid; min-width: 0; }
#installment-dialog .installment-form__label { color: var(--muted); font-size: 12px; font-weight: 750; line-height: 1.2; }
#installment-dialog .installment-form__cell input,
#installment-dialog .installment-form__cell textarea { width: 100%; min-width: 0; min-height: 0; padding: 2px 0; color: var(--ink); font: inherit; font-size: 17px; font-weight: 700; background: none; border: 0; border-radius: 0; outline: none; box-shadow: none; }
#installment-dialog .installment-form__cell input::placeholder,
#installment-dialog .installment-form__cell textarea::placeholder { color: color-mix(in srgb, var(--muted) 62%, transparent); font-weight: 600; }
#installment-dialog .installment-form__cell small { display: block; margin-top: 1px; color: var(--muted); font-size: 12px; line-height: 1.35; }
#installment-dialog .installment-form__money { display: flex; align-items: baseline; gap: 4px; }
#installment-dialog .installment-form__money em { color: var(--muted); font-style: normal; font-weight: 800; }
#installment-dialog .installment-form__inline { display: flex; align-items: baseline; gap: 6px; color: var(--muted); font-size: 15px; font-weight: 700; }
#installment-dialog .installment-form__inline input { width: 52px; flex: none; padding: 0 0 1px; text-align: center; border-bottom: 2px solid color-mix(in srgb, var(--ink) 18%, transparent); }
#installment-dialog #installment-pay-info { min-height: 24px; padding: 2px 0; font-size: 15px; font-weight: 600; line-height: 1.5; background: none; border: 0; resize: none; field-sizing: content; max-height: 9.5em; overflow-y: auto; }

/* 期數膠囊＋自訂期數 */
#installment-dialog .installment-form__periods { display: flex; flex-wrap: nowrap; align-items: center; gap: 5px; margin-top: 4px; }
#installment-dialog .installment-form__periods button { min-width: 38px; height: 32px; padding: 0 8px; color: var(--ink); font: inherit; font-size: 14px; font-weight: 750; background: var(--if-soft); border: 1px solid var(--if-line); border-radius: 999px; cursor: pointer; }
#installment-dialog .installment-form__periods button.is-active { color: #fff; background: #0e6b5c; border-color: #0e6b5c; }
#installment-dialog .installment-form__periods #installment-periods { width: 54px; height: 32px; padding: 0 8px; font-size: 14px; font-weight: 750; text-align: center; background: var(--if-soft); border: 1px solid var(--if-line); border-radius: 999px; }

/* 分期方式：icon＋標籤一行，下面的方塊、膠囊、輸入框跨整張卡 */
#installment-dialog .installment-form__row--method { row-gap: 2px; padding-bottom: 12px; }
#installment-dialog .installment-form__row--method > .installment-form__method,
#installment-dialog .installment-form__row--method > .installment-form__providers,
#installment-dialog .installment-form__row--method > #installment-provider-other,
#installment-dialog .installment-form__row--method > .installment-form__provider-hint { grid-column: 1 / -1; }
#installment-dialog .installment-form__method { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 5px; }
#installment-dialog .installment-form__method button { display: flex; align-items: center; gap: 7px; min-height: 42px; padding: 6px 10px; color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 750; line-height: 1.2; text-align: left; white-space: nowrap; background: var(--if-soft); border: 1.5px solid var(--if-line); border-radius: 13px; cursor: pointer; }
#installment-dialog .installment-form__method button > span { display: flex; flex: none; }
#installment-dialog .installment-form__method button .jk-icon { width: 22px; height: 22px; }
#installment-dialog .installment-form__method button[aria-pressed="true"] { background: #eef6f2; border-color: #0e6b5c; box-shadow: inset 0 0 0 1px #0e6b5c; }
#installment-dialog .installment-form__providers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding: 0; background: none; border-radius: 0; }
#installment-dialog .installment-form__providers[hidden] { display: none; }
#installment-dialog .installment-form__providers button { display: inline-flex; align-items: center; gap: 5px; height: 32px; min-height: 0; padding: 0 11px; color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; background: color-mix(in srgb, #ffffff 82%, var(--surface, #fffdf8)); border: 1px solid var(--if-line); border-radius: 999px; cursor: pointer; }
#installment-dialog .installment-form__providers button .jk-icon { width: 16px; height: 16px; }
#installment-dialog .installment-form__providers button[aria-pressed="true"] { color: #fff; background: #0e6b5c; border-color: #0e6b5c; --jk-icon-main: #f6f2e8; }
#installment-dialog .installment-form__providers button[aria-pressed="true"]::after { content: "✓"; font-size: 12px; }
#installment-dialog #installment-provider-other { width: 100%; height: 38px; min-height: 0; margin-top: 8px; padding: 0 12px; font-size: 14px; font-weight: 600; background: var(--if-soft); border: 1px solid var(--if-line); border-radius: 12px; }
#installment-dialog #installment-provider-other[hidden] { display: none; }
#installment-dialog .installment-form__provider-hint { margin-top: 6px; color: #8a5a12; font-size: 12.5px; line-height: 1.4; }
#installment-dialog .installment-form__provider-hint[hidden] { display: none; }

/* 更多設定：會轉的 chevron */
#installment-dialog .installment-form__more { display: block; font-size: 14px; }
#installment-dialog .installment-form__more summary { display: flex; align-items: center; gap: 6px; color: #0e6b5c; font-weight: 750; list-style: none; cursor: pointer; }
#installment-dialog .installment-form__more summary::-webkit-details-marker { display: none; }
#installment-dialog .installment-form__more summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 150ms ease; }
#installment-dialog .installment-form__more[open] summary::before { transform: rotate(45deg); }
#installment-dialog .installment-form__more .installment-form__rows { margin-top: 10px; }

/* 試算卡：還沒填好灰底；填好 .is-ready 深綠白字 */
#installment-dialog .installment-form__calc { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 14px; color: var(--muted); background: #e7ebe6; border-radius: 18px; }
#installment-dialog .installment-form__calc-icon { display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 12px; background: #fff; }
#installment-dialog .installment-form__calc-icon .jk-icon { width: 24px; height: 24px; }
#installment-dialog .installment-form__calc-body { min-width: 0; }
#installment-dialog .installment-form__preview { margin: 0; padding: 0; color: inherit; font-size: 14px; font-weight: 700; line-height: 1.4; background: none; border-radius: 0; }
#installment-dialog .installment-form__calc.is-ready { color: #fff; background: #0e6b5c; --jk-icon-main: #f6f2e8; }
#installment-dialog .installment-form__calc.is-ready .installment-form__calc-icon { background: rgb(255 255 255 / 14%); }
#installment-dialog .installment-form__calc.is-ready .installment-form__preview small { display: block; font-size: 12px; font-weight: 700; opacity: 0.8; }
#installment-dialog .installment-form__calc.is-ready .installment-form__preview strong { display: block; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
#installment-dialog .installment-form__calc.is-ready .installment-form__preview strong i { margin-left: 4px; font-size: 14px; font-style: normal; opacity: 0.85; }
#installment-dialog .installment-form__remainder { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; font-weight: 700; }
#installment-dialog .installment-form__remainder[hidden] { display: none; }
#installment-dialog .installment-form__remainder > span:first-child { font-size: 12.5px; font-weight: 700; }
#installment-dialog .installment-form__seg { display: inline-flex; padding: 2px; border-radius: 999px; background: rgb(255 255 255 / 16%); }
#installment-dialog .installment-form__seg label { display: inline-flex; min-height: 0; cursor: pointer; }
#installment-dialog .installment-form__seg label > span { padding: 3px 10px; font-size: 12.5px; font-weight: 750; border-radius: 999px; }
#installment-dialog .installment-form__seg input:checked + span { color: #0e6b5c; background: #fff; }
#installment-dialog .installment-form__seg input:focus-visible + span { outline: 2px solid #fff; outline-offset: 1px; }

/* 提醒：icon＋一行字 */
#installment-dialog .installment-form__hint { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.35; }
#installment-dialog .installment-form__hint .jk-icon { flex: none; width: 18px; height: 18px; }

/* v5.110 修正（Lucas：主選單選單卡底下的尖角變成菱形）：選單卡是半透明玻璃，轉 45° 的正方形上半部會透出來；
   用 clip-path 只留下半部，變成往下指的三角形 */
.nav-bubbles__stack::after { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
#installment-dialog #installment-provider-other:focus { outline: none; border-color: #0e6b5c; box-shadow: 0 0 0 2px color-mix(in srgb, #0e6b5c 18%, transparent); }
#installment-dialog .installment-form__periods #installment-periods:focus { outline: none; border-color: #0e6b5c; }

/* ===== v5.111（Lucas）：股票追蹤獨立成小工具；搜尋欄加麥克風（長輩可以用說的） ===== */
.watch-form__bar { position: relative; display: flex; align-items: center; }
.watch-form__bar input { padding-right: 56px; }
.watch-form__mic { position: absolute; top: 50%; right: 5px; display: grid; width: 38px; height: 38px; place-items: center; padding: 0; color: #fff; background: #0e6b5c; border: 0; border-radius: 50%; transform: translateY(-50%); cursor: pointer; }
.watch-form__mic[hidden] { display: none; }
.watch-form__mic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.watch-form__mic.is-listening { background: #c9862b; animation: watch-mic-pulse 1.2s ease-in-out infinite; }
@keyframes watch-mic-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(201 134 43 / 45%); } 50% { box-shadow: 0 0 0 8px rgb(201 134 43 / 0%); } }
@media (prefers-reduced-motion: reduce) { .watch-form__mic.is-listening { animation: none; } }
.watch-form__listening { margin: 8px 4px 0; color: #8a5a12; font-size: 0.85rem; font-weight: 700; }
.watch-form__listening[hidden] { display: none; }

/* ===== v5.112（Lucas）：功能頁裡跟首頁小工具同一個區塊——右上角 ⠿、長按跳出「加到首頁／從首頁移除」 ===== */
.page-widget { position: relative; -webkit-touch-callout: none; }
.page-widget > .page-widget__handle { z-index: 3; }
.page-widget.is-empty > .page-widget__handle { display: none; }
.page-widget.is-pressing > :first-child { transform: scale(0.985); transition: transform 300ms ease; }
@media (prefers-reduced-motion: reduce) { .page-widget.is-pressing > :first-child { transform: none; } }
/* 投資頁的股票行情工具列原本靠右 16px（頁面版沒有 ⠿），現在多了 ⠿，跟首頁一樣讓出 40px */
.page-widget .home-stocks--page .home-stocks__tools { right: 40px; }
/* 預算、夢想、帳戶這三頁的區塊是直接排滿的卡片，⠿ 浮在角落會蓋到金額；改成上方讓出一條，⠿ 放在那條右邊 */
.page-widget[data-page-widget="budget"],
.page-widget[data-page-widget="dream"],
.page-widget[data-page-widget="accounts"] { padding-top: 34px; }
.page-widget[data-page-widget="budget"] > .page-widget__handle,
.page-widget[data-page-widget="dream"] > .page-widget__handle,
.page-widget[data-page-widget="accounts"] > .page-widget__handle { top: 2px; right: 2px; }
.page-widget.is-empty[data-page-widget] { padding-top: 0; }

/* ===== v5.113（Lucas）：K 棒「醬記解說模式」——爬樓梯比喻＋動畫；台股習慣紅漲綠跌 ===== */
.kguide__switch { display: block; width: 100%; min-height: 46px; margin-top: 12px; color: #0e6b5c; font: inherit; font-size: 0.98rem; font-weight: 800; background: color-mix(in srgb, #0e6b5c 9%, var(--surface, #fffdf8)); border: 1.5px dashed color-mix(in srgb, #0e6b5c 45%, transparent); border-radius: 16px; cursor: pointer; }
.kguide__switch--pro { color: var(--muted); background: transparent; border-style: solid; border-color: color-mix(in srgb, var(--ink) 14%, transparent); font-weight: 700; }
.kjohn { display: grid; gap: 10px; margin-top: 6px; }
.kjohn__lead { margin: 0; font-size: 1rem; line-height: 1.6; }
.kjohn__stage { padding: 8px 6px 2px; background: color-mix(in srgb, var(--ink) 3%, var(--surface, #fffdf8)); border-radius: 16px; }
.kjohn__svg { display: block; width: 100%; height: auto; overflow: visible; }
.kjohn__floor { stroke: color-mix(in srgb, var(--ink) 12%, transparent); stroke-width: 1; stroke-dasharray: 3 4; }
.kjohn__floor-label { fill: var(--muted); font-size: 10px; font-weight: 700; }
.kjohn__path { fill: none; stroke: color-mix(in srgb, var(--ink) 55%, transparent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.kjohn__walker { fill: #e9b949; stroke: #fff; stroke-width: 2; }
.kjohn__me { font-size: 15px; }
.kjohn__guide { stroke: color-mix(in srgb, var(--ink) 25%, transparent); stroke-width: 1; stroke-dasharray: 2 3; }
.kjohn__candle line { stroke-width: 3; stroke-linecap: round; }
.kjohn__candle.is-up line, .kjohn__candle.is-up rect { stroke: var(--tw-up, #c8402f); fill: var(--tw-up, #c8402f); }
.kjohn__candle.is-down line, .kjohn__candle.is-down rect { stroke: var(--tw-down, #2d7a58); fill: var(--tw-down, #2d7a58); }
.kjohn__candle-label { fill: var(--muted); font-size: 10px; font-weight: 700; }
.kjohn__caption { min-height: 2.9em; margin: 0; padding: 10px 12px; font-size: 0.98rem; font-weight: 750; line-height: 1.45; background: #faf1dc; border-radius: 12px; }
.kjohn__replay { justify-self: end; min-height: 34px; padding: 0 12px; color: #0e6b5c; font: inherit; font-size: 0.88rem; font-weight: 750; background: transparent; border: 1px solid color-mix(in srgb, #0e6b5c 35%, transparent); border-radius: 999px; cursor: pointer; }
.kjohn__legend { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin: 0; padding: 0; list-style: none; font-size: 0.9rem; }
.kjohn__legend li { display: flex; align-items: center; gap: 6px; }
.kjohn__rule { margin: 0; font-size: 0.93rem; line-height: 1.65; }
.kjohn__rule .is-up { color: var(--tw-up, #c8402f); }
.kjohn__rule .is-down { color: var(--tw-down, #2d7a58); }
.kjohn__title { margin: 6px 0 0; font-size: 1rem; }
.kjohn__cards { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.kjohn__cards li { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: color-mix(in srgb, var(--ink) 3%, var(--surface, #fffdf8)); border-radius: 14px; }
.kjohn__cards li span { display: grid; gap: 1px; }
.kjohn__cards b { font-size: 0.95rem; }
.kjohn__cards small { color: var(--muted); font-size: 0.82rem; }
.kjohn__mini { flex: none; }
.kjohn__mini line { stroke: color-mix(in srgb, var(--ink) 55%, transparent); stroke-width: 2; stroke-linecap: round; }
.kjohn__mini rect { fill: color-mix(in srgb, var(--ink) 55%, transparent); }
.kjohn__mini.is-up line, .kjohn__mini.is-up rect { stroke: var(--tw-up, #c8402f); fill: var(--tw-up, #c8402f); }
.kjohn__mini.is-down line, .kjohn__mini.is-down rect { stroke: var(--tw-down, #2d7a58); fill: var(--tw-down, #2d7a58); }
/* 「今天怎麼走」標題旁的說明方式切換 */
.stock-today__section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stock-today__mode { display: inline-flex; padding: 2px; background: color-mix(in srgb, var(--ink) 6%, transparent); border-radius: 999px; }
.stock-today__mode button { min-height: 30px; padding: 0 10px; color: var(--muted); font: inherit; font-size: 0.8rem; font-weight: 750; background: transparent; border: 0; border-radius: 999px; cursor: pointer; }
.stock-today__mode button[aria-pressed="true"] { color: #fff; background: #0e6b5c; }
.stock-today__section-head { margin-bottom: 8px; } .stock-today__section-head h3 { margin: 0; }
.kjohn__legend { grid-template-columns: 1fr; gap: 4px; font-size: 0.95rem; }
.kjohn__legend li { display: block; line-height: 1.6; }
.kjohn__legend li > span { display: inline-block; width: 1.6em; }

/* v5.113 調整（Lucas：按鈕太 AI 感）：拿掉 emoji 與虛線框，改成跟 App 其他入口一樣的一列——左邊醬記公仔、兩行字、右邊箭頭 */
.kguide__switch { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 0; margin-top: 14px; padding: 10px 14px 10px 10px; color: var(--ink); font: inherit; text-align: left; background: var(--surface, #fffdf8); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); border-radius: 18px; box-shadow: 0 4px 12px rgb(60 50 30 / 6%); cursor: pointer; }
.kguide__switch img { flex: none; width: 46px; height: 46px; object-fit: contain; }
.kguide__switch span { display: grid; flex: 1; gap: 1px; min-width: 0; }
.kguide__switch small { color: var(--muted); font-size: 0.8rem; font-weight: 650; }
.kguide__switch b { color: #0e6b5c; font-size: 1rem; font-weight: 800; }
.kguide__switch i { flex: none; width: 8px; height: 8px; border-top: 2px solid #0e6b5c; border-right: 2px solid #0e6b5c; transform: rotate(45deg); }
.kguide__switch:active { transform: scale(0.99); }
.kguide__back { display: block; margin: 12px auto 0; padding: 6px 10px; color: var(--muted); font: inherit; font-size: 0.88rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; cursor: pointer; }

/* ===== v5.114（Lucas）：功能頁區塊收合——點標題收起／展開，收起來只留標題列＋一行摘要 ===== */
.collapse-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 0; color: inherit; font: inherit; text-align: left; background: none; border: 0; cursor: pointer; }
.collapse-toggle i { flex: none; width: 8px; height: 8px; margin-top: -3px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform 180ms ease; }
.collapse-toggle[aria-expanded="false"] i { margin-top: 3px; transform: rotate(-135deg); }
.collapse-summary { display: block; margin-top: 2px; color: var(--muted); font-size: 0.85rem; font-weight: 700; }
.collapse-summary[hidden] { display: none; }
.panel.is-collapsed > :not(.section-heading) { display: none !important; }
.panel.is-collapsed > .section-heading { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .collapse-toggle i { transition: none; } }
/* 箭頭方向跟一般 App 一樣：展開時朝上（點了收起），收起時朝下（點了展開） */
.collapse-toggle i { margin-top: 3px; transform: rotate(-135deg); }
.collapse-toggle[aria-expanded="false"] i { margin-top: -3px; transform: rotate(45deg); }
/* v5.115（Lucas：看不到收合按鈕）：箭頭太小太淡。改成標題旁一顆 28px 淡綠圓鈕、裡面放箭頭，一看就知道可以點 */
.collapse-toggle { gap: 10px; }
.collapse-toggle i,
.collapse-toggle[aria-expanded="false"] i { position: relative; display: inline-grid; flex: none; width: 28px; height: 28px; margin: 0; place-items: center; background: color-mix(in srgb, #0e6b5c 12%, var(--surface, #fffdf8)); border: 0; border-radius: 50%; transform: none; }
.collapse-toggle i::before { content: ""; width: 8px; height: 8px; margin-top: 4px; border-top: 2px solid #0e6b5c; border-left: 2px solid #0e6b5c; transform: rotate(45deg); transition: transform 180ms ease, margin 180ms ease; }
.collapse-toggle[aria-expanded="false"] i::before { margin-top: -4px; transform: rotate(-135deg); }
.collapse-toggle:hover i, .collapse-toggle:focus-visible i { background: color-mix(in srgb, #0e6b5c 20%, var(--surface, #fffdf8)); }
@media (prefers-reduced-motion: reduce) { .collapse-toggle i::before { transition: none; } }

/* ===== v5.116（Lucas）：訂閱管理 ===== */
.subscription-summary { display: grid; gap: 12px; margin-bottom: 14px; padding: 18px; background: var(--surface, #fffdf8); border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); border-radius: 22px; box-shadow: 0 8px 22px rgb(60 50 30 / 7%); }
.subscription-summary:has(> .compact-empty) { padding: 8px; }
.subscription-summary__main { display: grid; gap: 2px; }
.subscription-summary__main small { color: var(--muted); font-size: 0.85rem; font-weight: 700; }
.subscription-summary__main strong { font-size: 2.3rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.subscription-summary__main span { color: var(--muted); font-size: 0.9rem; font-weight: 650; }
.subscription-summary__groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); }
.subscription-summary__groups h4 { margin: 0 0 6px; color: var(--muted); font-size: 0.8rem; font-weight: 750; }
.subscription-summary__groups ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.subscription-summary__groups li { display: flex; justify-content: space-between; gap: 8px; font-size: 0.92rem; }
.subscription-summary__groups li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subscription-summary__groups li b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.subscription-empty { margin: 4px 0; color: var(--muted); font-size: 0.9rem; }
.recurring-row__right b small { margin-left: 1px; color: var(--muted); font-size: 0.75rem; font-weight: 700; }
.home-subscriptions .recurring-row { margin-top: 10px; border-bottom: 0; }
.home-subscriptions .recurring-row__main small { color: var(--muted); font-size: 0.78rem; }
/* 新增視窗 */
.subscription-form { display: grid; gap: 12px; }
.subscription-form__presets small { display: block; margin-bottom: 6px; color: var(--muted); font-size: 0.8rem; font-weight: 750; }
.subscription-form__presets > div { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.subscription-form__presets > div::-webkit-scrollbar { display: none; }
.subscription-form__presets button { flex: none; height: 34px; padding: 0 12px; color: var(--ink); font: inherit; font-size: 0.88rem; font-weight: 700; white-space: nowrap; background: color-mix(in srgb, var(--ink) 4%, var(--surface, #fffdf8)); border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 999px; cursor: pointer; }
.subscription-form__rows { display: grid; overflow: hidden; background: color-mix(in srgb, #ffffff 82%, var(--surface, #fffdf8)); border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 20px; }
.subscription-form__row { display: grid; gap: 4px; padding: 10px 14px; }
.subscription-form__row + .subscription-form__row { border-top: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); }
.subscription-form__row > span:first-child { color: var(--muted); font-size: 12px; font-weight: 750; }
.subscription-form__row input { width: 100%; min-width: 0; padding: 2px 0; color: var(--ink); font: inherit; font-size: 17px; font-weight: 700; background: none; border: 0; outline: none; }
.subscription-form__row:focus-within { background: #f6faf8; }
.subscription-form__money { display: flex; align-items: baseline; gap: 4px; }
.subscription-form__money em { color: var(--muted); font-style: normal; font-weight: 800; }
.subscription-form__inline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; color: var(--muted); font-size: 15px; font-weight: 700; }
.subscription-form__inline > span:not([hidden]) { display: inline-flex; align-items: baseline; gap: 6px; }
.subscription-form__inline input { width: 52px; text-align: center; border-bottom: 2px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.subscription-form__seg, .subscription-form__via, .subscription-form__providers { display: flex; flex-wrap: wrap; gap: 6px; }
.subscription-form__seg button, .subscription-form__via button, .subscription-form__providers button { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 14px; color: var(--ink); font: inherit; font-size: 0.92rem; font-weight: 750; background: color-mix(in srgb, var(--ink) 4%, var(--surface, #fffdf8)); border: 1.5px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 999px; cursor: pointer; }
.subscription-form__seg button[aria-pressed="true"], .subscription-form__via button[aria-pressed="true"] { background: #eef6f2; border-color: #0e6b5c; box-shadow: inset 0 0 0 1px #0e6b5c; }
.subscription-form__providers { margin-top: 6px; }
.subscription-form__providers[hidden] { display: none; }
.subscription-form__providers button { min-height: 32px; font-size: 0.86rem; background: color-mix(in srgb, #ffffff 82%, var(--surface, #fffdf8)); border-width: 1px; }
.subscription-form__providers button .jk-icon { width: 16px; height: 16px; }
.subscription-form__providers button[aria-pressed="true"] { color: #fff; background: #0e6b5c; border-color: #0e6b5c; --jk-icon-main: #f6f2e8; }
.subscription-form__providers button[aria-pressed="true"]::after { content: "✓"; font-size: 12px; }
#subscription-provider-other { margin-top: 6px; height: 38px; padding: 0 12px; font-size: 14px; font-weight: 600; background: color-mix(in srgb, var(--ink) 4%, var(--surface, #fffdf8)); border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 12px; }
#subscription-provider-other[hidden] { display: none; }
.subscription-form__hint { color: #8a5a12; font-size: 12.5px; }
.subscription-form__hint[hidden] { display: none; }
.subscription-form__preview { margin: 0; padding: 12px 14px; font-size: 0.95rem; font-weight: 750; background: color-mix(in srgb, #0e6b5c 8%, var(--surface, #fffdf8)); border-radius: 14px; }
.subscription-form__actions { display: flex; justify-content: flex-end; gap: 10px; }
.subscription-form__delete { margin-right: auto; color: var(--danger, #b04437); }
/* 常見訂閱那一排是橫向捲動，不能把表單撐寬 */
.subscription-form { min-width: 0; max-width: 100%; }
.subscription-form > * { min-width: 0; max-width: 100%; }
.subscription-form__presets { overflow: hidden; }
.subscription-form__presets > div { max-width: 100%; }

/* ===== v5.117（Lucas）：訂閱制支出——每月上限提醒（綠＝還可以、金＝快到了、紅＝超過） ===== */
.subscription-cap__set { justify-self: start; min-height: 36px; padding: 0 14px; color: #0e6b5c; font: inherit; font-size: 0.9rem; font-weight: 750; background: color-mix(in srgb, #0e6b5c 8%, var(--surface, #fffdf8)); border: 1px solid color-mix(in srgb, #0e6b5c 25%, transparent); border-radius: 999px; cursor: pointer; }
.subscription-cap { display: grid; gap: 6px; }
.subscription-cap__head { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 0.85rem; font-weight: 750; }
.subscription-cap__bar { height: 10px; overflow: hidden; background: color-mix(in srgb, var(--ink) 8%, transparent); border-radius: 999px; }
.subscription-cap__bar i { display: block; height: 100%; border-radius: inherit; background: #2f7a62; transition: width 400ms ease; }
.subscription-cap.is-near .subscription-cap__bar i { background: #c9862b; }
.subscription-cap.is-over .subscription-cap__bar i { background: #b3473d; }
.subscription-cap__msg { margin: 0; font-size: 0.9rem; font-weight: 750; line-height: 1.45; color: #2f7a62; }
.subscription-cap.is-near .subscription-cap__msg { color: #8a5a12; }
.subscription-cap.is-over .subscription-cap__msg { color: #b3473d; }
.subscription-cap__home { margin: 8px 0 0; padding: 6px 10px; font-size: 0.85rem; font-weight: 800; border-radius: 10px; }
.subscription-cap__home.is-near { color: #8a5a12; background: #faf0dc; }
.subscription-cap__home.is-over { color: #fff; background: #b3473d; }
.subscription-cap__intro { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.55; }

/* v5.118（Lucas：資訊重複）：分期付款、訂閱制支出頁只留新增按鈕列 */
.page-action-bar { display: flex; justify-content: flex-end; margin: 0 0 14px; }
.page-action-bar .button { width: 100%; }
@media (min-width: 960px) { .page-action-bar .button { width: auto; } }

/* v5.119（Lucas）：從固定收支挑選訂閱、不是訂閱移出 */
.subscription-pick-link { display: block; margin: -4px 0 14px; padding: 4px 0; font-size: 0.88rem; font-weight: 750; text-align: left; }
.subscription-picker { display: grid; max-height: 60vh; overflow-y: auto; }
.subscription-picker__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 2px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.subscription-picker__row:last-child { border-bottom: 0; }
.subscription-picker__row span { display: grid; gap: 2px; min-width: 0; }
.subscription-picker__row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subscription-picker__row small { color: var(--muted); font-size: 0.8rem; }
.subscription-picker__row .button { flex: none; min-height: 38px; }
.subscription-form__remove { color: var(--muted); }

/* v5.122（Lucas）：常見訂閱改成名稱打字時跳出建議（品牌色徽章＋首字） */
.subscription-form__row--name > label { color: var(--muted); font-size: 12px; font-weight: 750; }
.subscription-suggest { display: grid; margin-top: 6px; overflow: hidden; background: var(--surface, #fffdf8); border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 14px; box-shadow: 0 10px 24px rgb(60 50 30 / 10%); }
.subscription-suggest[hidden] { display: none; }
.subscription-suggest button { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px; color: var(--ink); font: inherit; text-align: left; background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); cursor: pointer; }
.subscription-suggest button:last-child { border-bottom: 0; }
.subscription-suggest button:hover, .subscription-suggest button:focus-visible { background: color-mix(in srgb, #0e6b5c 6%, transparent); }
.subscription-suggest button span:last-child { display: grid; gap: 1px; }
.subscription-suggest b { font-size: 0.98rem; }
.subscription-suggest small { color: var(--muted); font-size: 0.78rem; }
.subscription-badge { display: grid; flex: none; width: 32px; height: 32px; place-items: center; color: #fff; font-size: 0.95rem; font-weight: 800; background: var(--badge, #6d6d66); border-radius: 50%; }
/* v5.122：品牌 LOGO 徽章（白底＋品牌色 LOGO）；清單列用 38px 版本 */
.subscription-badge.is-logo { color: var(--badge); background: #fff; border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.subscription-badge.is-logo svg { width: 18px; height: 18px; }
.subscription-badge--row { width: 38px; height: 38px; border-radius: 12px; font-size: 1.05rem; }
.subscription-badge--row.is-logo svg { width: 22px; height: 22px; }
/* v5.122：完整彩色圖示（Claude）不加圓底與外框，圖示本身就是圓角方塊 */
.subscription-badge.is-full { background: none; border: 0; }
.subscription-badge.is-full svg { width: 100%; height: 100%; }
.subscription-badge--row.is-full { border-radius: 10px; }
.subscription-badge:not(.is-logo):not(.is-full) { background: var(--badge, #6d6d66); }
/* 橫長字標（HBO Max）：寬度撐滿、高度自動 */
.subscription-badge.is-wide svg { width: 80%; height: auto; }
.subscription-badge--row.is-wide svg { width: 80%; height: auto; }
/* 點陣圖示（MyVideo）：圓角方塊裁切，跟其他圖示同大小 */
.subscription-badge.is-img { overflow: hidden; border-radius: 10px; }
.subscription-badge.is-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.subscription-suggest .subscription-badge.is-img { border-radius: 8px; }

/* v5.124（Lucas 回報手機字重疊）：訂閱合計卡「從哪裡扣／類型」兩欄，名稱長（例：電信帳單・台灣大哥大）會把欄撐出卡片、蓋到右邊 */
.subscription-summary__groups > div { min-width: 0; }
.subscription-summary__groups li { align-items: baseline; gap: 12px; }
.subscription-summary__groups li span { min-width: 0; overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
.subscription-summary__groups li b { flex: none; }
@media (max-width: 640px) {
  .subscription-summary__groups { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* v5.138：銀行明細匯入——截圖辨識（進度、截圖對照） */
.bank-shot-progress { display: grid; gap: 10px; padding: 6px 0 2px; }
.bank-shot-progress progress { width: 100%; height: 10px; accent-color: var(--accent); }
.bank-shot-progress small { color: var(--muted); line-height: 1.6; }
.bank-shot-previews { margin: 8px 0 14px; }
.bank-shot-previews summary { cursor: pointer; font-weight: 700; color: var(--accent-strong, var(--accent)); padding: 6px 0; }
.bank-shot-previews__grid { display: flex; gap: 8px; overflow-x: auto; padding: 6px 0; }
.bank-shot-previews__grid img { height: 260px; width: auto; border-radius: 10px; border: 1px solid var(--line); flex: none; }
.bank-import-row__detail.is-warn { color: var(--danger, #a94f45); }

/* v5.143 清空帳戶交易紀錄／危險操作驗證碼 */
.jkc-clear {
  flex: none;
  padding: 6px 14px;
  color: #a94f45;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  background: rgb(255 255 255 / 70%);
  border: 1px solid rgb(169 79 69 / 35%);
  border-radius: 999px;
  cursor: pointer;
}
.is-new-account .jkc-clear-row { display: none; }
.danger-warning { margin: 0 0 12px; line-height: 1.6; }
.danger-warning strong { display: block; color: var(--danger, #a94f45); font-size: 1.05rem; margin-bottom: 4px; }
.danger-option, .danger-agree { margin: 10px 0; align-items: flex-start; line-height: 1.5; }
.danger-step label { display: grid; gap: 6px; }
.danger-step .check-control { display: flex; }
#danger-code { font-size: 1.4rem; letter-spacing: 0.3em; text-align: center; }
.danger-resend { margin-top: 10px; }
.danger-status:empty { display: none; }
.danger-status { margin: 0; color: var(--danger, #a94f45); font-size: 0.875rem; overflow-wrap: anywhere; }

/* v5.144 登入首頁「小醬的發薪日」案例動畫（只作用在 .landing-gate 裡） */
.landing-gate .landing-story { min-width: 0; margin-bottom: clamp(52px, 7vw, 76px); }
.landing-gate .story-stage { display: grid; align-items: center; padding: 28px 22px; background: var(--landing-surface); border-radius: 28px; overflow: hidden; }
.landing-gate .story-scene { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 18px; grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s; }
.landing-gate .story-scene.is-active { opacity: 1; visibility: visible; transform: none; }
.landing-gate .story-mascot { width: min(170px, 46vw); height: auto; }
.landing-gate .story-scene.is-active .story-mascot { animation: story-bob 2.4s ease-in-out infinite; }
.landing-gate .story-body { display: grid; gap: 12px; width: min(100%, 360px); justify-items: center; text-align: center; }
.landing-gate .story-step { margin: 0; color: var(--landing-green); font-size: 13px; font-weight: 750; letter-spacing: 0.06em; }
.landing-gate .story-bubble { position: relative; margin: 0; padding: 12px 16px; background: #fff; border-radius: 18px; color: var(--landing-ink); font-size: 16px; line-height: 1.5; }
.landing-gate .story-notice { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #fff; border-radius: 16px; text-align: left; }
.landing-gate .story-notice-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--landing-mint); color: var(--landing-green); font-weight: 800; }
.landing-gate .story-notice small, .landing-gate .story-form small, .landing-gate .story-split small, .landing-gate .story-result small { display: block; color: var(--landing-muted); font-size: 12px; }
.landing-gate .story-notice strong { font-size: 17px; }
.landing-gate .story-form { display: grid; gap: 4px; width: min(100%, 260px); padding: 16px; background: #fff; border-radius: 22px; text-align: left; }
.landing-gate .story-tabs { display: flex; gap: 6px; margin-bottom: 8px; font-size: 12px; }
.landing-gate .story-tabs span { padding: 3px 12px; border: 1px solid var(--landing-line); border-radius: 999px; color: var(--landing-muted); }
.landing-gate .story-tabs .is-on { background: var(--landing-mint); border-color: transparent; color: var(--landing-green); font-weight: 750; }
.landing-gate .story-amount { margin-bottom: 6px; font-size: 32px; font-weight: 750; letter-spacing: -0.02em; }
.landing-gate .story-form-value { margin-bottom: 12px; font-size: 15px; }
.landing-gate .story-save { padding: 10px; border-radius: 12px; background: var(--landing-green); color: #fff; font-weight: 750; text-align: center; transition: transform 0.18s ease; }
.landing-gate .story-save.is-pressed { transform: scale(0.94); }
.landing-gate .story-lead { margin: 0; font-size: 17px; font-weight: 750; }
.landing-gate .story-bar { display: flex; width: 100%; height: 22px; overflow: hidden; background: #fff; border-radius: 999px; }
.landing-gate .story-seg { display: block; height: 100%; width: 0; transition: width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.landing-gate .story-seg--life { background: var(--landing-green); }
.landing-gate .story-seg--save { background: #f0b429; }
.landing-gate .story-seg--care { background: #8aa9a1; }
.landing-gate .story-split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
.landing-gate .story-split > div { padding: 10px 8px; background: #fff; border-radius: 14px; text-align: left; }
.landing-gate .story-split strong { font-size: 17px; }
.landing-gate .story-dot { display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 50%; }
.landing-gate .story-note { margin: 0; color: var(--landing-muted); font-size: 14px; }
.landing-gate .story-result { display: grid; gap: 2px; width: 100%; padding: 16px 18px; background: var(--landing-green); border-radius: 20px; color: #fff; }
.landing-gate .story-result small { color: rgb(255 255 255 / 82%); font-size: 13px; }
.landing-gate .story-result strong { font-size: 36px; font-weight: 750; letter-spacing: -0.02em; }
.landing-gate .story-result span { font-size: 13px; color: rgb(255 255 255 / 88%); }
.landing-gate .story-cta { min-width: 12rem; color: #fff; background: var(--brand-green, var(--landing-green-dark)); border-color: var(--brand-green, var(--landing-green-dark)); }
.landing-gate .story-controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }
.landing-gate .story-nav, .landing-gate .story-replay { min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--landing-line); border-radius: 999px; background: #fff; color: var(--landing-ink); font: inherit; font-size: 18px; cursor: pointer; }
.landing-gate .story-replay { font-size: 14px; font-weight: 650; }
.landing-gate .story-dots { display: flex; gap: 8px; }
.landing-gate .story-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--landing-line); cursor: pointer; transition: width 0.3s ease, background 0.3s ease; }
.landing-gate .story-dots button.is-on { width: 24px; background: var(--landing-green); }
@keyframes story-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (min-width: 760px) {
  .landing-gate .story-stage { padding: 40px 48px; }
  .landing-gate .story-scene { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: 40px; }
  .landing-gate .story-mascot { width: min(240px, 100%); }
  .landing-gate .story-body { justify-items: start; text-align: left; width: min(100%, 420px); }
}
@media (prefers-reduced-motion: reduce) {
  .landing-gate .story-scene, .landing-gate .story-seg { transition: none; }
  .landing-gate .story-scene.is-active .story-mascot { animation: none; }
}

/* v5.145 總覽分頁標籤（app.js syncHomeTabs）：沿用醬記膠囊＋毛玻璃，選中的是深綠 */
.home-tabs {
  position: sticky;
  top: max(8px, env(safe-area-inset-top));
  z-index: 6;
  display: flex;
  gap: 4px;
  margin: 6px 0 14px;
  padding: 5px;
  background: rgb(255 255 255 / 62%);
  border: 1px solid rgb(18 55 47 / 10%);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 6px 18px rgb(18 55 47 / 8%);
}
.home-tabs[hidden] { display: none; }
.home-tabs button {
  flex: 1 1 0;
  min-height: 38px;
  padding: 0 10px;
  color: var(--muted);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background 180ms var(--ease, ease), color 180ms var(--ease, ease);
  -webkit-tap-highlight-color: transparent;
}
.home-tabs button[hidden] { display: none; }
.home-tabs button:hover { color: var(--ink); }
.home-tabs button.is-on { color: #fff; background: var(--ink); }
.home-tabs button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.home-widgets > .home-widget[data-tab-off] { display: none !important; }
.home-widgets:not(.is-editing) > .home-widget:not([data-tab-off]) { animation: home-tab-in 260ms var(--ease, ease); }
@keyframes home-tab-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (min-width: 960px) { .home-tabs { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .home-widgets:not(.is-editing) > .home-widget:not([data-tab-off]) { animation: none; } }

/* v5.146 「30 秒看懂醬記」往上移：放在主視覺列裡，手機排在 CTA 正下方（預覽卡之前），電腦橫跨兩欄在主視覺下面 */
.landing-gate .landing-hero-row > .landing-story { margin-bottom: 0; }
@media (min-width: 960px) {
  .landing-gate .landing-hero-row > .landing-story { grid-column: 1 / -1; grid-row: 2; }
}
/* v5.147 總覽「管理」分頁：使用者狀態不在小工具容器裡，另外處理 */
#admin-activity[data-tab-off],
#home-widgets-actions[data-tab-off] { display: none !important; }

/* v5.149（Lucas）：編輯首頁時每個區塊右上角加 ↑ ↓（點一下移一格），跟 ✓ ✕ ⠿ 同一款白色圓鈕 */
/* 舊規則（:not([data-empty]) 那條）比這裡具體，用 !important 蓋過 */
.home-widgets.is-editing > .home-widget > .home-widget__bar .home-widget__moves { display: flex !important; gap: 6px; }
.home-widgets.is-editing > .home-widget > .home-widget__bar .home-widget__moves button {
  display: grid;
  width: 34px;
  height: 34px;
  min-width: 0;
  padding: 0;
  place-items: center;
  color: #12372f;
  background: rgb(255 253 248 / 94%);
  border: 1px solid rgb(25 26 24 / 10%);
  border-radius: 999px;
  box-shadow: 0 3px 10px rgb(23 35 31 / 16%);
}
.home-widgets.is-editing > .home-widget > .home-widget__bar .home-widget__moves svg { width: 18px; height: 18px; stroke-width: 2.6; }
.home-widgets.is-editing > .home-widget > .home-widget__bar .home-widget__moves button:disabled { opacity: 0.35; box-shadow: none; cursor: default; }
/* 按鈕多了 ↑ ↓ 變寬，會蓋到區塊標題：編輯時每個區塊上方留一條放按鈕的空間 */
.home-widgets.is-editing > .home-widget:not([data-empty]) { padding-top: 48px; }
.home-widgets.is-editing > .home-widget[data-widget="accounts"]:not([data-empty]) > .home-widget__bar { inset: 8px 8px auto auto; }

/* v5.149 帳戶篩選「常用」＋挑選視窗 */
.acct-filter__icon--fav svg { width: 14px; height: 14px; fill: #e8b33a; stroke: none; }
.fav-accounts-copy { margin: 0 0 12px; line-height: 1.6; }
.fav-accounts-list { display: grid; gap: 8px; max-height: min(52vh, 420px); overflow-y: auto; padding: 2px; }
.fav-acct { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line, #e5e1d8); border-radius: 14px; background: rgb(255 255 255 / 70%); cursor: pointer; }
.fav-acct:has(input:checked) { border-color: #12372f; background: rgb(18 55 47 / 6%); }
.fav-acct input { width: 20px; height: 20px; accent-color: #12372f; flex: none; }
.fav-acct__ic { display: inline-flex; width: 28px; height: 28px; flex: none; }
.fav-acct__ic svg { width: 100%; height: 100%; }
.fav-acct__nm { display: grid; flex: 1; min-width: 0; }
.fav-acct__nm b { overflow: hidden; font-size: 0.95rem; text-overflow: ellipsis; white-space: nowrap; }
.fav-acct__nm small { color: var(--muted, #6e6e73); font-size: 0.75rem; }
.fav-acct__amt { flex: none; font-weight: 700; font-size: 0.9rem; }
.fav-accounts-count { margin-right: auto; color: var(--muted, #6e6e73); }

/* v5.151 夢想預存提醒的白話說明 */
.recurring-due-note { display: block; margin-top: 2px; color: var(--muted, #6e6e73); font-size: 0.78rem; line-height: 1.5; }
.jkf-hold.jkf-reserve { color: #7a5a10; background: rgb(240 180 41 / 18%); border-color: rgb(240 180 41 / 35%); }

/* ===== v5.156：到期提醒／待確認記帳重新設計（取代 v5.152 的白卡＋icon 方塊版型）=====
   總覽 #overview-due-list 與固定收支頁 #recurring-due-list 共用（app.js dueCardMarkup）。醬記沒有深色模式，只有淺色。
   設計重點：金額是主角（大字靠左）、狀態用小圓點不用膠囊、帳戶列用虛線分隔像收據、主要按鈕實心、次要只是文字。 */
.due-head { flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.due-head__title { display: flex; flex: none; align-items: center; gap: 10px; }
.due-head__link { margin-left: auto; }
.due-head__icon { display: flex; flex: none; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 50%; background: #f6efdc; }
.due-head__icon svg { width: 22px; height: 22px; }
.due-head h2, .due-head h3 { white-space: nowrap; }
.due-head__count { display: inline-block; min-width: 20px; margin-left: 8px; padding: 0 6px; color: #fff; font-size: 12px; font-weight: 800; line-height: 20px; text-align: center; vertical-align: 3px; background: #c9862b; border-radius: 999px; }
.due-head__count[hidden] { display: none; }
.due-head__link { display: inline-flex; flex: none; align-items: center; gap: 4px; padding: 6px 2px; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 750; white-space: nowrap; background: none; border: 0; cursor: pointer; }
.due-head__link-icon { display: none; }
#overview-due-list, #recurring-due-list { display: grid; gap: 12px; }
.due-card { display: grid; gap: 14px; min-width: 0; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 1px 0 rgba(60, 50, 30, .03), 0 10px 24px -16px rgba(60, 50, 30, .25); }
.due-card__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; align-items: center; }
.due-card__icon { display: flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 50%; background: #eef4f1; }
.due-card__icon svg { width: 22px; height: 22px; }
.due-card__icon.is-goal { background: #fbf5e6; }
.due-card__icon.is-goal svg.dream-balloon { width: 20px; height: 26px; }
.due-card__title { min-width: 0; }
.due-card__title strong { display: block; overflow: hidden; color: var(--ink); font-size: 15.5px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.due-card__meta { display: block; margin-top: 1px; color: var(--muted); font-size: 12.5px; }
.due-card__tag { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; font-weight: 750; white-space: nowrap; }
.due-card__tag::before { content: ""; width: 7px; height: 7px; background: #b9b2a3; border-radius: 50%; }
.due-card__tag.is-today { color: #8a5d14; }
.due-card__tag.is-today::before { background: #c9862b; box-shadow: 0 0 0 3px rgba(201, 134, 43, .18); }
.due-card__tag.is-over { color: #a94f45; }
.due-card__tag.is-over::before { background: #b0493c; box-shadow: 0 0 0 3px rgba(176, 73, 60, .16); }
.due-card__amount { display: flex; align-items: baseline; gap: 8px; color: var(--ink); font-size: 34px; font-weight: 800; line-height: 1.05; letter-spacing: -.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.due-card__amount small { color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: 0; }
.due-card__amount.is-save { color: #a8741c; }
.due-card__amount.is-out { color: #a94f45; }
.due-card__amount.is-in { color: #34735b; }
.due-card__progress { display: grid; gap: 7px; margin-top: -4px; }
.due-card__bar { display: block; height: 8px; overflow: hidden; background: #f0eadb; border-radius: 999px; }
.due-card__bar i { display: block; height: 100%; min-width: 8px; background: linear-gradient(90deg, #e9b949, #c9862b); border-radius: inherit; }
.due-card__pmeta { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.due-card__pmeta b { color: var(--ink); }
.due-card__psst { margin: 2px 0 0; color: #7a6a48; font-size: 12.5px; line-height: 1.5; }
.due-card__psst b { color: #a8741c; font-variant-numeric: tabular-nums; }
.due-card__account { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding-top: 14px; color: var(--ink); font-size: 13.5px; border-top: 1px dashed #d9d2c0; }
.due-card__acct { display: inline-flex; align-items: center; gap: 5px; font-weight: 750; }
.due-card__acct svg { width: 18px; height: 18px; flex: none; }
.due-card__label, .due-card__bal { color: var(--muted); }
.due-card__bal { font-size: 12.5px; }
.due-card__arrow { color: #b3ad9f; font-weight: 800; }
/* 開關式按鈕（v5.156，Lucas 參考圖：霧面玻璃軌道＋一顆滑動的玻璃滑塊）：
   「跳過｜確認」是一條兩段的玻璃軌道，滑塊預設停在右邊（確認＝主要動作，染主題綠）；
   按下「跳過」時滑塊滑到左邊（:has 不支援的舊瀏覽器只是沒有滑動動畫，按鈕照常能按）。 */
.due-card__actions { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; padding: 4px; background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(238, 236, 229, .5)); border: 1px solid rgba(255, 255, 255, .9); border-radius: 999px; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .95), inset 0 -2px 6px rgba(120, 110, 90, .1), 0 6px 16px -10px rgba(60, 50, 30, .35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.due-card__actions::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); background: linear-gradient(180deg, rgba(74, 148, 130, .94), rgba(14, 107, 92, .92)); border-radius: 999px; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45), 0 6px 14px -6px rgba(14, 107, 92, .6); transform: translateX(100%); transition: transform .28s cubic-bezier(.3, .9, .3, 1); }
.due-card__actions button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 10px; font: inherit; font-size: 15px; font-weight: 800; background: none; border: 0; border-radius: 999px; box-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .2s; }
.due-card__actions button svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.due-card__skip { color: var(--muted); font-weight: 700; }
.due-card__confirm { color: #fff; }
.due-card__actions button:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
/* 手機上「固定收支 ›」放在標題列右上，右邊留空給小工具的 ⠿ 握把 */
@media (max-width: 600px) {
  .overview-due-panel .due-head { position: relative; flex-wrap: nowrap; }
  .overview-due-panel .due-head__link { position: absolute; top: -2px; right: 36px; margin: 0; padding: 4px 2px; font-size: 12.5px; }
}

/* ===== v5.157（Lucas）：到期提醒標題對齊、「固定收支 ›」移到標題右下、玻璃開關加互動與玻璃質感 ===== */
/* 1. 標題：小字「到期提醒」在上、鈴鐺跟「待確認記帳」那一行置中對齊（原本鈴鐺對齊的是兩行字的中間，看起來偏上） */
.due-head__title { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; align-items: center; }
.due-head__title > div { display: contents; }
.due-head__title .eyebrow { grid-column: 2; grid-row: 1; margin: 0; }
.due-head__title h2, .due-head__title h3 { grid-column: 2; grid-row: 2; margin: 0; line-height: 1.2; }
.due-head__icon { grid-column: 1; grid-row: 2; }
/* 2. 「固定收支 ›」放在標題區右下角、卡片右上方（不再跟 ⠿ 握把擠在右上） */
.due-head { align-items: flex-end; }
.due-head__link { align-self: flex-end; margin-left: auto; padding: 4px 2px; }
@media (max-width: 600px) {
  .overview-due-panel .due-head { flex-wrap: nowrap; }
  .overview-due-panel .due-head__link { position: static; margin-left: auto; padding: 4px 2px; }
}
/* 3. 玻璃開關：軌道是淡霧面玻璃、滑塊是主選單同款的深綠玻璃（上緣白色高光＋半透明漸層＋模糊）；
   .is-skip＝滑塊在「跳過」（app.js setupDueToggle：電腦滑鼠移過去就跑、手機第一下先跑過去、第二下才執行） */
.due-card__actions {
  background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(236, 233, 224, .62));
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 3px rgba(90, 80, 60, .14), 0 1px 2px rgba(60, 50, 30, .06), 0 12px 24px -16px rgba(60, 50, 30, .4);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}
.due-card__actions::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .08) 44%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(120deg, color-mix(in srgb, #4a9e8a 90%, transparent), color-mix(in srgb, #0e6b5c 94%, transparent));
  border: 1px solid rgba(255, 255, 255, .38);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .7), inset 0 -2px 5px rgba(0, 40, 30, .28), 0 8px 18px -8px rgba(14, 107, 92, .65), 0 2px 4px rgba(14, 107, 92, .18);
  -webkit-backdrop-filter: blur(6px) saturate(160%);
  backdrop-filter: blur(6px) saturate(160%);
  transition: transform .42s cubic-bezier(.34, 1.36, .5, 1);
}
.due-card__actions.is-skip::before { transform: translateX(0); }
.due-card__actions button { transition: color .25s ease; }
.due-card__actions.is-skip .due-card__skip { color: #fff; font-weight: 800; }
.due-card__actions.is-skip .due-card__confirm { color: var(--muted); }
.due-card__actions button:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
  .due-card__actions::before { transition: none; }
}

/* ===== v5.158（Lucas 要求）：「更多功能」新增「更新日誌」按鈕、版本號變成連結、固定收支徽章修正 =====
   版面維持原本的樣子（v5.84／v5.85 灰綠玻璃、4×2 圖示方格），這裡只補這三件事。 */
/* 固定收支的待處理數字徽章：手機版原本完全沒有底色與圓角（只有桌機側欄有），所以只剩一圈外框加數字，看起來是黑色方塊。
   改成黃色圓形、裡面是數字。 */
#mobile-more-dialog .mobile-more-tile__icon .recurring-due-badge {
  display: inline-grid;
  place-items: center;
  top: -5px;
  right: -9px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  color: #4a3208;
  font-size: .66rem;
  font-weight: 800;
  line-height: 1;
  text-shadow: none;
  background: #f4c75a;
  border: 2px solid rgb(255 255 255 / 85%);
  border-radius: 999px;
  box-shadow: 0 3px 8px -2px rgb(10 40 32 / 45%);
}
#mobile-more-dialog .mobile-more-tile__icon .recurring-due-badge[hidden] { display: none; }
/* 「更新日誌」是連結（<a>），要跟客服按鈕長得一樣；排在客服下面 */
#mobile-more-dialog .mobile-more-changelog { text-decoration: none; }
#mobile-more-dialog .mobile-more-ext { width: 14px; height: 14px; stroke: currentColor; opacity: .8; }
/* 版本號變成連結（連到官網更新日誌）：虛線底線提示可以點 */
.app-version-link { color: inherit; text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.app-version-link:hover, .app-version-link:focus-visible { text-decoration-style: solid; }
#mobile-more-dialog .app-footer-panel .app-version-link { color: #fff; text-decoration-color: rgb(255 255 255 / 70%); }
.overview-footer .app-version-link:hover, .app-footer-panel .app-version-link:hover { color: var(--accent-strong); }
#mobile-more-dialog .app-footer-panel .app-version-link:hover { color: #fff; }

/* ===== v5.162（Lucas，設計稿 budget-card.html）：預算卡每列加 icon、精簡文字；結餘與挪用紀錄依月份收合 ===== */
/* 同一排卡片等高時，多出來的高度不要撐開列與列之間 */
.budget-card {
  align-content: start;
}

.budget-card__head > div {
  display: grid;
  justify-items: start;
  gap: 2px;
}

/* 名稱下的小膠囊：每月歸零／一直累積；紀錄標題下的「只調整預算，不動帳戶裡的錢」也用這個 */
.budget-card__mode {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 9px 1px 6px;
  color: var(--carbon-700);
  background: #f1ede3;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.6;
}

.budget-card__mode .jk-icon {
  width: 15px;
  height: 15px;
}

/* 預算名稱膠囊（自己的 icon＋名稱） */
.budget-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 7px 0 4px;
  color: var(--ink);
  background: #f1ede3;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 22px;
  white-space: nowrap;
  vertical-align: 1px;
}

.budget-tag svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.budget-card__math {
  gap: 0;
  padding: 2px 14px;
  background: #fff;
  border-radius: 16px;
}

.budget-card__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 10px 0;
  color: var(--ink);
}

.budget-card__row + .budget-card__row {
  border-top: 1px solid var(--line);
}

.budget-card__row-icon,
.budget-card__result-icon,
.budget-rollover-row__icon {
  display: flex;
  width: 34px;
  height: 34px;
  flex: none;
  align-items: center;
  justify-content: center;
  background: #eef4f1;
  border-radius: 11px;
}

.budget-card__row-icon .jk-icon,
.budget-rollover-row__icon .jk-icon {
  width: 22px;
  height: 22px;
}

.budget-card__row--minus .budget-card__row-icon {
  background: #f8efe9;
}

.budget-card__row-label {
  min-width: 0;
  font-size: 0.94rem;
  font-weight: 650;
  line-height: 1.3;
}

.budget-card__row-label small {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.budget-card__row b {
  font-size: 1rem;
}

.budget-card__result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding-top: var(--space-3);
  border-top: 1px dashed #cfc9bb;
}

.budget-card__result-icon {
  width: 38px;
  height: 38px;
  background: #faf1dc;
  border-radius: 12px;
}

.budget-card__result-icon .jk-icon {
  width: 24px;
  height: 24px;
}

.budget-card__result span:nth-child(2) {
  color: var(--carbon-700);
  font-size: 0.94rem;
  font-weight: 750;
  white-space: nowrap;
}

.budget-card__result strong {
  font-size: 1.85rem;
  line-height: 1;
}

.budget-card[data-state="over"] .budget-card__result-icon {
  background: #f7e6e2;
}

.budget-card[data-state="over"] .budget-card__result strong {
  color: var(--expense-red);
}

.budget-card[data-state="over"] .budget-card__result span:nth-child(2) {
  color: var(--carbon-700);
}

.budget-card__bar {
  height: 10px;
}

.budget-card__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 0.8rem;
}

.budget-card__to {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* 結餘與挪用紀錄 */
.budget-rollover-head {
  justify-content: flex-start;
  align-items: center;
  margin-bottom: var(--space-3);
}

.budget-rollover-head > div {
  display: grid;
  justify-items: start;
  gap: 4px;
}

.budget-rollover-head__icon {
  display: flex;
  width: 52px;
  height: 52px;
  flex: none;
  align-items: center;
  justify-content: center;
  background: #eaf4f0;
  border-radius: 15px;
}

.budget-rollover-head__icon .jk-icon {
  width: 32px;
  height: 32px;
}

.budget-rollover-list {
  display: block;
}

.budget-rollover-month {
  border-top: 1px solid var(--line);
}

.budget-rollover-list > .budget-rollover-month:first-child {
  border-top: 0;
}

.budget-rollover-month > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 2px;
  cursor: pointer;
  list-style: none;
}

.budget-rollover-month > summary::-webkit-details-marker {
  display: none;
}

.budget-rollover-month > summary b {
  font-size: 0.97rem;
}

.budget-rollover-month__sum {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 10px;
}

.budget-rollover-month__sum em {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.budget-rollover-month__sum .jk-icon {
  width: 16px;
  height: 16px;
}

.budget-rollover-month__sum .is-rollover,
.budget-rollover-row--rollover .budget-rollover-row__amount {
  color: var(--income-green);
}

.budget-rollover-month__sum .is-borrow,
.budget-rollover-row--borrow .budget-rollover-row__amount {
  color: #8a6418;
}

.budget-rollover-month__chev {
  color: #b3ad9f;
  font-size: 1.15rem;
  font-style: normal;
  font-weight: 700;
  transition: transform 0.15s ease;
}

.budget-rollover-month[open] > summary .budget-rollover-month__chev {
  transform: rotate(90deg);
}

.budget-rollover-month[open] > summary .budget-rollover-month__sum {
  visibility: hidden;
}

.budget-rollover-month__list {
  display: grid;
  gap: 8px;
  padding-bottom: 10px;
}

.budget-rollover-more {
  margin-top: 4px;
  border-top: 1px solid var(--line);
}

.budget-rollover-more > summary {
  padding: 12px 0 2px;
  color: var(--jk-icon-main, #0e6b5c);
  font-size: 0.875rem;
  font-weight: 750;
  text-align: center;
  cursor: pointer;
  list-style: none;
}

.budget-rollover-more > summary::-webkit-details-marker {
  display: none;
}

.budget-rollover-more[open] > summary {
  display: none;
}

.budget-rollover-more > .budget-rollover-month:first-of-type {
  border-top: 0;
}

.budget-rollover-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 11px;
  padding: 11px 12px;
  background: #fff;
  border-radius: 16px;
}

.budget-rollover-row__icon {
  grid-row: span 2;
}

.budget-rollover-row--borrow .budget-rollover-row__icon {
  background: #faf1dc;
}

.budget-rollover-row__kind {
  font-size: 0.94rem;
}

.budget-rollover-row__amount {
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.budget-rollover-row__flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  grid-column: 2 / 4;
}

.budget-rollover-row__flow i {
  color: #b3ad9f;
  font-style: normal;
  font-weight: 700;
}

.budget-rollover-row__formula {
  grid-column: 2 / 4;
  color: var(--muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 420px) {
  .budget-card__result strong { font-size: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .budget-rollover-month__chev { transition: none; }
}

/* ===== v5.166（Lucas）：分期表單——照片、備註 icon（沿用記帳 .entry-icon）、照片預覽、備註、訂單連結 ===== */
.installment-form__header {
  gap: 8px;
}

.installment-form__iconbar {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.installment-form__photo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  padding: 10px;
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.installment-form__photo[hidden],
.installment-form__note[hidden],
.installment-form__link a[hidden] {
  display: none;
}

.installment-form__photo img {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 12px;
}

.installment-form__photo > div {
  display: grid;
  gap: 4px;
  justify-items: start;
}

.installment-form__photo small {
  color: var(--muted);
  font-size: 0.8rem;
}

.installment-form__note {
  display: block;
  margin: 0 0 12px;
}

.installment-form__note textarea {
  width: 100%;
  min-height: 64px;
  padding: 10px 12px;
  font: inherit;
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: 14px;
  resize: vertical;
}

.installment-form__link {
  display: flex;
  align-items: center;
  gap: 10px;
}

.installment-form__link input {
  flex: 1 1 auto;
  min-width: 0;
}

.installment-form__link a {
  flex: none;
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}


/* ===== v5.168（Lucas 要求）：最新消息套用官網玻璃版（web/updates.html 的 --glass-fill／
   --glass-line／--glass-shadow 配方）。整個視窗換成官網的暖灰綠底＋兩顆模糊光球，
   卡片是霧面玻璃疊在上面。全部限定在 #news-dialog，不影響分帳日誌等其他列表。 ===== */
#news-dialog {
  --news-glass-fill: linear-gradient(135deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .48));
  --news-glass-line: rgba(255, 255, 255, .8);
  --news-glass-shadow: inset 0 1px 1px rgba(255, 255, 255, .9), inset 0 -1px 2px rgba(120, 130, 110, .12), 0 30px 54px -36px rgba(40, 55, 45, .45);
  --news-brand: #0e6b5c;
  --news-brand-tint: #e5efeb;
  --news-gold-ink: #8a5d14;
}

#news-dialog .news-dialog {
  position: relative;
  isolation: isolate;
  background: linear-gradient(165deg, #d6d9cf 0%, #cbd1c6 42%, #dcd4c2 100%);
  border: 1px solid rgba(255, 255, 255, .6);
}

#news-dialog .news-dialog::before,
#news-dialog .news-dialog::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

#news-dialog .news-dialog::before {
  top: -90px;
  right: -80px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle at 32% 26%, #ffe5b0, #e4a64a 46%, #a8661a 100%);
  filter: blur(3px);
  opacity: .4;
}

#news-dialog .news-dialog::after {
  bottom: -70px;
  left: -70px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle at 32% 26%, #a6dccd, #43998a 46%, #0e6b5c 100%);
  filter: blur(2px);
  opacity: .45;
}

#news-dialog .eyebrow {
  color: var(--news-brand);
}

#news-dialog .close-button {
  background: linear-gradient(160deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .5));
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: inset 0 1px 1px #fff, 0 10px 22px -14px rgba(40, 55, 45, .5);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

#news-dialog .news-toolbar {
  color: var(--ink-soft, #46524d);
}

#news-dialog .news-toolbar .text-button {
  color: var(--news-brand);
}

#news-dialog .news-section__title {
  justify-self: start;
  padding: 4px 14px;
  color: var(--ink);
  font-size: 0.8rem;
  letter-spacing: .04em;
  background: linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .62));
  border: 1px solid var(--news-glass-line);
  border-radius: 999px;
  box-shadow: inset 0 1px 1px #fff;
}

#news-dialog .news-item {
  background: var(--news-glass-fill);
  border: 1px solid var(--news-glass-line);
  border-radius: 22px;
  box-shadow: var(--news-glass-shadow);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  backdrop-filter: blur(22px) saturate(1.3);
}

#news-dialog .news-item.is-new {
  border-color: rgba(255, 255, 255, .95);
  box-shadow: inset 3px 0 0 var(--news-brand), var(--news-glass-shadow);
}

/* 左邊文字區撐滿，垃圾桶跟箭頭才會每張卡都對齊在右邊（原本分帳通知較短，圖示會往左縮） */
#news-dialog .news-item__summary-copy {
  flex: 1;
}

#news-dialog .news-item__kind {
  padding: 1px 10px;
  color: var(--news-brand);
  font-size: 0.72rem;
  font-weight: 800;
  background: var(--news-brand-tint);
  border-radius: 999px;
}

#news-dialog .news-item__kind--support {
  color: var(--danger, #b04437);
  background: rgba(169, 79, 69, .1);
}

#news-dialog .news-item__meta time {
  color: var(--news-gold-ink);
  font-weight: 800;
}

#news-dialog .news-item__badge {
  background: linear-gradient(180deg, rgba(40, 120, 103, .97), var(--news-brand));
}

#news-dialog .news-item__link {
  background: linear-gradient(180deg, rgba(40, 120, 103, .97), rgba(14, 107, 92, .99));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45), 0 12px 24px -12px rgba(14, 107, 92, .7);
}

#news-dialog .news-item__image {
  border-radius: 16px;
}

#news-dialog .news-older {
  border-top-color: rgba(255, 255, 255, .7);
}

#news-dialog .news-older__summary {
  color: var(--news-brand);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #news-dialog .news-item {
    background: rgba(255, 255, 255, .88);
  }
}


/* ===== v5.169：最新消息「包了兩層捲動」修正——v5.168 的綠色光球超出視窗下緣，讓外框
   （.dialog-card 本身 overflow-y:auto）也能捲，出現第二條捲軸與白色軌道。外框改成不捲、
   用 flex 讓清單吃掉剩下的高度，只留清單自己一條細捲軸。 ===== */
#news-dialog .news-dialog {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#news-dialog .news-dialog > .dialog-header,
#news-dialog .news-toolbar {
  flex: none;
}

#news-dialog .news-list {
  flex: 1 1 auto;
  min-height: 0;
  margin-right: -6px;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(31, 42, 38, .28) transparent;
}

#news-dialog .news-list::-webkit-scrollbar {
  width: 6px;
}

#news-dialog .news-list::-webkit-scrollbar-track {
  background: transparent;
}

#news-dialog .news-list::-webkit-scrollbar-thumb {
  background: rgba(31, 42, 38, .28);
  border-radius: 999px;
}


/* ===== v5.170（Lucas）：恢復 v5.104 左右滑主選單＋下方分組小圓點。v5.107 因為拿掉小圓點把選單往上抬
   （bottom: max(0.9rem, safe-area)），小圓點回來後改回 v5.104 的位置，讓小圓點坐在選單下面。 ===== */
@media (max-width: 959px) {
  .mobile-nav { bottom: env(safe-area-inset-bottom, 0px); }
}

/* ===== v5.171（Lucas 手機實測）：「選單」打開的更多功能在手機上塞滿整個畫面（360×700 內容 743px）。
   改成：三顆按鈕並排一列、圖示格與間距收緊、視窗貼在主選單上方（看得到底下的主選單），太矮的手機才在裡面捲。 ===== */
.mobile-more-actions { display: grid; gap: 12px; }
@media (max-width: 959px) {
  #mobile-more-dialog[open] {
    margin: auto auto calc(env(safe-area-inset-bottom, 0px) + 112px);
    max-height: calc(100dvh - env(safe-area-inset-bottom, 0px) - 112px - 16px);
  }
  #mobile-more-dialog .dialog-card--mobile-more {
    max-height: calc(100dvh - env(safe-area-inset-bottom, 0px) - 112px - 16px);
    padding: 18px 16px 14px;
    gap: 10px;
  }
  #mobile-more-dialog .mobile-more-grid { gap: 2px 4px; }
  #mobile-more-dialog .mobile-more-tile__button { padding: 8px 2px 6px; gap: 4px; }
  #mobile-more-dialog .mobile-more-tile__icon { width: 30px; height: 30px; }
  #mobile-more-dialog .mobile-more-tile__icon .menu-icon { width: 24px; height: 24px; }
  #mobile-more-dialog .mobile-more-help summary { min-height: 36px; }
  #mobile-more-dialog .mobile-more-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  #mobile-more-dialog .mobile-more-actions .mobile-more-support {
    position: relative;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    min-height: 58px;
    margin: 0;
    padding: 8px 4px;
    font-size: .78rem;
    border-radius: 16px;
    white-space: nowrap;
  }
  #mobile-more-dialog .mobile-more-actions .mobile-more-ext { position: absolute; top: 7px; right: 8px; width: 12px; height: 12px; }
  #mobile-more-dialog .mobile-more-actions .support-unread-badge--inline { position: absolute; top: 4px; right: 6px; }
  #mobile-more-dialog .app-footer-panel { padding-top: 8px; gap: 2px; }
}

/* ===== v5.172（Lucas）：①視窗再往上抬，不壓到主選單中間凸起的＋（＋頂端離畫面底 121px，改留 136px）。
   ②三顆按鈕改成只有圓形圖示，點一下才展開文字（app.js collapseMobileMoreActions），展開後再點才打開。 ===== */
@media (max-width: 959px) {
  #mobile-more-dialog[open] {
    margin: auto auto calc(env(safe-area-inset-bottom, 0px) + 136px);
    max-height: calc(100dvh - env(safe-area-inset-bottom, 0px) - 136px - 16px);
  }
  #mobile-more-dialog .dialog-card--mobile-more {
    max-height: calc(100dvh - env(safe-area-inset-bottom, 0px) - 136px - 16px);
  }
  #mobile-more-dialog .mobile-more-actions { display: flex; justify-content: center; gap: 14px; }
  #mobile-more-dialog .mobile-more-actions .mobile-more-support {
    flex-direction: row;
    gap: 0;
    width: auto;
    min-width: 46px;
    min-height: 46px;
    padding: 0 12px;
    border-radius: 999px;
    transition: padding 220ms ease, gap 220ms ease, background-color 220ms ease;
  }
  #mobile-more-dialog .mobile-more-actions .mobile-more-support > span:not(.support-unread-badge) {
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-width 260ms ease, opacity 200ms ease;
  }
  #mobile-more-dialog .mobile-more-actions .mobile-more-support.is-expanded {
    gap: 6px;
    padding: 0 16px 0 14px;
    background: rgb(255 255 255 / 20%);
  }
  #mobile-more-dialog .mobile-more-actions .mobile-more-support.is-expanded > span:not(.support-unread-badge) { max-width: 7em; opacity: 1; }
  #mobile-more-dialog .mobile-more-actions .mobile-more-ext { position: static; display: none; width: 12px; height: 12px; }
  #mobile-more-dialog .mobile-more-actions .mobile-more-support.is-expanded .mobile-more-ext { display: block; }
  #mobile-more-dialog .mobile-more-actions .support-unread-badge--inline { position: absolute; top: -4px; right: -4px; }
}
@media (max-width: 959px) and (prefers-reduced-motion: reduce) {
  #mobile-more-dialog .mobile-more-actions .mobile-more-support,
  #mobile-more-dialog .mobile-more-actions .mobile-more-support > span { transition: none; }
}

/* ===== v5.173（Lucas）：總覽拿掉分頁標籤，改成右下（或左下）的金屬轉鈕（app.js syncHomeRail）。
   質感照 Lucas 提供的設計稿：拉絲鉻金屬滾筒（上下暗、中間亮的圓柱打光＋細密滾花＋左右端蓋＋柔和落影），
   旁邊一排琥珀色進度點（走過的實心、目前的最大、還沒到的灰色空心）。紋路位置用 --dial-spin 讓它看起來在轉。只在手機版。 ===== */
.home-dial { --dial-spin: 0px; position: fixed; bottom: calc(env(safe-area-inset-bottom, 0px) + 136px); z-index: 15; display: flex; align-items: center; gap: 7px; }
.home-dial[hidden] { display: none; }
.home-dial[data-side="right"] { right: max(6px, env(safe-area-inset-right, 0px)); flex-direction: row; }
.home-dial[data-side="left"] { left: max(6px, env(safe-area-inset-left, 0px)); flex-direction: row-reverse; }
.home-dial__dots { display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: 8px; height: 118px; }
.home-dial__dots i { display: block; width: 5px; height: 5px; border: 1px solid #c9c7c0; border-radius: 50%; background: transparent; transition: all 200ms ease; }
.home-dial__dots i.is-done { width: 4px; height: 4px; background: #e3a23a; border-color: #e3a23a; }
.home-dial__dots i.is-current { width: 8px; height: 8px; background: #f0a92c; border-color: #f0a92c; box-shadow: 0 0 0 3px rgb(240 169 44 / 22%); }
.home-dial__wheel {
  position: relative;
  width: 24px;
  height: 132px;
  padding: 0 3px;
  border-radius: 7px;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  background: linear-gradient(90deg, #4a4b4d 0%, #9a9b9e 14%, #8a8b8e 50%, #9a9b9e 86%, #4a4b4d 100%);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 85%) inset,
    0 -1px 0 rgb(0 0 0 / 35%) inset,
    0 10px 18px -6px rgb(30 30 30 / 45%),
    0 2px 4px rgb(30 30 30 / 25%);
}
.home-dial__knurl {
  position: absolute;
  inset: 2px 4px;
  border-radius: 4px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgb(20 20 22 / 70%) 0%, rgb(20 20 22 / 10%) 16%, rgb(255 255 255 / 0%) 34%, rgb(255 255 255 / 55%) 50%, rgb(255 255 255 / 0%) 66%, rgb(20 20 22 / 10%) 84%, rgb(20 20 22 / 70%) 100%),
    repeating-linear-gradient(180deg, rgb(60 60 64 / 55%) 0 1px, rgb(255 255 255 / 70%) 1px 2px, rgb(170 171 175 / 0%) 2px 3px) 0 var(--dial-spin) / 100% 3px,
    linear-gradient(90deg, #b9babd 0%, #f2f2f3 30%, #ffffff 50%, #f2f2f3 70%, #b9babd 100%);
  box-shadow: inset 2px 0 2px rgb(0 0 0 / 30%), inset -2px 0 2px rgb(0 0 0 / 30%);
}
.home-dial__wheel.is-turning { cursor: grabbing; }
.home-dial__wheel:focus-visible { outline: 3px solid #f0a92c; outline-offset: 3px; }
.home-dial__label {
  position: absolute;
  bottom: 50%;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 12px;
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  white-space: nowrap;
  background: rgb(31 42 38 / 90%);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgb(31 42 38 / 25%);
  opacity: 0;
  pointer-events: none;
  transform: translateY(50%) scale(.96);
  transition: opacity 180ms ease, transform 180ms ease;
}
.home-dial__label b { color: #f0a92c; font-weight: 800; font-variant-numeric: tabular-nums; }
.home-dial[data-side="right"] .home-dial__label { right: 46px; transform-origin: right center; }
.home-dial[data-side="left"] .home-dial__label { left: 46px; transform-origin: left center; }
.home-dial.is-labeled .home-dial__label { opacity: 1; transform: translateY(50%) scale(1); }
@media (max-width: 959px) {
}
@media (min-width: 960px) { .home-dial { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .home-dial__dots i, .home-dial__label { transition: none; }
}
.dial-side-setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; padding: 12px 14px; background: var(--surface-strong, #fff); border: 1px solid var(--line); border-radius: 16px; font-weight: 700; }
.dial-side-setting__options { display: inline-flex; padding: 3px; background: rgb(25 26 24 / 6%); border-radius: 999px; }
.dial-side-setting__options button { min-height: 36px; padding: 0 16px; color: var(--muted); font: inherit; font-size: .88rem; background: transparent; border: 0; border-radius: 999px; cursor: pointer; }
.dial-side-setting__options button[aria-pressed="true"] { color: #fff; background: var(--ink); }
@media (min-width: 960px) { .dial-side-setting { display: none; } }

/* ===== v5.174（Lucas）：轉鈕出現時，總覽整個內容寬度扣掉轉鈕（6px 邊距＋24px 滾筒＋7px＋8px 進度點≈45px），
   內容從轉鈕外側再留一點空隙開始，不再跟轉鈕疊在一起；左右手各自收窄對應那一側。主選單維持全寬。 ===== */
@media (max-width: 959px) {
  html.home-dial-on[data-home-dial="right"] [data-view-panel="overview"] { margin-right: 44px; }
  html.home-dial-on[data-home-dial="left"] [data-view-panel="overview"] { margin-left: 44px; }
}
@media (max-width: 959px) {
  /* 收窄後「預算使用狀態」會斷成兩行：標題略縮、標題與「調整預算 ›」都不換行 */
  html.home-dial-on [data-widget="budget"] .section-heading h2 { font-size: 1.3rem; white-space: nowrap; }
  html.home-dial-on [data-widget="budget"] .overview-budget-adjust { white-space: nowrap; }
}

/* ===== v5.175（Lucas）：轉鈕上下加金屬圓鈕（↑ 回頂端、↓ 到頁尾；原本 + / −，改成箭頭比較清楚）；後台全部不勾時只留這兩顆。 ===== */
.home-dial__col { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.home-dial__end {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  color: #2b2c2e;
  font: 800 1.15rem/1 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  text-shadow: 0 1px 0 rgb(255 255 255 / 80%);
  cursor: pointer;
  background: radial-gradient(circle at 38% 30%, #ffffff 0%, #e4e4e6 38%, #a9aaad 100%);
  border: 1px solid #7f8083;
  border-radius: 50%;
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 3px rgb(0 0 0 / 22%), 0 6px 12px -4px rgb(30 30 30 / 40%), 0 1px 2px rgb(30 30 30 / 25%);
}
.home-dial__end svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 0 rgb(255 255 255 / 80%)); }
.home-dial__end:active { transform: scale(.94); box-shadow: inset 0 2px 4px rgb(0 0 0 / 30%), 0 2px 4px rgb(30 30 30 / 25%); }
.home-dial__end:focus-visible { outline: 3px solid #f0a92c; outline-offset: 2px; }
.home-dial.is-ends-only .home-dial__wheel,
.home-dial.is-ends-only .home-dial__dots { display: none; }
/* v5.175：+ / − 圓鈕 30px 比滾筒寬，總覽內容讓出的寬度從 38px 改 44px（上面 v5.174 那兩行） */
@media (max-width: 374px) {
  /* v5.175：360 寬小手機＋轉鈕時，「預算使用狀態」標題列再縮一點才放得下 */
  html.home-dial-on [data-widget="budget"] .section-heading h2 { font-size: 1.12rem; }
  html.home-dial-on [data-widget="budget"] .overview-budget-adjust { font-size: .85rem; }
}

/* ===== v5.176（Lucas）：轉鈕上下的箭頭拿掉金屬圓鈕，直接黑色線條箭頭（點擊範圍維持 30px 好按）。 ===== */
.home-dial__end { color: #1f2a26; text-shadow: none; background: transparent; border: 0; border-radius: 8px; box-shadow: none; }
.home-dial__end svg { width: 22px; height: 22px; stroke-width: 2.4; filter: none; }
.home-dial__end:active { transform: scale(.9); box-shadow: none; }
/* v5.176：頁面頂端就落在轉鈕上方的小工具恢復全寬（app.js syncHomeDialAboveWidgets 加 .is-above-dial） */
@media (max-width: 959px) {
  html.home-dial-on[data-home-dial="right"] #home-widgets > .home-widget.is-above-dial { margin-right: -44px; }
  html.home-dial-on[data-home-dial="left"] #home-widgets > .home-widget.is-above-dial { margin-left: -44px; }
}
/* v5.176（Lucas）：轉鈕名稱標籤改成直式，放在 ↑ 上方、轉鈕那條空間裡，不擋畫面內容（拇指從下往上撥也不會蓋住）。
   上面是「第幾個／共幾個」，下面是直書名稱。 */
.home-dial__label,
.home-dial[data-side="right"] .home-dial__label,
.home-dial[data-side="left"] .home-dial__label {
  bottom: calc(100% + 8px);
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 30px;
  padding: 9px 0 10px;
  font-size: .78rem;
  line-height: 1.15;
  border-radius: 15px;
  transform: translateY(6px);
  transform-origin: center bottom;
}
.home-dial[data-side="right"] .home-dial__label { right: 0; left: auto; }
.home-dial[data-side="left"] .home-dial__label { left: 0; right: auto; }
.home-dial.is-labeled .home-dial__label { transform: none; }
.home-dial__label b { display: grid; justify-items: center; font-size: .78rem; line-height: 1.05; }
.home-dial__label b small { font-size: .62rem; font-weight: 700; opacity: .85; }
.home-dial__label span { writing-mode: vertical-rl; text-orientation: mixed; letter-spacing: .12em; }

/* ===== v5.177（Lucas 選 A：統一窄欄）：總覽小工具全部同寬對齊（app.js HOME_DIAL_WIDEN_TOP=false）。
   手機版小工具右上角的拖曳小圖示縮小、移到卡片右上角外緣，不再壓到「找客服」、(i) 這類卡片裡的按鈕；
   點擊範圍用透明外框維持 32px 好按。 ===== */
@media (max-width: 959px) {
  .home-widgets:not(.is-editing) > .home-widget > .home-widget__handle,
  .home-widget[data-widget="period"] > .home-widget__handle,
  .home-widget[data-widget="accounts"] > .home-widget__handle {
    top: -12px;
    right: -12px;
    width: 32px;
    height: 32px;
    background: transparent;
    opacity: 1;
  }
  .home-widgets:not(.is-editing) > .home-widget > .home-widget__handle::before {
    content: "";
    position: absolute;
    inset: 8px;
    background: color-mix(in srgb, var(--surface, #fffdf8) 92%, transparent);
    border: 1px solid rgb(31 42 38 / 12%);
    border-radius: 999px;
    box-shadow: 0 2px 6px rgb(31 42 38 / 12%);
  }
  .home-widgets:not(.is-editing) > .home-widget > .home-widget__handle svg { position: relative; width: 10px; height: 10px; color: rgb(31 42 38 / 45%); }
  .home-widget .section-heading,
  .home-widget .dream-row-panel .section-heading,
  .home-widget.overview-stocks .section-heading { padding-right: 0; }
}
@media (max-width: 959px) {
  /* 我的帳戶上面有「＋ 新增」標題列：小圖示改放在「我的錢」卡片右上角，不壓到新增鈕（top 由 app 量測後覆寫成實際位置） */
  .home-widgets:not(.is-editing) > .home-widget[data-widget="accounts"] > .home-widget__handle { top: var(--handle-top, 52px); }
}

/* ===== v5.178（Lucas）：總覽恢復全寬；轉鈕只在滑動頁面時浮出來（app.js homeDialWake，停下 1.6 秒淡出），
   轉鈕那一側加一層半透明白色漸層底，讓滾筒跟底下的內容分開、看起來協調。藏起來時點不到、不擋內容。 ===== */
.home-dial {
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease, transform 260ms ease;
}
.home-dial[data-side="right"] { transform: translateX(10px); }
.home-dial[data-side="left"] { transform: translateX(-10px); }
.home-dial.is-awake { opacity: 1; pointer-events: auto; transform: none; }
.home-dial::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -130px;
  bottom: -60px;
  width: 104px;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 82%, transparent 100%);
}
.home-dial[data-side="left"]::before {
  left: calc(-1 * max(6px, env(safe-area-inset-left, 0px)));
  background: linear-gradient(90deg, rgb(250 248 242 / 94%) 0%, rgb(250 248 242 / 78%) 45%, rgb(250 248 242 / 0%) 100%);
}
.home-dial[data-side="right"]::before {
  right: calc(-1 * max(6px, env(safe-area-inset-right, 0px)));
  background: linear-gradient(270deg, rgb(250 248 242 / 94%) 0%, rgb(250 248 242 / 78%) 45%, rgb(250 248 242 / 0%) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .home-dial, .home-dial[data-side="right"], .home-dial[data-side="left"] { transform: none; transition: opacity 120ms linear; }
}

/* ===== v5.179（Lucas）：常用功能改細版——膠囊高度 60→44、按鈕 48→36、右邊＋ 54→42、圖示 23→19，看起來精緻不笨重 ===== */
@media (max-width: 959px) {
  #quick-dock .quick-dock__head { min-height: 30px; }
  #quick-dock .quick-dock__head h2 { font-size: 1rem; }
  #quick-dock .quick-dock__bar { height: 44px; min-height: 44px; }
  #quick-dock .quick-dock__pill { height: 44px; padding: 4px; }
  #quick-dock .quick-dock__track { height: 36px; }
  #quick-dock .quick-dock__btn { height: 36px; min-height: 36px; padding: 0 10px; font-size: .9rem; gap: 6px; }
  #quick-dock .quick-dock__btn svg,
  #quick-dock .quick-dock__btn .menu-icon { width: 19px; height: 19px; }
  #quick-dock .quick-dock__indicator { top: 0; bottom: auto; height: 36px; margin-top: 0; }
  #quick-dock .quick-dock__add { width: 42px; height: 42px; flex-basis: 42px; }
  #quick-dock .quick-dock__add svg { width: 20px; height: 20px; }
}

/* ===== v5.179（Lucas）：總覽「綜合搜尋」——細版搜尋框（跟常用功能同一種白色膠囊），結果依「明細／好友分帳／我的庫存／股票行情」分組 ===== */
.home-search { display: grid; gap: 10px; }
.home-search__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 8px 0 14px;
  background: var(--surface-strong, #fffdf8);
  border: 1px solid rgb(31 42 38 / 10%);
  border-radius: 999px;
  box-shadow: 0 6px 16px -10px rgb(31 42 38 / 30%);
}
.home-search__bar:focus-within { border-color: color-mix(in srgb, var(--accent, #0e6b5c) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #0e6b5c) 14%, transparent); }
.home-search__icon { flex: none; width: 19px; height: 19px; fill: none; stroke: var(--muted, #6d6d66); stroke-width: 2; stroke-linecap: round; }
.home-search__bar input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  color: var(--ink);
  font: inherit;
  font-size: .95rem;
  background: transparent;
  border: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.home-search__bar input::-webkit-search-cancel-button { display: none; }
.home-search__bar input::placeholder { color: var(--muted, #6d6d66); }
.home-search__clear { flex: none; display: grid; width: 30px; height: 30px; padding: 0; place-items: center; color: var(--muted); font-size: 1.2rem; line-height: 1; background: rgb(25 26 24 / 6%); border: 0; border-radius: 50%; cursor: pointer; }
.home-search__clear[hidden] { display: none; }
.home-search__results { display: grid; gap: 14px; padding: 14px; background: var(--surface-strong, #fffdf8); border: 1px solid rgb(31 42 38 / 8%); border-radius: 20px; box-shadow: 0 10px 24px -16px rgb(31 42 38 / 35%); }
.home-search__results[hidden] { display: none; }
.home-search__group { display: grid; gap: 6px; }
.home-search__group h3 { display: flex; align-items: baseline; gap: 6px; margin: 0; color: var(--muted); font-size: .78rem; font-weight: 800; letter-spacing: .04em; }
.home-search__group h3 small { font-size: .72rem; font-weight: 700; opacity: .8; }
.home-search__group .transaction-list { gap: 2px; }
.home-search__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 6px 4px;
  color: inherit;
  font: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}
.home-search__row:hover, .home-search__row:focus-visible { background: rgb(25 26 24 / 4%); }
.home-search__badge { display: grid; width: 36px; height: 36px; place-items: center; color: var(--accent-strong, #0e6b5c); font-size: .7rem; font-weight: 800; font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--accent, #0e6b5c) 10%, transparent); border-radius: 50%; }
.home-search__badge--split { color: #8a5d14; font-size: .85rem; background: #faf0dc; }
.home-search__badge--stock { color: var(--ink); background: rgb(25 26 24 / 6%); }
.home-search__text { display: grid; gap: 2px; min-width: 0; }
.home-search__text b { overflow: hidden; font-size: .95rem; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.home-search__text small { overflow: hidden; color: var(--muted); font-size: .78rem; white-space: nowrap; text-overflow: ellipsis; }
.home-search__row > strong { font-size: .95rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.home-search__price { display: grid; justify-items: end; font-variant-numeric: tabular-nums; }
.home-search__price small { font-size: .72rem; font-weight: 700; color: var(--muted); }
.home-search__price.is-up small { color: var(--stock-up, #c0392b); }
.home-search__price.is-down small { color: var(--stock-down, #1e8449); }
.home-search__muted { color: var(--muted); font-size: .78rem; font-style: normal; }
.home-search__more { justify-self: start; min-height: 36px; padding: 0 4px; color: var(--accent-strong, #0e6b5c); font: inherit; font-size: .86rem; font-weight: 700; background: transparent; border: 0; cursor: pointer; }
.home-search__status, .home-search__empty { margin: 0; color: var(--muted); font-size: .86rem; }
.home-search__empty { display: grid; gap: 4px; text-align: center; padding: 6px 0; }
.home-search__empty small { font-size: .78rem; }
/* v5.179（Lucas）：搜尋列搬到標語「錢花去哪？問 JOHN。」下面——跟標題文字對齊、不太寬、細一點；結果在標題區下方整排展開。
   字級 16px：iPhone 點進小於 16px 的輸入框會自動放大畫面。
   Lucas：LOGO 跟「錢花去哪？問 JOHN。」齊底——搜尋列放在 LOGO 那一列外面，LOGO 列改成底部對齊；搜尋列靠左、在 LOGO 下方（LOGO｜標語／搜尋列）。 */
.topbar-heading__row { align-items: flex-end; }
.topbar-heading > .home-search__bar { box-sizing: border-box; width: min(290px, 100%); max-width: none; height: 38px; margin: 10px 0 0; padding: 0 6px 0 12px; box-shadow: 0 4px 12px -8px rgb(31 42 38 / 28%); }
.topbar-heading > .home-search__bar[hidden] { display: none; }
.topbar-heading > .home-search__bar .home-search__icon { width: 17px; height: 17px; }
.topbar-heading > .home-search__bar input { font-size: 16px; }
.topbar-heading > .home-search__bar .home-search__clear { width: 26px; height: 26px; font-size: 1.05rem; }
.topbar-heading > .home-search__results { position: relative; z-index: 6; margin: 12px 0 4px; text-align: left; }
/* Lucas：搜尋列右邊的主色「搜尋」按鈕（照設計稿：白色膠囊裡內嵌一顆深色膠囊按鈕，搜尋中前面轉圈圈）。
   搜尋列加寬到 330px 放得下按鈕。 */
.topbar-heading > .home-search__bar { width: min(330px, 100%); height: 42px; padding: 0 4px 0 14px; }
.home-search__go {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  min-width: 68px;
  padding: 0 16px;
  color: #fff;
  font: inherit;
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .04em;
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgb(14 107 92 / 26%);
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease;
}
.home-search__go:hover { background: var(--accent-strong); }
.home-search__go:active { transform: scale(.96); }
.home-search__go:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: 2px; }
.home-search__spinner { display: none; width: 12px; height: 12px; border: 2px solid rgb(255 255 255 / 40%); border-top-color: #fff; border-radius: 50%; animation: home-search-spin 700ms linear infinite; }
.home-search__go.is-busy .home-search__spinner { display: inline-block; }
@keyframes home-search-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .home-search__spinner { animation-duration: 2s; } }

/* ===== v5.181（Lucas）：搜尋提示改成 icon＋標題＋說明，示範膠囊置中；Android 保留不支援 color-mix 時的底色。 ===== */
.home-search__hint { display: grid; gap: 10px; }
.home-search__hint-title { margin: 0; color: var(--ink); font-size: .86rem; font-weight: 800; }
.home-search__hint-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: .84rem; line-height: 1.5; }
.home-search__hint-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 34px; }
.home-search__hint-icon { display: grid; width: 28px; height: 28px; place-items: center; color: var(--accent-strong, #0a5147); background: #edf5f2; background: color-mix(in srgb, var(--accent, #0e6b5c) 10%, var(--surface-strong, #fffdf8)); border-radius: 9px; }
.home-search__hint-icon .jk-icon { width: 18px; height: 18px; }
.home-search__hint-copy { display: grid; grid-template-columns: minmax(8.5em, max-content) minmax(0, 1fr); align-items: baseline; gap: 10px; min-width: 0; }
.home-search__hint-list b { color: var(--ink); font-weight: 750; }
.home-search__hint-list small { color: var(--muted); font-size: .84rem; line-height: 1.45; }
.home-search__chips { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 8px; width: 100%; margin-inline: auto; }
.home-search__chip {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  line-height: 1;
  text-align: center;
  color: var(--accent-strong, #0a5147);
  font: inherit;
  font-size: .88rem;
  font-weight: 700;
  background: #edf5f2;
  background: color-mix(in srgb, var(--accent, #0e6b5c) 9%, transparent);
  border: 1px solid #c6ddd7;
  border-color: color-mix(in srgb, var(--accent, #0e6b5c) 22%, transparent);
  border-radius: 999px;
  cursor: pointer;
}
.home-search__chip-label { color: var(--muted); font-size: .72rem; font-weight: 700; line-height: 1; }
.home-search__chip-query { font-size: .9rem; font-weight: 800; line-height: 1; }
.home-search__chip:hover, .home-search__chip:focus-visible { background: color-mix(in srgb, var(--accent, #0e6b5c) 16%, transparent); }
@media (max-width: 520px) {
  .home-search__hint-copy { grid-template-columns: 1fr; gap: 0; }
  .home-search__hint-list small { display: block; }
}

/* ===== v5.182：後台鎖定的首頁小工具不能排序或移除。 ===== */
.home-widget__handle.is-locked,
.home-widget__handle:disabled {
  cursor: not-allowed;
  opacity: .72;
}
.home-widget__handle.is-locked svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.home-widgets.is-editing > .home-widget.is-locked {
  outline-color: rgb(109 109 102 / 32%);
  cursor: default;
}

/* ===== v5.183：iPhone 金屬轉鈕加上可感知的分格卡點（iOS 無網頁震動 API，搭配 app.js 的短提示音）。 ===== */
.home-dial__wheel {
  transform-origin: center;
  transition: transform 80ms ease, filter 80ms ease;
}
.home-dial.is-detent .home-dial__wheel {
  filter: brightness(1.12);
  transform: scaleY(.965);
}
@media (prefers-reduced-motion: reduce) {
  .home-dial__wheel { transition: none; }
  .home-dial.is-detent .home-dial__wheel { filter: brightness(1.08); transform: none; }
}

/* ===== v5.185（Lucas）：好友分帳紀錄明細「已收到」按鈕（放在「需付 220 給你」左邊）＋確認視窗的「錢存進哪裡」 ===== */
.split-detail__person.has-receive { align-items: center; }
.split-detail__receive {
  flex: none;
  min-height: 34px;
  margin-left: auto;
  margin-right: 10px;
  padding: 0 14px;
  color: #fff;
  font: inherit;
  font-size: .82rem;
  font-weight: 800;
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgb(14 107 92 / 22%);
  cursor: pointer;
}
.split-detail__receive:hover { background: var(--accent-strong); }
.split-detail__receive:disabled { opacity: .55; cursor: default; }
.split-receive__field { display: grid; gap: 6px; margin: 4px 0 14px; font-size: .9rem; font-weight: 700; }
.split-receive__field[hidden] { display: none; }
.split-receive__field select { min-height: 44px; padding: 0 12px; font: inherit; font-size: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-strong, #fff); }
.split-receive__field small { color: var(--muted); font-size: .78rem; font-weight: 500; }

/* ===== v5.188（Lucas 回報）：常用功能改細版（v5.179）後，固定收支展開時待確認數字壓到「固定收支」字上。
   數字改貼在 icon 右上角、小一號；有數字時文字往右讓 8px，展開或收起都不會疊在一起。只限手機細版。 ===== */
@media (max-width: 959px) {
  #quick-dock .quick-dock__btn .recurring-due-badge { top: 0; left: 20px; min-width: 16px; height: 16px; padding: 0 4px; font-size: .62rem; }
  #quick-dock .quick-dock__btn .recurring-due-badge:not([hidden]) ~ .quick-dock__label { margin-left: 8px; }
}

/* ===== v5.189（Lucas 選 A）：「編輯首頁」清單——⠿ 拖曳、icon、名稱＋一行說明、右邊開關（鎖定＝鎖頭），一個畫面看完 ===== */
#home-widget-editor .home-widget-editor { display: flex; flex-direction: column; gap: 10px; max-height: min(86dvh, 720px); overflow: hidden; }
#home-widget-editor .home-widget-editor > .dialog-header { flex: none; }
.home-widget-editor .dialog-header { align-items: center; }
.home-widget-editor__done { min-height: 38px; padding: 0 18px; border-radius: 999px; }
.home-widget-editor__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px 6px; }
.home-widget-editor__label { display: flex; align-items: baseline; gap: 8px; margin: 10px 4px 8px; color: var(--ink); font-size: .86rem; font-weight: 800; }
.home-widget-editor__label small { color: var(--muted); font-size: .74rem; font-weight: 600; }
.home-widget-editor__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.home-widget-editor__row {
  position: relative;
  display: grid;
  grid-template-columns: 32px 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  padding: 6px 12px 6px 4px;
  background: var(--surface-strong, #fffdf8);
  border: 1px solid rgb(31 42 38 / 8%);
  border-radius: 16px;
  transition: box-shadow 160ms ease, background-color 160ms ease;
}
.home-widget-editor__row.is-off { background: transparent; border-style: dashed; }
.home-widget-editor__row.is-off .home-widget-editor__icon,
.home-widget-editor__row.is-off .home-widget-editor__text { opacity: .7; }
.home-widget-editor__row.is-locked { background: color-mix(in srgb, var(--accent, #0e6b5c) 5%, var(--surface-strong, #fffdf8)); }
.home-widget-editor__row.is-dragging { z-index: 2; box-shadow: 0 12px 28px rgb(31 42 38 / 22%); }
.home-widget-editor__row.is-flash { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #0e6b5c) 35%, transparent); }
.home-widget-editor__grip { display: grid; width: 32px; height: 44px; padding: 0; place-items: center; color: var(--muted); background: transparent; border: 0; border-radius: 10px; cursor: grab; touch-action: none; }
.home-widget-editor__grip svg { width: 16px; height: 16px; fill: currentColor; }
.home-widget-editor__grip.is-placeholder { cursor: default; }
.home-widget-editor__row.is-dragging .home-widget-editor__grip { cursor: grabbing; }
.home-widget-editor__icon { display: grid; width: 34px; height: 34px; place-items: center; color: var(--accent-strong, #0a5147); background: color-mix(in srgb, var(--accent, #0e6b5c) 9%, transparent); border-radius: 10px; }
.home-widget-editor__icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.home-widget-editor__text { display: grid; gap: 2px; min-width: 0; }
.home-widget-editor__text b { font-size: .95rem; font-weight: 700; }
.home-widget-editor__text small { overflow: hidden; color: var(--muted); font-size: .76rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.home-widget-editor__switch { position: relative; width: 46px; height: 28px; padding: 0; background: var(--accent, #0e6b5c); border: 0; border-radius: 999px; cursor: pointer; }
.home-widget-editor__switch span { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgb(0 0 0 / 25%); }
.home-widget-editor__add { display: grid; width: 34px; height: 34px; padding: 0; place-items: center; color: #fff; font-size: 1.2rem; line-height: 1; background: var(--accent, #0e6b5c); border: 0; border-radius: 50%; cursor: pointer; }
.home-widget-editor__lock { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: .76rem; font-weight: 700; }
.home-widget-editor__lock svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.home-widget-editor__hint { margin: 12px 4px 0; color: var(--muted); font-size: .76rem; text-align: center; }
.home-widget-editor__switch:focus-visible, .home-widget-editor__add:focus-visible, .home-widget-editor__grip:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent, #0e6b5c) 40%, transparent); outline-offset: 2px; }

/* ===== v5.190（Lucas）：轉鈕名稱改回橫式（在滾筒旁邊、對齊滾筒中間），白色漸層跟著延伸到名稱後面，
   名稱浮在白底上、不會跟底下的內容混在一起。直式（v5.176）的寫法被這段蓋過。 ===== */
.home-dial__label,
.home-dial[data-side="right"] .home-dial__label,
.home-dial[data-side="left"] .home-dial__label {
  bottom: 50%;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  width: auto;
  padding: 7px 14px;
  font-size: .86rem;
  line-height: 1.2;
  border-radius: 999px;
  transform: translateY(50%) scale(.96);
}
.home-dial[data-side="right"] .home-dial__label { right: 54px; left: auto; transform-origin: right center; }
.home-dial[data-side="left"] .home-dial__label { left: 54px; right: auto; transform-origin: left center; }
.home-dial.is-labeled .home-dial__label { transform: translateY(50%) scale(1); }
.home-dial__label b { display: inline; font-size: .86rem; }
.home-dial__label span { writing-mode: horizontal-tb; letter-spacing: 0; }
/* 白色漸層：平常 104px，顯示名稱時往內延伸到名稱後面 */
.home-dial::before { transition: width 220ms ease; }
.home-dial.is-labeled::before { width: 250px; }
.home-dial[data-side="left"].is-labeled::before { background: linear-gradient(90deg, rgb(250 248 242 / 96%) 0%, rgb(250 248 242 / 88%) 55%, rgb(250 248 242 / 0%) 100%); }
.home-dial[data-side="right"].is-labeled::before { background: linear-gradient(270deg, rgb(250 248 242 / 96%) 0%, rgb(250 248 242 / 88%) 55%, rgb(250 248 242 / 0%) 100%); }

/* ===== v5.191（Lucas）：記帳表單「分帳／固定收支／分期付款」平常只顯示圓形 icon，第一次點展開名稱、再點才開啟；
   已開啟的那顆一直顯示名稱＋勾勾。app.js collapseEntryFeatureTiles ===== */
#entry-form .entry-feature-tiles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#entry-form .entry-feature-tiles[hidden],
#entry-form .entry-feature-tiles .entry-feature-tile[hidden] { display: none; }
#entry-form .entry-feature-tiles .entry-feature-tile { flex: none; gap: 0; column-gap: 0; padding: 4px; border-radius: 999px; transition: padding 220ms ease, border-color 160ms ease, background 160ms ease; }
#entry-form .entry-feature-tiles .entry-feature-tile__chip { width: 38px; height: 38px; border-radius: 50%; }
#entry-form .entry-feature-tiles .entry-feature-tile__chip .jk-icon,
#entry-form .entry-feature-tiles .entry-feature-tile__chip > svg { width: 24px; height: 24px; }
#entry-form .entry-feature-tiles .entry-feature-tile__chip > svg { fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#entry-form .entry-feature-tiles .entry-feature-tile__text { max-width: 0; margin-left: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width 260ms ease, margin 220ms ease, opacity 180ms ease; }
#entry-form .entry-feature-tiles .entry-feature-tile__text small { display: block; overflow: hidden; font-size: 0.66rem; text-overflow: ellipsis; }
#entry-form .entry-feature-tiles .entry-feature-tile.is-revealed,
#entry-form .entry-feature-tiles .entry-feature-tile.is-on { padding-right: 14px; }
#entry-form .entry-feature-tiles .entry-feature-tile.is-revealed .entry-feature-tile__text,
#entry-form .entry-feature-tiles .entry-feature-tile.is-on .entry-feature-tile__text { max-width: 200px; margin-left: 8px; opacity: 1; }
#entry-form .entry-feature-tiles .entry-feature-tile.is-revealed { border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  #entry-form .entry-feature-tiles .entry-feature-tile,
  #entry-form .entry-feature-tiles .entry-feature-tile__text { transition: none; }
}
/* 分期表單：從支出表單進來時的提醒 */
#installment-dialog .installment-form__from-entry { margin: 0 0 8px; padding: 8px 12px; color: var(--accent); font-size: 0.8rem; line-height: 1.45; background: #eaf4f0; border-radius: 12px; }
#installment-dialog .installment-form__from-entry[hidden] { display: none; }
#installment-dialog #installment-purchase-date { min-height: 32px; padding: 0; font: inherit; color: var(--ink); background: transparent; border: 0; }
/* v5.191：手機窄寬「新增分期」標題不要斷成兩行（右邊有照片／備註／關閉三顆鈕） */
#installment-dialog .installment-form__title h2 { white-space: nowrap; font-size: clamp(1.2rem, 5.6vw, 1.6rem); }
#installment-dialog .installment-form__header { gap: 8px; }
/* v5.191：手機窄寬、金額比較長時「已收到」會壓到名字——改成放到金額下一行、靠右 */
@media (max-width: 480px) {
  .split-detail__person.has-receive { flex-wrap: wrap; row-gap: 6px; }
  .split-detail__person.has-receive > strong { margin-left: auto; }
  .split-detail__person.has-receive .split-detail__receive { order: 3; margin: 0 0 0 auto; }
}

/* ===== v5.192（Lucas）：語音記帳的「扣款來源」（電子支付扣儲值金／扣綁定帳戶），跟簽帳列同一種列 ===== */
#voice-quick-dialog .voice-quick__funding { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); align-items: center; min-height: 54px; padding: 6px 2px; border-bottom: 1px solid rgb(31 36 33 / 8%); }
#voice-quick-dialog .voice-quick__funding[hidden] { display: none; }
#voice-quick-dialog .voice-quick__funding small { color: var(--muted); font-size: .8rem; font-weight: 500; }
#voice-quick-dialog .voice-quick__funding-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
#voice-quick-dialog .voice-quick__funding-chips button { min-height: 34px; padding: 0 12px; color: var(--ink); font: inherit; font-size: .86rem; font-weight: 600; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
#voice-quick-dialog .voice-quick__funding-chips button.is-on { color: #fff; background: var(--accent); border-color: var(--accent); }
#voice-quick-dialog .voice-quick__funding-hint { display: block; margin: 4px 2px 0; color: var(--danger, #b4483a); font-size: .78rem; line-height: 1.45; }
#voice-quick-dialog .voice-quick__funding-hint[hidden] { display: none; }

/* ===== v5.193（Lucas）：盯盤模式（庫存分析／股票追蹤放大成全螢幕、螢幕常亮、盤中 5 秒更新） ===== */
.home-stocks__focus { display: grid; width: 30px; height: 30px; padding: 0; place-items: center; color: var(--accent-strong, var(--accent)); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 10px; cursor: pointer; }
.home-stocks__focus svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.home-stocks__focus:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stock-focus__body .home-stocks__focus { display: none; }

#stock-focus-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; background: var(--bg, #f4f1e8); border: 0; border-radius: 0; }
#stock-focus-dialog::backdrop { background: var(--bg, #f4f1e8); }
#stock-focus-dialog .stock-focus__card { display: flex; flex-direction: column; height: 100%; max-width: 760px; margin: 0 auto; padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px calc(env(safe-area-inset-bottom, 0px) + 16px); }
#stock-focus-dialog .stock-focus__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 10px; }
#stock-focus-dialog .stock-focus__head h2 { margin: 2px 0 4px; font-size: 1.5rem; }
#stock-focus-dialog .stock-focus__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
#stock-focus-dialog .stock-focus__meta span:empty { display: none; }
#stock-focus-dialog .stock-focus__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#stock-focus-dialog .stock-focus__body > .panel { margin: 0; }
#stock-focus-dialog .stock-focus__body > .panel > .section-heading h2 { display: none; }

/* 價格變動閃一下：跟小工具的漲跌顏色同一組變數（--stock-up／--stock-down） */
@keyframes stock-tick-up { from { background-color: color-mix(in srgb, var(--stock-up, #c0392b) 24%, transparent); } to { background-color: transparent; } }
@keyframes stock-tick-down { from { background-color: color-mix(in srgb, var(--stock-down, #1f8a5b) 24%, transparent); } to { background-color: transparent; } }
.home-stock.is-tick-up { animation: stock-tick-up 1.2s ease-out; }
.home-stock.is-tick-down { animation: stock-tick-down 1.2s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .home-stock.is-tick-up, .home-stock.is-tick-down { animation: none; }
}

/* ===== v5.194（Lucas 選 A）：首頁目錄——取代轉鈕的圓鈕（浮出／收起沿用轉鈕 .is-awake）＋底部目錄 ===== */
.home-dial.home-jump-fab { gap: 0; }
.home-dial.home-jump-fab::before { display: none; }
.home-jump-fab__button { display: grid; width: 52px; height: 52px; padding: 0; place-items: center; color: #fff; background: var(--accent, #0e6b5c); border: 0; border-radius: 50%; box-shadow: 0 10px 22px -8px rgb(14 107 92 / 55%), 0 2px 6px rgb(31 36 33 / 18%); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.home-jump-fab__button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.home-jump-fab__button:active { transform: scale(.94); }
.home-jump-fab__button:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: 3px; }

#home-jump .home-jump { display: flex; flex-direction: column; gap: 12px; max-height: min(82dvh, 680px); overflow: hidden; }
#home-jump .dialog-header { flex: none; align-items: flex-start; }
#home-jump .dialog-header h2 { margin: 0; font-size: 1.25rem; }
#home-jump .home-jump__hint { margin: 4px 0 0; color: var(--muted); font-size: .82rem; }
#home-jump .home-jump__cats { display: grid; flex: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
#home-jump .home-jump__cat { justify-content: center; gap: 4px; padding: 0 4px; font-size: .86rem; white-space: nowrap; }
#home-jump .home-jump__cat svg { width: 16px; height: 16px; flex: none; }
#home-jump .home-jump__cat em { min-width: 16px; padding: 0 4px; }
#home-jump .home-jump__cat { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px 0 10px; color: var(--ink); font: inherit; font-size: .9rem; font-weight: 600; background: var(--surface, #fffdf8); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
#home-jump .home-jump__cat svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#home-jump .home-jump__cat em { min-width: 18px; padding: 0 5px; color: var(--muted); font-size: .72rem; font-style: normal; text-align: center; background: color-mix(in srgb, var(--ink) 7%, transparent); border-radius: 999px; }
#home-jump .home-jump__cat[aria-selected="true"] { color: #fff; background: var(--accent); border-color: var(--accent); }
#home-jump .home-jump__cat[aria-selected="true"] em { color: var(--accent); background: #fff; }
#home-jump .home-jump__list { flex: 1; min-height: 0; margin: 0; padding: 4px; overflow-y: auto; overscroll-behavior: contain; list-style: none; background: color-mix(in srgb, var(--ink) 4%, transparent); border-radius: 16px; }
#home-jump .home-jump__item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 8px 10px; color: var(--ink); font: inherit; text-align: left; background: transparent; border: 0; border-radius: 12px; cursor: pointer; }
#home-jump .home-jump__item:hover, #home-jump .home-jump__item:focus-visible { background: color-mix(in srgb, var(--accent) 8%, transparent); }
#home-jump .home-jump__icon { display: grid; flex: none; width: 38px; height: 38px; place-items: center; color: var(--accent); background: #eaf4f0; border-radius: 11px; }
#home-jump .home-jump__icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#home-jump .home-jump__text { display: grid; flex: 1; min-width: 0; line-height: 1.35; }
#home-jump .home-jump__text b { font-size: .95rem; }
#home-jump .home-jump__text small { overflow: hidden; color: var(--muted); font-size: .76rem; white-space: nowrap; text-overflow: ellipsis; }
#home-jump .home-jump__go { flex: none; color: var(--muted); font-size: 1.3rem; }
#home-jump .home-jump__add { flex: none; color: var(--accent); font-size: .8rem; font-weight: 700; white-space: nowrap; }
#home-jump .home-jump__item.is-off { color: var(--muted); }
#home-jump .home-jump__item.is-off .home-jump__icon { color: var(--muted); background: color-mix(in srgb, var(--ink) 7%, transparent); }

/* 跳到之後那一塊亮一下 */
@keyframes home-jump-flash { 0%, 35% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent); } 100% { box-shadow: 0 0 0 3px transparent; } }
.home-widget.is-jump-flash { border-radius: 22px; animation: home-jump-flash 1.5s ease-out; }
@media (prefers-reduced-motion: reduce) { .home-widget.is-jump-flash { animation: none; outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); } }
/* v5.194（Lucas 選「轉鈕＋目錄小鈕」）：轉鈕 ↓ 下面的小目錄鈕；目錄精簡成 5 個分類一排、小工具只寫名稱 */
.home-dial__jump { display: grid; width: 32px; height: 32px; margin-top: 4px; padding: 0; place-items: center; color: #fff; background: var(--accent, #0e6b5c); border: 0; border-radius: 50%; box-shadow: 0 6px 14px -6px rgb(14 107 92 / 60%); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.home-dial__jump svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
.home-dial__jump:active { transform: scale(.92); }
#home-jump .home-jump__cats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
#home-jump .home-jump__item { min-height: 50px; padding: 8px 14px; }
/* v5.194（Lucas：點開後再簡化，分類只要 icon）：分類改成圓形 icon，只有選中的那顆展開名稱 */
#home-jump .home-jump__cats { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 8px; }
#home-jump .home-jump__cat { flex: none; justify-content: center; gap: 0; width: 48px; min-height: 48px; padding: 0; border-radius: 999px; transition: width 220ms ease, padding 220ms ease; }
#home-jump .home-jump__cat svg { width: 22px; height: 22px; }
#home-jump .home-jump__cat span { max-width: 0; overflow: hidden; opacity: 0; transition: max-width 220ms ease, opacity 160ms ease, margin 220ms ease; }
#home-jump .home-jump__cat[aria-selected="true"] { width: auto; padding: 0 16px 0 13px; }
#home-jump .home-jump__cat[aria-selected="true"] span { max-width: 4em; margin-left: 6px; opacity: 1; }
@media (prefers-reduced-motion: reduce) { #home-jump .home-jump__cat, #home-jump .home-jump__cat span { transition: none; } }

/* ===== v5.196（Lucas：轉鈕底下的白色漸層原本是矩形＋上下淡出，改成貼著螢幕邊緣的半圓形，比較自然） =====
   橢圓中心在螢幕邊緣、轉鈕中間的高度，往內往上下一起淡出；拿掉原本的上下遮罩。顯示名稱時半圓往內撐大。 */
.home-dial::before {
  top: -150px;
  bottom: -90px;
  width: 136px;
  -webkit-mask-image: none;
  mask-image: none;
  transition: width 240ms ease, opacity 240ms ease;
}
.home-dial[data-side="right"]::before,
.home-dial[data-side="right"].is-labeled::before {
  background: radial-gradient(farthest-side at 100% 54%, rgb(250 248 242 / 96%) 0%, rgb(250 248 242 / 90%) 30%, rgb(250 248 242 / 66%) 55%, rgb(250 248 242 / 30%) 78%, rgb(250 248 242 / 0%) 100%);
}
.home-dial[data-side="left"]::before,
.home-dial[data-side="left"].is-labeled::before {
  background: radial-gradient(farthest-side at 0% 54%, rgb(250 248 242 / 96%) 0%, rgb(250 248 242 / 90%) 30%, rgb(250 248 242 / 66%) 55%, rgb(250 248 242 / 30%) 78%, rgb(250 248 242 / 0%) 100%);
}
.home-dial.is-labeled::before { width: 280px; }


/* ===== v5.197（Lucas）：主選單固定一組（不再左右滑、拿掉小圓點）；明細、收支兩格長按自訂 ===== */
.mobile-nav.is-fixed-nav .mobile-nav__viewport { overflow: hidden; scroll-snap-type: none; }
.mobile-nav.is-fixed-nav .mobile-nav__page:not(:first-child) { display: none; }
.mobile-nav.is-fixed-nav .mobile-nav__pager { display: none; }
.mobile-nav [data-nav-slot] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.mobile-nav__slot-icon { position: relative; display: inline-flex; }
.mobile-nav__slot-icon .recurring-due-badge { position: absolute; top: -6px; right: -10px; }
#mobile-nav-slot-dialog .mobile-nav-slot { display: flex; flex-direction: column; gap: 12px; max-height: min(80dvh, 640px); overflow: hidden; }
#mobile-nav-slot-dialog .dialog-header h2 { margin: 0; font-size: 1.2rem; }
#mobile-nav-slot-dialog .mobile-nav-slot__hint { margin: 4px 0 0; color: var(--muted); font-size: .82rem; }
#mobile-nav-slot-dialog .mobile-nav-slot__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; overflow-y: auto; }
#mobile-nav-slot-dialog .mobile-nav-slot__option { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 76px; padding: 10px 4px; color: var(--ink); font: inherit; font-size: .78rem; font-weight: 600; line-height: 1.25; text-align: center; background: var(--surface, #fffdf8); border: 1px solid var(--line); border-radius: 14px; cursor: pointer; }
#mobile-nav-slot-dialog .mobile-nav-slot__option svg { width: 24px; height: 24px; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#mobile-nav-slot-dialog .mobile-nav-slot__option.is-current { color: #fff; background: var(--accent); border-color: var(--accent); }
#mobile-nav-slot-dialog .mobile-nav-slot__option.is-current svg { stroke: #fff; }
#mobile-nav-slot-dialog .mobile-nav-slot__option:disabled { color: var(--muted); opacity: .55; cursor: default; }
#mobile-nav-slot-dialog .mobile-nav-slot__option small { font-size: .66rem; font-weight: 500; }
#mobile-nav-slot-dialog .mobile-nav-slot__reset { align-self: center; }
/* v5.197（Lucas）：拿掉圓點後主選單不要貼底——下方留跟左右一樣的 14px；iPhone 有底部橫條時至少讓出橫條的高度 */
@media (max-width: 959px) {
  .mobile-nav.is-fixed-nav { bottom: max(14px, env(safe-area-inset-bottom, 0px)); }
}


/* ===== v5.199（Lucas）：停在庫存總覽／股票追蹤 5 秒，問要不要轉成盯盤模式（浮在主選單上方） ===== */
.stock-focus-ask { position: fixed; left: 14px; right: 14px; bottom: calc(max(14px, env(safe-area-inset-bottom, 0px)) + 82px); z-index: 40; display: flex; align-items: center; gap: 10px; max-width: 520px; margin: 0 auto; padding: 10px 10px 10px 12px; color: var(--ink); background: rgb(255 253 248 / 97%); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 18px; box-shadow: 0 16px 34px -14px rgb(31 36 33 / 38%); opacity: 0; transform: translateY(12px); transition: opacity 220ms ease, transform 220ms ease; }
.stock-focus-ask[hidden] { display: none; }
.stock-focus-ask.is-shown { opacity: 1; transform: none; }
.stock-focus-ask__icon { display: grid; flex: none; width: 38px; height: 38px; place-items: center; color: var(--accent); background: #eaf4f0; border-radius: 12px; }
.stock-focus-ask__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.stock-focus-ask p { display: grid; flex: 1; min-width: 0; margin: 0; line-height: 1.3; }
.stock-focus-ask p b { font-size: .88rem; }
.stock-focus-ask p small { overflow: hidden; color: var(--muted); font-size: .72rem; white-space: nowrap; text-overflow: ellipsis; }
.stock-focus-ask p b { white-space: nowrap; }
.stock-focus-ask button { flex: none; min-height: 36px; padding: 0 12px; font: inherit; font-size: .84rem; font-weight: 700; border-radius: 999px; cursor: pointer; }
.stock-focus-ask__no { color: var(--muted); background: transparent; border: 0; }
.stock-focus-ask__yes { color: #fff; background: var(--accent); border: 0; }
@media (min-width: 960px) { .stock-focus-ask { bottom: 24px; } }
@media (prefers-reduced-motion: reduce) { .stock-focus-ask { transition: none; } }


/* ===== v5.200（Lucas）：詢問卡加「自動」；盯盤視窗顯示「自動盯盤已開啟・關閉自動」 ===== */
.stock-focus-ask { gap: 8px; }
.stock-focus-ask button { padding: 0 10px; }
.stock-focus-ask__auto { color: var(--accent); background: transparent; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent) !important; }
#stock-focus-dialog .stock-focus__auto { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; color: var(--accent); font-size: .78rem; font-weight: 600; }
#stock-focus-dialog .stock-focus__auto[hidden] { display: none; }
#stock-focus-dialog .stock-focus__auto .text-button { padding: 0; font-size: .78rem; }


/* ===== v5.203（Lucas）：收入「列入預算」開關（跟簽帳列同一種列） ===== */
#entry-budget-field { display: grid; grid-template-columns: auto 1fr; align-items: center; row-gap: 6px; padding: 14px 2px 12px; }
#entry-budget-field[hidden] { display: none; }
#entry-budget-field > span:first-child { color: var(--muted); font-size: .86rem; }
#entry-budget-field .entry-hold-switch { justify-self: end; }
#entry-budget-field .field-help { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.6; }
#entry-budget-field .field-help .text-button { display: inline; min-height: 0; height: auto; margin: -10px 0; padding: 10px 2px 10px 6px; color: var(--accent); font-size: .76rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
#entry-form #entry-budget-field { order: 99; }


/* ===== v5.205（Lucas）：語音收入「來源」直接在格子裡輸入；「列入預算」開關 ===== */
#voice-quick-dialog .voice-quick__source { cursor: text; }
#voice-quick-dialog .voice-quick__source[hidden] { display: none; }
#voice-quick-dialog .voice-quick__source input { grid-column: 2 / 4; min-width: 0; width: 100%; padding: 4px 0; color: var(--ink); font: inherit; font-size: 1rem; font-weight: 600; text-align: right; background: transparent; border: 0; border-bottom: 1px dashed color-mix(in srgb, var(--ink) 22%, transparent); border-radius: 0; outline: none; }
#voice-quick-dialog .voice-quick__source input:focus { border-bottom-color: var(--accent); }
#voice-quick-dialog .voice-quick__source input::placeholder { color: var(--muted); font-weight: 500; }
#voice-quick-dialog .voice-quick__source i { grid-column: 4; margin-left: 8px; }
#voice-quick-dialog .voice-quick__source::after { content: none; }
#voice-quick-dialog .voice-quick__budget[hidden] { display: none; }