/* ===================================================================
   styles.css — Diary mode design system
   ===================================================================
   โครงสร้าง:
   0. Font faces (self-hosted woff2 — ไม่พึ่ง Google Fonts CDN)
   1. Reset + base
   2. Design tokens (CSS variables)
   3. Typography
   4. App shell (layout, bottom nav, FAB)
   5. Common patterns (cards, dividers, badges)
   6. Dashboard
   7. Add modal + keypad
   8. List view
   9. Import view
   10. Settings view
   11. Toasts + utilities
   =================================================================== */


/* === 0. Font faces (self-hosted) ================================ */

/* Sarabun — Thai */
@font-face { font-family:'Sarabun'; font-weight:300; font-style:normal; font-display:swap;
  src:url('../fonts/sarabun-300-thai.woff2') format('woff2');
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family:'Sarabun'; font-weight:400; font-style:normal; font-display:swap;
  src:url('../fonts/sarabun-400-thai.woff2') format('woff2');
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family:'Sarabun'; font-weight:500; font-style:normal; font-display:swap;
  src:url('../fonts/sarabun-500-thai.woff2') format('woff2');
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family:'Sarabun'; font-weight:600; font-style:normal; font-display:swap;
  src:url('../fonts/sarabun-600-thai.woff2') format('woff2');
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family:'Sarabun'; font-weight:700; font-style:normal; font-display:swap;
  src:url('../fonts/sarabun-700-thai.woff2') format('woff2');
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }

/* Sarabun — Latin */
@font-face { font-family:'Sarabun'; font-weight:300; font-style:normal; font-display:swap;
  src:url('../fonts/sarabun-300-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Sarabun'; font-weight:400; font-style:normal; font-display:swap;
  src:url('../fonts/sarabun-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Sarabun'; font-weight:500; font-style:normal; font-display:swap;
  src:url('../fonts/sarabun-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Sarabun'; font-weight:600; font-style:normal; font-display:swap;
  src:url('../fonts/sarabun-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Sarabun'; font-weight:700; font-style:normal; font-display:swap;
  src:url('../fonts/sarabun-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* Mali — Thai */
@font-face { font-family:'Mali'; font-weight:400; font-style:normal; font-display:swap;
  src:url('../fonts/mali-400-thai.woff2') format('woff2');
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family:'Mali'; font-weight:500; font-style:normal; font-display:swap;
  src:url('../fonts/mali-500-thai.woff2') format('woff2');
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }

/* Mali — Latin */
@font-face { font-family:'Mali'; font-weight:400; font-style:normal; font-display:swap;
  src:url('../fonts/mali-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Mali'; font-weight:500; font-style:normal; font-display:swap;
  src:url('../fonts/mali-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* Noto Sans Thai — Thai */
@font-face { font-family:'Noto Sans Thai'; font-weight:100 900; font-style:normal; font-display:swap;
  src:url('../fonts/noto-sans-thai-thai.woff2') format('woff2');
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }

/* Noto Sans Thai — Latin Ext */
@font-face { font-family:'Noto Sans Thai'; font-weight:100 900; font-style:normal; font-display:swap;
  src:url('../fonts/noto-sans-thai-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* Noto Sans Thai — Latin */
@font-face { font-family:'Noto Sans Thai'; font-weight:100 900; font-style:normal; font-display:swap;
  src:url('../fonts/noto-sans-thai-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }


/* === 1. Reset + base ============================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

input, textarea {
  font: inherit;
  color: inherit;
}


/* === 2. Design tokens ============================================
   Diary mode = warm cream paper + earthy-but-fresh accent colors.
   ตัวเลขใช้ ink เข้มเพื่อ legibility, accent ใช้กับ semantic เท่านั้น
================================================================ */

/* Base font size */
html { font-size: 16px; }

/* Text-size scale — คุมด้วย CSS variables, override per [data-text-size] */
:root {
  --ts-xs:   11px;   /* metadata, sub-labels, badges */
  --ts-sm:   13px;   /* secondary text */
  --ts-base: 14px;   /* body text: entry names, setting labels */
  --ts-md:   15px;   /* account balance */
  --ts-lg:   16px;   /* mini-stat values */
  --ts-xl:   18px;   /* hero unit */
  --ts-2xl:  24px;   /* hero sign */
  --ts-hero: 38px;   /* hero main number */
}
html[data-text-size="large"] {
  --ts-xs:   12px;
  --ts-sm:   14px;
  --ts-base: 16px;
  --ts-md:   17px;
  --ts-lg:   18px;
  --ts-xl:   20px;
  --ts-2xl:  26px;
  --ts-hero: 44px;
}
html[data-text-size="xlarge"] {
  --ts-xs:   13px;
  --ts-sm:   16px;
  --ts-base: 18px;
  --ts-md:   19px;
  --ts-lg:   20px;
  --ts-xl:   22px;
  --ts-2xl:  28px;
  --ts-hero: 50px;
}

:root {
  /* Font accent — สำหรับ heading/date ที่ใช้ Mali; override ใน theme เพื่อเปลี่ยนฟอนท์ได้ */
  --font-accent:  'Mali', cursive;

  /* Paper & ink (เน้น cream ไม่ใช่ขาวบริสุทธิ์) */
  --paper:        #fdf9f0;
  --paper-deep:   #f5ecd9;
  --card:         #ffffff;
  --ink:          #3d342c;
  --ink-soft:     #7a6a5c;
  --ink-faint:    #b3a596;
  --rule:         #ebe1cd;
  --rule-soft:    #f3ead8;

  /* Semantic palette — บอก meaning ไม่ใช่ decoration */
  --terracotta:    #e88563;  /* primary action */
  --terracotta-soft:#fbe2d4;
  --sage:          #6fb267;  /* income, success */
  --sage-soft:     #d8ecd5;
  --clay:          #ed7d5e;  /* expense */
  --clay-soft:     #fbe0d6;
  --mocha:         #c89368;  /* neutral accent */
  --dust-blue:     #5fa3d1;  /* transfer, scan/camera */
  --dust-blue-soft:#d4e8f4;
  --plum:          #b378c0;  /* shopping, decorative */
  --honey:         #e8b649;  /* utility, warning-soft */

  /* Primary alias — resolves to current theme's --terracotta automatically */
  --primary:       var(--terracotta);

  /* Sizing */
  --r-card:   16px;
  --r-pill:   999px;

  /* Layout */
  --nav-height: 88px;       /* bottom nav height */
  --safe-bottom: max(env(safe-area-inset-bottom), 0px);
}


/* === 3. Typography ============================================== */
html, body {
  font-family: 'Sarabun', sans-serif;
  color: var(--ink);
  background: var(--paper);
  /* texture เบาๆ ให้รู้สึกเป็นกระดาษ ไม่หนักเกิน */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0.3  0 0 0 0 0.25  0 0 0 0 0.18  0 0 0 0.04 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  min-height: 100vh;
  overflow-x: hidden;
}

/* Number readability — ใช้ tabular เสมอเพื่อให้เลขเรียงตรง */
.num,
.amt,
[data-num] {
  font-variant-numeric: tabular-nums;
}

/* Handwritten heading — สำหรับ accent เท่านั้น (date, section title) */
.handwriting {
  font-family: var(--font-accent);
  font-weight: 400;
  letter-spacing: -0.5px;
}

/* Italic serif — สำหรับ caption, meta, footer */
.italic-serif {
  font-family: 'Noto Sans Thai', sans-serif;
}


/* === 4. App shell =============================================== */
#app {
  min-height: 100vh;
  padding-bottom: calc(var(--nav-height) + var(--safe-bottom));
}

#view {
  max-width: 480px;       /* mobile-first; เปิดบน desktop ก็ดูได้ */
  margin: 0 auto;
  padding: 0 20px 24px;
}

/* Bottom nav — fixed ด้านล่าง */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--nav-height) + var(--safe-bottom));
  padding-bottom: calc(18px + var(--safe-bottom));
  background: var(--paper);
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr 1fr 80px 1fr 1fr;
  align-items: center;
  z-index: 50;
  max-width: 480px;
  margin: 0 auto;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--ink-faint);
  padding: 6px;
  transition: color 0.2s;
}
.nav-item.active { color: var(--terracotta); }
.nav-item svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.6;
}
.nav-item span {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* FAB — ลอยขึ้นเหนือ nav */
.fab-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  transform: translateY(-22px);
}
.fab {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--terracotta) 0%, #d06b48 100%);
  box-shadow:
    0 6px 18px -4px rgba(232, 133, 99, 0.55),
    0 2px 4px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  border: 4px solid var(--paper);
  transition: transform 0.15s ease;
}
@media (prefers-reduced-motion: no-preference) {
  button:active, .fab:active {
    transform: scale(0.97);
    transition: transform 0.1s;
  }
}
.fab svg {
  width: 24px;
  height: 24px;
  stroke-width: 2;
}


/* === 5. Common patterns ========================================= */

/* Page header (date as diary "page opening") */
.page-header {
  padding: 18px 4px 14px;
}
.page-meta {
  font-family: 'Noto Sans Thai', sans-serif;
  font-size: 13px;
  color: var(--ink-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.page-date {
  font-family: var(--font-accent);
  font-size: 32px;
  line-height: 1.15;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.5px;
}
.page-date .accent { color: var(--terracotta); }
.page-sub {
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.1em;
}

/* Hand-drawn squiggle divider — SVG inline */
.squiggle {
  display: block;
  width: 100%;
  height: 12px;
  margin: 12px 0;
  color: var(--rule);
}

/* Section heading (handwritten + optional action link) */
.section { margin-top: 26px; }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 4px;
}
.section-title {
  font-family: var(--font-accent);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
}
.section-action {
  font-size: 12px;
  color: var(--mocha);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

/* Card — shared shape for grouped content */
.card {
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow:
    0 1px 0 rgba(80, 60, 30, 0.04),
    0 8px 24px -16px rgba(80, 60, 30, 0.15);
}


/* === 6. Dashboard =============================================== */

/* Hero balance card */
.hero {
  background: var(--card);
  border-radius: var(--r-card);
  padding: 22px 22px 20px;
  box-shadow:
    0 1px 0 rgba(80, 60, 30, 0.04),
    0 8px 24px -12px rgba(80, 60, 30, 0.18);
  position: relative;
  overflow: hidden;
}
/* Decorative washi-tape ที่มุมบน */
.hero::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 24px;
  width: 56px;
  height: 16px;
  background: var(--mocha);
  opacity: 0.28;
  transform: rotate(-3deg);
}

.hero-label {
  font-family: var(--font-accent);
  font-size: 16px;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.hero-amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 4px 0 6px;
}
.hero-amount .num {
  font-size: var(--ts-hero);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -1.5px;
}
.hero-amount .unit {
  font-size: var(--ts-xl);
  color: var(--ink-soft);
}
.hero-amount .sign {
  font-size: var(--ts-2xl);
  font-weight: 500;
}
.hero-amount.positive .sign { color: var(--sage); }
.hero-amount.negative .sign { color: var(--clay); }
.hero-amount.positive .num  { color: var(--sage); }
.hero-amount.negative .num  { color: var(--clay); }
.hero-sub {
  font-size: 12px;
  color: var(--ink-faint);
  margin-top: 6px;
}
.hero-underline {
  width: 100%;
  height: 6px;
  color: var(--terracotta);
  opacity: 0.5;
}
.hero-trend {
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.hero-trend strong {
  color: var(--sage);
  font-weight: 600;
}

/* Mini stats row (income / expense) */
.mini-stats {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--rule);
  align-items: center;
}
.mini-stat .lbl {
  font-size: var(--ts-xs);
  color: var(--ink-faint);
  display: block;
  margin-bottom: 2px;
}
.mini-stat .val {
  font-size: var(--ts-lg);
  font-weight: 600;
  color: var(--ink);
}
.mini-stat .val.income { color: var(--sage); }
.mini-stat .val.expense { color: var(--clay); }
.mini-stat:last-child { text-align: right; }
.mini-divider { background: var(--rule); height: 24px; }


/* ================================================================
   Hero Card B+A — spending pace vs last month
================================================================ */
.hero-card {
  background: var(--card);
  border-radius: var(--r-card);
  padding: 18px 18px 14px;
  margin-bottom: 20px;
  box-shadow: 0 1px 0 rgba(80,60,30,.04), 0 8px 24px -12px rgba(80,60,30,.16);
}

/* 1. Main number */
.hero-card-main { margin-bottom: 10px; }
.hero-card-label {
  font-size: 12px;
  color: var(--ink-faint);
  margin-bottom: 2px;
}
.hero-card-amount {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.hero-card-unit { font-size: 20px; font-weight: 500; }

/* 2. Legend */
.hero-card-legend {
  display: flex;
  gap: 14px;
  margin-bottom: 6px;
}
.hero-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--ink-faint);
}
.hero-legend-line {
  display: inline-block;
  width: 16px;
  height: 2px;
  border-radius: 1px;
}
.hero-legend-line.curr { background: var(--terracotta); }
.hero-legend-line.prev {
  background: transparent;
  border-top: 2px dashed var(--ink-faint);
  height: 0;
}

/* 3. Area chart canvas wrapper */
.hero-chart-wrap {
  height: 72px;
  position: relative;
}

/* 4. Date labels */
.hero-date-labels {
  display: flex;
  justify-content: space-between;
  padding: 3px 0 10px;
}
.hero-date-labels span { font-size: 10px; color: var(--ink-faint); }

/* 5. Divider */
.hero-rule {
  height: .5px;
  background: var(--rule);
  margin: 0 0 12px;
}

/* 6. Pace bar */
.hero-pace { margin-bottom: 10px; }
.hero-pace-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  gap: 8px;
}
.hero-pace-spent { font-size: 13px; font-weight: 500; color: var(--ink); }
.hero-pace-target { font-size: 11px; color: var(--ink-faint); text-align: right; }

.pace-track {
  position: relative;
  height: 20px;
  background: var(--rule-soft);
  border-radius: 999px;
  overflow: visible;
  margin-bottom: 18px;
}
.pace-fill {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  background: var(--terracotta);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 6px;
  min-width: 20px;
  transition: width 0.5s ease;
}
.pace-pct {
  font-size: 11px;
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}
.pace-cursor {
  position: absolute;
  right: -3px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 28px;
  background: #fff;
  border: 2px solid var(--terracotta);
  border-radius: 3px;
}

/* เส้นแนวตั้งเดือนที่แล้ว */
.pace-prev-mark {
  position: absolute;
  top: -4px;
  transform: translateX(-50%);
  pointer-events: none;
}
.pace-prev-tick {
  width: 1.5px;
  height: 28px;
  background: var(--ink-faint);
  margin: 0 auto;
}
.pace-prev-label {
  display: block;
  font-size: 9px;
  color: var(--ink-faint);
  white-space: nowrap;
  text-align: center;
  margin-top: 3px;
  /* ไม่ต้อง translateX ซ้ำ — .pace-prev-mark จัดกึ่งกลางบนหมุดให้แล้ว
     (ของเดิมเลื่อนซ้ำ ฉลากจึงเยื้องซ้ายจนล้นออกนอกการ์ด) */
}

.pace-ends {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--ink-faint);
}

/* 7. Verdict */
.hero-verdict {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  margin-bottom: 12px;
  gap: 8px;
}
.verdict-good    { color: var(--sage); font-weight: 500; }
.verdict-warn    { color: #854F0B; font-weight: 500; }
.verdict-neutral { color: var(--ink-faint); }
.verdict-date    { color: var(--ink-faint); white-space: nowrap; }

/* 8. Breakdown */
.hero-breakdown {
  display: flex;
  border-top: .5px solid var(--rule);
  padding-top: 10px;
}
.breakdown-col { flex: 1; }
.breakdown-right {
  text-align: right;
  border-left: .5px solid var(--rule);
  padding-left: 10px;
}
.breakdown-lbl { font-size: 11px; color: var(--ink-faint); margin-bottom: 2px; }
.breakdown-val { font-size: 14px; font-weight: 600; color: var(--ink); }
.breakdown-sub { font-size: 10px; color: var(--ink-faint); margin-top: 1px; }


/* Account list */
.acct {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px dotted var(--rule);
}
.acct:last-child { border-bottom: none; }

.acct-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: white;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.acct-icon.ktb         { background: linear-gradient(135deg, #5fb0e0, #3787c5); }
.acct-icon.kbank       { background: linear-gradient(135deg, #6cc16c, #45984a); }
.acct-icon.scb         { background: linear-gradient(135deg, var(--plum), #8a59a0); }
.acct-icon.bbl         { background: linear-gradient(135deg, #4f7eb8, #2a5a94); }
.acct-icon.bay         { background: linear-gradient(135deg, var(--honey), #c79939); }
.acct-icon.ttb         { background: linear-gradient(135deg, #f5822a, #d4631c); }
.acct-icon.gsb         { background: linear-gradient(135deg, #8b4fa0, #6a3080); }
.acct-icon.baac        { background: linear-gradient(135deg, #2e8b57, #1a6640); }
.acct-icon.ghb         { background: linear-gradient(135deg, #f5a623, #d4861c); }
.acct-icon.cimb        { background: linear-gradient(135deg, #cc0001, #9a0001); }
.acct-icon.uob         { background: linear-gradient(135deg, #003087, #001c55); }
.acct-icon.tisco       { background: linear-gradient(135deg, #e8734a, #c5521c); }
.acct-icon.kkp         { background: linear-gradient(135deg, #1a3e6b, #0d2545); }
.acct-icon.lhbank      { background: linear-gradient(135deg, #1d5a9e, #0d3e7a); }
.acct-icon.icbc        { background: linear-gradient(135deg, #cc1a1a, #9e0000); }
.acct-icon.sc          { background: linear-gradient(135deg, #0b8a8f, #006f74); }
.acct-icon.cash        { background: linear-gradient(135deg, var(--mocha), #a07246); }
.acct-icon.bank        { background: linear-gradient(135deg, #5fb0e0, #3787c5); }
.acct-icon.investment  { background: linear-gradient(135deg, #3aafa9, #2a8780); }
.acct-icon.debt        { background: linear-gradient(135deg, #d96b5e, #b84f44); }
.acct-icon.credit_card { background: linear-gradient(135deg, #8b6db5, #6a4f96); }
.acct-icon.ewallet     { background: linear-gradient(135deg, #5e9bd6, #3a77b8); }
.acct-icon.other       { background: linear-gradient(135deg, var(--mocha), #a07246); }

.acct-body { flex: 1; min-width: 0; }
.acct-name {
  font-size: var(--ts-base);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acct-num {
  font-size: var(--ts-xs);
  color: var(--ink-faint);
}
.acct-balance {
  font-size: var(--ts-md);
  font-weight: 600;
  color: var(--ink);
  text-align: right;
}
.account-row--warning {
  border-left: 3px solid var(--clay);
  padding-left: 13px;
}
.account-row--danger {
  border-left: 3px solid #b03a2e;
  background: rgba(176, 58, 46, 0.04);
  padding-left: 13px;
}
.account-row--danger .acct-balance { color: var(--clay); }

/* Total-balance threshold warning banner (แทนการเตือนทีละบัญชี) */
.balance-threshold-warning {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(232, 182, 73, 0.12);
  border: 1px solid var(--honey);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 4px;
}
.balance-threshold-warning svg { flex-shrink: 0; color: var(--honey); }

.card-padded { padding: 4px 18px; }


/* Donut chart — category breakdown */
.donut-card { padding: 14px 16px; }
.donut-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}
.donut-svg-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}
.donut-svg {
  width: 100%;
  height: 100%;
}
.donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  pointer-events: none;
}
.donut-center-sub {
  font-size: 9px;
  color: var(--ink-faint);
  line-height: 1;
}
.donut-center-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.donut-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.donut-leg-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.donut-leg-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.donut-leg-name {
  flex: 1;
  font-size: 12px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.donut-leg-right {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-shrink: 0;
}
.donut-leg-amt {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.donut-leg-pct {
  font-size: 11px;
  color: var(--ink-faint);
  min-width: 26px;
  text-align: right;
}


/* Export card (dashboard) */
.export-card { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.export-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.export-card-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}
.export-card-text { flex: 1; min-width: 0; }
.export-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.export-card-btn {
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  padding: 10px 28px;
}

/* Gemini API key dialog */
.gemini-key-wrap {
  position: fixed; inset: 0; z-index: 910;
  display: flex; align-items: flex-end;
}
.gemini-key-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.4);
}
.gemini-key-sheet {
  position: relative; width: 100%;
  background: var(--paper);
  border-radius: 20px 20px 0 0;
  display: flex; flex-direction: column;
  max-height: 90vh; overflow-y: auto;
}
.gemini-key-head {
  padding: 16px 20px 10px;
  border-bottom: 0.5px solid var(--rule);
}
.gemini-key-title {
  font-size: 16px; font-weight: 700; color: var(--ink);
}
.gemini-key-body {
  padding: 16px 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.gemini-key-desc {
  font-size: 13px; color: var(--ink); line-height: 1.6; margin: 0;
}
.gemini-key-steps {
  margin: 0; padding-left: 18px;
  font-size: 13px; color: var(--ink); line-height: 1.8;
}
.gemini-key-link {
  align-self: flex-start;
  font-size: 13px; padding: 6px 14px;
}
.gemini-key-input {
  border: 1.5px solid var(--rule);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  font-family: monospace;
  letter-spacing: 0.04em;
}
.gemini-key-input:focus { outline: none; border-color: var(--primary); }
.gemini-key-err {
  font-size: 12px; color: var(--expense);
}
.gemini-key-foot {
  display: flex; gap: 10px;
  padding: 12px 20px;
  border-top: 0.5px solid var(--rule);
}
.gemini-key-foot .btn-ghost  { flex: 1; }
.gemini-key-foot .btn-primary { flex: 2; }

/* Export modal */
.export-modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: flex-end;
}
.export-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}
.export-modal-sheet {
  position: relative;
  width: 100%;
  max-height: 88vh;
  background: var(--paper);
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.export-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 0.5px solid var(--rule);
}
.export-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.export-modal-close {
  background: none;
  border: none;
  padding: 4px;
  color: var(--ink-faint);
  cursor: pointer;
  border-radius: 6px;
}
.export-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.export-modal-foot {
  display: flex;
  gap: 10px;
  padding: 14px 20px;
  border-top: 0.5px solid var(--rule);
}
.export-modal-foot .btn-ghost { flex: 1; }
.export-modal-foot .btn-primary { flex: 2; display: flex; align-items: center; justify-content: center; gap: 6px; }
.export-section-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.export-period-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.export-period-chip {
  padding: 5px 12px;
  border-radius: 9999px;
  border: 1.5px solid var(--rule);
  background: none;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.export-period-chip.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.export-custom-range {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}
.export-date-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  font-size: 12px;
  color: var(--ink-faint);
}
.export-date-label input[type="date"] {
  border: 1.5px solid var(--rule);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 13px;
  color: var(--ink);
  background: var(--surface);
  width: 100%;
  box-sizing: border-box;
}
.export-account-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.export-acct-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
.export-acct-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}
.export-empty-note {
  font-size: 13px;
  color: var(--ink-faint);
}
.export-info-box {
  background: var(--surface);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.export-info-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink);
}
.export-warn-row { color: #c0694c; }
html[data-dark="1"] .export-date-label input[type="date"] { color-scheme: dark; }
html[data-dark="1"] .export-info-box { background: rgba(255,255,255,0.06); }

/* Daily balance chart card */
.chart-card { padding: 18px; overflow: hidden; }
.chart-svg {
  width: 100%;
  height: 80px;
  margin-top: 4px;
  overflow: hidden;
  display: block;
}
.chart-foot {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--ink-faint);
  margin-top: 4px;
}
.chart-note {
  font-size: 12px;
  color: var(--ink-soft);
  font-family: 'Noto Sans Thai', sans-serif;
  margin-top: 8px;
  line-height: 1.4;
}

/* Bar chart — รายจ่ายรายวัน */
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 84px;
  padding: 4px 0;
  margin-top: 6px;
}
.bar-chart .bar {
  flex: 1;
  min-width: 6px;
  background: var(--mocha);
  opacity: 0.35;
  border-radius: 4px 4px 0 0;
  transition: opacity 0.2s;
  position: relative;
  cursor: default;
  /* min height สำหรับวันที่มี expense > 0 — แสดง trace บางๆ */
  min-height: 2px;
}
.bar-chart .bar.empty {
  background: var(--rule);
  height: 2px !important;
  opacity: 1;
}
.bar-chart .bar.high {
  background: var(--clay);
  opacity: 0.8;
}
.bar-chart .bar.today {
  background: var(--terracotta);
  opacity: 1;
}
.bar-chart .bar:hover { opacity: 1; }

/* Tooltip บน hover/tap */
.bar-chart .bar::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 10px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 5;
}
.bar-chart .bar:hover::after,
.bar-chart .bar:focus::after { opacity: 1; }

/* Insight banner — เห็นทันทีว่าเดือนนี้เป็นไง */
.insight-banner {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--rule-soft);
  border-radius: 12px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.insight-banner.good { background: var(--sage-soft); }
.insight-banner.warn { background: var(--clay-soft); }
.insight-banner .ic {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--mocha);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.insight-banner.good .ic { background: var(--sage); }
.insight-banner.warn .ic { background: var(--clay); }
.insight-banner .ic svg { width: 14px; height: 14px; stroke-width: 2.5; }
.insight-banner .text {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink);
}
.insight-banner .text strong { font-weight: 600; }
.insight-banner.good .text strong { color: #4a6b45; }
.insight-banner.warn .text strong { color: #8b3a2e; }


/* Today entries (recent transactions) */
.entry {
  display: grid;
  grid-template-columns: 36px 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px dotted var(--rule);
  position: relative;
  overflow: hidden;
}
.entry:last-child { border-bottom: none; }

/* Swipe-reveal action panel — slides in from right (mobile only) */
.entry-swipe-actions {
  display: none;
  pointer-events: none;
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 80px;
  align-items: stretch;
  transform: translateX(100%);
  transition: transform 0.2s ease;
}
@media (hover: none) {
  .entry-swipe-actions { display: flex; }
}
.entry.swiped .entry-swipe-actions {
  transform: translateX(0);
  pointer-events: auto;
}

.swipe-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  color: #fff;
  transition: filter 0.15s;
}
.swipe-btn:active { filter: brightness(0.88); }
.swipe-edit { background: var(--primary, #e88e3c); }
.swipe-del  { background: var(--clay, #c0694c); }

.entry-time {
  font-size: 11px;
  color: var(--ink-faint);
}
.entry-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.entry-icon svg { width: 16px; height: 16px; stroke-width: 2; }

.entry-name {
  font-size: var(--ts-base);
  color: var(--ink);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entry-cat {
  font-size: var(--ts-xs);
  color: var(--ink-faint);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 3px;
}
/* ไอคอนสัญลักษณ์รายการในบัญชีแชร์ */
.shared-badge {
  display: inline-flex;
  align-items: center;
  color: var(--primary);
  opacity: 0.75;
  flex-shrink: 0;
}
.shared-badge svg {
  display: block;
}
.entry-acct-line {
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entry-amt {
  font-size: var(--ts-base);
  font-weight: 600;
  color: var(--clay);
}
.entry-amt.income { color: var(--sage); }
.entry-amt.transfer { color: var(--dust-blue); }


/* Page sign-off */
.signoff {
  margin-top: 24px;
  text-align: center;
  font-family: var(--font-accent);
  color: var(--ink-faint);
  font-size: 14px;
  padding-bottom: 8px;
}


/* === 6a. Collapsible sections (หน้าแรกพับส่วนรายละเอียด) ========= */

.dash-sec-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-card);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.15s ease;
}
.dash-sec-head:active { transform: scale(0.99); }
/* เปิดอยู่ → หัวข้อยังเป็นแถวกลมของตัวเอง แล้วเว้นช่องให้เนื้อหาข้างล่าง
   (ไม่เชื่อมขอบกับการ์ด เพราะแต่ละ section มีโครงเนื้อหาต่างกัน — chips/การ์ด/empty state) */
.dash-sec.open > .dash-sec-head {
  border-color: var(--rule);
  margin-bottom: 10px;
}
.dash-sec-titles {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* หัวข้อในโหมดพับใช้ขนาดเล็กกว่า .section-title เดิม — ไม่ให้แย่งสายตากับ hero */
.dash-sec-head .section-title { font-size: 17px; line-height: 1.35; }
.dash-sec-summary {
  font-size: var(--ts-xs);
  color: var(--ink-soft);
  line-height: 1.45;
}
.dash-sec-chev {
  flex-shrink: 0;
  display: flex;
  color: var(--ink-faint);
  transition: transform 0.2s ease;
}
.dash-sec-chev svg { stroke: var(--ink-faint); }
.dash-sec.open > .dash-sec-head .dash-sec-chev,
.dash-sec.open > .hero-chart-toggle .dash-sec-chev { transform: rotate(90deg); }

.dash-sec-body { display: none; }
.dash-sec.open > .dash-sec-body {
  display: block;
  animation: dash-sec-in 0.22s ease;
}
@keyframes dash-sec-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.dash-sec-foot { padding: 8px 4px 0; text-align: right; }

/* กราฟในการ์ด hero — ปุ่มคลี่แบบบางๆ ไม่ใช่การ์ดซ้อนการ์ด */
.hero-chart-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 7px;
  margin: 2px 0 4px;
  background: transparent;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: var(--ts-xs);
  color: var(--ink-soft);
  cursor: pointer;
}
.hero-chart-toggle:active { background: var(--rule-soft); }

html[data-dark="1"] .dash-sec-head { background: var(--card); border-color: var(--rule); }


/* === 6b. เป้าหมายท้าทาย (goal cards + ปุ่มตั้งเป้า) ============== */

/* ปุ่มชวนตั้งเป้า — แสดงเมื่อยังไม่มีเป้าเลย */
.goal-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1px dashed var(--rule);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  transition: transform 0.12s ease;
}
.goal-cta:active { transform: scale(0.985); }
.goal-cta-ic {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--terracotta);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.goal-cta-ic svg { stroke: #fff; }
.goal-cta-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.goal-cta-title { font-size: var(--ts-md); font-weight: 600; color: var(--ink); }
.goal-cta-sub    { font-size: var(--ts-sm); color: var(--ink-soft); line-height: 1.45; }
.goal-cta-chev   { flex-shrink: 0; color: var(--ink-faint); display: flex; }
.goal-cta-chev svg { stroke: var(--ink-faint); }

/* การ์ดเป้าหมาย */
.goal-card { padding: 14px 16px 15px; margin-bottom: 10px; }
.goal-card:last-child { margin-bottom: 0; }
.goal-card-done { opacity: 0.92; }

.goal-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.goal-ic {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.goal-ic svg { stroke: #fff; }
.goal-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.goal-title {
  font-size: var(--ts-base);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}
.goal-meta { font-size: var(--ts-xs); color: var(--ink-faint); }
.goal-edit {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--rule-soft);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.goal-edit svg { stroke: var(--ink-soft); }

/* แถบความคืบหน้า + หมุดจังหวะที่ควรอยู่ */
.goal-bar {
  position: relative;
  height: 10px;
  background: var(--rule-soft);
  border-radius: 999px;
  overflow: hidden;
}
.goal-bar-fill {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--terracotta);
  transition: width 0.5s ease;
}
.goal-bar-fill.good  { background: var(--sage); }
.goal-bar-fill.warn  { background: var(--honey); }
.goal-bar-fill.over  { background: var(--clay); }
.goal-bar-fill.earn  { background: var(--sage); }
.goal-bar-fill.ended { background: var(--mocha); }
.goal-bar-pace {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 14px;
  background: var(--ink-faint);
  opacity: 0.55;
  border-radius: 2px;
}

.goal-nums {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}
.goal-num-main {
  font-size: var(--ts-base);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.goal-num-side { flex-shrink: 0; font-size: var(--ts-xs); color: var(--ink-faint); }

.goal-verdict {
  margin-top: 8px;
  font-size: var(--ts-sm);
  line-height: 1.5;
  color: var(--ink-soft);
}
.goal-verdict.good { color: var(--sage); }
.goal-verdict.warn { color: var(--clay); }

.goal-done-actions { display: flex; gap: 8px; margin-top: 12px; }
.goal-ghost-btn {
  flex: 1;
  padding: 9px;
  border-radius: 11px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-soft);
  font-size: var(--ts-sm);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.goal-ghost-btn.primary {
  border-color: var(--terracotta);
  color: var(--terracotta);
  background: var(--terracotta-soft);
}

/* Modal ตั้งเป้า — ใช้โครง .overlay + .acct-modal ร่วมกับ modal บัญชี */
.goal-modal-body { gap: 0; }
.goal-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.goal-type-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1.5px solid var(--rule);
  background: var(--card);
  color: var(--ink-soft);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
}
.goal-type-btn svg { stroke: var(--ink-faint); }
.goal-type-btn.active {
  border-color: var(--terracotta);
  background: var(--terracotta-soft);
}
.goal-type-btn.active svg { stroke: var(--terracotta); }
.goal-type-btn.active .goal-type-name { color: var(--terracotta); }
.goal-type-name { font-size: var(--ts-base); font-weight: 600; color: var(--ink); }
.goal-type-desc { font-size: var(--ts-xs); color: var(--ink-faint); line-height: 1.35; }

.goal-chip-row {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.goal-chip-row::-webkit-scrollbar { display: none; }
.goal-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--rule);
  background: var(--card);
  color: var(--ink-soft);
  font-size: var(--ts-sm);
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.goal-chip.active {
  border-color: var(--terracotta);
  background: var(--terracotta-soft);
  color: var(--terracotta);
  font-weight: 600;
}
.goal-chip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* flex-wrap ไม่ใช่ grid 4 คอลัมน์ตายตัว — ที่ text_size=xlarge + 360px
   ปุ่มจะตกลงแถวใหม่แทนที่จะบีบจนตัวหนังสือล้น */
.goal-dur-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.goal-dur-btn {
  flex: 1 1 68px;
  padding: 9px 4px;
  border-radius: 10px;
  border: 1.5px solid var(--rule);
  background: var(--card);
  color: var(--ink-soft);
  font-size: var(--ts-sm);
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.goal-dur-btn.active {
  border-color: var(--terracotta);
  background: var(--terracotta-soft);
  color: var(--terracotta);
  font-weight: 600;
}

.goal-date-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.goal-date-label > span {
  flex-shrink: 0;
  font-size: var(--ts-sm);
  color: var(--ink-soft);
}
.goal-date-label .goal-date-input { flex: 1; min-width: 0; margin-top: 0; }

.goal-preview {
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: 12px;
  /* derive จาก token ของธีมเอง → ถูกทิศทั้ง light/dark ทุกธีม (fallback ก่อน) */
  background: var(--card);
  background: color-mix(in srgb, var(--paper) 75%, var(--card) 25%);
  font-size: var(--ts-sm);
  line-height: 1.55;
  color: var(--ink-soft);
}
.goal-delete-btn {
  margin-top: 12px;
  padding: 9px;
  width: 100%;
  border-radius: 11px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--clay);
  font-size: var(--ts-sm);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

/* Dark mode — chip/type/date ต้อง override เอง (ดู CLAUDE.md §6 dark-mode gotcha) */
html[data-dark="1"] .goal-cta,
html[data-dark="1"] .goal-chip,
html[data-dark="1"] .goal-dur-btn,
html[data-dark="1"] .goal-type-btn {
  background: var(--card);
  border-color: var(--rule);
  color: var(--ink-soft);
}
html[data-dark="1"] .goal-chip.active,
html[data-dark="1"] .goal-dur-btn.active,
html[data-dark="1"] .goal-type-btn.active {
  background: var(--terracotta-soft);
  border-color: var(--terracotta);
  color: var(--ink);
}
html[data-dark="1"] .goal-type-btn.active .goal-type-name { color: var(--ink); }
html[data-dark="1"] .goal-type-btn.active svg { stroke: var(--ink); }
html[data-dark="1"] .goal-date-input { color-scheme: dark; }


/* === 7. Add modal + keypad ====================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  animation: slide-up 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.modal.hidden { display: none; }

@keyframes slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.add-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 8px;
}
.add-close {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--rule-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
}
.add-close svg { width: 18px; height: 18px; stroke-width: 2; }

.add-title {
  font-family: var(--font-accent);
  font-size: 22px;
  color: var(--ink);
}

.add-save {
  background: var(--terracotta);
  color: white;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 12px -4px rgba(232, 133, 99, 0.55);
}
.add-save:disabled {
  background: var(--ink-faint);
  box-shadow: none;
}

/* Segmented control: รายจ่าย / รายรับ / โอน */
.add-segmented {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin: 0 24px;
  background: var(--rule-soft);
  border-radius: 999px;
  padding: 4px;
}
.seg-item {
  text-align: center;
  padding: 9px 0;
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 500;
  border-radius: 999px;
  transition: all 0.2s;
}
.seg-item.active {
  background: white;
  box-shadow: 0 2px 8px -2px rgba(60, 40, 20, 0.12);
  font-weight: 600;
}
.seg-item.active[data-type="expense"] { color: var(--clay); }
.seg-item.active[data-type="income"]  { color: var(--sage); }
.seg-item.active[data-type="transfer"]{ color: var(--dust-blue); }

/* Account pill row — บน amount section */
.add-acct-row {
  padding: 8px 24px 0;
}
.add-acct-row .acct-pill {
  width: 100%;
}

/* Big amount display */
.add-amount {
  text-align: center;
  padding: 20px 24px 6px;
}
.add-amount-label {
  font-family: var(--font-accent);
  font-size: 16px;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

/* Row: [mic] [amount-centered] [spacer] */
.add-amount-row {
  display: flex;
  align-items: center;
  gap: 0;
}
.voice-btn-large {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--terracotta-soft);
  color: var(--terracotta);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.15s ease, background 0.2s;
}
.voice-btn-large:active {
  transform: scale(0.92);
  background: var(--terracotta);
  color: white;
}
.voice-btn-large svg { width: 40px; height: 40px; }
.voice-btn-spacer {
  width: 56px;
  flex-shrink: 0;
}
.add-amount-row .add-amount-value {
  flex: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
}
.add-amount-value {
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -2px;
  line-height: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  color: var(--clay);            /* default = expense */
}
.add-amount-value[data-type="income"]   { color: var(--sage); }
.add-amount-value[data-type="transfer"] { color: var(--dust-blue); }
.add-amount-value .unit {
  font-size: 24px;
  color: var(--ink-faint);
  font-weight: 400;
}
.add-calc-hint {
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: 8px;
  font-family: 'Noto Sans Thai', sans-serif;
}

/* Meta section (category, account, note) — scrollable middle */
.add-meta {
  padding: 16px 24px;
  flex: 1;
  overflow-y: auto;
}
.meta-block { margin-bottom: 14px; }
.meta-label {
  font-family: var(--font-accent);
  font-size: 15px;
  color: var(--ink-soft);
  margin-bottom: 6px;
  padding-left: 4px;
}

.cat-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 8px;
  scrollbar-width: none;
}
.cat-strip::-webkit-scrollbar { display: none; }
.cat-chip {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px 8px;
  border-radius: 14px;
  min-width: 64px;
  background: var(--card);
  border: 1.5px solid var(--rule);
}
.cat-chip.active {
  border-color: var(--clay);
  background: var(--clay-soft);
}
/* หมวดแนะนำจาก note ที่พิมพ์ — เส้นประไฮไลต์ + ป้าย "แนะนำ" (ยังไม่ถูกเลือก) */
.cat-chip--suggested:not(.active) {
  border-color: var(--primary);
  border-style: dashed;
}
.cat-chip--suggested:not(.active)::after {
  content: 'แนะนำ';
  position: absolute;
  top: -7px;
  font-size: 9px;
  font-weight: 600;
  color: #fff;
  background: var(--primary);
  padding: 1px 6px;
  border-radius: 9999px;
  white-space: nowrap;
}
.cat-chip { position: relative; }
.cat-chip-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.cat-chip-icon svg { width: 18px; height: 18px; stroke-width: 2; }
.cat-chip-name {
  font-size: 11px;
  color: var(--ink);
  font-weight: 500;
}
/* ปุ่ม "เพิ่มหมวด" ท้าย strip — ลิงก์ไปหน้าจัดการหมวดหมู่ */
.cat-chip-add .cat-chip-icon {
  background: var(--accent-soft);
  color: var(--primary);
  border: 1.5px dashed var(--primary);
  box-sizing: border-box;
}
.cat-chip-add .cat-chip-name { color: var(--ink-faint); }

.acct-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--card);
  border: 1.5px solid var(--rule);
  border-radius: 14px;
  width: 100%;
  text-align: left;
}
.acct-pill .ic {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #6cc16c, #45984a);
  color: white;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.acct-pill .nm { font-size: 13px; color: var(--ink); }
.acct-pill .num { font-size: 11px; color: var(--ink-faint); }
.acct-pill svg { width: 16px; height: 16px; color: var(--ink-faint); }

/* Account picker bottom-sheet */
.picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 250;
  display: flex;
  align-items: flex-end;
  animation: fadeIn 0.2s;
}
.picker-sheet {
  background: var(--surface, #fff);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-height: 70vh;
  overflow-y: auto;
  padding: 8px 0 24px;
  animation: slideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.picker-handle {
  width: 36px;
  height: 4px;
  background: var(--rule, #efe5d4);
  border-radius: 2px;
  margin: 8px auto 16px;
}
.picker-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-faint);
  padding: 0 20px 8px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}
.picker-list {
  display: flex;
  flex-direction: column;
}
.picker-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}
.picker-row:active { background: var(--rule, #efe5d4); }
.picker-row.active { background: var(--accent-soft, #fef3e7); }
.picker-row .ic {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}
.picker-row-info { flex: 1; min-width: 0; }
.picker-row .nm { font-size: 14px; color: var(--ink); font-weight: 500; }
.picker-row .num { font-size: 12px; color: var(--ink-faint); }
.picker-row svg { color: var(--terracotta, #c0694c); flex-shrink: 0; }
.picker-add {
  display: block;
  width: calc(100% - 40px);
  margin: 8px 20px 0;
  padding: 12px;
  background: transparent;
  border: 1.5px dashed var(--rule, #efe5d4);
  border-radius: 10px;
  color: var(--primary, #e88e3c);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background 0.1s;
}
.picker-add:active { background: var(--accent-soft, #fef3e7); }

@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes fadeIn  { from { opacity: 0; }                  to { opacity: 1; }              }


/* === Account management (Settings) ================================ */
.acct-manage-list {
  padding: 0 !important;
  overflow: hidden;
}
.acct-manage-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule-soft);
}
.acct-manage-row:last-child { border-bottom: none; }
.acct-manage-info { flex: 1; min-width: 0; }
.acct-manage-btns {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.acct-mgr-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--rule-soft);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.acct-mgr-btn:active { background: var(--rule); }
.acct-mgr-btn.danger { color: var(--clay); }
.acct-mgr-btn.danger:active { background: #fce8e6; }
.acct-mgr-btn.share-active { color: var(--terracotta); background: var(--terracotta-soft); }

/* Share panel — ขยายใต้ account row */
.acct-share-panel {
  padding: 8px 16px 12px;
  border-top: 1px solid var(--rule-soft);
  background: var(--paper);
}
.acct-share-email-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
}
.acct-share-email-row .share-addr {
  flex: 1;
  font-size: 13px;
  color: var(--ink-soft);
}
.acct-share-panel .share-email-add {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
.acct-share-panel .share-email-field {
  flex: 1;
  padding: 7px 11px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-size: 13px;
  background: var(--card);
  color: var(--ink);
}

/* Full-screen overlay backdrop สำหรับ bottom-sheet popup */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-end;
  animation: fade-in 0.15s ease;
}

/* Account add/edit modal (bottom-sheet overlay) */
.acct-modal {
  background: var(--paper);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: slide-up 0.2s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.acct-modal-head {
  padding: 18px 20px 14px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.acct-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.acct-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 14px;
  display: block;
}
.acct-field-label:first-child { margin-top: 0; }
.acct-field-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--rule);
  border-radius: 10px;
  font-size: 15px;
  /* --card ไม่ใช่ #fff ตายตัว → dark mode ไม่กลายเป็นข้อความขาวบนพื้นขาว
     (--surface ไม่มีนิยามในระบบ token นี้ fallback จึงเป็นขาวเสมอ) */
  background: var(--card);
  color: var(--ink);
  box-sizing: border-box;
  margin-top: 6px;
  font-family: inherit;
}
.acct-field-input:focus {
  outline: none;
  border-color: var(--terracotta);
}
.acct-field-hint {
  font-size: 11.5px;
  color: var(--ink-faint);
  margin-top: 4px;
  line-height: 1.4;
}
.acct-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}
.acct-type-btn {
  padding: 9px 6px;
  border-radius: 10px;
  border: 1.5px solid var(--rule);
  background: var(--surface, #fff);
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
  font-family: inherit;
}
.acct-type-btn.active {
  background: var(--accent-soft, #fef3e7);
  border-color: var(--terracotta);
  color: var(--terracotta);
  font-weight: 600;
}
.acct-modal-footer {
  display: flex;
  gap: 10px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--rule);
  background: var(--paper);
}
.acct-modal-footer .cancel {
  flex: 1;
  padding: 12px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  background: var(--rule-soft);
  color: var(--ink-soft);
}
.acct-modal-footer .confirm {
  flex: 1;
  padding: 12px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  background: var(--terracotta);
  color: white;
  box-shadow: 0 4px 12px -4px rgba(192, 105, 76, 0.45);
}

.note-input {
  background: var(--card);
  border: 1.5px solid var(--rule);
  border-radius: 14px;
  padding: 12px 14px;
  width: 100%;
  font-family: 'Noto Sans Thai', sans-serif;
  font-size: 14px;
  outline: none;
}
.note-input::placeholder { color: var(--ink-faint); }
.note-input:focus { border-color: var(--terracotta); }

/* Custom keypad */
.keypad {
  background: var(--paper-deep);
  padding: 12px 16px calc(22px + var(--safe-bottom));
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
  border-top: 1px solid var(--rule);
  /* slide-up transition */
  overflow: hidden;
  max-height: 260px;
  transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              opacity     0.22s ease;
  opacity: 1;
}
.keypad--hidden {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top-color: transparent;
  pointer-events: none;
}

/* Amount row — hint ว่า tap ได้ */
.add-amount-row {
  cursor: pointer;
}
.add-amount-row:active .add-amount-value {
  opacity: 0.75;
}
.key {
  height: 48px;
  border-radius: 12px;
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(60, 40, 20, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.02);
  transition: transform 0.1s, background 0.15s;
}
.key:active {
  transform: scale(0.95);
  background: var(--rule-soft);
}
.key.op {
  background: var(--sage-soft);
  color: var(--sage);
  font-weight: 600;
}
.key.del {
  background: var(--clay-soft);
  color: var(--clay);
}
.key.del svg { width: 22px; height: 22px; stroke-width: 2; }


/* === 8. List view =============================================== */
.app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0 6px;
}
.app-bar .title {
  font-family: var(--font-accent);
  font-size: 22px;
  color: var(--ink);
}
.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
}
.icon-btn:active { background: var(--rule-soft); }
.icon-btn svg { width: 20px; height: 20px; stroke-width: 1.8; }

.search-bar {
  margin: 6px 0 14px;
  background: var(--card);
  border: 1.5px solid var(--rule);
  border-radius: 14px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.search-bar svg {
  width: 16px;
  height: 16px;
  color: var(--ink-faint);
  stroke-width: 2;
  flex-shrink: 0;
}
.search-bar input {
  border: none;
  outline: none;
  flex: 1;
  background: transparent;
  font-size: 13px;
}
.search-bar input::placeholder {
  color: var(--ink-faint);
  font-family: 'Noto Sans Thai', sans-serif;
}

/* Month navigation (list view) */
.month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0 10px;
}
.month-nav-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.month-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--card);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.1s;
}
.month-nav-btn:active { background: var(--rule); }
.month-nav-btn.disabled { opacity: 0.3; cursor: default; pointer-events: none; }
.flip-h { display: inline-flex; transform: scaleX(-1); }

.filter-chips {
  display: flex;
  gap: 6px;
  padding: 0 0 14px;
}
.chip {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 4px;
  border-radius: 12px;
  background: var(--card);
  border: 1.5px solid var(--rule);
  min-width: 0;
  cursor: pointer;
  color: var(--ink-soft);
}
.chip-label {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;
}
.chip-amt {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1;
  color: var(--ink-faint);
}
/* สียอดตาม type */
.chip-amt.exp { color: var(--expense); }
.chip-amt.inc { color: var(--income); }
.chip-amt.trf { color: var(--transfer, #5e9bd6); }
.chip-amt.pos { color: var(--income); }
.chip-amt.neg { color: var(--expense); }
.chip.active {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
}
.chip.active .chip-label { color: white; }
.chip.active .chip-amt   { color: rgba(255,255,255,0.7); }

.month-carry-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 16px 6px;
  background: var(--accent-soft);
  border-radius: 10px;
  margin-bottom: 12px;
}
.month-carry-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.month-carry-balance { font-size: 12px; color: var(--ink-faint); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.month-carry-net { font-size: 12px; font-weight: 600; padding: 0 3px; }
.month-carry-net.positive { color: var(--sage); }
.month-carry-net.negative { color: var(--clay); }

.day-group { margin-bottom: 22px; }
.day-head {
  margin-bottom: 8px;
  padding-left: 4px;
}
.day-name {
  font-family: var(--font-accent);
  font-size: 22px;
  color: var(--ink);
  line-height: 1.1;
}
.day-name .num { color: var(--terracotta); }
.day-meta {
  font-family: 'Noto Sans Thai', sans-serif;
  font-size: 12px;
  color: var(--ink-faint);
  margin-top: 2px;
  letter-spacing: 0.04em;
}
.day-meta .total { color: var(--clay); font-weight: 500; }
.day-meta .income { color: var(--sage); font-weight: 500; }


/* === 9. Import view ============================================= */
.import-header { padding: 8px 4px 18px; }
.import-title {
  font-family: var(--font-accent);
  font-size: 30px;
  color: var(--ink);
  line-height: 1.1;
}
.import-title .accent { color: var(--terracotta); }
.import-sub {
  font-family: 'Noto Sans Thai', sans-serif;
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 4px;
}

/* PDF import tile */
.import-tile {
  background: var(--card);
  border: 2px dashed;
  border-radius: 18px;
  padding: 18px 12px 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 140px;
}
.import-tile.pdf { border-color: var(--terracotta); }
.import-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  pointer-events: none;
}
.import-tile.pdf::before { background: linear-gradient(135deg, var(--terracotta-soft) 0%, transparent 75%); }

.tile-icon {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: white;
  box-shadow: 0 4px 14px -6px rgba(60, 40, 20, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.import-tile.pdf .tile-icon { color: var(--terracotta); transform: rotate(-3deg); }
.tile-icon svg { width: 26px; height: 26px; stroke-width: 1.6; }

.tile-icon .badge {
  position: absolute;
  top: -7px;
  right: -10px;
  font-size: 8px;
  font-weight: 700;
  color: white;
  padding: 2px 5px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}
.import-tile.pdf .tile-icon .badge { background: var(--terracotta); transform: rotate(8deg); }

.tile-title {
  position: relative;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.tile-desc {
  position: relative;
  font-size: 11px;
  color: var(--ink-soft);
  font-family: 'Noto Sans Thai', sans-serif;
  line-height: 1.45;
  margin-bottom: auto;
  padding: 0 4px;
}
.tile-btn {
  position: relative;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 600;
  color: white;
  padding: 7px 16px;
  border-radius: 999px;
}
.import-tile.pdf .tile-btn { background: var(--terracotta); box-shadow: 0 3px 10px -3px rgba(232, 133, 99, 0.55); }


/* Bank grid */
.bank-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.bank-cell {
  background: var(--card);
  border-radius: 12px;
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow:
    0 1px 0 rgba(80, 60, 30, 0.04),
    0 4px 12px -8px rgba(80, 60, 30, 0.12);
}
.bank-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.bank-name { font-size: 11px; color: var(--ink); font-weight: 500; }


/* Recent imports */
.recent-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px dotted var(--rule);
}
.recent-row:last-child { border-bottom: none; }
.recent-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.recent-icon svg { width: 12px; height: 12px; stroke-width: 2; }
.recent-icon.pdf  { background: var(--terracotta-soft); color: var(--terracotta); }
.recent-icon.slip { background: var(--dust-blue-soft); color: var(--dust-blue); }
.recent-name {
  font-size: 13px;
  color: var(--ink);
}
.recent-meta {
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: 2px;
}
.recent-amt {
  font-size: 12px;
  color: var(--ink-soft);
  text-align: right;
}
.recent-amt strong {
  color: var(--terracotta);
  font-weight: 600;
}

/* Profile card (Settings top) */
.profile-card {
  background: var(--card);
  border-radius: var(--r-card);
  padding: 18px 18px 14px;
  margin: 0 0 16px;
  box-shadow: 0 1px 0 rgba(80, 60, 30, 0.04);
}
.profile-level-name {
  font-size: var(--ts-base);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.profile-xp-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.profile-xp-cur {
  font-size: var(--ts-sm);
  font-weight: 600;
  color: var(--primary);
}
.profile-xp-next {
  font-size: var(--ts-xs);
  color: var(--ink-faint);
}
.profile-xp-bar {
  height: 6px;
  background: var(--rule);
  border-radius: 9999px;
  overflow: hidden;
  margin-bottom: 12px;
}
.profile-xp-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 9999px;
  transition: width 0.4s ease;
}
.profile-coins-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.profile-coin {
  font-size: var(--ts-sm);
  color: var(--ink-soft);
}
.profile-streak {
  font-size: var(--ts-sm);
  color: var(--ink-soft);
  margin-left: auto;
}

/* === Settings accordion (เมนูพับเก็บ — เปิดทีละส่วน) ============= */
.settings-acc { margin-top: 10px; }
.settings-acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 16px;
  background: var(--card);
  border: none;
  border-radius: var(--r-card);
  box-shadow: 0 1px 0 rgba(80, 60, 30, 0.04);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease;
}
.settings-acc-head:active { transform: scale(0.985); }
.settings-acc-title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-accent);
  font-size: 18px;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Mali มีสระล่าง (◌ู) ที่ยื่นต่ำกว่า baseline — line-height แน่นเกินทำให้ overflow ตัดสระขาด */
  line-height: 1.6;
  padding-bottom: 2px;
}
.settings-acc-meta {
  font-size: var(--ts-xs);
  color: var(--ink-faint);
  flex-shrink: 1;
  min-width: 0;
  max-width: 45%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}
.settings-acc-chevron {
  display: flex;
  align-items: center;
  color: var(--ink-faint);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.settings-acc.open .settings-acc-chevron { transform: rotate(90deg); }
.settings-acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}
.settings-acc.open .settings-acc-body { grid-template-rows: 1fr; }
.settings-acc-inner {
  min-height: 0;
  overflow: hidden;
}
.settings-acc-inner > :first-child { margin-top: 8px; }
.settings-acc-inner > .card { margin-bottom: 6px; }
/* เมนูย่อย (การ์ดใน accordion): ใกล้สีพื้นธีม (--paper) แต่สว่างกว่านิด (ผสมไป --card)
   → กลมกลืนกับธีม + ต่างจาก header (--card สีขาวเด่น)
   ทำงานถูกทั้ง light/dark: โหมดมืด --card สว่างกว่า --paper อยู่แล้ว → ยกขึ้นจากพื้น
   fallback = --card (ไม่ใช้ --paper เพราะ = สีพื้นหน้าเพจ จะกลืนหาย) */
.settings-acc-inner .card {
  background: var(--card);
  background: color-mix(in srgb, var(--paper) 75%, var(--card) 25%);
}
.settings-sub-label {
  padding: 10px 2px 6px;
  font-size: 11px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.settings-sub-row {
  display: flex;
  justify-content: flex-end;
  padding: 2px 4px 6px;
}
.settings-sub-row .section-action {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.days-ahead-picker {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
/* sub-settings ใต้ toggle แม่ (เช่น เตือนล่วงหน้า ใต้ รายการประจำครบกำหนด)
   เยื้องจากแถวแม่เล็กน้อย — ข้อความเมนูย่อยเริ่มลึกกว่าแม่ ~8px พอให้เห็นลำดับชั้น */
.setting-subgroup {
  margin: 0 18px 6px 18px;
  padding-left: 10px;
  border-left: 2px solid var(--rule);
}
.setting-subgroup .setting-row { padding: 12px 0 12px 8px; }
.setting-subgroup .setting-row:last-child { border-bottom: none; }

/* chips เลือกช่วงเวลาของ donut "ใช้ไปกับอะไร" */
.donut-chips {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

/* แถวตั้งค่าแบบ label บน + control เต็มแถวล่าง (เช่น เตือนล่วงหน้า) */
.setting-stack {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.setting-stack .days-ahead-picker { justify-content: stretch; }
.setting-stack .days-ahead-picker .setting-seg-btn {
  flex: 1;
  text-align: center;
}

.privacy-footer {
  margin-top: 22px;
  padding: 14px 16px;
  background: var(--sage-soft);
  border-radius: 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.privacy-footer svg {
  width: 18px;
  height: 18px;
  color: var(--sage);
  stroke-width: 2;
  flex-shrink: 0;
  margin-top: 2px;
}
.privacy-footer .text {
  font-size: 11px;
  color: #4a6b45;
  line-height: 1.5;
}
.privacy-footer .text strong {
  color: #3a5638;
  font-weight: 600;
}


/* === 10. Settings ============================================== */
.setting-group { margin-top: 22px; }
.setting-section {
  background: var(--card);
  border-radius: var(--r-card);
  padding: 0 16px;
  margin: 16px 0;
  box-shadow: 0 1px 0 rgba(80, 60, 30, 0.04);
}
.setting-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  padding: 14px 0 6px;
}
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px dotted var(--rule);
}
.setting-row:last-child { border-bottom: none; }
.setting-label {
  font-size: var(--ts-base);
  color: var(--ink);
}
.setting-sub {
  font-size: var(--ts-xs);
  color: var(--ink-faint);
  margin-top: 2px;
}
.setting-value {
  font-size: var(--ts-sm);
  color: var(--ink-soft);
}


/* === 11. Toast + utilities ===================================== */
#toast {
  position: fixed;
  bottom: calc(var(--nav-height) + var(--safe-bottom) + 14px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100vw - 32px);
}
.toast {
  /* Glassmorphism — ทำงานบน light และ dark bg */
  background: rgba(22, 22, 28, 0.88);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  color: rgba(255, 255, 255, 0.95);

  padding: 11px 20px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.01em;
  text-align: center;
  max-width: min(360px, calc(100vw - 32px));
  width: max-content;

  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.25),
    0 2px 8px  rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  /* spring animation — เข้าด้วย overshoot เล็กน้อย */
  animation: toast-in 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
             toast-out 0.25s ease 2.5s forwards;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(20px) scale(0.90); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateY(6px) scale(0.96); }
}

/* Empty state */
/* ===================================================================
   Skeleton loading
   =================================================================== */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.skeleton {
  background: linear-gradient(
    90deg,
    var(--rule-soft) 25%,
    var(--rule)      50%,
    var(--rule-soft) 75%
  );
  background-size: 400px 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 8px;
}

/* Empty state (รายการว่างทั้งแอป) */
.empty-state {
  text-align: center;
  padding: 56px 24px 32px;
}
.empty-icon {
  color: var(--ink-faint);
  margin-bottom: 16px;
  opacity: 0.55;
}
.empty-title {
  font-family: var(--font-accent);
  font-size: 20px;
  color: var(--ink);
  margin: 0 0 8px;
  font-weight: 700;
}
.empty-subtitle {
  font-size: 14px;
  color: var(--ink-faint);
  margin: 0 0 20px;
  line-height: 1.55;
  max-width: 260px;
  margin-left: auto;
  margin-right: auto;
}
.empty-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.btn-primary {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
  max-width: 280px;
}
.btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  border: 1.5px solid var(--rule);
  padding: 11px 24px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
  max-width: 280px;
}
.btn-ghost:hover { background: var(--rule-soft); }


/* Demo mode banner */
.demo-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--accent-soft, #fef3e7);
  border: 1px solid var(--honey);
  border-radius: 12px;
  padding: 10px 14px;
  margin: 0 0 12px;
  font-size: 13px;
}
.demo-banner-text {
  color: var(--ink-soft);
  flex: 1;
}
.demo-clear-btn {
  background: transparent;
  border: 1.5px solid var(--rule);
  color: var(--ink-soft);
  border-radius: 99px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.demo-clear-btn:active { background: var(--rule); }

html[data-dark="1"] .demo-banner {
  background: rgba(255,200,100,0.08);
  border-color: rgba(255,200,100,0.25);
}


.empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--ink-soft);
}
.empty .icon {
  font-size: 36px;
  margin-bottom: 12px;
  opacity: 0.4;
}
.empty .title {
  font-family: var(--font-accent);
  font-size: 20px;
  color: var(--ink);
  margin-bottom: 4px;
}
.empty .desc {
  font-family: 'Noto Sans Thai', sans-serif;
  font-size: 13px;
}

/* === Catchup / welcome-back banner ============================= */
.catchup-banner {
  position: relative;
  background: linear-gradient(135deg, var(--terracotta-soft, #fef3e7) 0%, var(--paper, #fdfaf6) 100%);
  border: 1.5px solid var(--terracotta, #e88e3c);
  border-radius: var(--r-card, 14px);
  padding: 16px 44px 16px 18px;
  margin: 0 16px 12px;
  overflow: hidden;
  animation: catchup-in 0.42s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}
@keyframes catchup-in {
  from { opacity: 0; transform: translateY(-10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)     scale(1);    }
}
.catchup-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--terracotta, #e88e3c), var(--honey, #e8b649));
  border-radius: var(--r-card, 14px) var(--r-card, 14px) 0 0;
}
.catchup-title {
  font-family: var(--font-accent);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink, #2d3748);
  margin-bottom: 5px;
  line-height: 1.3;
}
.catchup-body {
  font-size: 13.5px;
  color: var(--ink-soft, #718096);
  line-height: 1.55;
  margin-bottom: 12px;
}
.catchup-body strong { color: var(--ink, #2d3748); font-weight: 600; }
.catchup-hint {
  font-size: 12px;
  color: var(--ink-faint, #a0aec0);
  margin-top: 4px;
}
.catchup-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.catchup-actions button {
  padding: 7px 16px;
  border-radius: 9999px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.catchup-actions button:active { transform: scale(0.95); }
.catchup-btn-primary {
  background: var(--terracotta, #e88e3c);
  color: #fff;
}
.catchup-btn-secondary {
  background: transparent;
  color: var(--ink-soft, #718096);
  border: 1.5px solid var(--rule, #efe5d4) !important;
}
.catchup-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.06);
  color: var(--ink-faint, #a0aec0);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease;
}
.catchup-close:hover { background: rgba(0,0,0,0.12); }

/* Dark mode adjustments */
html[data-dark="1"] .catchup-banner {
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  border-color: var(--terracotta, #e88e3c);
}
html[data-dark="1"] .catchup-close { background: rgba(255,255,255,0.08); }

/* === Aha-moment screen ========================================= */
.aha-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  animation: aha-bg-in 0.3s ease both;
}
@keyframes aha-bg-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.aha-overlay--out {
  animation: aha-bg-out 0.28s ease both;
}
@keyframes aha-bg-out {
  to { opacity: 0; }
}
.aha-screen {
  background: var(--card, #fff);
  width: 100%;
  max-width: 480px;
  border-radius: 24px 24px 0 0;
  padding: 32px 20px 28px;
  max-height: 94dvh;
  overflow-y: auto;
  animation: aha-screen-in 0.42s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}
@keyframes aha-screen-in {
  from { transform: translateY(60px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.aha-overlay--out .aha-screen {
  animation: aha-screen-out 0.25s ease both;
}
@keyframes aha-screen-out {
  to { transform: translateY(60px); opacity: 0; }
}
.aha-header {
  text-align: center;
  margin-bottom: 24px;
}
.aha-emoji {
  font-size: 40px;
  margin-bottom: 10px;
  line-height: 1;
}
.aha-title {
  font-family: var(--font-accent);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink, #2d3748);
  line-height: 1.35;
  margin: 0 0 6px;
}
.aha-subtitle {
  font-size: 13px;
  color: var(--ink-faint, #a0aec0);
  margin: 0;
}

/* Insight cards */
.aha-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}
.aha-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--paper, #fdfaf6);
  border-radius: var(--r-card, 14px);
  padding: 14px 16px;
  border: 1px solid var(--rule, #efe5d4);
  opacity: 0;
  transform: translateY(12px);
  animation: aha-card-in 0.4s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}
@keyframes aha-card-in {
  to { opacity: 1; transform: translateY(0); }
}
.aha-card-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.aha-card-text { flex: 1; min-width: 0; }
.aha-card-title {
  font-family: var(--font-accent);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink, #2d3748);
  line-height: 1.3;
  margin-bottom: 3px;
}
.aha-card-detail {
  font-size: 12.5px;
  color: var(--ink-soft, #718096);
  line-height: 1.4;
}

/* Footer */
.aha-footer { text-align: center; }
.aha-cta {
  width: 100%;
  padding: 14px;
  background: var(--terracotta, #e88e3c);
  color: #fff;
  border: none;
  border-radius: 9999px;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-accent);
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.12s ease;
  margin-bottom: 8px;
}
.aha-cta:active { transform: scale(0.97); opacity: 0.9; }
.aha-note {
  font-size: 12px;
  color: var(--ink-faint, #a0aec0);
  margin: 0;
}

/* Dark mode */
html[data-dark="1"] .aha-screen {
  background: var(--card, #16213e);
}
html[data-dark="1"] .aha-card {
  background: var(--paper-deep, #0d1829);
  border-color: var(--rule, #1e3050);
}

/* Misc utilities */
.hidden { display: none !important; }
.dotted-divider {
  border: none;
  border-top: 1px dashed var(--rule);
  margin: 14px 0;
}


/* ===================================================================
   v1.1 — Voice + Scanner + Frequency + Forecast + Recurring
   =================================================================== */


/* === Voice button (mic in add modal label) ====================== */
.add-amount-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.voice-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--terracotta-soft);
  color: var(--terracotta);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  transition: transform 0.15s ease, background 0.2s;
}
.voice-btn:active { transform: scale(0.92); background: var(--terracotta); color: white; }


/* === Voice listening overlay ==================================== */
.voice-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(20, 14, 8, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: voice-fade-in 0.2s ease;
}
@keyframes voice-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.voice-stage {
  background: var(--card);
  border-radius: 28px;
  padding: 32px 28px 24px;
  max-width: 320px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.5);
}

.mic-pulse {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--terracotta) 0%, #d06b48 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  position: relative;
  animation: mic-breathe 1.6s infinite ease-in-out;
}
.mic-pulse::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 3px solid var(--terracotta);
  opacity: 0.4;
  animation: mic-ring 1.6s infinite ease-out;
}
@keyframes mic-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@keyframes mic-ring {
  0% { transform: scale(0.95); opacity: 0.55; }
  100% { transform: scale(1.4); opacity: 0; }
}

.voice-prompt {
  font-family: var(--font-accent);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 12px;
}
.voice-transcript {
  min-height: 26px;
  font-size: 15px;
  color: var(--ink);
  margin: 8px 0;
  padding: 10px 14px;
  background: var(--rule-soft);
  border-radius: 12px;
  word-break: break-word;
}
.voice-transcript:empty { background: transparent; min-height: 0; padding: 0; }

.voice-hint {
  font-family: 'Noto Sans Thai', sans-serif;
  font-size: 12px;
  color: var(--ink-faint);
  margin: 14px 0 18px;
  line-height: 1.6;
}
.voice-hint em {
  background: var(--rule-soft);
  padding: 1px 6px;
  border-radius: 6px;
  margin: 0 2px;
}
.voice-cancel {
  background: var(--rule-soft);
  color: var(--ink-soft);
  padding: 10px 24px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
}


/* === Scanner modal (live camera) ================================ */
.scanner-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #0a0a0a;
  display: flex;
  flex-direction: column;
}
.scanner-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0.55);
  position: relative;
  z-index: 2;
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
}
.scanner-close {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scanner-title {
  font-family: var(--font-accent);
  font-size: 18px;
  font-weight: 600;
  color: white;
}
.scanner-manual {
  color: white;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: transparent;
}

.scanner-stage {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #111;
}
.scanner-stage video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scanner-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  aspect-ratio: 1;
  max-width: 280px;
  pointer-events: none;
}
.scanner-frame .corner {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 4px solid var(--terracotta);
}
.corner.tl { top: 0; left: 0; border-right: none; border-bottom: none; border-top-left-radius: 8px; }
.corner.tr { top: 0; right: 0; border-left: none; border-bottom: none; border-top-right-radius: 8px; }
.corner.bl { bottom: 0; left: 0; border-right: none; border-top: none; border-bottom-left-radius: 8px; }
.corner.br { bottom: 0; right: 0; border-left: none; border-top: none; border-bottom-right-radius: 8px; }

.scanner-status {
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 14px 24px;
  text-align: center;
  font-size: 14px;
  position: relative;
  z-index: 2;
}
.scanner-hint {
  background: rgba(0, 0, 0, 0.85);
  color: rgba(255, 255, 255, 0.7);
  padding: 12px 24px calc(20px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-size: 11px;
  line-height: 1.6;
  position: relative;
  z-index: 2;
}
.scanner-hint em {
  font-family: 'Noto Sans Thai', sans-serif;
  color: rgba(255, 255, 255, 0.85);
}


/* === Frequency picker (add modal) =============================== */
.freq-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 2px 0;
}
.freq-opt {
  padding: 10px 4px;
  border-radius: 12px;
  background: var(--card);
  border: 1.5px solid var(--rule);
  font-size: 11px;
  color: var(--ink-soft);
  font-weight: 500;
  text-align: center;
  transition: all 0.15s;
  line-height: 1.2;
}
.freq-opt.active {
  background: var(--terracotta-soft);
  border-color: var(--terracotta);
  color: var(--terracotta);
  font-weight: 600;
}

.freq-detail {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--rule-soft);
  border-radius: 12px;
}
.freq-detail label {
  display: block;
  font-size: 11px;
  color: var(--ink-soft);
  margin-bottom: 4px;
  margin-top: 10px;
}
.freq-detail label:first-child { margin-top: 0; }
.freq-detail input[type="date"] {
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--rule);
  background: var(--card);
  font: inherit;
  color: var(--ink);
  font-size: 14px;
  outline: none;
}
.freq-detail input[type="date"]:focus { border-color: var(--terracotta); }
.freq-hint {
  margin-top: 10px;
  font-size: 12px;
  font-family: 'Noto Sans Thai', sans-serif;
  color: var(--ink-soft);
  line-height: 1.5;
}
.freq-hint strong {
  color: var(--ink);
  font-family: 'Sarabun', sans-serif;
  font-style: normal;
  font-weight: 600;
}

.installment-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 8px 0;
}
.install-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--card);
  border: 1.5px solid var(--rule);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.install-btn:active { transform: scale(0.92); background: var(--terracotta-soft); }
.install-val {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  min-width: 90px;
  text-align: center;
}


/* === Forecast Card (Chart.js) ================================== */
.forecast-card { padding: 16px; overflow: hidden; }

.forecast-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.forecast-stat {
  background: var(--paper);
  border-radius: 10px;
  padding: 8px 10px;
  border: 0.5px solid var(--rule);
}
.forecast-stat-label { font-size: 11px; color: var(--ink-faint); margin-bottom: 2px; }
.forecast-stat-value { font-size: 14px; font-weight: 600; color: var(--ink); }
.forecast-stat-value.ok     { color: var(--sage); }
.forecast-stat-value.danger { color: #A32D2D; }

.forecast-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 11px;
  color: var(--ink-faint);
}
.fl-item { display: flex; align-items: center; gap: 4px; }
.fl-line { width: 14px; height: 2px; border-radius: 1px; }
.fl-line.primary { background: var(--terracotta); }
.fl-dash { width: 14px; height: 0; }
.fl-dash.danger { border-top: 2px dashed #A32D2D; }
.fl-dot { width: 8px; height: 8px; border-radius: 50%; }
.fl-dot.primary { background: var(--terracotta); }
.fl-dot.danger  { background: #A32D2D; }

.forecast-chart-wrap {
  position: relative;
  height: 200px;
  overflow: hidden;
  margin-bottom: 10px;
}
.forecast-chart-wrap canvas { display: block; max-width: 100%; }

.forecast-warning {
  font-size: 12px;
  color: #A32D2D;
  background: rgba(163, 45, 45, 0.08);
  border-radius: 8px;
  padding: 7px 10px;
  margin-bottom: 10px;
}

.forecast-note {
  padding: 8px 10px;
  background: var(--paper);
  border-left: 2px solid var(--rule);
  border-radius: 0 8px 8px 0;
}
.forecast-note-text {
  font-size: 11px;
  color: var(--ink-faint);
  line-height: 1.6;
}
.forecast-note-text b { color: var(--ink-soft); font-weight: 500; }


/* === Forecast insight (under chart) ============================ */
.forecast-insight {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--rule-soft);
}
.forecast-insight svg {
  flex-shrink: 0;
  margin-top: 1px;
}
.forecast-insight.warn {
  background: rgba(217, 107, 94, 0.1);
  color: var(--clay);
}
.forecast-insight.warn svg { color: var(--clay); }
.forecast-insight.good {
  background: var(--sage-soft);
  color: #4a6b45;
}
.forecast-insight.good svg { color: var(--sage); }
.forecast-insight strong { font-weight: 600; }


/* === Recurring section (in Settings) =========================== */
.recur-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.template-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px dotted var(--rule);
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.12s;
}
.template-row:active { background: var(--accent-soft); }
.template-row:last-child { border-bottom: none; }
.template-body { min-width: 0; }
.template-del {
  margin-top: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--rule-soft);
  color: var(--ink-faint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.template-del:active { background: var(--clay-soft); color: var(--clay); }
.install-tag {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--terracotta-soft);
  color: var(--terracotta);
  margin-left: 6px;
  font-weight: 500;
  vertical-align: middle;
}

.entry.upcoming { opacity: 0.92; }

/* Demo badge — แสดงบน รายการ/บัญชี/รายการล่วงหน้า ที่เป็นข้อมูลตัวอย่าง */
.demo-tag {
  display: inline-block;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--rule, #efe5d4);
  color: var(--ink-faint, #718096);
  margin-left: 5px;
  font-weight: 500;
  vertical-align: middle;
  letter-spacing: 0.02em;
}

/* ไม่นับสรุป badge */
.excl-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(113, 128, 150, 0.12);
  color: var(--ink-faint, #718096);
  margin-left: 5px;
  font-weight: 500;
  vertical-align: middle;
  letter-spacing: 0.02em;
}


/* === PDF import progress modal ================================= */
.import-progress {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(253, 249, 240, 0.95);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.import-progress-card {
  background: var(--card);
  border-radius: 20px;
  padding: 28px 24px;
  max-width: 320px;
  width: 100%;
  text-align: center;
  box-shadow: 0 16px 40px -12px rgba(60, 40, 20, 0.25);
}
.import-progress .title {
  font-family: var(--font-accent);
  font-size: 19px;
  color: var(--ink);
  margin-bottom: 6px;
}
.import-progress .step {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 16px;
  min-height: 18px;
}
.import-progress .bar {
  height: 6px;
  background: var(--rule-soft);
  border-radius: 999px;
  overflow: hidden;
}
.import-progress .bar-fill {
  height: 100%;
  background: var(--terracotta);
  transition: width 0.3s ease;
  border-radius: 999px;
}


/* === Import review screen (after PDF parse) ==================== */
.review-modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--paper);
  display: flex;
  flex-direction: column;
}
.review-header {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--rule);
}
.review-title {
  font-family: var(--font-accent);
  font-size: 22px;
  color: var(--ink);
}
.review-sub {
  font-family: 'Noto Sans Thai', sans-serif;
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 4px;
}
.review-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 20px 80px;
}
.review-footer {
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--rule);
  display: flex;
  gap: 10px;
  background: var(--paper);
}
.review-footer button {
  flex: 1;
  padding: 12px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
}
.review-footer .cancel {
  background: var(--rule-soft);
  color: var(--ink-soft);
}
.review-footer .confirm {
  background: var(--terracotta);
  color: white;
  box-shadow: 0 4px 12px -4px rgba(232, 133, 99, 0.55);
}
.review-footer .confirm:disabled {
  background: var(--rule);
  color: var(--ink-faint);
  box-shadow: none;
}

/* แถบเตือนรายการซ้ำในหัว review */
.review-dup-warn {
  margin-top: 8px;
  padding: 8px 12px;
  background: #fff8e1;
  color: #7a5c00;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.4;
}
html[data-theme="pro"] .review-dup-warn {
  background: #fdf6dc;
  color: #5a4000;
}

/* Select-all row */
.review-select-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px 10px;
}
.review-select-all-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
}
.review-select-all-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--terracotta);
  cursor: pointer;
}
.review-sel-count {
  font-size: 12px;
  color: var(--ink-faint);
}

/* Review row ที่มี checkbox */
.review-entry {
  display: grid;
  grid-template-columns: 20px 32px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}
.review-entry + .review-entry {
  border-top: 1px solid var(--rule-soft);
}
.review-check {
  width: 16px;
  height: 16px;
  accent-color: var(--terracotta);
  cursor: pointer;
  flex-shrink: 0;
}
.review-entry-info {
  min-width: 0;
}
.review-entry-info .entry-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

/* row ที่สงสัยซ้ำ — highlight อ่อนๆ */
.entry--dup-warn {
  opacity: 0.65;
}

/* Comparison row — แสดงรายการเดิมที่คาดซ้ำ */
.dup-compare-row {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding: 7px 10px;
  background: #fff8e0;
  border: 1px solid #f0d878;
  border-radius: 8px;
  font-size: 12px;
}
html[data-dark="1"] .dup-compare-row {
  background: #2a2208;
  border-color: #4a3c10;
}
.dup-compare-label {
  font-size: 10px;
  font-weight: 600;
  color: #7a5c00;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
html[data-dark="1"] .dup-compare-label { color: #c0a030; }
.dup-compare-body {
  display: flex;
  align-items: center;
  gap: 7px;
}
.dup-compare-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.85;
}
.dup-compare-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.dup-compare-desc {
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dup-compare-date {
  color: var(--ink-faint);
  font-size: 11px;
}
.dup-compare-amt {
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink-soft);
}
.dup-compare-amt.income  { color: var(--sage); }
.dup-compare-amt.transfer { color: var(--dust-blue); }

/* badge "อาจซ้ำ" และ "→ เงินสด" */
.dup-badge,
.atm-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.6;
}
.dup-badge {
  background: #fff0c2;
  color: #7a5c00;
}
.atm-badge {
  background: #e8f4fd;
  color: #2a6fa8;
}
html[data-theme="pro"] .dup-badge {
  background: #fdf6dc;
  color: #5a4000;
}
html[data-theme="pro"] .atm-badge {
  background: #d4e2f0;
  color: #1a3a5c;
}

/* Duplicate dialog overlay (แทน confirm bar เดิม) */
.dup-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeIn 0.15s;
}
.dup-dialog {
  background: var(--surface, #fff);
  border-radius: 16px;
  padding: 20px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
.dup-dialog-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
}
.dup-dialog-body {
  background: var(--accent-soft, #fef3e7);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.dup-dialog-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-faint);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.dup-dialog-match {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.4;
}
.dup-dialog-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dup-btn {
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: background 0.1s;
}
.dup-btn-keep {
  background: var(--primary, #e88e3c);
  color: white;
}
.dup-btn-merge {
  background: var(--rule, #efe5d4);
  color: var(--ink);
}
.dup-btn-skip {
  background: transparent;
  color: var(--ink-faint);
  font-weight: 500;
}
.dup-btn-keep:active  { opacity: 0.85; }
.dup-btn-merge:active { background: #e0d4c0; }
.dup-btn-skip:active  { color: var(--ink); }
html[data-dark="1"] .dup-dialog {
  background: #1e2235;
}
html[data-dark="1"] .dup-dialog-body {
  background: #2a2820;
}
html[data-dark="1"] .dup-btn-merge {
  background: #2d2d3a;
  color: var(--ink);
}

/* Duplicate confirm bar ใน add modal (legacy — kept for reference) */
.dup-confirm {
  margin: 0 16px 4px;
  padding: 12px 14px;
  background: #fff8e1;
  border: 1px solid #f0d060;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
html[data-theme="pro"] .dup-confirm {
  background: #fdf6dc;
  border-color: #d4b830;
}
.dup-confirm-msg {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #5a4400;
  line-height: 1.4;
}
.dup-confirm-msg svg {
  flex-shrink: 0;
  color: #c08010;
}
.dup-confirm-btns {
  display: flex;
  gap: 8px;
}
.dup-btn-cancel,
.dup-btn-save {
  flex: 1;
  padding: 9px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}
.dup-btn-cancel {
  background: var(--rule-soft);
  color: var(--ink-soft);
}
.dup-btn-save {
  background: var(--terracotta);
  color: white;
}


/* ===================================================================
   Pro theme — Bloomberg/editorial, navy, sharp
   สลับได้ใน Settings → data-theme="pro" บน <html>
   =================================================================== */
html[data-theme="pro"] {
  --paper:             #f6f3ec;
  --paper-deep:        #ece8dc;
  --card:              #ffffff;
  --ink:               #0e1a26;
  --ink-soft:          #3d5166;
  --ink-faint:         #6b8099;
  --rule:              #d4cebb;
  --rule-soft:         #e0d9cc;

  --terracotta:        #1a3a5c;
  --terracotta-soft:   #d4e2f0;
  --sage:              #4a7c4f;
  --sage-soft:         #d0e6d2;
  --clay:              #b03a2e;
  --clay-soft:         #f0d4d0;
  --mocha:             #5a7a5a;
  --dust-blue:         #2e6699;
  --dust-blue-soft:    #d0e4f4;
  --plum:              #6a4a8a;
  --honey:             #b8860b;

  --r-card:            2px;
}

html[data-theme="pro"] .fab {
  background: linear-gradient(135deg, #1a3a5c 0%, #0e2540 100%);
  box-shadow: 0 6px 18px -4px rgba(26, 58, 92, 0.45), 0 2px 4px rgba(0,0,0,0.12);
}

html[data-theme="pro"] .hero::before {
  background: var(--ink-soft);
}

html[data-theme="pro"] .add-save {
  background: var(--terracotta);
  box-shadow: 0 4px 12px -4px rgba(26, 58, 92, 0.4);
}


/* ===================================================================
   Color themes — Ocean / Forest / Rose / Slate / Citrus / Violet
   สลับได้ใน Settings → data-theme บน <html>
   =================================================================== */
html[data-theme="ocean"] {
  --terracotta:      #2e86c1;
  --terracotta-soft: #d4eaf8;
  --paper:           #f0f8ff;
  --paper-deep:      #dcedf8;
}
html[data-theme="ocean"] .fab {
  background: linear-gradient(135deg, #2e86c1 0%, #1a6ea8 100%);
}
html[data-theme="ocean"] .hero::before { background: #2e86c1; }
html[data-theme="ocean"] .add-save { background: #2e86c1; }

html[data-theme="forest"] {
  --terracotta:      #27ae60;
  --terracotta-soft: #d4ecd8;
  --paper:           #f0faf2;
  --paper-deep:      #dceee0;
}
html[data-theme="forest"] .fab {
  background: linear-gradient(135deg, #27ae60 0%, #1a9050 100%);
}
html[data-theme="forest"] .hero::before { background: #27ae60; }
html[data-theme="forest"] .add-save { background: #27ae60; }

html[data-theme="rose"] {
  --terracotta:      #e06880;
  --terracotta-soft: #fde0e7;
  --paper:           #fff5f7;
  --paper-deep:      #fde8ec;
}
html[data-theme="rose"] .fab {
  background: linear-gradient(135deg, #e06880 0%, #c8506a 100%);
}
html[data-theme="rose"] .hero::before { background: #e06880; }
html[data-theme="rose"] .add-save { background: #e06880; }

html[data-theme="citrus"] {
  --terracotta:      #d4880e;
  --terracotta-soft: #fce8c8;
  --paper:           #fffbf0;
  --paper-deep:      #fdf3d8;
}
html[data-theme="citrus"] .fab {
  background: linear-gradient(135deg, #d4880e 0%, #b87208 100%);
}
html[data-theme="citrus"] .hero::before { background: #d4880e; }
html[data-theme="citrus"] .add-save { background: #d4880e; }

html[data-theme="violet"] {
  --terracotta:      #7c5cbf;
  --terracotta-soft: #e8dff8;
  --paper:           #f8f5ff;
  --paper-deep:      #ede8f8;
}
html[data-theme="violet"] .fab {
  background: linear-gradient(135deg, #7c5cbf 0%, #6344a8 100%);
}
html[data-theme="violet"] .hero::before { background: #7c5cbf; }
html[data-theme="violet"] .add-save { background: #7c5cbf; }

/* Carbon — ธีม smart/precision: น้ำเงินกรมท่า, พื้นหลังเย็น, เส้นคม, ฟอนท์ Noto Sans Thai */
html[data-theme="carbon"] {
  --terracotta:      #1e3a72;   /* น้ำเงินกรมท่า — primary action */
  --terracotta-soft: #d3ddf0;
  --paper:           #f1f4f9;
  --paper-deep:      #e4e9f2;
  --card:            #ffffff;
  --ink:             #0f172a;
  --ink-soft:        #334155;
  --ink-faint:       #64748b;
  --rule:            #e2e8f0;
  --rule-soft:       #f1f5f9;
  --mocha:           #475569;   /* neutral accent */
  /* Semantic colors — ใช้ตรงๆ เพื่อให้ตัวเลขสื่อความหมายเหมือนธีมอื่น */
  --clay:            #dc2626;   /* expense (= --expense) — แดงชัด */
  --clay-soft:       #fee2e2;
  --sage:            #059669;   /* income — เขียวสด readable บนพื้นเย็น */
  --sage-soft:       #d1fae5;
  --dust-blue:       #3b82f6;   /* transfer — น้ำเงินสด เข้ากับ Carbon */
  --dust-blue-soft:  #dbeafe;
  --income:          #059669;   /* align กับ --sage */
  --expense:         #dc2626;   /* align กับ --clay */
  --r-card:          10px;
  /* ฟอนท์ Noto Sans Thai แทน Mali ทุกจุดใน Carbon theme */
  --font-accent:     'Noto Sans Thai', sans-serif;
}
/* ลบ paper texture — carbon ใช้พื้นสะอาด */
html[data-theme="carbon"],
html[data-theme="carbon"] body { background-image: none; }
/* ลบ diary decorations — ไม่เข้ากับ precision aesthetic */
html[data-theme="carbon"] .squiggle,
html[data-theme="carbon"] .page-sub { display: none; }
html[data-theme="carbon"] .fab {
  background: linear-gradient(135deg, #1e3a72 0%, #122452 100%);
}
html[data-theme="carbon"] .hero::before { background: #1e3a72; }
html[data-theme="carbon"] .add-save { background: #1e3a72; }
html[data-theme="carbon"] .card {
  box-shadow: 0 1px 3px rgba(15,23,42,0.08), 0 0 0 1px rgba(15,23,42,0.05);
}
/* tabular-nums สำหรับตัวเลขการเงิน */
html[data-theme="carbon"] .hero-amount,
html[data-theme="carbon"] .acct-balance,
html[data-theme="carbon"] .stat-val {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
html[data-theme="carbon"] .entry-amount {
  font-variant-numeric: tabular-nums;
}
html[data-theme="carbon"] .nav-item.active { color: #1e3a72; }
html[data-theme="carbon"] .nav-item.active svg { stroke: #1e3a72; }
html[data-theme="carbon"] .chip.active {
  background: #1e3a72;
  border-color: #1e3a72;
  color: #fff;
}
html[data-theme="carbon"] .seg-item.active {
  background: #1e3a72;
  color: #fff;
}
html[data-theme="carbon"] .type-btn.active[data-type="expense"] {
  background: var(--expense); border-color: var(--expense);
}
html[data-theme="carbon"] .type-btn.active[data-type="income"] {
  background: var(--income);  border-color: var(--income);
}
html[data-theme="carbon"] .type-btn.active {
  background: #1e3a72; border-color: #1e3a72;
}

/* Carbon + Dark mode — cool dark palette แทน warm dark ของ default */
html[data-theme="carbon"][data-dark="1"] {
  --paper:           #0d1829;
  --paper-deep:      #08101e;
  --card:            #162340;
  --ink:             #e2e8f5;
  --ink-soft:        #94a8c4;
  --ink-faint:       #5a7499;
  --rule:            #1e3050;
  --rule-soft:       #162340;
  --terracotta-soft: #1a2e50;
  --mocha:           #7a9abf;
  /* Semantic colors — สว่างขึ้นสำหรับ dark bg */
  --clay:            #f87171;   /* expense — แดงอ่อนบน dark */
  --clay-soft:       rgba(248, 113, 113, 0.12);
  --sage:            #34d399;   /* income — เขียวมิ้นต์บน dark */
  --sage-soft:       rgba(52, 211, 153, 0.12);
  --dust-blue:       #60a5fa;   /* transfer — ฟ้าสว่างบน dark */
  --dust-blue-soft:  rgba(96, 165, 250, 0.12);
  --income:          #34d399;
  --expense:         #f87171;
}
html[data-theme="carbon"][data-dark="1"] .card {
  box-shadow: none;
  border: 1px solid rgba(255,255,255,0.07);
}
html[data-theme="carbon"][data-dark="1"] .bottom-nav {
  background: #0d1829;
  border-top-color: #1e3050;
}
/* navy บน dark bg มืดเกินไป — ใช้ lighter navy accent แทน */
html[data-theme="carbon"][data-dark="1"] .nav-item.active { color: #7aa3d9; }
html[data-theme="carbon"][data-dark="1"] .nav-item.active svg { stroke: #7aa3d9; }
html[data-theme="carbon"][data-dark="1"] .chip.active {
  background: #2a4e8c;
  border-color: #2a4e8c;
  color: #e2e8f5;
}
html[data-theme="carbon"][data-dark="1"] .seg-item.active {
  background: #2a4e8c;
  color: #e2e8f5;
}
html[data-theme="carbon"][data-dark="1"] .add-save { background: #2a4e8c; }
html[data-theme="carbon"][data-dark="1"] .fab {
  background: linear-gradient(135deg, #2a4e8c 0%, #1e3a72 100%);
}
html[data-theme="carbon"][data-dark="1"] .hero::before { background: #1e3a72; }
html[data-theme="carbon"][data-dark="1"] .setting-seg-btn.active {
  background: #2a4e8c;
  border-color: #2a4e8c;
}
html[data-theme="carbon"][data-dark="1"] .type-btn.active {
  background: #2a4e8c;
  border-color: #2a4e8c;
}


/* ===================================================================
   Dark mode — data-dark="1" บน <html>
   =================================================================== */
html[data-dark="1"] {
  --paper:        #1a1510;
  --paper-deep:   #110e08;
  --card:         #252018;
  --ink:          #f0ede8;
  --ink-soft:     #c0a898;
  --ink-faint:    #806858;
  --rule:         #3a2d20;
  --rule-soft:    #2d2418;
  --terracotta-soft: #3d2818;
  --sage-soft:    #1a2e1a;
  --clay-soft:    #2e1818;
  --dust-blue-soft: #182030;
}
html[data-dark="1"],
html[data-dark="1"] body {
  background-image: none;
}
html[data-dark="1"] .card { box-shadow: none; border: 1px solid var(--rule); }
html[data-dark="1"] .bottom-nav { border-top-color: var(--rule); }
/* .toast ใช้ glassmorphism — ทำงานบน dark mode โดยไม่ต้อง override */
html[data-dark="1"] .setting-seg-btn.active {
  background: var(--terracotta);
  border-color: var(--terracotta);
}
html[data-dark="1"] .seg-item {
  color: var(--ink-soft);
}
html[data-dark="1"] .seg-item.active {
  background: rgba(255, 255, 255, 0.18);
  box-shadow: none;
  color: var(--ink);
}
html[data-dark="1"] .seg-item.active[data-type="expense"] { color: var(--clay); }
html[data-dark="1"] .seg-item.active[data-type="income"]  { color: var(--sage); }
html[data-dark="1"] .seg-item.active[data-type="transfer"]{ color: var(--dust-blue); }

/* filter chips (ทั้งหมด/รายจ่าย/รายรับ/โอน) — ใน dark mode --ink เป็นขาวครีม
   ทำให้ active chip ได้อักษรขาวบนพื้นขาว → ใช้ terracotta แทน */
html[data-dark="1"] .chip {
  background: var(--card);
  border-color: var(--rule);
  color: var(--ink-soft);
}
html[data-dark="1"] .chip-amt { color: var(--ink-faint); }
html[data-dark="1"] .chip.active {
  background: var(--terracotta);
  color: white;
  border-color: var(--terracotta);
}
html[data-dark="1"] .chip.active .chip-label { color: white; }
html[data-dark="1"] .chip.active .chip-amt   { color: rgba(255,255,255,0.7); }


/* ===================================================================
   Auth badge — สถานะการลงชื่อเข้าใช้ มุมขวาบน (fixed, persistent)
   =================================================================== */
.auth-badge {
  position: fixed;
  top: 12px;
  right: 14px;
  z-index: 120;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.auth-badge:active { transform: scale(0.92); }

/* ยังไม่ได้ลงชื่อ — วงกลมเส้นประ สีเทา */
.auth-badge.signed-out {
  background: var(--rule);
  color: var(--ink-faint);
  border: 1.5px dashed var(--ink-faint);
}
.auth-badge.signed-out svg {
  width: 16px; height: 16px;
  stroke: var(--ink-faint); stroke-width: 1.8;
  fill: none;
}

/* ลงชื่อแล้ว — วงกลมสีพร้อม initials */
.auth-badge.signed-in {
  background: var(--sage);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

/* dark mode */
html[data-dark="1"] .auth-badge.signed-out {
  background: var(--card);
  border-color: var(--ink-faint);
}

/* Carbon dark mode */
html[data-theme="carbon"][data-dark="1"] .auth-badge.signed-in {
  background: #2a4e8c;
}

/* ซ่อน badge เมื่อ modal เปิด — modal และ badge เป็น sibling ใน #app */
.modal:not(.hidden) ~ .auth-badge {
  display: none;
}


/* ===================================================================
   Entry row — action buttons (edit / delete)
   =================================================================== */
.entry-body {
  min-width: 0;
}

.entry-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.entry-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.18s;
}

.entry:hover .entry-actions,
.entry:focus-within .entry-actions {
  opacity: 1;
}

/* Mobile — ซ่อน inline buttons; ใช้ swipe panel แทน */
@media (hover: none) {
  .entry-actions { display: none !important; }
}

.entry-action-btn {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  background: transparent;
  transition: background 0.15s, color 0.15s;
}
.entry-action-btn:active,
.entry-action-btn:hover { background: var(--rule-soft); color: var(--ink-soft); }
.entry-action-btn.del:active,
.entry-action-btn.del:hover { background: var(--clay-soft); color: var(--clay); }


/* ===================================================================
   Settings — theme + text-size controls
   =================================================================== */
.setting-segment {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.setting-seg-btn {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--rule-soft);
  border: 1.5px solid var(--rule);
  transition: all 0.15s;
  flex-shrink: 0;          /* ปุ่มไม่ถูกบีบจนข้อความล้นทับคอลัมน์ซ้าย */
  white-space: nowrap;
}
.setting-seg-btn.active {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
}
.setting-seg-btn:active { transform: scale(0.94); }
.setting-seg-btn:disabled { opacity: 0.65; }
.badge-shared {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--income);
  color: white;
  margin-left: 6px;
  vertical-align: middle;
}
.setting-action-btn {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1.5px solid var(--clay);
  color: var(--clay);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}

html[data-dark="1"] .entry-acct-line {
  color: var(--ink-faint);
}

/* Soft-deleted transaction row (บัญชีแชร์ ขั้นที่ 1) */
.entry-author {
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: 1px;
}
/* รายการที่ soft-delete: จางเฉพาะเนื้อหา แต่ปุ่มลบถาวรยังกดได้ชัดเจน
   (ฝ่ายที่สองกดเพื่อ hard delete ให้หายจริง) */
.entry-deleted .entry-time,
.entry-deleted .entry-icon,
.entry-deleted .entry-body,
.entry-deleted .entry-amt {
  opacity: 0.4;
}
.entry-deleted .entry-amt {
  text-decoration: line-through;
}
/* Desktop: always show delete button on soft-deleted rows */
@media (hover: hover) {
  .entry-deleted .entry-actions {
    display: flex;
    opacity: 1;
  }
}


/* ===================================================================
   Appearance settings redesign — swatches / size buttons / toggle
   =================================================================== */
.appear-block {
  padding: 14px 18px 16px;
  border-bottom: 1px dotted var(--rule);
}
.appear-block:last-child { border-bottom: none; }
.appear-block-label {
  font-size: 10px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-bottom: 12px;
}

/* Theme swatches */
.theme-swatches {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 8px;
}
.swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--sw-color, #ccc);
  border: 2.5px solid transparent;
  outline: 3px solid transparent;
  outline-offset: 2px;
  transition: transform 0.15s, outline-color 0.15s;
  position: relative;
  cursor: pointer;
}
.swatch:active { transform: scale(0.88); }
.swatch.active {
  outline-color: var(--ink);
  transform: scale(1.08);
}
.swatch.active::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 13px;
  font-weight: 800;
  text-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.theme-cur-name {
  font-size: var(--ts-xs);
  color: var(--ink-soft);
  font-style: italic;
}

/* Text-size picker */
.text-size-picker {
  display: flex;
  gap: 6px;
}
.size-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 0.5px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font-family: 'Sarabun', sans-serif;
  transition: all 0.15s;
}
.size-btn.active {
  background: var(--terracotta);
  color: white;
  border-color: transparent;
}
.size-btn:active { transform: scale(0.95); }

/* iOS-style toggle switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
  flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--rule);
  border-radius: 999px;
  transition: background 0.2s;
  cursor: pointer;
}
.toggle-slider::before {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  left: 3px;
  top: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.toggle-switch input:checked + .toggle-slider { background: var(--terracotta); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }

/* Dark mode toggle row */
.dark-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px dotted var(--rule);
}
.dark-toggle-row .setting-label { margin: 0; }


/* ===================================================================
   Category Manager
   =================================================================== */

.cat-manager-overlay {
  z-index: 900;
  background: none;
}
.cat-manager {
  background: var(--paper);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cat-manager-head {
  display: flex;
  align-items: center;
  padding: 14px 16px calc(14px + env(safe-area-inset-top, 0px));
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  gap: 8px;
}
.cat-manager-back {
  background: none;
  border: none;
  padding: 6px;
  color: var(--ink);
  display: flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.cat-manager-title {
  flex: 1;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.cat-manager-add {
  background: var(--primary);
  border: none;
  padding: 7px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.cat-manager-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.cat-section-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.cat-add-hint {
  font-size: 11px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.cat-empty {
  text-align: center;
  color: var(--ink-faint);
  font-size: 14px;
  padding: 24px 0;
  line-height: 1.6;
}

/* Category grid — 4 columns */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 8px;
}
.cat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  position: relative;
  padding-bottom: 2px;
}
.cat-item--builtin {
  pointer-events: none;
}
.cat-item-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.cat-item-label {
  font-size: 11px;
  color: var(--ink);
  text-align: center;
  line-height: 1.3;
  word-break: break-all;
  max-width: 100%;
}
.cat-item-actions {
  display: flex;
  gap: 2px;
  position: absolute;
  top: -4px;
  right: -4px;
}
.cat-item-edit,
.cat-item-del {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 3px;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  cursor: pointer;
  line-height: 1;
}
.cat-item-del { color: var(--clay); }

/* Edit modal */
.cat-edit-overlay {
  z-index: 1000;
  align-items: flex-end;
}
.cat-edit-modal {
  max-height: 90vh;
}

/* Icon picker grid — 5 columns */
.cat-icon-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 6px 0;
}
.cat-icon-btn {
  background: var(--rule-soft, rgba(0,0,0,0.04));
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink);
  transition: border-color 0.1s;
  aspect-ratio: 1;
}
.cat-icon-btn.active {
  border-color: var(--primary);
  background: var(--accent-soft);
  color: var(--primary);
}

/* Color picker row */
.cat-color-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}
.cat-color-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: border-color 0.1s, transform 0.1s;
  outline: none;
}
.cat-color-btn.active {
  border-color: var(--ink);
  transform: scale(1.15);
}

/* Category preview */
.cat-preview-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.cat-preview-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

/* Type selector */
.cat-type-seg {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
}
.cat-type-btn {
  flex: 1;
  padding: 8px 4px;
  border: 1.5px solid var(--rule);
  border-radius: 10px;
  background: none;
  font-size: 13px;
  color: var(--ink-faint);
  cursor: pointer;
  transition: all 0.1s;
}
.cat-type-btn.active {
  border-color: var(--primary);
  background: var(--accent-soft);
  color: var(--primary);
  font-weight: 600;
}

/* Dark mode adjustments */
html[data-dark="1"] .cat-icon-btn {
  background: rgba(255,255,255,0.07);
  color: var(--ink);
}
html[data-dark="1"] .cat-icon-btn.active {
  background: rgba(var(--primary-rgb, 232,133,99), 0.2);
}
html[data-dark="1"] .cat-item-edit,
html[data-dark="1"] .cat-item-del {
  background: var(--card);
}