:root {
  color-scheme: light;
  --bg: #F5E9D4;
  --card: #FEFDF7;
  --accent: #DC842B;
  --accent-ink: #A85A12;
  --accent-soft: #F3DDBB;
  --line: #EFEADC;
  --ink: #33241A;
  --ink-2: #6F5C4B;
  --in: #1F7A4D;
  --out: #B8432F;
  --in-soft: #DDEDDF;
  --out-soft: #F6DDD4;
  --plain-soft: #EFE7D8;
  --shadow: 0 1px 2px rgba(80, 51, 30, .05), 0 6px 18px rgba(80, 51, 30, .06);
  --r: 18px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --tabbar: calc(62px + var(--safe-b));
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; position: fixed; inset: 0; width: 100%;
  background: var(--bg); color: var(--ink);
  font: 400 15px/1.4 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
  overscroll-behavior: none; touch-action: manipulation;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
input { font: inherit; font-size: 16px; color: var(--ink); background: none; border: 0; outline: 0; width: 100%; min-width: 0; padding: 0; user-select: text; -webkit-user-select: text; }
input::placeholder { color: #9B8976; }
h1, h2, p, dl, dd, ul { margin: 0; padding: 0; }
ul { list-style: none; }
.ic { flex: none; display: block; }

#app { position: fixed; inset: 0; overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#stack { position: absolute; inset: 0; }

/* Trang */
.page {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  background: var(--bg); contain: layout paint;
}
.page.hidden { display: none; }
.page.is-tab { padding-bottom: var(--tabbar); }
.page.is-pushed { z-index: 20; box-shadow: -12px 0 28px rgba(60, 38, 20, .12); }
.page.moving { will-change: transform; }

.nav {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: calc(var(--safe-t) + 8px) 12px 8px; min-height: calc(var(--safe-t) + 56px);
}
.nav-large { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 2px 4px 0; }
.nav-large h1 { font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.nav-title { flex: 1; font-size: 17px; font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-actions { display: flex; align-items: center; gap: 6px; min-width: 40px; justify-content: flex-end; }

.icon-btn {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--card); box-shadow: var(--shadow); color: var(--ink);
}
.icon-btn.soft { background: var(--plain-soft); box-shadow: none; }
.icon-btn.small { width: 36px; height: 44px; background: none; box-shadow: none; color: var(--ink-2); border-radius: 12px; }

.scroll {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain; padding: 4px 16px 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.scroll > * { flex: none; }
.page-foot { display: none; flex: none; padding: 10px 16px calc(var(--safe-b) + 12px); background: var(--bg); border-top: 1px solid var(--line); }
.page-foot.on { display: block; }

section { display: flex; flex-direction: column; gap: 10px; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; }
.sec-head h2 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.link { color: var(--accent-ink); font-weight: 600; font-size: 14px; flex: none; }

.card { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); }
.card.pad { padding: 16px; }
.card.list { padding: 2px 0; overflow: hidden; }
.card.center, .center { text-align: center; }
.wide { display: block; width: 100%; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.muted { color: var(--ink-2); }
.small { font-size: 13px; }
.fine { font-size: 13px; color: var(--ink-2); line-height: 1.45; padding: 0 4px; }
.big { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin-top: 2px; }
.mid { font-size: 17px; font-weight: 600; margin-top: 2px; letter-spacing: -.01em; }
.m { font-variant-numeric: tabular-nums; white-space: nowrap; }
.in { color: var(--in); }
.out { color: var(--out); }
.danger { color: var(--out); }
.bg-in { background: var(--in); }
.bg-out { background: var(--out); }

/* Hiệu ứng khi nhấn */
.tap { transition: transform .18s cubic-bezier(.2,.8,.2,1), background-color .15s, opacity .15s; }
.tap:active { transform: scale(.975); opacity: .82; }
.row.tap:active, .row-hit.tap:active { transform: none; opacity: 1; background: #F8F1E3; }
.tap-strong { transition: transform .18s cubic-bezier(.2,.8,.2,1), filter .15s; }
.tap-strong:active { transform: scale(.94); filter: brightness(.94); }
.tap-soft:active { opacity: .85; }

/* Thẻ tổng trên Tổng quan */
.hero {
  display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 18px;
  border-radius: 22px; color: #fff;
  background: linear-gradient(145deg, #DF8A33, #C86F1B);
  box-shadow: 0 10px 24px rgba(200, 111, 27, .28);
}
.hero-top { display: flex; align-items: center; justify-content: space-between; font-weight: 500; font-size: 15px; }
.hero-eye { display: grid; place-items: center; width: 34px; height: 34px; margin: -6px -6px -6px 0; }
.hero-num { font-size: 31px; font-weight: 700; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.hero-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.hero-cols small { display: block; font-size: 12.5px; font-weight: 500; opacity: .92; }

.tile { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--plain-soft); color: var(--ink-2); }
.tile.acc { background: var(--accent-soft); color: var(--accent-ink); }
.tile.in { background: var(--in-soft); color: var(--in); }
.tile.out { background: var(--out-soft); color: var(--out); }
.tile.solid { background: var(--accent); color: #fff; }
.tile.logo { background: #fff; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.tile.logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.center-logo { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 8px; }
.avatar { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 600; font-size: 13px; }
.avatar.off { background: var(--plain-soft); color: var(--ink-2); }

/* Dòng trong danh sách */
.row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; min-height: 58px; position: relative; }
.row + .row::before, .row + .field::before, .field + .row::before, .field + .field::before, .fav-head + .row::before {
  content: ''; position: absolute; top: 0; left: 64px; right: 0; height: 1px; background: var(--line);
}
.row.sel { background: #FBF1DF; }
.row-hit { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.acc-row { padding-right: 4px; }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row-title { font-weight: 500; font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-title.ph { color: var(--ink-2); font-weight: 400; }
.row-sub { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-end { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; max-width: 58%; }
.row-val { color: var(--ink-2); font-size: 14px; flex: none; }
.row-check { color: var(--accent-ink); }
.row > .ic, .row-hit > .ic { color: #A79582; }
.amt { font-weight: 600; font-size: 15px; }
.amt.plain { color: var(--ink); }
.sub-row { padding-left: 28px; }

.day { gap: 6px; }
.day-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 2px 4px; font-size: 13.5px; }
.day-head b { font-weight: 600; }
.day-sum { display: flex; gap: 8px; font-weight: 500; font-size: 13px; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 16px; color: var(--ink-2); text-align: center; }

/* Điều khiển phân đoạn */
.seg { position: relative; display: flex; background: #EADBC1; border-radius: 12px; padding: 3px; isolation: isolate; }
.seg-ind { position: absolute; top: 3px; bottom: 3px; left: 3px; max-width: calc(100% - 6px); background: var(--card); border-radius: 9px; box-shadow: 0 1px 3px rgba(60, 38, 20, .16); z-index: -1; }
.seg:has(.seg-btn:nth-of-type(2):last-of-type) .seg-ind { width: calc(50% - 3px) !important; }
.seg:has(.seg-btn:nth-of-type(3):last-of-type) .seg-ind { width: calc(33.333% - 2px) !important; }
.seg-btn { flex: 1 1 0; text-align: center; padding: 8px 4px; font-size: 14px; font-weight: 500; color: var(--ink-2); transition: color .2s; min-height: 36px; }
.seg-btn.on { color: var(--ink); font-weight: 600; }

.chip { display: inline-flex; align-items: center; gap: 5px; padding: 7px 11px; background: var(--card); border-radius: 99px; font-size: 13.5px; font-weight: 500; box-shadow: var(--shadow); min-height: 34px; color: var(--ink); }
.center-row { display: flex; justify-content: center; }

/* Tình hình thu chi */
.tc { display: flex; gap: 18px; align-items: stretch; }
.tc-bars { display: flex; align-items: flex-end; gap: 6px; height: 106px; width: 62px; flex: none; }
.tc-bar { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.tc-bar span { width: 100%; display: block; border-radius: 4px 4px 0 0; }
.tc-list { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 7px; }
.tc-list > div { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.tc-list dt { color: var(--ink-2); font-size: 14px; }
.tc-list dd { font-weight: 600; font-size: 15.5px; }
.tc-net { border-top: 1px solid var(--line); padding-top: 7px; }
.donut-wrap { display: flex; align-items: center; gap: 18px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.donut { width: 104px; height: 104px; flex: none; }
.detail-link { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; margin-top: 14px; padding: 11px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; font-size: 14.5px; }
.legend { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.legend li { display: flex; align-items: center; gap: 8px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legend-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend b { font-weight: 600; font-variant-numeric: tabular-nums; }
.row-legend { flex-direction: row; gap: 16px; justify-content: center; margin-top: 10px; }

/* Cột 5 tháng */
.bars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; height: 150px; }
.bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; min-width: 0; }
.bar-pair { flex: 1; min-height: 0; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.bar-pair i { width: 12px; display: block; border-radius: 4px 4px 0 0; }
.bar-label { font-size: 12.5px; color: var(--ink-2); }
.compare { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; }
.compare b { font-weight: 700; }

/* Lịch */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin: -8px -8px 6px; }
.cal-head b { font-weight: 600; font-size: 16px; }
.cal-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding-bottom: 10px; font-size: 13px; font-weight: 600; text-align: center; }
.cal-sum .muted { display: block; font-weight: 400; font-size: 12.5px; }
.cal-sum .m { font-size: 12.5px; white-space: normal; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cal-week { text-align: center; font-size: 12px; color: var(--ink-2); padding-bottom: 3px; }
.cal-cell { display: flex; flex-direction: column; align-items: center; min-height: 54px; padding: 4px 0 3px; border-radius: 9px; background: #FAF4E6; overflow: hidden; }
.cal-cell.blank { background: none; }
.cal-cell.today { background: var(--accent-soft); }
.cal-cell b { font-size: 12.5px; font-weight: 600; }
.cal-cell span { font-size: 10.5px; line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* Biểu đồ vùng */
.area-wrap { position: relative; touch-action: pan-y; }
.area { width: 100%; display: block; }
.axis { stroke: var(--line); stroke-width: 1; }
.axis-labels text { font-size: 10px; fill: var(--ink-2); font-family: inherit; }
.area-tip { position: absolute; top: -6px; left: 0; background: var(--ink); color: #fff; font-size: 12px; padding: 3px 8px; border-radius: 7px; white-space: nowrap; opacity: 0; transition: opacity .12s; pointer-events: none; }
.area-tip.on { opacity: 1; }
.area-cross { position: absolute; top: 14px; bottom: 20px; left: 0; width: 1px; background: var(--ink-2); opacity: 0; pointer-events: none; }
.area-cross.on { opacity: .5; }

.kv { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.kv > div { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.kv dt { color: var(--ink-2); }
.kv dd { font-weight: 600; }
.kv.tight { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.kv-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 500; }
.big-m { font-size: 19px; font-weight: 700; }
.kv-row { display: flex; justify-content: space-between; gap: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kv-row .muted { font-weight: 400; font-size: 13px; }
.kv-row .end { text-align: right; }
.progress { height: 8px; border-radius: 99px; background: var(--plain-soft); overflow: hidden; margin: 10px 0; }
.progress span { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.progress.over span { background: var(--out); }
.cur-badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); margin-bottom: 8px; }
.budget { text-align: left; display: flex; flex-direction: column; }

/* Tài khoản */
.total { display: flex; justify-content: space-between; align-items: center; }
.fold { display: block; }
.fold summary { display: flex; justify-content: space-between; align-items: center; list-style: none; padding: 6px 4px 8px; font-weight: 600; font-size: 16px; cursor: pointer; }
.fold summary::-webkit-details-marker { display: none; }
.fold-end { display: flex; align-items: center; gap: 6px; font-weight: 500; font-size: 14px; color: var(--ink-2); }
.fold-end .ic { transition: transform .22s; }
.fold[open] .fold-end .ic { transform: rotate(180deg); }
.acc-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.acc-group-head { display: flex; justify-content: space-between; padding: 0 4px; color: var(--ink-2); font-size: 13.5px; font-weight: 500; }
.fin-group { padding: 4px 0; display: block; width: 100%; }
.fin-group + .fin-group { border-top: 1px solid var(--line); }
.fin-row { display: flex; align-items: center; gap: 12px; padding: 7px 14px; }
.fin-row span:first-of-type { flex: 1; }
.fin-row.head { font-weight: 500; }
.fin-row.head .m { font-weight: 600; }
.fin-row.sub { padding: 2px 14px 4px 64px; color: var(--ink-2); font-size: 14px; }

/* Ô nhập */
.field { display: flex; align-items: center; gap: 10px; padding: 10px 14px; min-height: 54px; position: relative; }
.field > span { flex: none; color: var(--ink-2); font-size: 14px; }
.field input { text-align: right; }
.field.note input { text-align: left; }
.field.date input { width: auto; flex: 1; font-weight: 500; }
.field-val { margin-left: auto; font-weight: 500; }
.field-name input { font-weight: 600; }
.grow { flex: 1 !important; }
.big-field { flex-direction: column; align-items: center; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 14px; gap: 2px; }
.money-input { text-align: center !important; font-size: 28px; font-weight: 700; color: var(--accent-ink); }
.searchbox { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 42px; background: var(--card); border-radius: 12px; box-shadow: var(--shadow); color: var(--ink-2); }
.searchbox input { color: var(--ink); }
.hist-tools { position: sticky; top: -4px; z-index: 3; display: flex; align-items: center; gap: 8px; margin: 0 -16px; padding: 8px 16px; background: var(--bg); }
.hist-tools .searchbox { flex: 1; min-width: 0; }
.hist-tools .chip { flex: none; height: 42px; border-radius: 12px; }
.row-sub.warn { color: var(--out); }
.switch { width: 46px; height: 28px; flex: none; border-radius: 99px; background: #D8CDBC; position: relative; transition: background-color .22s; }
.switch i { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .26s cubic-bezier(.32,.72,0,1); }
.switch.on { background: var(--accent); }
.switch.on i { transform: translateX(18px); }
.box { width: 24px; height: 24px; flex: none; border-radius: 7px; border: 1.5px solid #C9B9A3; display: grid; place-items: center; color: transparent; }
.box.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.card-row { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); }

.btn { display: block; width: 100%; height: 52px; border-radius: 14px; text-align: center; font-weight: 700; font-size: 17px; }
.btn.primary { background: var(--accent); color: #fff; box-shadow: 0 6px 16px rgba(200, 111, 27, .28); }
.btn.ghost { background: transparent; font-weight: 600; font-size: 15.5px; }

.icon-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.icon-pick { aspect-ratio: 1; display: grid; place-items: center; border-radius: 12px; background: var(--plain-soft); color: var(--ink-2); }
.icon-pick.on { background: var(--accent); color: #fff; }

/* Menu dưới */
#tabbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 10; height: var(--tabbar);
  padding-bottom: var(--safe-b); display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
  background: var(--card);
  border-top: 1px solid var(--line);
}
.tab { display: flex; flex-direction: column; align-items: center; gap: 2px; height: 100%; justify-content: center; color: var(--ink-2); font-size: 11px; font-weight: 500; transition: color .15s, transform .15s; }
.tab:active { transform: scale(.94); }
.tab.on { color: var(--accent-ink); font-weight: 600; }
.tab-add { justify-self: center; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; box-shadow: 0 6px 16px rgba(200, 111, 27, .4); margin-top: -14px; }

/* Bảng trượt */
#sheets { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.sheet-wrap { position: absolute; inset: 0; pointer-events: auto; }
.backdrop { position: absolute; inset: 0; background: rgba(40, 26, 14, .38); }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: calc(100% - var(--safe-t) - 44px);
  background: var(--bg); border-radius: 22px 22px 0 0; display: flex; flex-direction: column;
  box-shadow: 0 -8px 30px rgba(50, 30, 15, .18); overflow: hidden;
}
.sheet.full { height: calc(100% - var(--safe-t) - 44px); }
.grab { flex: none; display: flex; justify-content: center; padding: 8px 0 2px; }
.grab span { width: 38px; height: 5px; border-radius: 99px; background: #D6C7B0; }
.sheet-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 4px 12px 10px; min-height: 52px; }
.sheet-side { width: 44px; flex: none; display: flex; }
.sheet-side.end { justify-content: flex-end; }
.sheet-title { flex: 1; min-width: 0; display: flex; justify-content: center; font-weight: 600; font-size: 17px; text-align: center; }
.sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 2px 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.sheet-body > * { flex: none; }
.sheet.fit .sheet-body { padding-bottom: calc(var(--safe-b) + 18px); }
.sheet-foot { display: none; flex: none; padding: 8px 16px calc(var(--safe-b) + 12px); background: var(--bg); }
.sheet-foot.on { display: block; }

/* Form ghi chép */
.type-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; font-size: 15.5px; }
.amount { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; padding: 12px; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); border: 2px solid transparent; transition: border-color .15s; }
.amount.active { border-color: var(--accent); }
.amount-num { display: flex; align-items: center; justify-content: center; gap: 1px; font-size: 32px; font-weight: 700; letter-spacing: -.025em; font-variant-numeric: tabular-nums; white-space: nowrap; max-width: 100%; overflow: hidden; contain: content; }
.amount-unit { margin-left: 6px; }
.caret { display: none; width: 2px; height: 32px; background: var(--accent); animation: caret 1s steps(1) infinite; }
.amount.active .caret { display: block; }
@keyframes caret { 50% { opacity: 0; } }
.form-sheet .card, .form-sheet .amount { box-shadow: none; }
.adj { display: flex; flex-direction: column; gap: 6px; }
.fav-head { padding: 8px 14px 4px; color: var(--ink-2); font-size: 13px; font-weight: 500; position: relative; }
.fav-head::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line); }
.fav-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 2px 8px 10px; }
.fav-grid.in-card { padding: 10px 8px; }
.fav { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; font-size: 12px; line-height: 1.2; text-align: center; border-radius: 12px; min-height: 76px; }
.fav span:last-child { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fav.on { font-weight: 600; color: var(--accent-ink); }
.link-row { display: block; width: 100%; padding: 12px; text-align: center; color: var(--accent-ink); font-weight: 600; }
.swap-btn { position: absolute; right: 44px; top: 42px; z-index: 2; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); }
.card.list:has(.swap-btn) { position: relative; }
.keypad {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 44px; gap: 1px;
  margin: 10px -16px calc(-12px - var(--safe-b)); padding-bottom: var(--safe-b);
  background: #E2D6C3; touch-action: none; contain: layout paint;
}
.key { background: var(--card); text-align: center; font-size: 21px; font-weight: 500; display: grid; place-items: center; font-variant-numeric: tabular-nums; touch-action: none; }
.key-fn { background: #F1E8D8; color: var(--ink); font-size: 19px; }
.key-done { grid-row: span 2; background: var(--accent); color: #fff; font-size: 17px; font-weight: 700; }
.key[data-k="del"] .ic { stroke-width: 2.1; }
.key.down { background: #D8C8AE; }
.key-done.down { background: #B96E1F; }
.pick-tools { display: flex; align-items: center; justify-content: space-between; }

/* Thông báo */
#toast {
  position: absolute; left: 16px; right: 16px; bottom: calc(var(--tabbar) + 14px); z-index: 50;
  display: flex; justify-content: center; pointer-events: none;
  opacity: 0; transform: translate3d(0, 14px, 0);
  transition: opacity .22s, transform .3s cubic-bezier(.32,.72,0,1);
}
#toast.on { opacity: 1; transform: none; }
#toast.on .toast-in { pointer-events: auto; }
.toast-in { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; background: #33241A; color: #fff; font-weight: 500; font-size: 14.5px; box-shadow: 0 8px 22px rgba(30, 18, 8, .28); }
.toast-in.err { background: var(--out); }
.toast-undo { color: #F7C98C; font-weight: 700; flex: none; min-height: 24px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Đăng nhập */
#login { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: calc(var(--safe-t) + 16px) 16px calc(var(--safe-b) + 16px); background: var(--bg); overflow: auto; }
.login-card { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.login-card img { border-radius: 18px; box-shadow: var(--shadow); }
.login-card h1 { margin: 4px 0 0; font-size: 24px; font-weight: 700; }
.login-card p { margin: 0; }
.login-card .field { width: 100%; }
.login-err { min-height: 20px; font-size: 14px; color: var(--out); }

/* Máy tính: giữ đúng khung như điện thoại, đặt giữa màn hình */
@media (min-width: 600px) {
  html, body { background: var(--plain-soft); }
  #app { left: 50%; right: auto; width: 430px; margin-left: -215px; background: var(--bg); box-shadow: 0 0 0 1px var(--line), 0 12px 40px rgba(80, 51, 30, .12); contain: layout paint; }
  #login .login-card { max-width: 400px; }
}

/* Báo mất kết nối */
#syncBar { position: absolute; top: calc(var(--safe-t) + 6px); left: 50%; transform: translateX(-50%); z-index: 30; display: none; max-width: calc(100% - 32px); padding: 6px 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
#syncBar.on { display: block; }

/* Mã bảo vệ */
#lock { position: fixed; inset: 0; z-index: 110; display: flex; align-items: center; justify-content: center; padding: calc(var(--safe-t) + 16px) 16px calc(var(--safe-b) + 16px); background: var(--bg); overflow: auto; }
.lock-card { width: 100%; max-width: 320px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.lock-card h1 { margin: 0; font-size: 22px; font-weight: 700; }
.lock-dots { display: flex; gap: 14px; }
.lock-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--accent-ink); }
.lock-dots i.on { background: var(--accent-ink); }
.lock-keys { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lock-keys button { height: 60px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); font-size: 24px; font-weight: 600; color: var(--ink); }
.lock-keys button:active { background: var(--accent-soft); }

/* Màu hạng mục theo nhóm. Đỏ và xanh lá để dành cho số tiền thu, chi. */
.g-kd-vao, .g-cn-thu { --g-bg: #D5ECE6; --g-ink: #12685A; }
.g-kd-hang { --g-bg: #F6DFC9; --g-ink: #9A4F12; }
.g-kd-cp { --g-bg: #EFE3BE; --g-ink: #6F540E; }
.g-cn-tyeu { --g-bg: #DCE8F6; --g-ink: #235C96; }
.g-cn-happy { --g-bg: #F8DDE6; --g-ink: #A93562; }
.g-cn-edu { --g-bg: #E7E0F5; --g-ink: #5E429F; }
.g-cn-cho { --g-bg: #F8EDB8; --g-ink: #6F5900; }
.g-cn-ts { --g-bg: #DFE7EA; --g-ink: #3F5D69; }
.tile[class*="g-"], .icon-pick[class*="g-"] { background: var(--g-bg, var(--plain-soft)); color: var(--g-ink, var(--ink-2)); }
.icon-pick.on[class*="g-"] { background: var(--accent); color: #fff; }

/* Sắp xếp hạng mục */
.text-btn { height: 44px; padding: 0 12px; color: var(--accent-ink); font-weight: 700; font-size: 16px; }
.icon-btn.small:disabled { opacity: .25; }

.group-move { align-items: center; }
.group-move b { color: var(--ink); font-weight: 700; }
.group-move-btns { display: flex; gap: 2px; }

/* Chuyển giữa hai loại tiền: số gửi, số nhận và tỷ giá nằm chung một khung */
.amount-box { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.form-sheet .amount-box { box-shadow: none; }
.amount-box .amount { border-radius: var(--r) var(--r) 0 0; background: transparent; }
.amount-to { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding: 10px 12px 12px; border: 2px solid transparent; border-top: 1px solid var(--line); border-radius: 0 0 var(--r) var(--r); transition: border-color .15s; }
.amount-to.active { border-color: var(--accent); }
.amount-to-num { font-size: 19px; font-weight: 700; color: var(--accent-ink); font-variant-numeric: tabular-nums; }

/* Loại tài khoản: nền màu đậm, biểu tượng trắng, nổi hơn các biểu tượng khác */
.tile.t-cash, .tile.t-bank, .tile.t-ewallet, .tile.t-other { color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 2px 6px rgba(80, 51, 30, .16); }
.tile.t-cash { background: linear-gradient(145deg, #3FAF7E, #1F7A55); }
.tile.t-bank { background: linear-gradient(145deg, #4A90D0, #235C96); }
.tile.t-ewallet { background: linear-gradient(145deg, #9A76DE, #5E429F); }
.tile.t-other { background: linear-gradient(145deg, #E9A44D, #B5681A); }

/* Loại ghi chép */
.tile[class*="ty-"] { color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 2px 6px rgba(80, 51, 30, .16); }
.tile.ty-chi { background: linear-gradient(145deg, #E0735C, #A83A28); }
.tile.ty-thu { background: linear-gradient(145deg, #3FAF7E, #1F7A55); }
.tile.ty-chovay { background: linear-gradient(145deg, #E9A44D, #B5681A); }
.tile.ty-divay { background: linear-gradient(145deg, #9A76DE, #5E429F); }
.tile.ty-chuyen { background: linear-gradient(145deg, #4A90D0, #235C96); }
.tile.ty-thuno, .tile.ty-trano { background: linear-gradient(145deg, #C49A5E, #8A6330); }
.tile.ty-dieuchinh { background: linear-gradient(145deg, #7E9AA6, #3F5D69); }

/* Sao lưu */
.warn-card { background: var(--out-soft); color: var(--out); font-weight: 600; font-size: 14px; }
.btn:disabled { opacity: .6; }

/* Nút sao lưu ở góc Tổng quan */
.data-pill { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow); color: var(--in); font-size: 13px; font-weight: 600; white-space: nowrap; }
.data-pill.warn { background: var(--out-soft); color: var(--out); }