/* Baicha (ใบชา) design tokens + components. Source of truth: ../DESIGN.md */
:root{
  --primary:#317547;--primary-pressed:#1D613B;--on-primary:#FAFBF3;
  --surface:#F5F6F2;--raised:#FCFDFA;--sunken:#EBEEE8;--ink:#1B201A;--muted:#60655D;--border:#D9DCD5;
  --income:#2F683A;--deficit:#A53F26;--caution:#8C5E1A;
  --glass-rgb:252,253,250;--edge-hi:rgba(255,255,255,.5);--edge-lo:rgba(16,24,16,.10);--shadow:rgba(16,24,16,.12);
  --glass-a:.72;--blur:20px;
  --cat-food:#A5612E;--cat-travel:#3B719C;--cat-utility:#816D1C;--cat-shopping:#90557D;--cat-health:#107F7A;--cat-family:#705D93;--cat-income:#3C784B;--cat-other:#656B5F;
  --ease-sheet:cubic-bezier(.32,.72,0,1);
  /* motion tokens: one set for the whole app (see DESIGN.md > Motion) */
  --dur-press:120ms;   /* press, toggle, chip, check */
  --dur-fast:200ms;    /* fades, row collapse, header glass */
  --dur-tab:280ms;     /* tab switch, segmented knob, tab lens */
  --dur-push:380ms;    /* push to a sub page */
  --dur-pop:300ms;     /* back */
  --dur-sheet-in:420ms;--dur-sheet-out:260ms;
  --ease-standard:cubic-bezier(.2,0,0,1);   /* things that change in place */
  --ease-enter:cubic-bezier(.32,.72,0,1);   /* things arriving (iOS sheet/push curve) */
  --ease-exit:cubic-bezier(.4,0,1,1);       /* things leaving: accelerate away */
  --ease-pop:cubic-bezier(.34,1.56,.64,1);  /* confirmations only: check, save tick */
}
[data-theme=dark]{
  --primary:#7CC58C;--primary-pressed:#69B17E;--on-primary:#0C1A0F;
  --surface:#0F130F;--raised:#191D19;--sunken:#090C09;--ink:#E8EBE3;--muted:#A2A69D;--border:#2D322D;
  --income:#8BCD94;--deficit:#EE9781;--caution:#E5BA6F;
  --glass-rgb:25,29,25;--edge-hi:rgba(255,255,255,.12);--edge-lo:rgba(0,0,0,.40);--shadow:rgba(0,0,0,.40);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;font-family:Anuphan,"Sukhumvit Set",Thonburi,"Noto Sans Thai",system-ui,sans-serif;color:var(--ink);font-size:16px;line-height:1.6}
.tnum{font-variant-numeric:tabular-nums}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;line-height:1.45}
.muted{color:var(--muted)}
.lbl{font-size:13px;color:var(--muted);letter-spacing:.01em;line-height:1.45}
.glass{background:rgba(var(--glass-rgb),var(--glass-a));backdrop-filter:blur(var(--blur)) saturate(1.4);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.4);
  box-shadow:inset 0 1px 0 var(--edge-hi),0 0 0 1px var(--edge-lo),0 8px 24px var(--shadow)}
h1.large{font-size:30px;line-height:1.25;letter-spacing:-.02em;margin:6px 0 14px}
h2.sect{font-size:22px;line-height:1.3;letter-spacing:-.01em;margin:22px 4px 10px}
.card{background:var(--raised);border-radius:20px;padding:16px;margin-bottom:16px}
.card.list{padding:4px 16px}
.row{display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 0}
.card.list .row+.row{border-top:1px solid var(--border)}
.row .t{flex:1;min-width:0}
.row .t b{display:block;font-weight:400;font-size:16px;line-height:1.4}
.row .t span{font-size:13px;color:var(--muted)}
.amt{font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.3;white-space:nowrap}
.amt.in{color:var(--income)}.amt.neg{color:var(--deficit)}
.cat{width:36px;height:36px;border-radius:999px;display:grid;place-items:center;color:#FAFBF3;font-size:19px;flex:none}
.badge{font-size:12px;font-weight:700;letter-spacing:.04em;border-radius:999px;padding:3px 10px;background:var(--sunken);white-space:nowrap}
.badge.caution{color:var(--caution)}.badge.over{color:var(--deficit)}.badge.ok{color:var(--income)}
.btn{height:50px;border-radius:999px;border:0;background:var(--btn-bg,var(--primary));color:var(--btn-ink,var(--on-primary));font:inherit;font-size:17px;font-weight:700;padding:0 24px;cursor:pointer;transition:transform .12s,background .12s}
.btn:active{transform:scale(.97);background:var(--primary-pressed)}
.btn.tonal{height:44px;background:var(--sunken);color:var(--primary)}
.btn.small{height:36px;font-size:14px;padding:0 14px}
.btn.block{width:100%}
.chip{height:32px;border-radius:999px;border:0;background:var(--sunken);color:var(--ink);font:inherit;font-size:13px;padding:0 12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.chip.sel{background:var(--primary);color:var(--on-primary)}
.input{height:48px;border-radius:12px;border:0;background:var(--sunken);color:var(--ink);font:inherit;font-size:16px;padding:0 12px;width:100%;outline:none}
.input:focus{box-shadow:0 0 0 2px var(--primary)}
.input.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.seg{display:flex;background:var(--sunken);border-radius:999px;padding:3px;position:relative}
.seg button{flex:1;height:34px;border:0;background:transparent;font:inherit;font-size:14px;color:var(--ink);border-radius:999px;cursor:pointer;position:relative;z-index:1}
.seg button.on{background:var(--raised);box-shadow:0 1px 3px var(--shadow);font-weight:700}
.toggle{width:51px;height:31px;border-radius:999px;background:var(--border);position:relative;border:0;cursor:pointer;flex:none;transition:background .2s}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:999px;background:#FCFDFA;box-shadow:0 2px 4px rgba(16,24,16,.2);transition:transform .28s var(--ease-sheet)}
.toggle.on{background:var(--primary)}.toggle.on::after{transform:translateX(20px)}
.check{width:26px;height:26px;border-radius:999px;border:2px solid var(--border);background:transparent;display:grid;place-items:center;cursor:pointer;flex:none;color:transparent;font-size:15px;transition:background .12s,border-color .12s,color .12s}
.check.on{background:var(--primary);border-color:var(--primary);color:var(--on-primary);animation:pop .38s cubic-bezier(.34,1.56,.64,1)}
@keyframes pop{0%{transform:scale(.6)}100%{transform:none}}
.iconbtn{width:44px;height:44px;border-radius:999px;border:0;background:transparent;color:var(--primary);display:grid;place-items:center;font-size:22px;cursor:pointer;transition:transform .12s}
.iconbtn:active{transform:scale(.97)}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;height:48px;border-radius:999px;display:flex;align-items:center;padding:0 20px;z-index:50;pointer-events:none;transition:transform .28s var(--ease-sheet),opacity .2s}
.toast.on{transform:translate(-50%,0);opacity:1}
@media (prefers-reduced-motion:reduce){*{transition-duration:.12s!important;animation-duration:.01s!important}}