/* Family Finance. One continuous sheet on a sea-glass ground, a paper-cut landscape heading each page.
   Headings and figures: Bricolage Grotesque. Everything you operate: Plus Jakarta Sans.
   Themes: follows the system setting; the sidebar button overrides it via data-theme on <html>. */
:root {
  --fd: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;
  --fb: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bg: #DCEAE7; --bg2: #F8D9C3; --sheet: #FBFDFC; --sky1: #FCE6D6; --sky2: #E4F2EF;
  --ink: #10303A; --muted: #506A71; --line: rgba(16,48,58,.11); --well: #EDF5F3; --well2: #FFF1E6; --tint: rgba(15,124,128,.11);
  --pri: #0F7C80; --pri-ink: #0A5F63; --on-pri: #FFFFFF; --peach: #F2A06B; --peach-ink: #8A4A1A;
  --need: #0F7C80; --want: #D88416; --save: #6A5BD6; --pos: #1B7F4F; --neg: #C2403A; --warn: #A66300;
  --pathi: #2F73BA; --zulfa: #CC4F6C; --on-av: #FFFFFF;
  --wave1: #CDE6E2; --wave2: #9DD2CD; --wave3: #5DB5AF; --sun: #FFD2AE;
  --grain: .07; --blend: multiply;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #061013; --bg2: #241526; --sheet: #0E1C22; --sky1: #1E1A2E; --sky2: #0E2229;
    --ink: #E7F2F0; --muted: #94ACB0; --line: rgba(231,242,240,.11); --well: #14282F; --well2: #2B2321; --tint: rgba(63,193,191,.15);
    --pri: #3FC1BF; --pri-ink: #86E3E0; --on-pri: #04201F; --peach: #FFB27A; --peach-ink: #FFC9A3;
    --need: #3FC1BF; --want: #F0A540; --save: #A397FF; --pos: #4FD18B; --neg: #FF7F77; --warn: #F0B24A;
    --pathi: #6AA9F0; --zulfa: #F58BA8; --on-av: #06151B;
    --wave1: #14313A; --wave2: #1A4650; --wave3: #215A60; --sun: #FFC9A3; --grain: .06; --blend: screen;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #061013; --bg2: #241526; --sheet: #0E1C22; --sky1: #1E1A2E; --sky2: #0E2229;
  --ink: #E7F2F0; --muted: #94ACB0; --line: rgba(231,242,240,.11); --well: #14282F; --well2: #2B2321; --tint: rgba(63,193,191,.15);
  --pri: #3FC1BF; --pri-ink: #86E3E0; --on-pri: #04201F; --peach: #FFB27A; --peach-ink: #FFC9A3;
  --need: #3FC1BF; --want: #F0A540; --save: #A397FF; --pos: #4FD18B; --neg: #FF7F77; --warn: #F0B24A;
  --pathi: #6AA9F0; --zulfa: #F58BA8; --on-av: #06151B;
  --wave1: #14313A; --wave2: #1A4650; --wave3: #215A60; --sun: #FFC9A3; --grain: .06; --blend: screen;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
body { margin: 0; min-height: 100vh; color: var(--ink); font: 16px/1.5 var(--fb);
       background: radial-gradient(900px 520px at 4% -6%, var(--bg2), transparent 62%), var(--bg); }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9; opacity: var(--grain); mix-blend-mode: var(--blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul { margin: 0; padding: 0; }
button, input, select { font-family: var(--fb); }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }
svg { display: block; }
[hidden] { display: none !important; }
.ic { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.w1 { fill: var(--wave1); } .w2 { fill: var(--wave2); } .w3 { fill: var(--wave3); } .wf { fill: var(--sheet); }

/* shell */
.app { max-width: 1480px; margin: 0 auto; padding-inline: 16px; display: flex; flex-wrap: wrap; align-items: stretch; }
.side { flex: 0 0 232px; padding: 26px 12px 22px 4px; display: flex; flex-direction: column;
        position: sticky; top: 0; align-self: flex-start; max-height: 100vh; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 10px 24px; font: 700 21px/1.1 var(--fd); letter-spacing: -.02em; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 16px; border-radius: 999px;
         font-size: 14px; font-weight: 500; color: var(--muted); }
.nav a.on { background: var(--sheet); color: var(--ink); font-weight: 700; }
.nav a.on .ic { stroke: var(--pri); }
.side-foot { padding: 20px 10px 0; display: flex; flex-direction: column; gap: 12px; font-size: 13px; color: var(--muted); }
.couple { display: flex; align-items: center; gap: 12px; line-height: 1.35; }
.av { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
      font: 700 13px var(--fb); color: var(--on-av); flex: none; box-shadow: 0 0 0 2px var(--bg); }
.av.p { background: var(--pathi); } .av.z { background: var(--zulfa); } .av.n { background: var(--line); color: var(--muted); }
.av.sm { width: 28px; height: 28px; font-size: 11px; box-shadow: none; }
.theme, .logout { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: 999px;
                  border: 1px solid var(--line); background: transparent; color: var(--ink); font: 600 13px var(--fb); }
form.inline { display: inline; margin: 0; }

.sheet { flex: 999 1 640px; min-width: 0; margin: 14px 0; border-radius: 36px; background: var(--sheet);
         position: relative; overflow: hidden; z-index: 2; display: flex; flex-direction: column; min-height: 80vh; }
.hero { position: relative; flex: none; background: linear-gradient(var(--sky1), var(--sky2) 80%); }
.hero.sm { height: 196px; } .hero.lg { height: 262px; }
.hero .waves { position: absolute; left: 0; bottom: -1px; width: 100%; height: 100%; z-index: 1; }
.sun { position: absolute; right: 110px; width: 84px; height: 84px; border-radius: 50%; z-index: 0;
       background: radial-gradient(circle at 36% 34%, #FFFFFF 0, var(--sun) 38%, var(--peach) 100%);
       box-shadow: 0 0 60px 8px color-mix(in srgb, var(--peach) 45%, transparent); }
.hero.sm .sun { top: 86px; } .hero.lg .sun { top: 112px; }
.stars { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity .2s;
  background: radial-gradient(1.5px 1.5px at 12% 22%, #fff, transparent), radial-gradient(1.5px 1.5px at 31% 14%, #fff, transparent),
              radial-gradient(1px 1px at 46% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 72% 18%, #fff, transparent),
              radial-gradient(1px 1px at 88% 34%, #fff, transparent), radial-gradient(1px 1px at 20% 40%, #fff, transparent); }
:root[data-theme="dark"] .stars { opacity: .7; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stars { opacity: .7; } }
.hero-in { position: relative; z-index: 3; padding: 34px 48px 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 24px; }
.hero-in .grow { flex: 1 1 320px; min-width: 0; }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.title { font: 700 36px/1.05 var(--fd); letter-spacing: -.025em; text-wrap: balance; }
.hero.lg .title { font-size: 44px; }
.sub { font-size: 15px; line-height: 1.5; color: var(--muted); margin-top: 10px; max-width: 58ch; }
.pad { padding: 0 48px 56px; display: flex; flex-direction: column; }

/* type and sections */
.h2 { font: 650 22px/1.15 var(--fd); letter-spacing: -.015em; }
.h3 { font: 600 16px/1.3 var(--fb); }
.muted { color: var(--muted); } .small { font-size: 13px; } .xs { font-size: 12px; }
.pos { color: var(--pos); } .neg { color: var(--neg); } .warn { color: var(--warn); }
.sec { padding-top: 30px; margin-top: 30px; border-top: 1px solid var(--line); }
.sec.first { border-top: 0; margin-top: 0; padding-top: 0; }
.sec-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin-bottom: 16px; }
.g2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 0 68px; }
.split { display: flex; flex-wrap: wrap; gap: 0 56px; align-items: flex-start; }
.split > .main { flex: 999 1 520px; min-width: 0; } .split > .rail { flex: 1 1 320px; min-width: 0; }
.col { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.between { justify-content: space-between; } .nowrap { flex-wrap: nowrap; } .grow { flex-grow: 1; }

/* figures */
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); row-gap: 22px; }
.fig { padding: 2px 22px; border-left: 1px solid var(--line); }
.fig:first-child { border-left: 0; padding-left: 0; }
.fig small { display: block; font-size: 13px; color: var(--muted); }
.fig b { display: block; font: 700 27px/1.1 var(--fd); letter-spacing: -.02em; margin: 7px 0 5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fig span { font-size: 13px; color: var(--muted); } .fig span.pos { color: var(--pos); } .fig span.neg { color: var(--neg); }

/* ring */
.health { position: relative; z-index: 4; display: flex; flex-wrap: wrap; gap: 8px 36px; align-items: flex-start; margin-bottom: 34px; }
.health .ring { margin-top: -128px; flex: none; max-width: 100%; }
.health .txt { flex: 1 1 380px; min-width: 0; padding-top: 20px; }
.score { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.score b { font: 700 76px/1 var(--fd); letter-spacing: -.04em; }
.score span { font: 600 20px var(--fd); color: var(--pri-ink); }
.lede { font-size: 15px; line-height: 1.65; color: var(--muted); margin-top: 12px; max-width: 62ch; }

/* chips and buttons */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 12px; border-radius: 999px; font-size: 12.5px;
        font-weight: 600; background: var(--tint); color: var(--pri-ink); white-space: nowrap; }
.chip.want { background: color-mix(in srgb, var(--want) 17%, transparent); color: var(--warn); }
.chip.save { background: color-mix(in srgb, var(--save) 17%, transparent); color: var(--save); }
.chip.pos { background: color-mix(in srgb, var(--pos) 15%, transparent); color: var(--pos); }
.chip.mute { background: var(--line); color: var(--muted); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px;
       border: 1px solid var(--line); background: transparent; color: var(--ink); font: 600 14px var(--fb); white-space: nowrap; }
.btn .ic { width: 16px; height: 16px; stroke-width: 2; }
.btn.pri { background: var(--pri); border-color: var(--pri); color: var(--on-pri); font-weight: 700; }
.btn.danger { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 35%, transparent); }
.btn.ghost { border-color: transparent; color: var(--pri-ink); padding: 0 10px; }
.btn.block { width: 100%; }
.link { color: var(--pri-ink); font-weight: 600; font-size: 13.5px; }
.month { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 6px; border-radius: 999px; background: var(--well); font-weight: 600; font-size: 14px; }
.month a { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; color: var(--muted); font-size: 16px; border-radius: 999px; }

/* bars */
.bar { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 99px; background: var(--need); }
.bar.lg { height: 12px; } .bar i.want { background: var(--want); } .bar i.save { background: var(--save); } .bar i.warn { background: var(--want); }
.seg { display: flex; height: 24px; gap: 4px; } .seg i { display: block; height: 100%; border-radius: 99px; min-width: 0; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 9px; flex: none; }
.cat-row { padding: 10px 0; }
.cat-row .top { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; margin-bottom: 8px; font-variant-numeric: tabular-nums; }

/* lists, wells, notices */
.li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.list > .li:first-child { border-top: 0; padding-top: 4px; }
.li .grow { min-width: 0; } .li b { display: block; font-weight: 600; font-size: 15px; }
.li small { display: block; color: var(--muted); font-size: 13px; margin-top: 3px; }
.amt { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 15px; }
.well { border-radius: 26px; background: var(--well); padding: 22px 24px; }
.well.flat { padding: 16px 20px; border-radius: 20px; }
.notice { border-radius: 20px; padding: 14px 20px; margin-bottom: 22px; font-size: 14px; background: color-mix(in srgb, var(--neg) 13%, transparent); color: var(--neg); }
.empty { color: var(--muted); font-size: 14.5px; line-height: 1.6; padding: 6px 0; }

/* forms */
.field { display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--muted); min-width: 0; }
.field .hint { font-weight: 500; line-height: 1.5; }
.in { font: 500 15px var(--fb); color: var(--ink); min-height: 46px; padding: 0 16px; border-radius: 14px; border: 1px solid transparent; background: var(--well); width: 100%; }
.in:focus { outline: 2px solid var(--pri); outline-offset: 0; }
select.in { background-color: var(--well); }
.well .in, .well select.in { background-color: var(--sheet); }
.fields { display: flex; flex-wrap: wrap; gap: 14px; } .fields .field { flex: 1 1 150px; }
.filters { align-items: flex-end; margin-bottom: 8px; }
.filters .field { flex: 1 1 140px; }

/* tables */
.scroll { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { font: 600 12.5px var(--fb); color: var(--muted); text-align: left; padding: 0 14px 12px; white-space: nowrap; }
.tbl td { padding: 12px; border-top: 1px solid var(--line); font-size: 14px; vertical-align: middle; }
.tbl td small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.tbl .r { text-align: right; } .tbl td:first-child { white-space: nowrap; }

/* login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.login-card { width: min(100%, 400px); border-radius: 36px; background: var(--sheet); overflow: hidden; position: relative; z-index: 2; }
.login-card .hero { height: 150px; }
.login-card form { padding: 0 32px 34px; display: flex; flex-direction: column; gap: 16px; margin-top: -34px; position: relative; z-index: 4; }
.login-cat { align-self: center; }
.login-card h1 { font: 700 30px/1.1 var(--fd); letter-spacing: -.02em; text-align: center; }

@media (max-width: 900px) {
  .side { flex: 1 1 100%; position: static; max-height: none; padding: 18px 0 4px; }
  .nav { flex-direction: row; overflow-x: auto; padding-bottom: 6px; } .nav a { white-space: nowrap; }
  .side-foot { flex-direction: row; flex-wrap: wrap; align-items: center; padding-top: 8px; }
  .sheet { margin: 0 0 14px; } .pad, .hero-in { padding-left: 20px; padding-right: 20px; }
  .sheet, .split > .main, .split > .rail { flex: 1 1 100%; }
  .health .ring { margin-top: -100px; }
}
@media (max-width: 560px) {
  .title, .hero.lg .title { font-size: 30px; } .score b { font-size: 60px; }
  .sun { right: 30px; } .fig b { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }