:root{
    --primary:#ffe66d; --on-primary:#0e0f0c; --primary-active:#fff0a0; --primary-neutral:#fff1b0; --primary-pale:#fff8d6;   /* light-yellow accent (was Wise lime) */
    --lime:#9fe870;   /* kept only for "money in" marks */
    --ink:#0e0f0c; --ink-deep:#163300; --body:#454745; --mute:#868685;
    --canvas:#ffffff; --canvas-soft:#e8ebe6;
    --positive:#2ead4b; --positive-deep:#054d28;
    --warning:#ffd11a; --warning-deep:#b86700; --warning-content:#4a3b1c;
    --negative:#d03238; --negative-deep:#a72027; --negative-bg:#320707;
    --orange:#ffc091; --cyan:#38c8ff;
    --font:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --pill:9999px;
  }
  *{box-sizing:border-box} html,body{margin:0}
  body{background:var(--canvas); color:var(--ink); font-family:var(--font); font-size:14px; line-height:20px;
       -webkit-font-smoothing:antialiased; font-feature-settings:"cv11","ss01"}
  button,input,select,textarea{font-family:inherit}
  :focus-visible{outline:2px solid var(--ink); outline-offset:2px}
  [hidden]{display:none!important}

  /* ---------- shell: ledger on the left, planner on the right ---------- */
  .shell{display:grid; grid-template-columns:420px minmax(0,1fr); gap:24px; padding:20px 24px 64px; max-width:1680px; margin:0 auto; align-items:start}
  @media(max-width:1280px){ .shell{grid-template-columns:360px minmax(0,1fr)} }
  @media(max-width:960px){ .shell{grid-template-columns:minmax(0,1fr); padding:16px 16px 48px} }

  /* ---------- buttons & badges ---------- */
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:var(--r-xl); padding:12px 24px;
       font-size:16px; line-height:24px; font-weight:600; cursor:pointer; transition:background .15s, color .15s; white-space:nowrap}
  .btn.primary{background:var(--primary); color:var(--on-primary)} .btn.primary:hover{background:var(--primary-active)}
  .btn.secondary{background:var(--canvas-soft); color:var(--ink)} .btn.secondary:hover{background:var(--primary-pale)}
  .btn.tertiary{background:var(--canvas); color:var(--ink); border:1px solid var(--ink)} .btn.tertiary:hover{background:var(--canvas-soft)}
  .btn.sm{padding:8px 16px; font-size:14px; line-height:20px}
  .btn.xs{padding:4px 10px; font-size:12px; line-height:16px}
  .btn:disabled{opacity:.45; cursor:default}
  .linkbtn{border:0; background:none; padding:0; font:inherit; color:var(--body); text-decoration:underline; text-underline-offset:3px;
           text-decoration-color:var(--mute); cursor:pointer}
  .linkbtn:hover{color:var(--ink); text-decoration-color:var(--ink)}
  .badge{display:inline-flex; align-items:center; gap:6px; font-size:14px; line-height:20px; font-weight:600;
         padding:4px 12px; border-radius:var(--pill); white-space:nowrap}
  .badge.sage{background:var(--canvas-soft); color:var(--ink)}
  .badge.pos{background:#e2f6d5; color:var(--positive-deep)}
  .badge.warn{background:var(--orange); color:var(--warning-content)}
  .badge.neg{background:var(--negative); color:var(--canvas)}

  /* ---------- ledger (the transactions table) ---------- */
  .ledger{background:var(--canvas); border:1px solid var(--canvas-soft); border-radius:var(--r-xl); display:flex; flex-direction:column; transition:box-shadow .15s}
  .ledger.over{box-shadow:0 0 0 3px var(--ink) inset}
  .lhead{padding:20px 20px 12px; border-bottom:1px solid var(--canvas-soft)}
  .brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px; letter-spacing:-.01em; margin-bottom:14px}
  .brand .mark{width:28px; height:28px; border-radius:var(--pill); background:var(--primary); display:grid; place-items:center;
               font-size:14px; font-weight:700; color:var(--on-primary)}
  .lhead h2{margin:0 0 2px; font-size:20px; line-height:28px; font-weight:700; letter-spacing:-.01em; display:flex; align-items:center; justify-content:space-between; gap:8px}
  .lhead .sub{color:var(--body); font-size:13px; line-height:18px; margin:0 0 12px}
  .lhead .row{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
  .seg{display:inline-flex; background:var(--canvas-soft); border-radius:var(--pill); padding:4px; gap:2px}
  .seg button{border:0; background:transparent; padding:5px 12px; font:inherit; font-size:13px; line-height:18px; font-weight:600; color:var(--body);
              cursor:pointer; border-radius:var(--pill); transition:background .15s,color .15s}
  .seg button:hover{color:var(--ink)}
  .seg button.on{background:var(--ink); color:var(--canvas)}
  .tscroll{flex:1}
  table.tx{border-collapse:separate; border-spacing:0; width:100%; table-layout:fixed; font-size:13px; line-height:18px; font-variant-numeric:tabular-nums}
  table.tx tbody tr{cursor:grab}
  table.tx tbody tr:active{cursor:grabbing}
  table.tx tbody tr.dragging{opacity:.4}
  table.tx tbody td{padding:7px 12px; border-bottom:1px solid var(--canvas-soft); vertical-align:middle}
  table.tx tbody tr:hover td{background:#f5f7f3}
  table.tx td.main{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:0}
  table.tx td.main .nm{font-weight:500}
  table.tx td.main .ref{color:var(--mute); font-size:12px}
  table.tx td.main .many{color:var(--mute); font-size:12px}
  table.tx td.side{width:172px; text-align:right; padding-left:6px; white-space:nowrap}
  table.tx td.side .amt{font-weight:600; display:inline-block; min-width:78px}
  table.tx td.side .amt.neg{color:var(--negative-deep)}
  table.tx td.side .sug{border:1px solid transparent; background:none; color:var(--mute); font:inherit; font-size:11px; line-height:16px; font-weight:600; border-radius:var(--pill); padding:1px 8px; margin-left:6px; cursor:pointer; min-width:78px; text-align:left}
  table.tx tbody tr:hover td.side .sug{border-color:var(--ink); color:var(--ink); background:var(--canvas)}
  table.tx td.side .sug:hover{background:var(--ink)!important; color:var(--canvas)!important}
  table.tx td.side .tag{display:inline-block; font-size:11px; line-height:16px; font-weight:600; margin-left:6px; min-width:78px; text-align:left; padding:1px 8px; border-radius:var(--pill)}
  table.tx td.side .tag.in{color:var(--positive-deep); background:#e2f6d5} table.tx td.side .tag.must{color:var(--ink); background:var(--canvas-soft)} table.tx td.side .tag.want{color:var(--warning-deep); background:#fff1e6}
  table.tx td.side .tag .auto{font-weight:400; opacity:.7}
  table.tx tr.filed td{color:var(--mute)} table.tx tr.filed td.main .nm{font-weight:400}
  table.tx tr.day td{padding:9px 12px 3px; border-bottom:0; font-size:11px; line-height:16px; color:var(--body); font-weight:600; cursor:default; background:var(--canvas)}
  table.tx tr.day td .over{color:var(--negative-deep); text-transform:uppercase; letter-spacing:.04em; font-size:10px; margin-left:4px}
  table.tx tr.day td .pay{color:var(--ink); background:var(--primary); border-radius:var(--pill); padding:0 6px; margin-left:6px; font-size:10px; letter-spacing:.04em; text-transform:uppercase}
  table.tx tr.day td .dsum{float:right; font-weight:600; color:var(--mute)}
  table.tx tr.day:hover td{background:var(--canvas)}
  .lhead .sub .info{display:inline-grid; place-items:center; width:16px; height:16px; border-radius:var(--pill); background:var(--canvas-soft); color:var(--body); font-size:11px; cursor:help; vertical-align:-2px}
  .find{font:inherit; font-size:13px; line-height:18px; border:1px solid var(--canvas-soft); border-radius:var(--pill); padding:4px 12px; background:var(--canvas); color:var(--ink); width:110px; margin-left:auto}
  .find:focus{outline:0; border-color:var(--ink); width:150px}
  table.tx tr.grp td{position:sticky; top:0; z-index:1; background:#e2f6d5; color:var(--ink-deep); font-size:11px; line-height:16px; font-weight:700;
                     letter-spacing:.06em; text-transform:uppercase; padding:6px 12px; cursor:default; border-bottom:0}
  table.tx tr.grp td .cnt{font-weight:600; color:var(--positive-deep); margin-left:6px}
  table.tx tr.grp td .sum{float:right; font-weight:600; letter-spacing:0; text-transform:none}
  table.tx tr.grp.ap td{background:var(--canvas-soft); color:var(--ink)} table.tx tr.grp.ap td .cnt{color:var(--body)}
  table.tx tr.grp.manual td{background:#fff1e6; color:var(--warning-content)} table.tx tr.grp.manual td .cnt{color:var(--warning-deep)}
  .leftcol{display:grid; gap:16px; min-width:0}
  .debts{background:var(--canvas); border:1px solid var(--canvas-soft); border-radius:var(--r-xl); margin-top:24px; overflow:hidden}
  .debts .dhead{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:20px 20px 12px; flex-wrap:wrap}
  .debts h2{margin:0 0 2px; font-size:18px; line-height:28px; font-weight:700; letter-spacing:-.01em}
  .debts .sub{color:var(--body); font-size:13px; line-height:18px; margin:0; max-width:70ch}
  .dscroll{overflow-x:auto}
  table.dtable{border-collapse:separate; border-spacing:0; width:100%; font-size:13px; line-height:18px; font-variant-numeric:tabular-nums; min-width:560px}
  table.dtable td.nm .cat{display:block; font-size:12px; line-height:16px; color:var(--mute); font-weight:400}
  table.dtable td.balv{text-align:right; font-weight:600; color:var(--ink); width:150px}
  table.dtable td.balv .pd{display:block; font-size:11px; line-height:14px; color:var(--negative-deep); font-weight:500}
  table.dtable td.plan{text-align:right; width:280px}
  table.dtable tr.planned td{background:#fffdf3}
  table.dtable tr.planned td.nm{font-weight:700}
  .planbtn{border:0; background:none; font:inherit; font-size:13px; line-height:18px; color:var(--mute); cursor:pointer; padding:4px 10px; border-radius:var(--pill)}
  .planbtn:hover{color:var(--ink); background:var(--canvas-soft)}
  table.dtable tbody tr:hover .planbtn{color:var(--ink)}
  .planchip{display:inline-flex; align-items:center; gap:8px; border:0; background:var(--primary); color:var(--ink); font:inherit; font-size:13px; line-height:18px; font-weight:600; padding:4px 12px; border-radius:var(--pill); cursor:pointer; white-space:nowrap}
  .planchip:hover{background:var(--primary-active)}
  .planchip .sep{opacity:.55; font-weight:400}
  .planchip.must{outline:2px solid var(--ink); outline-offset:-2px}
  .planchip .b{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; opacity:.8}
  table.dtable tr.dedit td{background:var(--canvas-soft); padding:12px 12px 14px; white-space:normal}
  .deditor{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px 12px; align-items:end}
  .deditor label{display:grid; gap:4px; font-size:11px; line-height:16px; letter-spacing:.06em; text-transform:uppercase; color:var(--body); font-weight:600}
  .deditor input,.deditor select{font:inherit; font-size:14px; line-height:20px; border:1px solid var(--ink); border-radius:var(--r-md); padding:7px 10px; background:var(--canvas); color:var(--ink); width:100%; letter-spacing:0; text-transform:none; font-weight:500}
  .deditor input.money{text-align:right; font-variant-numeric:tabular-nums}
  .deditor input.pay{background:var(--primary-pale)}
  .deditor .actions{grid-column:1/-1; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
  .deditor .actions .grow{flex:1}
  .deditor .danger{color:var(--negative-deep)}
  .deditor .danger:hover{color:var(--negative)}
  table.dtable tfoot td .pct{color:var(--body); font-weight:500}
  table.dtable th{font-size:11px; line-height:16px; letter-spacing:.06em; text-transform:uppercase; color:var(--body); font-weight:600; text-align:left; padding:8px 12px; background:var(--canvas-soft); white-space:nowrap}
  table.dtable th.r{text-align:right}
  table.dtable td{padding:6px 12px; border-bottom:1px solid var(--canvas-soft); vertical-align:middle; white-space:nowrap}
  table.dtable tbody tr:hover td{background:#f5f7f3}
  table.dtable td.nm{font-weight:600; white-space:normal; min-width:180px}
  table.dtable td.nm .notes{display:block; font-size:12px; line-height:16px; color:var(--mute); font-weight:400}
  table.dtable td.bal{text-align:right}
  table.dtable td.bal input{width:120px; text-align:right; font:inherit; font-size:13px; line-height:18px; font-weight:600; font-variant-numeric:tabular-nums; border:1px solid transparent; border-radius:var(--r-sm); padding:4px 6px; background:transparent; color:var(--ink)}
  table.dtable td.bal input:hover{border-color:var(--canvas-soft)} table.dtable td.bal input:focus{border-color:var(--ink); background:var(--canvas); outline:0}
  table.dtable td.bal .pd{display:block; font-size:11px; line-height:14px; color:var(--negative-deep)}
  table.dtable td.pay{text-align:right}
  table.dtable td.pay input{width:110px; text-align:right; font:inherit; font-size:13px; line-height:18px; font-weight:600; font-variant-numeric:tabular-nums; border:1px solid var(--ink); border-radius:var(--r-sm); padding:4px 8px; background:var(--primary-pale); color:var(--ink)}
  table.dtable td.pay input.zero{background:var(--canvas); border-color:var(--canvas-soft)} table.dtable td.pay input.zero:hover{border-color:var(--mute)}
  table.dtable td.dt input{font:inherit; font-size:13px; line-height:18px; border:1px solid var(--canvas-soft); border-radius:var(--r-sm); padding:3px 6px; background:var(--canvas); color:var(--ink)}
  table.dtable td.dt input:hover{border-color:var(--mute)}
  table.dtable td.x{width:32px; text-align:right}
  table.dtable td.x button{border:0; background:none; color:var(--mute); width:24px; height:24px; border-radius:var(--pill); cursor:pointer; font-size:12px; display:inline-grid; place-items:center}
  table.dtable td.x button:hover{color:var(--canvas); background:var(--negative)}
  table.dtable tfoot td{padding:10px 12px; font-weight:600; color:var(--ink); background:var(--canvas-soft); border-bottom:0; text-align:right}
  table.dtable tfoot td:first-child{text-align:left; color:var(--body)}
  .catsel{font:inherit; font-size:12px; line-height:16px; color:var(--body); font-weight:600; border:0; border-bottom:1px dotted var(--mute); border-radius:0; background:transparent; padding:0 2px; cursor:pointer; -webkit-appearance:none; appearance:none}
  .catsel:hover{color:var(--ink); border-bottom-color:var(--ink)}
  .dform{padding:14px 20px; background:var(--canvas-soft); display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:8px; border-top:1px solid var(--canvas); border-bottom:1px solid var(--canvas)}
  .dform input,.dform select{font:inherit; font-size:13px; line-height:18px; border:1px solid var(--ink); border-radius:var(--r-md); padding:7px 10px; background:var(--canvas); color:var(--ink); width:100%}
  .dform .full{grid-column:1/-1}
  .dform .actions{grid-column:1/-1; display:flex; gap:8px; justify-content:flex-end}
  .dform input.err{border-color:var(--negative); box-shadow:0 0 0 1px var(--negative)}
  @media(max-width:760px){ .dform{grid-template-columns:1fr 1fr} }
  .demtpy{padding:18px 16px; color:var(--mute); font-size:13px; text-align:center}
  .tnote{padding:10px 12px; color:var(--mute); font-size:12px; text-align:center}
  .banner{background:var(--negative-bg); color:var(--canvas); border-radius:var(--r-lg); padding:12px 16px; margin-bottom:12px; font-size:14px; line-height:20px}
  .pastToggle{display:inline-flex; align-items:center; gap:6px; font-size:13px; line-height:18px; color:var(--body); cursor:pointer; user-select:none}
  .pastToggle input{width:16px; height:16px; accent-color:var(--ink-deep); margin:0; cursor:pointer}
  .syncdot{display:inline-block; width:8px; height:8px; border-radius:var(--pill); background:var(--mute); margin-right:6px; vertical-align:1px}
  .syncdot.ok{background:var(--positive)} .syncdot.bad{background:var(--negative)}
  .chip{display:inline-flex; align-items:center; gap:5px; font-size:11px; line-height:16px; font-weight:600; border-radius:var(--pill); padding:2px 8px; white-space:nowrap; max-width:100%}
  .chip .d{width:7px; height:7px; border-radius:var(--pill)}
  .chip.in{background:#e2f6d5; color:var(--positive-deep)} .chip.in .d{background:var(--positive)}
  .chip.must{background:var(--canvas-soft); color:var(--ink)} .chip.must .d{background:var(--ink)}
  .chip.want{background:#fff1e6; color:var(--warning-deep)} .chip.want .d{background:var(--orange)}
  .chip.sug{background:var(--canvas); border:1px dashed var(--mute); color:var(--body); cursor:pointer}
  .chip.sug:hover{border-color:var(--ink); color:var(--ink); border-style:solid}
  .chip .auto{font-weight:400; opacity:.7}
  select.file{font:inherit; font-size:12px; border:1px solid var(--canvas-soft); border-radius:var(--pill); padding:2px 6px; background:var(--canvas); color:var(--body); max-width:120px}
  .tempty{padding:32px 20px; color:var(--mute); text-align:center; font-size:14px}
  .lfoot{padding:12px 20px; border-top:1px solid var(--canvas-soft); display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between; font-size:12px; color:var(--mute)}
  .lfoot .links{display:flex; gap:12px; flex-wrap:wrap}

  /* paste panel inside the ledger */
  .paste{padding:16px 20px; border-bottom:1px solid var(--canvas-soft); background:var(--primary-pale)}
  .paste p{margin:0 0 8px; color:var(--body); font-size:13px; line-height:18px}
  .paste textarea{width:100%; min-height:120px; resize:vertical; font:inherit; font-size:12px; line-height:18px; font-variant-numeric:tabular-nums;
                  border:1px solid var(--ink); border-radius:var(--r-md); padding:10px; background:var(--canvas); color:var(--ink)}
  .paste textarea::placeholder{color:var(--mute)}
  .paste .actions{display:flex; gap:8px; justify-content:flex-end; align-items:center; margin-top:8px; flex-wrap:wrap}
  .paste .preview{flex:1; color:var(--body); font-size:13px}
  .paste .preview.err{color:var(--negative-deep)}

  /* ---------- planner (right) ---------- */
  .planner{min-width:0}
  .topbar{display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-bottom:12px; flex-wrap:wrap}
  .hero{background:var(--canvas-soft); color:var(--ink); border-radius:var(--r-xl); padding:36px 36px 32px;
        display:grid; grid-template-columns:1fr auto; gap:24px 40px; align-items:end; margin-bottom:20px}
  @media(max-width:1100px){ .hero{grid-template-columns:1fr; padding:28px 24px 24px} }
  .hero .eyebrow{font-size:14px; line-height:20px; font-weight:600; color:var(--body); margin-bottom:8px}
  .hero .big{font-weight:700; font-size:clamp(36px,4vw,56px); line-height:1; letter-spacing:-.02em;
             font-variant-numeric:tabular-nums; color:var(--ink-deep); margin:0 0 16px -2px; transition:color .25s}
  .hero.bad .big{color:var(--negative-deep)}
  .hero.empty .big{color:var(--mute)}
  .hero .verdict{display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:15px; line-height:22px; color:var(--ink)}
  .hero .alt{font-size:13px; line-height:18px; color:var(--body); margin-top:8px}
  .hero .alt.warnalt{color:var(--warning-deep)}
  .window{display:grid; gap:4px; text-align:right; min-width:220px}
  @media(max-width:1100px){ .window{text-align:left} }
  .window .k{font-size:12px; line-height:16px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--mute)}
  .window .days{font-weight:600; font-size:26px; line-height:30px; color:var(--ink-deep); letter-spacing:-.01em}
  .window .range{font-size:13px; line-height:18px; color:var(--body)}
  .window .range b{color:var(--ink); font-weight:600}
  .window input.pd{font:inherit; font-size:13px; border:1px solid var(--ink); border-radius:var(--r-sm); padding:2px 6px; background:var(--canvas)}

  .equation{display:flex; align-items:stretch; gap:10px; flex-wrap:wrap; margin-bottom:24px}
  .tile{flex:1 1 170px; min-width:160px; background:var(--canvas); border:1px solid var(--canvas-soft); border-radius:var(--r-xl); padding:18px 20px}
  .tile .k{font-size:11px; line-height:16px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--body); margin-bottom:6px}
  .tile .v{font-size:22px; line-height:28px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--body)}
  .tile .m{font-size:13px; line-height:18px; color:var(--body); margin-top:4px}
  .tile.bank{background:var(--primary-pale); border-color:var(--primary-pale)}
  .tile.bank input{width:100%; font:inherit; font-size:22px; line-height:28px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums;
        border:1px solid var(--ink); border-radius:var(--r-md); padding:3px 10px; background:var(--canvas); color:var(--ink)}
  .tile.tin .v{color:var(--positive-deep)}
  .op{align-self:center; font-size:24px; color:var(--mute); flex:0 0 auto}
  @media(max-width:640px){ .op{display:none} }

  .sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:0 0 12px}
  .sec-head h2{margin:0; font-size:22px; line-height:28px; font-weight:700; letter-spacing:-.02em}
  .sec-head p{margin:0; color:var(--body); font-size:14px; line-height:20px; max-width:60ch}

  .lists{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:32px}
  @media(max-width:1200px){ .lists{grid-template-columns:1fr} }
  .lcard{background:var(--canvas); border:1px solid var(--canvas-soft); border-radius:var(--r-xl); padding:20px 16px 16px; min-height:220px;
         display:flex; flex-direction:column; transition:box-shadow .15s, border-color .15s, background .15s}
  .lcard.over{border-color:var(--ink); box-shadow:0 0 0 2px var(--ink) inset; background:var(--primary-pale)}
  .lcard h3{margin:0; font-size:17px; line-height:26px; font-weight:600; letter-spacing:-.01em; display:flex; align-items:center; gap:10px}
  .lcard h3 .dot{width:10px; height:10px; border-radius:var(--pill); flex:none}
  .cin h3 .dot{background:var(--positive)} .cmust h3 .dot{background:var(--ink)} .cwant h3 .dot{background:var(--orange)}
  .lcard .hint{font-size:13px; line-height:18px; color:var(--body); margin:2px 0 10px}
  .rows{flex:1}
  .drow{display:flex; align-items:center; gap:8px; padding:9px 2px; border-bottom:1px solid var(--canvas-soft); font-size:13px; line-height:18px; cursor:grab}
  .drow:active{cursor:grabbing} .drow.dragging{opacity:.4}
  .drow:last-child{border-bottom:0}
  .drow input[type=checkbox]{width:18px;height:18px;accent-color:var(--ink-deep);cursor:pointer;flex:none; margin:0}
  .drow .nm{flex:1; min-width:0; font-weight:500; overflow-wrap:anywhere}
  .drow .nm .who{display:inline; font-size:12px; line-height:16px; color:var(--mute); font-weight:400}
  .drow .nm .auto{display:inline-block; font-size:11px; line-height:16px; font-weight:600; color:var(--positive-deep); background:var(--primary-pale);
                  border-radius:var(--pill); padding:0 7px; margin-left:6px; vertical-align:1px}
  .dtbtn{border:0; background:none; font:inherit; font-size:12px; line-height:16px; color:var(--body); cursor:pointer;
         padding:1px 8px 1px 0; white-space:nowrap; text-decoration:underline; text-decoration-color:var(--canvas-soft); text-underline-offset:3px}
  .dtbtn:hover{color:var(--ink); text-decoration-color:var(--ink)}
  .dtbtn.late{color:var(--negative-deep); text-decoration-color:var(--negative-deep); font-weight:600}
  input.dtedit{font:inherit; font-size:12px; border:1px solid var(--ink); border-radius:var(--r-sm); padding:1px 6px; background:var(--canvas)}
  .drow input.edit{width:88px; text-align:right; font:inherit; font-size:13px; line-height:18px; font-weight:600; font-variant-numeric:tabular-nums;
      border:1px solid var(--canvas-soft); border-radius:var(--r-sm); padding:5px 7px; background:var(--canvas); color:var(--ink)}
  .drow input.edit:hover{border-color:var(--mute)}
  .drow input.edit:focus{outline:2px solid var(--ink); outline-offset:0; border-color:var(--ink)}
  .drow.off .nm,.drow.off input.edit{color:var(--mute); text-decoration:line-through}
  .drow .ico{border:0; background:none; color:var(--mute); font-size:13px; cursor:pointer; width:24px; height:24px; border-radius:var(--pill); flex:none; display:grid; place-items:center}
  .drow .ico:hover{color:var(--ink); background:var(--canvas-soft)}
  .emptyrow{padding:22px 4px; color:var(--mute); font-size:13px; text-align:center; border:1px dashed var(--canvas-soft); border-radius:var(--r-lg)}
  .lcard.over .emptyrow{border-color:var(--ink); color:var(--ink)}
  .subtotal{display:flex; justify-content:space-between; align-items:baseline; font-size:13px; line-height:18px; font-weight:600; color:var(--body); padding:12px 2px 2px;
            border-top:1px solid var(--ink); margin-top:8px}
  .subtotal .v{font-size:15px; line-height:22px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--body)}
  .cin .subtotal .v{color:var(--positive-deep)}
  .addbtn{width:100%; margin-top:10px}
  .addform{margin-top:10px; padding:12px; background:var(--canvas-soft); border-radius:var(--r-lg); display:grid; grid-template-columns:1fr 100px; gap:8px}
  .addform input,.addform select{font:inherit; font-size:13px; line-height:18px; border:1px solid var(--ink); border-radius:var(--r-md); padding:7px 10px; background:var(--canvas); color:var(--ink); width:100%}
  .addform input::placeholder{color:var(--mute)}
  .addform input.err{border-color:var(--negative); box-shadow:0 0 0 1px var(--negative)}
  .addform .full{grid-column:1/-1}
  .addform .actions{grid-column:1/-1; display:flex; gap:8px; justify-content:flex-end}

  /* ---------- projection ---------- */
  .proj{background:var(--canvas); border:1px solid var(--canvas-soft); border-radius:var(--r-xl); overflow:hidden}
  .proj>summary{list-style:none; cursor:pointer; padding:16px 20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
  .proj>summary::-webkit-details-marker{display:none}
  .proj>summary .ttl{font-size:18px; line-height:28px; font-weight:700; letter-spacing:-.01em; display:flex; align-items:center; gap:10px}
  .proj>summary .car{display:inline-block; transition:transform .15s; color:var(--mute); font-size:15px}
  .proj[open]>summary .car{transform:rotate(90deg)}
  .proj>summary .grow{flex:1}
  .pastToggle{display:inline-flex; align-items:center; gap:6px; font-size:13px; line-height:18px; color:var(--body); cursor:pointer; user-select:none}
  .pastToggle input{width:16px; height:16px; accent-color:var(--ink-deep); margin:0; cursor:pointer}
  .projbody{padding:0 20px 20px}
  .legend{display:flex; gap:18px; flex-wrap:wrap; font-size:13px; line-height:18px; color:var(--body); padding:2px 0 10px}
  .legend .it{display:inline-flex; align-items:center; gap:8px}
  .sw{width:12px; height:12px; border-radius:3px; display:inline-block}
  .ln{width:20px; height:0; border-top:3px solid var(--ink); display:inline-block; border-radius:2px}
  .ln.dash{border-top-style:dashed; border-color:var(--mute)}
  canvas{width:100%; height:240px; display:block}
  .scroller{overflow-x:auto; margin-top:14px; border:1px solid var(--canvas-soft); border-radius:var(--r-lg)}
  table.grid{border-collapse:separate; border-spacing:0; width:100%; font-size:13px; line-height:18px; font-variant-numeric:tabular-nums; min-width:820px}
  .grid .grp th{font-size:11px; line-height:16px; letter-spacing:.06em; text-transform:uppercase; color:var(--body); font-weight:600; background:var(--canvas-soft); padding:8px 10px 2px; text-align:center}
  .grid .grp .act{border-right:2px solid var(--canvas)}
  .grid .cols th{font-weight:600; color:var(--ink); padding:2px 10px 8px; text-align:right; white-space:nowrap; background:var(--canvas-soft)}
  .grid .cols th.cat{text-align:left; min-width:200px}
  .grid .cols th .sub{display:block; font-weight:400; font-size:11px; line-height:16px; color:var(--body)}
  .grid th.today,.grid td.today{background:var(--primary-pale)}
  .grid th.wk,.grid td.wk{background:#f5f6f3; color:var(--mute)}
  .grid tr.ending td.wk{background:#dfe3dc}
  .grid .cols th.today{color:var(--ink-deep)}
  .paytag{display:block; font-size:11px; line-height:16px; letter-spacing:.06em; color:var(--ink); font-weight:700; text-transform:uppercase}
  .todaytag{display:block; font-size:11px; line-height:16px; letter-spacing:.06em; color:var(--positive-deep); font-weight:700; text-transform:uppercase}
  .grid tbody td{padding:7px 10px; text-align:right; border-bottom:1px solid var(--canvas-soft); white-space:nowrap; color:var(--body); font-size:12px}
  .grid tbody td:first-child{text-align:left; color:var(--ink); font-size:13px}
  .grid tr.balance td{font-weight:600; color:var(--ink); font-size:13px}
  .grid tr.parent td{cursor:pointer; font-weight:500; color:var(--body)}
  .grid tr.parent td:first-child{font-weight:600}
  .grid tr.quiet td{color:var(--mute); font-weight:400; font-size:12px; cursor:default; padding:6px 10px}
  .grid tr.quiet td:first-child{font-size:12px; font-weight:400; color:var(--mute)}
  .grid tr.quiet:hover td{background:transparent}
  .grid .dot{color:#d5d9d2}
  .grid tr.parent:hover td{background:var(--canvas-soft)} .grid tr.parent:hover td.today{background:var(--primary-neutral)}
  .grid tr.parent td:first-child .chev{display:inline-block; width:16px; color:var(--mute); transition:transform .12s}
  .grid tr.parent.open td:first-child .chev{transform:rotate(90deg)}
  .catbar{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:10px; vertical-align:-1px}
  .grid tr.child td{font-weight:400}
  .grid tr.child td:first-child{padding-left:40px; color:var(--body)}
  .whotd{font-size:11px; color:var(--mute); margin-left:8px}
  .grid tr.net td{font-weight:600; border-top:1px solid var(--ink); color:var(--ink)}
  .grid tr.ending td{font-weight:700; color:var(--ink); border-bottom:0; background:var(--canvas-soft); font-size:13px}
  .grid tr.ending td.today{background:var(--primary-neutral)}
  .grid td.negc{color:var(--negative-deep)} .grid td.posc{color:var(--positive-deep)}
  .empty{color:var(--canvas-soft)}
  .foot{font-size:12px; line-height:16px; color:var(--mute); padding-top:10px}
  .loading{position:fixed; inset:0; background:var(--canvas); z-index:20; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; transition:opacity .25s}
  .loading.out{opacity:0; pointer-events:none}
  .loading .brand{margin:0; font-size:22px}
  .loading .bar{width:220px; height:6px; border-radius:var(--pill); background:var(--canvas-soft); overflow:hidden}
  .loading .bar span{display:block; height:100%; width:40%; border-radius:var(--pill); background:var(--primary); animation:slide 1.1s ease-in-out infinite}
  @keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}
  .loading .msg{color:var(--body); font-size:14px}
  @media(prefers-reduced-motion:reduce){ .loading .bar span{animation:none; width:100%} }
  .toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(12px); opacity:0; pointer-events:none;
         background:var(--ink); color:var(--canvas); padding:12px 20px; border-radius:var(--r-xl); font-size:14px; line-height:20px; font-weight:600;
         transition:opacity .2s, transform .2s; max-width:90vw; text-align:center; z-index:10}
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
  @media(prefers-reduced-motion:reduce){ *{transition:none!important} }

  /* ===================== ink pass: one black figure per block, everything else grey ===================== */
  .eq{display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--canvas); border:1px solid var(--canvas-soft); border-radius:var(--r-lg); padding:10px 18px; margin-bottom:24px}
  .eq .cell{display:flex; flex-direction:column; gap:0; flex:1 1 120px; min-width:110px}
  .eq .cell.bank{flex:0 0 auto; background:var(--primary-pale); border-radius:var(--r-md); padding:6px 12px; margin:-2px 0}
  .eq .k{font-size:11px; line-height:14px; color:var(--mute); font-weight:500}
  .eq .v{font-size:18px; line-height:24px; font-weight:600; color:var(--body); font-variant-numeric:tabular-nums}
  .eq .m{font-size:11px; line-height:14px; color:var(--mute); min-height:0}
  .eq .m:empty{display:none}
  .eq .cell.bank input{font:inherit; font-size:18px; line-height:24px; font-weight:600; width:132px; border:1px solid var(--body); border-radius:var(--r-sm); padding:1px 8px; background:var(--canvas); color:var(--ink); font-variant-numeric:tabular-nums}
  .eq .cell.bank input:focus{outline:2px solid var(--ink); outline-offset:1px}
  .eq .op{color:var(--mute); font-size:18px; flex:0 0 auto}
  @media(max-width:700px){ .eq .op{display:none} }
  /* headings: lighter */
  .lhead h2,.debts h2{font-size:18px; font-weight:600}
  .sec-head h2{font-size:20px; font-weight:600}
  .sec-head p{color:var(--mute); font-size:13px}
  .proj>summary .ttl{font-weight:600}
  .lcard h3{font-size:16px; font-weight:600; color:var(--ink); margin-bottom:10px; cursor:help}
  .lcard .hint{display:none}
  .lhead .sub,.debts .sub{color:var(--mute)}
  .debts .dhead{padding-bottom:6px}
  /* small caps → plain small grey */
  .tile .k,.window .k,table.dtable th,.grid .grp th,.grid .cols th .sub,.debts .dhead .k{text-transform:none; letter-spacing:0; font-size:12px; font-weight:500; color:var(--mute)}
  table.dtable th{padding:6px 12px; background:var(--canvas); border-bottom:1px solid var(--canvas-soft)}
  table.tx tr.grp td{text-transform:none; letter-spacing:0; font-size:12px; font-weight:600; padding:5px 12px}
  table.tx tr.grp td .cnt{color:inherit; opacity:.6}
  table.tx tr.grp td .sum{color:inherit}
  table.tx tr.day td{color:var(--mute); font-weight:500}
  table.tx tr.day td .dsum{font-weight:500}
  /* ledger figures: grey; red only when overdue */
  table.tx td.main .nm{font-weight:500; color:var(--body)}
  table.tx td.side .amt{font-weight:500; color:var(--body)}
  table.tx td.side .amt.neg{color:var(--body)}
  table.tx td.side .amt.late{color:var(--negative-deep)}
  table.tx tr.filed td .amt{color:var(--mute)}
  /* columns: names 400, amounts grey; only the subtotal is black */
  .drow .nm{font-weight:400; color:var(--body)}
  .drow input.edit{font-weight:500; color:var(--body); border-color:transparent; background:transparent}
  .drow input.edit:hover{border-color:var(--canvas-soft); background:var(--canvas)}
  .subtotal{color:var(--mute); font-weight:500}
  .subtotal .v{color:var(--ink); font-weight:600; font-size:15px}
  .cin .subtotal .v{color:var(--ink)}
  /* projection: only Ending balance in black */
  .grid tbody td{color:var(--mute); font-weight:400}
  .grid tbody td:first-child{color:var(--body); font-weight:500}
  .grid tr.balance td{color:var(--body); font-weight:500}
  .grid tr.net td{color:var(--body); font-weight:500}
  .grid td.negc,.grid td.posc{color:var(--mute)}
  .grid tr.ending td{color:var(--ink); font-weight:700}
  .grid tr.ending td.negc{color:var(--negative-deep)}
  .grid tr.parent td:first-child{font-weight:500}
  .grid .cols th{font-weight:500; color:var(--body)}
  .grid .cols th.today{color:var(--ink); font-weight:600}
  .todaytag,.paytag{font-weight:600}
  /* debts: balances grey, name 500; total in black */
  table.dtable td.nm{font-weight:500; color:var(--body)}
  table.dtable tr.planned td.nm{font-weight:600; color:var(--ink)}
  table.dtable td.balv{font-weight:500; color:var(--body)}
  table.dtable tfoot td{color:var(--body); font-weight:500}
  table.dtable tfoot td:nth-child(2){color:var(--ink); font-weight:600}
  /* hero: keep the one big black number; support text grey */
  .hero .eyebrow{color:var(--mute); font-weight:500}
  .hero .verdict{color:var(--body); font-size:14px}
  .window .days{color:var(--body); font-weight:600}
  .window .range{color:var(--mute)} .window .range b{color:var(--body); font-weight:500}
  .badge.pos{background:transparent; color:var(--positive-deep); padding-left:0}
  .badge.warn{background:transparent; color:var(--warning-deep); padding-left:0}
  .badge.neg{background:transparent; color:var(--negative-deep); padding-left:0}
  .badge.sage{background:transparent; color:var(--mute); padding-left:0}
  /* chips & suggestions quieter */
  table.tx td.side .tag{font-weight:500}
  .chip{font-weight:500}
  .seg button{font-weight:500}
  .btn{font-weight:600}
  .badge{font-weight:500}
  .lfoot{color:var(--mute)}

/* ===================== pages & nav ===================== */
.topnav{display:flex; align-items:center; gap:24px; padding:14px 24px; max-width:1680px; margin:0 auto}
.topnav .brand{margin:0; text-decoration:none; color:var(--ink); font-size:16px}
.topnav .links{display:flex; gap:4px; margin-left:8px}
.topnav .links a{text-decoration:none; color:var(--body); font-size:14px; line-height:20px; font-weight:500; padding:6px 14px; border-radius:var(--pill)}
.topnav .links a:hover{background:var(--canvas-soft); color:var(--ink)}
.topnav .links a.on{background:var(--ink); color:var(--canvas)}
.topnav .navcnt:empty{display:none}
.topnav .navcnt{display:inline-block; min-width:18px; padding:0 6px; border-radius:var(--pill); background:var(--primary); color:var(--ink); font-size:11px; line-height:18px; font-weight:600; text-align:center; margin-left:4px}
.topnav .links a.on .navcnt{background:var(--primary)}
.topnav .navsync{margin-left:auto; font-size:12px; color:var(--mute)}
.page.one{max-width:1520px; margin:0 auto; padding:8px 24px 64px}
@media(max-width:640px){ .page.one{padding:8px 16px 48px} .topnav{padding:12px 16px; gap:12px; flex-wrap:wrap} .topnav .navsync{display:none} }
.debts{margin-top:0}
.quick{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:24px}
@media(max-width:760px){ .quick{grid-template-columns:1fr} }
.qcard{display:flex; flex-direction:column; gap:2px; background:var(--canvas); border:1px solid var(--canvas-soft); border-radius:var(--r-lg); padding:14px 18px; text-decoration:none; color:inherit; min-width:0}
a.qcard:hover{border-color:var(--body)}
.qcard .qk{font-size:12px; line-height:16px; color:var(--mute); font-weight:500}
.qcard .qv{font-size:20px; line-height:26px; font-weight:600; color:var(--body); font-variant-numeric:tabular-nums}
.qcard.hot .qv{color:var(--ink)}
.qcard .qm{font-size:12px; line-height:16px; color:var(--mute); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.shell{padding-top:8px}

/* ===================== overview: use the width ===================== */
.ov-top{display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin-bottom:20px}
.ov-top .hero{margin-bottom:0}
.ov-top .quick{margin-bottom:0}
@media(min-width:1280px){
  .ov-top{grid-template-columns:minmax(0,2fr) minmax(340px,1fr); align-items:stretch}
  .ov-top .quick{grid-template-columns:1fr; gap:12px}
  .ov-top .qcard{justify-content:center; padding:16px 20px}
  .ov-top .qcard .qv{font-size:22px; line-height:28px}
  .hero{padding:40px 40px 36px}
}
.eq{margin-bottom:20px}

/* ===================== hero: centred content, verdict on one line ===================== */
.hero{align-items:center; align-content:center}
.hero>div:first-child{display:flex; flex-direction:column; justify-content:center}
.hero .verdict{display:block}
.hero .verdict .badge{display:inline-flex; margin-right:8px; vertical-align:baseline}
.hero .big{margin-bottom:14px}
.hero .alt{margin-top:6px}
.window{align-self:center}
@media(min-width:1280px){ .hero{padding:36px 40px} }