/* 阿橘+1 LIFF — 錢包／點餐紀錄／儀表板／錢包管理 共用樣式（09A-P5）
 * 全部走 design-tokens.css；必讀文字 ≥14px、輸入 16px、可點 ≥44px、主要控制 48px、
 * safe-area、:focus-visible、prefers-reduced-motion。金額正負用符號＋文字，不只靠顏色。 */

:root { --fin-nav-h: calc(var(--tap-min) + var(--space-2) * 2 + 1px); }   /* 頁首實高：44 + 8×2 + 1px 邊線 = 61px */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans TC", sans-serif;
  background: var(--color-bg-page); color: var(--color-text-body);
  font-size: var(--font-size-body); line-height: var(--line-height-body); overflow-x: hidden;
}
#app { max-width: 480px; margin: 0 auto; padding: 0 var(--space-3) calc(var(--space-6) + var(--safe-bottom)); }
[hidden] { display: none !important; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.fin-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── 頁首（sticky，吃上方安全區）── */
.fin-nav {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--space-2);
  margin: 0 calc(-1 * var(--space-3)); padding: calc(var(--space-2) + env(safe-area-inset-top, 0px)) var(--space-3) var(--space-2);
  background: var(--color-bg-card); border-bottom: 1px solid var(--color-border);
  box-shadow: inset 0 3px 0 var(--color-primary);
}
.fin-nav-back {
  min-width: var(--tap-min); min-height: var(--tap-min); padding: 0 var(--space-2);
  background: none; border: 0; border-radius: var(--radius-sm); color: var(--color-action-text);
  font-size: var(--font-size-body); font-weight: var(--font-weight-bold); cursor: pointer;
}
.fin-nav-title { flex: 1; min-width: 0; margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--color-text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-nav-link {
  display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 var(--space-3);
  border-radius: var(--radius-pill); border: 1px solid var(--color-border-strong); background: var(--color-bg-card);
  color: var(--color-action-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); text-decoration: none; white-space: nowrap;
}

/* ── 卡片／區塊 ── */
.fin-card { background: var(--color-bg-card); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--space-4); margin-top: var(--space-3); }
.fin-section-title { display: flex; align-items: baseline; gap: var(--space-2); margin: var(--space-5) 0 var(--space-2); font-size: var(--font-size-body); font-weight: var(--font-weight-bold); color: var(--color-text-strong); }
.fin-section-title .fin-count { font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); color: var(--color-text-soft); }
.fin-meta { font-size: var(--font-size-sm); color: var(--color-text-soft); }

/* ── 按鈕／輸入 ── */
.fin-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  min-height: var(--control-height); padding: 0 var(--space-5); border-radius: var(--radius-md);
  border: 1px solid transparent; background: var(--color-action); color: var(--color-text-inverse);
  font-size: var(--font-size-body); font-weight: var(--font-weight-bold); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.fin-btn:active { background: var(--color-action-hover); }
.fin-btn:disabled { opacity: .55; cursor: default; }
.fin-btn--secondary { background: var(--color-bg-card); color: var(--color-text-strong); border-color: var(--color-border-strong); }
.fin-btn--secondary:active { background: var(--color-bg-sunken); }
.fin-btn--ghost { min-height: var(--tap-min); padding: 0 var(--space-3); background: none; color: var(--color-action-text); border-color: transparent; }
.fin-btn--danger { background: var(--color-error-fg); }
.fin-btn--block { width: 100%; }
.fin-input, .fin-select {
  width: 100%; min-height: var(--control-height); padding: 0 var(--space-3); border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong); background: var(--color-bg-sunken); color: var(--color-text-strong);
  font-size: var(--font-size-body); font-family: inherit; -webkit-appearance: none; appearance: none;
}
.fin-select { padding-right: var(--space-8); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'><path d='M2 2l6 6 6-6' fill='none' stroke='%236B5842' stroke-width='2' stroke-linecap='round'/></svg>"); background-repeat: no-repeat; background-position: right var(--space-3) center; }
.fin-input::placeholder { color: var(--color-text-muted); }

/* chips / 分段控制（≥44px） */
.fin-seg { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.fin-seg-btn {
  flex: 1; min-height: var(--tap-min); padding: 0 var(--space-2); border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong); background: var(--color-bg-card); color: var(--color-text-body);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer;
}
.fin-seg-btn[aria-pressed="true"] { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-action-text); font-weight: var(--font-weight-bold); }
.fin-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-pill); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); line-height: 1; white-space: nowrap; }
.fin-chip--in { background: var(--color-success-surface); color: var(--color-success-fg); }
.fin-chip--out { background: var(--color-bg-sunken); color: var(--color-text-soft); border: 1px solid var(--color-border); }
.fin-chip--neutral { background: var(--color-bg-sunken); color: var(--color-text-soft); }
.fin-chip--info { background: var(--color-info-surface); color: var(--color-info-fg); }
.fin-chip--warn { background: var(--color-warning-surface); color: var(--color-warning-fg); }
.fin-chip--error { background: var(--color-error-surface); color: var(--color-error-fg); }

/* ── 金額語意 ── */
.fin-amt { font-variant-numeric: tabular-nums; font-weight: var(--font-weight-bold); white-space: nowrap; }
.fin-amt--in { color: var(--color-success-fg); }
.fin-amt--out { color: var(--color-text-strong); }
.fin-amt--zero, .fin-amt--none { color: var(--color-text-soft); }

/* ── 餘額主卡 ── */
.fin-balance {
  position: relative; background: var(--color-bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: var(--space-5) var(--space-4); margin-top: var(--space-3);
}
.fin-balance::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--color-primary); }
.fin-balance-label { font-size: var(--font-size-sm); color: var(--color-text-soft); font-weight: var(--font-weight-medium); }
.fin-balance-amount { margin-top: var(--space-1); font-size: 34px; line-height: 1.15; font-weight: var(--font-weight-bold); color: var(--color-text-strong); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; word-break: break-all; }
.fin-balance.is-negative .fin-balance-amount { color: var(--color-error-fg); }
.fin-balance.is-unavailable .fin-balance-amount { color: var(--color-text-soft); font-size: var(--font-size-title); }
.fin-balance-note { margin-top: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-soft); }
.fin-balance-note.is-negative { color: var(--color-error-fg); font-weight: var(--font-weight-bold); }

/* 各群組餘額列 */
.fin-ledger-list { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.fin-ledger-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: var(--tap-min); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  background: var(--color-bg-sunken); border: 1px solid var(--color-border);
}
.fin-ledger-name { flex: 1; min-width: 0; font-size: var(--font-size-sm); color: var(--color-text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-ledger-bal { font-size: var(--font-size-body); font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; color: var(--color-text-strong); }
.fin-ledger-bal.is-negative { color: var(--color-error-fg); }

/* 摘要格 */
.fin-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.fin-summary-cell { padding: var(--space-3); border-radius: var(--radius-sm); background: var(--color-bg-sunken); min-width: 0; }
.fin-summary-label { font-size: var(--font-size-sm); color: var(--color-text-soft); }
.fin-summary-value { margin-top: 2px; font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--color-text-strong); font-variant-numeric: tabular-nums; word-break: break-all; }
@media (min-width: 400px) { .fin-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); } .fin-summary-value { font-size: var(--font-size-body); } }

/* ── 交易卡 ── */
.fin-date-head { position: sticky; top: calc(var(--fin-nav-h) + env(safe-area-inset-top, 0px)); z-index: 5; margin: var(--space-4) 0 var(--space-2); padding: var(--space-1) 0; background: var(--color-bg-page); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-text-soft); }
.fin-tx-list { display: flex; flex-direction: column; gap: var(--space-2); }
.fin-tx { display: flex; gap: var(--space-3); padding: var(--space-3); background: var(--color-bg-card); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.fin-tx-icon { flex: 0 0 40px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-bg-sunken); font-size: 20px; }
.fin-tx--in .fin-tx-icon { background: var(--color-success-surface); }
.fin-tx-body { flex: 1; min-width: 0; }
.fin-tx-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.fin-tx-title { flex: 1; min-width: 0; font-size: var(--font-size-body); font-weight: var(--font-weight-bold); color: var(--color-text-strong); overflow-wrap: anywhere; }
.fin-tx-sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-1); font-size: var(--font-size-sm); color: var(--color-text-soft); }
.fin-tx-items { list-style: none; margin: var(--space-2) 0 0; padding: var(--space-2) 0 0; border-top: 1px dashed var(--color-border); font-size: var(--font-size-sm); color: var(--color-text-body); }
.fin-tx-items--unknown { color: var(--color-text-soft); font-style: normal; }
.fin-tx-item { display: flex; justify-content: space-between; gap: var(--space-2); padding: 2px 0; }
.fin-tx-item-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fin-tx-item-price { flex-shrink: 0; color: var(--color-text-soft); font-variant-numeric: tabular-nums; }
.fin-tx-balance { margin-top: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-soft); font-variant-numeric: tabular-nums; }
.fin-tx-balance.is-negative { color: var(--color-error-fg); font-weight: var(--font-weight-bold); }

/* ── 狀態區塊 ── */
.fin-state { padding: var(--space-8) var(--space-4); text-align: center; background: var(--color-bg-card); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); margin-top: var(--space-3); }
.fin-state-icon { font-size: 40px; line-height: 1; }
.fin-state-title { margin-top: var(--space-3); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--color-text-strong); }
.fin-state-body { margin-top: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-soft); line-height: var(--line-height-body); }
.fin-state-actions { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.fin-state--missing_group .fin-state-icon { font-size: 32px; }
.fin-empty { padding: var(--space-6) var(--space-4); text-align: center; color: var(--color-text-soft); font-size: var(--font-size-sm); background: var(--color-bg-card); border-radius: var(--radius-md); border: 1px dashed var(--color-border-strong); }
.fin-empty-title { font-size: var(--font-size-body); font-weight: var(--font-weight-bold); color: var(--color-text-strong); margin-bottom: var(--space-1); }
.fin-banner { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--font-size-sm); }
.fin-banner--warn { background: var(--color-warning-surface); color: var(--color-warning-fg); border: 1px solid var(--color-border-strong); }
.fin-banner-text { flex: 1; min-width: 0; }
.fin-inline-error { margin-top: var(--space-2); font-size: var(--font-size-sm); color: var(--color-error-fg); }

/* 群組選擇器 */
.fin-picker { background: var(--color-bg-card); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--space-4); margin-top: var(--space-3); }
.fin-picker-title { font-size: var(--font-size-body); font-weight: var(--font-weight-bold); color: var(--color-text-strong); margin-bottom: var(--space-2); }
.fin-picker-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%;
  min-height: var(--control-height); margin-top: var(--space-2); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-bg-card);
  font-size: var(--font-size-body); color: var(--color-text-strong); text-align: left; cursor: pointer;
}
.fin-picker-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* skeleton */
.fin-skeleton { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.fin-skel-row { display: flex; gap: var(--space-3); padding: var(--space-3); background: var(--color-bg-card); border-radius: var(--radius-md); }
.fin-skel { background: linear-gradient(90deg, var(--color-bg-sunken) 25%, var(--color-border-light) 50%, var(--color-bg-sunken) 75%); background-size: 200% 100%; border-radius: var(--radius-sm); animation: fin-shimmer 1.2s linear infinite; }
.fin-skel--icon { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 40px; }
.fin-skel-lines { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); }
.fin-skel--l1 { height: 16px; width: 60%; }
.fin-skel--l2 { height: 12px; width: 35%; }
@keyframes fin-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* toast（狀態訊息，不用來取代錯誤狀態） */
.fin-toast { position: fixed; left: 50%; bottom: calc(var(--space-6) + var(--safe-bottom)); transform: translateX(-50%); max-width: calc(100% - 32px); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-text-strong); color: var(--color-text-inverse); font-size: var(--font-size-sm); z-index: 999; }

/* 長條圖（文字數值永遠可讀，不只有長條） */
.fin-bars { display: flex; align-items: flex-end; gap: var(--space-2); height: 120px; padding-top: var(--space-2); }
.fin-bar-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: var(--space-1); }
.fin-bar-val { font-size: var(--font-size-xs); color: var(--color-text-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-bar-track { width: 100%; flex: 1; display: flex; align-items: flex-end; }
.fin-bar { width: 100%; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--color-primary); min-height: 2px; }
.fin-bar.is-zero { background: var(--color-border-strong); }
.fin-bar-label { font-size: var(--font-size-xs); color: var(--color-text-soft); }
.fin-bars-table { margin-top: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-soft); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .fin-skel { animation: none; }
}