/* =====================================================================
   STEADY — a calm, ADHD-friendly budget planner
   Soft lavender page, white cards with big rounded corners, one navy ink,
   a sunny yellow for "this matters", and pastel pockets that always mean
   the same thing. Lots of space, one idea per card.
   ===================================================================== */
:root, [data-theme="steady"] {
  --bg: #ECEEF7; --paper: #FFFFFF; --paper2: #F0F1F9; --paper3: #E6E8F4;
  --ink: #1F1D3D; --ink2: #5E6180; --ink3: #8E91AD; --hair: #E2E4F0;
  --navy: #1F1D3D; --navy2: #2C2A54; --on-navy: #FFFFFF; --on-navy2: #B8BAD8;
  --yellow: #F4DE4F; --yellow-soft: #FAF2C6; --yellow-ink: #6B5A00;
  --lav: #7F86EE; --lav-soft: #E7E8FC; --lav-ink: #474EC4;
  --pink: #F2B3CB; --pink-soft: #FBE6EE; --pink-ink: #B03A69;
  --mint: #8FD0AE; --mint-soft: #DDF2E6; --mint-ink: #1F7449;
  --sky: #9DCBEE; --sky-soft: #E1EFFA; --sky-ink: #2A6CA3;
  --peach: #F2C88A; --peach-soft: #FCEBD2; --peach-ink: #8A5512;
  --lilac: #C8BFF3; --lilac-soft: #ECE9FC;
  --green: #2E8B5E; --on-green: #FFFFFF;
  --shadow-1: 0 1px 2px rgb(31 29 61 / .04); --shadow-2: 0 18px 50px -18px rgb(31 29 61 / .35);
  --r: 28px; --r-md: 20px; --r-sm: 14px;
  --display: "Bricolage Grotesque", "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --sans: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* aliases the shared engine still uses */
  --flame: var(--pink); --flame-soft: var(--pink-soft); --flame-ink: var(--pink-ink); --jade: var(--mint); --jade-ink: var(--mint-ink); --sun: var(--yellow); --violet: var(--lav); --violet-soft: var(--lav-soft); --char: var(--navy); --on-char: var(--on-navy); --on-char2: var(--on-navy2);
}
[data-theme="night"] {
  --bg: #15142A; --paper: #201E3B; --paper2: #2A2849; --paper3: #33315A; --ink: #EEEFFB; --ink2: #ABADCB; --ink3: #7F82A3; --hair: #34325A;
  --navy: #0E0D20; --navy2: #23214A; --on-navy: #FFFFFF; --on-navy2: #A7A9CC;
  --yellow: #EED84B; --yellow-soft: #3F3A1E; --yellow-ink: #F4E27A;
  --lav: #8C93F2; --lav-soft: #2E2F5C; --lav-ink: #B9BDFF;
  --pink: #E79BBA; --pink-soft: #45263A; --pink-ink: #F5A9C8;
  --mint: #7FC6A0; --mint-soft: #1F3C33; --mint-ink: #96DDB6;
  --sky: #8DBFE6; --sky-soft: #1F3450; --sky-ink: #9ACDF3;
  --peach: #E7B977; --peach-soft: #43331D; --peach-ink: #F2C88A;
  --lilac: #A99FE0; --lilac-soft: #2E2B52; --green: #3AA272;
  --shadow-2: 0 18px 50px -18px rgb(0 0 0 / .7);
}
html { font-size: 16px; } html[data-text="0"] { font-size: 14.5px; } html[data-text="2"] { font-size: 17.5px; } html[data-text="3"] { font-size: 19px; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.5 var(--sans); -webkit-font-smoothing: antialiased; min-height: 100vh; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; }
h2 { font: 700 1.4rem/1.15 var(--sans); letter-spacing: -.01em; }
h3 { font: 700 1.05rem/1.2 var(--sans); }
p { margin: .5rem 0; }
a { color: inherit; text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
em { font-style: normal; }
small { font-size: .82rem; }
.num { font-variant-numeric: tabular-nums; }
.small { font-size: .86rem; } .muted { color: var(--ink2); } .grow { flex: 1; } .right { margin-left: auto; }
.neg { color: var(--pink-ink) !important; } .pos { color: var(--mint-ink); font-weight: 700; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
::selection { background: var(--yellow); color: #1F1D3D; }
:focus-visible { outline: 3px solid var(--lav); outline-offset: 2px; border-radius: 8px; }
.ic { width: 1.2em; height: 1.2em; flex: none; vertical-align: -.22em; }
.boot { min-height: 100vh; display: grid; place-items: center; font: 800 3rem var(--display); color: var(--ink); }
.error-text { color: var(--pink-ink); font-weight: 700; }
.kick { display: block; font-size: .9rem; font-weight: 700; color: var(--ink2); }
.lede { color: var(--ink2); max-width: 60ch; margin: 0 0 1.4rem; font-size: 1.05rem; }
.hl { background: linear-gradient(176deg, transparent 50%, var(--yellow) 50%, var(--yellow) 88%, transparent 88%); padding: 0 .12em; margin: 0 -.12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
[data-theme="night"] .hl { color: #1F1D3D; }
kbd { font: 700 .78rem var(--sans); padding: .12rem .45rem; border-radius: 7px; background: var(--paper2); color: var(--ink2); border: 1px solid var(--hair); }
.amt { transition: filter .2s; }
.hide-bal .amt { filter: blur(7px); }
.hide-bal .amt:hover, .hide-bal .amt:focus { filter: none; }
.calm *, .calm *::before, .calm *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; }

/* ---------- Controls ---------- */
.btn { --b: var(--paper); display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .72rem 1.25rem; border-radius: 16px; border: 2px solid var(--hair); background: var(--b); color: var(--ink); font: 700 .95rem/1.1 var(--sans); text-decoration: none; cursor: pointer; transition: transform .12s, background .12s, border-color .12s, box-shadow .12s; white-space: nowrap; user-select: none; }
.btn:hover { border-color: color-mix(in oklab, var(--ink) 35%, transparent); }
.btn:active { transform: translateY(1px); }
.btn.solid { --b: var(--navy); color: var(--on-navy); border-color: var(--navy); }
[data-theme="night"] .btn.solid { --b: var(--yellow); color: #1F1D3D; border-color: var(--yellow); }
.btn.solid:hover { box-shadow: 0 8px 20px -10px rgb(31 29 61 / .6); }
.btn.yellow { --b: var(--yellow); color: #1F1D3D; border-color: var(--yellow); }
.btn.green { --b: var(--green); color: var(--on-green); border-color: var(--green); }
.btn.ghost { --b: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--paper2); }
.btn.on-dark { --b: transparent; color: var(--on-navy); border-color: rgb(255 255 255 / .28); }
.btn.on-dark:hover { border-color: rgb(255 255 255 / .6); }
.btn.danger { color: var(--pink-ink); }
.btn.sm { padding: .45rem .85rem; font-size: .84rem; border-radius: 12px; }
.btn.big, .btn.lg { padding: .95rem 1.6rem; font-size: 1.05rem; border-radius: 18px; }
.btn.big-btn, .btn.block { width: 100%; padding: .95rem 1.4rem; font-size: 1.02rem; border-radius: 18px; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.icon-btn { all: unset; box-sizing: border-box; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; cursor: pointer; color: var(--ink2); flex: none; }
.icon-btn:hover { background: var(--paper2); color: var(--ink); }
.icon-btn .ic { width: 20px; height: 20px; }
.icon-btn.sm { width: 34px; height: 34px; border-radius: 10px; } .icon-btn.sm .ic { width: 17px; height: 17px; }
.icon-btn:focus-visible { outline: 3px solid var(--lav); }
.box-btn { width: 52px; height: 52px; background: var(--paper); border-radius: 16px; color: var(--ink); }
.u-link { all: unset; cursor: pointer; color: var(--ink2); font-weight: 700; font-size: .92rem; text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--ink2) 40%, transparent); text-underline-offset: 5px; text-decoration-thickness: 2px; white-space: nowrap; }
.u-link:hover { color: var(--ink); }
.u-link:focus-visible { outline: 3px solid var(--lav); }
.plainbtn { all: unset; cursor: pointer; display: inline-flex; gap: .3rem; align-items: center; }
.link-plain { all: unset; cursor: pointer; } .link-plain:hover b { text-decoration: underline; text-underline-offset: 3px; } .link-plain:focus-visible { outline: 3px solid var(--lav); }
.input { width: 100%; padding: .75rem .95rem; border: 2px solid var(--hair); border-radius: 14px; background: var(--paper); color: var(--ink); font: 400 1rem/1.3 var(--sans); }
.input::placeholder { color: var(--ink3); }
.input:focus { outline: none; border-color: var(--lav); box-shadow: 0 0 0 4px color-mix(in oklab, var(--lav) 25%, transparent); }
.input.sm { padding: .45rem .7rem; font-size: .9rem; width: auto; }
.input.lg { padding: 1rem 1.1rem; font-size: 1.25rem; border-radius: 18px; background: var(--paper2); border-color: transparent; }
.input.lg.hot { background: var(--paper); border-color: var(--ink); }
.input.big-in { font: 800 2rem var(--display); padding: .6rem .9rem; }
select.input { appearance: none; padding-right: 2.4rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%235E6180' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; background-size: 15px; }
textarea.input { resize: vertical; }
.field { display: flex; flex-direction: column; gap: .35rem; font-size: .9rem; font-weight: 700; min-width: 0; }
.field > span:first-child { color: var(--ink2); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grid .wide, .form-grid .switch.wide { grid-column: 1 / -1; }
.inline { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.stack { display: flex; flex-direction: column; gap: .8rem; }
.switch { display: flex; gap: .7rem; align-items: center; cursor: pointer; font-weight: 600; }
.switch input, input.tog { appearance: none; flex: none; width: 56px; height: 32px; border-radius: 99px; background: var(--paper3); position: relative; cursor: pointer; margin: 0; transition: background .15s; border: 0; }
.switch input::after, input.tog::after { content: ""; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .18s, background .18s; }
.switch input:checked, input.tog:checked { background: var(--navy); }
[data-theme="night"] .switch input:checked, [data-theme="night"] input.tog:checked { background: var(--lav); }
.switch input:checked::after, input.tog:checked::after { transform: translateX(24px); background: var(--yellow); }
.switch input:focus-visible, input.tog:focus-visible { outline: 3px solid var(--lav); outline-offset: 2px; }
.segs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: 18px; background: var(--paper); }
.box .segs, .set-row .segs { background: var(--paper2); }
.segs button { all: unset; cursor: pointer; padding: .55rem 1rem; border-radius: 13px; font-weight: 700; font-size: .95rem; color: var(--ink2); }
.segs button:hover { color: var(--ink); }
.segs button[aria-pressed="true"] { background: var(--navy); color: var(--on-navy); }
[data-theme="night"] .segs button[aria-pressed="true"] { background: var(--yellow); color: #1F1D3D; }
.segs button:focus-visible { outline: 3px solid var(--lav); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1rem; border-radius: 14px; background: var(--paper2); font-weight: 700; font-size: .92rem; }
.chip[aria-pressed="true"] { background: var(--navy); color: var(--on-navy); }
.chip:focus-visible { outline: 3px solid var(--lav); }
.tag { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .55rem; border-radius: 8px; font-size: .76rem; font-weight: 700; background: var(--paper2); color: var(--ink2); white-space: nowrap; }

/* Pockets: the colours always mean the same thing */
.p-food { --pc: var(--pink); --ps: var(--pink-soft); --pi: var(--pink-ink); }
.p-groceries { --pc: var(--mint); --ps: var(--mint-soft); --pi: var(--mint-ink); }
.p-transport { --pc: var(--sky); --ps: var(--sky-soft); --pi: var(--sky-ink); }
.p-fun { --pc: var(--yellow); --ps: var(--yellow-soft); --pi: var(--yellow-ink); }
.p-home { --pc: var(--lilac); --ps: var(--lilac-soft); --pi: var(--lav-ink); }
.p-buffer { --pc: var(--peach); --ps: var(--peach-soft); --pi: var(--peach-ink); }
.p-hobby { --pc: var(--lav); --ps: var(--lav-soft); --pi: var(--lav-ink); }
.p-in, .p-side { --pc: var(--mint); --ps: var(--mint-soft); --pi: var(--mint-ink); }
.p-none, .p-, .p-sub, .p-trial, .p-tax { --pc: var(--lilac); --ps: var(--lav-soft); --pi: var(--lav-ink); }
.p-tax { --pc: var(--pink); --ps: var(--pink-soft); --pi: var(--pink-ink); }
.p-trial { --pc: var(--yellow); --ps: var(--yellow-soft); --pi: var(--yellow-ink); }
.pdot { display: inline-block; width: 12px; height: 12px; border-radius: 4px; background: var(--pc, var(--lilac)); flex: none; }
.pchip { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .7rem; border-radius: 12px; background: var(--paper2); font-weight: 700; font-size: .9rem; white-space: nowrap; }
.picon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--ps, var(--lav-soft)); color: var(--pi, var(--ink)); flex: none; }
.picon .ic { width: 24px; height: 24px; }
.picon.a-bank { background: var(--sky-soft); color: var(--sky-ink); } .picon.a-card { background: var(--pink-soft); color: var(--pink-ink); } .picon.a-ewallet { background: var(--lav-soft); color: var(--lav-ink); } .picon.a-cash { background: var(--mint-soft); color: var(--mint-ink); }
.unsorted .picon, .lg-row.unsorted .picon { background: var(--yellow); color: #1F1D3D; }

/* ---------- Shell: the navy sidebar ---------- */
.side { position: fixed; inset: 0 auto 0 0; width: 268px; background: var(--navy); color: var(--on-navy); display: flex; flex-direction: column; padding: 1.6rem 1rem 1rem; z-index: 50; overflow-y: auto; scrollbar-width: thin; }
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: inherit; padding: 0 .6rem 1.4rem; }
.brand .mark { width: 46px; height: 46px; flex: none; }
.brand b { font: 800 1.85rem/1 var(--display); letter-spacing: -.02em; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-link { display: flex; align-items: center; gap: .9rem; padding: .7rem 1rem; border-radius: 14px; color: var(--on-navy); text-decoration: none; font-weight: 700; font-size: 1.02rem; }
.side-link .ic { width: 22px; height: 22px; color: var(--on-navy2); }
.side-link:hover { background: var(--navy2); }
.side-link[aria-current="page"] { background: var(--paper); color: var(--ink); }
.side-link[aria-current="page"] .ic { color: var(--ink); }
[data-theme="night"] .side-link[aria-current="page"] { background: var(--yellow); color: #1F1D3D; } [data-theme="night"] .side-link[aria-current="page"] .ic { color: #1F1D3D; }
.side-link:focus-visible { outline: 3px solid var(--yellow); }
.side-badge { margin-left: auto; min-width: 26px; height: 26px; padding: 0 .4rem; border-radius: 99px; background: var(--pink); color: #1F1D3D; display: grid; place-items: center; font-size: .8rem; font-weight: 800; }
.side-hub { font-size: .9rem; color: var(--on-navy2); padding: 1rem 1rem .35rem; font-weight: 600; }
.side-foot { margin-top: auto; padding-top: 1.2rem; display: grid; gap: .9rem; }
.payday-card { display: grid; gap: .1rem; padding: 1rem 1.1rem; border-radius: 20px; background: var(--navy2); text-decoration: none; color: var(--on-navy); }
.payday-card b { font-size: 1.05rem; } .payday-card > span:nth-child(2) { color: var(--on-navy2); font-size: .9rem; }
.pd-dots { display: flex; flex-wrap: wrap; gap: 4px; margin-top: .55rem; }
.pd-dots i { width: 11px; height: 11px; border-radius: 50%; background: rgb(255 255 255 / .16); }
.pd-dots i.past { background: var(--lav); } .pd-dots i.today { background: var(--yellow); } .pd-dots i.pay { background: var(--mint); }
.me { display: flex; align-items: center; gap: .75rem; padding: 0 .4rem; }
.me .avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--pink); color: #1F1D3D; display: grid; place-items: center; font: 800 1.2rem var(--display); flex: none; }
.me > span:last-child { display: grid; } .me small { color: var(--on-navy2); }
.main-col { margin-left: 268px; padding: 1.6rem 2.4rem 3rem; min-width: 0; }
.scrim { display: none; }
.demo-band { margin: -1.6rem -2.4rem 1.2rem; padding: .55rem 1rem; background: var(--navy); color: var(--on-navy); text-align: center; font-size: .88rem; }
.demo-band .demo-cta { color: var(--yellow); font-weight: 700; margin-left: .4rem; }
.focus-band { display: flex; align-items: center; justify-content: center; gap: .7rem; margin: 0 0 1rem; padding: .6rem; border-radius: 16px; background: var(--paper); font-weight: 700; color: var(--ink2); }
.topbar { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.8rem; }
.menu-btn { display: none !important; }
.tb-title { display: flex; align-items: baseline; gap: 1rem; min-width: 0; flex: 1; }
.tb-title h1 { white-space: nowrap; font: 800 clamp(2rem, 3vw, 2.7rem)/1.05 var(--display); letter-spacing: -.02em; }
.tb-sub { color: var(--ink2); font-size: 1.15rem; white-space: nowrap; }
.tb-tools { display: flex; align-items: center; gap: .8rem; }
.search { position: relative; display: flex; align-items: center; gap: .6rem; width: min(320px, 24vw); padding: 0 .9rem; height: 58px; border-radius: 18px; background: var(--paper); color: var(--ink3); }
.search input { all: unset; flex: 1; min-width: 0; font-size: 1rem; color: var(--ink); }
.search input::placeholder { color: var(--ink3); }
.search:focus-within { box-shadow: 0 0 0 3px var(--lav); }
.search-res { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 8px); background: var(--paper); border-radius: 18px; box-shadow: var(--shadow-2); padding: .5rem; z-index: 60; max-height: 60vh; overflow: auto; }
.search-res.on { display: grid; gap: 2px; }
.search-res button { all: unset; cursor: pointer; display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; border-radius: 12px; color: var(--ink); }
.search-res button:hover, .search-res button:focus-visible { background: var(--paper2); }
.search-res b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-res p { margin: .5rem .7rem; }
.tb-btn { all: unset; cursor: pointer; position: relative; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: var(--paper); color: var(--ink); }
.tb-btn .ic { width: 24px; height: 24px; }
.tb-btn:hover { box-shadow: 0 0 0 2px var(--hair); }
.tb-btn[aria-pressed="true"] { background: var(--navy); color: var(--on-navy); }
.tb-btn:focus-visible { outline: 3px solid var(--lav); }
.tb-btn .dot { position: absolute; top: 14px; right: 15px; width: 10px; height: 10px; border-radius: 50%; background: var(--pink); border: 2px solid var(--paper); }
.bell-wrap { position: relative; }
.bell-pop { position: absolute; right: 0; top: calc(100% + 10px); width: min(360px, 90vw); background: var(--paper); border-radius: 22px; box-shadow: var(--shadow-2); padding: 1rem; z-index: 70; }
.bell-pop > b { display: block; font-size: 1.05rem; margin: 0 .3rem .5rem; }
.bell-pop ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.bell-pop a { display: flex; gap: .7rem; align-items: center; padding: .65rem .7rem; border-radius: 14px; text-decoration: none; font-weight: 600; }
.bell-pop a:hover { background: var(--paper2); }
.bell-pop a .ic { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--lav-soft); color: var(--lav-ink); }
.bell-pop .tone-pink .ic { background: var(--pink-soft); color: var(--pink-ink); } .bell-pop .tone-mint .ic { background: var(--mint-soft); color: var(--mint-ink); } .bell-pop .tone-yellow .ic { background: var(--yellow-soft); color: var(--yellow-ink); }
.tb-log { height: 58px; border-radius: 18px; padding: 0 1.5rem; font-size: 1.02rem; }
.tb-log .ic { width: 22px; height: 22px; }
.tabbar { display: none; }
body.focus-on .side { display: none; }
body.focus-on .main-col { margin-left: 0; max-width: 1180px; margin-inline: auto; }
body.focus-on .nf, body.focus-on .search { display: none !important; }

/* ---------- Cards ---------- */
.box { position: relative; background: var(--paper); border-radius: var(--r); padding: 1.7rem 1.8rem; box-shadow: var(--shadow-1); min-width: 0; color: var(--ink); text-decoration: none; display: block; }
.box > h2 { margin-bottom: 1.1rem; }
.box-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.box.dark { background: var(--navy); color: var(--on-navy); }
[data-theme="night"] .box.dark { background: #0E0D20; }
.box.dark .u-link { color: var(--on-navy2); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem; }
.empty-note { text-align: center; padding: 1.2rem .6rem; color: var(--ink2); display: grid; gap: .6rem; justify-items: center; }
.empty-note p { margin: 0; max-width: 34ch; }
.note { display: flex; gap: .85rem; align-items: center; padding: .95rem 1.1rem; border-radius: 18px; background: var(--paper2); margin: .9rem 0 0; }
.note > .ic { width: 44px; height: 44px; padding: 10px; border-radius: 14px; background: var(--paper); flex: none; }
.note > span:not(.amt) { display: grid; gap: .1rem; } .note b { font-size: 1rem; } .note small { color: var(--ink2); }
.note.pink { background: var(--pink-soft); } .note.pink > .ic { background: var(--pink); color: #1F1D3D; }
.note.mint { background: var(--mint-soft); } .note.mint > .ic { background: var(--mint); color: #1F1D3D; }
.note.yellow { background: var(--yellow-soft); } .note.yellow > .ic { background: var(--yellow); color: #1F1D3D; }
.note.lav { background: var(--lav-soft); } .note.lav > .ic { background: var(--lav); color: #fff; }
.note.grey { background: var(--paper2); }
p.note { display: block; } p.note > .ic { display: none; }
p.note:has(> .ic) { display: flex; } p.note:has(> .ic) > .ic { display: block; }
.rows { list-style: none; margin: 0; padding: 0; display: grid; }
.rows li { display: flex; align-items: center; gap: .9rem; padding: .85rem 0; border-bottom: 1px solid var(--hair); }
.rows li:last-child { border-bottom: 0; }
.r-t { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.r-t b { font-size: 1.02rem; } .r-t small { color: var(--ink2); }
.rows li > .amt, .r-amt { font-weight: 800; font-size: 1.1rem; text-align: right; display: grid; justify-items: end; }
.r-amt small { font-weight: 400; color: var(--ink2); font-size: .82rem; }
.r-img { width: 52px; height: 52px; border-radius: 16px; overflow: hidden; flex: none; background: var(--paper2); } .r-img img { width: 100%; height: 100%; object-fit: cover; }
.badge-y { justify-self: start; width: fit-content; display: inline-block; padding: .1rem .5rem; border-radius: 8px; background: var(--yellow); color: #1F1D3D; font-size: .76rem; font-weight: 800; margin-left: .3rem; }
.kv { display: flex; justify-content: space-between; padding: .3rem 0; color: var(--ink2); } .kv .amt { color: var(--ink); font-weight: 800; }
.big-num { font: 800 2.6rem/1.05 var(--display); margin: .2rem 0; letter-spacing: -.02em; }

/* ---------- Today ---------- */
.today-hero { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 1.5rem; margin-bottom: 1.5rem; }
.safe { padding: 1.8rem 2rem 1.9rem; display: flex; flex-direction: column; } .safe-stats { margin-top: auto !important; padding-top: 1.4rem; }
.safe-top { display: flex; justify-content: space-between; gap: 1.5rem; align-items: flex-start; }
.safe-k { font-size: 1.3rem; }
.safe-num { font: 800 clamp(4.2rem, 8vw, 7.2rem)/1 var(--display); margin: .4rem 0 .2rem; letter-spacing: -.035em; }
.safe-line { color: var(--ink2); font-size: 1.12rem; max-width: 46ch; }
.mini-bars { display: flex; gap: 10px; align-items: flex-end; height: 150px; padding-top: .4rem; }
.mb { display: grid; justify-items: center; gap: .35rem; height: 100%; grid-template-rows: 1fr auto; }
.mb i { width: 30px; align-self: end; height: calc(var(--h) * 120px); min-height: 8px; border-radius: 10px; background: var(--lav-soft); }
.mb.over i { background: var(--pink); } .mb.today i { background: var(--navy); width: 30px; } [data-theme="night"] .mb.today i { background: var(--yellow); }
.mb small { color: var(--ink2); font-size: .78rem; }
.safe-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.safe-stats a { display: grid; gap: .2rem; padding: 1.1rem 1.2rem; border-radius: 20px; background: var(--paper2); text-decoration: none; }
.safe-stats a:hover { background: var(--paper3); }
.safe-stats a > span { color: var(--ink2); font-size: .95rem; } .safe-stats b { font: 800 1.75rem/1 var(--display); }
/* The vision board */
.vision { display: flex; flex-direction: column; }
.vb-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(170px, 1fr); gap: 14px; }
.vb-tile { position: relative; margin: 0; border-radius: 22px; overflow: hidden; background: var(--paper2); }
.vb-open { all: unset; cursor: zoom-in; display: block; position: absolute; inset: 0; }
.vb-open img, .vb-open picture { width: 100%; height: 100%; } .vb-open img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.vb-tile:hover .vb-open img { transform: scale(1.04); }
.vb-tile figcaption { position: absolute; left: 10px; bottom: 10px; right: 10px; width: fit-content; max-width: calc(100% - 20px); padding: .3rem .7rem; border-radius: 10px; background: rgb(255 255 255 / .92); color: #1F1D3D; font-weight: 700; font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.vb-tools { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.vb-tools .icon-btn { background: rgb(255 255 255 / .92); color: #1F1D3D; }
.vb-tile:hover .vb-tools, .vb-tile:focus-within .vb-tools { opacity: 1; }
@media (hover: none) { .vb-tools { opacity: 1; } }
.vb-add { display: grid; place-content: center; justify-items: center; gap: .3rem; text-align: center; padding: 1rem; border-radius: 22px; border: 2.5px dashed color-mix(in oklab, var(--lav) 55%, transparent); background: color-mix(in oklab, var(--lav-soft) 60%, var(--paper)); color: var(--ink2); cursor: pointer; transition: background .15s, border-color .15s; }
.vb-add b { color: var(--ink); } .vb-add small { max-width: 18ch; }
.vb-add .plus, .plus { width: 54px; height: 54px; border-radius: 18px; background: var(--paper); display: grid; place-items: center; color: var(--ink); box-shadow: 0 6px 16px -10px rgb(31 29 61 / .5); margin-bottom: .3rem; }
.plus .ic { width: 26px; height: 26px; }
.vb-add:hover, .vb-add.drag, [data-drop].drag { background: var(--lav-soft); border-color: var(--lav); }
.vb-add:focus-within { outline: 3px solid var(--lav); outline-offset: 2px; }
.vb-add.busy { opacity: .6; }
.vb-add.big { grid-column: 1 / -1; grid-row: span 2; }
.vb-ghost { border-radius: 22px; background: repeating-linear-gradient(135deg, var(--paper2) 0 10px, transparent 10px 20px); opacity: .7; }
.vb-grid.n1 .vb-tile:first-child { grid-column: 1 / -1; }
/* The week's money */
.wk-num { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.wk-num b { font: 800 2.7rem/1 var(--display); letter-spacing: -.02em; } .wk-num > span { color: var(--ink2); font-size: 1.2rem; font-weight: 700; } .wk-num small { margin-left: auto; font-weight: 700; color: var(--ink2); }
.wk-battery { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; padding: 8px; border: 3px solid var(--paper3); border-radius: 22px; margin-right: 12px; }
.wk-battery i { height: 64px; border-radius: 13px; background: var(--paper2); }
.wk-battery i.on { background: var(--yellow); }
.wk-battery b { position: absolute; right: -12px; top: 50%; width: 8px; height: 28px; margin-top: -14px; border-radius: 0 6px 6px 0; background: var(--paper3); }
/* The 7-day spotlight */
.box.spot { background: var(--yellow); color: #1F1D3D; }
.box.spot .u-link { color: #1F1D3D; }
.spot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.spot-list li { display: flex; align-items: center; gap: .8rem; padding: .6rem .7rem; border-radius: 18px; background: rgb(255 255 255 / .88); color: #1F1D3D; }
.spot-list li.late { box-shadow: inset 0 0 0 2px var(--pink-ink); }
.spot-list .amt { font-weight: 800; }
.dbadge { display: grid; justify-items: center; width: 52px; padding: .35rem 0; border-radius: 14px; background: #FBE6EE; color: #1F1D3D; flex: none; }
.dbadge b { font: 800 1.35rem/1 var(--display); } .dbadge small { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.sl-t { flex: 1; min-width: 0; display: grid; } .sl-t small { color: #5E6180; }
.tick { all: unset; cursor: pointer; width: 36px; height: 36px; border-radius: 50%; border: 2.5px solid color-mix(in oklab, #1F1D3D 30%, transparent); display: grid; place-items: center; color: transparent; flex: none; }
.tick .ic { width: 18px; height: 18px; }
.tick:hover { border-color: #1F1D3D; color: #1F1D3D; } .tick.on { background: var(--mint); border-color: var(--mint); color: #1F1D3D; }
.tick:focus-visible { outline: 3px solid var(--lav); }
.spot-empty { display: flex; gap: .6rem; align-items: center; font-weight: 700; font-size: 1.1rem; margin: .4rem 0; } .spot-empty .ic { width: 28px; height: 28px; }
/* The clean slate */
.slate { display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
.slate-box { all: unset; cursor: pointer; display: flex; align-items: center; gap: 1.2rem; padding: 1.2rem; border-radius: 24px; background: var(--paper2); transition: background .2s; }
.slate-box:hover { background: var(--paper3); }
.slate-box:focus-visible { outline: 3px solid var(--lav); }
.sb-check { width: 84px; height: 84px; flex: none; border-radius: 24px; border: 4px solid var(--ink); display: grid; place-items: center; color: transparent; background: var(--paper); transition: background .2s, transform .2s; }
.sb-check .ic { width: 50px; height: 50px; }
.sb-t { display: grid; gap: .2rem; } .sb-t b { font: 800 1.6rem/1.05 var(--display); } .sb-t small { color: var(--ink2); font-size: .95rem; }
.slate.on .slate-box { background: var(--mint-soft); }
.slate.on .sb-check { background: var(--mint); border-color: var(--mint); color: #1F1D3D; animation: slateIn .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes slateIn { 0% { transform: scale(.7) rotate(-8deg); } 100% { transform: scale(1); } }
.slate-meta { margin: 0; color: var(--ink2); font-weight: 600; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.slate-meta .ic { color: #E2742C; }
.slate.giant .slate-box { padding: 2rem; } .slate.giant .sb-check { width: 130px; height: 130px; border-radius: 34px; } .slate.giant .sb-check .ic { width: 80px; height: 80px; } .slate.giant .sb-t b { font-size: 2.4rem; }
/* Pockets: liquid envelopes */
.tubes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem .6rem; }
.tube-col { display: grid; justify-items: center; gap: .2rem; text-align: center; text-decoration: none; color: inherit; padding: .3rem 0; border-radius: 16px; }
.tube-col:hover { background: var(--paper2); }
.tube-col b { font-size: .9rem; margin-top: .4rem; } .tube-col > span { font-weight: 800; font-size: 1rem; } .tube-col small { color: var(--ink2); font-size: .74rem; }
.tube { position: relative; width: 44px; height: 110px; border-radius: 22px; background: var(--paper2); overflow: hidden; box-shadow: inset 0 0 0 3px var(--paper3); }
.tube i { position: absolute; left: 3px; right: 3px; bottom: 3px; height: calc((100% - 6px) * var(--f)); border-radius: 0 0 19px 19px; background: var(--pc); transition: height .6s cubic-bezier(.2, .8, .3, 1); }
.tube i::before { content: ""; position: absolute; left: -10px; right: -10px; top: -7px; height: 14px; background: radial-gradient(10px 8px at 10px 8px, var(--pc) 98%, transparent) repeat-x; background-size: 20px 14px; animation: wave 3s linear infinite; }
@keyframes wave { to { background-position: 20px 0; } }
.tube i::after { content: ""; position: absolute; left: 6px; top: 10px; width: 5px; height: 40%; border-radius: 3px; background: rgb(255 255 255 / .45); }
/* Peeks */
.parkmini .ready { color: var(--mint-ink); font-weight: 800; font-size: .9rem; white-space: nowrap; }
.hleft { display: flex; align-items: center; gap: .4rem; color: var(--lav-ink); font-weight: 800; white-space: nowrap; }
.ring2 .rb { fill: none; stroke: var(--lav-soft); } .ring2 .rf { fill: none; stroke: var(--lav); stroke-linecap: round; transition: stroke-dashoffset .6s; }
.hobbymini { display: flex; gap: 1.2rem; align-items: center; }
.hobbymini:hover, .retmini:hover { box-shadow: 0 0 0 3px var(--lav-soft); }
.hm-img { width: 112px; height: 112px; border-radius: 22px; overflow: hidden; flex: none; background: var(--lav-soft); display: grid; place-items: center; color: var(--lav-ink); } .hm-img img { width: 100%; height: 100%; object-fit: cover; } .hm-img .ic { width: 40px; height: 40px; }
.hm-t { display: grid; gap: .2rem; } .hm-t b { font: 800 1.6rem/1.05 var(--display); } .hm-amt { font-weight: 800; color: var(--lav-ink); font-size: 1.25rem; } .hm-amt small { color: var(--ink2); font-weight: 600; }
.retmini { background: var(--mint-soft); display: grid; gap: .3rem; align-content: center; }
.rm-amt { font: 800 2.6rem/1 var(--display); color: var(--mint-ink); } .rm-sub { font-weight: 600; }
.rm-bar { display: block; height: 10px; border-radius: 99px; background: rgb(255 255 255 / .7); overflow: hidden; margin-top: .4rem; } .rm-bar i { display: block; height: 100%; width: calc(var(--f) * 100%); background: var(--mint-ink); border-radius: 99px; }
.resetmini .box-head h2 { font-size: 1.35rem; }
.rs-big { font: 800 1.8rem/1.1 var(--display); margin: 0 0 1rem; }
.resetmini .rs-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 1.2rem; }
.resetmini .rs-steps i { height: 8px; border-radius: 99px; background: rgb(255 255 255 / .18); }
.resetmini .rs-steps i.done { background: var(--mint); } .resetmini .rs-steps i.now { background: var(--yellow); }
.one-number { max-width: 980px; margin: 2rem auto; text-align: center; display: grid; justify-items: center; gap: .6rem; }
.on-k { font-size: 1.4rem; font-weight: 700; margin: 0; }
.on-num { font: 800 clamp(5rem, 14vw, 10rem)/1 var(--display); margin: 0; letter-spacing: -.04em; }
.on-sub { color: var(--ink2); font-size: 1.15rem; max-width: 50ch; }
.on-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin: 1rem 0 2rem; }
.on-vision { width: 100%; text-align: left; } .on-vision .vb-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; } .on-vision .vb-add.big { grid-row: auto; }
.back-one { margin: -.8rem 0 1rem; }

/* ---------- Spending ---------- */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-bottom: 1.4rem; }
.fchip { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.1rem; border-radius: 16px; background: var(--paper); font-weight: 700; }
.fchip[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ink); }
.fchip.sort { background: var(--yellow); color: #1F1D3D; } .fchip.sort b { background: #1F1D3D; color: var(--yellow); border-radius: 99px; min-width: 24px; height: 24px; display: grid; place-items: center; font-size: .8rem; }
.fchip:focus-visible { outline: 3px solid var(--lav); }
.sp-cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 1.5rem; align-items: start; }
.pk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; margin-bottom: 1.4rem; }
.pk-card { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: .5rem; padding: 1rem 1.1rem; border-radius: 22px; background: var(--paper); }
.pk-card > span { display: flex; align-items: center; gap: .45rem; color: var(--ink2); font-weight: 700; font-size: .92rem; }
.pk-card b { font: 800 1.7rem/1 var(--display); }
.pk-card[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ink); }
.pk-card:focus-visible { outline: 3px solid var(--lav); }
.pk-bar { display: block; height: 7px; border-radius: 99px; background: var(--paper2); overflow: hidden; } .pk-bar > i { display: block; height: 100%; background: var(--pc, var(--ink3)); border-radius: 99px; }
.ledger { padding: 1.2rem 1.4rem; }
.lg-head, .lg-row { display: grid; grid-template-columns: 52px minmax(0, 1.5fr) minmax(0, 1.25fr) minmax(0, .7fr) 110px 36px; gap: 1rem; align-items: center; }
.lg-head { padding: .2rem .7rem .8rem; color: var(--ink2); font-weight: 700; font-size: .92rem; }
.lg-head span:first-child { grid-column: 2; } .lg-head span:last-child { grid-column: 5; text-align: right; }
.lg-day { display: flex; justify-content: space-between; align-items: baseline; padding: 1.2rem .7rem .5rem; border-bottom: 1px solid var(--hair); }
.lg-day h3 { font-size: 1.15rem; }
.lg-row { padding: .8rem .7rem; border-radius: 20px; margin: .2rem 0; }
.lg-row:not(.unsorted) { border-bottom: 1px solid var(--hair); border-radius: 0; }
.lg-row.unsorted { background: var(--yellow-soft); }
.lg-t { display: grid; min-width: 0; } .lg-t b { font-size: 1.05rem; } .lg-t small { color: var(--ink2); display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; }
.lg-cat { display: flex; flex-wrap: wrap; gap: .35rem; }
.btn-chip { border: 0; font: inherit; font-weight: 700; font-size: .86rem; padding: .3rem .6rem; color: var(--ink); cursor: pointer; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--hair); }
.btn-chip:hover { box-shadow: inset 0 0 0 2px var(--ink); } .btn-chip.more { font-weight: 700; } .btn-chip:focus-visible { outline: 3px solid var(--lav); }
.lg-amt { text-align: right; font-weight: 800; font-size: 1.15rem; }
.lg-from { font-size: .95rem; }
.taxtag { display: inline-block; padding: 0 .4rem; border-radius: 6px; background: var(--pink-soft); color: var(--pink-ink); font-weight: 800; font-size: .72rem; }
.sp-side { position: sticky; top: 1rem; }
/* Log a spend */
.logbox { padding: 1.6rem; }
.logpanel { display: grid; gap: .8rem; }
.lp-head { display: flex; justify-content: space-between; align-items: baseline; } .lp-head h2 { font-size: 1.45rem; }
.lp-amount { display: flex; align-items: center; gap: .1rem; cursor: text; }
.lp-sym { font: 800 3rem/1 var(--display); color: var(--ink3); }
.lp-amount input { all: unset; width: 100%; font: 800 4.2rem/1.05 var(--display); letter-spacing: -.03em; color: var(--ink); caret-color: var(--lav); }
.lp-amount input::placeholder { color: var(--paper3); }
.lp-left { margin: -.3rem 0 .2rem; color: var(--ink2); font-size: 1.02rem; } .lp-left b { color: var(--ink); }
.lp-tiles { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.lp-tile { position: relative; display: grid; justify-items: center; gap: .35rem; padding: .85rem .3rem; border-radius: 20px; background: var(--paper2); cursor: pointer; text-align: center; border: 2.5px solid transparent; }
.lp-tile input { position: absolute; opacity: 0; pointer-events: none; }
.lp-tile .picon { width: 44px; height: 44px; border-radius: 14px; background: var(--pc); color: #1F1D3D; }
.lp-tile .picon .ic { width: 22px; height: 22px; }
.lp-tile b { font-size: .92rem; }
.lp-tile:has(input:checked) { background: var(--yellow); border-color: #1F1D3D; color: #1F1D3D; }
.lp-tile:has(input:focus-visible) { outline: 3px solid var(--lav); outline-offset: 2px; }
.lp-row { display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem; border-radius: 18px; background: var(--paper2); color: var(--ink2); }
.lp-row input:not(.tog):not([type=file]), .lp-row select { all: unset; flex: 1; min-width: 0; color: var(--ink); font-size: 1rem; font-weight: 700; }
.lp-row select { cursor: pointer; text-align: right; }
.lp-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; padding: .3rem .4rem; }
.lp-row.two label { display: flex; align-items: center; gap: .5rem; padding: .55rem .6rem; }
.lp-toggle span, .lp-file span { flex: 1; color: var(--ink2); font-weight: 600; }
.lp-file { cursor: pointer; } .lp-file:hover { background: var(--paper3); }
.lp-save { width: 100%; padding: 1.1rem; border-radius: 20px; background: var(--lav); border-color: var(--lav); color: #fff; font-size: 1.15rem; }
.lp-save:hover { box-shadow: 0 10px 24px -12px var(--lav); }
.lp-tip { margin: 0; text-align: center; }
.is-in .lp-save { background: var(--green); border-color: var(--green); }
.log-modal { padding: 1.6rem 1.6rem 1.2rem; position: relative; }
.lm-close { position: absolute; top: 1rem; right: 1rem; }

/* ---------- Paycheck plan ---------- */
.plan-cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 1.5rem; align-items: start; }
.plan-cols > div { display: grid; gap: 1.5rem; }
.plan-side { display: grid; gap: 1.5rem; }
.pt-row { display: flex; justify-content: space-between; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.pt-num { font: 800 clamp(3rem, 6vw, 4.6rem)/1 var(--display); margin: .2rem 0; letter-spacing: -.03em; }
.assign { display: flex; gap: .8rem; align-items: center; padding: 1rem 1.3rem; border-radius: 22px; background: var(--mint-soft); }
.assign .ic { width: 30px; height: 30px; } .assign > span { display: grid; } .assign b { font-size: 1.3rem; } .assign small { color: var(--ink2); }
.assign.some { background: var(--yellow-soft); } .assign.over { background: var(--pink-soft); }
.stackbar { display: flex; gap: 3px; height: 84px; margin: 1.4rem 0 .8rem; border-radius: 22px; overflow: hidden; }
.stackbar > span { min-width: 6px; display: flex; align-items: flex-end; padding: .7rem .8rem; color: #1F1D3D; }
.stackbar b { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stack-key { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; color: var(--ink2); font-weight: 700; font-size: .92rem; }
.stack-key li { display: flex; align-items: center; gap: .4rem; } .stack-key i { width: 12px; height: 12px; border-radius: 4px; }
.t-lilac { background: var(--lilac); } .t-pink { background: var(--pink); } .t-mint { background: var(--mint); } .t-sky { background: var(--sky); } .t-yellow { background: var(--yellow); } .t-lav-soft { background: #DCDAFA; } .t-lav { background: var(--lav); } .t-sun2 { background: #F7E99A; } .t-peach2 { background: #F5D6B0; } .t-peach { background: var(--peach); }
.plan-table { padding: 1.3rem 1.6rem; }
.pl-head, .pl-row { display: grid; grid-template-columns: 12px minmax(0, 1.6fr) 190px 120px 140px; gap: 1rem; align-items: center; }
.pl-head { color: var(--ink2); font-weight: 700; font-size: .9rem; padding-bottom: .8rem; border-bottom: 1px solid var(--hair); }
.pl-group { color: var(--ink2); font-weight: 700; font-size: 1.05rem; padding: 1.2rem 0 .5rem; border-bottom: 1px solid var(--hair); }
.pl-row { padding: .9rem 0; border-bottom: 1px solid var(--hair); }
.pl-sw { width: 12px; height: 44px; border-radius: 6px; }
.pl-name { display: grid; } .pl-name b { font-size: 1.1rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .pl-name small { color: var(--ink2); }
.lockpill { display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .5rem; border-radius: 8px; background: var(--peach-soft); color: var(--peach-ink); font-size: .74rem; font-weight: 800; }
.lockpill .ic { width: 12px; height: 12px; }
.stepper { display: flex; align-items: center; gap: .2rem; padding: .3rem; border-radius: 16px; background: var(--paper2); }
.stepper input { all: unset; width: 100%; min-width: 0; text-align: center; font: 800 1.3rem var(--display); }
.stepper input:focus { box-shadow: 0 0 0 2px var(--lav); border-radius: 8px; }
.stepper button { all: unset; cursor: pointer; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: var(--ink2); flex: none; }
.stepper button:hover { background: var(--paper); color: var(--ink); } .stepper button:focus-visible { outline: 3px solid var(--lav); } .stepper button .ic { width: 16px; height: 16px; }
.pl-day { text-align: right; font-weight: 700; } .pl-day .muted { font-weight: 400; font-size: .9rem; }
.pl-last { text-align: right; display: grid; justify-items: end; font-weight: 700; } .pl-last small { font-weight: 800; }
.pl-fixed { font: 800 1.3rem var(--display); text-align: center; }
.presets { display: grid; gap: .6rem; }
.preset { all: unset; cursor: pointer; display: grid; gap: .1rem; padding: 1rem 1.2rem; border-radius: 18px; background: var(--paper2); border: 2px solid transparent; }
.preset b { font-size: 1.05rem; } .preset small { color: var(--ink2); }
.preset:hover { border-color: var(--ink); background: var(--yellow-soft); } .preset:focus-visible { outline: 3px solid var(--lav); }
.tip-y { background: var(--yellow-soft); } .tip-y h2 { margin-bottom: .6rem; } .tip-y p { color: var(--ink2); font-size: 1.02rem; }

/* ---------- Bills ---------- */
.spot-band { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 1.4rem; padding: 1.6rem; border-radius: var(--r); background: var(--yellow); color: #1F1D3D; margin-bottom: 1.5rem; align-items: center; }
.sb-k { display: flex; align-items: center; gap: .5rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; }
.sb-big { font: 800 3rem/1 var(--display); margin: .4rem 0 .2rem; } .sb-lead small { font-weight: 600; font-size: .95rem; }
.sb-cards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 210px); gap: .8rem; overflow-x: auto; padding: .2rem; }
.sb-card { display: grid; gap: .3rem; padding: 1rem 1.1rem; border-radius: 20px; background: #FFFFFF; color: #1F1D3D; }
.sb-card.hot { box-shadow: inset 0 0 0 3px var(--pink); } .sb-card.late { box-shadow: inset 0 0 0 3px var(--pink-ink); }
.sb-when { font-weight: 800; color: #B03A69; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; }
.sb-card b { font-size: 1.15rem; } .sb-card > .amt { font: 800 1.6rem/1 var(--display); }
.sb-card .btn { justify-self: start; margin-top: .3rem; background: #F0F1F9; color: #1F1D3D; border-color: transparent; }
.sb-calm { display: flex; gap: .6rem; align-items: center; font-weight: 700; font-size: 1.15rem; } .sb-calm .ic { width: 30px; height: 30px; }
.bills-cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 1.5rem; align-items: start; }
.bills-side { display: grid; gap: 1.5rem; }
.cal-head { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: 1.2rem; } .cal-head h2 { font-size: 1.7rem; margin-right: .5rem; }
.cal-head .box-btn { width: 46px; height: 46px; background: var(--paper2); }
.mc-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: .5rem; } .mc-row span { color: var(--ink2); font-weight: 700; padding-left: .4rem; }
.mc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.mc-cell { min-height: 118px; padding: .6rem; border-radius: 18px; background: var(--paper2); display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.mc-cell.blank { background: transparent; }
.mc-cell.today { background: var(--navy); color: var(--on-navy); } .mc-today { color: var(--yellow); font-weight: 800; }
.mc-d { font: 800 1.15rem var(--display); color: var(--ink2); } .mc-cell.today .mc-d { color: var(--on-navy); }
.ev { all: unset; cursor: pointer; display: block; padding: .35rem .45rem; border-radius: 10px; font-size: .76rem; font-weight: 800; line-height: 1.25; background: var(--paper); color: #1F1D3D; overflow: hidden; text-overflow: ellipsis; }
.ev.paid { text-decoration: line-through; color: var(--ink3); font-weight: 600; } .ev.soon { background: var(--pink); } .ev.late { background: var(--pink); box-shadow: inset 0 0 0 2px var(--pink-ink); } .ev.later { background: var(--paper); box-shadow: inset 0 0 0 2px var(--pink); } .ev.in { background: var(--mint); cursor: default; }
.ev:focus-visible { outline: 3px solid var(--lav); }
.legend2 { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 1rem; color: var(--ink2); font-weight: 700; font-size: .9rem; }
.legend2 span { display: flex; align-items: center; gap: .4rem; } .legend2 i { width: 16px; height: 16px; border-radius: 5px; }
.legend2 .soon { background: var(--pink); } .legend2 .later { box-shadow: inset 0 0 0 2px var(--pink); } .legend2 .paid { box-shadow: inset 0 0 0 2px var(--hair); } .legend2 .in { background: var(--mint); }
.bill-list { display: grid; gap: .3rem; }
.bl-row { display: flex; align-items: center; gap: .9rem; padding: .7rem; border-radius: 18px; }
.bl-row:hover { background: var(--paper2); } .bl-row.paid .r-t b { text-decoration: line-through; color: var(--ink3); }
.bl-row > .amt { font-weight: 800; }
.split-bar { display: flex; gap: 4px; height: 14px; margin: 1rem 0 .6rem; } .split-bar i { border-radius: 99px; } .split-bar .mint { background: var(--mint); } .split-bar .pink { background: var(--pink); }
.subs .r-t { gap: .3rem; justify-items: start; }
.chipx { display: inline-block; padding: .15rem .55rem; border-radius: 8px; font-size: .8rem; font-weight: 800; }
.chipx.mint { background: var(--mint-soft); color: var(--mint-ink); } .chipx.yellow { background: var(--yellow); color: #1F1D3D; } .chipx.grey { background: var(--paper2); color: var(--ink2); }
.trials { background: var(--yellow-soft); }

/* ---------- Goals and the chaos fund ---------- */
.goals-top { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.gt-main { padding-right: 1.5rem; border-right: 2px solid var(--hair); } .gt-num { font: 800 clamp(3rem, 5vw, 4rem)/1 var(--display); margin: .2rem 0 0; letter-spacing: -.03em; }
.gt-stat { display: grid; gap: .1rem; padding-right: 1.5rem; border-right: 2px solid var(--hair); } .gt-stat b { font: 800 1.6rem/1 var(--display); } .gt-stat small { color: var(--ink2); font-size: .95rem; }
.gt-stat:last-of-type { border-right: 0; } .goals-top .btn { margin-left: auto; }
.chaos { display: grid; grid-template-columns: auto minmax(0, 1fr) 260px; gap: 2rem; align-items: center; background: var(--navy); color: var(--on-navy); padding: 2rem 2.2rem; margin-bottom: 1.5rem; }
[data-theme="night"] .chaos { background: #0E0D20; }
.chaos.empty { display: flex; justify-content: center; }
.ch-shield { width: 120px; height: 140px; display: grid; place-items: center; background: var(--mint); color: #1F1D3D; clip-path: path("M60 0 L118 22 C118 80 100 118 60 140 C20 118 2 80 2 22 Z"); }
.ch-shield .ic { width: 58px; height: 58px; }
.ch-main .kick { color: var(--on-navy2); } .ch-main h2 { font: 800 2.4rem/1 var(--display); margin: .2rem 0 .4rem; }
.ch-line { color: var(--on-navy2); max-width: 54ch; } .ch-line b { color: var(--on-navy); }
.ch-bat { display: flex; align-items: center; gap: 1.2rem; margin: 1rem 0 .5rem; flex-wrap: wrap; }
.battery { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; padding: 7px; width: min(460px, 100%); height: 64px; border: 3px solid rgb(255 255 255 / .35); border-radius: 18px; margin-right: 12px; }
.battery i { border-radius: 9px; background: rgb(255 255 255 / .1); } .battery i.on { background: var(--mint); } .battery i.part { background: linear-gradient(90deg, var(--mint) 50%, rgb(255 255 255 / .1) 50%); }
.battery .cap { position: absolute; right: -12px; top: 50%; width: 8px; height: 24px; margin-top: -12px; border-radius: 0 5px 5px 0; background: rgb(255 255 255 / .35); }
.ch-pct b { font: 800 2rem var(--display); color: var(--mint); } .ch-pct { color: var(--on-navy2); }
.ch-amt { font: 800 1.6rem var(--display); margin: .2rem 0 1rem; } .ch-amt span { font: 600 1rem var(--sans); color: var(--on-navy2); }
.ch-levels { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ch-levels li { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border-radius: 16px; background: rgb(255 255 255 / .06); color: var(--on-navy2); font-weight: 700; }
.ch-levels li.on { background: rgb(143 208 174 / .18); color: var(--on-navy); } .ch-levels li.on .ic { color: var(--mint); } .ch-levels .ic { width: 22px; height: 22px; }
.goal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem; }
.goal { display: grid; gap: .5rem; justify-items: center; text-align: center; align-content: start; }
.g-head { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; text-align: left; } .g-head h3 { font-size: 1.35rem; } .g-head small { color: var(--ink2); }
.g-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; overflow: hidden; color: #1F1D3D; flex: none; }
.g-ic.t-lav, .g-ic.t-sky, .g-ic.t-mint, .g-ic.t-pink, .g-ic.t-peach { background: var(--paper2); } .g-ic img { width: 100%; height: 100%; object-fit: cover; } .g-ic .ic { width: 26px; height: 26px; }
.jar { display: grid; justify-items: center; margin: .8rem 0 .4rem; background: none !important; }
.jar .lid { width: 74px; height: 18px; border-radius: 8px; background: var(--navy); margin-bottom: -4px; z-index: 1; }
[data-theme="night"] .jar .lid { background: var(--ink2); }
.jar .glass { position: relative; width: 140px; height: 160px; border-radius: 28px; overflow: hidden; background: var(--paper2); }
.jar .fill { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--f) * 100%); background: var(--jc); transition: height .8s cubic-bezier(.2, .8, .3, 1); }
.jar .fill::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 12px; background: radial-gradient(8px 6px at 8px 6px, var(--jc) 98%, transparent) repeat-x; background-size: 16px 12px; }
.jar.t-lav { --jc: var(--lav); } .jar.t-lav .glass { background: var(--lav-soft); } .jar.t-mint { --jc: var(--mint); } .jar.t-mint .glass { background: var(--mint-soft); } .jar.t-sky { --jc: var(--sky); } .jar.t-sky .glass { background: var(--sky-soft); } .jar.t-pink { --jc: var(--pink); } .jar.t-pink .glass { background: var(--pink-soft); } .jar.t-peach { --jc: var(--peach); } .jar.t-peach .glass { background: var(--peach-soft); }
.g-num { font: 800 2.3rem/1 var(--display); margin: 0; } .g-of { margin: 0; color: var(--ink2); font-weight: 600; }
.goal .note { width: 100%; text-align: left; margin: .4rem 0 .2rem; }
.g-btns { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; width: 100%; }
.goal.new { all: unset; box-sizing: border-box; cursor: pointer; border: 3px dashed color-mix(in oklab, var(--lav) 45%, transparent); border-radius: var(--r); display: grid; place-content: center; justify-items: center; text-align: center; gap: .4rem; padding: 2rem; color: var(--ink2); min-height: 360px; }
.goal.new b { font-size: 1.3rem; color: var(--ink); } .goal.new:hover { border-color: var(--lav); background: var(--lav-soft); } .goal.new:focus-visible { outline: 3px solid var(--lav); }

/* ---------- Debt ---------- */
.debt-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1.5rem; margin-bottom: 1.5rem; }
.df-date { font: 800 clamp(3rem, 6vw, 4.8rem)/1 var(--display); margin: .2rem 0 .4rem; letter-spacing: -.03em; }
.df-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin: 1.2rem 0; }
.df-stats > span { display: grid; gap: .2rem; padding: 1rem; border-radius: 20px; background: var(--paper2); } .df-stats b { font: 800 1.5rem/1 var(--display); } .df-stats small { color: var(--ink2); }
.month-blocks { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: .4rem; } .month-blocks i { width: 18px; height: 26px; border-radius: 8px; background: var(--lav-soft); } .month-blocks i.on { background: var(--mint); }
.note.big { margin-top: 1.2rem; }
.debt-chart .chart svg { max-height: 280px; }
.extra { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, 1.2fr) auto; gap: 1.2rem; align-items: center; padding: 1.1rem 1.3rem; border-radius: 22px; background: var(--yellow-soft); margin-top: 1rem; }
.extra > span { display: grid; } .extra b { font-size: 1.1rem; } .extra small { color: var(--ink2); }
.extra input[type=range] { width: 100%; accent-color: var(--navy); height: 30px; }
.extra #dx-val { font: 800 1.6rem var(--display); }
.debt-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem; align-items: start; }
.debt-cards .order { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 1rem 1.6rem; align-items: center; }
.debt-cards .order > h2 { grid-column: 1 / -1; margin: 0; } .debt-cards .order .paid-off { margin: 0; } .debt-cards .order .ord-h { margin-top: 0; }
.debt { display: grid; gap: .4rem; }
.debt.first { box-shadow: inset 0 0 0 3px var(--ink); }
.d-order { display: flex; align-items: center; gap: .6rem; color: var(--ink2); font-weight: 700; margin-bottom: .6rem; }
.d-order b { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--paper2); color: var(--ink); font: 800 1rem var(--display); }
.debt.first .d-order b { background: var(--navy); color: var(--on-navy); }
.debt h3 { font-size: 1.4rem; } .d-bal { font: 800 2.4rem/1 var(--display); margin: .6rem 0 .5rem; }
.d-bar { display: block; height: 16px; border-radius: 99px; background: var(--paper2); overflow: hidden; } .d-bar i { display: block; height: 100%; border-radius: 99px; background: var(--dc, var(--pink)); }
.d-bar.t-pink { --dc: var(--pink); background: var(--paper2); } .d-bar.t-sky { --dc: var(--sky); background: var(--paper2); } .d-bar.t-lilac { --dc: var(--lilac); background: var(--paper2); } .d-bar.t-peach { --dc: var(--peach); background: var(--paper2); }
.d-kv { margin: .6rem 0; display: grid; } .d-kv div { display: flex; justify-content: space-between; padding: .55rem 0; border-bottom: 1px solid var(--hair); } .d-kv dt { color: var(--ink2); } .d-kv dd { margin: 0; font-weight: 800; }
.order h2 { margin-bottom: 1rem; }
.ord-fixed { display: grid; gap: .3rem; padding: 1.1rem 1.2rem; border-radius: 20px; background: var(--navy); color: var(--on-navy); } .ord-fixed b { font-size: 1.15rem; } .ord-fixed small { color: var(--on-navy2); font-size: .92rem; }
.ord-h { margin: 1.2rem 0 .5rem; font-size: 1rem; color: var(--ink2); }
.paid-off { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .4rem; } .paid-off li { display: flex; gap: .6rem; align-items: center; padding: .6rem .8rem; border-radius: 14px; background: var(--mint-soft); } .paid-off .ic { width: 26px; height: 26px; color: var(--mint-ink); } .paid-off span { display: grid; } .paid-off small { color: var(--ink2); }

/* ---------- Monthly review ---------- */
.pill-date { padding: .9rem 1.4rem; border-radius: 16px; background: var(--paper); font-weight: 800; }
.rv-top { margin-bottom: 1.5rem; }
.rv-nums { display: flex; flex-wrap: wrap; gap: 2.5rem; align-items: flex-end; }
.rv-nums > span { display: grid; gap: .2rem; } .rv-nums small { font-weight: 700; color: var(--ink2); font-size: .95rem; } .rv-nums b { font: 800 clamp(2.4rem, 4vw, 3.4rem)/1 var(--display); letter-spacing: -.02em; }
.rv-nums b.kept { color: var(--mint-ink); }
.rv-cmp { margin: 0 0 .4rem auto; color: var(--ink2); font-weight: 700; max-width: 22ch; text-align: right; }
.rv-bar { display: flex; gap: 4px; height: 92px; margin-top: 1.4rem; border-radius: 22px; overflow: hidden; }
.rv-bar > span { display: grid; align-content: center; gap: .1rem; padding: 0 1rem; min-width: 0; color: #1F1D3D; } .rv-bar small { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rv-bar b { font-weight: 800; white-space: nowrap; }
.rv-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1.5rem; margin-bottom: 1.5rem; }
.reflect { display: grid; gap: 1rem; align-content: start; } .reflect .box-head { margin-bottom: 0; } .reflect .btn { justify-self: start; }
.reflect .input { background: var(--paper2); border-color: transparent; font-size: 1.02rem; } .reflect .input:focus { background: var(--paper); border-color: var(--lav); }
.rl-nums { display: flex; align-items: center; gap: 1rem; margin-bottom: .6rem; }
.rl { flex: 1; display: grid; gap: .1rem; padding: 1rem 1.2rem; border-radius: 20px; } .rl.t { background: var(--pink-soft); } .rl.g { background: var(--mint-soft); }
.rl small { font-weight: 700; color: var(--ink2); } .rl b { font: 800 2rem/1 var(--display); } .rl em { color: var(--ink2); font-size: .9rem; }
.rl-vs { font-weight: 800; color: var(--ink3); }
.middle { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .6rem; } .middle > span { display: grid; flex: 1; min-width: 200px; } .middle small { color: var(--ink2); }
.hm-row, .hm-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .hm-row span { text-align: center; color: var(--ink2); font-weight: 700; font-size: .85rem; margin-bottom: .4rem; }
.hm-c { aspect-ratio: 1; display: grid; place-items: center; border-radius: 12px; font-weight: 800; font-size: .85rem; background: var(--paper2); color: var(--ink2); }
.hm-c.l1 { background: #E1E2FB; color: #1F1D3D; } .hm-c.l2 { background: #C6C9F7; color: #1F1D3D; } .hm-c.l3 { background: #A5AAF3; color: #1F1D3D; } .hm-c.l4 { background: #868DEE; color: #fff; } .hm-c.l5 { background: #5A62D9; color: #fff; }
.cmp .delta { padding: .25rem .6rem; border-radius: 10px; font-weight: 800; font-size: .9rem; } .delta.up { background: var(--pink-soft); color: var(--pink-ink); } .delta.down { background: var(--mint-soft); color: var(--mint-ink); }

/* ---------- Impulse control center ---------- */
.impulse-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 2rem; align-items: center; padding: 2.2rem 2.4rem; border-radius: var(--r); background: linear-gradient(135deg, #7F86EE, #9B88E8 60%, #B396E0); color: #fff; margin-bottom: 1.5rem; box-shadow: 0 30px 60px -40px #474EC4; }
.ih-text .kick { color: rgb(255 255 255 / .8); text-transform: uppercase; letter-spacing: .1em; font-size: .82rem; }
.ih-text h2 { font: 800 clamp(2.2rem, 4vw, 3.3rem)/1.02 var(--display); margin: .4rem 0 .6rem; letter-spacing: -.02em; } .ih-text h2 em { color: var(--yellow); }
.ih-text p { font-size: 1.1rem; color: rgb(255 255 255 / .9); max-width: 44ch; }
.park-form { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: .7rem; }
.park-form label { display: flex; align-items: center; gap: .3rem; padding: 0 1.1rem; height: 64px; border-radius: 18px; background: #fff; color: #1F1D3D; }
.park-form input { all: unset; width: 100%; font-size: 1.15rem; font-weight: 700; color: #1F1D3D; } .park-form input::placeholder { color: #8E91AD; font-weight: 600; }
.pf-amt span { font: 800 1.4rem var(--display); color: #8E91AD; } .pf-amt input { font: 800 1.5rem var(--display); }
.pf-url { grid-column: 1 / -1; height: 52px !important; } .pf-url input { font-size: 1rem; font-weight: 600; }
.park-form .btn { grid-column: 1 / -1; height: 64px; border-radius: 18px; font-size: 1.15rem; }
.park-form label:focus-within { box-shadow: 0 0 0 3px var(--yellow); }
.imp-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.imp-main, .imp-side { display: grid; gap: 1.5rem; }
.af-title { font: 800 clamp(2rem, 3.4vw, 2.8rem)/1.05 var(--display) !important; margin-bottom: 1.3rem !important; letter-spacing: -.02em; }
.af-form { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: .8rem; align-items: end; }
.af-form .btn { height: 64px; }
.af-form .input.lg { height: 64px; }
.asked { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; }
.chipq { all: unset; cursor: pointer; padding: .45rem .8rem; border-radius: 12px; background: var(--paper2); font-weight: 700; font-size: .9rem; } .chipq:hover { background: var(--paper3); } .chipq:focus-visible { outline: 3px solid var(--lav); }
.ar-head { font: 700 clamp(1.4rem, 2.6vw, 2.2rem)/1.15 var(--display) !important; display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; }
.ar-head em { font: 800 clamp(3.4rem, 7vw, 5.8rem)/1 var(--display); color: var(--green); letter-spacing: -.03em; }
.v-maybe .ar-head em { color: var(--peach-ink); } .v-no .ar-head em { color: var(--pink-ink); }
.ar-boxes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); gap: 1rem; margin: 1.3rem 0 1rem; }
.arb { display: grid; gap: .2rem; align-content: start; padding: 1.2rem 1.3rem; border-radius: 22px; background: var(--paper2); }
.arb small { color: var(--ink2); font-weight: 700; } .arb b { font: 800 2.6rem/1.1 var(--display); } .arb.pink { background: var(--pink-soft); } .arb.pink b { color: #8B3E8E; }
[data-theme="night"] .arb.pink b { color: var(--pink-ink); }
.dbars { display: flex; gap: 6px; height: 90px; align-items: stretch; margin-top: .5rem; }
.dbars > span { flex: 1; display: grid; grid-template-rows: 1fr auto; gap: .3rem; justify-items: center; }
.dbars i { width: 100%; max-width: 30px; border-radius: 9px; background: linear-gradient(to top, #A35BA8 calc((1 - var(--k)) * 100% * .45), var(--mint-soft) calc((1 - var(--k)) * 100% * .45)); }
.dbars small { font-size: .72rem; color: var(--ink2); }
.ar-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .ar-notes .note { margin: 0; }
.ar-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-top: 1.2rem; } .ar-btns .btn { height: 64px; } .ar-btns .btn:first-child { border-color: var(--ink); }
.lot { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.lot li { position: relative; display: flex; align-items: center; gap: .9rem; padding: .8rem; border-radius: 22px; background: var(--paper2); flex-wrap: wrap; }
.lot li.ready { background: var(--mint-soft); }
.lot-img { width: 60px; height: 60px; border-radius: 16px; overflow: hidden; background: var(--paper); display: grid; place-items: center; flex: none; } .lot-img img { width: 100%; height: 100%; object-fit: cover; }
.lot-t { flex: 1; min-width: 120px; display: grid; } .lot-t b { font-size: 1.1rem; } .lot-t small { color: var(--ink2); }
.lot-lock { position: relative; width: 52px; height: 52px; display: grid; place-items: center; flex: none; } .lot-lock svg { position: absolute; inset: 0; } .lot-lock > .ic { width: 20px; height: 20px; color: var(--lav-ink); }
.lot-h { display: grid; text-align: right; } .lot-h b { font: 800 1.4rem/1 var(--display); color: var(--lav-ink); } .lot-h small { color: var(--ink2); }
.lot-ready { display: grid; text-align: right; } .lot-ready b { color: var(--mint-ink); } .lot-ready small { color: var(--ink2); }
.lot-btns { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; width: 100%; padding-left: calc(60px + .9rem); }
.lot-edit { position: absolute; top: 6px; right: 6px; opacity: 0; } .lot li:hover .lot-edit, .lot-edit:focus-visible { opacity: 1; }
.lot li.ready .lot-edit { top: 6px; }
.kept .kept-num { font: 800 3.6rem/1 var(--display); color: var(--mint); margin: 0 0 .6rem; }
.kept p { color: var(--on-navy2); }
.kept-bar { display: flex; gap: 4px; height: 14px; margin-top: 1rem; } .kept-bar i { border-radius: 99px; } .kept-bar .lg { background: var(--mint); } .kept-bar .bt { background: var(--yellow); }
.kept-key { display: flex; justify-content: space-between; margin-top: .5rem; font-weight: 700; }

.how-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.how-list li { display: grid; gap: .7rem; align-content: start; padding: 1.2rem; border-radius: 22px; background: var(--paper2); }
.how-list li > b { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--lav-soft); color: var(--lav-ink); font: 800 1.3rem var(--display); }
.how-list li:nth-child(2) > b { background: var(--yellow); color: #1F1D3D; } .how-list li:nth-child(3) > b { background: var(--mint); color: #1F1D3D; }
.how-list span { display: grid; gap: .25rem; } .how-list strong { font-size: 1.08rem; } .how-list small { color: var(--ink2); font-size: .92rem; }
@media (max-width: 960px) { .how-list { grid-template-columns: 1fr; } }

/* ---------- Returns ---------- */
.ret-hero { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; padding: 2.2rem 2.4rem; border-radius: var(--r); background: linear-gradient(135deg, #DDF2E6, #C7EBD7); color: #1F1D3D; margin-bottom: 1.5rem; }
[data-theme="night"] .ret-hero { background: linear-gradient(135deg, #1F3C33, #234A3D); color: var(--ink); }
.ret-hero .kick { color: inherit; opacity: .75; text-transform: uppercase; letter-spacing: .1em; font-size: .82rem; }
.rh-num { font: 800 clamp(3.4rem, 7vw, 5.6rem)/1 var(--display); margin: .3rem 0; color: #1F7449; letter-spacing: -.03em; } [data-theme="night"] .rh-num { color: var(--mint-ink); }
.rh-sub { font-weight: 700; font-size: 1.1rem; margin: 0; }
.rh-side { display: flex; align-items: center; gap: 1rem; } .rh-side > span:nth-child(2) { display: grid; } .rh-side b { font: 800 1.6rem var(--display); }
.rh-pk { width: 72px; height: 72px; border-radius: 22px; background: rgb(255 255 255 / .7); display: grid; place-items: center; color: #1F7449; } .rh-pk .ic { width: 38px; height: 38px; }
.ret-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem; }
.ret { display: grid; gap: .5rem; align-content: start; border-top: 8px solid var(--mint); }
.ret.u-soon { border-top-color: var(--yellow); } .ret.u-hot { border-top-color: var(--pink); } .ret.u-closed { border-top-color: var(--ink3); }
.rt-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .4rem; }
.rt-img { width: 110px; height: 110px; border-radius: 22px; overflow: hidden; background: var(--paper2); display: grid; place-items: center; color: var(--ink2); } .rt-img img { width: 100%; height: 100%; object-fit: cover; } .rt-img .ic { width: 40px; height: 40px; } .rt-img button { width: 100%; height: 100%; }
.rt-clock { position: relative; width: 84px; height: 84px; display: grid; place-content: center; justify-items: center; text-align: center; } .rt-clock svg { position: absolute; inset: 0; }
.rt-clock b { font: 800 1.7rem/1 var(--display); } .rt-clock small { font-size: .56rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink2); }
.u-hot .ring2 .rf { stroke: var(--pink-ink); } .u-hot .ring2 .rb { stroke: var(--pink-soft); } .u-soon .ring2 .rf { stroke: #C9A800; } .u-soon .ring2 .rb { stroke: var(--yellow-soft); } .u-calm .ring2 .rf { stroke: var(--mint-ink); } .u-calm .ring2 .rb { stroke: var(--mint-soft); }
.ret h3 { font-size: 1.3rem; } .ret > p.muted { margin: 0; }
.rt-amt { font: 800 2.2rem/1 var(--display); margin: .3rem 0 .5rem; color: var(--mint-ink); } .rt-amt small { font: 600 .95rem var(--sans); color: var(--ink2); }
.rt-steps { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.rt-steps::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 21px; height: 4px; background: var(--paper2); border-radius: 99px; }
.rt-steps li { position: relative; display: grid; justify-items: center; }
.rt-steps button { all: unset; cursor: pointer; display: grid; justify-items: center; gap: .3rem; text-align: center; }
.rt-steps button > .ic, .rt-steps button > span { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); box-shadow: inset 0 0 0 3px var(--paper3); font-weight: 800; color: var(--ink2); position: relative; z-index: 1; }
.rt-steps button > .ic { padding: 11px; }
.rt-steps li.done button > .ic { background: var(--mint); box-shadow: none; color: #1F1D3D; }
.rt-steps li.next button > span { box-shadow: inset 0 0 0 3px var(--ink); color: var(--ink); }
.rt-steps small { font-size: .74rem; font-weight: 700; color: var(--ink2); max-width: 9ch; line-height: 1.2; }
.rt-steps button:focus-visible { outline: 3px solid var(--lav); border-radius: 12px; }
.rt-btns { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; } .rt-btns .icon-btn { margin-left: auto; }
.ret.new { all: unset; box-sizing: border-box; cursor: pointer; border: 3px dashed color-mix(in oklab, var(--mint-ink) 40%, transparent); border-radius: var(--r); display: grid; place-content: center; justify-items: center; text-align: center; gap: .4rem; padding: 2rem; color: var(--ink2); min-height: 300px; }
.ret.new b { color: var(--ink); font-size: 1.25rem; } .ret.new small { max-width: 28ch; } .ret.new:hover { border-color: var(--mint-ink); background: var(--mint-soft); } .ret.new:focus-visible { outline: 3px solid var(--lav); }

/* ---------- Hyper-focus fund ---------- */
.hf-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; padding: 1.6rem; border-radius: var(--r); background: var(--paper); margin-bottom: 1.5rem; }
.hf-photos { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; min-height: 380px; }
.hf-photos.n0 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.hf-photos .hf-ph:first-child { grid-row: 1 / -1; }
.hf-photos.n1 .hf-ph:first-child { grid-column: 1 / -1; grid-row: 1; }
.hf-photos.n1 .hf-add { grid-column: 1 / -1; }
.hf-ph { all: unset; cursor: zoom-in; display: block; border-radius: 22px; overflow: hidden; background: var(--paper2); } .hf-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .hf-ph:hover img { transform: scale(1.04); }
.hf-ph:focus-visible { outline: 3px solid var(--lav); }
.hf-add { display: grid; place-content: center; justify-items: center; gap: .2rem; text-align: center; padding: 1rem; border-radius: 22px; border: 2.5px dashed color-mix(in oklab, var(--lav) 55%, transparent); background: var(--lav-soft); cursor: pointer; color: var(--ink2); }
.hf-add b { color: var(--ink); } .hf-add:hover, .hf-add.drag { border-color: var(--lav); } .hf-add:focus-within { outline: 3px solid var(--lav); }
.hf-main { display: grid; align-content: center; gap: .3rem; padding: .6rem .4rem; }
.hf-main .kick { display: flex; gap: .4rem; align-items: center; color: var(--lav-ink); } .hf-main .kick .ic { width: 20px; height: 20px; }
.hf-main h2 { font: 800 clamp(2.4rem, 4.5vw, 3.8rem)/1 var(--display); letter-spacing: -.02em; }
.hf-fund { font: 800 clamp(2.6rem, 5vw, 4rem)/1 var(--display); color: var(--lav-ink); margin: 1rem 0 0; letter-spacing: -.02em; } .hf-fund-k { margin: 0 0 .6rem; font-weight: 700; color: var(--ink2); }
.hf-meter { height: 18px; border-radius: 99px; background: var(--lav-soft); overflow: hidden; } .hf-meter i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--lav), #B396E0); }
.hf-main .inline { margin-top: 1rem; }
.hf-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.5rem; margin-bottom: 1.5rem; }
.gear-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.gear-list li { display: flex; align-items: center; gap: .9rem; padding: .7rem; border-radius: 18px; background: var(--paper2); }
.gear-list li.bought { background: transparent; box-shadow: inset 0 0 0 2px var(--paper2); } .gear-list li.bought .r-t b { color: var(--ink2); }
.gear-list li > .amt { font-weight: 800; font-size: 1.1rem; }
.g-img { width: 52px; height: 52px; border-radius: 14px; overflow: hidden; background: var(--paper); display: grid; place-items: center; color: var(--ink3); flex: none; } .g-img img { width: 100%; height: 100%; object-fit: cover; }
.got { width: 36px; height: 36px; border-radius: 50%; background: var(--mint); color: #1F1D3D; display: grid; place-items: center; } .got .ic { width: 18px; height: 18px; }
.rules { background: var(--lav-soft); } .rule-list { margin: 0 0 1rem; padding-left: 1.3rem; display: grid; gap: .8rem; } .rule-list li { padding-left: .3rem; } .rule-list b { display: block; } .rule-list small { color: var(--ink2); }
.hist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.hist { display: flex; gap: 1rem; padding: 1rem; border-radius: 22px; background: var(--paper2); }
.hs-img { width: 72px; height: 72px; border-radius: 18px; overflow: hidden; flex: none; background: var(--paper); filter: saturate(.7); } .hs-img img { width: 100%; height: 100%; object-fit: cover; }
.hist > div { display: grid; gap: .3rem; align-content: start; } .hist b { font-size: 1.15rem; } .hist small { color: var(--ink2); }
.use-q { font-size: .82rem; font-weight: 700; color: var(--ink2); margin-top: .2rem; }
.hist > div { min-width: 0; } .hist .segs { background: var(--paper); padding: 3px; flex-wrap: nowrap; } .hist .segs button { padding: .35rem .55rem; font-size: .8rem; border-radius: 10px; white-space: nowrap; }

/* ---------- ADHD tax ---------- */
.tax-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.5rem; margin-bottom: 1.5rem; }
.tax-hero > div:first-child { padding: 2rem 2.2rem; border-radius: var(--r); background: var(--paper); }
.tax-hero .kick { font-size: 1.05rem; }
.tx-num { font: 800 clamp(3.6rem, 7vw, 5.6rem)/1 var(--display); margin: .4rem 0; letter-spacing: -.03em; }
.tx-cmp { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.15rem; color: var(--pink-ink); } .tx-cmp.win { color: var(--mint-ink); }
.tx-note { color: var(--ink2); max-width: 54ch; font-size: 1.02rem; }
.tx-game { display: grid; align-content: center; gap: .5rem; padding: 2rem; border-radius: var(--r); background: var(--navy); color: var(--on-navy); }
[data-theme="night"] .tx-game { background: #0E0D20; }
.tg-k { text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--yellow); font-size: .85rem; }
.tg-target { font: 800 2.6rem/1 var(--display); margin: 0; } .tg-streak { display: flex; gap: .4rem; align-items: center; color: var(--on-navy2); font-weight: 700; } .tg-streak .ic { color: #F5A24A; }
.tx-game .btn { justify-self: start; margin-top: .8rem; }
.tax-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; margin-bottom: 1.5rem; align-items: start; }
.leaks { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.leaks li { display: flex; align-items: center; gap: .9rem; padding: .7rem; border-radius: 18px; background: var(--paper2); flex-wrap: wrap; }
.lk-ic { width: 48px; height: 48px; border-radius: 14px; background: var(--pink-soft); color: var(--pink-ink); display: grid; place-items: center; flex: none; } .lk-ic .ic { width: 24px; height: 24px; } .lk-ic.sm { width: 44px; height: 44px; }
.fix { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; font-size: .88rem; color: var(--lav-ink); text-decoration: none; } a.fix:hover { text-decoration: underline; } .fix .ic { width: 15px; height: 15px; }

/* ---------- Side hustle ---------- */
.hs-hero { margin-bottom: 1.5rem; }
.hs-nums { display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-end; }
.hs-nums > span { display: grid; gap: .2rem; } .hs-nums small { color: var(--ink2); font-weight: 700; } .hs-nums b { font: 800 clamp(1.8rem, 3vw, 2.4rem)/1 var(--display); }
.hs-nums .minus b { color: var(--ink2); } .hs-nums .eq { margin-left: auto; } .hs-nums .eq b { font-size: clamp(2.6rem, 5vw, 3.8rem); }
.hs-flow { display: flex; gap: 4px; height: 56px; border-radius: 18px; overflow: hidden; margin: 1.4rem 0 .8rem; }
.hs-flow i { display: flex; align-items: flex-end; padding: .5rem .8rem; color: #1F1D3D; font-style: normal; min-width: 8px; } .hs-flow small { font-weight: 800; }
.hs-flow .c { background: var(--pink-soft); } .hs-flow .t { background: var(--peach); } .hs-flow .h { background: var(--mint); }
.hs-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.5rem; margin-bottom: 1.5rem; align-items: start; }
.gig-list { display: grid; gap: 1.5rem; align-content: start; }
.gig header { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; } .gig header > div { flex: 1; display: grid; } .gig header small { color: var(--ink2); }
.gig-logo { width: 52px; height: 52px; border-radius: 16px; overflow: hidden; background: var(--lav-soft); color: var(--lav-ink); display: grid; place-items: center; } .gig-logo .ic { width: 26px; height: 26px; }
.gig-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; } .gig-nums > span { display: grid; padding: .8rem; border-radius: 16px; background: var(--paper2); } .gig-nums small { color: var(--ink2); font-weight: 700; } .gig-nums b { font: 800 1.3rem var(--display); }

/* ---------- Quick wins ---------- */
.wins-hero { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: 2.2rem 2.4rem; border-radius: var(--r); background: var(--yellow); color: #1F1D3D; margin-bottom: 1.5rem; overflow: hidden; }
.wins-hero .kick { color: #1F1D3D; opacity: .7; } .wh-num { font: 800 clamp(3rem, 6vw, 4.6rem)/1 var(--display); margin: .3rem 0; } .wins-hero p:last-child { font-size: 1.05rem; max-width: 50ch; }
.pebbles { position: relative; width: 220px; height: 120px; flex: none; }
.pebbles i { position: absolute; width: 48px; height: 38px; border-radius: 50% 50% 46% 54% / 60% 55% 45% 40%; background: #fff; left: calc(var(--i) * 19px + 10px); bottom: calc(mod(var(--i), 3) * 26px); box-shadow: inset -4px -5px 0 rgb(31 29 61 / .08); }
.pebbles i:nth-child(3n) { background: var(--lav); } .pebbles i:nth-child(3n+1) { background: #fff; } .pebbles i:nth-child(3n+2) { background: var(--mint); }
.wins-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.5rem; margin-bottom: 1.5rem; }
.sprint-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: .5rem; margin: 1rem 0; }
.sd { all: unset; cursor: pointer; display: grid; justify-items: center; gap: .4rem; padding: .7rem .2rem; border-radius: 18px; background: var(--paper2); }
.sd small { font-weight: 700; color: var(--ink2); } .sd span { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--paper); }
.sd.win span { background: var(--mint); color: #1F1D3D; } .sd.spent span { background: var(--pink-soft); color: var(--pink-ink); } .sd.open span { box-shadow: inset 0 0 0 3px var(--ink); }
.sd[disabled] { opacity: .5; cursor: default; } .sd .ic { width: 20px; height: 20px; } .sd:focus-visible { outline: 3px solid var(--lav); }
.sprint-score { font-size: 1.1rem; } .sprint-score b { font: 800 1.8rem var(--display); }
.sprint .chips { margin: 1rem 0; }
.sprint-past { margin-top: 1rem; }
.sw-list { list-style: none; margin: 0; padding: 0; display: grid; }
.sw-list button { all: unset; cursor: pointer; display: flex; align-items: center; gap: .9rem; width: 100%; box-sizing: border-box; padding: .9rem .2rem; border-bottom: 1px solid var(--hair); font-weight: 700; font-size: 1.02rem; }
.sw-list li:last-child button { border-bottom: 0; }
.sw-list .cb { width: 30px; height: 30px; border-radius: 9px; border: 2.5px solid var(--ink); display: grid; place-items: center; color: transparent; flex: none; } .sw-list .cb .ic { width: 18px; height: 18px; }
.sw-list li.on .cb { background: var(--mint); border-color: var(--mint); color: #1F1D3D; } .sw-list li.on span:not(.cb) { text-decoration: line-through; color: var(--ink2); }
.sw-list button > span:nth-child(2) { flex: 1; }
.peb { padding: .2rem .55rem; border-radius: 99px; background: var(--yellow); color: #1F1D3D; font-size: .85rem; }
.sw-list button:focus-visible { outline: 3px solid var(--lav); border-radius: 10px; }
.bingo-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
.bingo-card { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.bc { all: unset; cursor: pointer; position: relative; aspect-ratio: 1; display: grid; place-items: center; border-radius: 22px; background: var(--paper2); font: 800 clamp(1rem, 2vw, 1.5rem) var(--display); transition: transform .15s; }
.bc:hover { transform: translateY(-2px); background: var(--lav-soft); }
.bc.on { background: var(--lav); color: #fff; } .bc.on b { opacity: .55; } .bc.on .ic { position: absolute; width: 60%; height: 60%; color: rgb(255 255 255 / .9); }
.bc:focus-visible { outline: 3px solid var(--lav); }
.bingo-side { display: grid; gap: .6rem; justify-items: start; } .bs-num { font: 800 3rem/1 var(--display); color: var(--lav-ink); margin: 0; }

/* ---------- Friday reset ---------- */
.reset { max-width: 1000px; margin: 0 auto; }
.rs-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 2rem; }
.rs-step { all: unset; cursor: pointer; display: grid; gap: .6rem; }
.rs-step i { height: 10px; border-radius: 99px; background: var(--paper3); } .rs-step span { font-weight: 700; color: var(--ink3); }
.rs-step.done i { background: var(--mint); } .rs-step.done span { color: var(--ink2); } .rs-step.now i { background: var(--navy); } .rs-step.now span { color: var(--ink); }
[data-theme="night"] .rs-step.now i { background: var(--yellow); }
.rs-step:focus-visible { outline: 3px solid var(--lav); border-radius: 8px; }
.rs-timer { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.4rem; } .rs-timer > span { display: grid; } .rs-timer b { font-size: 1.15rem; } .rs-timer small { color: var(--ink2); }
.rs-ring { width: 58px; height: 58px; transform: rotate(-90deg); } .rs-ring circle { fill: none; stroke: var(--lav-soft); stroke-width: 6; } .rs-ring .f { stroke: var(--lav); stroke-linecap: round; }
.rs-timer .btn { margin-left: auto; }
.rs-q { font: 800 clamp(2.6rem, 6vw, 4.6rem)/1.02 var(--display) !important; letter-spacing: -.03em; margin: 0 0 .5rem; }
.rs-sub { font-size: 1.3rem; color: var(--ink2); margin: 0 0 1.4rem; }
.rs-done { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.3rem; border-radius: 20px; background: var(--mint-soft); font-size: 1.05rem; }
.rs-done > .ic { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--mint); color: #1F1D3D; } .rs-done > span { flex: 1; }
.rs-card { margin-top: 1.4rem; } .rs-card header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; } .rs-card header > span:nth-child(2) { flex: 1; display: grid; } .rs-card header b { font-size: 1.3rem; } .rs-card header small { color: var(--ink2); }
.rs-card .picon { background: var(--yellow); color: #1F1D3D; width: 64px; height: 64px; border-radius: 20px; }
.rs-amt { font: 800 2.6rem var(--display) !important; }
.rs-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: .8rem; }
.rs-tile { all: unset; cursor: pointer; display: grid; justify-items: center; gap: .6rem; padding: 1.4rem .4rem; border-radius: 22px; background: var(--paper2); border: 3px solid transparent; font-weight: 700; }
.rs-tile .picon { background: var(--pc); color: #1F1D3D; }
.rs-tile:hover { background: var(--yellow); border-color: #1F1D3D; color: #1F1D3D; } .rs-tile:focus-visible { outline: 3px solid var(--lav); }
.rs-bills { display: grid; gap: .5rem; }
.rs-bill { all: unset; cursor: pointer; display: flex; align-items: center; gap: 1rem; padding: 1rem; border-radius: 20px; background: var(--paper2); }
.rs-bill .cb { width: 34px; height: 34px; border-radius: 10px; border: 3px solid var(--ink); display: grid; place-items: center; color: transparent; } .rs-bill .cb .ic { width: 20px; height: 20px; }
.rs-bill.on { background: var(--mint-soft); } .rs-bill.on .cb { background: var(--mint); border-color: var(--mint); color: #1F1D3D; }
.rs-bill > .amt { font-weight: 800; font-size: 1.2rem; } .rs-bill:focus-visible { outline: 3px solid var(--lav); }
.rs-peek { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.rs-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; } .rs-foot p { font-size: 1.1rem; color: var(--ink2); margin: 0; }
.rs-foot .u-link { color: var(--ink); }
.rs-foot .btn.solid { height: 70px; padding: 0 2.2rem; font-size: 1.15rem; border-radius: 20px; }

/* ---------- Settings ---------- */
.set-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.set-col { display: grid; gap: 1.5rem; }
.set-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--hair); flex-wrap: wrap; }
.set-row:last-child, form.box .set-row:last-of-type { border-bottom: 0; }
.sr-t { display: grid; gap: .15rem; min-width: 180px; flex: 1; } .sr-t b { font-size: 1.08rem; } .sr-t small { color: var(--ink2); font-size: .92rem; }
.set-in { max-width: 260px; width: auto; }
.set-preview { display: flex; align-items: center; gap: 1.4rem; padding: 1.2rem 1.4rem; border-radius: 22px; background: var(--paper2); margin: .6rem 0; }
.set-preview > div { display: grid; flex: none; } .set-preview small { font-weight: 700; } .set-preview b { font: 800 2.4rem/1 var(--display); } .set-preview p { color: var(--ink2); margin: 0; }
.tsizes { display: flex; gap: .5rem; } .tsizes button { all: unset; cursor: pointer; width: 50px; height: 50px; border-radius: 14px; background: var(--paper2); display: grid; place-items: center; font-weight: 800; }
.tsizes button[aria-pressed="true"] { background: var(--navy); color: var(--on-navy); } [data-theme="night"] .tsizes button[aria-pressed="true"] { background: var(--yellow); color: #1F1D3D; } .tsizes button:focus-visible { outline: 3px solid var(--lav); }
.tog-wrap { display: inline-flex; }
.set-save { margin-top: 1rem; }
.accts .r-amt { font-size: 1.15rem; }
.section-sm { margin-top: .8rem; }

/* Guide */
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.guide-card { display: grid; gap: .4rem; padding: 1.3rem 1.4rem; background: var(--paper); border-radius: 22px; color: var(--ink); text-decoration: none; }
.guide-card:hover { box-shadow: 0 0 0 3px var(--lav-soft); } .guide-card b { font: 800 1.35rem/1.05 var(--display); } .guide-card p { margin: 0; color: var(--ink2); }
.g-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--lav-soft); color: var(--lav-ink); } .g-ic .ic { width: 24px; height: 24px; }
.keys { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .7rem; } .keys li { display: flex; gap: .7rem; align-items: center; }

/* ---------- Charts ---------- */
.chart { margin: 0; } .chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--hair); stroke-width: 1; } .chart .base { stroke: var(--paper3); stroke-width: 1.5; }
.chart .axis { fill: var(--ink2); font: 600 12px var(--sans); }
.chart .hit { fill: transparent; } .chart .mark:focus { outline: none; } .chart .mark:focus .bar-mark, .chart .mark:hover .bar-mark { opacity: .8; }
.c1 { --c: var(--lav); } .c2 { --c: var(--mint); } .c3 { --c: var(--sky); } .c4 { --c: var(--pink); } .c5 { --c: var(--peach); } .c6 { --c: var(--yellow); }
.bar-mark { fill: var(--c, var(--lav)); } .line-mark { fill: none; stroke: var(--c, var(--lav)); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; } .dot-mark { fill: var(--paper); stroke: var(--c, var(--lav)); stroke-width: 3; }
.donut-seg { fill: var(--c); } .donut-empty { fill: none; stroke: var(--paper2); }
.legend { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: .8rem; color: var(--ink2); font-weight: 700; font-size: .9rem; }
.legend span { display: flex; align-items: center; gap: .45rem; } .key { display: inline-block; width: 14px; height: 14px; border-radius: 5px; background: var(--c); }
.tip { position: fixed; z-index: 4500; transform: translate(-50%, -100%); background: var(--navy); color: var(--on-navy); padding: .45rem .7rem; border-radius: 10px; font-size: .85rem; font-weight: 700; pointer-events: none; white-space: nowrap; }

/* ---------- Modal, toasts ---------- */
dialog#modal { border: 0; border-radius: 28px; padding: 0; background: var(--paper); color: var(--ink); width: min(680px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); box-shadow: 0 40px 100px -30px rgb(31 29 61 / .55); }
dialog#modal.narrow { width: min(480px, calc(100vw - 24px)); }
dialog#modal.photo { width: min(1100px, calc(100vw - 16px)); background: #13122A; color: #fff; }
dialog#modal::backdrop { background: rgb(31 29 61 / .45); backdrop-filter: blur(5px); }
.modal-inner { display: flex; flex-direction: column; max-height: calc(100dvh - 36px); }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.2rem 1.2rem .4rem 1.6rem; }
.modal-head h2 { font: 800 1.5rem var(--display); }
.modal-body { padding: .8rem 1.6rem 1.2rem; overflow-y: auto; }
.modal-foot { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: 1rem 1.6rem 1.4rem; }
.modal-foot .right { display: flex; gap: .5rem; margin-left: auto; }
.log-modal.modal-inner { overflow-y: auto; }
#toasts { position: fixed; z-index: 3000; left: 50%; bottom: 1.4rem; transform: translateX(-50%); display: flex; flex-direction: column-reverse; gap: .5rem; align-items: center; width: min(460px, calc(100vw - 24px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; gap: .8rem; align-items: center; background: var(--navy); color: var(--on-navy); padding: .9rem 1.1rem; border-radius: 20px; box-shadow: var(--shadow-2); font-weight: 600; width: 100%; animation: toastIn .35s cubic-bezier(.2, 1.4, .4, 1); }
.toast::before { content: ""; width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M15 25l6.5 6.5L34 18' fill='none' stroke='%231F1D3D' stroke-width='4.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; }
.toast.err::before { background: var(--pink); }
.toast button { all: unset; cursor: pointer; color: var(--yellow); font-weight: 800; margin-left: auto; }
@keyframes toastIn { from { transform: translateY(18px) scale(.96); opacity: 0; } }

/* ---------- Photos, the editor and the lightbox ---------- */
img.missing { background: repeating-linear-gradient(45deg, var(--paper2) 0 8px, var(--hair) 8px 16px); }
.ed-photos { display: flex; flex-wrap: wrap; gap: .6rem; }
.ed-ph { position: relative; margin: 0; width: 110px; height: 110px; border-radius: 16px; overflow: hidden; } .ed-ph img { width: 100%; height: 100%; object-fit: cover; }
.ed-ph .icon-btn { position: absolute; top: 4px; right: 4px; background: var(--paper); width: 30px; height: 30px; }
.ed-add { width: 110px; height: 110px; border: 2.5px dashed color-mix(in oklab, var(--lav) 55%, transparent); border-radius: 16px; display: grid; place-content: center; justify-items: center; gap: .3rem; text-align: center; cursor: pointer; font-size: .78rem; font-weight: 700; padding: .4rem; background: var(--lav-soft); }
.ed-add .ic { width: 24px; height: 24px; color: var(--lav-ink); } .ed-add.busy { opacity: .6; }
.pdf-chip { display: inline-flex; gap: .3rem; align-items: center; }
.lightbox { position: relative; padding: 2.8rem 3.2rem 1.2rem; }
.lightbox figure { margin: 0; } .lightbox img { max-height: calc(100dvh - 200px); width: auto; max-width: 100%; margin: 0 auto; object-fit: contain; border-radius: 14px; }
.lightbox figcaption { display: flex; gap: 1rem; justify-content: center; align-items: baseline; padding: .8rem 0 0; flex-wrap: wrap; } .lightbox .hand { font: 800 1.4rem var(--display); }
.lightbox .icon-btn { color: #fff; } .lightbox .icon-btn:hover { background: rgb(255 255 255 / .12); }
.lb-close { position: absolute; top: .6rem; right: .6rem; } .lb-prev, .lb-next { position: absolute; top: 45%; } .lb-prev { left: .4rem; } .lb-next { right: .4rem; }
.lb-tools { display: flex; justify-content: center; gap: .5rem; margin-top: .8rem; } .lb-tools .btn { --b: #fff; color: #1F1D3D; border-color: #fff; }

/* ---------- Feedback ---------- */
.pop { position: fixed; z-index: 4000; pointer-events: none; width: 0; height: 0; }
.pop i { position: absolute; width: 9px; height: 9px; border-radius: 50%; animation: popOut .9s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes popOut { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--x), calc(var(--y) + 30px)) scale(.6); opacity: 0; } }
.confetti { position: fixed; inset: 0; z-index: 4000; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 11px; height: 15px; border-radius: 4px; animation: fall var(--d) cubic-bezier(.25, .6, .45, 1) forwards; }
@keyframes fall { to { transform: translate(var(--x), 108vh) rotate(var(--r)); } }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 5000; pointer-events: none; box-shadow: var(--shadow-2) !important; opacity: .95; }
body.is-dragging { cursor: grabbing; user-select: none; } .dragging { opacity: .35; } .drop-over { outline: 2px dashed var(--ink) !important; }

/* ---------- Sign in ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth-art { position: relative; overflow: hidden; background: var(--navy); color: var(--on-navy); padding: clamp(2rem, 5vw, 4.5rem); display: flex; flex-direction: column; justify-content: center; gap: 1.3rem; }
.aa-logo svg { width: 72px; height: 72px; }
.aa-title { font: 800 clamp(4rem, 10vw, 7.5rem)/.9 var(--display); letter-spacing: -.04em; }
.aa-lede { max-width: 44ch; font-size: 1.12rem; color: var(--on-navy2); }
.aa-card { display: grid; gap: .2rem; width: min(340px, 100%); padding: 1.4rem 1.6rem; border-radius: 26px; background: #fff; color: #1F1D3D; transform: rotate(-2deg); box-shadow: 0 30px 60px -30px #000; }
.aa-card small { font-weight: 700; } .aa-card b { font: 800 3.6rem/1 var(--display); background: linear-gradient(176deg, transparent 50%, #F4DE4F 50%, #F4DE4F 88%, transparent 88%); width: fit-content; } .aa-card span { color: #5E6180; }
.aa-stats { display: flex; flex-wrap: wrap; gap: .7rem; } .aa-stats > span { display: grid; padding: .8rem 1rem; border-radius: 18px; background: var(--navy2); color: var(--on-navy2); font-size: .9rem; } .aa-stats b { font: 800 1.4rem var(--display); color: var(--yellow); }
.auth-form { display: grid; place-items: center; padding: 2rem 1.2rem; background: var(--paper); }
.auth-card { width: min(420px, 100%); display: flex; flex-direction: column; gap: 1rem; }
.auth-card h2 { font: 800 2.4rem var(--display); }
.key-input { letter-spacing: .08em; text-transform: uppercase; }

/* ---------- Mid-size ---------- */
@media (max-width: 1380px) {
  .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chaos { grid-template-columns: auto minmax(0, 1fr); } .ch-levels { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }
  .ar-boxes { grid-template-columns: 1fr 1fr; } .ar-boxes .bars { grid-column: 1 / -1; }
  .af-form { grid-template-columns: 1fr 1fr; } .af-form .field:first-child { grid-column: 1 / -1; }
  .search { width: 220px; }
}
@media (max-width: 1180px) {
  .today-hero, .imp-cols, .sp-cols, .plan-cols, .bills-cols, .debt-top, .rv-cols, .tax-hero, .tax-cols, .hs-cols, .wins-cols, .hf-cols, .set-cols { grid-template-columns: minmax(0, 1fr); }
  .impulse-hero, .hf-hero { grid-template-columns: minmax(0, 1fr); }
  .sp-side { position: static; }
  .spot-band { grid-template-columns: 1fr; }
  .tb-log { padding: 0 1rem; }
}
/* ---------- Phones and tablets ---------- */
@media (max-width: 960px) {
  .side { transform: translateX(-102%); transition: transform .25s; width: min(300px, 86vw); box-shadow: var(--shadow-2); }
  body.nav-on .side { transform: none; }
  body.nav-on .scrim { display: block; position: fixed; inset: 0; background: rgb(31 29 61 / .45); z-index: 40; }
  .main-col { margin-left: 0; padding: 1rem 1rem 6.5rem; }
  .demo-band { margin: -1rem -1rem 1rem; }
  .menu-btn { display: inline-grid !important; background: var(--paper); width: 48px; height: 48px; border-radius: 14px; }
  .topbar { flex-wrap: wrap; gap: .7rem; margin-bottom: 1.2rem; }
  .tb-title { flex-direction: column; gap: .1rem; }
  .tb-sub { font-size: .95rem; }
  .tb-tools { width: 100%; order: 3; }
  .search { flex: 1; width: auto; height: 50px; } .tb-btn { width: 50px; height: 50px; } .tb-log { display: none; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 45; padding: .45rem .4rem; border-radius: 24px; background: var(--navy); box-shadow: var(--shadow-2); padding-bottom: calc(.45rem + env(safe-area-inset-bottom) / 2); }
  .tabbar a, .tabbar button { all: unset; cursor: pointer; display: grid; justify-items: center; gap: .1rem; color: var(--on-navy2); font-size: .7rem; font-weight: 700; padding: .3rem 0; }
  .tabbar .ic { width: 22px; height: 22px; } .tabbar [aria-current="page"] { color: var(--yellow); }
  .tabbar .fab { width: 56px; height: 56px; border-radius: 18px; background: var(--yellow); color: #1F1D3D; place-self: center; display: grid; place-items: center; margin-top: -1.4rem; box-shadow: 0 10px 22px -10px #000; }
  .tabbar .fab .ic { width: 28px; height: 28px; }
  .box { padding: 1.3rem 1.2rem; border-radius: 24px; }
  .grid3 { grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1rem; }
  .today-hero { gap: 1rem; margin-bottom: 1rem; }
  .safe-top { flex-direction: column; } .mini-bars { height: 90px; width: 100%; justify-content: space-between; } .mb i { height: calc(var(--h) * 70px); width: 26px; }
  .safe-stats { grid-template-columns: 1fr; gap: .6rem; } .safe-stats a { grid-template-columns: 1fr auto; align-items: center; padding: .9rem 1rem; } .safe-stats b { font-size: 1.35rem; }
  .vb-grid { grid-auto-rows: 140px; }
  .tubes { grid-template-columns: repeat(3, 1fr); row-gap: 1rem; }
  .lg-head { display: none; }
  .lg-row { grid-template-columns: 44px minmax(0, 1fr) auto; row-gap: .4rem; }
  .lg-row .picon { width: 44px; height: 44px; } .lg-cat { grid-column: 2 / -1; grid-row: 2; } .lg-from { display: none; } .lg-row .icon-btn { display: none; }
  .pl-head { display: none; } .pl-row { grid-template-columns: 8px minmax(0, 1fr) 150px; } .pl-day, .pl-last { display: none; } .pl-sw { height: 36px; width: 8px; }
  .stackbar { height: 60px; } .stackbar b { display: none; }
  .mc-cell { min-height: 72px; padding: .35rem; border-radius: 12px; } .ev { font-size: .62rem; padding: .2rem .25rem; } .mc-d { font-size: .9rem; } .mc-today { display: none; }
  .mc-row span { font-size: .75rem; padding: 0; text-align: center; }
  .goals-top { gap: 1rem; } .gt-main, .gt-stat { border: 0; padding: 0; } .goals-top .btn { margin-left: 0; width: 100%; }
  .chaos { grid-template-columns: 1fr; padding: 1.4rem; gap: 1rem; } .ch-shield { width: 84px; height: 98px; clip-path: path("M42 0 L82 15 C82 56 70 82 42 98 C14 82 2 56 2 15 Z"); } .ch-levels { grid-template-columns: 1fr 1fr; }
  .debt-cards { grid-template-columns: 1fr; } .debt-cards .order { grid-template-columns: 1fr; } .df-stats { grid-template-columns: 1fr 1fr 1fr; gap: .5rem; } .df-stats b { font-size: 1.1rem; } .extra { grid-template-columns: 1fr; }
  .rv-nums { gap: 1.2rem; } .rv-cmp { margin: 0; text-align: left; max-width: none; } .rv-bar { height: 70px; } .rv-bar span { padding: 0 .5rem; } .rv-bar small { display: none; }
  .rl-nums { flex-direction: column; align-items: stretch; } .rl-vs { text-align: center; }
  .impulse-hero { padding: 1.4rem; } .park-form { grid-template-columns: 1fr; } .af-form { grid-template-columns: 1fr; } .ar-boxes, .ar-notes, .ar-btns { grid-template-columns: 1fr; }
  .lot-btns { padding-left: 0; }
  .ret-hero, .wins-hero { padding: 1.4rem; } .pebbles { display: none; }
  .hf-hero { padding: 1rem; } .hf-photos { min-height: 260px; }
  .sprint-days { gap: .3rem; } .sd span { width: 34px; height: 34px; }
  .bingo-cols { grid-template-columns: 1fr; } .bingo-card { gap: .4rem; } .bc { border-radius: 14px; }
  .rs-tiles { grid-template-columns: repeat(3, 1fr); } .rs-peek { grid-template-columns: 1fr; } .rs-steps span { font-size: .78rem; } .rs-foot .btn.solid { width: 100%; height: 60px; }
  .hs-nums .eq { margin-left: 0; } .gig-nums { grid-template-columns: 1fr 1fr 1fr; gap: .4rem; } .gig-nums b { font-size: 1.05rem; }
  .set-in { max-width: 100%; width: 100%; } .set-preview { flex-direction: column; align-items: flex-start; }
  .auth { grid-template-columns: 1fr; } .auth-art { padding: 2rem 1.4rem; }
  .form-grid { grid-template-columns: 1fr; }
  .spot-band { padding: 1.2rem; } .sb-cards { grid-auto-columns: minmax(160px, 70%); }
}
@media (max-width: 960px) { .pk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .plan-filters, .filters:has([data-action=plan-shift]) { flex-wrap: nowrap; overflow-x: auto; } .filters:has([data-action=plan-shift]) .segs { flex-wrap: nowrap; } .filters:has([data-action=plan-shift]) .segs button { white-space: nowrap; } }
@media (max-width: 960px) { .rh-side { flex-wrap: wrap; } .gear-list .g-img { display: none; } .rt-clock { width: 72px; height: 72px; } }
@media (max-width: 420px) { .lp-amount input { font-size: 3.2rem; } .safe-num { font-size: 4rem; } }
@media (prefers-reduced-motion: reduce) { .tube i::before { animation: none; } * { scroll-behavior: auto !important; } }
@media print { .side, .topbar, .tabbar, .demo-band { display: none !important; } .main-col { margin: 0; padding: 0; } .box { box-shadow: none; border: 1px solid #ddd; } }