/* Self Employed Budget — app.css — v0.1 */

:root{
  --bg:#121A2F; --surf:#1A2340; --surf2:#232E50; --line:#2A3559;
  --txt:#FFFFFF; --mut:#9AA6C4; --dim:#6E7A9C;
  --acc:#FFB020; --on-acc:#121A2F; --good:#FFC24D; --bad:#FB7185;
  --c-inc:#34D399; --c-biz:#FB7185; --c-per:#60A5FA; --c-pkt:#A78BFA;
  /* Text and bar colours for category brands, tuned to read on the dark page.
     Uber's black and Lynk's yellow cannot be used literally here — black would
     vanish and yellow at full strength is glaring, so each gets a legible
     stand-in that still reads as that brand. */
  --ink-green:#34D399; --ink-amber:#FFC24D; --ink-red:#FF7A6E;
  --ink-black:#C7D2E5;  --ink-blue:#5AC8FA;  --ink-purple:#A78BFA;
  --ink-pink:#FB7185;   --ink-teal:#2DD4BF;  --ink-yellow:#FFD400;
  --dspl:'Plus Jakarta Sans',system-ui,sans-serif;
  --body:'Plus Jakarta Sans',system-ui,sans-serif;
  --mono:'Plus Jakarta Sans',system-ui,sans-serif;
  --r:14px;
  --css-version:'1.12.2';
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}
html[data-skin="day"]{
  --bg:#FAF8FF; --surf:#FFFFFF; --surf2:#F3EEFF; --line:#EBE4F8;
  --txt:#1C1027; --mut:#8C7FA6; --dim:#A99CC4;
  --acc:#6D28D9; --on-acc:#FFFFFF; --good:#3F7A2E; --bad:#E11D48;
  --c-inc:#059669; --c-biz:#E11D48; --c-per:#2563EB; --c-pkt:#7C3AED;
  /* Darkened from the obvious mid-tones: green, blue and teal at their usual
     brightness only reached 3.7–4.1:1 on white, which is below the readable
     threshold. These clear it with room to spare. */
  --ink-green:#047857; --ink-amber:#B45309; --ink-red:#DC2626;
  --ink-black:#1F2937;  --ink-blue:#0369A1;  --ink-purple:#7C3AED;
  --ink-pink:#BE123C;   --ink-teal:#0F766E;  --ink-yellow:#A16207;
  --dspl:'Plus Jakarta Sans',system-ui,sans-serif;
  --body:'Plus Jakarta Sans',system-ui,sans-serif;
  --mono:'Plus Jakarta Sans',system-ui,sans-serif;
  --r:16px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* The hidden attribute only sets display:none at the lowest priority, so any
   rule that sets display — .sec uses flex — silently overrides it. This makes
   hidden mean hidden, which is what every use of it in the app assumes. */
[hidden]{display:none!important}
html{background:var(--bg)}
html,body{margin:0;padding:0;min-height:100%;overscroll-behavior-y:none}
body{background:var(--bg);color:var(--txt);font-family:var(--body);
  -webkit-font-smoothing:antialiased;text-size-adjust:100%}

/* No height declared, on purpose. A fixed element with top:0 and bottom:0
   stretches to the full viewport in every browser. Declaring any height here
   (100%, 100dvh, or a JS-measured value) breaks that stretch on iOS, because
   each of those resolves against a viewport that excludes the bottom safe area. */
/* A normal in-flow document, not a fixed-position shell. A fixed element in iOS
   standalone gets sized to the browser-with-chrome viewport and letterboxed, which
   left empty bands at both the top and the bottom. Ordinary flow has no such
   container to mis-measure: the page simply fills the screen and grows if needed. */
.app{position:relative;max-width:520px;margin:0 auto;min-height:100vh;
  display:flex;flex-direction:column;background:var(--bg)}
@supports (min-height:100dvh){ .app{min-height:100dvh} }
/* Standalone iOS: the screen is the LARGE viewport. 100dvh tracks the small one,
   which left a thin strip below the nav. lvh is the full screen, always. */
@supports (min-height:100lvh){ .app{min-height:100lvh} }
@media (min-width:560px){
  .app{border-left:1px solid var(--line);border-right:1px solid var(--line)}
}

/* header */
.top{padding:calc(12px + var(--safe-t)) 18px 2px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.eyebrow{font-family:var(--dspl);font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--mut);font-weight:600}
html[data-skin="day"] .eyebrow{letter-spacing:.12em}
.who{font-family:var(--dspl);font-size:24px;font-weight:700;line-height:1.12;margin:2px 0 0;letter-spacing:-.01em}
html[data-skin="day"] .who{font-weight:800;letter-spacing:-.03em}
.tools{display:flex;align-items:center;gap:8px}
.icobtn{width:34px;height:34px;border-radius:11px;background:var(--surf2);border:0;color:var(--mut);font-size:15px;cursor:pointer}
.avatar{min-width:34px;height:34px;padding:0 9px;border:0;border-radius:11px;background:var(--surf2);color:var(--acc);
  display:grid;place-items:center;font-size:12.5px;font-weight:800;font-family:var(--body);
  letter-spacing:.02em;cursor:pointer}
.avatar.signin{background:var(--acc);color:var(--on-acc);padding:0 12px;font-size:12px}
html[data-skin="day"] .avatar{background:var(--acc);color:#fff}

.body{flex:1 1 auto;padding:0 18px 14px}
.sheet .body{padding-bottom:calc(22px + var(--safe-b))}
.toast{bottom:calc(78px + var(--safe-b))}
.body::-webkit-scrollbar{width:0}

/* tabs */
.tabs{display:flex;gap:4px;background:var(--surf);border:1px solid var(--line);border-radius:13px;padding:4px;margin:10px 0 4px}
.tabs button{flex:1;background:none;border:0;cursor:pointer;color:var(--mut);font-family:var(--dspl);
  font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;padding:10px 2px;border-radius:9px}
html[data-skin="day"] .tabs button{font-family:var(--body);font-size:11.5px;letter-spacing:.03em}
.tabs button[aria-pressed="true"]{background:var(--acc);color:var(--on-acc)}

/* gauge */
.gauge{position:relative;display:grid;place-items:center;margin-top:2px}
.gauge svg{width:100%;max-width:250px;height:auto;display:block}
.track{stroke:var(--line);stroke-width:12;fill:none;stroke-linecap:round}
html[data-skin="day"] .track{stroke:var(--surf2)}
.fill{stroke:var(--acc);stroke-width:12;fill:none;stroke-linecap:round;
  transition:stroke-dasharray .6s cubic-bezier(.2,.8,.2,1),stroke .3s}
html[data-skin="night"] .fill{filter:drop-shadow(0 0 9px rgba(255,176,32,.42))}
.tick{stroke:var(--line);stroke-width:2;stroke-linecap:round}
html[data-skin="day"] .tick{stroke:#DCD2F0}
.tick.hot{stroke:var(--acc)}
.readout{position:absolute;text-align:center;top:50%;transform:translateY(-48%)}
.amount{font-family:var(--mono);font-size:40px;font-weight:600;letter-spacing:-.03em;line-height:1}
html[data-skin="day"] .amount{font-family:var(--dspl);font-weight:800;font-size:43px;letter-spacing:-.045em}
.of{font-family:var(--dspl);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-top:7px;font-weight:700}
html[data-skin="day"] .of{font-family:var(--body);letter-spacing:.05em}
.pct{font-family:var(--mono);font-size:12.5px;color:var(--acc);margin-top:4px}

/* stat strip */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:6px}
.cell{background:var(--surf);padding:11px 6px;text-align:center}
.cell .k{font-family:var(--dspl);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);font-weight:700}
html[data-skin="day"] .cell .k{font-family:var(--body);letter-spacing:.05em}
.cell .v{font-family:var(--mono);font-size:16px;margin-top:3px}

/* section heads */
.sec{font-family:var(--dspl);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);
  font-weight:800;margin:13px 0 7px;font-size:12px;display:flex;justify-content:space-between;align-items:center}
html[data-skin="day"] .sec{font-family:var(--dspl);font-size:14px;letter-spacing:-.02em;text-transform:none;color:var(--txt)}
.sec .edit{font-family:var(--body);font-size:11px;letter-spacing:.02em;text-transform:none;
  color:var(--acc);background:none;border:0;cursor:pointer;font-weight:600}

.monthHead{display:flex;align-items:center;justify-content:space-between;width:100%;
  background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 13px;margin:16px 0 7px;cursor:pointer;font-family:var(--body);color:var(--txt)}
.monthHead .mName{font-family:var(--dspl);font-weight:800;font-size:12.5px;letter-spacing:.04em}
.monthHead .mMeta{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:13px;color:var(--mut)}
.monthHead .chev{font-style:normal;display:inline-block;transition:transform .2s;color:var(--dim)}
.monthHead[aria-expanded="true"] .chev{transform:rotate(90deg)}

/* cards */
.card{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:12px 13px;margin-bottom:7px;transition:box-shadow .4s}
.card.flash{box-shadow:0 0 0 2px var(--acc)}
.crow{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.clab{font-family:var(--dspl);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);font-weight:700}
html[data-skin="day"] .clab{font-family:var(--body);letter-spacing:.04em;font-size:11px}
.cval{font-family:var(--mono);font-size:19px}
.cval .t{font-size:12px;color:var(--mut)}
.crange{font-size:11.5px;color:var(--dim);margin-top:3px;line-height:1.45}
.bar{height:7px;border-radius:99px;background:var(--line);margin-top:10px;overflow:hidden;position:relative}
html[data-skin="day"] .bar{background:var(--surf2)}
.bar i{display:block;height:100%;border-radius:99px;background:var(--acc);transition:width .55s cubic-bezier(.2,.8,.2,1)}
.bar .pace{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--dim);border-radius:2px}
.foot{display:flex;justify-content:space-between;margin-top:7px;font-size:11.5px;gap:8px}
.foot .p{font-weight:700}
.p.up{color:var(--good)} .p.down{color:var(--bad)}
.foot .r{color:var(--dim)}

/* week bars */
.hist{position:relative;display:flex;align-items:flex-end;gap:5px;height:132px;
  padding:0 2px;margin-top:2px}
.dayw{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;height:100%;gap:4px}
.dval{font-size:9.5px;font-weight:800;color:var(--txt);opacity:.85;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1;height:11px}
.dval.none{opacity:0}
.hb{width:100%;max-width:34px;border-radius:6px 6px 3px 3px;background:var(--surf2);
  transition:height .5s cubic-bezier(.2,.8,.2,1)}
.hb.hit{background:var(--c-inc)}
.hb.today{background:var(--acc);box-shadow:0 0 14px -2px rgba(255,176,32,.55)}
.hb.future{background:var(--line);opacity:.5}
.dl{font-size:10px;font-weight:700;color:var(--dim);line-height:1;height:12px}
.dl.now{color:var(--acc)}
.goalline{position:absolute;left:0;right:0;border-top:1px dashed var(--dim);opacity:.55;
  pointer-events:none}
.goalline span{position:absolute;right:0;top:-13px;font-size:8.5px;font-weight:700;
  color:var(--dim);background:var(--bg);padding:0 3px;letter-spacing:.02em}
.weekTot{font-family:var(--body);font-size:13px;font-weight:800;color:var(--c-inc);
  letter-spacing:-.02em;text-transform:none;font-variant-numeric:tabular-nums}

/* entry rows */
.row{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line)}
html[data-skin="day"] .row{background:var(--surf);border:0;border-radius:13px;padding:10px 12px;margin-bottom:7px}
.dot{width:33px;height:33px;border-radius:10px;display:grid;place-items:center;font-size:14px;
  background:var(--surf2);flex:0 0 auto;font-weight:700;font-family:var(--dspl)}
.rn{font-size:14px;font-weight:600}
.rs{font-family:var(--dspl);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--mut);margin-top:2px;font-weight:600}
html[data-skin="day"] .rs{font-family:var(--body);letter-spacing:.01em;text-transform:none;font-size:11.5px}
.rv{margin-left:auto;font-family:var(--mono);font-size:14.5px;color:var(--good)}
.rv.neg{color:var(--bad)}
.empty{padding:22px 4px;color:var(--mut);font-size:13.5px;line-height:1.5}
/* swipeable rows */
.swipe-wrap{position:relative;overflow:hidden;border-radius:13px}
.swipe-row{position:relative;z-index:2;background:var(--bg);transition:transform .22s ease;
  cursor:pointer;user-select:none;-webkit-user-select:none;width:100%;display:flex;align-items:center;gap:11px}
html[data-skin="day"] .swipe-row{background:var(--surf)}
.rmain{flex:1;min-width:0;text-align:left}
.rmain .rs{display:block}
.swipe-actions{position:absolute;top:0;right:0;bottom:0;display:flex;z-index:1}
.swact{width:66px;border:0;font-family:var(--body);font-size:12.5px;font-weight:700;cursor:pointer}
.swact.edit{background:var(--surf2);color:var(--acc)}
.swact.del{background:var(--bad);color:#fff}
.swipe-wrap:not(.swiped) .swipe-actions{pointer-events:none}
.sec span{font-weight:600;font-size:12px}
.danger{color:var(--bad)!important;background:transparent!important;border:1px solid var(--bad)!important}
.danger.armed{background:var(--bad)!important;color:#fff!important}

/* nav */
.nav{position:sticky;bottom:0;z-index:20;
  flex:0 0 auto;height:auto;padding:5px 6px max(calc(var(--safe-b) - 16px),6px);display:flex;
  align-items:center;justify-content:space-around;border-top:1px solid var(--line);background:var(--bg);flex:0 0 auto}
.nb{background:none;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;
  font-family:var(--dspl);font-size:10px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--dim);padding:6px}
html[data-skin="day"] .nb{font-family:var(--body);letter-spacing:.02em;font-size:10.5px}
.nb.on{color:var(--acc)}
.nb i{font-style:normal;font-size:16px}
.fab{width:52px;height:52px;border:0;cursor:pointer;display:grid;place-items:center;font-size:25px;
  background:var(--acc);color:var(--on-acc);border-radius:17px;transform:translateY(-9px);transition:transform .18s}
html[data-skin="day"] .fab{border-radius:50%}
.fab:active{transform:translateY(-6px)}

button:focus-visible,input:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* sheets */
.sheet{position:fixed;top:0;left:0;right:0;bottom:0;max-width:520px;margin:0 auto;
  background:var(--bg);display:flex;flex-direction:column;
  transform:translateY(100%) scale(.985);transform-origin:50% 100%;
  transition:transform .30s cubic-bezier(.4,0,.7,.2), visibility 0s linear .30s;
  z-index:40;visibility:hidden}
/* Opening is slower than closing on purpose: an entrance should feel like it
   settles into place, an exit should get out of the way. The expo-out curve moves
   quickly at first then eases into the last few pixels, which reads as weight
   rather than sluggishness. */
.sheet.up{transform:translateY(0) scale(1);visibility:visible;
  transition:transform .46s cubic-bezier(.16,1,.3,1), visibility 0s}
.sheet.dragging{transition:none}
/* the handle signals the sheet can be pulled down, the way native sheets do */
.sheet::before{content:'';position:absolute;top:calc(var(--safe-t) + 7px);left:50%;
  transform:translateX(-50%);width:38px;height:4px;border-radius:99px;
  background:var(--line);z-index:5;pointer-events:none}
.shead{padding:calc(18px + var(--safe-t)) 18px 4px;display:flex;align-items:center;justify-content:space-between}
.rhead{padding:calc(18px + var(--safe-t)) 18px 0;display:flex;align-items:center;justify-content:space-between}
.rhead h2{font-family:var(--dspl);font-size:24px;font-weight:700;margin:0;letter-spacing:-.01em}
html[data-skin="day"] .rhead h2{font-weight:800;letter-spacing:-.03em}
.x{background:var(--surf2);border:0;color:var(--mut);width:31px;height:31px;border-radius:10px;font-size:15px;cursor:pointer}

/* add sheet */
.seg{display:flex;gap:4px;background:var(--surf);border:1px solid var(--line);border-radius:13px;padding:4px;margin:11px 18px 0}
.seg button{flex:1;background:none;border:0;color:var(--mut);font-family:var(--dspl);font-size:11.5px;
  letter-spacing:.09em;text-transform:uppercase;font-weight:700;padding:10px 2px;border-radius:9px;cursor:pointer;line-height:1.2}
html[data-skin="day"] .seg button{font-family:var(--body);letter-spacing:.02em}
.seg button[aria-pressed="true"]{background:var(--acc);color:var(--on-acc)}
/* "expense" in full where it fits, "exp" on narrow screens */
.seg .sw{display:none}
@media (max-width:390px){
  .seg .lw{display:none}
  .seg .sw{display:inline}
  .seg button{letter-spacing:.04em;padding:10px 1px}
}

/* date row */
.daterow{display:flex;gap:7px;padding:12px 18px 0;align-items:stretch}
.dchip{flex:0 0 auto;background:var(--surf);border:1px solid var(--line);color:var(--mut);
  border-radius:11px;padding:9px 15px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:var(--body)}
.dchip[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.dpick{flex:1;position:relative;display:flex;align-items:center;justify-content:center;gap:7px;
  background:var(--surf);border:1px solid var(--line);border-radius:11px;padding:9px 12px;
  font-size:12.5px;font-weight:700;color:var(--mut);cursor:pointer;overflow:hidden}
.dpick::before{content:'📅';font-size:13px;filter:grayscale(.4)}
.dpick[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.dpick input{position:absolute;inset:0;opacity:0;width:100%;height:100%;border:0;cursor:pointer}

.quick{display:flex;gap:6px;overflow-x:auto;padding:14px 18px 0;scrollbar-width:none}
.quick::-webkit-scrollbar{height:0}
.qc{flex:0 0 auto;background:var(--surf);border:1px solid var(--line);color:var(--txt);border-radius:999px;
  padding:8px 13px;font-size:12px;cursor:pointer;white-space:nowrap;font-family:var(--body);font-weight:600}
.qc span{color:var(--mut);font-weight:400}

.disp{text-align:center;padding:16px 18px 2px}
.disp .big{font-family:var(--mono);font-size:38px;letter-spacing:-.03em}
html[data-skin="day"] .disp .big{font-family:var(--dspl);font-weight:800;font-size:46px;letter-spacing:-.05em}
.disp .hint{font-size:11.5px;color:var(--mut);margin-top:2px}

.bump{display:flex;gap:6px;padding:10px 18px 0}
.bump button{flex:1;background:var(--surf);border:1px solid var(--line);color:var(--txt);border-radius:10px;
  padding:9px 0;font-family:var(--mono);font-size:12.5px;cursor:pointer}

/* Rows must never be compressed to fit. Without flex-shrink:0 iOS squashes the
   chips and tiles to half height and slices their contents off. */
.sheet > *{flex:0 0 auto}
.sheet-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding-bottom:6px}
.sheet-scroll::-webkit-scrollbar{width:0}
.sheet-scroll > *{flex:0 0 auto}
.sheet > .body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
html.locked,html.locked body{overflow:hidden}
.quick,.disp,.bump,.mid,.pad,.tiles,.pills,.mlab{flex:0 0 auto}
.mid{overflow:visible;scrollbar-width:none}
.mid::-webkit-scrollbar{width:0}
.mlab{font-family:var(--dspl);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--mut);font-weight:700;padding:9px 18px 5px}
html[data-skin="day"] .mlab{font-family:var(--body);letter-spacing:.04em}
.tiles{display:flex;gap:7px;overflow-x:auto;padding:14px 18px 2px;scrollbar-width:none}
.tiles::-webkit-scrollbar{height:0}
.tile{flex:0 0 76px;background:var(--surf);border:1px solid var(--line);border-radius:13px;padding:9px 4px;
  cursor:pointer;text-align:center;color:var(--txt);font-family:var(--body)}
.tile .ic{font-size:17px;display:block;margin-bottom:4px;font-weight:800;font-family:var(--dspl)}
.tile .tl{font-size:10.5px;line-height:1.2;color:var(--mut);font-weight:600}
.tile[aria-pressed="true"]{background:var(--acc);border-color:var(--acc)}
.tile[aria-pressed="true"] .tl,.tile[aria-pressed="true"] .ic{color:var(--on-acc)}

.pills{display:flex;gap:6px;overflow-x:auto;padding:12px 18px 2px;scrollbar-width:none}
.pills::-webkit-scrollbar{height:0}
.pill{flex:0 0 auto;background:var(--surf);border:1px solid var(--line);color:var(--mut);border-radius:999px;
  padding:8px 13px;font-size:12px;cursor:pointer;font-family:var(--body);font-weight:600;white-space:nowrap}
.pill[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}

.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:8px 18px 0}
.key{background:var(--surf);border:1px solid var(--line);color:var(--txt);font-family:var(--mono);
  font-size:18px;padding:10px 0;border-radius:11px;cursor:pointer}
.key:active{background:var(--surf2)}

.save{padding:15px;border:0;border-radius:14px;background:var(--acc);color:var(--on-acc);
  font-family:var(--dspl);font-size:15px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;cursor:pointer}
html[data-skin="day"] .save{font-family:var(--body);letter-spacing:.01em;font-size:14.5px;border-radius:16px}
#save{margin:8px 18px max(calc(var(--safe-b) - 6px),10px)}
.save.ghost{background:var(--surf2);color:var(--acc)}

/* reports */
.rnav{display:flex;align-items:center;justify-content:space-between;margin:10px 0 4px;
  background:var(--surf);border:1px solid var(--line);border-radius:11px;padding:8px 10px}
.rnav button{background:none;border:0;color:var(--acc);font-size:16px;cursor:pointer;padding:2px 10px;line-height:1}
.rnav button[disabled]{color:var(--dim)}
.rnav .when{font-family:var(--dspl);font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;color:var(--txt)}
html[data-skin="day"] .rnav .when{font-family:var(--body);letter-spacing:.02em}

.flow{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:15px 15px 17px;margin-top:6px}
.fl{margin-bottom:13px}
.fl:last-child{margin-bottom:0}
.flt{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.flt .l{font-size:12.5px;color:var(--mut);font-weight:600}
.flt .n{font-family:var(--mono);font-size:16px;color:var(--txt)}
.flb{height:9px;border-radius:99px;margin-top:6px;background:var(--acc);transition:width .5s}
.flb.cost{background:var(--bad);opacity:.85}
.flb.mid2{background:var(--acc);opacity:.6}
.flb.take{background:var(--good)}
.fl.key{border-top:1px solid var(--line);padding-top:12px}
.fl.key .l{color:var(--txt);font-weight:700;font-size:13px}
.fl.key .n{font-size:19px}
.fl.final .l{font-family:var(--dspl);font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--mut);font-weight:700}
html[data-skin="day"] .fl.final .l{font-family:var(--body);letter-spacing:.04em;font-size:11.5px}
.fl.final .n{font-family:var(--mono);font-size:30px;color:var(--good);letter-spacing:-.02em}
html[data-skin="day"] .fl.final .n{font-family:var(--dspl);font-weight:800;font-size:32px;letter-spacing:-.04em}
.pctag{font-size:10.5px;color:var(--dim);margin-top:5px;line-height:1.45}

.brk{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:6px 14px;margin-bottom:8px}
.br{padding:10px 0;border-bottom:1px solid var(--line)}
.br:last-child{border-bottom:0}
.brt{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.brt .l{font-size:13px;font-weight:600}
.brt .n{font-family:var(--mono);font-size:14px}
.brt .s{font-size:11px;color:var(--dim);margin-left:6px}
.brb{height:5px;border-radius:99px;background:var(--line);margin-top:6px;overflow:hidden}
html[data-skin="day"] .brb{background:var(--surf2)}
.brb i{display:block;height:100%;border-radius:99px;background:var(--acc);transition:width .5s}
.brb.cost i{background:var(--bad)}

.exp{display:flex;gap:7px;margin:12px 0 6px}
.exp button{flex:1;background:var(--surf);border:1px solid var(--line);color:var(--txt);border-radius:12px;
  padding:12px 4px;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--body)}

/* modal */
.modal{position:fixed;top:0;left:0;right:0;bottom:0;max-width:520px;margin:0 auto;
  background:rgba(0,0,0,.55);z-index:60;display:flex;align-items:flex-end;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .26s ease, visibility 0s linear .26s;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.modal.on{opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .26s ease, visibility 0s}
.mbox{width:100%;background:var(--bg);border-radius:24px 24px 0 0;
  padding:20px 18px calc(26px + var(--safe-b));border-top:1px solid var(--line);
  transform:translateY(18px) scale(.98);opacity:.6;
  transition:transform .34s cubic-bezier(.16,1,.3,1), opacity .24s ease}
.modal.on .mbox{transform:translateY(0) scale(1);opacity:1;
  transition:transform .44s cubic-bezier(.16,1,.3,1) .04s, opacity .28s ease .04s}
.mbox h4{font-family:var(--dspl);font-size:17px;margin:0 0 3px;font-weight:700}
.mbox p{margin:0 0 14px;font-size:12px;color:var(--mut)}
.trow{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line)}
.trow.last{border-bottom:0}
.trow label{font-size:13.5px;font-weight:600}
.trow input{width:110px;background:var(--surf);border:1px solid var(--line);color:var(--txt);
  font-family:var(--mono);font-size:15px;padding:9px 10px;border-radius:10px;text-align:right}
/* pull to refresh */
.ptr{position:absolute;top:calc(var(--safe-t) + 62px);left:0;right:0;display:flex;justify-content:center;
  pointer-events:none;z-index:15;opacity:0;transform:translateY(-6px);transition:opacity .18s,transform .18s}
.ptr.on{opacity:1;transform:translateY(0)}
.ptrpill{display:flex;align-items:center;gap:9px;background:var(--surf);border:1px solid var(--line);
  border-radius:999px;padding:9px 16px;font-size:12px;font-weight:700;color:var(--mut);
  box-shadow:0 8px 20px -10px rgba(0,0,0,.6)}
.spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--acc);flex:0 0 auto}
.spin.go{animation:ptrspin .8s linear infinite}
@keyframes ptrspin{to{transform:rotate(360deg)}}
#homeBody{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
#homeBody.pulling{transition:none}

/* Google button — Google's brand guidelines require their mark unmodified,
   on a plain surface, with the wording "Continue with Google". */
.gbtn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  background:#fff;color:#1F1F1F;border:1px solid #DADCE0;border-radius:14px;
  padding:14px 16px;font-family:var(--body);font-size:15px;font-weight:700;cursor:pointer;margin-top:2px}
.gbtn svg{width:19px;height:19px;flex:0 0 auto}
.gbtn:active{background:#F1F3F4}
.gbtn:disabled{opacity:.6}
.ordiv{display:flex;align-items:center;gap:10px;margin:14px 0 12px;color:var(--dim);
  font-size:11.5px;font-weight:700}
.ordiv::before,.ordiv::after{content:'';flex:1;height:1px;background:var(--line)}

/* auth form fields */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:11px}
.field label{font-size:11.5px;font-weight:700;color:var(--mut);letter-spacing:.04em}
.field input,.field textarea{background:var(--surf);border:1px solid var(--line);color:var(--txt);
  font-family:var(--body);font-size:16px;font-weight:600;padding:13px 14px;border-radius:12px;width:100%}
.field textarea{font-weight:500;resize:vertical;box-sizing:border-box}
.field input::placeholder,.field textarea::placeholder{color:var(--dim);font-weight:500}
.field input:focus,.field textarea:focus{outline:2px solid var(--acc);outline-offset:1px}
#authErr{margin:2px 0 0;font-size:12.5px;color:var(--bad);font-weight:700;min-height:16px}
#fbErr{margin:2px 0 0;font-size:12.5px;color:var(--bad);font-weight:700;min-height:16px}

/* install guide steps */
.steps{list-style:none;margin:4px 0 0;padding:0}
.steps li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.5;color:var(--txt);font-weight:500}
.steps li:last-child{border-bottom:0}
.stepno{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--acc);color:var(--on-acc);
  display:grid;place-items:center;font-size:12px;font-weight:800;margin-top:1px}
.steps strong{font-weight:800;color:var(--acc)}
.glyph{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;
  background:var(--surf2);font-size:12px;vertical-align:-5px;margin:0 2px}
#iosNote{margin:12px 0 0;font-size:12px;color:var(--bad);font-weight:600}

.trow input[type="text"]{text-align:center;letter-spacing:.08em;width:130px}
.save.danger{background:var(--bad);color:#fff}
.save.danger:disabled{opacity:.35;cursor:default}

/* toast */
.toast{position:fixed;left:50%;transform:translate(-50%,14px) scale(.96);bottom:calc(78px + var(--safe-b));
  background:var(--txt);color:var(--bg);padding:11px 17px;border-radius:999px;font-size:12.5px;font-weight:600;
  opacity:0;transition:opacity .24s ease, transform .34s cubic-bezier(.16,1,.3,1);z-index:70;pointer-events:none;max-width:88%;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0) scale(1)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* ============================================================
   Type system — Plus Jakarta Sans throughout.
   Barlow Condensed was narrow, so labels carried wide letter-spacing to fill
   the line. This face is wider and much heavier, so the tracking comes back in
   and the weights go up. Figures use tabular numerals so money columns align.
   ============================================================ */
body{font-weight:500}
.amount,.cval,.cell .v,.rv,.disp .big,.flt .n,.brt .n,.pct,.key,.trow input{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

.eyebrow{letter-spacing:.10em;font-weight:700;font-size:11px}
.who{font-weight:800;letter-spacing:-.03em;font-size:26px}
.tabs button{letter-spacing:.02em;font-weight:700;font-size:12.5px}
.amount{font-weight:800;letter-spacing:-.035em;font-size:42px}
.of{letter-spacing:.06em;font-weight:700;font-size:11.5px}
.pct{font-weight:700;font-size:12.5px}
.cell .k{letter-spacing:.05em;font-weight:700;font-size:10.5px}
.cell .v{font-weight:700;font-size:16.5px}
.sec{letter-spacing:.06em;font-weight:800;font-size:12px}
.clab{letter-spacing:.05em;font-weight:700;font-size:11px}
.cval{font-weight:700}
.crange{font-weight:500}
.foot .p{font-weight:700}
.dl{letter-spacing:0;font-weight:700}
.rn{font-weight:700;font-size:14.5px}
.rs{letter-spacing:.01em;text-transform:none;font-weight:600;font-size:11.5px}
.rv{font-weight:700}
.dot{font-weight:800}
.nb{letter-spacing:.01em;font-weight:700;font-size:10.5px}
.rhead h2{font-weight:800;letter-spacing:-.03em}
.seg button{letter-spacing:.01em;font-weight:700;font-size:12px}
.dchip,.dpick,.pill,.qc,.tile .tl{font-weight:700}
.disp .big{font-weight:800;letter-spacing:-.04em;font-size:42px}
.key{font-weight:700}
.save{letter-spacing:.02em;font-weight:800;font-size:15px}
.rnav .when{letter-spacing:.02em;font-weight:700}
.flt .l{font-weight:600}
.flt .n{font-weight:700}
.fl.key .l{font-weight:800}
.fl.final .l{letter-spacing:.05em;font-weight:700;font-size:11.5px}
.fl.final .n{font-weight:800;letter-spacing:-.035em}
.brt .l{font-weight:700}
.brt .n{font-weight:700}
.mbox h4{font-weight:800;letter-spacing:-.02em;font-size:18px}
.trow label{font-weight:700}
.toast{font-weight:700}


/* ============================================================
   HOME — hero, stat cards, breakdown, quick add
   ============================================================ */
.c-inc{color:var(--c-inc)} .c-biz{color:var(--c-biz)}
.c-per{color:var(--c-per)} .c-pkt{color:var(--c-pkt)}

/* hero */
.hero{display:flex;gap:12px;align-items:center;margin-top:8px;padding:12px 13px 11px;
  border-radius:20px;border:1px solid var(--line);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255,176,32,.16) 0%, transparent 58%),
    linear-gradient(160deg, var(--surf) 0%, var(--bg) 100%)}
.heroL{flex:1;min-width:0}
.heroLab{font-size:12.5px;font-weight:700;color:var(--mut)}
.heroAmt{margin-top:4px;font-size:32px;font-weight:800;letter-spacing:-.04em;color:var(--acc);
  font-variant-numeric:tabular-nums;line-height:1.05}
.heroOf{font-size:17px;color:var(--mut);font-weight:700;letter-spacing:-.02em}
.heroDone{margin-top:5px;font-size:12.5px;font-weight:700;color:var(--c-inc)}
.heroDone.hit{color:var(--acc)}
.heroBar{height:8px;border-radius:99px;background:var(--surf2);margin-top:11px;overflow:hidden}
.heroBar i{display:block;height:100%;border-radius:99px;background:var(--acc);
  transition:width .55s cubic-bezier(.2,.8,.2,1)}
.heroFoot{display:flex;justify-content:space-between;gap:8px;margin-top:9px;font-size:12px;color:var(--mut);font-weight:600}
.heroFoot b{color:var(--c-inc);font-weight:800}

.heroR{position:relative;width:104px;height:104px;flex:0 0 auto}
.heroR svg{width:100%;height:100%;display:block}
.ringTrack{fill:none;stroke:var(--surf2);stroke-width:11}
.ringFill{fill:none;stroke:var(--acc);stroke-width:11;stroke-linecap:round;
  transition:stroke-dasharray .6s cubic-bezier(.2,.8,.2,1)}
.ringMid{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ringPct{font-size:22px;font-weight:800;letter-spacing:-.03em;color:var(--txt);font-variant-numeric:tabular-nums}
.ringSub{font-size:9.5px;font-weight:700;color:var(--mut);margin-top:1px}

/* stat cards */
/* Flex rather than grid. Grid stretching was being overridden somewhere and the
   middle card kept centring itself in the row instead of filling it; a flex row
   with equal basis and explicit stretch leaves nothing to interpret. */
.stats{display:flex;gap:8px;margin-top:9px;align-items:stretch}
.stat{flex:1 1 0;min-width:0;height:106px;
  border-radius:16px;border:1px solid transparent;padding:10px 7px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  text-align:center;overflow:hidden;box-sizing:border-box}
.stat.inc{background:rgba(52,211,153,.13);  border-color:rgba(52,211,153,.30)}
.stat.exp{background:rgba(251,113,133,.13); border-color:rgba(251,113,133,.30)}
.stat.net{background:rgba(96,165,250,.13);  border-color:rgba(96,165,250,.30)}
html[data-skin="day"] .stat.inc{background:rgba(5,150,105,.10);  border-color:rgba(5,150,105,.24)}
html[data-skin="day"] .stat.exp{background:rgba(225,29,72,.10);  border-color:rgba(225,29,72,.24)}
html[data-skin="day"] .stat.net{background:rgba(37,99,235,.10);  border-color:rgba(37,99,235,.24)}

.statName{font-size:12px;font-weight:700;color:var(--txt);opacity:.85;line-height:1.2;
  max-width:100%;overflow-wrap:break-word;hyphens:none}
.statVal{font-size:19px;font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums;
  line-height:1.1;white-space:nowrap;max-width:100%}
.statMeta{font-size:11px;font-weight:600;color:var(--txt);opacity:.6;line-height:1.2}
.stat.inc .statVal{color:var(--c-inc)}
.stat.exp .statVal{color:var(--c-biz)}
.stat.net .statVal{color:var(--c-per)}
.statVal.long{font-size:17px}
.statVal.xlong{font-size:14.5px;letter-spacing:-.045em}

/* breakdown */
.bd{padding:11px 12px}
.bdTop{display:flex;gap:12px;align-items:center}
.donutWrap{position:relative;width:116px;height:116px;flex:0 0 auto}
.donutWrap svg{width:100%;height:100%;display:block}
.donutTrack{fill:none;stroke:var(--surf2);stroke-width:15}
.donutSeg{fill:none;stroke-width:15;transition:stroke-dasharray .5s}
.donutSeg.c-biz{stroke:var(--c-biz)} .donutSeg.c-per{stroke:var(--c-per)} .donutSeg.c-pkt{stroke:var(--c-pkt)}
.donutMid{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.donutVal{font-size:20px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--c-pkt);line-height:1.05}
.donutVal.neg{color:var(--c-biz)}
.donutSub{font-size:9px;font-weight:700;color:var(--mut);margin-top:2px;line-height:1.2;max-width:80px}
.bdRows{flex:1;min-width:0}
.bdRow{display:flex;align-items:center;gap:8px;padding:6px 0}
.bdDot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:currentColor}
.bdName{flex:1;min-width:0;font-size:12px;font-weight:700;color:var(--txt);opacity:.9;
  line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bdVal{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;flex:0 0 auto;white-space:nowrap}
.bdPct{font-size:10.5px;font-weight:700;color:var(--mut);width:32px;text-align:right;flex:0 0 auto}

/* quick add */
.qacts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.qact{background:var(--surf);border:1px solid var(--line);border-radius:16px;padding:9px 4px 8px;
  cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:7px;font-family:var(--body)}
.qicon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:17px;
  background:color-mix(in srgb, currentColor 18%, transparent)}
.qlab{font-size:10.5px;font-weight:700;color:var(--mut);line-height:1.2;text-align:center}
@supports not (background: color-mix(in srgb, red 10%, blue)){ .qicon{background:var(--surf2)} }


/* ============================================================
   Source chips and payment icons
   ============================================================ */
.chip{width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;
  font-size:13px;font-weight:800;line-height:1;vertical-align:middle;flex:0 0 auto}
.chip svg{width:15px;height:15px;display:block}
.c-income {background:rgba(52,211,153,.22); color:#34D399}
.c-freenow{background:#E8362D; color:#fff}
.c-uber   {background:#0B0B0B; color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.c-others {background:var(--surf2); color:var(--mut)}
html[data-skin="day"] .c-income{background:rgba(5,150,105,.16);color:#059669}

/* the tile icon slot holds a chip now, so the old text sizing does not apply */
.tile .ic{display:flex;justify-content:center;align-items:center;height:26px;margin-bottom:5px}
.tile .ic:empty{display:none}

/* entry row avatars carry the same chip, centred in the existing square */
.dot{padding:0}
.dot .chip{width:24px;height:24px;font-size:12px}
.dot .chip svg{width:14px;height:14px}

/* repeat chips */
.qc .chip{width:20px;height:20px;font-size:11px;margin-right:5px}
.qc .chip svg{width:12px;height:12px}

/* payment pills */
.pill{display:inline-flex;align-items:center;gap:6px}
.pico{font-size:13px;line-height:1}


/* ============================================================
   Reports — period navigator
   ============================================================ */
.rnav{gap:4px}
.whenPick{position:relative;flex:1;display:flex;justify-content:center;align-items:center;
  padding:2px 6px;border-radius:9px;cursor:pointer}
.whenPick:active{background:var(--surf2)}
.whenPick input{position:absolute;inset:0;opacity:0;width:100%;height:100%;border:0;cursor:pointer}
.rnav button{min-width:36px;font-size:19px}
.rnav button[disabled]{opacity:.35}
.rSub{text-align:center;font-size:11.5px;font-weight:600;color:var(--dim);margin:6px 0 0}
.rToday{display:block;margin:8px auto 0;background:var(--surf2);border:1px solid var(--line);
  color:var(--acc);border-radius:999px;padding:7px 15px;font-family:var(--body);
  font-size:12px;font-weight:700;cursor:pointer}
.exp button{padding:13px 4px;font-size:12px}


/* ---------- analytics consent ---------- */
.consent{position:fixed;left:12px;right:12px;bottom:calc(12px + var(--safe-b));z-index:200;
  max-width:496px;margin:0 auto;background:var(--surf);border:1px solid var(--line);
  border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:11px;
  font-size:12.5px;font-weight:600;color:var(--mut);line-height:1.45;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.7);
  opacity:0;transform:translateY(14px);transition:opacity .3s ease,transform .4s cubic-bezier(.16,1,.3,1)}
.consent.on{opacity:1;transform:translateY(0)}
.consentBtns{display:flex;gap:8px}
.consent button{flex:1;border:1px solid var(--line);background:var(--surf2);color:var(--txt);
  border-radius:11px;padding:11px 8px;font-family:var(--body);font-size:13px;font-weight:700;cursor:pointer}
.consent button.primary{background:var(--acc);color:var(--on-acc);border-color:var(--acc)}


/* ============================================================
   Voice entry
   ============================================================ */
/* Header mic. It lives beside the theme toggle rather than in the bottom bar —
   an absolutely positioned button in there required position:relative on .nav,
   which silently cancelled its position:sticky and dropped the whole footer to
   the end of the page. */
.micHead{width:31px;height:31px;border-radius:10px;border:0;background:var(--surf2);
  color:var(--acc);display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
.top .micHead{width:34px;height:34px;border-radius:11px}
.sheadBtns{display:flex;align-items:center;gap:8px}
.micHead svg{width:17px;height:17px}
.micHead.off{display:none}

.vMic{display:grid;place-items:center;width:84px;height:84px;margin:6px auto 0;
  border-radius:50%;border:0;cursor:pointer;background:var(--surf2);color:var(--acc);
  transition:transform .2s ease, background .2s ease}
.vMic svg{width:34px;height:34px}
.vMic.live{background:var(--acc);color:var(--on-acc);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,176,32,.45)}
  50%{box-shadow:0 0 0 16px rgba(255,176,32,0)}
}
.vState{text-align:center;font-size:12.5px;font-weight:700;color:var(--mut);margin-top:12px}
.vHeard{text-align:center;font-size:15px;font-weight:600;color:var(--txt);
  margin-top:6px;min-height:22px;line-height:1.35}

.vResult{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);text-align:center}
.vAmt{font-size:38px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1}
.vMeta{margin-top:7px;font-size:12.5px;font-weight:700;color:var(--mut);
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.vDot{opacity:.5}
.vMic.off{display:none}


/* compact header — one row instead of two */
.hline{display:flex;align-items:baseline;gap:8px;min-width:0;flex-wrap:wrap}
.hline .who{font-size:19px;font-weight:800;letter-spacing:-.03em;margin:0;line-height:1.2}
.hline .eyebrow{font-size:10.5px;letter-spacing:.06em;white-space:nowrap}

/* keyboard dictation */
.vType2{margin-top:12px}
.vType2 textarea{width:100%;background:var(--surf);border:1px solid var(--line);color:var(--txt);
  font-family:var(--body);font-size:15px;font-weight:600;padding:13px;border-radius:12px;
  line-height:1.5;resize:vertical;min-height:78px}
.vType2 textarea:focus{outline:2px solid var(--acc);outline-offset:1px}
.vType2 textarea::placeholder{color:var(--dim);font-weight:500}


/* ---------- batch review ---------- */
.vBatch{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.bList{max-height:44vh;overflow-y:auto;scrollbar-width:none}
.bList::-webkit-scrollbar{width:0}
.bRow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.bRow:last-child{border-bottom:0}
.bRow.off{opacity:.38}
.bChk{width:24px;height:24px;flex:0 0 auto;border-radius:7px;border:1.5px solid var(--line);
  background:var(--surf);color:var(--acc);font-size:13px;font-weight:800;cursor:pointer;
  display:grid;place-items:center;padding:0}
.bRow:not(.off) .bChk{border-color:var(--acc)}
.bMid{flex:1;min-width:0}
.bTop{display:flex;align-items:center;gap:7px}
.bType{border:1px solid currentColor;background:transparent;border-radius:7px;padding:3px 8px;
  font-family:var(--body);font-size:10px;font-weight:800;cursor:pointer;letter-spacing:.02em}
.bType.c-inc{color:var(--c-inc)} .bType.c-biz{color:var(--c-biz)} .bType.c-per{color:var(--c-per)}
.bCat{font-size:13px;font-weight:700;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bWarn{width:15px;height:15px;border-radius:50%;background:var(--acc);color:var(--on-acc);
  font-size:10px;font-weight:800;display:grid;place-items:center;flex:0 0 auto}
.bHeard{font-size:10.5px;color:var(--dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bAmt{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;flex:0 0 auto}
#bSaveAll:disabled{opacity:.4}


/* ============================================================
   Category manager
   ============================================================ */
.catRow{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
.catRow:last-child{border-bottom:0}
.catRow.hidden{opacity:.45}
.catInfo{flex:1;min-width:0}
.catName{font-size:14px;font-weight:700;color:var(--txt)}
.catMeta{font-size:11px;font-weight:600;color:var(--dim);margin-top:2px}
.catEdit{background:var(--surf2);border:0;color:var(--acc);border-radius:9px;padding:8px 14px;
  font-family:var(--body);font-size:12px;font-weight:700;cursor:pointer;flex:0 0 auto}

.catPrev{display:flex;align-items:center;gap:10px;background:var(--surf);border:1px solid var(--line);
  border-radius:12px;padding:11px 13px}
.prevName{font-size:14px;font-weight:700;color:var(--txt)}

.mlab2{font-size:11.5px;font-weight:700;color:var(--mut);letter-spacing:.04em;margin:14px 0 8px}

.icGrid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.icPick{aspect-ratio:1;display:grid;place-items:center;background:var(--surf);
  border:1px solid var(--line);border-radius:10px;font-size:16px;cursor:pointer;color:var(--txt);padding:0}
.icPick svg{width:17px;height:17px}
.icPick[aria-pressed="true"]{border-color:var(--acc);background:var(--surf2);box-shadow:0 0 0 1px var(--acc)}

.colRow{display:flex;gap:7px;flex-wrap:wrap}
.colPick{width:38px;height:38px;border-radius:10px;border:1px solid transparent;cursor:pointer;
  font-family:var(--body);font-size:14px;font-weight:800;padding:0}
.colPick[aria-pressed="true"]{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--acc)}

#cErr{margin:10px 0 0;font-size:12.5px;color:var(--bad);font-weight:700;min-height:16px}
#cDelNote{margin:8px 0 0;font-size:11.5px;color:var(--mut);font-weight:600;line-height:1.45}
#cDelBtn:disabled{opacity:.4;cursor:default}

.mvList{max-height:46vh;overflow-y:auto;scrollbar-width:none;margin-top:12px}
.mvList::-webkit-scrollbar{width:0}
.mvOpt{width:100%;display:flex;align-items:center;gap:11px;background:var(--surf);
  border:1px solid var(--line);border-radius:12px;padding:11px 13px;margin-bottom:7px;
  cursor:pointer;font-family:var(--body);text-align:left}
.mvOpt:active{background:var(--surf2)}
.mvName{font-size:14px;font-weight:700;color:var(--txt)}


/* drag to reorder */
.catRow{touch-action:pan-y;transition:transform .18s ease,background .18s ease;
  border-radius:10px;padding-left:4px;padding-right:4px}
.catRow.dragging{background:var(--surf2);transition:none;position:relative;z-index:5;
  box-shadow:0 12px 26px -12px rgba(0,0,0,.7)}
.grip{flex:0 0 auto;width:34px;height:38px;display:grid;place-items:center;padding:0;
  background:none;border:0;color:var(--dim);cursor:grab;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.grip svg{width:16px;height:11px;fill:currentColor;pointer-events:none}
.grip:active{color:var(--acc);cursor:grabbing}
.catRow.dragging .grip{color:var(--acc)}
.catHint{font-size:11.5px;color:var(--dim);font-weight:600;margin:2px 0 8px;line-height:1.4}
.cMoveRow{display:flex;gap:8px;margin-top:12px}
.cMove{flex:1;background:var(--surf);border:1px solid var(--line);color:var(--txt);
  border-radius:11px;padding:11px 6px;font-family:var(--body);font-size:12.5px;font-weight:700;cursor:pointer}
.cMove:disabled{opacity:.35}


/* full swipe to delete */
.swipe-wrap{transition:max-height .18s ease,opacity .18s ease,margin .18s ease}
.swipe-wrap.collapsing{max-height:0!important;opacity:0;margin-bottom:0;overflow:hidden}
.swipe-actions{background:var(--bad)}
.swipe-wrap.armed .swipe-actions{background:var(--bad)}
.swipe-wrap.armed .swact.edit{opacity:0}
.swipe-wrap.armed .swact.del{width:auto;padding:0 18px}
.swipe-wrap.armed .swact.del::after{content:' — release';font-weight:600;opacity:.85}

/* undo */
.undoBar{position:fixed;left:12px;right:12px;bottom:calc(84px + var(--safe-b));z-index:150;
  max-width:496px;margin:0 auto;background:var(--txt);color:var(--bg);
  border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:12px;
  font-size:13px;font-weight:700;box-shadow:0 16px 34px -16px rgba(0,0,0,.7);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .24s ease,transform .34s cubic-bezier(.16,1,.3,1)}
.undoBar.on{opacity:1;transform:translateY(0);pointer-events:auto}
.undoBar span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.undoBar button{background:none;border:0;color:var(--acc);font-family:var(--body);
  font-size:14px;font-weight:800;cursor:pointer;padding:4px 6px;flex:0 0 auto}


/* custom range */
.rCustom{margin-top:8px}
.rDates{display:flex;gap:8px}
.rDate{flex:1;display:flex;flex-direction:column;gap:5px;background:var(--surf);
  border:1px solid var(--line);border-radius:12px;padding:9px 12px;cursor:pointer}
.rDate span{font-size:10.5px;font-weight:700;color:var(--mut);letter-spacing:.04em}
.rDate input{background:none;border:0;color:var(--txt);font-family:var(--body);
  font-size:14px;font-weight:700;padding:0;width:100%}
.rQuick{display:flex;gap:6px;overflow-x:auto;padding:9px 0 2px;scrollbar-width:none}
.rQuick::-webkit-scrollbar{height:0}
.rq{flex:0 0 auto;background:var(--surf);border:1px solid var(--line);color:var(--txt);
  border-radius:999px;padding:8px 13px;font-family:var(--body);font-size:12px;
  font-weight:700;cursor:pointer;white-space:nowrap}
.rq:active{background:var(--surf2);border-color:var(--acc)}
.rq[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
#rtabs button{font-size:11.5px;padding:10px 1px}

.jobs{display:block;font-size:10.5px;font-weight:700;color:var(--dim);margin-top:3px}


/* admin dashboard */
.aGrid{display:flex;gap:8px;margin-bottom:8px}
.aStat{flex:1 1 0;min-width:0;background:var(--surf);border:1px solid var(--line);
  border-radius:14px;padding:12px 8px;text-align:center}
.aVal{font-size:22px;font-weight:800;letter-spacing:-.03em;color:var(--acc);
  font-variant-numeric:tabular-nums;line-height:1.1}
.aLab{font-size:11px;font-weight:700;color:var(--txt);opacity:.8;margin-top:4px;line-height:1.2}
.aNote{font-size:9.5px;font-weight:600;color:var(--dim);margin-top:2px}
.aRow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.aRow:last-child{border-bottom:0}
.aRowL{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--txt);opacity:.85}
.aRowV{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.aRowV.good{color:var(--c-inc)}
.aRowX{font-size:11px;font-weight:700;color:var(--dim);width:44px;text-align:right}

.adminBtn{color:var(--c-per)}


/* ============================================================
   Reports — colour the money flow and the source rows
   ============================================================ */
.flow{padding:6px 6px 8px;background:none;border:0}
.fl{margin-bottom:8px;padding:12px 13px;border-radius:14px;border:1px solid transparent}
.fl.inc{background:rgba(52,211,153,.12);  border-color:rgba(52,211,153,.28)}
.fl.biz{background:rgba(251,113,133,.12); border-color:rgba(251,113,133,.28)}
.fl.net{background:rgba(96,165,250,.14);  border-color:rgba(96,165,250,.34)}
.fl.per{background:rgba(96,165,250,.08);  border-color:rgba(96,165,250,.20)}
.fl.pkt{background:rgba(167,139,250,.15); border-color:rgba(167,139,250,.36)}
html[data-skin="day"] .fl.inc{background:rgba(5,150,105,.09);  border-color:rgba(5,150,105,.22)}
html[data-skin="day"] .fl.biz{background:rgba(225,29,72,.09);  border-color:rgba(225,29,72,.22)}
html[data-skin="day"] .fl.net{background:rgba(37,99,235,.10);  border-color:rgba(37,99,235,.26)}
html[data-skin="day"] .fl.per{background:rgba(37,99,235,.06);  border-color:rgba(37,99,235,.16)}
html[data-skin="day"] .fl.pkt{background:rgba(124,58,237,.10); border-color:rgba(124,58,237,.26)}

.fl .flt .l{color:var(--txt);opacity:.85;font-size:12.5px;font-weight:700}
.fl.inc .n{color:var(--c-inc)}
.fl.biz .n{color:var(--c-biz)}
.fl.net .n{color:var(--c-per)}
.fl.per .n{color:var(--c-per)}
.fl.pkt .n{color:var(--c-pkt)}
.fl.key{border-top:0;padding-top:12px}
.fl.key .l{font-size:13px;font-weight:800}
.fl.final .l{font-size:12px;letter-spacing:.03em;text-transform:none;color:var(--txt);opacity:.85}
.fl.final .n{font-size:26px}

.flb{height:7px;border-radius:99px;margin-top:8px;opacity:.9}
.fl.inc .flb{background:var(--c-inc)}
.fl.biz .flb{background:var(--c-biz)}
.fl.net .flb{background:var(--c-per)}
.fl.per .flb{background:var(--c-per);opacity:.55}
.fl.pkt .flb{background:var(--c-pkt)}
.fl .pctag{margin-top:6px}

/* source rows */
.brk{padding:4px 12px}
.br{padding:11px 0}
.brHead{display:flex;align-items:center;gap:9px}
.brHead .l{flex:1;min-width:0;font-size:13.5px;font-weight:700;color:var(--txt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brRight{display:flex;align-items:baseline;gap:7px;flex:0 0 auto}
.brRight .n{font-size:14.5px;font-weight:800;font-variant-numeric:tabular-nums}
.brRight .s{font-size:11px;font-weight:700;color:var(--dim);width:32px;text-align:right}
.br .jobs{margin-left:35px;margin-top:2px}
.brb{height:5px;border-radius:99px;background:var(--line);margin-top:8px;overflow:hidden}
html[data-skin="day"] .brb{background:var(--surf2)}
.brb i{display:block;height:100%;border-radius:99px;transition:width .5s}

/* how to edit — shown once at the top of the list, not repeated per row */
.entHint{display:flex;flex-direction:column;gap:3px;margin:2px 0 10px;
  font-size:11.5px;font-weight:600;color:var(--dim);line-height:1.45}
.entHint b{color:var(--mut);font-weight:800}


/* section date + closing total */
.secWhen{font-family:var(--body);font-size:11px;font-weight:700;color:var(--dim);
  letter-spacing:0;text-transform:none;white-space:nowrap;margin-left:10px}
.brTotal{display:flex;align-items:baseline;margin-top:4px;padding:11px 0 3px;
  border-top:1.5px solid var(--line)}
.brTotal .l{font-size:12.5px;font-weight:800;color:var(--txt);opacity:.9;flex:0 0 auto}
.brJobs{font-size:11px;font-weight:700;color:var(--dim);flex:0 0 auto;white-space:nowrap}
.brSpacer{flex:1 1 auto;min-width:10px;font-size:0;color:transparent}
.brTotal .n{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;
  color:var(--c-inc);flex:0 0 auto}
.brTotal .n.cost{color:var(--c-biz)}

/* the heading wraps less now, but keep the date from crowding it */
.sec{gap:10px}
.secWhen{flex:0 0 auto}


/* ============================================================
   Breakdown cards — a faint wash so each section reads as its own block
   ------------------------------------------------------------
   Kept very low: these sit behind coloured text and bars that must stay
   legible, so the tint is enough to separate the sections without competing
   with what is on top of them. The left edge does most of the work.
   ============================================================ */
.brk{position:relative;overflow:hidden}
.brk::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px}

.brk-inc{background:rgba(52,211,153,.055);  border-color:rgba(52,211,153,.20)}
.brk-biz{background:rgba(251,113,133,.055); border-color:rgba(251,113,133,.20)}
.brk-per{background:rgba(96,165,250,.055);  border-color:rgba(96,165,250,.20)}
.brk-inc::before{background:var(--c-inc)}
.brk-biz::before{background:var(--c-biz)}
.brk-per::before{background:var(--c-per)}

html[data-skin="day"] .brk-inc{background:rgba(5,150,105,.05);  border-color:rgba(5,150,105,.18)}
html[data-skin="day"] .brk-biz{background:rgba(225,29,72,.05);  border-color:rgba(225,29,72,.18)}
html[data-skin="day"] .brk-per{background:rgba(37,99,235,.05);  border-color:rgba(37,99,235,.18)}

/* the coloured edge needs room, and the total row should clear it too */
.brk{padding-left:16px}


/* password fields */
.pwWrap{position:relative;display:flex;align-items:center}
.pwWrap input{padding-right:64px}
.pwEye{position:absolute;right:8px;background:none;border:0;color:var(--acc);
  font-family:var(--body);font-size:12.5px;font-weight:800;cursor:pointer;padding:8px 6px}
.linkBtn{background:none;border:0;color:var(--acc);font-family:var(--body);
  font-size:12.5px;font-weight:700;cursor:pointer;padding:2px 0;margin:-4px 0 8px;text-align:left}
#resetErr,#newPassErr{margin:8px 0 0;font-size:12.5px;color:var(--bad);font-weight:700;min-height:16px}


/* recurring list */
.recRow{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
.recRow:last-child{border-bottom:0}
.recRow.off{opacity:.45}
.recMid{flex:1;min-width:0}
.recName{display:flex;align-items:baseline;gap:8px;font-size:14px;font-weight:700;color:var(--txt)}
.recAmt{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.recMeta{font-size:11px;font-weight:600;color:var(--dim);margin-top:2px}
#recErr{margin:10px 0 0;font-size:12.5px;color:var(--bad);font-weight:700;min-height:16px}