/* Sổ Quỹ — hệ thống thiết kế (đặc tả mục 8), theo bản mẫu giao diện đã chốt (docs/giao-dien-mau). */

:root {
  --primary: #2E6FF2; --primary-dk: #1E52C2;
  --income: #22A06B; --expense: #E5544B; --gold: #D9A521; --warn: #E8912D; --teal: #14A89A;
  --ink: #1B2436; --muted: #7D879B; --bg: #EFF5FE; --card: #FFFFFF;
  --line: #E2E9F5; --soft: #F2F6FD; --primary-soft: #E3ECFF;
  --income-soft: #E3F5EC; --expense-soft: #FCE9E7; --warn-soft: #FDF0E0; --gold-soft: #FBF3DC;
  --shadow: 0 4px 18px rgba(46, 111, 242, .08);
  --pad-key: #FFFFFF; --pad-fn: #E4EAF3; --pad-bg: #D5DCE7;
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, Roboto, sans-serif;
  --fs-tab: 11px; --fs-caption: 13px; --fs-small: 15px; --fs-body: 17px; --fs-title: 22px; --fs-large: 30px; --fs-amount: 34px;
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tabh: 64px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #EAEFFB; --muted: #8E9AB5; --bg: #0F1420; --card: #182033;
    --line: #26304A; --soft: #1D263B; --primary-soft: #1D2D52;
    --income-soft: #15332A; --expense-soft: #3A1E22; --warn-soft: #3A2A17; --gold-soft: #352D16;
    --shadow: 0 4px 18px rgba(0, 0, 0, .35);
    --pad-key: #2A3348; --pad-fn: #1E2536; --pad-bg: #121827;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #EAEFFB; --muted: #8E9AB5; --bg: #0F1420; --card: #182033;
  --line: #26304A; --soft: #1D263B; --primary-soft: #1D2D52;
  --income-soft: #15332A; --expense-soft: #3A1E22; --warn-soft: #3A2A17; --gold-soft: #352D16;
  --shadow: 0 4px 18px rgba(0, 0, 0, .35);
  --pad-key: #2A3348; --pad-fn: #1E2536; --pad-bg: #121827;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
button[disabled] { cursor: default; }
/* Ô nhập ≥ 16px để Safari iOS không tự phóng to (đặc tả 8.2) */
input, select, textarea { font: inherit; font-size: var(--fs-body); color: var(--ink); }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.inc { color: var(--income); } .exp { color: var(--expense); } .mut { color: var(--muted); }

#app { position: fixed; inset: 0; display: flex; flex-direction: column; overflow: hidden; max-width: 600px; margin: 0 auto; }
@media (min-width: 640px) { #app { box-shadow: 0 0 0 1px var(--line); } }

.view { flex: 1; overflow-y: auto; overflow-x: hidden; padding: calc(var(--safe-top) + 8px) 16px calc(var(--tabh) + 40px); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.view::-webkit-scrollbar { display: none; }

/* ---------- Tiêu đề & khối ---------- */
.topbar { display: flex; align-items: flex-end; justify-content: space-between; padding: 8px 0 14px; gap: 12px; }
.topbar h2 { font-size: var(--fs-large); font-weight: 800; margin: 0; letter-spacing: -.02em; line-height: 1.1; }
.topbar .sub { font-size: var(--fs-caption); color: var(--muted); font-weight: 600; margin-bottom: 2px; }
.iconbtn { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--card); box-shadow: var(--shadow); color: var(--ink); flex: none; }
.pill { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: var(--gold-soft); color: #9A700A; white-space: nowrap; }
:root[data-theme="dark"] .pill { color: var(--gold); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pill { color: var(--gold); } }

.card { background: var(--card); border-radius: 16px; box-shadow: var(--shadow); padding: 16px; }
.row { display: flex; align-items: center; gap: 12px; }
.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.sechead { display: flex; justify-content: space-between; align-items: baseline; margin: 26px 2px 10px; }
.sechead h3 { font-size: var(--fs-title); font-weight: 800; margin: 0; letter-spacing: -.01em; }
.link { color: var(--primary); font-weight: 600; font-size: var(--fs-small); cursor: pointer; }

.hero { background: linear-gradient(145deg, var(--primary) 0%, var(--primary-dk) 100%); color: #fff; border-radius: 20px; padding: 18px; box-shadow: 0 10px 26px rgba(46, 111, 242, .30); }
.hero .lbl { font-size: var(--fs-small); opacity: .88; font-weight: 600; }
.hero .big { font-size: var(--fs-amount); font-weight: 700; margin: 2px 0 14px; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero .big small { font-size: 20px; opacity: .8; margin-left: 4px; font-weight: 600; }
.hero .parts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; font-size: var(--fs-small); }
.hero .parts div { display: flex; justify-content: space-between; opacity: .95; gap: 6px; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.duo .card { padding: 14px; min-width: 0; }
.duo .lbl { font-size: var(--fs-small); color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: 7px; }
.duo .val { font-size: 20px; font-weight: 700; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }

.nudge { display: flex; align-items: center; gap: 12px; border-radius: 14px; padding: 13px 14px; margin-top: 12px; text-align: left; width: 100%; }
.nudge .t { font-weight: 700; font-size: var(--fs-body); } .nudge .s { font-size: var(--fs-caption); color: var(--muted); margin-top: 1px; }
.nudge.blue { background: var(--primary-soft); } .nudge.blue .ic { color: var(--primary); }
.nudge.orange { background: var(--warn-soft); } .nudge.orange .ic { color: var(--warn); }
.nudge .go { margin-left: auto; color: var(--muted); }

.donutwrap { display: flex; align-items: center; gap: 16px; }
.donut { width: 132px; height: 132px; flex: none; position: relative; }
.donut .mid { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font-size: var(--fs-caption); color: var(--muted); font-weight: 600; }
.donut .mid b { display: block; font-size: 17px; color: var(--ink); }
.legend { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.legend div { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); }
.legend span.n { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Danh sách ---------- */
.list { background: var(--card); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; width: 100%; text-align: left; min-height: 64px; }
.item + .item { border-top: 1px solid var(--line); }
.item .main { flex: 1; min-width: 0; }
.item .t { font-size: var(--fs-body); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .s { font-size: var(--fs-small); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.item .amt { text-align: right; flex: none; max-width: 48%; }
.item .amt .num { font-size: var(--fs-body); font-weight: 600; white-space: nowrap; }
.item .amt .bal { font-size: var(--fs-caption); color: var(--muted); margin-top: 2px; white-space: nowrap; }
.item .chev { color: var(--muted); flex: none; }
.item.soft { background: var(--soft); }
.daylabel { display: flex; justify-content: space-between; font-size: var(--fs-caption); font-weight: 700; color: var(--muted); margin: 18px 4px 7px; text-transform: uppercase; letter-spacing: .03em; }
.daylabel .num { text-transform: none; }
.empty { text-align: center; color: var(--muted); padding: 28px 20px; font-size: var(--fs-small); line-height: 1.5; }
.empty .big { font-size: var(--fs-body); font-weight: 700; color: var(--ink); margin-bottom: 4px; }

/* Icon danh mục: ô bo góc nền nhạt, icon tô màu (đặc tả 8.3) */
.cat { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; position: relative; }
.cat::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: .14; }
.cat svg { width: 24px; height: 24px; position: relative; }
.cat.lg { width: 52px; height: 52px; border-radius: 15px; } .cat.lg svg { width: 30px; height: 30px; }
.cat.sm { width: 36px; height: 36px; border-radius: 10px; } .cat.sm svg { width: 21px; height: 21px; }
.badge { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; color: #fff; font-weight: 800; font-size: 12.5px; letter-spacing: .02em; }

.seg { display: flex; background: var(--line); border-radius: 12px; padding: 3px; gap: 2px; margin-bottom: 14px; }
.seg button { flex: 1; padding: 8px 4px; border-radius: 9px; font-weight: 600; font-size: 15px; color: var(--muted); }
.seg button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.seg button[disabled] { opacity: .4; }

.grouphead { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-caption); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 20px 4px 7px; width: calc(100% - 8px); text-align: left; }
.grouphead .num { text-transform: none; letter-spacing: 0; font-size: var(--fs-small); }
.bar { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; margin-top: 7px; }
.bar i { display: block; height: 100%; border-radius: 99px; background: var(--primary); }
.addrow { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--primary); font-weight: 700; padding: 14px; border: 1.5px dashed var(--primary); border-radius: 14px; margin-top: 14px; width: 100%; opacity: .85; font-size: var(--fs-body); }

.tools { display: flex; gap: 8px; margin-bottom: 10px; }
.search { flex: 1; display: flex; align-items: center; gap: 8px; background: var(--card); border-radius: 12px; padding: 0 12px; box-shadow: var(--shadow); color: var(--muted); }
.search input { border: 0; background: none; outline: none; width: 100%; padding: 10px 0; min-width: 0; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 4px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 99px; background: var(--card); font-weight: 600; font-size: 15px; box-shadow: var(--shadow); white-space: nowrap; max-width: 100%; }
.chip.on { background: var(--primary); color: #fff; }
.chip svg { width: 15px; height: 15px; flex: none; }
.chip .x { opacity: .8; margin-left: 2px; }
.chips.wrap { flex-wrap: wrap; overflow: visible; }
.chips.wrap .chip { box-shadow: none; background: var(--card); border: 1px solid var(--line); }
.chips.wrap .chip.on { background: var(--primary); border-color: var(--primary); }
.monthnav { display: flex; align-items: center; gap: 6px; }
.monthnav .iconbtn { width: 34px; height: 34px; box-shadow: none; background: var(--card); }
.sumline { display: flex; justify-content: space-between; background: var(--card); border-radius: 14px; padding: 11px 14px; margin-top: 10px; box-shadow: var(--shadow); font-size: var(--fs-caption); font-weight: 600; color: var(--muted); gap: 8px; }
.sumline .num { font-size: 15px; font-weight: 700; display: block; margin-top: 2px; }

.cal { background: var(--card); border-radius: 16px; box-shadow: var(--shadow); padding: 12px 8px; margin-top: 10px; }
.calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.calgrid .wd { text-align: center; font-size: 12px; color: var(--muted); font-weight: 700; padding-bottom: 6px; }
.cell { aspect-ratio: 1 / 1.15; border-radius: 10px; display: flex; flex-direction: column; align-items: center; padding-top: 5px; font-size: 15px; font-weight: 600; max-width: 100%; min-width: 0; }
.cell .v { font-size: 10px; font-weight: 600; margin-top: 3px; letter-spacing: -.03em; white-space: nowrap; }
.cell.today { background: var(--primary-soft); color: var(--primary); }
.cell.sel { outline: 2px solid var(--primary); }
.cell.empty { visibility: hidden; }
.cell.future { color: var(--muted); opacity: .55; }

.status { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 99px; display: inline-block; white-space: nowrap; }
.status.due { background: var(--warn-soft); color: var(--warn); }
.status.ok { background: var(--income-soft); color: var(--income); }
.status.off { background: var(--line); color: var(--muted); }

.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.kv .k { font-size: var(--fs-caption); color: var(--muted); font-weight: 600; }
.kv .v { font-weight: 700; font-size: var(--fs-body); margin-top: 1px; overflow-wrap: anywhere; }

.bars { display: flex; align-items: flex-end; gap: 10px; height: 160px; padding-top: 10px; }
.bars .m { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.bars .pair { flex: 1; display: flex; align-items: flex-end; gap: 3px; width: 100%; justify-content: center; }
.bars .pair i { width: 12px; border-radius: 5px 5px 2px 2px; display: block; min-height: 1px; }
.bars .lb { font-size: 12px; color: var(--muted); font-weight: 700; }

/* ---------- Accordion (Khác) ---------- */
.acc { background: var(--card); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.acc + .acc { margin-top: 10px; }
.acc > button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; text-align: left; font-weight: 600; min-height: 62px; }
.acc > button .chv { margin-left: auto; transition: transform .25s; color: var(--muted); }
.acc.open > button .chv { transform: rotate(180deg); }
.acc .body { padding: 0 16px 16px; }
.acc:not(.open) .body { display: none; }
.setrow { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; gap: 12px; font-size: var(--fs-body); }
.setrow + .setrow { border-top: 1px solid var(--line); }
.btnlist { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; border-radius: 12px; background: var(--soft); font-weight: 600; font-size: 15px; }
.btn.primary { background: var(--primary); color: #fff; }
.btn.danger { color: var(--expense); background: var(--card); }
.btn.wide { grid-column: 1 / -1; }
.btn.big { padding: 15px; font-size: var(--fs-body); }
.btn[disabled] { opacity: .45; }
.toggle { width: 51px; height: 31px; border-radius: 99px; background: var(--line); position: relative; flex: none; transition: background .2s; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s; }
.toggle.on { background: var(--income); } .toggle.on::after { transform: translateX(20px); }
.rate { display: flex; align-items: center; gap: 8px; }
.rate input { width: 130px; text-align: right; border: 1px solid var(--line); background: var(--soft); border-radius: 10px; padding: 7px 10px; font-variant-numeric: tabular-nums; }
.soon { background: var(--soft); border-radius: 12px; padding: 12px 14px; font-size: var(--fs-small); color: var(--muted); line-height: 1.45; }

/* Cây danh mục */
.tree { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.tnode { background: var(--soft); border-radius: 14px; overflow: hidden; }
.tnode.hid > .tparent, .tkid.hid { opacity: .5; }
.tparent { display: flex; align-items: center; }
.tmain { flex: 1; display: flex; align-items: center; gap: 12px; padding: 10px 12px; text-align: left; min-width: 0; }
.tparent .grow, .tkid .grow { display: flex; flex-direction: column; }
.tparent .nm { font-weight: 700; font-size: var(--fs-body); }
.tkid .nm { font-size: var(--fs-body); }
.tparent .s, .tkid .s { font-size: var(--fs-caption); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ttoggle { width: 44px; height: 44px; display: grid; place-items: center; color: var(--muted); flex: none; transition: transform .2s; }
.ttoggle.on { transform: rotate(180deg); }
.tkids { background: var(--card); margin: 0 6px 6px; border-radius: 12px; }
.tkid { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px 9px 14px; text-align: left; color: var(--ink); }
.tkid > svg { color: var(--muted); flex: none; }
.tkid + .tkid { border-top: 1px solid var(--line); }
.tkid.add .nm { color: var(--primary); font-weight: 600; }

/* ---------- Thanh tab, nút + ---------- */
.tabbar { position: absolute; left: 0; right: 0; bottom: 0; background: var(--card); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 4px calc(6px + var(--safe-bottom)); z-index: 45; }
.tab { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: var(--fs-tab); font-weight: 600; color: var(--muted); padding: 4px 0; }
.tab svg { width: 25px; height: 25px; }
.tab.on { color: var(--primary); }
.plus { justify-self: center; width: 58px; height: 58px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; margin-top: -22px; box-shadow: 0 8px 20px rgba(46, 111, 242, .45), 0 0 0 5px var(--card); }
.plus svg { width: 28px; height: 28px; }

/* ---------- Lớp toàn màn hình ---------- */
.layer { position: absolute; left: 0; right: 0; top: 0; bottom: var(--tabh); background: var(--bg); z-index: 40; transform: translateY(102%); transition: transform .32s cubic-bezier(.2, .8, .2, 1); display: flex; flex-direction: column; }
.layer.full { bottom: 0; z-index: 50; }
.layer.show { transform: none; }
.lhd { display: grid; grid-template-columns: minmax(64px, auto) 1fr minmax(64px, auto); align-items: center; padding: calc(var(--safe-top) + 6px) 8px 10px; flex: none; gap: 4px; }
.lhd .ttl { justify-self: center; font-weight: 700; font-size: var(--fs-body); text-align: center; }
.lhd .hb { min-width: 44px; height: 44px; display: grid; place-items: center; color: var(--primary); border-radius: 12px; }
.lhd .hb.mut { color: var(--muted); }
.lhd .hb.txt { padding: 0 6px; font-weight: 700; font-size: var(--fs-body); }
.lhd .end { justify-self: end; }
.lbd { flex: 1; overflow-y: auto; padding: 0 16px 28px; scrollbar-width: none; }
.lbd::-webkit-scrollbar { display: none; }
.layer.kb-open .lbd { padding-bottom: 330px; }
.typebtn { justify-self: center; display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 12px; border: 1.5px solid var(--tc); color: var(--tc); font-weight: 700; font-size: var(--fs-body); background: var(--card); }
.typebtn[disabled] { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .layer, .kpad, .toggle, .toggle::after, .acc > button .chv, .menu, .ttoggle { transition: none; } }

.menu { position: absolute; left: 0; right: 0; top: calc(var(--safe-top) + 60px); background: var(--card); box-shadow: 0 12px 30px rgba(10, 20, 50, .18); z-index: 5; border-radius: 0 0 18px 18px; overflow: hidden; }
.menu button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 18px; font-size: var(--fs-body); font-weight: 500; text-align: left; }
.menu button + button { border-top: 1px solid var(--line); }
.menu button.on { background: var(--primary-soft); }
.menu button .ck { margin-left: auto; color: var(--primary); }
.menu button .soonlbl { margin-left: auto; font-size: 12px; color: var(--muted); }
.menu .cat { width: 36px; height: 36px; border-radius: 50%; }
.menu .cat svg { width: 22px; height: 22px; }
.menuscrim { position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--safe-top) + 60px); background: rgba(8, 14, 30, .35); z-index: 4; }

.fcard { background: var(--card); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; margin-bottom: 12px; position: relative; }
.fcard > * + * { border-top: 1px solid var(--line); }
.amountbox { padding: 14px 16px 16px; text-align: center; width: 100%; display: block; }
.amountbox .lb { font-size: var(--fs-small); color: var(--muted); font-weight: 500; }
.amountbox .val { font-size: var(--fs-amount); font-weight: 700; margin-top: 2px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amountbox .val small { font-size: 22px; margin-left: 4px; text-decoration: underline; text-underline-offset: 3px; }
.amountbox .expr { font-size: var(--fs-small); color: var(--muted); min-height: 20px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.amountbox.active { box-shadow: inset 0 0 0 2px var(--primary); border-radius: 16px; }
.frow { display: flex; align-items: center; gap: 14px; padding: 12px 16px; width: 100%; text-align: left; min-height: 60px; font-size: var(--fs-body); position: relative; }
.frow .ph { color: var(--muted); }
.frow .k { font-size: var(--fs-caption); color: var(--muted); font-weight: 500; }
.frow .v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frow .end { color: var(--muted); flex: none; display: flex; align-items: center; gap: 4px; font-size: var(--fs-small); }
.frow .end.link { color: var(--primary); font-weight: 600; }
.frow input, .frow select { border: 0; background: none; outline: none; width: 100%; padding: 0; min-width: 0; }
.frow select { -webkit-appearance: none; appearance: none; }
.frow .lead { width: 42px; display: grid; place-items: center; color: var(--muted); flex: none; }
.frow input[type="date"].overlay { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; }
.dash { width: 42px; height: 42px; border-radius: 12px; border: 1.5px dashed var(--muted); display: grid; place-items: center; color: var(--muted); flex: none; }
.quickhd { display: flex; align-items: center; gap: 6px; padding: 12px 16px 4px; color: var(--muted); font-size: var(--fs-small); font-weight: 500; }
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 4px; padding: 8px 8px 14px; }
.quick button, .ci { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 14px; min-width: 0; padding: 2px; text-align: center; line-height: 1.2; }
.quick button span.l, .ci span.l { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.quick button.on .cat, .ci.on .cat { box-shadow: 0 0 0 2px currentColor; }
.quick button.on span.l { font-weight: 700; }
.quick .edit { color: var(--primary); } .quick .edit span.l { color: var(--primary); }
.swapbtn { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; z-index: 1; border-top: 0 !important; }
.savebtn { width: 100%; padding: 15px; border-radius: 14px; background: var(--primary); color: #fff; font-weight: 700; font-size: var(--fs-body); margin-top: 4px; }
.hint { font-size: var(--fs-caption); color: var(--muted); padding: 0 4px 12px; line-height: 1.45; }
.diff { display: flex; justify-content: space-between; padding: 14px 16px; font-size: var(--fs-body); gap: 10px; }
.warnbox { background: var(--warn-soft); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; font-size: 15px; line-height: 1.4; }
.warnbox .btn { background: var(--card); }
.btnrow2 { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 4px; }
.flabel { font-size: var(--fs-caption); color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 16px 4px 8px; }
.catprev { display: flex; align-items: center; gap: 14px; padding: 6px 4px 16px; }
.catprev .nm { font-size: var(--fs-title); font-weight: 800; overflow-wrap: anywhere; }
.iconpick { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; background: var(--card); border-radius: 16px; padding: 12px; box-shadow: var(--shadow); }
.iconpick button { display: grid; place-items: center; padding: 3px; border-radius: 14px; }
.iconpick button.on { box-shadow: 0 0 0 2px currentColor; }
.swatches { display: flex; flex-wrap: wrap; gap: 12px; background: var(--card); border-radius: 16px; padding: 14px; box-shadow: var(--shadow); }
.swatches button { width: 34px; height: 34px; border-radius: 50%; }
.swatches button.on { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--ink); }
.pickgroup { margin-top: 14px; }
.pickgroup .ph { display: flex; align-items: center; gap: 12px; font-weight: 700; padding: 6px 4px 10px; font-size: var(--fs-body); }
.pickgroup .grid { background: var(--card); border-radius: 16px; box-shadow: var(--shadow); display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 4px; padding: 14px 8px; }
.check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; flex: none; color: #fff; }
.check.on { background: var(--primary); border-color: var(--primary); }

/* Bàn phím máy tính (đặc tả 8.4) */
.kpad { position: absolute; left: 0; right: 0; bottom: 0; background: var(--pad-bg); padding: 6px; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(5, 52px); gap: 6px; transform: translateY(102%); transition: transform .28s cubic-bezier(.2, .8, .2, 1); z-index: 6; }
.kpad.show { transform: none; }
/* chừa chỗ cho nút + nhô lên từ thanh tab */
.layer:not(.full) .kpad { padding-bottom: 30px; }
.layer.kb-open:not(.full) .lbd { padding-bottom: 360px; }
.kpad button { border-radius: 10px; background: var(--pad-key); font-size: 24px; font-weight: 400; box-shadow: 0 1px 0 rgba(0, 0, 0, .18); font-variant-numeric: tabular-nums; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.kpad button.fn { background: var(--pad-fn); font-size: 22px; }
.kpad button.done { grid-column: 4; grid-row: 4 / 6; background: var(--primary); color: #fff; font-size: 19px; font-weight: 600; }
.kpad button[disabled] { opacity: .35; }
.kpad button:active { filter: brightness(.92); }

/* ---------- Màn chào ---------- */
.welcome { min-height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 24px 8px; }
.welcome h1 { font-size: 34px; font-weight: 800; margin: 0; letter-spacing: -.02em; }
.welcome p { color: var(--muted); font-size: var(--fs-small); line-height: 1.5; margin: 0; }
.welcome .logo { width: 72px; height: 72px; border-radius: 20px; background: linear-gradient(145deg, var(--primary), var(--primary-dk)); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 26px rgba(46, 111, 242, .3); }

.toast { position: fixed; left: 50%; top: calc(var(--safe-top) + 14px); transform: translate(-50%, -20px); background: var(--ink); color: var(--card); padding: 11px 16px; border-radius: 12px; font-weight: 600; font-size: 15px; z-index: 99; opacity: 0; transition: .25s; pointer-events: none; display: flex; gap: 10px; align-items: center; max-width: calc(100% - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast.err { background: var(--expense); color: #fff; }
.toast button { color: var(--primary-soft); font-weight: 800; text-decoration: underline; white-space: nowrap; }
.backhd { display: flex; align-items: center; gap: 12px; padding: 8px 0 14px; }