:root {
  --navy: #2E3192;
  --navy-soft: #5558b0;
  --navy-text: #cfd0f0;
  --green-bg: #eaf5ea;
  --ink: #222;
  --muted: #777;
  --line: #ececec;
  --ok: #3B6D11;      --ok-bg: #EAF3DE;   --ok-bar: #639922;
  --warn: #854F0B;    --warn-bg: #FAEEDA; --warn-bar: #EF9F27;
  --bad: #A32D2D;     --bad-bg: #FCEBEB;  --bad-bar: #E24B4A;
  --off: #3C3489;     --off-bg: #EEEDFE;  --off-line: #CECBF6;
  --refund: #085041;
  --gold: #f5c542;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--green-bg); color: var(--ink); font-family: 'Kanit', system-ui, sans-serif; font-weight: 300; }
button { font: inherit; }
.app { max-width: 1100px; margin: 0 auto; min-height: 100vh; }
.loading { padding: 40px; text-align: center; color: var(--muted); }

/* header */
.hd { background: var(--navy); color: #fff; padding: 14px 16px 16px; }
.hd-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.logo { background: #fff; border-radius: 14px; padding: 3px 10px; height: 30px; display: flex; align-items: center; }
.logo img { height: 22px; }
.asof { font-size: 12px; color: var(--navy-text); }
.back { color: #fff; background: none; border: 0; padding: 0; font-size: 14px; cursor: pointer; }
.hello { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; }
.bubble { background: #fff; color: var(--ink); border-radius: 14px; padding: 8px 14px; font-size: 15px; font-weight: 400; position: relative; }
.bubble::after { content: ''; position: absolute; right: -7px; top: 50%; margin-top: -6px; border: 6px solid transparent; border-left-color: #fff; border-right: 0; }
.grovi { width: 92px; height: 92px; object-fit: contain; flex: none; }
.lbl { font-size: 13px; color: var(--navy-text); margin-top: 6px; }
.big { font-size: 30px; font-weight: 500; line-height: 1.2; }
.bar { height: 8px; background: var(--navy-soft); border-radius: 4px; margin-top: 8px; overflow: hidden; }
.bar > div { height: 100%; background: var(--gold); border-radius: 4px; }
.bar-legend { display: flex; justify-content: space-between; font-size: 12px; color: var(--navy-text); margin-top: 6px; gap: 8px; }
.year-pill { background: #fff; color: var(--navy); border: 0; border-radius: 12px; padding: 2px 10px; font-size: 13px; font-weight: 400; }

/* body */
.body { padding: 12px; display: grid; gap: 12px; }
.sec-title { font-size: 14px; font-weight: 500; color: #27500A; margin: 4px 2px -4px; }
.sec-title.off { color: var(--off); }
.card { background: #fff; border-radius: 14px; padding: 6px 14px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 0.5px solid var(--line); font-size: 14px; }
.row:last-child { border-bottom: 0; }
.row.link { cursor: pointer; }
.row .sub { font-size: 12px; color: var(--muted); }
.row .name { min-width: 0; }
.row .amt { text-align: right; white-space: nowrap; font-weight: 400; }
.more { color: var(--navy); }
.ok { color: var(--ok); } .warn { color: var(--warn); } .bad { color: var(--bad); }

/* today box */
.today { background: #fff; border-radius: 14px; padding: 12px 14px; border: 1.5px solid var(--navy); }
.today h3 { margin: 0 0 6px; font-size: 14px; font-weight: 500; color: var(--navy); }
.t-acct { font-size: 13px; color: #444; margin: 10px 0 6px; font-weight: 400; }
.t-acct:first-of-type { margin-top: 2px; }
.t-line { display: flex; justify-content: space-between; font-size: 14px; }
.t-line.plus { color: #27500A; }
.t-note { font-size: 12px; color: #555; margin: 2px 0 8px 18px; }
.t-note b { font-weight: 500; }
.t-left { border-radius: 10px; padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.t-left b { font-size: 19px; font-weight: 500; }
.t-left.ok { background: var(--ok-bg); } .t-left.warn { background: var(--warn-bg); } .t-left.bad { background: var(--bad-bg); }
.t-empty { font-size: 13px; color: var(--muted); }

/* off budget */
.offcard { background: var(--off-bg); border-radius: 14px; padding: 6px 14px; }
.offcard .row { border-color: var(--off-line); color: #26215C; }
.offcard .row.refund { color: var(--refund); }

/* overview */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { border-radius: 12px; padding: 10px; text-align: center; }
.stat b { display: block; font-size: 22px; font-weight: 500; }
.stat span { font-size: 12px; }
.stat.bad { background: var(--bad-bg); } .stat.warn { background: var(--warn-bg); } .stat.ok { background: var(--ok-bg); }

/* search */
.search { background: #fff; border-radius: 14px; padding: 10px 14px; display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--navy); }
.search input { border: 0; outline: 0; font: inherit; font-size: 16px; flex: 1; min-width: 0; background: transparent; }
.cat { background: #fff; border-radius: 14px; padding: 10px 14px; }
.cat-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.cat-name { font-size: 14px; font-weight: 400; }
.cat-desc { font-size: 12px; color: var(--muted); }
.cat-left { text-align: right; white-space: nowrap; }
.cat-left small { display: block; font-size: 11px; color: var(--muted); }
.cat-left b { font-size: 18px; font-weight: 500; }
.thin { height: 4px; background: #eee; border-radius: 2px; margin-top: 8px; overflow: hidden; }
.thin > div { height: 100%; border-radius: 2px; }
.thin .ok { background: var(--ok-bar); } .thin .warn { background: var(--warn-bar); } .thin .bad { background: var(--bad-bar); }
.pct { font-size: 11px; color: var(--muted); margin-top: 3px; }
.hint { font-size: 13px; color: #555; margin: 0 2px; }
#results { display: grid; gap: 8px; }
.showall { background: none; border: 1px dashed var(--navy); color: var(--navy); border-radius: 14px; padding: 8px; font-size: 14px; cursor: pointer; }

/* transactions */
.tx { padding: 9px 0; border-bottom: 0.5px solid var(--line); }
.tx:last-child { border-bottom: 0; }
.tx-top { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.tx-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.clamp.open { display: block; }
.docs > summary { list-style: none; background: #fff; border-radius: 14px; padding: 10px 14px; display: flex; justify-content: space-between; font-size: 14px; cursor: pointer; }
.docs > summary::-webkit-details-marker { display: none; }
.docs > summary span:first-child { color: #27500A; font-weight: 500; }
.docs > summary b { font-weight: 500; }
.docs[open] > summary { margin-bottom: 6px; }
details.sub summary { color: var(--navy); cursor: pointer; }

/* wide screens (unfolded foldables, tablets, desktop): two columns */
@media (min-width: 700px) {
  .wide { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 100vh; }
  .wide > .hd { min-height: 100vh; }
  .wide .body { align-content: start; }
}

/* login */
.login { max-width: 460px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.login-hd { background: var(--navy); color: #fff; text-align: center; padding: 28px 20px 30px; border-radius: 0 0 28px 28px; }
.login-hd .logo { display: inline-flex; }
.login-grovi { width: 150px; height: 150px; object-fit: contain; display: block; margin: 14px auto 6px; }
.login-hd h1 { margin: 0; font-size: 26px; font-weight: 500; }
.login-body { padding: 26px 22px; display: flex; flex-direction: column; gap: 14px; align-items: center; flex: 1; }
.login-bubble { text-align: center; width: 100%; }
.login-bubble::after { display: none; }
.gbtn { min-height: 44px; }
.login-msg { color: var(--bad); font-size: 14px; text-align: center; min-height: 20px; }
.login-note { font-size: 13px; color: #555; }
.login-foot { margin-top: auto; font-size: 12px; color: #888; text-align: center; }

/* local preview bar */
.devbar { background: #fff8d6; border-bottom: 1px solid #e7d58a; padding: 6px 10px; font-size: 12px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.devbar select, .devbar input { font: inherit; font-size: 12px; padding: 2px 4px; }
.devbar b { font-weight: 500; }