/* Finn Wallet — tampilan
   Konsep: buku kas yang tenang. Hitam, abu, dan putih; hanya nominal masuk (hijau) dan keluar (merah) yang berwarna. */
:root {
  --bg: #F1F1F1;
  --card: #FFFFFF;
  --soft: #F4F4F4;
  --ink: #141414;
  --muted: #5F5F5F;
  --faint: #8A8A8A;
  --line: #E6E6E6;
  --line2: #D0D0D0;
  --accent: #141414;
  --accent-ink: #FFFFFF;
  --accent-soft: #EBEBEB;
  --accent-deep: #141414;
  --panel: #141414;
  --panel-ink: #F5F5F5;
  --panel-muted: #B0B0B0;
  --panel-line: #333333;
  --mint: #FFFFFF;
  --good: #141414;
  --good-soft: #EBEBEB;
  --warn: #3A3A3A;
  --warn-line: #9A9A9A;
  --warn-soft: #F0F0F0;
  --bad: #141414;
  --bad-soft: #DADADA;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Poppins", "Inter", system-ui, sans-serif;
  --mono: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* angka: Inter dengan lebar angka sama, nol tanpa titik */
  --in: #15803D;
  --out: #C62828;
  --in-dark: #6EE7A0;
  --out-dark: #FF8A80;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E0E0E; --card: #191919; --soft: #222222; --ink: #EDEDED; --muted: #A3A3A3; --faint: #868686;
    --line: #2A2A2A; --line2: #3A3A3A; --accent: #EDEDED; --accent-ink: #111111; --accent-soft: #2A2A2A; --accent-deep: #EDEDED;
    --panel: #000000; --panel-ink: #EDEDED; --panel-muted: #9A9A9A; --panel-line: #2C2C2C; --mint: #FFFFFF;
    --good: #EDEDED; --good-soft: #262626; --warn: #D4D4D4; --warn-line: #6A6A6A; --warn-soft: #232323;
    --bad: #FFFFFF; --bad-soft: #3A3A3A; --in: #4ADE80; --out: #F87171; color-scheme: dark;
  }
}

* { box-sizing: border-box }
html, body { margin: 0 }
body {
  background: var(--bg); color: var(--ink); font: 15px/1.45 var(--font);
  -webkit-font-smoothing: antialiased; min-height: 100vh;
  padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}
button, input, select, textarea { font: inherit; color: inherit }
a { color: var(--accent) }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; white-space: nowrap }
.num.in { color: var(--in) } .num.out { color: var(--out) }
.panel .num.in { color: var(--in-dark) } .panel .num.out { color: var(--out-dark) }
.muted { color: var(--muted) }
.good { color: var(--good) }
.bad { color: var(--bad) }
[hidden] { display: none !important }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important } }

/* ---------- kerangka ---------- */
.topbar { background: var(--panel); color: var(--panel-ink); position: sticky; top: 0; z-index: 20; padding-top: env(safe-area-inset-top, 0px) }
.topbar-inner { max-width: 1180px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); min-height: 54px; display: flex; align-items: center; gap: 24px }
.brand { font: 700 18px var(--display); color: var(--panel-ink); text-decoration: none; letter-spacing: -0.01em }
.brand span { color: #8A8A8A }
.topnav { display: none; gap: 4px; flex: 1 }
.topnav a { padding: 8px 12px; border-radius: 8px; color: var(--panel-muted); text-decoration: none; font-size: 14px }
.topnav a[aria-current="page"] { background: #303030; color: #fff; font-weight: 600 }
.net { margin-left: auto; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: #3A3A3A; color: #FFFFFF }
.view { max-width: 1180px; margin: 0 auto; padding: 18px max(16px, env(safe-area-inset-right, 0px)) 32px max(16px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 16px; outline: none }
.loading { padding: 40px 0; text-align: center; color: var(--muted) }

.bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--card); border-top: 1px solid var(--line2);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center;
  padding: 6px max(4px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(4px, env(safe-area-inset-left, 0px));
}
.bottomnav a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; font-size: 11px; color: var(--muted); text-decoration: none; min-height: 52px; justify-content: center }
.bottomnav a[aria-current="page"] { color: var(--accent); font-weight: 600 }
.bottomnav a.add .ico { width: 60px; height: 60px; border-radius: 19px; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; margin-top: -22px; box-shadow: 0 6px 16px rgba(0,0,0,.25) }
.bottomnav a.add .ico svg { width: 30px; height: 30px }
.bottomnav a.add:active .ico { transform: scale(.96) }
.bottomnav svg { width: 22px; height: 22px }

@media (min-width: 900px) {
  body { padding-bottom: 0 }
  .topnav { display: flex }
  .bottomnav { display: none }
  .view { padding-top: 28px; gap: 20px }
}

/* ---------- komponen ---------- */
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px }
.page-head h1 { margin: 0; font: 700 26px/1.15 var(--display); letter-spacing: -0.01em; text-wrap: balance }
.eyebrow { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center }
.grid2 { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) }
@media (min-width: 900px) { .grid2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) } .grid2.wide-left { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) } }

.card { background: var(--card); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0 }
.card h2 { margin: 0; font-size: 15px; font-weight: 600 }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap }
.panel { background: var(--panel); color: var(--panel-ink); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 12px }
.panel .muted { color: var(--panel-muted) }
.panel .big { font: 600 30px var(--mono); color: var(--panel-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em }
.panel .big.plus { color: var(--in-dark) }
.panel .split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 12px; border-top: 1px solid var(--panel-line) }
.panel .split span { display: flex; flex-direction: column; gap: 2px; font-size: 12px }
.panel .split .num { font-size: 15px; color: var(--panel-ink) }
.panel .split .num.in { color: var(--in-dark) } .panel .split .num.out { color: var(--out-dark) }

.home { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "cash" "short" "acc" "budget" "spend" "recent" }
.home-cash { grid-area: cash } .home-acc { grid-area: acc; display: flex; flex-direction: column; gap: 16px; min-width: 0 } .home-recent { grid-area: recent } .home-spend { grid-area: spend } .home-budget { grid-area: budget }
@media (min-width: 900px) { .home { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-areas: "cash acc" "short acc" "budget acc" "spend acc" "recent acc"; align-items: start } }
.pillselect {
  height: 34px; border-radius: 999px; border: 1px solid var(--line2); background-color: var(--card); color: var(--ink);
  padding: 0 30px 0 12px; font-size: 13px; appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 16px) 14px, calc(100% - 11px) 14px; background-size: 5px 5px; background-repeat: no-repeat;
}
.pbar { height: 8px; border-radius: 999px; background: var(--panel-line); overflow: hidden }
.pbar > span { display: block; height: 100%; background: var(--mint); border-radius: 999px }
.blist { display: flex; flex-direction: column }
.bline { border-bottom: 1px solid var(--line) }
.bline:last-child { border-bottom: 0 }
.bline-head { display: flex; flex-direction: column; gap: 7px; width: 100%; padding: 11px 6px; margin: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; border-radius: 8px }
.bline-head:hover { background: var(--soft) }
.bline-top, .bline-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-width: 0 }
.bline-top .num { font-size: 13px }
.bl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px }
.bl-main { font-size: 12px }
@media (max-width: 559px) { .bl-main { display: none } }
.bline-body { display: flex; flex-direction: column; gap: 6px; padding: 4px 6px 14px 22px }
.bline.open .bline-head { background: var(--soft) }
.spend-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) }
@media (min-width: 1100px) { .spend-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) } }
.donut-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px }
.donut { width: 150px; height: 150px; flex: none; margin: 0 auto }
.donut-k { font: 500 8px var(--font); fill: var(--muted) }
.donut-v { font: 600 9.5px var(--mono); fill: var(--ink) }
.legend { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column }
.lrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 6px; margin: 0 -6px; border: 0; border-radius: 8px; background: none; color: inherit; text-align: left; font-size: 14px; cursor: pointer; width: calc(100% + 12px) }
.lrow:hover { background: var(--soft) }
.lrow.static { cursor: default }
.lrow .num { font-size: 13px; white-space: nowrap }
.lname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0 }
.spend-col { display: flex; flex-direction: column; gap: 4px; min-width: 0 }
.srow { display: flex; flex-direction: column; gap: 6px; padding: 7px 6px; margin: 0 -6px; border: 0; border-radius: 8px; background: none; text-align: left; color: inherit; cursor: pointer; width: calc(100% + 12px) }
.srow:hover:not(:disabled) { background: var(--soft) }
.srow:disabled, .srow.static { cursor: default }
.srow-top { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; min-width: 0 }
.srow-top > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.srow-top .num { font-size: 13px }
.sbar { display: block; height: 6px; border-radius: 999px; background: var(--soft); overflow: hidden }
.sbar > span { display: block; height: 100%; border-radius: 999px }
.panel .big.minus { color: var(--out-dark) }
.list { display: flex; flex-direction: column }
.li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); min-width: 0 }
.li:last-child { border-bottom: 0 }
.li .main { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.li .main > span:first-child { overflow: hidden; text-overflow: ellipsis }
.li .sub { font-size: 12px; color: var(--muted) }
button.li, a.li { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); text-align: left; cursor: pointer; color: inherit; text-decoration: none }
button.li:hover, a.li:hover { background: var(--soft) }
.total { display: flex; justify-content: space-between; font-weight: 600; padding-top: 4px }

.btn { height: 42px; padding: 0 16px; border-radius: 11px; border: 1px solid var(--line2); background: var(--card); color: var(--ink); font-weight: 500; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; white-space: nowrap }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600 }
.btn.ghost { background: transparent; border-color: transparent; color: var(--accent); padding: 0 8px }
.btn.danger { color: var(--bad); border-color: var(--bad-soft) }
.btn.small { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 9px }
.btn.block { width: 100%; height: 52px; font-size: 16px; border-radius: 14px }
.btn:disabled { opacity: .5; cursor: not-allowed }

.chip { height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card); font-size: 13px; cursor: pointer; white-space: nowrap }
.chip[aria-pressed="true"] { border: 1.5px solid var(--accent); background: var(--accent-soft); color: var(--accent-deep); font-weight: 600 }
.chip.more { border-style: dashed; color: var(--muted) }
.chips { display: flex; flex-wrap: wrap; gap: 8px }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none }
.pill { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--soft); color: var(--muted); white-space: nowrap }
.pill.good { background: var(--good-soft); color: var(--good) }
.pill.warn { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--warn-line) }
.pill.bad { background: var(--ink); color: var(--card) }

.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--soft); border-radius: 12px }
.seg button { height: 40px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-weight: 500; cursor: pointer }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); font-weight: 600 }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.field > label, .field > .lbl { font-size: 12px; color: var(--muted) }
.input, select.input, textarea.input { height: 44px; border: 1px solid var(--line2); border-radius: 10px; padding: 0 12px; background: var(--card); width: 100%; min-width: 0 }
textarea.input { height: auto; padding: 10px 12px; resize: vertical; font: 13px/1.6 var(--mono) }
.amount { border: 0; border-bottom: 2px solid var(--accent); border-radius: 0; padding: 4px 0 8px; height: auto; font: 600 34px var(--mono); background: transparent; width: 100%; outline: none }
.hint { font-size: 12px; padding: 8px 10px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-deep) }
.warnbox { font-size: 13px; padding: 10px 12px; border-radius: 10px; background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line2) }
.badbox { font-size: 13px; padding: 10px 12px; border-radius: 10px; background: var(--ink); color: var(--card) }
.badbox a { color: inherit }
.fields2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px }

.daygroup { display: flex; flex-direction: column; gap: 6px }
.dayhead { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); padding: 0 2px }
.txcard { background: var(--card); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden }
.txcard .li { padding: 11px 14px }
.filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
@media (min-width: 900px) { .filters { grid-template-columns: 150px repeat(4, minmax(0, 1fr)) minmax(0, 1.4fr) } }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 0; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.08) }
.chip .dot { margin-right: 7px }
.swatches { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px }
.swatches legend { font-size: 12px; color: var(--muted); padding: 0; margin-bottom: 8px }
.sw { position: relative; width: 36px; height: 36px; cursor: pointer }
.sw input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer }
.sw span { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12) }
.sw input:checked + span { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink) }
.sw input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 4px }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.filters-m { display: flex; flex-direction: column; gap: 8px; min-width: 0 }
.filter-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin: 0 -2px; padding-left: 2px }
.filter-row::-webkit-scrollbar { display: none }
.filter-row select {
  flex: none; height: 38px; max-width: 230px; border-radius: 999px; border: 1px solid var(--line2); background-color: var(--card);
  padding: 0 32px 0 14px; font-size: 13px; color: var(--ink); appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) 16px, calc(100% - 12px) 16px; background-size: 5px 5px; background-repeat: no-repeat;
}
.filter-row select.on { border: 1.5px solid var(--accent); background-color: var(--accent-soft); color: var(--accent-deep); font-weight: 600 }
.input.search { height: 40px; border-radius: 999px; padding: 0 16px }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px }
@media (max-width: 899px) { .stat { padding: 8px 10px } .stat .num { font-size: 14px } .stat span:first-child { font-size: 11px } }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)) } }
.stat { background: var(--card); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px }
.stat span:first-child { font-size: 12px; color: var(--muted) }
.stat .num { font-size: 16px; font-weight: 600 }

.preview { border: 1.5px solid transparent }
.preview.warn { border-color: var(--warn-line) }
.preview.bad { border-color: var(--bad-soft) }
.sticky-save { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); background: var(--bg); padding: 10px 0; display: flex; gap: 8px; z-index: 5 }
@media (min-width: 900px) { .sticky-save { bottom: 0 } }

.settings-nav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none }
.tree-main { font-weight: 600 }
.tree-sub { padding-left: 18px }

.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(90px + env(safe-area-inset-bottom, 0px)); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 12px; font-size: 14px; z-index: 50; max-width: calc(100% - 32px); box-shadow: 0 8px 24px rgba(0,0,0,.2) }
@media (min-width: 900px) { .toast { bottom: 24px } }
.toast.err { background: var(--ink); color: var(--card); box-shadow: 0 0 0 2px var(--card), 0 8px 24px rgba(0,0,0,.3) }

.dlg { border: 0; border-radius: 16px; padding: 0; width: min(460px, calc(100% - 24px)); background: var(--card); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.3) }
.dlg::backdrop { background: rgba(0, 0, 0, .45) }
.dlg form { padding: 18px; display: flex; flex-direction: column; gap: 14px }
.dlg h2 { margin: 0; font: 700 19px var(--display) }
.dlg .actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end }
.dlg .actions .left { margin-right: auto }

.login { max-width: 400px; margin: 40px auto 0; width: 100% }
.empty { text-align: center; color: var(--muted); padding: 24px 8px; font-size: 14px }

/* ---------- tabungan, utang-piutang, review (1.2) ---------- */
.chev { color: var(--faint); font-size: 18px; line-height: 1 }
.goals { display: flex; flex-direction: column }
.goal { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line) }
.goal:last-child { border-bottom: 0 }
.goal-top, .goal-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-width: 0 }
.goal-top .main { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.goal-top .sub { font-size: 12px; color: var(--muted) }
.goal-top .num { font-size: 13px; text-align: right }
.goal-name { font-weight: 600 }
details.done summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 6px 0 }
.homegoals { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line) }
.hg { display: flex; flex-direction: column; gap: 5px; color: inherit; text-decoration: none }
.homelink { font-size: 13px; color: var(--ink); text-decoration: none; font-weight: 500 }
.homelink:hover { text-decoration: underline }
a.card { color: inherit; text-decoration: none }
a.card:hover { box-shadow: inset 0 0 0 1px var(--line2) }
.split2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.split2 > span { display: flex; flex-direction: column; gap: 2px; font-size: 12px }
.split2 .num { font-size: 15px; color: var(--ink) }
.stats.two { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.seg.two { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.seg.four { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.seg button { padding: 0 6px; font-size: 14px }
.segn { font-size: 11px; opacity: .7; font-family: var(--mono) }
.txblock { border: 1px solid var(--line2); border-radius: 12px; padding: 12px; margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0 }
.txblock legend { font-size: 12px; color: var(--muted); padding: 0 4px }
.review-ctl { display: flex; flex-wrap: wrap; gap: 10px; align-items: center }
.review-ctl .seg { flex: 1 1 320px; max-width: 460px }
.review-ctl .pillselect { height: 40px; max-width: 100% }
.panel .split.three { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.panel .delta { color: var(--panel-muted) }
.delta { font-size: 11px; color: var(--muted); font-family: var(--font) }
.stat .delta { font-weight: 400 }
.srow-sub { font-size: 11px }
.mchart { width: 100%; max-width: 720px; height: auto; max-height: 240px; display: block; margin: 0 auto }
.mchart .c-in { fill: var(--in) } .mchart .c-out { fill: var(--out) }
.mchart .c-lbl { font: 11px var(--font); fill: var(--muted) }
.mchart .c-axis { stroke: var(--line2) }
.c-legend { font-size: 12px; color: var(--muted); gap: 14px }
.c-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px }
.c-legend .c-in { background: var(--in) } .c-legend .c-out { background: var(--out) }
.mtable .li { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 8px; font-size: 13px }
.mtable .li > span:not(:first-child) { text-align: right }
.mtable .mhead { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em }
@media (max-width: 559px) { .mtable .li { font-size: 11.5px; gap: 4px } .panel .split.three { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (min-width: 900px) and (max-width: 1100px) { .topnav a { padding: 8px 8px; font-size: 13px } .topbar-inner { gap: 14px } }

/* judul halaman yang sudah terlihat di menu disembunyikan */
@media (max-width: 899px) {
  .page-head.nt-m > .ph-t { display: none }
  .page-head.nt-m.ph-only { display: none }
  .hide-m { display: none }
  .page-head.nt-m:not(:has(> :not(.ph-t):not(.hide-m))) { display: none }
}
@media (min-width: 900px) {
  .page-head.nt-d > .ph-t { display: none }
  .page-head.nt-d.ph-only { display: none }
  .page-head.nt-d { justify-content: flex-end }
}
.page-head:has(> .ph-t) { align-items: center }
h1, h2, .brand, .dlg h2 { font-family: var(--display) }
.card h2 { font-weight: 600; letter-spacing: -0.005em }

/* pintasan di Beranda */
.shortcuts { grid-area: short; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px }
.sc { background: var(--card); border-radius: 14px; min-height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 7px; padding: 12px 4px 10px; color: var(--ink); text-decoration: none; text-align: center }
.sc:hover { box-shadow: inset 0 0 0 1px var(--line2) }
.sc:active { background: var(--soft) }
.sc-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--soft); display: flex; align-items: center; justify-content: center }
.sc-ico svg { width: 22px; height: 22px }
.sc-l { font-size: 11.5px; line-height: 1.25; font-weight: 500 }
@media (min-width: 900px) { .sc { min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; padding: 12px; gap: 10px; text-align: left } .sc-l { font-size: 13px } }

/* Transaksi: tombol, saringan, dan kotak cari tetap terlihat saat digulir */
.tx-tools { position: sticky; top: calc(54px + env(safe-area-inset-top, 0px)); z-index: 15; background: var(--bg); display: flex; flex-direction: column; gap: 10px;
  margin: -6px calc(-1 * max(16px, env(safe-area-inset-left, 0px))) 0; padding: 8px max(16px, env(safe-area-inset-left, 0px)) 10px; border-bottom: 1px solid transparent; transition: border-color .15s }
.tx-tools.stuck { border-bottom-color: var(--line2); box-shadow: 0 6px 12px -10px rgba(0,0,0,.25) }
@media (min-width: 900px) { .tx-tools { margin-top: -12px; padding-top: 12px } }