/* v138 — value-aware comparison colors, anchored charts and contained category tiles. */
:root:root:root:root:root:root:root .refCompareItem:has(.direction-down) .compareIcon svg {transform:scaleY(-1)!important;}
:root:root:root:root:root:root:root .refCompareItem:has(.direction-up) .compareIcon svg {transform:none!important;}
:root:root:root:root:root:root:root .premiumTxActions .txBudgetBadge {max-width:32px!important;min-width:24px!important;font-size:10px!important;}
/* Grid items may shrink; long names wrap instead of widening all columns. */
:root:root:root:root:root:root:root .catGrid {
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
  width:100%!important;max-width:100%!important;min-width:0!important;gap:8px!important;
  padding:0!important;margin:14px 0!important;align-items:stretch!important;
}
:root:root:root:root:root:root:root .catGrid button {
  min-width:0!important;width:100%!important;max-width:100%!important;min-height:68px!important;height:auto!important;
  padding:8px 5px!important;gap:6px!important;border-radius:14px!important;
  background:linear-gradient(150deg,var(--card),var(--premium-shade))!important;
  box-shadow:0 2px 5px #202b3d06!important;overflow:visible!important;
}
:root:root:root:root:root:root:root .catGrid button.selected {background:var(--accent-soft)!important;border-color:var(--gold2)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold2) 20%,transparent)!important;}
:root:root:root:root:root:root:root .catGrid span {
  display:block!important;min-width:0!important;max-width:100%!important;
  font-size:12px!important;line-height:1.25!important;white-space:normal!important;
  overflow-wrap:anywhere!important;word-break:normal!important;text-overflow:clip!important;
}
:root:root:root:root:root:root:root .catGrid svg {width:19px!important;height:19px!important;flex:0 0 19px!important;stroke-width:1.6!important;}
/* Refine functional icons without shrinking their touch targets or chart SVGs. */
:root:root:root:root:root:root:root :is(.iconBtn,.goldSmall,.backBtn,.txActions button,.calcBack,.calcMenuButton,.entryRemove,.budgetChipIcon,.refCapitalRow,.homeCalculatorIcon) svg {width:18px!important;height:18px!important;stroke-width:1.6!important;}
:root:root:root:root:root:root:root .nav.appNav button:not(.navAdd) svg {width:21px!important;height:21px!important;stroke-width:1.65!important;}
:root:root:root:root:root:root:root .nav.appNav .navAdd svg {width:25px!important;height:25px!important;}
@media(max-width:599px) {
  :root:root:root:root:root:root:root .catGrid {grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;}
  :root:root:root:root:root:root:root .modal:has(.catGrid) {box-sizing:border-box!important;min-width:0!important;max-width:100%!important;padding-inline:14px!important;}
}
@media(max-width:359px) {
  :root:root:root:root:root:root:root .catGrid {grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
/* A 220px plotting area shared by bars, ticks and grid lines. Labels are outside it. */
:root:root:root:root:root:root:root .chart138 {padding-left:48px!important;}
:root:root:root:root:root:root:root .chart138 .monthlyChartScroll {padding:0 0 8px!important;}
:root:root:root:root:root:root:root .chart138 .monthlyChart {
  position:relative!important;display:flex!important;gap:14px!important;
  height:278px!important;min-height:278px!important;padding:24px 6px 0!important;
  border:0!important;background:none!important;box-sizing:border-box!important;align-items:flex-start!important;
}
:root:root:root:root:root:root:root .chart138 .monthlyChart::before {
  content:"";position:absolute;top:24px;left:0;right:0;height:220px;pointer-events:none;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-sizing:border-box;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 54px,var(--line) 54px,var(--line) 55px);
}
:root:root:root:root:root:root:root .chart138 .monthlyChart::after {
  content:"";position:absolute;top:calc(24px + var(--zero-top));left:0;right:0;height:1px;
  background:color-mix(in srgb,var(--text) 55%,var(--line));z-index:1;pointer-events:none;
}
:root:root:root:root:root:root:root .chart138 .monthlyScale {
  top:24px!important;bottom:auto!important;left:0!important;height:220px!important;width:44px!important;
  padding:0 6px 0 0!important;display:flex!important;flex-direction:column!important;justify-content:space-between!important;
  font-size:11px!important;line-height:1!important;color:var(--muted)!important;
}
:root:root:root:root:root:root:root .chart138 .monthlyScale span {height:0;display:flex;align-items:center;justify-content:flex-end;}
:root:root:root:root:root:root:root .chart138 .monthlyGroup {
  position:relative!important;width:174px!important;flex:0 0 174px!important;height:254px!important;
  display:grid!important;grid-template-rows:220px 34px!important;gap:0!important;align-items:start!important;
}
:root:root:root:root:root:root:root .chart138 .monthlyBars {
  height:220px!important;min-height:220px!important;width:100%!important;display:flex!important;gap:8px!important;
  padding:0!important;margin:0!important;align-items:stretch!important;justify-content:center!important;
}
:root:root:root:root:root:root:root .chart138 .monthlyBarItem {
  position:relative!important;display:block!important;height:220px!important;width:48px!important;min-width:48px!important;
  margin:0!important;padding:0!important;flex:0 0 48px!important;overflow:visible!important;
}
:root:root:root:root:root:root:root .chart138 .monthlyBar {
  position:absolute!important;left:50%!important;transform:translateX(-50%)!important;
  bottom:var(--bar-origin)!important;top:auto!important;width:22px!important;min-height:0!important;
  max-height:100%!important;margin:0!important;border-radius:4px 4px 0 0!important;box-shadow:inset 0 1px #ffffff30!important;
}
:root:root:root:root:root:root:root .chart138 .barBelow .monthlyBar {top:50%!important;bottom:auto!important;border-radius:0 0 4px 4px!important;}
:root:root:root:root:root:root:root .chart138 .barZero .monthlyBar {height:0!important;box-shadow:none!important;}
:root:root:root:root:root:root:root .chart138 .monthlyBarValue {
  position:absolute!important;bottom:calc(var(--bar-origin) + var(--bar-size) + 4px)!important;top:auto!important;left:0!important;
  width:48px!important;min-width:48px!important;max-width:48px!important;font-size:10px!important;line-height:1.2!important;
  white-space:nowrap!important;letter-spacing:0!important;text-align:center!important;margin:0!important;
}
:root:root:root:root:root:root:root .chart138 .barBelow .monthlyBarValue {top:calc(50% + var(--bar-size) + 4px)!important;bottom:auto!important;}
:root:root:root:root:root:root:root .chart138 .barZero .monthlyBarValue {color:var(--muted)!important;}
:root:root:root:root:root:root:root .chart138 .monthlyMonthLabel {display:block!important;width:100%!important;max-width:100%!important;padding-top:20px!important;font-size:11px!important;line-height:1.2!important;}