*{box-sizing:border-box}:root{--paper:#f6f1e4;--card:#fffdf7;--ink:#253029;--muted:#6e746d;--line:#ded8c9;--green:#2f7d56;--green-soft:#e1f1e8;--yellow:#f4c95d;--yellow-soft:#fff5d4;--terracotta:#b9684f;--danger:#9b3d38;font-family:Inter,ui-rounded,"SF Pro Rounded",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
html{background:var(--paper)}body{margin:0;color:var(--ink);background:radial-gradient(circle at 8% 12%,rgba(244,201,93,.22) 0 3px,transparent 4px),radial-gradient(circle at 91% 24%,rgba(47,125,86,.14) 0 3px,transparent 4px),var(--paper)}button,input,select{font:inherit}button{cursor:pointer}.shell{width:min(940px,calc(100% - 28px));margin:0 auto;padding:28px 0 54px;position:relative}.page-doodle{position:fixed;z-index:-1;font-weight:900;color:rgba(47,125,86,.12);font-size:72px;transform:rotate(-12deg)}.page-doodle-one{top:80px;left:3vw}.page-doodle-two{right:3vw;top:52%;transform:rotate(9deg)}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}.brand img{width:54px;height:54px}.brand-name{margin:0;font-size:clamp(1.65rem,4vw,2.45rem);font-weight:900;letter-spacing:-.045em}.brand-name span{color:var(--green);font-family:Georgia,serif;font-style:italic}.subtitle,.muted,.tiny-note{color:var(--muted)}.subtitle{margin:2px 0 0;font-size:.92rem}.eyebrow{margin:0;font-weight:850;letter-spacing:.14em;font-size:.7rem;color:var(--green)}h2{margin:4px 0 0;font-size:1.35rem;letter-spacing:-.02em}
.hero-card,.card,.stat-card{background:rgba(255,253,247,.95);border:1px solid var(--line);box-shadow:0 12px 34px rgba(37,48,41,.055)}.hero-card{border-radius:30px;padding:32px 32px 24px;display:grid;grid-template-columns:1fr minmax(300px,.9fr);align-items:center;min-height:290px;overflow:hidden;position:relative}.hero-card:before{content:"";position:absolute;width:160px;height:160px;border:2px dashed rgba(47,125,86,.14);border-radius:50%;top:-68px;right:18%}.hello{margin:8px 0 0;color:var(--muted)}.balance{font-size:clamp(3.4rem,9vw,6.3rem);line-height:.97;font-weight:950;letter-spacing:-.07em;margin-top:8px}.growth-line{display:inline-block;margin:18px 0 0;padding:10px 14px;background:var(--green-soft);border-radius:999px;font-weight:750}.handline{width:130px;height:14px;margin-top:12px;border-top:4px solid var(--yellow);border-radius:50%;transform:rotate(-2deg)}.hero-art img{width:100%;max-height:235px;object-fit:contain;opacity:.95}
.card{border-radius:23px;padding:24px;margin-top:18px}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}.section-title{margin:4px 0 0;font-size:1.45rem;letter-spacing:-.03em}.goal-percent{font-size:1.5rem;transform:rotate(2deg)}.progress-track{height:18px;border-radius:999px;overflow:hidden;background:#ece6d8;margin-top:20px;border:1px solid #e2dccd}.progress-fill{height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--green),#4c9d73);transition:width .35s ease}.goal-meta{display:flex;justify-content:space-between;margin-top:9px;color:var(--muted);font-size:.9rem}.encouragement{margin:15px 0 0;font-weight:750}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}.stat-card{border-radius:20px;padding:18px;display:flex;flex-direction:column;min-height:135px;position:relative;overflow:hidden}.stat-card:nth-child(1):after,.stat-card:nth-child(3):after{content:"";width:52px;height:19px;border-top:3px solid rgba(185,104,79,.45);position:absolute;right:12px;top:18px;transform:rotate(-8deg);border-radius:50%}.doodle-icon{font-size:1.7rem;width:36px;height:36px;display:grid;place-items:center;transform:rotate(-5deg)}.math-icon{font-size:2rem;font-weight:900;color:var(--green)}.stat-label{color:var(--muted);margin:9px 0 auto;font-size:.88rem}.stat-card strong{font-size:1.48rem}
.tx-form{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:20px;align-items:end}.tx-form label,.parent-grid label{display:flex;flex-direction:column;gap:7px;color:var(--muted);font-size:.84rem;font-weight:700}.tx-form .wide{grid-column:1/3}input,select{width:100%;border:1px solid var(--line);background:white;color:var(--ink);border-radius:12px;padding:12px 13px;outline:none}input:focus,select:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft)}
.primary-btn,.secondary-btn,.ghost-btn,.icon-btn,.file-label{border-radius:12px;border:0;padding:12px 16px;font-weight:800}.primary-btn{background:var(--ink);color:white;box-shadow:3px 3px 0 var(--yellow)}.secondary-btn{background:var(--green);color:white}.ghost-btn,.file-label{background:rgba(255,255,255,.45);border:1px solid var(--line);color:var(--ink)}.icon-btn{background:transparent;padding:8px}.mini-doodle{color:var(--terracotta);font-weight:800;letter-spacing:.15em;transform:rotate(-4deg)}
.choice-card{margin-top:18px;padding:17px;border-radius:17px;border:1px solid #e6cf78;background:var(--yellow-soft);position:relative}.choice-card:after{content:"?";position:absolute;right:16px;top:10px;font:900 44px Georgia,serif;color:rgba(185,104,79,.18);transform:rotate(8deg)}.choice-card p{margin:6px 0}.choice-question{font-weight:850}.transactions{margin-top:10px}.tx-row{display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}.tx-row:last-child{border-bottom:0}.tx-icon{width:40px;height:40px;display:grid;place-items:center;background:#f1ecdf;border:1px solid #e3ddcf;border-radius:50%;font-weight:900;color:var(--green)}.tx-copy{display:flex;flex-direction:column;gap:3px}.tx-date{font-size:.82rem;color:var(--muted)}.tx-amount.negative{color:var(--danger)}.tx-amount.positive{color:var(--green)}
.footer{display:flex;align-items:center;gap:12px;margin:26px 4px 0;padding-top:20px;border-top:1px dashed #cec7b8;color:var(--muted);font-size:.82rem;line-height:1.5}.footer img{width:42px;height:42px}.footer p{margin:0;max-width:630px}
dialog{border:0;padding:0;border-radius:24px;width:min(690px,calc(100% - 30px));background:transparent}dialog::backdrop{background:rgba(29,35,31,.48);backdrop-filter:blur(5px)}.dialog-card{background:var(--card);padding:25px;border-radius:24px;max-height:90vh;overflow:auto}.dialog-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.parent-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}.check-label{flex-direction:row!important;align-items:center;padding-top:26px}.check-label input{width:auto}.suffix-input{display:grid;grid-template-columns:1fr auto;align-items:center;border:1px solid var(--line);border-radius:12px;background:white;overflow:hidden}.suffix-input input{border:0;box-shadow:none!important}.suffix-input span{padding-right:13px;font-weight:800}.explain-box{background:var(--green-soft);padding:16px;border-radius:16px;margin-top:18px}.neutral-box{background:#f2eee4}.explain-box p{margin:6px 0 14px;line-height:1.5;color:#415047}.dialog-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.file-label{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
@media(max-width:760px){.hero-card{grid-template-columns:1fr;padding:25px}.hero-art{margin-top:10px}.hero-art img{max-height:165px}.stats-grid{grid-template-columns:1fr}.stat-card{min-height:100px}.tx-form,.parent-grid{grid-template-columns:1fr}.tx-form .wide{grid-column:auto}.tx-form button{width:100%}.check-label{padding-top:0}}@media(max-width:520px){.topbar{align-items:flex-start}.brand img{width:44px;height:44px}.ghost-btn{padding:10px 11px}.hero-art{display:none}.hero-card{min-height:230px}.balance{font-size:4.2rem}.section-head{align-items:flex-start}.mini-doodle{display:none}}

/* v0.4 — one ledger, two views */
.story-section { margin-top: 24px; }
.story-heading { padding: 0 4px 4px; }
.story-heading h2 { font-size: 1.5rem; }

.then-now-card {
  margin-top: 14px;
  background: var(--ink);
  color: white;
  border-radius: 26px;
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.then-now-card:after {
  content: "∑";
  position: absolute;
  right: -18px;
  bottom: -52px;
  font: 900 150px Georgia, serif;
  color: rgba(255,255,255,.055);
  transform: rotate(-8deg);
}
.then-now-side { min-width: 0; display: flex; flex-direction: column; }
.then-now-side strong { font-size: clamp(2rem, 6vw, 3.3rem); line-height: 1; letter-spacing: -.05em; }
.then-now-side small { color: rgba(255,255,255,.68); margin-top: 7px; }
.now-side { text-align: right; }
.then-now-label { color: var(--yellow); font-size: .7rem; font-weight: 900; letter-spacing: .15em; margin-bottom: 7px; }
.then-now-middle { text-align: center; color: rgba(255,255,255,.66); font-size: .73rem; line-height: 1.25; }
.then-now-middle div { color: var(--yellow); font-size: 1.5rem; margin: 5px 0; }
.story-change { grid-column: 1 / -1; margin: 3px 0 0; font-weight: 750; }
.story-totals {
  grid-column: 1 / -1;
  border-top: 1px dashed rgba(255,255,255,.18);
  padding-top: 14px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  color: rgba(255,255,255,.72);
  font-size: .82rem;
}
.story-totals b { color: white; }

.story-cards { display: grid; gap: 14px; margin-top: 14px; }
.story-event {
  --story-accent: var(--green);
  background: rgba(255,253,247,.96);
  border: 1px solid var(--line);
  border-left: 6px solid var(--story-accent);
  border-radius: 21px;
  padding: 18px;
  display: grid;
  grid-template-columns: 54px minmax(0,1fr);
  gap: 15px;
  box-shadow: 0 9px 28px rgba(37,48,41,.045);
}
.story-in { --story-accent: #b57b35; }
.story-match { --story-accent: #5879a3; }
.story-grow { --story-accent: var(--green); background: linear-gradient(135deg,rgba(255,253,247,.98),rgba(225,241,232,.62)); }
.story-out { --story-accent: var(--terracotta); }
.story-fix { --story-accent: #777; }
.story-icon {
  width: 50px; height: 50px; border-radius: 16px;
  background: #f2eee3; display: grid; place-items: center;
  font-size: 1.55rem; transform: rotate(-2deg);
}
.story-main { min-width: 0; }
.story-topline { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.story-topline time { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.story-main h3 { margin: 5px 0 4px; font-size: 1.16rem; letter-spacing: -.02em; }
.story-body { margin: 0; color: var(--muted); line-height: 1.45; }
.before-after {
  margin-top: 14px;
  background: #f5f1e7;
  border-radius: 15px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
}
.before-after div:not(.journey-arrow) { display: flex; flex-direction: column; gap: 2px; }
.before-after div:last-child { text-align: right; }
.before-after span { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }
.before-after strong { font-size: 1.12rem; }
.journey-arrow { color: var(--story-accent); font-size: 1.3rem; font-weight: 900; }
.story-impact {
  margin-top: 9px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: .8rem;
}
.story-impact strong { color: var(--ink); }
.story-impact b { color: var(--story-accent); }
.empty-story { padding: 20px; background: var(--card); border: 1px dashed var(--line); border-radius: 18px; color: var(--muted); }

.parent-ledger {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.ledger-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 10px; }
.ledger-heading h3 { margin: 4px 0 0; font-size: 1.05rem; }
.ledger-count { color: var(--muted); font-size: .8rem; }
.ledger-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: white; }
.ledger-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: .78rem; }
.ledger-table th, .ledger-table td { padding: 10px 11px; text-align: left; border-bottom: 1px solid #eee9de; vertical-align: top; }
.ledger-table th { background: #f4f0e7; color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; position: sticky; top: 0; }
.ledger-table tr:last-child td { border-bottom: 0; }
.ledger-table td:nth-child(5), .ledger-table th:nth-child(5),
.ledger-table td:nth-child(6), .ledger-table th:nth-child(6) { text-align: right; }
.ledger-positive { color: var(--green); font-weight: 800; }
.ledger-negative { color: var(--danger); font-weight: 800; }
.ledger-type { white-space: nowrap; font-weight: 750; }

@media(max-width:640px) {
  .then-now-card { grid-template-columns: 1fr 1fr; }
  .then-now-middle { display: none; }
  .story-event { grid-template-columns: 44px minmax(0,1fr); padding: 15px; gap: 11px; }
  .story-icon { width: 42px; height: 42px; border-radius: 13px; font-size: 1.3rem; }
  .story-topline { display: block; }
  .story-topline time { display: block; margin-top: 4px; }
  .before-after { gap: 8px; padding: 10px; }
  .before-after strong { font-size: .98rem; }
}