/* Budget UI: shared tokens, layout and all screen components. */
:root {
 color-scheme: light;
 --bg:#FFFFFF;
  --bg-sunken:#F3F6FB;
  --card:#FFFFFF;
  --fg:#15233B;
 --fg-dim:#52617A;
  --fg-hint:#52617A;
  --sec-head:#52617A;
  --sep:#DFE5EF;
 --accent:#2856D8;
  --accent-fill:#2856D8;
  --on-accent:#FFFFFF;
 --good:#17734B;
  --warn:#856000;
  --bad:#BC3045;
  --credit:#7052B8;
 --track:rgba(21,35,59,.09);
  --lift:rgba(255,255,255,0);
  --edge:#DFE5EF;
  --field-edge:#7788A4;
 --hatch:rgba(255,255,255,.44);
  --shade:rgba(21,35,59,.07);
  --scrim:rgba(12,20,35,.48);
 --tint:#E9EFFD;
  --tint-edge:#CDD9FA;
  --lane:#E6EBF4;
 --meter:128px;
  --t-display:40px;
  --t-title:28px;
  --t-body:16px;
  --t-label:14px;
  --t-caption:13px;
 --pad:20px;
  --gap-s:8px;
  --gap-m:12px;
  --gap-l:24px;
 --row-min:48px;
  --radius:16px;
  --radius-s:12px;
  --radius-l:20px;
  --tabbar:68px;
  --tabs-height:calc(var(--tabbar) + var(--safe-bottom));
  --move:160ms;
 --vh-stable:var(--tg-viewport-stable-height,100vh);
 --safe-top:calc(max(var(--tg-safe-area-inset-top,0px),env(safe-area-inset-top,0px)) + var(--tg-content-safe-area-inset-top,0px));
 --safe-bottom:calc(max(var(--tg-safe-area-inset-bottom,0px),env(safe-area-inset-bottom,0px)) + var(--tg-content-safe-area-inset-bottom,0px));
 --safe-left:max(var(--tg-safe-area-inset-left,0px),env(safe-area-inset-left,0px));
 --safe-right:max(var(--tg-safe-area-inset-right,0px),env(safe-area-inset-right,0px));
}
[data-scheme="dark"] {
 color-scheme:dark;
  --bg:#1A2435;
  --bg-sunken:#101725;
  --card:#1A2435;
 --fg:#EDF2FC;
  --fg-dim:#B9C7DE;
  --fg-hint:#B9C7DE;
  --sec-head:#B9C7DE;
  --sep:#344157;
 --accent:#9BB8FF;
  --accent-fill:#9BB8FF;
  --on-accent:#14213B;
 --good:#7CDDB0;
  --warn:#F0CE7E;
  --bad:#FFA0AA;
  --credit:#C0AEFF;
 --track:rgba(237,242,252,.1);
  --edge:#344157;
  --field-edge:#8195B0;
  --hatch:rgba(0,0,0,.34);
 --tint:#233658;
  --tint-edge:#3A527A;
  --lane:#080E1A;
}
@media(max-width:360px){:root{--pad:16px;--meter:72px;--t-display:36px;--t-title:26px;}}
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {

  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--t-body);
  line-height: 1.4;
  color: var(--fg);

  background: var(--bg-sunken);
  -webkit-font-smoothing: antialiased;

  overflow-wrap: anywhere;
}

#app {
  min-height: var(--vh-stable);
  padding:
    calc(var(--safe-top) + var(--gap-s))
    calc(var(--pad) + var(--safe-right))
    calc(var(--gap-l) + var(--safe-bottom))
    calc(var(--pad) + var(--safe-left));
}

body.has-tabs #app {
  padding-bottom: calc(var(--tabbar) + var(--safe-bottom) + var(--gap-l));
}

body.has-main .tabbar {
  display: none;
}

body.has-main.has-tabs #app {
  padding-bottom: calc(var(--gap-l) + var(--safe-bottom));
}

a {
  color: var(--accent);
}

button {
  font: inherit;
  color: inherit;
}

#progress {
  position: fixed;
  top: var(--safe-top);
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--move) linear;
  pointer-events: none;
  z-index: 3;
}

#progress.on {
  opacity: 1;
}

.t-title {
  font-size: var(--t-title);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 var(--gap-m);
}

.t-caption,
.sec__head {
  font-size: var(--t-caption);
  font-weight: 500;
  line-height: 1.3;
  color: var(--sec-head);
}

.t-label {
  font-size: var(--t-label);
  line-height: 1.35;
  color: var(--fg-dim);
}

.num,
.row__amount,
.stat__value,
.bar__value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.dim {
  color: var(--fg-dim);
}

.good {
  color: var(--good);
}
.warn {
  color: var(--warn);
}
.bad {
  color: var(--bad);
}

.sec {
  margin: 0 0 var(--gap-l);
}

.sec__head {
  margin: 0 0 var(--gap-s);
}

.list {
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
}

.list > .row + .row {
  border-top: 1px solid var(--sep);
  background-clip: padding-box;
}

.row {
  display: flex;
  align-items: center;
  gap: var(--gap-m);
  min-height: var(--row-min);
  padding: var(--gap-s) var(--pad);
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  margin: 0;
}

.row--stack {
  align-items: flex-start;
}

.row--stack .row__amount {
  margin-top: 1px;
}

.row--stack .row__chev {
  margin-top: 6px;
}

.row--link {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.row--link:active {
  background: var(--track);
}

.row__main {
  flex: 1 1 auto;
  min-width: 0;
}

.row__label {
  font-size: var(--t-body);
}

.row__sub {
  font-size: var(--t-label);
  color: var(--fg-dim);
}

.row__amount {
  flex: 0 0 auto;
  font-size: var(--t-body);
  font-weight: 600;
  text-align: right;

  min-width: 6ch;
}

.row__amount--word {
  flex: 0 1 auto;
  min-width: 0;
  font-weight: 400;
}

.row__amount--word:not(.good):not(.warn):not(.bad) {
  color: var(--fg-dim);
}

.row__chev {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--fg-hint);
  border-bottom: 2px solid var(--fg-hint);
  transform: rotate(-45deg);
  opacity: 0.7;
}

.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: var(--pad);
}

.card + .card {
  margin-top: var(--gap-m);
}

.card__head {
  font-size: var(--t-caption);
  font-weight: 500;
  color: var(--sec-head);
  margin-bottom: var(--gap-s);
}

.stat {
  padding: var(--gap-s) 0 var(--gap-m);
}

.stat__label {
  font-size: var(--t-label);
  color: var(--fg-dim);
  margin-bottom: 4px;
}

.stat__value {
  font-size: var(--t-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.stat__note {
  font-size: var(--t-label);
  color: var(--fg-dim);
  margin-top: 4px;
}

.bar {
  display: block;
  color: var(--accent);
}

.bar__top {
  display: flex;
  align-items: baseline;
  gap: var(--gap-s);
  margin-bottom: 6px;
}

.bar__label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--t-body);
  color: var(--fg);
}

.bar__value {
  flex: 0 0 auto;
  font-size: var(--t-label);
  color: var(--fg-dim);
}

.bar__lane {
  display: flex;
  align-items: stretch;
  gap: 2px;
  height: 8px;
}

.bar__track {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  border-radius: 4px;
  background: var(--track);
  overflow: hidden;
}

.bar__fill {
  flex: 0 0 auto;
  max-width: 100%;
  height: 100%;
  background: currentColor;
  transition: width var(--move) ease-out;
}

.bar__over {
  flex: 0 0 auto;
  max-width: 33%;
  border-radius: 4px;
  background-color: var(--bad);
  background-image: repeating-linear-gradient(
    -45deg,
    var(--hatch) 0 2px,
    transparent 2px 5px
  );
  transition: width var(--move) ease-out;
}

.bar__pace {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--card);
}

.empty,
.error {
  background: var(--card);
  border-radius: var(--radius);
  padding: var(--gap-l) var(--pad);
  text-align: center;
}

.empty__text,
.error__text {
  font-size: var(--t-body);
  color: var(--fg-dim);
  margin-bottom: var(--gap-m);
}

.error__text {
  color: var(--fg);
}

.unknown {
  color: var(--fg-hint);
  font-size: var(--t-label);
}

.skel {
  background: var(--track);
  border-radius: 4px;
}

.skel--line {
  height: 17px;
  width: 60%;
}

.skel--amount {
  height: 17px;
  width: 5ch;
  min-width: 64px;
}

.skel--label {
  height: 15px;
  width: 45%;
  margin: var(--gap-s) 0 var(--gap-m);
}

.skel--display {
  height: 40px;
  width: 65%;
  margin-bottom: var(--gap-l);
}

.field {
  display: block;
  padding: var(--gap-m) 0;
}

.field__label {
  font-size: var(--t-label);
  color: var(--fg-dim);
  margin-bottom: 6px;
}

.field__label--hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.field__input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: var(--row-min);
  padding: var(--gap-m) var(--pad);
  border: 0;

  -webkit-appearance: none;
  appearance: none;
  border-radius: var(--radius);
  background: var(--lane);
  box-shadow: inset 0 0 0 1px var(--field-edge);
  color: var(--fg);

  font-size: var(--t-body);
  font-family: inherit;
}

.field__input--num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-align: right;
}

.field__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.field__hint {
  font-size: var(--t-caption);
  color: var(--fg-hint);
  margin-top: 6px;
}

.toggle {
  cursor: pointer;
}

.toggle__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle__track {
  flex: 0 0 auto;
  position: relative;
  width: 51px;
  height: 31px;
  border-radius: 16px;
  background: var(--track);
  transition: background var(--move) ease-out;
}

.toggle__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--on-accent);
  box-shadow: 0 0 0 1px var(--sep);
  transition: transform var(--move) ease-out;
}

.toggle__input:checked ~ .toggle__track {
  background: var(--accent-fill);
}

.toggle__input:checked ~ .toggle__track .toggle__knob {
  transform: translateX(20px);
}

.toggle__input:focus-visible ~ .toggle__track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.toggle__input:disabled ~ .toggle__track {
  opacity: 0.4;
}

.chips {

  position: relative;
  display: flex;
  gap: var(--gap-s);
  overflow-x: auto;
  padding: 0 var(--pad);
  margin: 0 calc(-1 * var(--pad));
  scrollbar-width: none;
}

.chips::-webkit-scrollbar {
  display: none;
}

.chip {
  flex: 0 0 auto;
  min-height: var(--row-min);
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-s);
  background-color: var(--card);
  background-image: linear-gradient(var(--lift), var(--lift));
  box-shadow: 0 0 0 1px var(--edge);
  color: var(--fg);
  font-size: var(--t-label);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.chip--on {
  background: var(--accent-fill);
  box-shadow: none;
  color: var(--on-accent);
  font-weight: 600;
}

.chip:active {
  opacity: 0.7;
}

.seg {
  display: flex;
  gap: 2px;
  margin: 0 0 var(--gap-m);
  padding: 3px;
  border-radius: var(--radius-s);
  background: var(--lane);
}

.seg__item {

  flex: 1 1 0;
  min-width: 0;
  min-height: var(--row-min);
  padding: 0 var(--gap-s);
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--fg-dim);
  font-size: var(--t-label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.seg__item--on {
  background-color: var(--card);
  background-image: linear-gradient(var(--lift), var(--lift));
  color: var(--fg);
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--edge), 0 1px 2px var(--shade);
}

.seg__item:active {
  opacity: 0.7;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--row-min);
  padding: 0 var(--pad);
  border: 0;
  border-radius: var(--radius-s);
  font-size: var(--t-body);
  font-weight: 600;

  background-color: var(--card);
  background-image: linear-gradient(var(--lift), var(--lift));
  box-shadow: 0 0 0 1px var(--edge);
  color: var(--accent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.btn--accent {

  background: var(--accent-fill);
  box-shadow: none;
  color: var(--on-accent);
}

.btn:active {
  opacity: 0.7;
}

.scrim {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  z-index: 10;
  display: flex;
  align-items: flex-end;
}

.sheet {
  width: 100%;
  max-height: calc(var(--vh-stable) - 56px);
  overflow-y: auto;
  background: var(--card);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: var(--gap-m) 0 calc(var(--gap-m) + var(--safe-bottom));
  animation: sheet-in var(--move) ease-out;
}

.sheet__head {
  font-size: var(--t-caption);
  font-weight: 500;
  color: var(--sec-head);
  padding: 0 var(--pad) var(--gap-s);
}

@keyframes sheet-in {
  from {
    transform: translateY(16px);
  }
  to {
    transform: translateY(0);
  }
}

.picker__mark {
  flex: 0 0 auto;
  color: var(--accent);
  font-weight: 600;
}

.note {
  font-size: var(--t-label);
  line-height: 1.35;
  padding: var(--gap-s) var(--pad) 0;
}

.note:not(.good):not(.warn):not(.bad) {
  color: var(--fg-dim);
}

.stat__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-s);
}

.stat__verdict {
  font-size: var(--t-label);
  font-weight: 600;
}

.sec__head--sticky {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-sunken);
  padding-top: var(--gap-s);
  padding-bottom: var(--gap-s);
  margin-bottom: 0;
}

.sec__head--link {
  display: flex;
  align-items: center;
  min-height: var(--row-min);
  width: 100%;
  border: 0;
  text-align: left;
  font: inherit;
  color: var(--sec-head);
  background: var(--bg-sunken);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sec__head--split {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-s);
}

.sec__head-total {
  flex: 0 0 auto;
  text-align: right;
  font-size: var(--t-label);
  font-weight: 600;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.sec__head-also {
  font-weight: 400;
  color: var(--fg-dim);
}

.list--tail {
  margin-top: var(--gap-m);
}

.chart-wrap {
  background: var(--card);
  border-radius: var(--radius);
  padding: var(--gap-m) var(--pad);
  margin-bottom: var(--gap-m);
}

.chart-box {
  min-height: 110px;
  color: var(--accent);
}

.chart {
  line-height: 0;
}

.chart__area {
  fill: currentColor;
  opacity: 0.14;
}

.chart__edges {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-m);
  font-size: var(--t-caption);
  padding-top: 4px;
}

.chart__edge--right {
  text-align: right;
}

.chart__edges .num {
  font-size: var(--t-label);
  color: var(--fg);
}

.chart-wrap .note {
  padding-left: 0;
  padding-right: 0;
}

.field__box {
  display: flex;
  align-items: center;
  gap: var(--gap-s);
  min-width: 0;
  background: var(--lane);
  box-shadow: inset 0 0 0 1px var(--field-edge);
  border-radius: var(--radius-s);
  padding-right: 12px;
}

.field__box .field__input {
  flex: 1 1 auto;
  background: transparent;
  box-shadow: none;
}

.field__input::placeholder { color: var(--fg-hint); opacity: 1; }
.field__input:disabled { opacity: .7; cursor: not-allowed; }

.field__suffix {
  flex: 0 0 auto;
  color: var(--fg-dim);
  font-size: var(--t-label);
  font-variant-numeric: tabular-nums;
}

.sheet .field {
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.field > .field__input,
.field__box {
  background: var(--lane);

  box-shadow: inset 0 0 0 1px var(--field-edge);
}

.field > select.field__input {
  padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-dim) 50%), linear-gradient(135deg, var(--fg-dim) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

.sheet .seg {
  margin-left: var(--pad);
  margin-right: var(--pad);
}

.sheet__actions {
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
  padding: var(--gap-s) var(--pad) 0;
}

.btn--bad {
  color: var(--bad);
}

.draft {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-s);
  margin: 0 var(--pad) var(--gap-s);
  padding: var(--gap-s) var(--gap-m);
  border-radius: var(--radius-s);
  background: var(--lane);
  box-shadow: inset 0 0 0 1px var(--field-edge);
}

.draft__text {
  flex: 1 1 160px;
  min-width: 0;
  font-size: var(--t-label);
  color: var(--fg-dim);
}

.draft__drop {
  flex: 0 0 auto;
}

.hero {
  background: var(--tint);
  border-radius: var(--radius-l);

  box-shadow:
    inset 0 0 0 1px var(--tint-edge),
    0 1px 2px var(--shade),
    0 10px 22px -10px var(--shade);
  padding: var(--gap-m) var(--pad);
  margin: 0 0 var(--gap-m);
}

.hero + .note {
  margin-bottom: var(--gap-m);
}

.note + .sec {
  margin-top: var(--gap-l);
}

.hero__eyebrow {
  font-size: var(--t-caption);
  color: var(--fg-dim);
}

.hero__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-s);
  margin-top: var(--gap-s);
}

.hero__label {
  font-size: var(--t-label);
  color: var(--fg-dim);
}

.hero__verdict {
  flex: 0 0 auto;
  font-size: var(--t-label);
  font-weight: 600;
}

.hero__value {
  font-size: var(--t-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-top: 2px;
}

.hero__body {
  margin-top: var(--gap-m);
}

.hero .bar__pace {
  background: var(--tint);
}

.hero .list {
  background: none;
  border-radius: 0;

  border-top: 1px solid var(--tint-edge);
  margin-top: var(--gap-s);
}

.hero .list > .row {
  padding-left: 0;
  padding-right: 0;
}

.hero .note {
  padding-left: 0;
  padding-right: 0;
}

.row__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--track);
  font-size: 18px;
  line-height: 1;
}

.row__meter {
  margin-top: 6px;
}

.row__meter > .bar,
.row__meter > .bars-row,
.row__meter > .bars-pair {
  width: min(var(--meter), 100%);
}

.row__meter .note {
  padding: 4px 0 0;
  font-size: var(--t-caption);
}

.card-meter {
  padding-top: var(--gap-s);
}

.card-meter .note {
  padding: 4px 0 0;
  font-size: var(--t-caption);
}

.bar--slim .bar__lane {
  height: 4px;
}

.bar--slim .bar__track,
.bar--slim .bar__fill,
.bar--slim .bar__over {
  border-radius: 2px;
}

.bar--credit {
  color: var(--credit);
}

.bar--credit.good {
  color: var(--good);
}
.bar--credit.warn {
  color: var(--warn);
}
.bar--credit.bad {
  color: var(--bad);
}

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  background: var(--card);
  border-top: 1px solid var(--sep);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  padding-bottom: var(--safe-bottom);
}

.tab {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  height: var(--tabbar);
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--fg-hint);
  font-size: var(--t-caption);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tab--on {
  color: var(--accent);
  font-weight: 600;
}

.tab:active {
  opacity: 0.6;
}

.tab__icon {
  display: block;
  width: 24px;
  height: 24px;
}

.tab__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

.limits {
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
}

.lim + .lim {
  border-top: 1px solid var(--sep);
  background-clip: padding-box;
}

.lim .field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-m);
  min-height: var(--row-min);
  padding: var(--gap-s) var(--pad);
}

.lim .field__label {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  color: var(--fg);
  font-size: var(--t-body);
}

.lim .field__box {
  flex: 0 0 auto;
  width: 140px;
}

.lim .field > .field__input {
  flex: 0 0 auto;
  width: 140px;
}

.lim .field__input {
  padding: var(--gap-s) var(--gap-m);
}

.lim .field__hint,
.lim .note {
  flex: 1 0 100%;
  padding: 0 var(--pad) var(--gap-s);
  margin: 0;
}

.lim .field__hint {
  padding: 0;
}

.lim__acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-s);
  padding: 0 var(--pad) var(--gap-s);
}

.lim__acts .btn {
  background: var(--lane);
  box-shadow: none;
  font-size: var(--t-label);
}

.row--tx .row__label,
.row--tx .row__sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row--muted .row__amount {
  color: var(--fg-dim);
}

.row--fact .row__amount {
  flex: 0 1 auto;
  min-width: 0;
  font-size: var(--t-label);
  font-weight: 400;
  color: var(--fg-dim);
  white-space: normal;
}

.row--fact .row__main,
.settings .row__main {
  min-width: 40%;
}

.row--off .row__label,
.row--off .row__icon {
  color: var(--fg-dim);
}

.tx-parts {
  padding: var(--gap-s) var(--pad);
  margin: 0;
}

.tx-parts .chip {
  background: var(--track);
  font-size: var(--t-caption);
}

.tx-kids {
  padding: 0 var(--pad) var(--gap-s) calc(var(--pad) + var(--gap-m));
}

.tx-kid {
  display: flex;
  align-items: baseline;
  gap: var(--gap-m);
  padding: 2px 0;
  font-size: var(--t-label);
  color: var(--fg-dim);
}

.tx-kid__label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tx-kid__amount {
  flex: 0 0 auto;
}

.list > .tx-parts + .row,
.list > .tx-kids + .row {
  border-top: 1px solid var(--sep);
  background-clip: padding-box;
}

.feed__edge {
  min-height: 1px;
  padding: var(--gap-s) 0;
}

.bar--goal.good {
  color: var(--good);
}

.bar--goal.good .bar__over {
  background: currentColor;
}

.bars {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: end;
  gap: 2px;
  height: 56px;
  margin: var(--gap-s) 0 0;
  color: var(--accent);
}

.bars--two-sided {
  height: 72px;
}

.bars__slot {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 2px;
}

.bars__half {
  display: flex;
  flex: 1 1 0;
  overflow: hidden;
}

.bars__half--up {
  align-items: flex-end;
}

.bars__half--down {
  align-items: flex-start;
  flex: 0 0 16px;
}

.bars:not(.bars--two-sided) .bars__half--up {
  flex: 1 1 100%;
}

.bars__col {
  width: 100%;
  min-height: 2px;
  border-radius: 2px 2px 0 0;
  background: currentColor;
}

.bars__col--neg {
  border-radius: 0 0 2px 2px;
  background: var(--bad);
}

.bars__slot--future .bars__half--up::after {
  content: "";
  align-self: flex-end;
  width: 100%;
  height: 6px;
  border-radius: 2px;
  background: var(--track);
}

.bars__slot--today {
  border-right: 2px solid transparent;
}

.bars__axis {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-s);
  padding-top: 6px;
  font-size: var(--t-caption);
  color: var(--fg-dim);
}

.bars-row {
  height: 6px;
  margin: 6px 0 0;
  border-radius: 3px;
  background: var(--track);
  overflow: hidden;
  color: var(--accent);
}

.bars-row__fill {
  height: 100%;
  min-width: 2px;
  border-radius: 3px;
  background: currentColor;
  transition: width var(--move) ease-out;
}

.bars-row.bad {
  color: var(--bad);
}

.bars-row.bad .bars-row__fill {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--hatch) 0 2px,
    transparent 2px 5px
  );
}

.bars-row.warn {
  color: var(--warn);
}

.bars-pair .bars-row + .bars-row {
  margin-top: 3px;
}

.bars-row--before {
  opacity: 0.45;
}

.advice {
  background: var(--card);
  border-radius: var(--radius);
  padding: var(--gap-m) 0;
}

.advice__find + .advice__find {
  border-top: 1px solid var(--sep);
  margin-top: var(--gap-m);
  padding-top: var(--gap-m);
}

.advice__title {
  padding: 0 var(--pad);
  font-size: var(--t-body);
  font-weight: 600;
}

.advice__text {
  margin: 0;
  padding: 4px var(--pad) 0;
  font-size: var(--t-body);
  line-height: 1.4;
  font-variant-numeric: normal;
}

.advice__saving {
  padding: 4px var(--pad) 0;
  font-size: var(--t-label);
  color: var(--fg-dim);
  font-variant-numeric: normal;
}

.btn--tiny {
  min-height: var(--row-min);
  padding: 0 var(--gap-s);
  margin: 0 calc(-1 * var(--gap-s));
  background: transparent;
  box-shadow: none;
  font-size: var(--t-caption);
  font-weight: 600;
}

.sheet__body {
  display: block;
}

.sec__head + .seg {
  margin-top: var(--gap-s);
}

.plan-actions {
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
  margin-top: var(--gap-m);
}

.plan-acts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-s);
}

.plan-acts--one {
  grid-template-columns: 1fr;
}

.plan-acts .btn {
  padding: var(--gap-s) var(--gap-s);
  line-height: 1.2;
  text-align: center;
}

.settings .code {
  margin: var(--gap-s) var(--pad) 0;
  padding: var(--gap-m) var(--pad);
  border-radius: var(--radius-s);
  background: var(--track);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--t-title);
  letter-spacing: 0.08em;
  text-align: center;
  word-break: break-all;
  user-select: all;
  -webkit-user-select: all;
}

.token__input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.12em;
}

.token__input:-webkit-autofill {
  -webkit-text-fill-color: var(--fg);
  box-shadow: 0 0 0 1000px var(--card) inset;
}

.split__head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--card);
  padding: 0 var(--pad);
}

.split__parts {
  margin: 0 var(--pad);
}

.split__part {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-s);
  padding: var(--gap-s) 0;
}

.split__part + .split__part {
  border-top: 1px solid var(--sep);
}

.split__pick {
  flex: 1 1 0;
  min-width: 0;
}

.split__pick .row {
  padding-left: 0;
  padding-right: 0;
}

.split__pick--empty .row__label {
  color: var(--fg-hint);
}

.split__part .field {
  flex: 0 0 auto;
  width: 92px;
  padding: 0;
}

.split__part .field__input {
  min-height: var(--row-min);
  padding: var(--gap-s);
  border-radius: var(--radius-s);
  background: var(--bg-sunken);
}

.split__drop {
  flex: 0 0 auto;
  min-width: var(--row-min);
  padding: 0;
  font-size: var(--t-body);
}

.split__rest {
  flex: 1 0 100%;
  display: flex;
  justify-content: flex-end;
}

.split__rest:empty {
  display: none;
}

.split__take {
  min-height: var(--row-min);
  padding: 0 var(--gap-m);
  background: var(--bg-sunken);
  font-size: var(--t-label);
}

.product-form { display: grid; gap: 14px; padding: 16px 0; }
.sheet .product-form { padding: 16px; }
.product-form .btn { min-height: 48px; }
.date-shortcuts { display:flex; gap:8px; margin-top:8px; }
.date-shortcuts button { background:var(--bg-sunken); color:var(--accent); border:0; border-radius:8px; min-height:36px; padding:6px 12px; font:inherit; }
input[type=date], select.field__input { min-height:44px; max-width:100%; min-width:0; font:inherit; color:inherit; }
.explanation { margin:12px 0; padding:12px; border-radius:12px; background:var(--bg-sunken); }
.explanation summary { cursor:pointer; min-height:28px; font-size:14px; font-weight:600; }
.explanation[open] summary { margin-bottom:8px; }
button.bars__slot { border:0; padding:0; color:inherit; background:transparent; cursor:pointer; min-width:24px; }
button.bars__slot:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.bars:has(button) { overflow-x:auto; grid-auto-columns:minmax(24px,1fr); }
.day-selection { min-height:20px; }
@media (max-width:360px) {
  .seg__item { padding-left:5px; padding-right:5px; font-size:12px; white-space:normal; text-overflow:clip; overflow:visible; }
  .hero { padding-top:14px; padding-bottom:14px; }
  .hero__value { font-size:36px; }
  .row__sub { white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; }
  .row__label { overflow-wrap:anywhere; }
  .sec { margin-top:20px; }
}
.product-form .field { margin:0; }
.product-form > .container { margin:0; }
.bars:has(button) { gap:3px; }
.product-form .field { padding:0; }

.bars:has(button) { height:132px; grid-auto-columns:44px; gap:8px; padding-bottom:8px; }
button.bars__slot { min-width:44px; height:120px; justify-content:flex-end; }
.day-bar { display:block; height:96px; width:100%; }
.day-bar .bars__half { display:flex; flex:none; box-sizing:border-box; }
.day-bar .bars__half--down { flex:none; }
.day-label { display:block; font-size:11px; line-height:24px; white-space:nowrap; }
.report-trends select { width:100%; margin:8px 0; padding:10px; }
.report-legend { font-size:12px; color:var(--fg-dim); margin:8px 0 12px; }
.report-series { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:5px; width:100%; padding:8px 0 12px; }
.report-series__slot { min-width:0; border-bottom:2px solid transparent; }
.report-series__slot.is-selected { border-color:var(--accent); }
.report-series__plot { display:flex; gap:2px; height:112px; }
.report-series__track { flex:1; min-width:0; height:100%; }
.report-series__above, .report-series__below { display:flex; box-sizing:border-box; }
.report-series__above { align-items:flex-end; border-bottom:1px solid var(--sep); }
.report-series__below { align-items:flex-start; }
.report-series__track span { width:100%; min-height:2px; background:var(--accent); border-radius:2px; }
.report-series__track.spent span { background:var(--fg); opacity:.45; }
.report-series__slot.is-partial span:not(.report-series__label) { background-image:repeating-linear-gradient(45deg,transparent,transparent 3px,var(--bg) 3px,var(--bg) 5px); }
.report-series__slot.no-records .report-series__plot { border-bottom:1px dashed var(--sep); }
.report-series__label { display:block; text-align:center; font-size:10px; line-height:22px; white-space:nowrap; }
.report-selected { margin-top:8px; }
.report-selected .row { padding-left:12px; padding-right:12px; }
.report-selected .row__label { font-size:14px; }
.report-trends .explanation { margin-left:0; margin-right:0; }
@media (max-width:360px) { .report-series {gap:3px;} .report-series__plot {gap:1px;} }

/* Application shell and responsive rules. */
[hidden]{display:none!important}
#app{max-width:760px;margin-inline:auto;padding-top:calc(var(--safe-top) + 16px)}
#screen{min-width:0}
.app-chrome{display:flex;align-items:center;gap:8px;margin-bottom:24px;min-height:44px}
.budget-context{flex:1;min-width:0}
.context-button{display:flex;align-items:center;gap:8px;min-height:44px;max-width:100%;padding:8px 12px;border:1px solid var(--edge);border-radius:12px;background:var(--card);font-weight:600;text-align:left;cursor:pointer}
.context-button::after{content:'⌄';color:var(--fg-dim);margin-left:8px}
.context-button:disabled{opacity:1;color:var(--fg)}
.icon-button{display:grid;place-items:center;flex:none;min-width:44px;min-height:44px;padding:10px;border:1px solid var(--edge);border-radius:12px;background:var(--card);cursor:pointer}
.ui-icon{width:22px;height:22px;flex:none}
.page-title{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.page-title .t-title{margin:0}.page-title__actions{display:flex;gap:8px;flex-wrap:wrap}
.route-heading{margin:0 0 20px}.app-brand{font-weight:650}
.t-title{font-weight:700;letter-spacing:-.025em}
.sec__head{font-size:14px;font-weight:650;text-transform:none;letter-spacing:0}
.hero{box-shadow:none;border:1px solid var(--tint-edge);padding:24px;border-radius:20px}
.hero .stat__value,.hero__value{overflow-wrap:anywhere;line-height:1.15}
.list{border:1px solid var(--edge)}
.row{padding-block:14px;flex-wrap:nowrap;row-gap:6px;border-radius:0}
.row__main{flex:1 1 0;min-width:0}
.row__amount{max-width:55%;overflow-wrap:anywhere;min-width:0;flex-shrink:1;margin-left:auto}
.row__label{font-weight:550}.row__sub{margin-top:3px;line-height:1.45}
.row__chev{margin-left:2px}.row__amount--word{max-width:55%}
#screen>.row{background:var(--card);border:1px solid var(--edge);border-radius:16px;margin-bottom:12px}
.btn{min-height:48px;border-radius:12px;padding:12px 16px;white-space:normal;line-height:1.3}
.btn--primary{background:var(--accent-fill);color:var(--on-accent);font-weight:650;border:1px solid transparent}
.btn--tiny{min-height:44px}.chip{min-height:44px}.seg__item{min-height:44px;white-space:normal}
.seg{flex-wrap:wrap}.field__input{font-size:16px;min-height:48px;border-radius:12px;max-width:100%}
.product-form{background:var(--card);border:1px solid var(--edge);border-radius:16px;padding:20px}
.product-form .product-form{border:0;padding:0}.product-form>.btn{width:100%}
.product-form .field{margin:0}.field__hint{margin-top:4px}
.feed-tools{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.feed-tools .chip{max-width:100%;white-space:normal;overflow-wrap:anywhere}
.field__hint.bad{color:var(--bad)}
.field__box:focus-within{outline:3px solid var(--accent);outline-offset:3px}
.field__box .field__input:focus-visible{outline:none}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.tabbar{height:auto;min-height:var(--tabbar);padding-bottom:var(--safe-bottom);background:var(--card);border-top:1px solid var(--edge);box-shadow:none}
.tab{min-height:68px;padding:10px 4px;gap:5px}.tab__label{font-size:12px;white-space:normal}
.tab--on{color:var(--accent)}.tab--on .tab__icon{background:var(--tint);border-radius:8px;box-shadow:0 0 0 5px var(--tint)}
body.keyboard-open .tabbar{display:none}
.scrim{padding:calc(var(--safe-top) + 12px) 0 var(--safe-bottom);z-index:100;overscroll-behavior:contain}
.sheet{max-height:calc(var(--vh-stable) - var(--safe-top) - var(--safe-bottom) - 24px);max-width:720px;width:100%;border-radius:20px 20px 0 0;background:var(--card);overscroll-behavior:contain}
.sheet__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 0 16px;position:sticky;top:0;background:var(--card);z-index:1}
.sheet__bar .sheet__head{font-size:22px;line-height:1.3;margin:0;min-width:0;text-transform:none;letter-spacing:0;color:var(--fg)}
.sheet__bar .icon-button{border:0;background:var(--bg-sunken)}
body.has-sheet{overflow:hidden}.main-fallback{display:block;width:100%;position:sticky;bottom:var(--safe-bottom);margin-top:16px;z-index:2}
.plan-destinations{display:grid;gap:12px;margin:24px 0}.plan-destinations>.row{background:var(--card);border:1px solid var(--edge);border-radius:16px}
.report-views{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,8.5em),1fr));gap:8px;margin-bottom:20px}
.report-view{min-height:48px;border:1px solid var(--edge);border-radius:12px;background:var(--card);padding:12px;text-align:left;font-weight:600;cursor:pointer}
.report-view[aria-pressed="true"]{background:var(--tint);color:var(--accent);border-color:var(--tint-edge)}
.finance-chart{padding:20px;border:1px solid var(--edge);border-radius:16px;background:var(--card);margin-bottom:24px}
.finance-chart svg{display:block;width:100%;height:176px;overflow:visible}.finance-chart__axis{display:flex;justify-content:space-between;gap:16px;font-size:13px;color:var(--fg-dim);margin-bottom:12px}
.finance-chart__readout{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:16px 0 8px;font-weight:600}
.finance-chart select{width:100%;min-height:44px;font:inherit;color:var(--fg);background:var(--bg-sunken);border:1px solid var(--edge);border-radius:10px;padding:8px}
.forecast-card{padding:16px;background:var(--card);border:1px solid var(--edge);border-radius:16px;margin-bottom:24px}
.forecast-card .row{padding:0}.forecast-card .row__amount{font-size:22px}.forecast-card .note{padding-inline:0}
.overview-budget{margin-bottom:16px}
.overview-budget .hero__top{flex-wrap:wrap;gap:4px 12px}
.overview-budget .hero__verdict{flex-shrink:1;overflow-wrap:anywhere}
.overview-budget .bar__top{align-items:flex-start;flex-wrap:wrap;gap:4px 12px}
.overview-budget .bar__value{white-space:normal;overflow-wrap:anywhere;max-width:100%;flex-shrink:1}
.overview-budget__time{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:space-between;margin-top:8px;color:var(--fg-dim);font-size:13px}
.overview-budget .row{padding:10px 0;border-bottom:1px solid var(--tint-edge)}
.overview-budget .row__amount{font-size:18px}
.overview-budget .explanation{background:transparent;padding:8px 0;margin:4px 0}
.overview-budget__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.overview-budget__actions .btn{flex:1 1 140px;white-space:normal;min-width:0;text-align:center}
.overview-money,.overview-savings,.overview-budget--empty{padding:16px;background:var(--card);border:1px solid var(--edge);border-radius:16px;margin-bottom:16px}
.overview-money .row,.overview-savings .row{padding:10px 0}
.overview-money .row__amount{font-size:22px}
.overview-savings h2,.overview-budget--empty h2{margin:0 0 8px;font-weight:600}
.overview-savings .note,.overview-budget--empty .note{padding-inline:0}
.overview-savings .btn{margin-top:8px}
.planning-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.planning-actions .btn{white-space:normal;min-width:0;text-align:center}
a.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
@media(min-width:600px){.plan-destinations{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:900px){
 body.has-tabs #app{margin-left:240px;margin-right:auto;max-width:920px;padding:32px 40px 48px}
 body.has-tabs .tabbar{inset:0 auto 0 0;width:220px;border-top:0;border-right:1px solid var(--edge);padding:96px 16px 24px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:8px}
 body.has-tabs .tab{flex:none;display:flex;flex-direction:row;justify-content:flex-start;gap:16px;padding:16px;border-radius:12px;min-height:56px}
 body.has-tabs .tab__label{font-size:16px}body.has-tabs .tab--on{background:var(--tint)}
 body.has-main .tabbar,body.keyboard-open .tabbar{display:none}.scrim{align-items:center;padding:24px}.sheet{border-radius:20px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

body.has-sheet #app,body.has-sheet>.tabbar{pointer-events:none}

.date-shortcuts button{min-height:44px}.explanation summary{min-height:32px;padding-block:6px}

body.has-tabs #app{padding-bottom:calc(var(--tabs-height,var(--tabbar)) + var(--gap-l))}
body.has-main #app{padding-bottom:calc(var(--gap-l) + var(--safe-bottom))}