/* Cash flow */
:root{--cf-billed:#C9701A;--cf-recv:#2E46F0}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--cf-billed:#C47A2C;--cf-recv:#7083FF}}
:root[data-theme="dark"]{--cf-billed:#C47A2C;--cf-recv:#7083FF}
.cf-card{padding:16px 18px;display:flex;flex-direction:column;gap:12px;margin-top:16px}
.cf-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px}
.cf-head h2{font-family:var(--display);font-weight:500;font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin:0}
.cf-leg{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--muted)}
.cf-leg span{display:inline-flex;align-items:center;gap:6px}
.cf-leg i{width:10px;height:10px;border-radius:3px;display:inline-block}
.cf-leg i.b{background:var(--cf-billed)}.cf-leg i.r{background:var(--cf-recv)}
.cf-wrap{overflow-x:auto}
.cf-svg{width:100%;min-width:560px;height:auto;display:block}
.cf-svg .cf-b{fill:var(--cf-billed)}.cf-svg .cf-r{fill:var(--cf-recv)}
.cf-svg .cf-grid{stroke:var(--line);stroke-width:1}
.cf-svg .cf-base{stroke:var(--muted);stroke-width:1}
.cf-svg .cf-ax{fill:var(--muted);font-size:11px;font-family:var(--body)}
.cf-svg .cf-ax.now{fill:var(--ink);font-weight:700}
.cf-svg .cf-hit{fill:transparent}
.cf-svg .cf-hit:hover{fill:var(--ink);fill-opacity:.04}
.cf-est{color:var(--warn)}
.cf-grid2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px}
.cf-grid2 .cf-card{margin-top:16px}
@media (max-width:900px){.cf-grid2{grid-template-columns:1fr;gap:0}}
.cf-list{display:flex;flex-direction:column}
.cf-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
.cf-row:first-child{border-top:0}
a.cf-row:hover .cf-who b{color:var(--accent)}
.cf-row:not(:has(.cf-when)){grid-template-columns:minmax(0,1fr) auto}
.cf-when{font-size:12px;font-weight:600;color:var(--muted);min-width:76px;white-space:nowrap}
.cf-when.late{color:var(--warn)}
.cf-who{display:flex;flex-direction:column;min-width:0}
.cf-who b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-who small{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-amt{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.cf-amt.warn{color:var(--warn)}
.cf-out{border-style:dashed}
.chart-tbl td.neg{color:var(--warn)}
.cf-when em{display:block;font-style:normal;font-size:11px;color:var(--warn);font-weight:600}
.cf-svg .cf-o{fill:var(--cf-out)}
.cf-leg i.o{background:var(--cf-out)}
:root{--cf-out:#F08A6C}
:root[data-theme="dark"]{--cf-out:#FF9C80}
.cf-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin:4px 0 8px}
.cf-cats>div{display:grid;grid-template-columns:1fr auto;gap:4px 8px;padding:10px 12px;border-radius:14px;background:var(--field)}
.cf-cats span{font-size:12.5px;color:var(--muted)}
.cf-cats b{font-size:14px}
.cf-cats i{grid-column:1/-1;height:5px;border-radius:9px;background:var(--cf-out);display:block}
.cf-out .cf-amt{color:var(--ink);font-weight:600}
.cf-out .cf-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ex-cats{display:flex;flex-wrap:wrap;gap:6px;margin-top:-6px}
.chip-c{border:1px solid var(--line);background:var(--glass);border-radius:999px;padding:7px 12px;font:500 13px var(--body);cursor:pointer;color:var(--ink)}
.chip-c.on{background:var(--accent);border-color:var(--accent);color:#fff}
.ex-form{gap:14px}
.ex-btns{display:flex;flex-wrap:wrap;gap:8px}
.ex-del{color:#D9402E;margin-left:auto}
.sb-box{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:18px;background:var(--field);margin-bottom:6px}
.sb-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sb-head>div{display:flex;flex-direction:column;gap:2px}
.sb-head b{font-size:14px}.sb-head small{font-size:12.5px;color:var(--muted)}
.sb-list{display:flex;flex-direction:column}
.sb-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.sb-row:first-child{border-top:0}
.sb-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;text-decoration:none;color:var(--ink)}
.sb-main b{font-size:14.5px;font-weight:600}.sb-main small{font-size:12.5px;color:var(--muted)}
.sb-row.off .sb-main b{color:var(--muted)}
.sw{position:relative;width:50px;height:30px;border-radius:999px;border:0;background:rgba(120,120,140,.28);cursor:pointer;flex:none;transition:background .2s;padding:0}
.sw i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .2s}
.sw.on{background:#34C759}.sw.on i{transform:translateX(20px)}
.sb-onoff{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:14px;background:var(--field)}
.sb-onoff span{display:flex;flex-direction:column}.sb-onoff small{color:var(--muted);font-size:12.5px}
.sb-every{align-self:flex-start;flex-wrap:wrap}
.ex-rep{flex-wrap:wrap;align-items:flex-start;padding:10px 12px;border-radius:14px;background:var(--field)}
.ex-rep small{flex-basis:100%;padding-left:24px;color:var(--muted);font-size:12px}

.pp-row{text-decoration:none;color:var(--ink)}
.pp-row:hover .sb-main b{color:var(--accent)}
.took{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:14px;background:rgba(194,65,123,.08);margin-bottom:6px}
.took b{font-weight:600}.took small{color:var(--muted);font-size:12px}
.cf-amt.mine{color:#C2417B}
.ex-type{align-self:flex-start;flex-wrap:wrap}
/* where the money went: tabs per cost type */
.ob{margin-top:6px}
.ob-tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;margin:0 -2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ob-tabs::-webkit-scrollbar{display:none}
.ob-tab{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:8px 14px;border-radius:14px;border:1px solid var(--line,rgba(127,127,140,.22));background:var(--field);color:var(--ink);font:inherit;cursor:pointer;text-align:left}
.ob-tab span{font-size:12px;color:var(--muted)}
.ob-tab b{font-size:15px}
.ob-tab.on{background:var(--accent,#3D5AFE);border-color:transparent;color:#fff}
.ob-tab.on span{color:rgba(255,255,255,.8)}
.ob-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:4px 0 12px}
.ob-sum>div{padding:10px 12px;border-radius:14px;background:var(--field);display:flex;flex-direction:column;gap:2px}
.ob-sum b{font-size:18px}
.ob-sum small{font-size:12px;color:var(--muted)}
.ob-months{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;align-items:end;height:130px;padding:6px 2px 0;margin-bottom:14px}
.ob-m{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px;min-width:0}
.ob-m i{display:block;width:100%;max-width:26px;border-radius:7px 7px 3px 3px;background:var(--cf-out,#F0745A)}
.ob-m small{font-size:10.5px;color:var(--muted)}
.ob-mv{font-size:9.5px;color:var(--muted);white-space:nowrap}
.ob-m.fut small{opacity:.45}
.ob-grp{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.ob-gh,.ob-lh{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:2px 2px 2px}
.ob-lh{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ob-lh b{font-weight:600}
.ob-row{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;padding:10px 12px 14px;border-radius:14px;border:1px solid transparent;background:var(--field);color:var(--ink);font:inherit;text-align:left;cursor:pointer;overflow:hidden}
.ob-row.on{border-color:var(--accent,#3D5AFE)}
.ob-n{display:flex;flex-direction:column;min-width:0}
.ob-n b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ob-n small{font-size:12px;color:var(--muted)}
.ob-a{font-weight:600;font-size:14px;white-space:nowrap}
.ob-row i{position:absolute;left:12px;bottom:6px;height:4px;border-radius:4px;background:var(--cf-out,#F0745A);max-width:calc(100% - 24px)}
@media (max-width:560px){.ob-mv{display:none}.ob-months{height:100px;gap:3px}}
/* foldable sections */
details.cx{border-radius:16px;margin:10px 0}
details.cx>summary{list-style:none;display:flex;align-items:center;gap:10px;flex-wrap:wrap;cursor:pointer;padding:12px 14px;border-radius:16px;background:var(--field);user-select:none}
details.cx>summary::-webkit-details-marker{display:none}
details.cx>summary .cx-t{font-weight:700;font-size:14.5px;color:var(--ink)}
details.cx>summary .cx-s{flex:1;font-size:13px;color:var(--muted);text-align:right;min-width:0}
details.cx>summary .cx-s b{color:var(--ink)}
details.cx>summary .cx-s .late{color:var(--warn,#E5484D);font-style:normal}
details.cx>summary .cx-chev{width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-3px);transition:transform .2s;flex:0 0 auto}
details.cx[open]>summary .cx-chev{transform:rotate(225deg) translate(-2px,-1px)}
details.cx[open]>summary{border-bottom-left-radius:6px;border-bottom-right-radius:6px}
details.cx>.cx-b{padding:10px 2px 2px}
details.cx .sb-box{margin-top:0}
.cf-card>details.cx:first-child{margin-top:0}
/* month detail */
.cf-tap{margin:2px 0 0;font-size:12px}
.cf-hit{cursor:pointer}
.cf-hit.sel{fill:var(--accent,#3D5AFE);fill-opacity:.08}
.cf-ax.sel{font-weight:700;fill:var(--ink)}
.md-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.md-nav b{font-size:16px}
.md-tot{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.md-tot>div{padding:10px 12px;border-radius:14px;background:var(--field);display:flex;flex-direction:column;gap:2px}
.md-tot small{font-size:12px;color:var(--muted)}
.md-tot b{font-size:17px}
.md-tot b.warn{color:var(--warn,#E5484D)}
.md-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.md-col{display:flex;flex-direction:column;gap:6px;min-width:0}
.md-h{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:0 2px 2px}
.md-row{position:relative;display:grid;grid-template-columns:1fr auto;align-items:start;gap:8px;padding:10px 12px 14px;border-radius:14px;background:var(--field);border:0;color:var(--ink);font:inherit;text-align:left;overflow:hidden;width:100%}
button.md-row{cursor:pointer}
.md-n{display:flex;flex-direction:column;min-width:0}
.md-n b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.md-n small{font-size:12px;color:var(--muted);line-height:1.45}
.md-a{font-weight:600;font-size:14px;white-space:nowrap}
.md-row i{position:absolute;left:12px;bottom:6px;height:4px;border-radius:4px;max-width:calc(100% - 24px)}
.md-row i.in{background:var(--cf-recv,#3D5AFE)}
.md-row i.out{background:var(--cf-out,#F0745A)}
.md-mine{margin:4px 2px 0;font-size:12px}
@media (max-width:720px){.md-cols{grid-template-columns:1fr}details.cx>summary .cx-s{text-align:left;flex-basis:100%}}
@media (max-width:720px){details.cx>summary .cx-t{flex:1}details.cx>summary .cx-chev{order:2}details.cx>summary .cx-s{order:3}}
/* this month / this year switch */
#cfStats .cf-span{grid-column:1/-1;display:inline-flex;justify-self:start;gap:2px;padding:3px;border-radius:999px;background:var(--field);width:max-content}
#cfStats .cf-span button{border:0;background:none;color:var(--muted);font:inherit;font-size:13px;font-weight:600;padding:7px 16px;border-radius:999px;cursor:pointer}
#cfStats .cf-span button.on{background:var(--card,#fff);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.12)}
#cfStats .v.good{color:var(--ok,#1F9D55)}