/* ================================================================
   SAVE — Money Calendar · Soft Ledger v2 (redesign 2026-07-27)
   ทีม 3 role: Design System Architect / UX Architect / Visual & Motion
   หลัก: minimal โค้งมน ไร้เส้นขอบ (soft fill + tone) · monochrome at rest,
   color as reward · motion สั้นและ subtle · dark = default
   ================================================================ */

body.hub-save{
  /* ---- palette (light) ---- */
  --bg:#f4f6f5; --surface:#ffffff; --surface-2:#eceff0;
  --border:rgba(21,32,27,.08); --border-soft:rgba(21,32,27,.08);
  --text:#1a201d; --text2:#4b5a53; --text3:#78847e;
  --accent:#2f7d54; --accent-tint:rgba(47,125,84,.10); --accent-strong:#25603f;
  --accent-soft:var(--accent-tint); --hub-mono-bg:#2f7d54;
  --sv-up:#2f7d54; --up-tint:rgba(47,125,84,.10);
  --sv-dn:#c14f45; --dn-tint:rgba(193,79,69,.10);
  --sv-iv:#7756ad; --iv-tint:rgba(119,86,173,.10);
  --life:#c88c28;
  /* ---- radius / spacing ---- */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  /* ---- elevation ---- */
  --shadow-1:0 1px 2px rgba(21,32,27,.05),0 4px 14px rgba(21,32,27,.06);
  --shadow-2:0 4px 10px rgba(21,32,27,.10),0 10px 28px rgba(21,32,27,.10);
  --shadow-3:0 -12px 40px rgba(21,32,27,.16);
  /* ---- motion ---- */
  --dur-1:120ms; --dur-2:220ms; --dur-3:340ms;
  --ease-out:cubic-bezier(.2,.8,.2,1); --ease-spring:cubic-bezier(.34,1.4,.64,1);
  /* mono ไม่มีอักษรไทย → ไทยตก IBM Plex Sans Thai เสมอ */
  --font-mono:'IBM Plex Mono','IBM Plex Sans Thai',ui-monospace,monospace;
  --font-thai:'IBM Plex Sans Thai',-apple-system,BlinkMacSystemFont,sans-serif;
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-thai); font-size:16px; line-height:1.5;
  -webkit-tap-highlight-color:transparent;
  min-height:100vh; min-height:100dvh;
}
html.dark body.hub-save{
  --bg:#0f1311; --surface:#171c19; --surface-2:#1f2622;
  --border:rgba(255,255,255,.07); --border-soft:rgba(255,255,255,.07);
  --text:#edf2ef; --text2:#a6b3ac; --text3:#6d7a73;
  --accent:#63c98f; --accent-tint:rgba(99,201,143,.12); --accent-strong:#7fd6a4;
  --sv-up:#63c98f; --up-tint:rgba(99,201,143,.12);
  --sv-dn:#e58f85; --dn-tint:rgba(229,143,133,.12);
  --sv-iv:#b39ddb; --iv-tint:rgba(179,157,219,.12);
  --shadow-1:none;
  --shadow-2:0 6px 20px rgba(0,0,0,.4);
  --shadow-3:0 -12px 44px rgba(0,0,0,.55);
}
.num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
button{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm); }

/* ---------- app shell ---------- */
#app{ max-width:520px; margin:0 auto;
  padding:0 var(--sp-4) calc(6.6rem + env(safe-area-inset-bottom,0px));
  box-sizing:border-box; display:flex; flex-direction:column;
  min-height:100vh; min-height:100dvh; }
header.top{ flex:none; position:sticky; top:0; z-index:30; background:var(--bg);
  padding:.8rem .1rem .7rem; }

/* brand bar — เบา ไร้เส้น */
.brand{ display:flex; align-items:center; gap:.5rem; font-size:.68rem; color:var(--text3);
  letter-spacing:.14em; text-transform:uppercase; font-family:var(--font-mono);
  margin-bottom:var(--sp-4); }
.brand b{ color:var(--text); font-weight:700; letter-spacing:.06em; }
.bctl{ margin-left:auto; display:flex; gap:.45rem; align-items:center; }
.bctl button{ width:34px; height:34px; padding:0; font-family:var(--font-mono);
  font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:transparent; color:var(--text2); border:0; border-radius:var(--r-pill);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.bctl button:hover{ background:var(--surface-2); color:var(--text); }
.bctl button:active{ transform:scale(.94); }
.bctl button svg{ display:block; }

/* ---------- hero: การ์ดคู่ (ตามคำสั่งเจ้าของ) — soft fill ไร้ขอบ ---------- */
.hero{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); align-items:stretch;
  margin:0 0 var(--sp-3); }
.hero .hb{ display:flex; flex-direction:column; min-width:0;
  background:var(--surface); border-radius:var(--r-lg);
  padding:.85rem 1rem .8rem; box-shadow:var(--shadow-1); }
.hero .lb{ font-size:.8rem; font-weight:500; color:var(--text3); margin-bottom:.35rem;
  white-space:nowrap; overflow:hidden; }
.hero .v{ font-size:clamp(1.4rem,6.5vw,1.75rem); font-weight:600; line-height:1.12;
  letter-spacing:-.01em; }
.hero .v.small{ font-size:clamp(1.1rem,5vw,1.4rem); }
/* PER DAY = พระเอก: เด่นด้วยสี ไม่ใช่เส้นขอบ */
.hero .hb-pd{ background:var(--accent-tint); }
.hero .hb-pd .lb{ color:var(--accent); font-weight:600; }
.hero .hb-pd .v.small{ font-size:clamp(1.55rem,7.5vw,1.95rem); color:var(--accent); }
.hero .hb-pd .cap{ font-size:.6rem; color:var(--text2); margin-top:.35rem; line-height:1.45; }
.hero .v.neg, .hero .hb-pd .v.neg{ color:var(--sv-dn); }
.vin{ animation:v-in var(--dur-2) var(--ease-out); }
@keyframes v-in{ from{ opacity:0; transform:translateY(3px); } }

/* strip 3 คอลัมน์ใต้ hero */
.hinfo{ background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-1);
  padding:.55rem 0; margin:0 0 var(--sp-3); display:flex; align-items:stretch;
  font-family:var(--font-mono); }
.hinfo .hi{ flex:1; display:flex; flex-direction:column; align-items:center; gap:.16rem;
  padding:.1rem .4rem; min-width:0; }
.hinfo .hi+.hi{ border-left:1px solid var(--border); }
.hinfo .hl{ font-size:.64rem; color:var(--text3); letter-spacing:.1em; text-transform:uppercase;
  white-space:nowrap; }
.hinfo .hi b{ font-weight:600; color:var(--text); font-size:.8rem; white-space:nowrap; }
.hinfo .hi b.dl{ color:var(--accent); }

/* สรุปเดือน: 5 คอลัมน์ label-บน-เลข-ล่าง ไม่ต้องเลื่อน */
.strip{ display:grid; grid-template-columns:repeat(5,1fr); gap:.3rem;
  padding:.15rem .1rem .3rem; font-size:.62rem; color:var(--text3); text-align:center; }
.strip>span{ display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.strip b{ font-weight:600; color:var(--text); font-size:.72rem; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.strip .iv b{ color:var(--sv-iv); } .strip .up b{ color:var(--sv-up); } .strip .dn b{ color:var(--sv-dn); }

/* ---------- กล่อง "วันนี้" (เห็นทันทีตอนเปิดแอป) ---------- */
#todayBox{ flex:none; background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-1);
  padding:.6rem .85rem .55rem; margin:.1rem 0 0; cursor:pointer;
  transition:background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
  animation:v-in var(--dur-3) var(--ease-out); }
#todayBox:active{ transform:scale(.985); background:var(--surface-2); }
.tdh{ display:flex; justify-content:space-between; align-items:baseline; gap:.6rem;
  font-size:.6rem; color:var(--text3); font-family:var(--font-mono); text-transform:uppercase;
  letter-spacing:.12em; }
.tdh b{ font-size:.82rem; letter-spacing:0; color:var(--text); }
.tdh b.up{ color:var(--sv-up); } .tdh b.dn{ color:var(--sv-dn); }
.tdl{ list-style:none; margin:.35rem 0 0; padding:0; }
.tdl li{ display:flex; align-items:center; gap:.5rem; padding:.2rem 0; font-size:.76rem;
  color:var(--text2); }
.tdl .ic{ flex:none; width:1.3rem; height:1.3rem; border-radius:var(--r-pill);
  background:var(--surface-2); display:inline-flex; align-items:center; justify-content:center;
  font-size:.6rem; color:var(--text3); }
.tdl .nm{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tdl b{ color:var(--text); font-weight:600; }
.tdl b.up{ color:var(--sv-up); } .tdl b.iv{ color:var(--sv-iv); }
.tdempty{ font-size:.72rem; color:var(--text3); padding:.35rem 0 .1rem; }
.tdmore{ font-size:.62rem; color:var(--text3); margin-top:.25rem; }

/* ---------- calendar ---------- */
#calWrap{ flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }
.mnav{ flex:none; display:flex; align-items:center; justify-content:space-between;
  margin:var(--sp-3) 0 .4rem; }
.mnav b{ font-size:1rem; font-weight:600; letter-spacing:-.005em; }
.mnav button{ font:inherit; font-size:1rem; background:transparent; border:0;
  border-radius:var(--r-pill); color:var(--text2); width:2.5rem; height:2.5rem; cursor:pointer;
  transition:background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.mnav button:hover{ background:var(--surface-2); }
.mnav button:active{ transform:scale(.92); background:var(--surface-2); }
.dow{ flex:none; display:grid; grid-template-columns:repeat(7,1fr); font-size:.62rem;
  color:var(--text3); text-align:center; letter-spacing:.04em; margin-bottom:.3rem; }
#cal{ flex:1 1 auto; min-height:0; display:grid; grid-template-columns:repeat(7,1fr);
  grid-auto-rows:minmax(3.4rem,1fr); gap:4px; }
.cell{ border:0; border-radius:var(--r-md); background:var(--surface);
  padding:.3rem .34rem; font-size:.62rem; position:relative; cursor:pointer; overflow:hidden;
  display:flex; flex-direction:column; align-items:flex-start; min-height:0;
  transition:background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.cell:active{ transform:scale(.96); background:var(--surface-2); }
/* เสาร์-อาทิตย์ tint เบา ๆ */
#cal .cell:nth-child(7n+1), #cal .cell:nth-child(7n){ background:var(--surface-2); }
#cal .cell.out{ background:transparent; cursor:default; }
.cell .d{ color:var(--text3); font-size:.68rem; font-weight:500; }
.cell.today{ background:var(--accent-tint); box-shadow:0 0 0 1.5px var(--accent-tint); }
#cal .cell.today:nth-child(7n+1), #cal .cell.today:nth-child(7n){ background:var(--accent-tint); }
.cell.today .d{ color:var(--accent); font-weight:700; }
.cell .net{ display:block; margin-top:.14rem; font-size:.58rem; font-weight:600; }
.cell .net.up{ color:var(--sv-up); }
.cell .net.dn{ color:var(--sv-dn); }
.cell .dots{ position:absolute; left:.34rem; bottom:.3rem; display:flex; gap:2.5px; }
.cell .dot{ width:3.5px; height:3.5px; border-radius:50%; background:var(--text3); }
.cell .dot.iv{ background:var(--sv-iv); }
.cell .dot.in{ background:var(--sv-up); }
.cell.future .net{ opacity:.55; }
/* วันไหนเงินติดลบ: pip แดงมุมขวาบน (แทนขีดแข็ง ๆ) */
.cell.neg-run::after{ content:""; position:absolute; right:.3rem; top:.32rem;
  width:5px; height:5px; border-radius:50%; background:var(--sv-dn); }
/* โควตาวันละ = เสียงกระซิบ */
.cell .pd{ position:absolute; right:.32rem; bottom:.28rem; font-size:.56rem; font-weight:400;
  color:var(--text3); opacity:.75; max-width:calc(100% - .5rem); overflow:hidden;
  white-space:nowrap; }
.cell .pd.sm{ font-size:.5rem; }                    /* เลข 4 หลักขึ้นไป — ย่อกันล้นช่อง */
.cell.today .pd{ color:var(--accent); opacity:1; font-weight:600; }
.cell .pd.neg{ color:var(--sv-dn); opacity:1; }

/* ---------- bottom tabs ---------- */
nav.tabs{ position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:var(--shadow-2); display:flex; max-width:520px; margin:0 auto;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding-bottom:env(safe-area-inset-bottom,0px); }
nav.tabs a{ flex:1; text-align:center; padding:.7rem 0 .95rem; font-size:.74rem; font-weight:500;
  color:var(--text3); text-decoration:none; position:relative;
  transition:color var(--dur-2) var(--ease-out); }
nav.tabs a::after{ content:""; position:absolute; left:50%; bottom:.45rem; width:4px; height:4px;
  border-radius:var(--r-pill); background:var(--accent); opacity:0;
  transform:translateX(-50%) translateY(3px);
  transition:opacity var(--dur-2) var(--ease-spring), transform var(--dur-2) var(--ease-spring); }
nav.tabs a.on{ color:var(--text); font-weight:600; }
nav.tabs a.on::after{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- FAB ---------- */
#fab{ position:fixed; right:calc(50% - 245px); bottom:calc(3.9rem + env(safe-area-inset-bottom,0px));
  z-index:41; width:3rem; height:3rem; border-radius:var(--r-pill); border:0;
  background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-2); cursor:pointer;
  transition:transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }
html.dark #fab{ color:#0f1311; }
#fab:active{ transform:scale(.92); box-shadow:var(--shadow-1); }
#fab svg{ display:block; }
@media (max-width:560px){ #fab{ right:1rem; } }

/* ---------- overlay + bottom sheet ---------- */
#ov{ position:fixed; inset:0; background:rgba(0,0,0,.4);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  z-index:50; opacity:0; pointer-events:none; transition:opacity var(--dur-2) var(--ease-out); }
#ov.show{ opacity:1; pointer-events:auto; }
#sheet{ position:fixed; left:0; right:0; bottom:0; z-index:51; max-width:520px; margin:0 auto;
  background:var(--surface); border:0; border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:var(--shadow-3); transform:translateY(105%);
  transition:transform var(--dur-3) var(--ease-out);
  max-height:84vh; overflow-y:auto; padding:.55rem 1.1rem 1.4rem; }
#sheet.show{ transform:translateY(0); }
.grab{ width:2.5rem; height:4px; border-radius:var(--r-pill); background:var(--border);
  margin:.25rem auto .8rem; }
.shead{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:.5rem; }
.shead b{ font-size:1.15rem; font-weight:600; }
.shead .mn{ font-size:.68rem; color:var(--text3); }
.savail{ font-size:.72rem; color:var(--text2); background:var(--surface-2);
  border-radius:var(--r-md); padding:.5rem .7rem; margin-bottom:.6rem;
  display:flex; justify-content:space-between; gap:.6rem; flex-wrap:wrap; }
.savail b.neg{ color:var(--sv-dn); }

/* หน้าต่างสถานะงบ — พับได้ แตะหัวเพื่อเปิด/ปิด · เด้งเปิดเองตอนบันทึก */
.bstat{ background:var(--surface-2); border-radius:var(--r-md);
  padding:.45rem .7rem; margin-bottom:.6rem; font-size:.68rem; color:var(--text2); }
.bstat .bh{ font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text3);
  font-family:var(--font-mono); cursor:pointer; display:flex; align-items:center; gap:.4rem;
  padding:.1rem 0; }
.bstat .bsum{ margin-left:auto; font-size:.6rem; letter-spacing:.02em; color:var(--sv-up); }
.bstat .bsum.bad{ color:var(--sv-dn); }
.bstat .bh::after{ content:""; flex:none; width:6px; height:6px; margin:0 .1rem 0 .15rem;
  border-right:1.5px solid var(--text3); border-bottom:1.5px solid var(--text3);
  transform:rotate(45deg); transition:transform var(--dur-2) var(--ease-out); }
.bstat.open .bh::after{ transform:rotate(225deg); }
.bstat .blist{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--dur-2) var(--ease-out); }
.bstat.open .blist{ grid-template-rows:1fr; }
.bstat .blin{ overflow:hidden; min-height:0; }
.bstat .bl{ display:flex; justify-content:space-between; gap:.6rem; padding:.15rem 0; }
.bstat .bl:first-child{ padding-top:.3rem; }
.bstat .bl.warn{ color:var(--text); }
.bstat .bl.bad{ color:var(--sv-dn); }
.bstat .bl.ok{ color:var(--sv-up); }
.bstat.flash{ animation:bs-glow .6s var(--ease-out); }
@keyframes bs-glow{ 0%{ background:var(--accent-tint); } 100%{ background:var(--surface-2); } }

/* รายการของวัน */
.txl{ list-style:none; margin:.2rem 0; padding:0; }
.txl li{ display:flex; align-items:center; gap:.65rem; padding:.6rem .1rem;
  border-bottom:1px solid var(--border); font-size:.84rem; cursor:pointer;
  transition:background var(--dur-1) var(--ease-out); border-radius:var(--r-sm); }
.txl li:active{ background:var(--surface-2); }
.txl li:last-child{ border-bottom:0; }
.txl .ic{ flex:none; width:2rem; height:2rem; border-radius:var(--r-pill);
  background:var(--surface-2); display:flex; align-items:center; justify-content:center;
  font-size:.8rem; color:var(--text2); }
.txl li.iv .ic{ background:var(--iv-tint); color:var(--sv-iv); }
.txl li.in .ic{ background:var(--up-tint); color:var(--sv-up); }
.txl .nm{ flex:1; min-width:0; }
.txl .nm .c1{ display:block; font-weight:600; font-size:.82rem; line-height:1.35;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.txl .nm .c2{ display:block; font-size:.66rem; color:var(--text3); line-height:1.35;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.txl .am{ font-weight:600; font-size:.86rem; }
.txl li.in .am{ color:var(--sv-up); }
.txl li:not(.in) .am{ color:var(--text); }
.txl li.iv .am{ color:var(--sv-iv); }
.txl li.planned{ opacity:.55; }
.txl .pl{ font-size:.6rem; background:var(--surface-2); border-radius:var(--r-pill);
  padding:.05rem .45rem; color:var(--text3); }
.empty{ font-size:.76rem; color:var(--text3); padding:.9rem 0; text-align:center; }

/* ---------- ฟอร์มเพิ่ม/แก้ ---------- */
form.tx{ margin-top:.3rem; }
.seg{ display:flex; background:var(--surface-2); border-radius:var(--r-pill); padding:3px;
  margin-bottom:.6rem; }
.seg button{ flex:1; font:inherit; font-size:.8rem; padding:.55rem 0; border:0;
  border-radius:var(--r-pill); background:transparent; color:var(--text3); cursor:pointer;
  transition:background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.seg button.on{ background:var(--surface); color:var(--text); font-weight:600;
  box-shadow:var(--shadow-1); }
input.amt{ width:100%; box-sizing:border-box; font-family:var(--font-mono); font-size:1.7rem;
  text-align:center; padding:.55rem; background:var(--surface-2); color:var(--text);
  border:0; border-radius:var(--r-lg); margin-bottom:.6rem;
  transition:box-shadow var(--dur-1) var(--ease-out); }
input.amt:focus{ outline:none; box-shadow:0 0 0 2px var(--accent); }
.cats{ display:grid; grid-template-columns:repeat(3,1fr); gap:.45rem; margin-bottom:.6rem; }
.cats button{ font:inherit; font-size:.74rem; padding:.62rem .2rem; border:0;
  border-radius:var(--r-md); background:var(--surface-2); color:var(--text2); cursor:pointer;
  transition:background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out); }
.cats button:active{ transform:scale(.96); }
.cats button.on{ background:var(--accent-tint); color:var(--accent); font-weight:600; }
.cats button.iv.on{ background:var(--iv-tint); color:var(--sv-iv); }
.row2{ display:flex; gap:.45rem; margin-bottom:.6rem; }
.row2 input{ flex:1; font:inherit; font-size:.8rem; padding:.55rem .65rem;
  background:var(--surface-2); color:var(--text); border:0; border-radius:var(--r-md);
  min-width:0; transition:box-shadow var(--dur-1) var(--ease-out); }
.row2 input:focus{ outline:none; box-shadow:0 0 0 2px var(--accent); }
label.pchk{ display:flex; gap:.5rem; align-items:center; font-size:.72rem; color:var(--text2);
  margin-bottom:.7rem; }
label.pchk input{ accent-color:var(--accent); }
.facts{ display:flex; gap:.5rem; }
.facts button{ font:inherit; font-weight:600; font-size:.84rem; flex:1; padding:.68rem;
  border-radius:var(--r-pill); border:0; background:var(--accent); color:#fff; cursor:pointer;
  transition:transform var(--dur-1) var(--ease-out), opacity var(--dur-1) var(--ease-out); }
html.dark .facts button{ color:#0f1311; }
.facts button:active{ transform:scale(.97); }
.facts button.ghost{ background:var(--surface-2); color:var(--text2); flex:0 0 auto;
  padding:.68rem .95rem; }
html.dark .facts button.ghost{ color:var(--text2); }
/* ปุ่มลบ = สีแดงชัด (เจ้าของขอ 2026-08-06) — สว่าง: แดงเข้ม+ตัวขาว · มืด: แดงนุ่มตามธีม+ตัวเข้ม */
.facts button.del{ background:var(--sv-dn); color:#fff; flex:0 0 auto;
  padding:.68rem .95rem; }
html.dark .facts button.del{ color:#211110; }
.facts button:disabled{ opacity:.4; cursor:default; }

/* ---------- stats ---------- */
#stats h2, #homeSum h2, #homeBud h2{ font-size:.94rem; color:var(--text2); font-weight:600; letter-spacing:.01em;
  margin:var(--sp-5) 0 .6rem; display:flex; align-items:center; gap:.6rem; }
#stats .h2btn, #homeSum .h2btn, #homeBud .h2btn{ margin-left:auto; font-family:var(--font-mono); font-size:.6rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:.32rem .7rem;
  border:0; border-radius:var(--r-md); background:var(--surface-2); color:var(--text2);
  cursor:pointer; transition:background var(--dur-1) var(--ease-out); }
#stats .h2btn:hover, #homeSum .h2btn:hover, #homeBud .h2btn:hover{ background:var(--accent-tint); color:var(--accent); }
#stats .h2btn:active, #homeSum .h2btn:active, #homeBud .h2btn:active{ background:var(--accent-tint); }
.kcards{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); }
.kc{ background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-1);
  padding:.7rem .8rem; cursor:pointer; }
.kc .lb{ font-size:.74rem; color:var(--text3); display:flex; align-items:center;
  justify-content:space-between; gap:.4rem; }
/* ปุ่ม ⓘ — วงกลมนุ่มตามธีม แตะเพื่อดูเป้า/เดือนก่อน/สูตร */
.kc .ib{ flex:none; width:22px; height:22px; padding:0; border:0; border-radius:var(--r-pill);
  background:transparent; color:var(--text); cursor:pointer;   /* ดิสก์ทึบใน SVG คือตัวไอคอนเอง — ขาวตามธีม ไม่มีกรอบรอบ */
  display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out); }
.kc .ib:active{ transform:scale(.9); }
.kc.open .ib{ background:transparent; color:var(--accent); }
.kc .v{ font-size:1.3rem; font-weight:600; letter-spacing:-.01em; margin-top:.05rem; }
.kc .v.up{ color:var(--sv-up); } .kc .v.iv{ color:var(--sv-iv); } .kc .v.dn{ color:var(--sv-dn); }
.kc .meta{ font-size:.6rem; color:var(--text3); font-family:var(--font-mono);
  letter-spacing:.02em; margin-bottom:.25rem; }
.kc .pdata{ display:none; }
/* กล่อง ⓘ ลอย — ชี้ลูกศรที่ไอคอน เด้งออกแบบ spring ตามธีม */
#isPop{ position:fixed; z-index:70; background:var(--surface); border-radius:var(--r-lg);
  box-shadow:var(--shadow-2); padding:.7rem .85rem; opacity:0; pointer-events:none;
  transform:scale(.92) translateY(-6px);
  transition:opacity var(--dur-2) var(--ease-spring), transform var(--dur-2) var(--ease-spring); }
html.dark #isPop{ background:var(--surface-2); }
#isPop.show{ opacity:1; pointer-events:auto; transform:none; }
#isPop.up{ transform:scale(.92) translateY(6px); }
#isPop.up.show{ transform:none; }
#isPop .pa{ position:absolute; top:-5px; width:10px; height:10px; background:inherit;
  transform:rotate(45deg); border-radius:2px; }
#isPop.up .pa{ top:auto; bottom:-5px; }
#isPop .meta{ font-size:.6rem; color:var(--text3); font-family:var(--font-mono);
  letter-spacing:.02em; margin-bottom:.35rem; }
#isPop .exp{ font-size:.74rem; color:var(--text); line-height:1.55; }
#isPop .frm{ font-family:var(--font-mono); font-size:.6rem; color:var(--text3); margin-top:.4rem;
  line-height:1.5; }
/* งบเดือนนี้ */
.bud{ background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-1);
  padding:.7rem .8rem; }
.brow{ margin:.5rem 0; }
.brow:first-child{ margin-top:.1rem; }
.brow .t{ display:flex; justify-content:space-between; align-items:baseline; gap:.5rem;
  font-size:.72rem; color:var(--text2); margin-bottom:.2rem; }
.brow .t b{ color:var(--text); font-weight:600; }
.brow .pl2{ color:var(--text3); font-size:.6rem; }
.brow .tr{ height:.5rem; background:var(--surface-2); border:0; border-radius:var(--r-pill); }
.brow .fl{ display:block; height:100%; background:var(--text3); border-radius:var(--r-pill);
  transition:width var(--dur-3) var(--ease-out); }
.brow.near .pc{ color:var(--text); font-weight:600; }
.brow.over .fl{ background:var(--sv-dn); }
.brow.over .pc{ color:var(--sv-dn); font-weight:700; }
.brow.good .fl{ background:var(--sv-up); }
.brow.good .pc{ color:var(--sv-up); font-weight:600; }
.pch{ display:inline-block; width:8px; height:8px; border-radius:3px; background:var(--text3);
  margin-right:.4rem; }
.pch.sg-life{ background:var(--life); } .pch.sg-debt{ background:var(--sv-dn); }
.pch.sg-oth{ background:var(--border); } .pch.sg-left{ background:var(--sv-up); }
/* สัดส่วนรายรับ */
.alloc{ background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-1);
  padding:.7rem .8rem; }
.abar{ display:flex; height:.85rem; border-radius:var(--r-pill); overflow:hidden;
  background:var(--surface-2); }
.abar.plan{ height:.3rem; margin-top:4px; opacity:.5; }
.abar .sg{ display:block; height:100%; transition:width var(--dur-3) var(--ease-out); }
.sg-need{ background:var(--text3); }
.sg-life{ background:var(--life); }
.sg-debt{ background:var(--sv-dn); }
.sg-oth{ background:var(--border); }
.sg-iv{ background:var(--sv-iv); }
.sg-left{ background:var(--sv-up); }
.aleg{ display:flex; flex-wrap:wrap; gap:.35rem .85rem; margin-top:.55rem; font-size:.64rem;
  color:var(--text2); }
.aleg .lg::before{ content:""; display:inline-block; width:8px; height:8px; border-radius:3px;
  margin-right:.32rem; background:var(--text3); }
.aleg .lg-life::before{ background:var(--life); }
.aleg .lg-debt::before{ background:var(--sv-dn); }
.aleg .lg-oth::before{ background:var(--border); }
.aleg .lg-iv::before{ background:var(--sv-iv); }
.aleg .lg-left::before{ background:var(--sv-up); }
.aleg .over{ color:var(--sv-dn); font-weight:700; }
.aleg .over::before{ background:var(--sv-dn); }
/* เทียบเดือนก่อน */
.mom{ background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-1);
  padding:.15rem .8rem; }
.mrow{ display:flex; align-items:baseline; gap:.55rem; padding:.5rem 0;
  border-bottom:1px solid var(--border); font-size:.76rem; color:var(--text2); }
.mrow:last-child{ border-bottom:0; }
.mrow b{ margin-left:auto; color:var(--text); font-weight:600; }
.mrow .mprev{ font-size:.6rem; color:var(--text3); }
.mrow .mdel{ font-size:.68rem; min-width:2.6rem; text-align:right; color:var(--text3); }
.mrow .mdel.up{ color:var(--sv-up); } .mrow .mdel.dn{ color:var(--sv-dn); }
/* รายจ่ายรายหมวด + เทรนด์ */
.bars{ margin:.2rem 0; }
.bar{ margin:.5rem 0; font-size:.72rem; color:var(--text2); }
.bar .t{ display:flex; justify-content:space-between; margin-bottom:.18rem; }
.bar .tr{ height:.5rem; background:var(--surface-2); border:0; border-radius:var(--r-pill); }
.bar .fl{ height:100%; background:var(--text3); border-radius:var(--r-pill);
  transition:width var(--dur-3) var(--ease-out); }
.bar.iv .fl{ background:var(--sv-iv); }
.trend{ display:flex; gap:.4rem; align-items:flex-end; height:4.4rem; padding:.3rem 0; }
.trend .col{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:3px;
  text-align:center; }
.trend .bx{ background:var(--accent-tint); border:0; border-radius:var(--r-sm) var(--r-sm) 2px 2px;
  box-shadow:inset 0 -2px 0 var(--accent); }
.trend .neg .bx{ background:var(--dn-tint); box-shadow:inset 0 -2px 0 var(--sv-dn); }
.trend .m{ font-size:.56rem; color:var(--text3); }
.io{ display:flex; gap:.5rem; margin-top:var(--sp-4); }
.io button,.io label{ font:inherit; font-size:.72rem; padding:.55rem .9rem; border:0;
  border-radius:var(--r-md); background:var(--surface-2); color:var(--text2); cursor:pointer;
  transition:background var(--dur-1) var(--ease-out); }
.io button:active,.io label:active{ background:var(--accent-tint); }
.note{ font-size:.66rem; color:var(--text3); margin-top:.6rem; line-height:1.55; }

/* ---------- ตัวแก้แผนงบ ---------- */
.pexp{ font-size:.68rem; color:var(--text3); margin:.05rem 0 .55rem; line-height:1.5; }
.prow{ display:flex; align-items:center; gap:.45rem; padding:.45rem 0;
  border-bottom:1px solid var(--border); font-size:.78rem; }
.prow:last-of-type{ border-bottom:0; }
.prow .pn{ flex:1; min-width:0; }
.prow button{ font:inherit; width:2.2rem; height:2.2rem; flex:none; background:var(--surface-2);
  border:0; border-radius:var(--r-pill); color:var(--text2); cursor:pointer;
  transition:background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.prow button:active{ transform:scale(.92); background:var(--accent-tint); }
.prow .pin{ width:3.2rem; text-align:right; font-size:.88rem; padding:.4rem .45rem;
  background:var(--surface-2); border:0; border-radius:var(--r-md); color:var(--text); }
.prow .pin:focus{ outline:none; box-shadow:0 0 0 2px var(--accent); }
.prow .pct{ color:var(--text3); font-size:.7rem; }
.psum{ display:flex; justify-content:space-between; gap:.6rem; flex-wrap:wrap;
  background:var(--surface-2); border-radius:var(--r-md); padding:.5rem .7rem; margin:.6rem 0;
  font-size:.74rem; color:var(--text2); transition:background var(--dur-2) var(--ease-out); }
.psum b{ color:var(--text); }
.psum.ok{ background:var(--accent-tint); color:var(--accent); }
.psum.ok b{ color:var(--accent); }
.psum.bad{ background:var(--dn-tint); color:var(--sv-dn); }
.psum.bad b{ color:var(--sv-dn); }

/* toast */
#toast{ position:fixed; left:50%; bottom:5.4rem; transform:translateX(-50%) translateY(16px);
  background:var(--text); color:var(--bg); font-size:.74rem; padding:.55rem 1.1rem;
  border-radius:var(--r-pill); box-shadow:var(--shadow-2); opacity:0;
  transition:opacity var(--dur-2) var(--ease-spring), transform var(--dur-2) var(--ease-spring);
  z-index:60; pointer-events:none; white-space:nowrap; }
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- responsive ---------- */
@media (max-width:480px){
  #app{ padding-left:.6rem; padding-right:.6rem; }
  .cell{ padding:.24rem .26rem; }
  .cell .net{ font-size:.54rem; }
  .cell .pd{ font-size:.54rem; }
}
@media (min-width:768px){
  #app, nav.tabs, #sheet{ max-width:680px; }
  #fab{ right:calc(50% - 325px); }
  .kcards{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:1024px){
  #app, nav.tabs, #sheet{ max-width:760px; }
  #fab{ right:calc(50% - 365px); }
  #cal{ grid-auto-rows:minmax(3.4rem,92px); flex:0 0 auto; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{ transition-duration:.01ms !important; animation:none !important; }
  #sheet{ transition:opacity var(--dur-1) !important; }
}

/* ================================================================
   Recurring costs v1 (team design 2026-07-31)
   §A FAB menu · §B recurring manager · §C schedule picker · §D alarm
   ================================================================ */

/* ---------- §A FAB rotate + quick-add menu ---------- */
#fab svg{ transition:transform var(--dur-1) var(--ease-out); }
#fab.open{ background:var(--accent-strong,var(--accent)); z-index:52; }
#fab.open svg{ transform:rotate(45deg);
  transition:transform var(--dur-2) var(--ease-spring); }

/* scrim เบากว่า sheet — ปฏิทินยังเห็น แค่ถูกพักไว้ */
#ov.lite{ background:rgba(0,0,0,.22);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }

#fabMenu{ position:fixed; right:calc(50% - 245px);
  bottom:calc(7.4rem + env(safe-area-inset-bottom,0px)); z-index:52;
  display:flex; flex-direction:column; align-items:flex-end; gap:.55rem;
  pointer-events:none; }
#fabMenu.show{ pointer-events:auto; }
@media (max-width:560px){ #fabMenu{ right:1rem; } }
@media (min-width:768px){ #fabMenu{ right:calc(50% - 325px); } }
@media (min-width:1024px){ #fabMenu{ right:calc(50% - 365px); } }

.fmi{ display:flex; align-items:center; gap:.55rem; border:0; cursor:pointer;
  font:inherit; font-size:.8rem; font-weight:600; color:var(--text);
  background:var(--surface); border-radius:var(--r-pill);
  padding:.4rem .95rem .4rem .45rem; box-shadow:var(--shadow-2);
  opacity:0; transform:translateY(8px);
  transition:opacity var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out),
    background var(--dur-1) var(--ease-out); }
#fabMenu.show .fmi{ opacity:1; transform:none;
  animation:fmi-in var(--dur-2) var(--ease-spring) backwards; }
#fabMenu.show .fmi:nth-last-child(2){ animation-delay:30ms; }
#fabMenu.show .fmi:nth-last-child(3){ animation-delay:60ms; }
#fabMenu.show .fmi:nth-last-child(4){ animation-delay:90ms; }
@keyframes fmi-in{ from{ opacity:0; transform:translateY(10px) scale(.92); } }
.fmi:active{ transform:scale(.96); background:var(--surface-2); }
.fmi .ic{ flex:none; width:1.7rem; height:1.7rem; border-radius:var(--r-pill);
  background:var(--surface-2); color:var(--text2);
  display:flex; align-items:center; justify-content:center; }
.fmi .ic svg{ display:block; }
.fmi.in .ic{ background:var(--up-tint,var(--surface-2)); color:var(--sv-up); }
.fmi.rs .ic{ background:var(--iv-tint,var(--surface-2)); color:var(--sv-iv); }

/* ---------- §B recurring manager (Ratios) ---------- */
.rec{ background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-1);
  padding:.7rem .9rem .75rem; }
.rec .rgh{ font-size:.6rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text3); margin:.55rem 0 .2rem; }
.rec .rgh:first-child{ margin-top:0; }
.rrow{ padding:.42rem 0 .4rem; cursor:pointer; border-radius:var(--r-sm);
  transition:background var(--dur-1) var(--ease-out); }
.rrow:active{ background:var(--surface-2); }
.rrow .t{ display:flex; justify-content:space-between; align-items:baseline; gap:.6rem;
  font-size:.8rem; font-weight:600; }
.rrow .rn{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rrow .pl{ font-size:.58rem; font-weight:500; background:var(--surface-2); color:var(--text2);
  border-radius:var(--r-pill); padding:.06rem .45rem; vertical-align:middle; }
.rrow .rs2{ font-size:.62rem; color:var(--text3); margin-top:.1rem; }
.rrow.offr .t, .rrow.offr .rs2{ opacity:.55; }
.radd{ display:block; width:100%; text-align:left; border:0; background:none; cursor:pointer;
  font:inherit; font-size:.72rem; color:var(--text3); padding:.4rem 0 .2rem;
  transition:color var(--dur-1) var(--ease-out); }
.radd:active{ color:var(--text); }

/* ---------- §C fx editor sheet: ชื่อ + ตาราง 31 วัน ---------- */
/* .fxbody: จำกัดความกว้างฟอร์มบนจอกว้าง — ช่องวัน/ปุ่มไม่ยืดเสียทรง ไม่ทับกัน */
.fxbody{ max-width:480px; margin:0 auto; }
.fxbody input.amt{ margin:.55rem 0 .3rem; }
.fxn{ width:100%; box-sizing:border-box; font:inherit; font-size:.88rem;
  background:var(--surface-2); color:var(--text); border:0; border-radius:var(--r-md);
  padding:.6rem .85rem; margin-top:.2rem;
  transition:box-shadow var(--dur-1) var(--ease-out); }
.fxn:focus{ outline:none;
  box-shadow:inset 0 0 0 1.5px var(--accent); }        /* วงในนุ่ม ๆ — ไม่ล้นขอบ sheet */
.shl{ font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text3); margin:.55rem 0 .3rem; }
.seg.sch{ margin-bottom:.45rem; }
.seg.sch button{ font-size:.68rem; padding:.5rem 0; }
.schg{ display:grid; grid-template-columns:repeat(7,1fr); gap:.3rem; margin:.15rem 0 .3rem; }
.schg button{ font:inherit; font-size:.7rem; border:0; cursor:pointer; min-height:2.1rem;
  border-radius:var(--r-md); background:var(--surface-2); color:var(--text2);
  font-variant-numeric:tabular-nums;
  transition:background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out); }
.schg button:active{ transform:scale(.94); }
.schg button.on{ background:var(--accent); color:#fff; font-weight:600; }
html.dark .schg button.on{ color:#0f1311; }
/* โหมด "เว้นวัน": วันที่เลือก = วันที่ตัดออก → โทนขีดฆ่า ไม่ใช่ accent */
.schg.exm button.on{ background:var(--fill-soft,var(--surface-2)); color:var(--text3);
  text-decoration:line-through; font-weight:500; }
.schsum{ display:inline-block; font-size:.64rem; color:var(--text2);
  background:var(--fill-soft,var(--surface-2)); border-radius:var(--r-pill);
  padding:.22rem .65rem; margin:.15rem 0 .2rem; }
.fxbody .pchk{ margin:.55rem 0 .7rem; }
.savail .fxline{ display:block; margin-top:.2rem; color:var(--text3); }
.hero .hb-pd .cap.fx{ margin-top:.15rem; color:var(--text3); }
.hero .hb-pd .cap.fx:empty{ display:none; }

/* txl แถว fix due (ยังไม่เกิดจริง — จาง + ปุ่มจ่ายแล้ว) */
.txl li.fxdue{ opacity:.72; }
.txl li.fxdue .ic{ display:inline-flex; align-items:center; justify-content:center; }
.fxpay{ flex:none; font:inherit; font-size:.62rem; font-weight:600; border:0; cursor:pointer;
  background:var(--surface-2); color:var(--text2); border-radius:var(--r-pill);
  padding:.22rem .6rem; margin-right:.4rem;
  transition:background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.fxpay:active{ background:var(--accent); color:#fff; }
.alx{ font-size:.8rem; line-height:1.55; margin:.2rem 0 .55rem; }

/* จุดกลวง = fix due (scheduled ยังไม่จ่าย) */
.cell .dot.fx{ background:transparent; border:1px solid var(--text3);
  width:3.5px; height:3.5px; box-sizing:border-box; }

/* ---------- §D shortfall alarm: flag → breath → heartbeat ---------- */
body.hub-save{
  --warn:#b8443a; --warn-tint:rgba(184,68,58,.12); --warn-ring:rgba(184,68,58,.35);
}
html.dark body.hub-save{
  --warn:#ea9086; --warn-tint:rgba(234,144,134,.16); --warn-ring:rgba(234,144,134,.40);
}
.wbadge{ position:absolute; top:.6rem; right:.6rem; width:20px; height:20px;
  border:0; padding:0; cursor:pointer; border-radius:var(--r-pill);
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--warn-tint); color:var(--warn); }
.wbadge svg{ display:block; }
.wbadge.st{ position:static; width:16px; height:16px; cursor:default; }
.hero .hb{ position:relative; }
/* L1 (≤15 วัน): ธงนิ่ง — ความนิ่งคือระดับแรก · L2 (≤7): หายใจ · L3 (≤3): จังหวะหัวใจ */
.wbadge.l2, .wbadge.l3{ background:var(--warn); color:#fff; }
html.dark .wbadge.l2, html.dark .wbadge.l3{ color:#0f1311; }
.wbadge.l2{ animation:wb-breathe 2400ms ease-in-out infinite; }
@keyframes wb-breathe{
  0%,100%{ opacity:.72; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.08); }
}
.wbadge.l3{ animation:wb-beat 1600ms var(--ease-out) infinite; }
@keyframes wb-beat{
  0%{ transform:scale(1); box-shadow:0 0 0 0 var(--warn-ring); }
  10%{ transform:scale(1.22); }
  20%{ transform:scale(1); }
  30%{ transform:scale(1.16); }
  40%{ transform:scale(1); box-shadow:0 0 0 6px transparent; }
  100%{ transform:scale(1); box-shadow:0 0 0 0 transparent; }
}

/* reduced motion: ระดับต้องรอดโดยไม่มี motion — tint → ทึบ → ทึบ+วงแหวน */
@media (prefers-reduced-motion:reduce){
  #fabMenu.show .fmi{ animation:none !important; opacity:1; transform:none; }
  #fab.open svg{ transform:rotate(45deg); }
  .wbadge.l2{ opacity:1; }
  .wbadge.l3{ box-shadow:0 0 0 2px var(--warn-ring) !important; }
}

/* หน้าหลัก: สรุปงบ+รายการประจำใต้ปฏิทิน (คำขอ 2026-08-01 — เห็นความคืบหน้าชัด) */
#homeSum{ margin-top:var(--sp-2); }
#homeSum h2:first-child{ margin-top:var(--sp-4); }

/* flex: โหมดจำนวนเงิน (ต่อวัน/ทุนก้อน) + บรรทัดแปลงค่าสด (2026-08-01) */
.seg.am{ margin:.5rem 0 0; }
.seg.am button{ font-size:.7rem; padding:.5rem 0; }
.amprev{ font-size:.66rem; color:var(--accent); text-align:center;
  margin:-.05rem 0 .15rem; min-height:.9rem; }
.amprev:empty{ display:none; }

/* สัญลักษณ์ปฏิทิน + ⓘ อธิบาย (2026-08-01) */
.mlbl{ display:inline-flex; align-items:center; gap:.45rem; min-width:0; }
.mnav .calinfo{ display:inline-flex; }
.mnav .calinfo .ib{ width:22px; height:22px; }
.cell .net.fxd{ color:var(--sv-dn); opacity:.55; font-weight:500; }
#isPop .lgt{ font-size:.6rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text3); margin-bottom:.4rem; }
#isPop .lgr{ display:flex; align-items:center; gap:.6rem; padding:.22rem 0; font-size:.7rem;
  color:var(--text2); line-height:1.45; }
#isPop .lgs{ flex:none; width:4.2rem; display:inline-flex; align-items:center; gap:.25rem;
  justify-content:flex-end; font-size:.62rem; }
#isPop .lgx{ flex:1; min-width:0; }
#isPop .lgs .up{ color:var(--sv-up); } #isPop .lgs .dn{ color:var(--sv-dn); }
#isPop .lgs .fxs{ color:var(--sv-dn); opacity:.55; font-weight:500; }
#isPop .lgs .pds{ color:var(--accent); }
#isPop .dot{ width:5px; height:5px; border-radius:50%; background:var(--text3); display:inline-block; }
#isPop .dot.in{ background:var(--sv-up); }
#isPop .dot.iv{ background:var(--sv-iv); }
#isPop .dot.fx{ background:transparent; border:1px solid var(--text3); box-sizing:border-box; }
#isPop .negs{ width:1.6rem; height:.8rem; border-radius:var(--r-sm); background:var(--dn-tint);
  box-shadow:inset 0 0 0 1px var(--sv-dn); display:inline-block; opacity:.8; }

/* แผนงบ: แถวการลงทุน (ย่อยจากเงินออม) + แถวย่อยในงบเดือนนี้ */


/* แผนงบ: โน้ตกันงงเรื่อง iv อยู่ใน sv + เส้นเชื่อมแถวย่อย (2026-08-01) */

.pivnote{ font-size:.62rem; color:var(--text3); line-height:1.5; margin:-.15rem 0 .5rem;
  padding:.3rem .6rem; background:var(--fill-soft,var(--surface-2)); border-radius:var(--r-md); }

/* ปุ่มแก้อัตโนมัติตอนแผนเกิน 100% */
.psum #pFix{ font:inherit; font-size:.66rem; font-weight:600; border:0; cursor:pointer;
  background:var(--sv-dn); color:#fff; border-radius:var(--r-pill); padding:.28rem .7rem;
  transition:transform var(--dur-1) var(--ease-out); }
html.dark .psum #pFix{ color:#0f1311; }
.psum #pFix:active{ transform:scale(.95); }

/* ⓘ ในแถบเดือน: เหลือแค่ดิสก์ล้วน — ตัดพื้นสี่เหลี่ยม hover/active ของ .mnav button ออก */
.mnav .calinfo .ib:hover, .mnav .calinfo .ib:active{ background:transparent; }

/* #calInfo เป็น span.kc (เพื่อใช้ popover module) แต่ต้องไม่ติดหน้าตาการ์ด kc */
.mnav .calinfo{ background:transparent !important; box-shadow:none !important;
  padding:0 !important; border-radius:0; }

/* งบเดือนนี้เหนือปฏิทิน: h2 แรกไม่ต้องเว้นบนมาก */
#homeBud h2:first-child{ margin-top:var(--sp-2); }

/* การ์ด AVAILABLE NOW แตะแก้ยอดได้ (2026-08-01) */
#avCard{ cursor:pointer; transition:transform var(--dur-1) var(--ease-out),
  background var(--dur-1) var(--ease-out); }
#avCard:active{ transform:scale(.985); background:var(--surface-2); }
.hero .lbrow{ display:flex; align-items:center; gap:.35rem; }
.hero .lbrow .lb{ margin-bottom:0; }
.hero .edith{ flex:none; color:var(--text3); opacity:.65; margin-bottom:.35rem; }

/* ================================================================
   หน้า "รายการ" (#/tx) — รายรับรายจ่ายรายวัน (team design 2026-08-01)
   ================================================================ */
#txPage{ padding-bottom:.4rem; }
.txsum{ display:grid; grid-template-columns:repeat(4,1fr); gap:.3rem;
  background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-1);
  padding:.55rem .5rem; margin:0 0 var(--sp-3); text-align:center; }
.txsum>span{ display:flex; flex-direction:column; gap:.12rem; min-width:0;
  font-size:.58rem; color:var(--text3); letter-spacing:.08em; text-transform:uppercase; }
.txsum b{ font-weight:600; color:var(--text); font-size:.76rem; letter-spacing:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.txsum .up b{ color:var(--sv-up); } .txsum .dn b{ color:var(--sv-dn); }
.txsum .iv b{ color:var(--sv-iv); }
.txfil{ display:flex; flex-direction:column; gap:.5rem; margin:0 0 var(--sp-3); }
.txsearch{ display:flex; align-items:center; gap:.5rem; background:var(--surface-2);
  border-radius:var(--r-pill); padding:.42rem .8rem; color:var(--text3); }
.txsearch input{ flex:1; min-width:0; font:inherit; font-size:.8rem; border:0;
  background:transparent; color:var(--text); }
.txsearch input:focus{ outline:none; }
.txsearch input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.seg.txtype{ margin-bottom:0; }
.seg.txtype button{ font-size:.68rem; padding:.45rem 0; }
#txChip:empty{ display:none; }
.txchip{ display:inline-flex; align-items:center; gap:.4rem; font:inherit;
  font-size:.68rem; font-weight:600; border:0; cursor:pointer;
  background:var(--accent-tint); color:var(--accent); border-radius:var(--r-pill);
  padding:.3rem .75rem; }
.txchip svg{ display:block; opacity:.7; }
.txd{ display:flex; justify-content:space-between; align-items:baseline; gap:.6rem;
  font-size:.6rem; color:var(--text3); font-family:var(--font-mono);
  text-transform:uppercase; letter-spacing:.12em; margin:0 .2rem .3rem; }
.txd b{ font-size:.74rem; letter-spacing:0; color:var(--text); }
.txd b.up{ color:var(--sv-up); } .txd b.dn{ color:var(--sv-dn); }
#txList>ul.txl{ background:var(--surface); border-radius:var(--r-lg);
  box-shadow:var(--shadow-1); padding:.1rem .85rem; margin:0 0 .75rem; }
.txempty{ display:flex; flex-direction:column; align-items:center; gap:.5rem;
  background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-1);
  padding:1.6rem 1rem; font-size:.78rem; color:var(--text2); text-align:center; }
.txempty span{ font-size:.66rem; color:var(--text3); }
.txempty button{ font:inherit; font-size:.7rem; font-weight:600; border:0; cursor:pointer;
  background:var(--surface-2); color:var(--text2); border-radius:var(--r-pill);
  padding:.4rem .95rem; }
.txmore{ display:block; width:100%; font:inherit; font-size:.72rem; font-weight:600;
  border:0; cursor:pointer; background:var(--surface-2); color:var(--text2);
  border-radius:var(--r-md); padding:.6rem; margin:.1rem 0 .6rem; }

/* ชิปโน้ตที่ใช้บ่อยใต้ช่องโน้ต (ฟอร์มเพิ่มรายการ) */
.ntc{ display:flex; flex-wrap:wrap; gap:.35rem; margin:.45rem 0 0; }
.ntc button{ font:inherit; font-size:.66rem; border:0; cursor:pointer;
  background:var(--surface-2); color:var(--text2); border-radius:var(--r-pill);
  padding:.28rem .7rem; max-width:100%; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap;
  transition:background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.ntc button:active{ background:var(--accent-tint); color:var(--accent); }

/* ================================================================
   แผนงบ v3 — โครง 50/30/20 (SCB) 3 ชั้น (2026-08-02)
   ================================================================ */
/* editor: หัวก้อนหลัก + คำอธิบาย */
.bkh{ display:flex; justify-content:space-between; align-items:baseline;
  margin:.7rem 0 .05rem; font-size:.78rem; font-weight:700; }
.bkh:first-of-type{ margin-top:.3rem; }
.bkh .bkg{ font-size:.6rem; font-weight:500; color:var(--text3); }
.bkh .bkg.ok{ color:var(--accent); }
.bkex{ font-size:.6rem; color:var(--text3); line-height:1.5; margin:0 0 .3rem; }

/* budget card: แถวก้อนหลัก (หนา แตะขยายรายหมวด) + แถวกลุ่มย่อยเยื้อง */
.brow.bk{ cursor:pointer; margin-top:.45rem; }
.brow.bk:first-child{ margin-top:0; }
.brow.bk .t{ font-weight:700; }
.brow.bk .chev{ display:inline-block; width:6px; height:6px;
  border-right:1.5px solid var(--text3); border-bottom:1.5px solid var(--text3);
  transform:rotate(45deg); margin-left:.45rem; vertical-align:2px;
  transition:transform var(--dur-2) var(--ease-out); }
.brow.bk.open .chev{ transform:rotate(225deg); vertical-align:-1px; }
.brow.bk .tr.trb{ height:.5rem; }
.brow.bk .bcat{ display:grid; grid-template-rows:0fr;
  transition:grid-template-rows var(--dur-2) var(--ease-out); }
.brow.bk.open .bcat{ grid-template-rows:1fr; }
.brow.bk .bci{ overflow:hidden; min-height:0; }
.bcr{ display:flex; justify-content:space-between; gap:.6rem; font-size:.68rem;
  color:var(--text2); padding:.16rem 0 0; }
.bcr:first-child{ padding-top:.35rem; }
.bcr.in2{ padding-left:1rem; color:var(--text3); font-size:.64rem; }
.brow.sub{ margin-left:1rem; }
.brow.sub .t{ font-size:.72rem; }
.bud .note.bkn{ font-size:.58rem; color:var(--text3); margin-top:.45rem; }

/* แผนรายรับ (income plan v1, 2026-08-02) */
.bud.inc .pl{ font-size:.58rem; font-weight:600; background:var(--accent-tint);
  color:var(--accent); border-radius:var(--r-pill); padding:.05rem .5rem; }
.bcr .good2, .bcr.good2 span, .bcr.good2 b{ color:var(--sv-up); }
.bcr.wamber span, .bcr.wamber b, .wamber{ color:var(--life); }
.incbig{ text-align:center; font-size:1.7rem; font-weight:600; padding:.4rem 0 .1rem;
  color:var(--accent); }
.seg.im{ margin:.5rem 0 .45rem; }
.seg.im button{ font-size:.7rem; padding:.5rem 0; }

/* Dashboard "เดือนนี้โดยรวม" (2026-08-02) */
.dash .dtiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:.45rem; margin:.1rem 0 .5rem; }
.dash .dtile .lb{ font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text3); }
.dash .dtile .v{ font-size:1.05rem; font-weight:600; margin-top:.1rem; }
.dash .dtile .v.up{ color:var(--sv-up); } .dash .dtile .v.dn{ color:var(--sv-dn); }
.dash .dtile .v.wa{ color:var(--life); }
.dch{ display:flex; gap:.45rem; align-items:flex-end; height:3.4rem; padding:.25rem 0 .1rem; }
.dch .col{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:3px; align-items:center; }
.dch .pair{ display:flex; gap:2px; align-items:flex-end; justify-content:center; width:100%; }
.dch i{ display:block; width:38%; max-width:11px; border-radius:3px 3px 1px 1px; }
.dch .bi{ background:var(--sv-up); opacity:.85; }
.dch .bo{ background:var(--text3); opacity:.55; }
.dch .col.ov .bo{ background:var(--sv-dn); opacity:.8; }
.dch .m{ font-size:.56rem; color:var(--text3); }
.dch .col.cur .m{ color:var(--accent); font-weight:600; }

/* ================================================================
   Per-day breakdown — แตะการ์ด PER DAY ดู "ต่อวันมาจากไหน" (2026-08-02)
   ================================================================ */
#pdCard{ cursor:pointer; transition:transform var(--dur-1) var(--ease-out),
  background var(--dur-1) var(--ease-out); }
#pdCard:active{ transform:scale(.985); }
.hero .hb-pd .lbrow .edith{ color:var(--accent); opacity:.55; }
.pdw{ display:flex; flex-direction:column; gap:.42rem; margin:.55rem 0 .4rem; }
.pdw .r{ display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; }
.pdw .r .lb2{ color:var(--text2); font-size:.82rem; min-width:0; }
.pdw .r b.num{ white-space:nowrap; font-size:.92rem; }
.pdw .r.grp{ margin-top:.2rem; }
.pdw .r.grp .lb2{ color:var(--text); font-weight:600; }
.pdw .r.sub{ padding-left:.85rem; }
.pdw .r.sub .lb2{ color:var(--text3); font-size:.78rem; }
.pdw .r.sub b.num{ color:var(--text2); font-size:.8rem; font-weight:500; }
.pdw .r.mid{ border-top:1px dashed var(--border); padding-top:.5rem; margin-top:.2rem; }
.pdw .r.mid .lb2{ color:var(--text); font-weight:600; }
.pdw .r.tot{ border-top:1px solid var(--border); padding-top:.55rem; margin-top:.25rem; }
.pdw .r.tot .lb2{ color:var(--text); font-weight:600; }
.pdw .r.tot b.num{ color:var(--accent); font-size:1.08rem; }
.pdw .r.tot.neg b.num{ color:var(--sv-dn); }

/* ================================================================
   เงินเก็บของฉัน (Savings vault) — แถบหน้าแรก + sheet (2026-08-02)
   ================================================================ */
#vaultBar{ display:flex; align-items:center; gap:.5rem; cursor:pointer;
  background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-1);
  padding:.6rem .8rem; margin:0 0 var(--sp-3);
  transition:transform var(--dur-1) var(--ease-out); }
#vaultBar[hidden]{ display:none; }
#vaultBar:active{ transform:scale(.99); }
#vaultBar .vic{ flex:none; display:inline-flex; color:var(--iv,#a78bfa); opacity:.85; }
#vaultBar .vlb{ font-size:.78rem; color:var(--text2); }
#vaultBar b.num{ margin-left:auto; font-size:.95rem; }
#vaultBar b.num.neg{ color:var(--sv-dn); }
#vaultBar .chev{ color:var(--text3); font-size:.9rem; }
.vbal{ display:flex; align-items:baseline; justify-content:space-between; gap:.6rem;
  margin:.15rem 0 .55rem; }
.vbal span{ font-size:.8rem; color:var(--text2); }
.vbal b.num{ font-size:1.35rem; }
.vseg{ margin-bottom:.55rem; }
#sheet #vN{ width:100%; box-sizing:border-box; margin:.15rem 0 .55rem; font:inherit;
  font-size:.8rem; padding:.55rem .65rem; background:var(--surface-2); color:var(--text);
  border:0; border-radius:var(--r-md); transition:box-shadow var(--dur-1) var(--ease-out); }
#sheet #vN:focus{ outline:none; box-shadow:0 0 0 2px var(--accent); }
.vrow .vd{ white-space:nowrap; }
.vrow{ display:flex; align-items:center; gap:.55rem; padding:.35rem 0; }
.vrow .vd{ flex:none; font-size:.72rem; color:var(--text3); min-width:3.2em; }
.vrow .vn{ flex:1; min-width:0; font-size:.8rem; color:var(--text2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vrow b.num{ flex:none; font-size:.82rem; }
.vrow .vdel{ flex:none; border:0; background:transparent; color:var(--text3);
  font-size:.95rem; cursor:pointer; padding:.1rem .3rem; }

/* ================================================================
   ฟอร์มกรอก: หมวดจัดกลุ่มตามแผนงบ (ทีมออกแบบ 2026-08-02)
   — ไม่ใช้ uppercase/letter-spacing (ตัดปัญหาสระ-วรรณยุกต์ไทย)
   ================================================================ */
.cgs{ display:flex; flex-direction:column; margin-bottom:.6rem; }
.cgs .cats{ margin-bottom:.45rem; }
.cgh{ display:flex; align-items:center; gap:.4rem; margin:0 2px .3rem; }
.cgh .cgn{ font-size:.72rem; font-weight:600; color:var(--text2); }
.cgh .pct{ margin-left:auto; font-size:.7rem; color:var(--text3); }
.cgd{ display:inline-flex; gap:3px; align-items:center; }
.cgd i{ width:7px; height:7px; border-radius:50%; display:block; }
.cats button .d{ display:inline-block; width:6px; height:6px; border-radius:50%;
  margin-right:.32rem; vertical-align:middle; opacity:.9; }
.cats button.on .d{ opacity:1; }
.svnote{ margin:-.15rem 2px .45rem; }

/* ================================================================
   การ์ด "เหลือใช้ได้วันนี้" แบบแยกงบ (ทีมออกแบบ 2026-08-03)
   — แถวอิสระ/งบยืดหยุ่นเงียบ ๆ ด้านบน · เส้น ledger คั่น · ยอดรวมใหญ่เด่นล่าง
   ================================================================ */
.pd-split{ display:flex; flex-direction:column; gap:3px; margin:.3rem 0 0; }
.pd-split[hidden]{ display:none; }
.pd-row{ display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; }
.pd-row .pd-lb{ font-size:.6rem; color:var(--text3); display:inline-flex;
  align-items:center; gap:4px; min-width:0; }
.pd-row .fxdot{ width:5px; height:5px; border-radius:50%; flex:none;
  border:1px solid var(--text3); box-sizing:border-box; }
.pd-row .pd-v{ font-size:.72rem; color:var(--text2); white-space:nowrap; }
.pd-row.zero{ opacity:.45; }
.pd-row.neg .pd-v{ color:var(--sv-dn); }
.pd-sum.rule{ margin-top:.35rem; padding-top:.35rem; border-top:1px solid var(--border); }
/* การ์ดซ้ายจัดกลางแนวตั้ง เทียบการ์ดขวาที่สูงขึ้น */
.hero{ align-items:stretch; }
.hero .hb:first-child{ display:flex; flex-direction:column; justify-content:center; }

/* แผนรายรับ: ใบเสร็จวิธีคิดสูตร AUTO (ทีมออกแบบ 2026-08-03) */
.pexp-calc{ margin:.55rem 0 .1rem; padding:.6rem .75rem; background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--r-md); font-size:.76rem; }
.pexp-calc .crow{ display:flex; justify-content:space-between; align-items:baseline;
  gap:.6rem; padding:.16rem 0; color:var(--text2); }
.pexp-calc .cl{ min-width:0; display:inline-flex; align-items:center; gap:.3rem; flex-wrap:wrap; }
.pexp-calc .cv{ white-space:nowrap; }
.pexp-calc .crow.win{ color:var(--accent); font-weight:600; }
.pexp-calc .crow.lose{ color:var(--text3); opacity:.8; }
.pexp-calc .crow.sum{ border-top:1px dashed var(--border); margin-top:.25rem; padding-top:.4rem; }
.pexp-calc .chip{ font-size:.6rem; padding:0 .4rem; border-radius:var(--r-pill,99px);
  border:1px solid var(--accent); color:var(--accent); font-weight:600; }
.pexp-calc .wd{ width:5px; height:5px; border-radius:50%; background:var(--accent);
  flex:none; display:inline-block; }
.pexp-note{ margin:.35rem 2px .1rem; font-size:.66rem; color:var(--text3); text-align:center; }

/* แถวเงินเก็บใต้ยอดใช้ได้ตอนนี้ (2026-08-03) — แตะเปิด sheet เงินเก็บ */
.avlt{ display:flex; align-items:center; gap:.35rem; margin-top:.5rem;
  font-size:.66rem; color:var(--text3); cursor:pointer; min-width:0;
  transition:color var(--dur-1) var(--ease-out); }
.avlt:active{ color:var(--text2); }
.avlt .vic{ display:inline-flex; color:var(--iv,#a78bfa); opacity:.8; flex:none; }
.avlt .lb2{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.avlt b.num{ margin-left:auto; color:var(--text2); font-size:.74rem; white-space:nowrap; }

/* เงินสำรองฉุกเฉิน: stepper เป้าเดือน (2026-08-03) */
.emstep{ display:flex; align-items:center; justify-content:center; gap:.55rem;
  margin:.55rem 0 .2rem; }
.emstep .cgn{ font-size:.72rem; color:var(--text2); }
.emstep b.num{ font-size:1.1rem; min-width:2ch; text-align:center; }
.emb{ font:inherit; font-size:.9rem; width:2.1rem; height:2.1rem; border:0;
  border-radius:50%; background:var(--surface-2); color:var(--text); cursor:pointer;
  transition:background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.emb:active{ transform:scale(.94); background:var(--accent-tint); }
.brow.emRow{ cursor:pointer; }

/* ⓘ บนการ์ด "เหลือใช้ได้วันนี้" — popover อธิบายที่มาของเลข (ย้ายจากท้าย sheet 2026-08-06) */
.hero .pdi{ display:inline-flex; }
.hero .pdi .ib{ flex:none; padding:0; border:0; background:transparent; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; color:inherit;
  transition:transform var(--dur-1) var(--ease-out); }
.hero .pdi .ib:active{ transform:scale(.9); }
.hero .pdi.open .edith{ opacity:1; }
#isPop .exp+.exp{ margin-top:.4rem; }

/* หัวข้อใหญ่ขึ้นหนึ่งสเต็ปทั่วแอป (feedback ผู้ใช้ 2026-08-06) — ปรับที่ font-size ของ
   .hero .lb / .hinfo .hl / .shead b / h2 / .kc .lb / .shl / .dash .dtile .lb ด้านบน */

/* ================= บัตรเครดิต (2026-08-06) ================= */
/* ชิป "จ่ายด้วย" ในฟอร์มรายจ่าย */
.payrow{ display:flex; align-items:center; gap:.5rem; margin:.45rem 0 .15rem; min-width:0; }
.payrow .paylb{ flex:none; font-size:.7rem; color:var(--text3); }
.paychips{ display:flex; gap:.35rem; overflow-x:auto; scrollbar-width:none; min-width:0; }
.paychips::-webkit-scrollbar{ display:none; }
.paychips button{ flex:none; display:inline-flex; align-items:center; gap:.3rem;
  padding:.34rem .6rem; border:1px solid var(--line); border-radius:var(--r-pill);
  background:transparent; color:var(--text2); font-size:.74rem; cursor:pointer;
  transition:background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.paychips button.on{ background:var(--accent-tint); border-color:var(--accent); color:var(--accent); font-weight:600; }
.paychips .ccadd{ border-style:dashed; color:var(--text3); }
.payrow.empty{ margin:.3rem 0 0; }
.ccfirst{ border:0; background:transparent; color:var(--text3); font-size:.7rem; cursor:pointer;
  padding:.15rem 0; text-decoration:underline dotted; }
.bkimg{ border-radius:4px; object-fit:contain; background:#fff; flex:none; }
.bkic{ display:inline-flex; color:var(--text3); }
/* แถบบัตรหน้าแรก (ใต้เงินเก็บ) — โครงเดียวกับ vaultBar */
#cardBar{ margin:.5rem 0 0; display:flex; flex-direction:column; gap:.35rem; }
.ccrow{ display:flex; align-items:center; gap:.55rem; padding:.55rem .8rem; cursor:pointer;
  background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-1); min-width:0; }
.ccrow .ccn{ flex:1; min-width:0; display:flex; flex-direction:column; }
.ccrow .c1{ font-size:.78rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ccrow .c2{ font-size:.62rem; color:var(--text3); }
.ccrow .c2.ovd, .ovd{ color:var(--sv-dn); font-weight:600; }
.ccrow b.z{ color:var(--text3); font-weight:500; }
.ccrow .chev{ color:var(--text3); }
.ccbar{ flex:none; width:3rem; height:4px; border-radius:2px; background:var(--surface-2); overflow:hidden; }
.ccbar i{ display:block; height:100%; background:var(--accent); border-radius:2px; }
.ccbar i.warm{ background:#d9a13d; } .ccbar i.hot{ background:var(--sv-dn); }
.ccbar.big{ width:100%; height:5px; margin:.15rem 0 .45rem; }
/* ฟอร์มบัตร: grid โลโก้ธนาคาร + grid วันที่ (reuse .schg) */
.bgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.35rem; margin:.25rem 0 .55rem; }
.bgrid button{ display:flex; flex-direction:column; align-items:center; gap:.22rem;
  padding:.45rem .15rem; border:1px solid var(--line); border-radius:var(--r-md);
  background:transparent; color:var(--text2); font-size:.58rem; cursor:pointer; min-width:0;
  transition:background var(--dur-1) var(--ease-out); }
.bgrid button span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.bgrid button.on{ background:var(--accent-tint); border-color:var(--accent); color:var(--accent); font-weight:600; }
.bgrid .bkimg{ width:26px; height:26px; }
.schg.ccg{ margin-bottom:.45rem; }
.shead .bkimg{ vertical-align:-3px; margin-right:.25rem; }

/* ป้ายเตือนครบกำหนดบัตร — วงกลม+ตกใจขาว SVG ทับมุมโลโก้ (ทีมออกแบบ 2026-08-06)
   เหลือง ≤7 วัน · แดง ≤3 วัน · แดงกะพริบ (opacity pulse) วันนี้/เลยกำหนด */
.cclg{ position:relative; display:inline-flex; flex:none; }
.ccw{ position:absolute; top:-5px; right:-6px; line-height:0; }
.ccw .bg{ stroke:var(--surface); stroke-width:1.5; }
.ccw.l1 .bg{ fill:#F5A623; }
.ccw.l2 .bg, .ccw.l3 .bg{ fill:#E5484D; }
html:not(.dark) .ccw.l1 .bg{ fill:#D68A00; }   /* ธีมสว่าง: เข้มขึ้นให้ ! ขาวผ่าน contrast */
html:not(.dark) .ccw.l2 .bg, html:not(.dark) .ccw.l3 .bg{ fill:#D0323D; }
@keyframes ccpulse{ 0%,100%{opacity:1} 50%{opacity:.45} }
.ccw.l3{ animation:ccpulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .ccw.l3{ animation:none; opacity:1; } }
.shead .cclg .bkimg{ vertical-align:-3px; }