/* Flusara pages inside the CloudBasket shell */
html,body{margin:0;height:100%}
.fl-logo{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,#2878e8,#7c5cff);color:#fff}
.fl-logo svg{width:62%;height:62%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.aulogo .fl-logo{width:64px;height:64px;border-radius:20px}
.lbrand .fl-logo,.lnow .fl-logo{width:28px;height:28px;border-radius:9px}
.splogo .fl-logo{width:72px;height:72px;border-radius:22px;position:relative}
.gsearch input{background:none!important;border:0!important;min-height:0!important;height:auto!important;border-radius:0!important;width:auto!important;padding:0!important}
/* phone: keep the bottom menu fixed to the screen (a blurred parent would pin it to the end of the page) */
@media (max-width:767px){
  html.cb-macos-home .shell{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .content{padding-bottom:92px!important}
}

html{touch-action:manipulation;-webkit-text-size-adjust:100%}input,select,textarea{font-size:16px}

/* font choices from Settings */
html[data-font=system]{--font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
html[data-font=serif]{--font:Georgia,"Times New Roman",serif}
html[data-font=rounded]{--font:ui-rounded,"SF Pro Rounded",Nunito,system-ui,sans-serif}
html[data-font=mono]{--font:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
html[data-font] body,html[data-font] button,html[data-font] input,html[data-font] select,html[data-font] textarea{font-family:var(--font)}

/* page width drives card layout (container queries used by Obsidian) */
main.content{container:cbpage / inline-size}

/* AI Advisor */
.ai-av{width:var(--s,56px);height:var(--s,56px);border-radius:50%;flex:none;display:inline-grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff;font-weight:700;font-size:calc(var(--s,56px)*.42)}
.ai-av img{width:100%;height:100%;object-fit:cover}
.ai-wrap{display:grid;gap:14px;max-width:760px}
.ai-chars{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:14px 0}
.ai-char{display:flex;gap:10px;align-items:center;text-align:left;padding:10px;border-radius:16px;border:1px solid var(--line);background:var(--soft);color:var(--ink)}
.ai-char.on{border-color:var(--g2);box-shadow:0 0 0 2px var(--gsoft)}.ai-char small{display:block;color:var(--mut2);font-size:11px}
.ai-cust textarea{width:100%;border-radius:14px;border:1px solid var(--line);background:var(--soft);color:var(--ink);padding:10px 14px;font:inherit;font-size:16px}
.ai-msgs{min-height:260px;max-height:52vh;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:4px 2px}
.ai-msg{display:flex;gap:8px;align-items:flex-end;max-width:92%}.ai-msg.user{align-self:flex-end;flex-direction:row-reverse}
.ai-b{padding:10px 14px;border-radius:18px;background:var(--soft);color:var(--ink);line-height:1.45;font-size:14.5px;overflow-wrap:anywhere}
.ai-msg.user .ai-b{background:var(--btn1);color:#fff}.ai-up{display:block;max-width:180px;border-radius:12px;margin-bottom:6px}
.ai-empty{margin:auto;text-align:center;display:grid;gap:8px;justify-items:center;color:var(--mut2);font-size:13.5px;padding:20px}.ai-empty b{color:var(--ink);font-size:16px}
.ai-dots{display:flex;gap:4px;padding:14px}.ai-dots i{width:7px;height:7px;border-radius:50%;background:var(--mut);animation:aidot 1s infinite ease-in-out}.ai-dots i:nth-child(2){animation-delay:.15s}.ai-dots i:nth-child(3){animation-delay:.3s}
@keyframes aidot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
.ai-bar{display:flex;gap:8px;align-items:flex-end;margin-top:10px}
.ai-bar textarea{flex:1;min-height:44px;max-height:120px;resize:none;border-radius:22px;border:1px solid var(--line);background:var(--soft);color:var(--ink);padding:11px 16px;font:inherit;font-size:16px;outline:0}
.ai-ico{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--soft);border:1px solid var(--line);color:var(--ink);cursor:pointer}
.ai-ico.go{background:var(--btn1);border-color:var(--btn1);color:#fff}.ai-ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}
.ai-pv{display:inline-block;position:relative;margin-top:8px}.ai-pv img{height:64px;border-radius:12px}.ai-pv button{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--card)}
.ai-live{position:fixed;inset:0;z-index:60;display:grid;place-content:center;justify-items:center;gap:16px;text-align:center;background:radial-gradient(circle at 50% 35%,var(--gsoft),var(--bg) 70%);color:var(--ink)}
.ai-live-av{position:relative;width:190px;height:190px;display:grid;place-items:center}
.ai-live-av i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--g3);opacity:0}
.ai-live.listen .ai-live-av i,.ai-live.talk .ai-live-av i{animation:airing 2.4s infinite ease-out}.ai-live-av i:nth-child(2){animation-delay:.8s!important}.ai-live-av i:nth-child(3){animation-delay:1.6s!important}
.ai-live.talk .ai-live-av .ai-av{animation:aibeat .5s infinite alternate ease-in-out}
@keyframes airing{0%{transform:scale(.8);opacity:.7}100%{transform:scale(1.4);opacity:0}}@keyframes aibeat{to{transform:scale(1.05)}}
.ai-round{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--btn1);color:#fff}.ai-round.end{background:var(--red)}.ai-round svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.8}
@media(prefers-reduced-motion:reduce){.ai-live-av i,.ai-live .ai-av,.ai-dots i{animation:none!important}}

/* Grocery */
.gr-line{display:flex;gap:6px;align-items:center;margin-bottom:8px;flex-wrap:wrap}.gr-name{flex:1;min-width:120px}
.gr-line input,.gr-line select{min-height:42px;padding:0 10px;font-size:15px}.gr-t{min-width:56px;text-align:right}
.gr-bill{border-top:1px solid var(--line);padding:10px 0}.gr-bill summary{display:flex;gap:10px;align-items:center;cursor:pointer;list-style:none}.gr-bill summary::-webkit-details-marker{display:none}
.gr-items{padding:8px 0 4px;display:grid;gap:6px}
/* Record Vault */
.dv-ic{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--card2,rgba(127,127,127,.12));font-size:22px;flex:none}
.dv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.dv-card{display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;padding:10px;border:1px solid var(--line);border-radius:16px;background:transparent;color:inherit;font:inherit;cursor:pointer}
.dv-thumb{width:100%;aspect-ratio:4/3;border-radius:12px;overflow:hidden;display:grid;place-items:center;background:var(--card2,rgba(127,127,127,.12))}
.dv-thumb img{width:100%;height:100%;object-fit:cover}.dv-big{font-size:38px}
.dv-prev{display:block;max-width:100%;max-height:260px;margin:10px auto;border-radius:12px;object-fit:contain}
/* Data Centre */
.ptop .actions .btn:not(.p){background:var(--card,#fff);color:inherit;border:1px solid var(--line);box-shadow:none}
.ptop .actions .btn{display:inline-flex;align-items:center;gap:6px}.ptop .actions .btn svg{width:18px;height:18px}
.panel .filters .field.search{display:flex;align-items:center;gap:8px;padding:0 12px;min-height:46px}
.panel .filters .field.search input{border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;min-height:0!important;flex:1;min-width:0}
.panel .filters .field.sel{position:relative}.panel .filters .field.sel select{width:100%}
td.chk,th.chk{width:30px;border:0!important;background:none!important;box-shadow:none!important;border-radius:0!important;height:auto!important;min-width:0!important;padding-right:0}
td.chk .chk{width:20px;height:20px;display:inline-grid;place-items:center;border:1.5px solid var(--line);border-radius:6px}
td.chk .chk.on{background:var(--violet);color:#fff;border-color:var(--violet)}
.panel .chips{display:flex;gap:8px;overflow-x:auto;padding:8px 0}
.tw{overflow-x:auto}.tw table{width:100%;border-collapse:collapse}.tw td,.tw th{padding:10px 8px;text-align:left}
.tw tr.r{cursor:pointer}.tw tr.r:hover{background:rgba(127,127,127,.07)}
@media(max-width:760px){.col-type,.col-acct,.col-source{display:none}}
/* Obsidian overview: income / expenses / net position */
.ob-top3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 14px}
@media(max-width:560px){.ob-top3{grid-template-columns:1fr;gap:8px}.ob-t3{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}}

/* Overview summary tiles use the Obsidian panel look */
.ob-t3{text-align:left;color:inherit;font:inherit;cursor:pointer;display:block;width:100%;padding:16px 18px}
.ob-t3 .ob-eyebrow{margin-bottom:8px}.ob-t3 .ob-revenue-total>strong{font-size:clamp(20px,2.6vw,30px)}
.ob-t3 .ob-muted{font-size:11.5px}
/* Motion: smooth, gentle, respects reduced-motion */
@keyframes flUp{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes flPop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes flSheet{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes flShine{0%{background-position:-200% 0}100%{background-position:200% 0}}
.enter .ob-panel,.enter .panel,.enter .card,.enter .ob-t3,.enter .ge-product-wrap,.enter .ge-receipt,.enter .estat,.enter .item,.enter .acc{animation:flUp .5s cubic-bezier(.2,.8,.2,1) both}
.enter>*:nth-child(1) .ob-panel,.enter .ob-t3:nth-child(1){animation-delay:.02s}
.enter .ob-t3:nth-child(2){animation-delay:.08s}.enter .ob-t3:nth-child(3){animation-delay:.14s}
.enter .ge-product-wrap:nth-child(n){animation-delay:calc(min(var(--i,0),12)*30ms)}
.enter .ge-product-wrap:nth-child(2){animation-delay:.04s}.enter .ge-product-wrap:nth-child(3){animation-delay:.08s}.enter .ge-product-wrap:nth-child(4){animation-delay:.12s}.enter .ge-product-wrap:nth-child(5){animation-delay:.16s}.enter .ge-product-wrap:nth-child(6){animation-delay:.2s}
.ob-panel,.ge-product,.ob-t3,.card{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s}
@media(hover:hover){.ob-t3:hover,.ge-product:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.28)}}
.ob-t3:active,.ge-product:active,.btn:active,.pill:active,.chip:active{transform:scale(.97)}
.btn,.pill,.chip,.ge-suppick,.nav a,.bn button{transition:transform .18s cubic-bezier(.2,.8,.2,1),background-color .2s,border-color .2s,opacity .2s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
#sheet.on{animation:flSheet .32s cubic-bezier(.2,.9,.3,1) both}
.toast.on,#toast.on{animation:flPop .22s both}
.ge-line{animation:flUp .3s cubic-bezier(.2,.8,.2,1) both}
.ge-suppick{animation:flPop .3s cubic-bezier(.2,.9,.3,1.1) both}
.ge-suppick:nth-child(2){animation-delay:.04s}.ge-suppick:nth-child(3){animation-delay:.08s}.ge-suppick:nth-child(4){animation-delay:.12s}.ge-suppick:nth-child(n+5){animation-delay:.16s}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}}

/* Income / Expenses chart (CloudBasket) */
.cbcf{--cf-bg:var(--card,#fff);--cf-ink:var(--ink,#20232a);--cf-muted:var(--mut2,#667085);--cf-line:var(--line,#e7e9ee);--cf-soft:var(--panel,#f3f4f6);background:var(--cf-bg);color:var(--cf-ink);border-radius:18px;padding:20px;min-width:0;font-family:inherit;box-sizing:border-box;container-type:inline-size}
.cbcf *{box-sizing:border-box}.cbcf button{font:inherit;cursor:pointer}.cbcf-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.cbcf-title{margin:0!important;font-size:14px!important;color:inherit!important}.cbcf-period{display:flex;background:var(--cf-soft);border:1px solid var(--cf-line);border-radius:30px;padding:4px;gap:2px}.cbcf-period button{background:none;border:0;color:var(--cf-muted);font-size:10px;padding:8px 12px;border-radius:22px}.cbcf-period button[aria-pressed=true]{background:var(--cf-ink);color:var(--cf-bg)}
.cbcf-totals{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin:24px 0 18px}.cbcf-stat{display:grid;gap:7px;min-width:0}.cbcf-stat small{font-size:11px;color:var(--cf-muted)}.cbcf-stat strong{font-size:clamp(22px,4.5cqi,36px);line-height:1.2;letter-spacing:-.7px}.cbcf-stat>span,.cbcf-ratio>span{font-size:10px;color:var(--cf-muted)}.cbcf-stat.expenses strong{color:#c74a5e}.cbcf-ratio{display:grid;gap:7px;margin-left:auto}.cbcf-ratio strong{font-size:24px}
.cbcf-legend{display:flex;gap:18px;font-size:10px;color:var(--cf-muted);margin-bottom:6px}.cbcf-legend span{display:flex;gap:6px;align-items:center}.cbcf-legend i{height:8px;width:8px;border-radius:3px;background:#76a5fa}.cbcf-legend i.expenses{background:#ec8391}
.cbcf-plot{height:220px;display:flex;gap:4px;align-items:stretch;padding-top:12px;border-bottom:1px solid var(--cf-line);background:repeating-linear-gradient(to top,transparent 0,transparent 49px,var(--cf-line) 50px);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
.cbcf-column{display:flex;flex:1 0 18px;min-width:18px;flex-direction:column;justify-content:flex-end;align-items:stretch;position:relative;padding-bottom:28px}.cbcf-pair{height:100%;width:100%;max-width:80px;margin-inline:auto;display:flex;align-items:flex-end;gap:3px;min-height:0}.cbcf .cbcf-pair .cbcf-bar{position:relative;flex:1 1 0;width:0;min-width:0;height:var(--height);min-height:3px;border:0;border-radius:5px 5px 2px 2px;background:linear-gradient(#89b4ff,#528be9);color:#fff;padding:0}.cbcf .cbcf-pair .cbcf-bar.expenses{background:linear-gradient(#f8a6aa,#e46a78)}.cbcf .cbcf-pair .cbcf-bar.empty{height:2px!important;min-height:2px;background:var(--cf-line)!important;border-radius:2px}.cbcf-bar span{display:none}.cbcf-column small{position:absolute;bottom:8px;width:100%;text-align:center;font-size:9px;color:var(--cf-muted)}.cbcf-note{margin:10px 0 0;font-size:10px;line-height:1.6;color:var(--cf-muted)}.cbcf button:focus-visible{outline:2px solid #528be9;outline-offset:3px}
.cb-obsidian:not(.cb-obsidian-light) .cbcf{--cf-bg:#101112;--cf-ink:#f1f1f3;--cf-muted:#aeb0b7;--cf-line:#292b30;--cf-soft:#191a1c}.cb-obsidian:not(.cb-obsidian-light) .cbcf-stat.expenses strong{color:#f39aa4}
#view-dash .ob-revenue:has(.cbcf),#view-dash .card.ie:has(.cbcf),#view-dash .mac2-card.mac2-chart:has(.cbcf){padding:0!important;overflow:hidden}.cbcf-plot:has(.cbcf-column:nth-child(20)) .cbcf-column:nth-child(even) small{visibility:hidden}
@container(max-width:550px){.cbcf-totals{gap:18px}.cbcf-stat strong{font-size:24px}.cbcf-ratio{margin-left:0}.cbcf-ratio strong{font-size:22px}}
@media(max-width:600px){.cbcf{padding:16px}.cbcf-plot{height:190px}.cbcf-period button{padding:8px}}

/* Exact amounts remain visible above both series, including very short bars. */
.cbcf .cbcf-column{flex-basis:104px;min-width:104px}
.cbcf .cbcf-pair{max-width:none;gap:8px}
.cbcf .cbcf-plot{padding-top:30px;gap:12px}
.cbcf .cbcf-pair .cbcf-bar .cbcf-bar-value{display:block;position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);width:max-content;max-width:none;color:#3874ca;font-size:10px;font-weight:650;line-height:1.2;white-space:nowrap;pointer-events:none}
.cbcf .cbcf-pair .cbcf-bar.expenses .cbcf-bar-value{color:#c74a5e}
.cbcf .cbcf-pair .cbcf-bar.empty .cbcf-bar-value{display:none}
.cb-obsidian:not(.cb-obsidian-light) .cbcf .cbcf-pair .cbcf-bar .cbcf-bar-value{color:#9dbfff}
.cb-obsidian:not(.cb-obsidian-light) .cbcf .cbcf-pair .cbcf-bar.expenses .cbcf-bar-value{color:#f5a1af}

/* Let the replacement chart determine its card and dashboard row height. */
html body #view-dash .d2:has(.cbcf){grid-template-rows:auto auto auto!important}
html body #view-dash :is(.card.ie,.mac2-chart,.ob-revenue):has(.cbcf){height:auto!important;min-height:450px!important;max-height:none!important;align-self:stretch}
html body #view-dash :is(.card.ie,.mac2-chart,.ob-revenue)>.cbcf{height:auto!important;min-height:450px;max-height:none;overflow:visible}
html body #view-dash .cbcf-plot{flex-shrink:0;height:240px}
@media(max-width:600px){html body #view-dash :is(.card.ie,.mac2-chart,.ob-revenue):has(.cbcf),html body #view-dash :is(.card.ie,.mac2-chart,.ob-revenue)>.cbcf{min-height:430px!important}html body #view-dash .cbcf-plot{height:220px}}

/* Follow the selected theme accent; the green theme uses deep green and mint. */
.cbcf{--cf-income:var(--g2,#1c7c4c);--cf-expense:color-mix(in srgb,var(--g2,#1c7c4c) 42%,var(--cf-bg));--cf-label:var(--g1,#0c4b2d)}
.cbcf .cbcf-period button[aria-pressed=true]{background:var(--cf-income);color:#fff}
.cbcf .cbcf-legend i.income{background:var(--cf-income)}
.cbcf .cbcf-legend i.expenses{background:var(--cf-expense)}
.cbcf .cbcf-pair .cbcf-bar.income{background:linear-gradient(color-mix(in srgb,var(--cf-income) 78%,#fff),var(--cf-income))}
.cbcf .cbcf-pair .cbcf-bar.expenses{background:linear-gradient(color-mix(in srgb,var(--cf-expense) 82%,#fff),var(--cf-expense))}
.cbcf .cbcf-stat.income strong{color:var(--cf-income)}
.cbcf .cbcf-stat.expenses strong,.cb-obsidian:not(.cb-obsidian-light) .cbcf .cbcf-stat.expenses strong{color:var(--cf-label)}
.cbcf .cbcf-pair .cbcf-bar .cbcf-bar-value,.cbcf .cbcf-pair .cbcf-bar.expenses .cbcf-bar-value,.cb-obsidian:not(.cb-obsidian-light) .cbcf .cbcf-pair .cbcf-bar .cbcf-bar-value,.cb-obsidian:not(.cb-obsidian-light) .cbcf .cbcf-pair .cbcf-bar.expenses .cbcf-bar-value{color:var(--cf-label)}
.cbcf button:focus-visible{outline-color:var(--cf-income)}

/* Expense-only plot, with the income summary retained above it. */
.cbcf.expenses-only .cbcf-column{flex-basis:64px;min-width:64px}
.cbcf.expenses-only .cbcf-pair{max-width:42px;gap:0}
.cbcf.expenses-only .cbcf-pair .cbcf-bar.expenses{background:linear-gradient(color-mix(in srgb,var(--cf-income) 78%,#fff),var(--cf-income))}
.cbcf.expenses-only .cbcf-legend i.expenses{background:var(--cf-income)}

.cbcf-totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cbcf .cbcf-stat strong{font-size:clamp(21px,3.5cqi,34px);overflow-wrap:anywhere}
.cbcf .cbcf-stat.net-position strong{color:var(--cf-label)}
.cbcf .cbcf-ratio{grid-column:1/-1;display:flex;gap:8px;align-items:baseline;margin-left:0}
.cbcf .cbcf-ratio strong{font-size:20px}
@container(max-width:460px){.cbcf-totals{gap:12px}.cbcf .cbcf-stat strong{font-size:18px}.cbcf-stat small{font-size:10px}.cbcf-stat>span{font-size:9px}}

/* Side dock: 5 icons + 3D pop-out menus */
.dock-rail{display:none}
@media(min-width:760px){
  .side>.side-full{display:none!important}
  .side>.dock-rail{display:flex;flex-direction:column;align-items:center;height:100%;gap:10px;padding:14px 0}
  :root:not([data-skin=glass]):not([data-skin=kova]) .shell{grid-template-columns:88px minmax(0,1fr)!important}
  .side .scrim{display:none}
}
.dock-logo{width:46px;height:46px;display:grid;place-items:center;margin-bottom:6px}.dock-logo svg{width:34px;height:34px}
.dock-ic{display:flex;flex-direction:column;gap:12px;align-items:center;margin:auto 0}
.dock-foot{display:flex;flex-direction:column;gap:10px;align-items:center}
.dk{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;width:64px;color:var(--muted,#9aa)}
.dk i{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid var(--line,rgba(255,255,255,.08));transition:transform .28s cubic-bezier(.2,.9,.3,1.3),background .2s,box-shadow .25s}
.dk i svg{width:22px;height:22px}
.dk span{font-size:10.5px;letter-spacing:.02em;opacity:.85}
.dk:hover i{transform:translateY(-3px) scale(1.08);box-shadow:0 10px 22px rgba(0,0,0,.35)}
.dk:active i{transform:scale(.92)}
.dk.on,.dk.open{color:var(--text,#fff)}
.dk.on i,.dk.open i{background:linear-gradient(145deg,var(--accent,#ff8d3b),color-mix(in srgb,var(--accent,#ff8d3b) 60%,#000));color:#fff;border-color:transparent;box-shadow:0 8px 22px color-mix(in srgb,var(--accent,#ff8d3b) 45%,transparent)}
.dk.add i{background:linear-gradient(145deg,var(--accent,#ff8d3b),color-mix(in srgb,var(--accent,#ff8d3b) 65%,#000));color:#fff;border:0}
.dock-foot .dk{width:48px}
#dockPop{position:fixed;z-index:60;min-width:250px;padding:14px;border-radius:26px;background:color-mix(in srgb,var(--card,#16181d) 82%,transparent);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);border:1px solid var(--line,rgba(255,255,255,.1));box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.04) inset;transform-origin:left var(--oy,50%);animation:dpIn .38s cubic-bezier(.2,.9,.3,1.15) both;perspective:900px}
#dockPop.out{animation:dpOut .16s ease-in both}
#dockPop::before{content:"";position:absolute;left:-7px;top:calc(var(--oy,50%) - 7px);width:14px;height:14px;transform:rotate(45deg);background:inherit;border-left:1px solid var(--line,rgba(255,255,255,.1));border-bottom:1px solid var(--line,rgba(255,255,255,.1));border-radius:3px}
.dp-h{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin:2px 4px 10px}
.dp-g{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.dp-t{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.015));border:1px solid var(--line,rgba(255,255,255,.08));text-align:center;font-size:12px;color:var(--text,#fff);animation:dpTile .45s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:calc(var(--i)*55ms + 90ms);transition:transform .22s cubic-bezier(.2,.9,.3,1.3),box-shadow .22s}
.dp-t i{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(145deg,var(--accent,#ff8d3b),color-mix(in srgb,var(--accent,#ff8d3b) 55%,#000));color:#fff;box-shadow:0 8px 18px color-mix(in srgb,var(--accent,#ff8d3b) 35%,transparent)}
.dp-t i svg{width:22px;height:22px}
.dp-t:hover{transform:translateY(-4px) rotateX(8deg) scale(1.04);box-shadow:0 16px 30px rgba(0,0,0,.4)}
.dp-t:active{transform:scale(.95)}.dp-t.on{border-color:var(--accent,#ff8d3b)}
@keyframes dpIn{from{opacity:0;transform:perspective(900px) rotateY(-28deg) translateX(-18px) scale(.82)}to{opacity:1;transform:none}}
@keyframes dpOut{to{opacity:0;transform:perspective(900px) rotateY(-18deg) scale(.9)}}
@keyframes dpTile{from{opacity:0;transform:translateY(14px) rotateX(-35deg) scale(.8)}to{opacity:1;transform:none}}

/* Walking buddy */
.bfloat.walk{left:0;right:auto;width:100%;max-width:none;bottom:calc(96px + var(--sab,0px));height:70px;overflow:visible}
@media(min-width:760px){.bfloat.walk{bottom:12px;left:100px;width:calc(100% - 120px)}}
.bwalker{position:relative;width:66px;height:66px;pointer-events:none;animation:bwalk 46s linear infinite alternate}
.bwalker .buddy{pointer-events:auto;animation:bflip 92s step-end infinite;filter:drop-shadow(0 8px 10px rgba(0,0,0,.35))}
.bwalker .bubble{position:absolute;bottom:76px;left:-90px;width:240px;max-width:60vw;padding:10px 12px;border-radius:16px;font-size:13px;line-height:1.45;transform-origin:bottom center}
.bwalker .buddy .buddy-svg{animation:bstep .55s ease-in-out infinite}
.bfloat.walk.show .bwalker,.bwalker:hover,.bwalker:has(.talk){animation-play-state:paused}
.bwalker:has(.talk) .buddy-svg,.bfloat.walk.show .buddy-svg{animation:none}
@keyframes bwalk{from{transform:translateX(0)}to{transform:translateX(calc(100vw - 240px))}}
@keyframes bflip{0%{transform:scaleX(1)}50%{transform:scaleX(-1)}}
@keyframes bstep{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-4px) rotate(3deg)}}
.b-tear{animation:btear 1.6s ease-in infinite;transform-box:fill-box}
@keyframes btear{0%{opacity:0;transform:translateY(-4px)}30%{opacity:1}100%{opacity:0;transform:translateY(16px)}}
@media(prefers-reduced-motion:reduce){.bwalker{animation:none}}

/* Compact AI panel */
.ob-ai{padding:14px 16px!important;min-height:0!important;max-height:none!important;gap:6px}
.ob-ai .ob-panel-head h2{font-size:15px}
.ob-ai>p{margin:6px 0 10px!important;font-size:12px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ob-ai .ob-ask{margin-top:0;padding:10px 14px;border-radius:14px}
/* Sign-in: appears at once, ambient motion stays */
.auhero,.auth .box{animation-duration:.28s!important;animation-delay:0s!important}
.aubg i{filter:blur(44px);will-change:transform}

/* ---------- Budget workspace ---------- */
.bw-tabs{display:flex;gap:6px;overflow-x:auto;padding:4px 0 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.bw-tabs::-webkit-scrollbar{display:none}
.bw-tabs button{flex:0 0 auto;border:1px solid var(--bw-ln2);background:var(--bw-bg);color:inherit;padding:9px 16px;border-radius:999px;font:600 13px/1 inherit;cursor:pointer;transition:background .18s,transform .18s,border-color .18s}
.bw-tabs button:active{transform:scale(.96)}
.bw-tabs button.on{background:linear-gradient(135deg,#8B5CF6,#6366F1);border-color:transparent;color:#fff;box-shadow:0 6px 18px rgba(99,102,241,.35)}
.bw-body{animation:flUp .32s both}
.bw-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
@media(max-width:820px){.bw-tiles{grid-template-columns:repeat(2,1fr)}}
.bw-cat{background:transparent;border:0;border-bottom:1px solid var(--bw-ln);padding:12px 2px;color:inherit;cursor:pointer}
.bw-cat .bar,.bw-body .bar{height:8px;border-radius:99px;background:var(--bw-ln);overflow:hidden}
.bw-body .bar i{display:block;height:100%;border-radius:99px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.bw-body .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}
.bw-body table{width:100%;border-collapse:collapse;font-size:13px}
.bw-body th{text-align:left;font-weight:600;opacity:.6;padding:8px 8px;font-size:12px}
.bw-body td{padding:10px 8px;border-top:1px solid var(--bw-ln)}
.bw-body td.num,.bw-body th:nth-child(n+2){white-space:nowrap}
.bw-body tr.on td{background:rgba(139,92,246,.12)}
.bw-body .good{color:var(--bw-good)}.bw-body .bad{color:var(--bw-bad)}
.bw-fc{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;align-items:end;text-align:center}
.bw-fc-bars{height:110px;display:flex;gap:4px;align-items:flex-end;justify-content:center}
.bw-fc-bars i{width:14px;border-radius:6px 6px 2px 2px;min-height:3px;transition:height .5s}
.bw-fc-col small{display:block;opacity:.6;margin-top:4px}.bw-fc-col b{font-size:12px}

/* Buddy stays in one place: breathes, blinks, changes expression */
.bfloat.walk{left:auto;right:14px;width:auto;height:70px}
@media(min-width:760px){.bfloat.walk{left:auto;right:24px;width:auto}}
.bwalker{animation:none!important}
.bwalker .buddy{animation:none!important}
.bwalker .bubble{left:auto;right:0}
.bwalker .buddy .buddy-svg{animation:bbreathe 3.6s ease-in-out infinite;transform-origin:50% 90%}
@keyframes bbreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045) translateY(-2px)}}
.bwalker:has(.talk) .buddy-svg,.bfloat.walk.show .buddy-svg{animation:bbreathe 1.2s ease-in-out infinite}

/* Theme-aware tokens: dark and light each get matching tones */
:root{--bw-ln:rgba(255,255,255,.08);--bw-ln2:rgba(255,255,255,.12);--bw-bg:rgba(255,255,255,.04);--bw-good:#34d399;--bw-bad:#FDA4AF}
[data-mode=light]{--bw-ln:rgba(15,23,42,.09);--bw-ln2:rgba(15,23,42,.14);--bw-bg:rgba(15,23,42,.04);--bw-good:#059669;--bw-bad:#E11D48}
[data-mode=light] .bw-tabs button{color:#334155}
[data-mode=light] .bw-tabs button.on{color:#fff}
[data-mode=light] .bw-body tr.on td{background:rgba(124,58,237,.09)}
[data-mode=light] .bwalker .buddy{filter:drop-shadow(0 8px 10px rgba(15,23,42,.18))}

/* Smooth theme switch */
html.theming *,html.theming *::before,html.theming *::after{transition:background-color .4s ease,color .4s ease,border-color .4s ease,fill .4s ease,stroke .4s ease,box-shadow .4s ease!important}

/* Smooth motion everywhere */
main.content.enter>*{animation:flUp .38s cubic-bezier(.2,.8,.2,1) both}
main.content.enter>*:nth-child(2){animation-delay:.04s}main.content.enter>*:nth-child(3){animation-delay:.08s}main.content.enter>*:nth-child(4){animation-delay:.12s}main.content.enter>*:nth-child(n+5){animation-delay:.16s}
.card,.item,.ob-panel,.emic,.lr,.ge-product{transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,background-color .3s,border-color .3s}
@media(hover:hover){.card:hover,.ob-panel:hover,.lr:hover,.ge-product:hover{transform:translateY(-2px)}}
.btn,.pill,.chip,button.item{transition:transform .16s ease,background-color .25s,box-shadow .25s,opacity .2s}
.btn:active,.pill:active,.chip:active,button.item:active{transform:scale(.97)}
.bar i,.dline i,.ring circle{transition:width .6s cubic-bezier(.2,.8,.2,1),stroke-dasharray .8s cubic-bezier(.2,.8,.2,1)}
#sheet{transition:transform .38s cubic-bezier(.2,.9,.25,1),opacity .3s}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){main.content.enter>*{animation:none}html{scroll-behavior:auto}}

/* Compact category chips and icons */
.chip:has(.dot){height:28px!important;min-height:28px!important;padding:0 10px!important;font-size:12px!important;gap:5px!important;text-transform:none!important;letter-spacing:0!important}
.chip .dot{width:7px!important;height:7px!important;margin:0!important;flex:none}
.chips:has(.chip .dot){gap:6px!important;padding-bottom:4px!important}
.cat>svg{width:15px!important;height:15px!important;flex:none}
.cat{gap:8px!important}
.bw-body .dot{width:8px;height:8px}

/* Siri-style compact assistant */
.ob-ai.siri{padding:12px 14px!important;gap:8px;position:relative;overflow:hidden}
.siri-head{display:flex;align-items:center;gap:10px}
.siri-head h2{font-size:14px;margin:0;flex:1;font-weight:600}
.siri-head button{border:0;background:var(--bw-bg);color:inherit;width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:13px;transition:transform .2s}
.siri-head button:hover{transform:rotate(45deg)}
.siri-orb{position:relative;width:26px;height:26px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 30%,#fff 0,#c4b5fd 18%,#8b5cf6 45%,#2563eb 100%);box-shadow:0 0 14px rgba(139,92,246,.55);animation:siriBreath 3.4s ease-in-out infinite;overflow:hidden}
.siri-orb i{position:absolute;inset:-30%;border-radius:40%;background:conic-gradient(from 0deg,transparent,rgba(244,114,182,.7),transparent 40%,rgba(34,211,238,.7),transparent 80%);mix-blend-mode:screen;animation:siriSpin 6s linear infinite}
.siri-orb i:nth-child(2){animation-duration:9s;animation-direction:reverse;opacity:.7}
.siri-orb i:nth-child(3){animation-duration:13s;opacity:.5}
@keyframes siriSpin{to{transform:rotate(360deg)}}
@keyframes siriBreath{0%,100%{transform:scale(1);box-shadow:0 0 12px rgba(139,92,246,.45)}50%{transform:scale(1.1);box-shadow:0 0 22px rgba(99,102,241,.7)}}
.siri-bar{display:flex;align-items:center;gap:6px;padding:4px 4px 4px 14px;border-radius:999px;border:1px solid var(--bw-ln2);background:var(--bw-bg);transition:border-color .25s,box-shadow .25s}
.siri-bar:focus-within{border-color:#8b5cf6;box-shadow:0 0 0 3px rgba(139,92,246,.18),0 0 22px rgba(139,92,246,.25)}
.siri-bar input{flex:1;min-width:0;border:0!important;background:transparent!important;color:inherit;font-size:13px;outline:none;padding:6px 0!important;box-shadow:none!important;height:auto!important}
.siri-mic,.siri-go{flex:none;width:30px;height:30px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;font-weight:700;transition:transform .15s}
.siri-mic{background:transparent;color:inherit;opacity:.75}
.siri-go{background:linear-gradient(135deg,#8b5cf6,#2563eb);color:#fff}
.siri-mic:active,.siri-go:active{transform:scale(.9)}
.siri-chips{display:flex;gap:6px;flex-wrap:wrap}
.siri-chips button{border:1px solid var(--bw-ln2);background:transparent;color:inherit;border-radius:999px;font-size:11.5px;padding:4px 10px;cursor:pointer;opacity:.85;transition:background .2s,transform .15s}
.siri-chips button:hover{background:var(--bw-bg)}.siri-chips button:active{transform:scale(.95)}
.siri-a{margin:0;font-size:12.5px;line-height:1.5;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s,opacity .4s}
.siri-a:not(:empty){max-height:120px;opacity:1;padding-top:2px}
@media(prefers-reduced-motion:reduce){.siri-orb,.siri-orb i{animation:none}}
.ob-ai.siri{display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;text-align:left}
.siri-head,.siri-bar,.siri-chips,.siri-a{width:100%;box-sizing:border-box}
.siri-chips{justify-content:flex-start}
@media(min-width:900px){.asum.c4{grid-template-columns:repeat(4,minmax(0,1fr))!important}.asum.c4 .sc{padding:12px 14px}}

/* Bank card faces on Accounts */
.acards{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))!important}
.apc{cursor:pointer;display:flex;flex-direction:column;gap:8px;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.apc:hover{transform:translateY(-4px) rotate(-.4deg)}
.apc:active{transform:scale(.98)}
.apc .ac{width:100%;height:auto;aspect-ratio:1.586;pointer-events:none}
.apc-bal{display:flex;justify-content:space-between;align-items:baseline;padding:0 4px}
.apc-bal small{opacity:.65}.apc-bal b{font-size:16px}
.ac-prev-wrap{max-width:320px;margin:10px auto 6px}
#ac-prev .ac{width:100%;height:auto;aspect-ratio:1.586;pointer-events:none}
#ac-prev{animation:flPop .3s both}

/* Grocery: same icon size everywhere, smoother motion */
.ge-page .ge-picture,.ge-picture{height:96px!important;min-height:96px!important;max-height:96px;display:grid;place-items:center;font-size:40px!important;line-height:1;overflow:hidden;position:relative;border-radius:12px!important;flex:none}
.ge-page .ge-picture img,.ge-picture img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover;animation:geFade .25s ease both}
@keyframes geFade{from{opacity:0}to{opacity:1}}
@keyframes geShim{from{background-position:200% 0}to{background-position:-200% 0}}
.ge-product{display:flex;flex-direction:column;gap:4px}
.ge-product i{transition:transform .25s cubic-bezier(.2,.8,.2,1),background-color .2s}
@media(hover:hover){.ge-product:hover i{transform:rotate(90deg) scale(1.15)}}
.ge-product:active i{transform:scale(.85)}
.ge-categories .btn{transition:background-color .25s,color .25s,transform .2s,box-shadow .25s}
.ge-categories .btn.p{box-shadow:0 6px 16px rgba(99,102,241,.3)}
dialog[open]{animation:geDlg .18s ease-out both}
@keyframes geDlg{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes geBack{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.ge-picture img,.enter .ge-product-wrap{animation:none}}

/* Dashboard: smaller category and icon marks */
.ob-calendar-total{padding:9px 11px!important;gap:9px!important;margin-top:12px!important;border-radius:13px!important}
.ob-calendar-total>span{width:22px!important;height:22px!important;font-size:11px!important}
.ob-calendar-total strong{font-size:20px!important}
.ob-emi-icon{width:22px!important;height:22px!important;border-radius:7px!important}
.ob-emi-icon svg{width:12px!important;height:12px!important}
.ob-insight{font-size:11px!important;gap:6px!important;padding:8px 10px!important}
.ob-insight>*:first-child{font-size:9px}
.ob-donut{max-width:150px!important}
.ob-category-legend{gap:7px!important}
.ob-category-legend li{grid-template-columns:5px minmax(0,1fr)!important;font-size:10.5px!important}
.ob-category-legend i{width:5px!important;height:5px!important}
.ob-category-legend b{font-size:10.5px!important}

/* Clearer month and date labels */
.topmonth b{display:flex;flex-direction:column;align-items:center;line-height:1.15;padding:0 12px;font-size:14px;white-space:nowrap}
.topmonth b small{font-size:10.5px;font-weight:500;opacity:.65;margin-top:1px}
.ob-heading h1{display:flex;flex-direction:column;gap:2px}
.ob-sub{font-size:13px;font-weight:500;opacity:.6;letter-spacing:0}
.cbcf-title{display:flex;flex-direction:column;gap:1px}
.cbcf-sub{font-size:11.5px;font-weight:500;opacity:.6}
.ob-calendar-total small{font-size:11.5px!important;opacity:.75}

/* Dashboard entrance and chart animation */
.enter .ob-dashboard .ob-panel{animation:flUp .55s cubic-bezier(.2,.8,.2,1) both}
.enter .ob-dashboard .ob-main-column>.ob-panel{animation-delay:.05s}
.enter .ob-dashboard .ob-main-details .ob-panel:nth-child(1){animation-delay:.18s}
.enter .ob-dashboard .ob-main-details .ob-panel:nth-child(2){animation-delay:.26s}
.enter .ob-dashboard .ob-calendar,.enter .ob-dashboard .ob-side-column>.ob-panel:nth-child(1){animation-delay:.1s}
.enter .ob-dashboard .ob-side-column>.ob-panel:nth-child(2){animation-delay:.2s}
.enter .ob-heading h1{animation:flUp .45s both}
.enter .cbcf-bar{transform-origin:bottom;animation:cfGrow .7s cubic-bezier(.2,.8,.2,1) both}
.enter .cbcf-column:nth-child(3n+1) .cbcf-bar{animation-delay:.25s}.enter .cbcf-column:nth-child(3n+2) .cbcf-bar{animation-delay:.32s}.enter .cbcf-column:nth-child(3n) .cbcf-bar{animation-delay:.39s}
@keyframes cfGrow{from{transform:scaleY(0);opacity:0}to{transform:none;opacity:1}}
@property --sw{syntax:"<angle>";inherits:false;initial-value:360deg}
.enter .ob-donut{-webkit-mask-image:conic-gradient(#000 var(--sw),transparent 0);mask-image:conic-gradient(#000 var(--sw),transparent 0);animation:donutSweep 1s cubic-bezier(.2,.8,.2,1) .3s both}
@keyframes donutSweep{from{--sw:0deg}to{--sw:360deg}}
.enter .ob-calendar-grid button{animation:flPop .35s both}
.enter .ob-calendar-grid button:nth-child(7n+1){animation-delay:.2s}.enter .ob-calendar-grid button:nth-child(7n+2){animation-delay:.24s}.enter .ob-calendar-grid button:nth-child(7n+3){animation-delay:.28s}.enter .ob-calendar-grid button:nth-child(7n+4){animation-delay:.32s}.enter .ob-calendar-grid button:nth-child(7n+5){animation-delay:.36s}.enter .ob-calendar-grid button:nth-child(7n+6){animation-delay:.4s}.enter .ob-calendar-grid button:nth-child(7n){animation-delay:.44s}
.enter .ob-category-legend li{animation:flUp .4s both}
.enter .ob-category-legend li:nth-child(1){animation-delay:.5s}.enter .ob-category-legend li:nth-child(2){animation-delay:.58s}.enter .ob-category-legend li:nth-child(3){animation-delay:.66s}.enter .ob-category-legend li:nth-child(n+4){animation-delay:.74s}
@media(prefers-reduced-motion:reduce){.ob-dashboard .ob-panel,.cbcf-bar,.ob-donut,.ob-calendar-grid button,.ob-category-legend li,.ob-heading h1{animation:none}}

/* Sheets: compact controls, left-aligned, two columns on wide screens (iPad landscape) */
#sheet input,#sheet select,#sheet textarea{text-align:left!important;text-align-last:left!important;height:40px;font-size:14px;padding:0 12px;border-radius:12px}
#sheet textarea{height:auto;padding:10px 12px}
#sheet .f{font-size:12px;margin:10px 0 4px}
#sheet h2{margin:2px 0 8px}
#sheet .btn.block{height:44px}
#sheet{max-height:92dvh}
@media(min-width:700px){
  #sheet:has(.acf){width:min(780px,94vw)!important;max-height:90dvh}
  .acf{display:grid;grid-template-columns:minmax(240px,300px) 1fr;gap:6px 22px;align-items:start}
  .acf-prev{position:sticky;top:0}
  .acf-prev .ac-prev-wrap{margin:4px 0}
  .acf-form{min-width:0}
  .acf-actions{grid-column:1/-1}
}
.ac-prev-wrap{max-width:300px}
/* Centered sheet on wide screens: keep the centering transform during and after the animation */
@keyframes flSheetC{from{opacity:0;transform:translate(-50%,-47%) scale(.97)}to{opacity:1;transform:translate(-50%,-50%)}}
@media(min-width:900px){#sheet.on{animation:flSheetC .32s cubic-bezier(.2,.9,.3,1) both!important;transform:translate(-50%,-50%)!important}}
html #sheet{background:var(--ob-panel,var(--panel,#16161a))!important}

/* Grocery category pills: small, one line, same size */
.ge-page .ge-categories,.ge-categories{gap:6px!important;padding-bottom:8px!important;align-items:center}
.ge-page .ge-categories .btn,.ge-categories .btn,.ge-categories button{flex:0 0 auto!important;height:30px!important;min-height:30px!important;padding:0 13px!important;font-size:12.5px!important;font-weight:600;white-space:nowrap!important;line-height:1!important;border-radius:999px!important;box-shadow:none!important;background:var(--bw-bg)!important;border:1px solid var(--bw-ln2)!important;color:inherit!important;filter:none!important}
.ge-page .ge-categories .btn.p,.ge-categories .btn.p{background:linear-gradient(135deg,#8b5cf6,#2563eb)!important;border-color:transparent!important;color:#fff!important;box-shadow:0 4px 12px rgba(99,102,241,.35)!important}
.ge-product small,.ge-product>div span{font-size:11px}

/* Grocery: no replaying entrance animation on every tap, no hover lift on touch screens, GPU-friendly press only */
.ge-page .ge-product-wrap,.enter .ge-product-wrap{animation:none!important}
.ge-product{transition:transform .12s ease,background-color .2s!important;will-change:auto}
.ge-product:hover{transform:none!important;box-shadow:none!important}
.ge-product:active{transform:scale(.97)!important}
.ge-page *{scroll-behavior:auto}
html{scroll-behavior:auto}

/* Touch screens (iPad): keep the top bar clear of the system status bar so every button can be tapped */
@media (pointer:coarse){
  .top{margin-top:calc(env(safe-area-inset-top,0px) + 16px)!important}
  .shell{padding-top:6px}
  .top .iconbtn,.top .rb,.top button{min-width:44px;min-height:44px}
}

/* Grocery: no lifting or movement on tap, just a gentle press */
.ge-product{transition:background-color .15s,border-color .15s}
@media(hover:hover){.ge-product:hover{transform:none!important;box-shadow:none}}
.ge-product:active{transform:scale(.985)!important}
.ge-product i{transition:none!important}.ge-product:hover i{transform:none!important}
.ge-page *{scroll-behavior:auto}

/* Tablets (iPad 10th gen 1180x820 and similar): fit the screen, keep the top bar touchable */
@media(min-width:700px) and (max-width:1500px){
  .shell{margin-top:max(env(safe-area-inset-top,0px),10px)!important;margin-bottom:max(env(safe-area-inset-bottom,0px),10px)!important;height:calc(100dvh - max(env(safe-area-inset-top,0px),10px) - max(env(safe-area-inset-bottom,0px),10px))!important;min-height:0!important}
  main.content{padding-bottom:max(env(safe-area-inset-bottom,0px),24px)!important;scroll-padding-bottom:24px}
  .ob-dashboard .ob-revenue,.ob-dashboard .cbcf{min-height:0!important}
  html body #view-dash .cbcf-plot{height:clamp(150px,24vh,210px)}
  .ob-dashboard{gap:14px}
}
@media(min-width:700px) and (max-height:860px){
  .ob-heading h1{font-size:30px}
  .cbcf{padding:16px 20px!important}
}

/* Empty spending state: keep the message readable, never one letter per line */
.ob-category-legend .ob-empty{grid-template-columns:1fr!important;word-break:normal;overflow-wrap:normal;white-space:normal}
.ob-spending-body:has(.ob-empty){grid-template-columns:minmax(0,150px) minmax(0,1fr);align-items:center}
.ob-main-details>.ob-panel{align-self:start}

/* Mac-style home: compact, everything visible on one tablet screen (also the base for Obsidian density) */
html:root:root:not(.gapp):not(.mapp) body .mac2-workspace{--mac-gap:12px}
html:root:root:not(.gapp):not(.mapp) body .mac2-heading{margin:10px 0 8px!important;gap:10px}
html:root:root:not(.gapp):not(.mapp) body .mac2-heading h1{font-size:clamp(22px,2.2vw,30px)!important;margin:4px 0 3px!important}
html:root:root:not(.gapp):not(.mapp) body .mac2-heading p{font-size:12px}
html:root:root:not(.gapp):not(.mapp) body .mac2-period{margin:0 0 10px!important}
html:root:root:not(.gapp):not(.mapp) body .mac2-period>button{width:26px;height:26px}
html:root:root:not(.gapp):not(.mapp) body .mac2-grid{gap:12px!important}
html:root:root:not(.gapp):not(.mapp) body .mac2-card{padding:14px 16px!important;border-radius:16px}
html:root:root:not(.gapp):not(.mapp) body .mac2-balance{min-height:0!important;padding:16px 20px!important;gap:2px}
html:root:root:not(.gapp):not(.mapp) body .mac2-balance h2{font-size:clamp(26px,2.6vw,34px)!important;margin:2px 0!important;line-height:1.1}
html:root:root:not(.gapp):not(.mapp) body .mac2-balance p{font-size:12px;margin:0}
html:root:root:not(.gapp):not(.mapp) body .mac2-balance-footer{margin-top:10px!important;font-size:12px}
html:root:root:not(.gapp):not(.mapp) body .mac2-balance-footer button{width:30px;height:30px}
html:root:root:not(.gapp):not(.mapp) body .mac2-balance::after{width:130px;height:130px;right:-40px;bottom:-70px}
html:root:root:not(.gapp):not(.mapp) body .mac2-card-head{margin-bottom:6px!important}
html:root:root:not(.gapp):not(.mapp) body .mac2-row{padding:7px 0!important;gap:9px}
html:root:root:not(.gapp):not(.mapp) body .mac2-symbol,html:root:root:not(.gapp):not(.mapp) body .mac2-symbol{width:24px!important;height:24px!important;border-radius:8px}
html:root:root:not(.gapp):not(.mapp) body .mac2-symbol svg{width:13px;height:13px}
html:root:root:not(.gapp):not(.mapp) body .mac2-metrics{gap:12px!important}
html:root:root:not(.gapp):not(.mapp) body .mac2-metrics>.mac2-card{padding:12px 14px!important;gap:5px!important}
html:root:root:not(.gapp):not(.mapp) body .mac2-metrics strong{font-size:clamp(18px,1.9vw,24px)!important}
html:root:root:not(.gapp):not(.mapp) body .mac2-metrics small{font-size:11px;max-width:none;padding-top:0!important}
html:root:root:not(.gapp):not(.mapp) body .mac2-metric-icon,html:root:root:not(.gapp):not(.mapp)[data-cb-widget-theme="macos"] body .mac2-metric-icon{width:22px!important;height:22px!important;top:10px!important;right:12px!important;left:auto!important}
html:root:root:not(.gapp):not(.mapp) body .mac2-metric-icon svg{width:12px;height:12px}
html:root:root:not(.gapp):not(.mapp) body .mac2-caption{font-size:10px}
html:root:root:not(.gapp):not(.mapp) body .mac2-grid{align-items:start!important}
html:root:root:not(.gapp):not(.mapp) body .cb-macos-bar{min-height:0!important;padding:8px 14px!important;margin-bottom:6px!important}
/* installed PWA: status bar overlays the page, so push the whole shell below it */
@media(display-mode:standalone) and (min-width:700px){
  .shell{margin-top:max(env(safe-area-inset-top,0px),30px)!important;height:calc(100dvh - max(env(safe-area-inset-top,0px),30px) - max(env(safe-area-inset-bottom,0px),10px))!important}
}

/* Mac look on tablets: slim icon rail instead of a wide empty column */
@media(min-width:700px) and (max-width:1500px){
  html:root.cb-macos-home:not(.gapp):not(.mapp):not(.x) body .shell,html:root.cb-ubuntu-home:not(.gapp):not(.mapp):not(.x) body .shell{grid-template-columns:92px minmax(0,1fr)!important;gap:8px!important}
  html:root.cb-macos-home:not(.gapp):not(.mapp):not(.x) body .side,html:root.cb-ubuntu-home:not(.gapp):not(.mapp):not(.x) body .side{padding:12px 6px!important;align-items:center}
  html.cb-macos-home .side .nav,html.cb-ubuntu-home .side .nav{margin:0!important}
}

/* Rail icons: simple, small, no border box */
html:root:root body .side .dk{height:auto!important;min-height:0!important;padding:4px 0!important;gap:2px!important}
html:root:root body .side .dk i{width:30px!important;height:30px!important;border:0!important;background:transparent!important;box-shadow:none!important;border-radius:10px!important}
html:root:root body .side .dk i svg{width:18px!important;height:18px!important}
html:root:root body .side .dk span{font-size:9.5px!important;opacity:.75}
html:root:root body .side .dk.on i{background:linear-gradient(145deg,#f08a3c,#d9651b)!important;box-shadow:0 4px 12px rgba(217,101,27,.28)!important}
html:root:root body .side .dk.on span{opacity:1}

/* Original Flusara logo everywhere */
.fl-mark{display:block;width:100%;height:100%;object-fit:contain;border-radius:22%;pointer-events:none;-webkit-user-drag:none}
html:root body .fl-logo{background:none!important;box-shadow:none!important}
html:root body .dock-logo{width:44px;height:44px}html:root body .dock-logo .fl-mark{width:100%;height:100%}
html:root body .brand .logo,html:root body .cb-settings-identity .logo{display:grid;place-items:center;overflow:hidden;background:none!important;border-radius:22%}
html:root body .brand .logo .fl-mark,html:root body .cb-settings-identity .logo .fl-mark{width:100%;height:100%}

/* Same shell size in every look (Mac and Ubuntu match Obsidian) */
html:root:is(.cb-macos-home,.cb-ubuntu-home):not(.gapp):not(.mapp):not(.x) body .shell{margin:8px auto!important;width:calc(100% - 16px)!important;max-width:1800px!important;height:calc(100dvh - 16px)!important;min-height:0!important;padding:9px!important}
@media(display-mode:standalone) and (min-width:700px){
  html:root:is(.cb-macos-home,.cb-ubuntu-home):not(.gapp):not(.mapp):not(.x) body .shell{margin-top:max(env(safe-area-inset-top,0px),30px)!important;height:calc(100dvh - max(env(safe-area-inset-top,0px),30px) - 10px)!important}
}

/* ===== MacBook look = Obsidian layout in macOS glass, wallpaper and squircle icons ===== */
html.cb-macos-skin{--ob-blue:#2878e8;--ob-frame:rgba(255,255,255,.55);--ob-bg:rgba(255,255,255,.38);--ob-panel:rgba(255,255,255,.72);--ob-raised:rgba(255,255,255,.88);--ob-line:rgba(30,40,80,.10);--ob-ink:#1c2030;--ob-muted:#68708a}
html.cb-macos-skin:not(.cb-obsidian-light){--ob-frame:rgba(255,255,255,.14);--ob-bg:rgba(24,22,48,.45);--ob-panel:rgba(32,30,62,.62);--ob-raised:rgba(48,44,88,.7);--ob-line:rgba(255,255,255,.10);--ob-ink:#f2f1fb;--ob-muted:#a9a6c8}
html.cb-macos-skin body{background:linear-gradient(135deg,#a9c9f6 0%,#c8b5ee 55%,#f2c6dc 100%) fixed!important}
html.cb-macos-skin:not(.cb-obsidian-light) body{background:linear-gradient(135deg,#243b7a 0%,#4a2f86 55%,#7a2f6e 100%) fixed!important}
html.cb-macos-skin .shell{-webkit-backdrop-filter:blur(28px) saturate(1.4)!important;backdrop-filter:blur(28px) saturate(1.4)!important;border-width:1px!important;border-radius:26px!important}
html.cb-macos-skin .ob-panel,html.cb-macos-skin .ob-dashboard section{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
/* squircle app icons in the rail */
html:root.cb-macos-skin body .side .dk i{width:36px!important;height:36px!important;border-radius:11px!important;box-shadow:0 2px 6px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.35)!important}
html:root.cb-macos-skin body .side .dk i svg{width:19px!important;height:19px!important;color:#fff!important;stroke:#fff!important}
html:root.cb-macos-skin body .side .dock-ic>.dk:nth-child(1) i{background:linear-gradient(160deg,#5aa9ff,#2f6fe8)!important}
html:root.cb-macos-skin body .side .dock-ic>.dk:nth-child(2) i{background:linear-gradient(160deg,#58d68d,#26a65b)!important}
html:root.cb-macos-skin body .side .dock-ic>.dk:nth-child(3) i{background:linear-gradient(160deg,#ffb454,#f0782c)!important}
html:root.cb-macos-skin body .side .dock-ic>.dk:nth-child(4) i{background:linear-gradient(160deg,#b58cff,#7c52e6)!important}
html:root.cb-macos-skin body .side .dock-ic>.dk:nth-child(5) i{background:linear-gradient(160deg,#9aa3b5,#646d80)!important}
html:root.cb-macos-skin body .side .dk.on i{outline:2px solid rgba(255,255,255,.75);outline-offset:2px}
html:root.cb-macos-skin body .side .dk span{color:var(--ob-ink)!important}
html:root.cb-macos-skin body .side .dock-bottom button,html:root.cb-macos-skin body .side .rb{color:var(--ob-ink)}
html.cb-macos-skin .ob-revenue,html.cb-macos-skin .ob-panel.ob-revenue,html.cb-macos-skin .cbcf{background:var(--ob-panel)!important}
html:root.cb-macos-skin body .side :is(.dock-ic,.dock-rail)~* button,html:root.cb-macos-skin body .side button:not(.dk){color:var(--ob-ink)!important}
html:root.cb-macos-skin body .side button:not(.dk) svg{stroke:var(--ob-ink)!important;color:var(--ob-ink)!important}

/* Bottom rail actions: one row, very small, no boxes (all looks) */
html:root:root body .side .dock-foot{flex-direction:row!important;gap:2px!important;justify-content:center;align-items:center;flex-wrap:nowrap;width:100%}
html:root:root body .side .dock-foot .dk{width:24px!important;height:24px!important;min-width:0!important;flex:0 0 24px!important;padding:0!important;display:grid!important;place-items:center}
html:root:root body .side .dock-foot .dk i{width:22px!important;height:22px!important;background:none!important;border:0!important;box-shadow:none!important;outline:0!important}
html:root:root body .side .dock-foot .dk i svg{width:13px!important;height:13px!important}
html:root:root body .side .dock-foot .dk.add i{background:none!important}

/* ===== macOS Glass (liquid glass): wave wallpaper, very clear frosted panels, floating glass icons ===== */
html.cb-glass body{background:radial-gradient(120% 90% at 15% 10%,#8fd0ff 0%,transparent 55%),radial-gradient(90% 80% at 90% 20%,#2f6fe0 0%,transparent 60%),radial-gradient(100% 90% at 60% 100%,#e9f4ff 0%,transparent 55%),linear-gradient(135deg,#4aa3f5,#2a63d8 60%,#9cc8ff) fixed!important}
html.cb-glass:not(.cb-obsidian-light) body{background:radial-gradient(120% 90% at 15% 10%,#2b7fd6 0%,transparent 55%),radial-gradient(90% 80% at 90% 20%,#1a3f9e 0%,transparent 60%),radial-gradient(100% 90% at 60% 100%,#3a8fe0 0%,transparent 55%),linear-gradient(135deg,#0f2a6e,#16479c 60%,#2c75c8) fixed!important}
html.cb-glass{--ob-bg:rgba(255,255,255,.16);--ob-panel:rgba(255,255,255,.30);--ob-raised:rgba(255,255,255,.46);--ob-line:rgba(255,255,255,.38);--ob-frame:rgba(255,255,255,.55);--ob-ink:#0f2447;--ob-muted:#3d5a86}
html.cb-glass:not(.cb-obsidian-light){--ob-bg:rgba(255,255,255,.07);--ob-panel:rgba(255,255,255,.12);--ob-raised:rgba(255,255,255,.2);--ob-line:rgba(255,255,255,.22);--ob-frame:rgba(255,255,255,.28);--ob-ink:#f4f9ff;--ob-muted:#bcd2f2}
html.cb-glass .shell{-webkit-backdrop-filter:blur(40px) saturate(1.9)!important;backdrop-filter:blur(40px) saturate(1.9)!important;box-shadow:0 30px 80px rgba(8,30,90,.35),inset 0 1px 0 rgba(255,255,255,.6)!important;border-radius:30px!important}
html.cb-glass .ob-panel,html.cb-glass .ob-revenue,html.cb-glass .cbcf{-webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6);background:var(--ob-panel)!important;border:1px solid var(--ob-line)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 28px rgba(10,40,110,.14)!important}
html.cb-glass .side{background:rgba(255,255,255,.14)!important;border:1px solid rgba(255,255,255,.35)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)!important}
html:root.cb-glass body .side .dk i{background:rgba(255,255,255,.32)!important;border:1px solid rgba(255,255,255,.55);box-shadow:0 4px 12px rgba(10,50,140,.2),inset 0 1px 0 rgba(255,255,255,.7)!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
html:root.cb-glass body .side .dock-ic>.dk:nth-child(1) i{background:linear-gradient(160deg,rgba(90,169,255,.95),rgba(47,111,232,.9))!important}
html:root.cb-glass body .side .dock-ic>.dk:nth-child(2) i{background:linear-gradient(160deg,rgba(88,214,141,.95),rgba(38,166,91,.9))!important}
html:root.cb-glass body .side .dock-ic>.dk:nth-child(3) i{background:linear-gradient(160deg,rgba(255,180,84,.95),rgba(240,120,44,.9))!important}
html:root.cb-glass body .side .dock-ic>.dk:nth-child(4) i{background:linear-gradient(160deg,rgba(181,140,255,.95),rgba(124,82,230,.9))!important}
html:root.cb-glass body .side .dock-ic>.dk:nth-child(5) i{background:linear-gradient(160deg,rgba(154,163,181,.95),rgba(100,109,128,.9))!important}
html:root.cb-glass body .side .dock-foot .dk i{background:none!important;border:0!important;box-shadow:none!important}
html:root.cb-glass.cb-obsidian-light{--ob-bg:rgba(255,255,255,.16);--ob-panel:rgba(255,255,255,.34);--ob-raised:rgba(255,255,255,.5);--ob-line:rgba(255,255,255,.45);--ob-ink:#0c2144;--ob-muted:#33507c}
html:root.cb-glass:not(.cb-obsidian-light){--ob-muted:#e1edff;--ob-ink:#ffffff}
html:root.cb-macos-skin body .side .dock-foot .dk i svg{stroke:var(--ob-ink)!important;color:var(--ob-ink)!important;fill:none!important}
html:root:root body .side .dock-foot{gap:0!important;padding:0 2px}
html:root:root body .side .dock-foot .dk{width:22px!important;flex:0 0 22px!important}

/* ===== Category icon styles (Settings > Personalization) ===== */
.cb-ico-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.cb-ico-opt{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:10px;border-radius:14px;border:1px solid var(--line,rgba(128,128,128,.25));background:transparent;color:inherit;text-align:left;cursor:pointer}
.cb-ico-opt small{flex-basis:100%;font-size:11px;opacity:.8}
.cb-ico-opt.on{border-color:var(--ob-blue,#2878e8);box-shadow:0 0 0 2px color-mix(in srgb,var(--ob-blue,#2878e8) 35%,transparent)}
.cb-ico-opt .ico{width:30px!important;height:30px!important;font-size:11px!important}
html[data-ico="solid"] .ico,.cb-ico-opt[data-ico="solid"] .ico{background:var(--c,currentColor)!important;color:#fff!important;border-radius:50%!important}
html[data-ico="ring"] .ico,.cb-ico-opt[data-ico="ring"] .ico{background:transparent!important;border:2px solid currentColor!important;border-radius:50%!important}
html[data-ico="grad"] .ico,.cb-ico-opt[data-ico="grad"] .ico{background:linear-gradient(150deg,color-mix(in srgb,var(--c,currentColor) 65%,#fff),var(--c,currentColor))!important;border-radius:30%!important;box-shadow:0 2px 6px color-mix(in srgb,var(--c,currentColor) 35%,transparent),inset 0 1px 0 rgba(255,255,255,.4)}
html[data-ico="plain"] .ico,.cb-ico-opt[data-ico="plain"] .ico{background:transparent!important;border-radius:0!important;width:auto!important;min-width:26px;font-weight:800}
html[data-ico="glass"] .ico,.cb-ico-opt[data-ico="glass"] .ico{background:color-mix(in srgb,currentColor 14%,rgba(255,255,255,.18))!important;border:1px solid rgba(255,255,255,.4)!important;border-radius:14px!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
html[data-ico="neon"] .ico,.cb-ico-opt[data-ico="neon"] .ico{background:transparent!important;border:1.5px solid currentColor!important;border-radius:12px!important;box-shadow:0 0 10px color-mix(in srgb,currentColor 55%,transparent),inset 0 0 8px color-mix(in srgb,currentColor 30%,transparent)}
html[data-ico="box"] .ico,.cb-ico-opt[data-ico="box"] .ico{background:transparent!important;border:3px solid currentColor!important;border-radius:10px!important;font-weight:800}
html[data-ico="pill"] .ico,.cb-ico-opt[data-ico="pill"] .ico{width:auto!important;min-width:28px;height:22px!important;padding:0 8px;border-radius:999px!important;font-size:11px!important}
html[data-ico="dot"] .ico,.cb-ico-opt[data-ico="dot"] .ico{background:transparent!important;border-radius:50%!important;position:relative;color:transparent!important}
html[data-ico="dot"] .ico::before,.cb-ico-opt[data-ico="dot"] .ico::before{content:"";position:absolute;inset:auto;left:50%;top:50%;width:8px;height:8px;border-radius:50%;background:var(--c,#888);transform:translate(-50%,-50%);opacity:.95}

.cb-ico-opt .ico{transition:none}
html[data-ico] .cb-ico-opt[data-ico="soft"] .ico{background:color-mix(in srgb,var(--c) 15%,transparent)!important;border:0!important;border-radius:12px!important;box-shadow:none!important;color:var(--c)!important;width:30px!important;height:22px!important;height:30px!important}

/* Settings page cards: match the light settings surface (no grey cards) */
html body .cb-windows-settings .cb-personalization .card,html body .cb-windows-settings .card{background:#fff!important;color:#1b2230!important;border:1px solid #dfe5ee!important;box-shadow:0 1px 3px rgba(20,30,60,.06)!important}
html body .cb-windows-settings .card .muted,html body .cb-windows-settings .card .small{color:#5d6980!important}
html body .cb-windows-settings .card .seg{background:#eef2f8!important}
html body .cb-windows-settings .card .seg button{color:#39445a!important}
html body .cb-windows-settings .card .seg button.on{color:#1b2230!important}
html body .cb-windows-settings .cb-ico-opt{border-color:#dfe5ee!important}
html body .cb-windows-settings .cb-ico-opt small{color:#39445a}
html[data-ico="grad"] .ico,.cb-ico-opt[data-ico="grad"] .ico{color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.3)}

/* OS-flavoured category icon styles */
html[data-ico="google"] .ico,.cb-ico-opt[data-ico="google"] .ico{background:color-mix(in srgb,var(--c,currentColor) 24%,transparent)!important;border-radius:50%!important;font-weight:700;border:0!important;box-shadow:none!important}
html[data-ico="windows"] .ico,.cb-ico-opt[data-ico="windows"] .ico{background:color-mix(in srgb,var(--c,currentColor) 16%,rgba(255,255,255,.04))!important;border:1px solid color-mix(in srgb,var(--c,currentColor) 45%,transparent)!important;border-radius:5px!important;box-shadow:0 1px 0 rgba(255,255,255,.08) inset!important;font-weight:600}
html[data-ico="nothing"] .ico,.cb-ico-opt[data-ico="nothing"] .ico{background:#0b0b0c!important;color:#fff!important;border:1.5px dotted #f2f2f2!important;border-radius:50%!important;font-family:"Courier New",ui-monospace,monospace!important;text-transform:uppercase;letter-spacing:.5px;font-weight:700;box-shadow:inset 0 0 0 3px #0b0b0c,inset 0 0 0 4px var(--c,#ff2a2a)!important}
html[data-ico="samsung"] .ico,.cb-ico-opt[data-ico="samsung"] .ico{background:color-mix(in srgb,var(--c,currentColor) 34%,transparent)!important;border-radius:34%!important;width:44px!important;height:44px!important;font-size:14px!important;border:0!important;box-shadow:none!important;font-weight:700}
html[data-ico="xperia"] .ico,.cb-ico-opt[data-ico="xperia"] .ico{background:transparent!important;border:1px solid color-mix(in srgb,var(--c,currentColor) 80%,transparent)!important;border-radius:3px!important;font-weight:300!important;letter-spacing:.8px;box-shadow:none!important}

.cb-ico-opt[data-ico="samsung"] .ico{width:30px!important;height:30px!important;font-size:11px!important}

/* ===== Navigation icon styles (rail + pop-up menus) follow the icon style setting ===== */
.side .dock-ic>.dk:nth-child(1){--nc:#2f6fe8}.side .dock-ic>.dk:nth-child(2){--nc:#26a65b}.side .dock-ic>.dk:nth-child(3){--nc:#f0782c}.side .dock-ic>.dk:nth-child(4){--nc:#7c52e6}.side .dock-ic>.dk:nth-child(5){--nc:#646d80}
#dockPop .dp-t:nth-child(4n+1){--nc:#2f6fe8}#dockPop .dp-t:nth-child(4n+2){--nc:#26a65b}#dockPop .dp-t:nth-child(4n+3){--nc:#f0782c}#dockPop .dp-t:nth-child(4n+4){--nc:#7c52e6}
html:root:root:root:root[data-ico="google"] body .side .dock-ic .dk i,html:root:root:root:root[data-ico="google"] body #dockPop .dp-t i{background:color-mix(in srgb,var(--nc) 22%,transparent)!important;border-radius:50%!important;border:0!important;box-shadow:none!important}
html:root:root:root:root[data-ico="google"] body .side .dock-ic .dk i svg,html:root:root:root:root[data-ico="google"] body #dockPop .dp-t i svg{stroke:color-mix(in srgb,var(--nc) 80%,#000)!important;color:color-mix(in srgb,var(--nc) 80%,#000)!important}
html:root:root:root:root[data-ico="windows"] body .side .dock-ic .dk i,html:root:root:root:root[data-ico="windows"] body #dockPop .dp-t i{background:var(--nc)!important;border-radius:7px!important;border:0!important;box-shadow:0 1px 0 rgba(255,255,255,.25) inset!important}
html:root:root:root:root[data-ico="windows"] body .side .dock-ic .dk i svg,html:root:root:root:root[data-ico="windows"] body #dockPop .dp-t i svg{stroke:#fff!important;color:#fff!important}
html:root:root:root:root[data-ico="grad"] body .side .dock-ic .dk i,html:root:root:root:root[data-ico="grad"] body #dockPop .dp-t i{background:linear-gradient(160deg,color-mix(in srgb,var(--nc) 65%,#fff),var(--nc))!important;border-radius:30%!important;border:0!important;box-shadow:0 2px 6px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.4)!important}
html:root:root:root:root[data-ico="grad"] body .side .dock-ic .dk i svg,html:root:root:root:root[data-ico="grad"] body #dockPop .dp-t i svg{stroke:#fff!important;color:#fff!important}
html:root:root:root:root[data-ico="nothing"] body .side .dock-ic .dk i,html:root:root:root:root[data-ico="nothing"] body #dockPop .dp-t i{background:#0b0b0c!important;border:1.5px dotted #f2f2f2!important;border-radius:50%!important;box-shadow:inset 0 0 0 3px #0b0b0c,inset 0 0 0 4px #ff2a2a!important}
html:root:root:root:root[data-ico="nothing"] body .side .dock-ic .dk i svg,html:root:root:root:root[data-ico="nothing"] body #dockPop .dp-t i svg{stroke:#fff!important;color:#fff!important}
html:root:root:root:root[data-ico="samsung"] body .side .dock-ic .dk i,html:root:root:root:root[data-ico="samsung"] body #dockPop .dp-t i{background:color-mix(in srgb,var(--nc) 30%,transparent)!important;border-radius:36%!important;border:0!important;box-shadow:none!important}
html:root:root:root:root[data-ico="samsung"] body .side .dock-ic .dk i svg,html:root:root:root:root[data-ico="samsung"] body #dockPop .dp-t i svg{stroke:color-mix(in srgb,var(--nc) 85%,#000)!important;color:color-mix(in srgb,var(--nc) 85%,#000)!important}
html:root:root:root:root[data-ico="xperia"] body .side .dock-ic .dk i,html:root:root:root:root[data-ico="xperia"] body #dockPop .dp-t i{background:transparent!important;border:1px solid var(--nc)!important;border-radius:4px!important;box-shadow:none!important}
html:root:root:root:root[data-ico="xperia"] body .side .dock-ic .dk i svg,html:root:root:root:root[data-ico="xperia"] body #dockPop .dp-t i svg{stroke:var(--nc)!important;color:var(--nc)!important;stroke-width:1.3!important}
html:root:root:root:root[data-ico="glass"] body .side .dock-ic .dk i,html:root:root:root:root[data-ico="glass"] body #dockPop .dp-t i{background:rgba(255,255,255,.22)!important;border:1px solid rgba(255,255,255,.5)!important;border-radius:14px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html:root:root:root:root[data-ico="glass"] body .side .dock-ic .dk i svg,html:root:root:root:root[data-ico="glass"] body #dockPop .dp-t i svg{stroke:var(--nc)!important;color:var(--nc)!important}
html:root:root:root:root[data-ico="neon"] body .side .dock-ic .dk i,html:root:root:root:root[data-ico="neon"] body #dockPop .dp-t i{background:transparent!important;border:1.5px solid var(--nc)!important;border-radius:12px!important;box-shadow:0 0 10px color-mix(in srgb,var(--nc) 55%,transparent),inset 0 0 8px color-mix(in srgb,var(--nc) 30%,transparent)!important}
html:root:root:root:root[data-ico="neon"] body .side .dock-ic .dk i svg,html:root:root:root:root[data-ico="neon"] body #dockPop .dp-t i svg{stroke:var(--nc)!important;color:var(--nc)!important}
html:root:root:root:root[data-ico="plain"] body .side .dock-ic .dk i,html:root:root:root:root[data-ico="plain"] body #dockPop .dp-t i{background:transparent!important;border:0!important;box-shadow:none!important}
html:root:root:root:root[data-ico="plain"] body .side .dock-ic .dk i svg,html:root:root:root:root[data-ico="plain"] body #dockPop .dp-t i svg{stroke:var(--nc)!important;color:var(--nc)!important}

/* Calm, fast pop-up menu: no 3D rotation, no per-tile stagger */
html body #dockPop{animation:dpFast .14s cubic-bezier(.2,.8,.2,1) both!important;transform-origin:left center}
html body #dockPop.out{animation:dpFastOut .1s ease-in both!important}
html body #dockPop .dp-t{animation:none!important;transition:background-color .12s,transform .12s!important}
html body #dockPop .dp-t:hover{transform:none!important;box-shadow:none!important;background:rgba(128,128,128,.14)}
html body #dockPop .dp-t:active{transform:scale(.97)!important}
@keyframes dpFast{from{opacity:0;transform:translateX(-6px) scale(.97)}to{opacity:1;transform:none}}
@keyframes dpFastOut{to{opacity:0;transform:translateX(-4px) scale(.98)}}
/* Icon style change is instant, no morph */
.side .dk i,#dockPop .dp-t i,.ico{transition:none!important}
/* Rail buttons: quick press feedback only */
.side .dk{transition:transform .1s!important}.side .dk:active{transform:scale(.94)}
/* Page and sheet motion: shorter and lighter everywhere */
main.content.enter>*{animation-duration:.22s!important}
.enter .ob-dashboard .ob-panel{animation-duration:.28s!important}
@media(hover:none){.ob-panel,.cbcf,.side{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}

/* Bottom rail actions: neat pill with three small animated buttons */
html:root:root:root body .side .dock-foot{display:flex!important;flex-direction:row!important;align-items:center;justify-content:center;gap:2px!important;width:auto!important;margin:0 auto 4px!important;padding:3px!important;border-radius:999px;background:color-mix(in srgb,var(--ob-ink,#fff) 8%,transparent);border:1px solid color-mix(in srgb,var(--ob-ink,#fff) 12%,transparent)}
html:root:root:root body .side .dock-foot .dk{width:24px!important;height:24px!important;flex:0 0 24px!important;border-radius:50%!important;padding:0!important;display:grid!important;place-items:center;position:relative;transition:background-color .18s,transform .18s cubic-bezier(.2,.8,.2,1)!important}
html:root:root:root body .side .dock-foot .dk i{width:24px!important;height:24px!important;border-radius:50%!important;display:grid;place-items:center;background:none!important;border:0!important;box-shadow:none!important;outline:0!important}
html:root:root:root body .side .dock-foot .dk i svg{width:14px!important;height:14px!important;stroke-width:2!important;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
@media(hover:hover){html:root:root:root body .side .dock-foot .dk:hover{background:color-mix(in srgb,var(--ob-ink,#fff) 16%,transparent)}}
html:root:root:root body .side .dock-foot .dk:active{transform:scale(.88)!important}
/* + turns into x-shape on press, soft breathing ring to invite a tap */
html:root:root:root body .side .dock-foot .dk.add i svg{transform:rotate(0)}
html:root:root:root body .side .dock-foot .dk.add:hover i svg,html:root:root:root body .side .dock-foot .dk.add:active i svg{transform:rotate(90deg)}
html:root:root:root body .side .dock-foot .dk.add::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:1.5px solid var(--accent,#ff8d3b);opacity:0;animation:addRing 3.2s ease-out 1.5s infinite;pointer-events:none}
@keyframes addRing{0%{transform:scale(.8);opacity:.7}60%,100%{transform:scale(1.35);opacity:0}}
/* theme button: moon/sun swing on press */
html:root:root:root body .side .dock-foot .dk[data-act="theme-toggle"]:active i svg{transform:rotate(-40deg) scale(1.15)}
html:root:root:root body .side .dock-foot .dk[data-act="theme-toggle"]:hover i svg{transform:rotate(-18deg)}
/* logout arrow nudges out */
html:root:root:root body .side .dock-foot .dk:last-child:hover i svg{transform:translateX(2px)}
html:root:root:root body .side .dock-foot .dk:last-child:active i svg{transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){html:root:root:root body .side .dock-foot .dk.add::after{animation:none}}
html:root:root:root body .side .dock-foot{padding:2px!important;gap:0!important;max-width:100%;box-sizing:border-box}
html:root:root:root body .side .dock-foot .dk,html:root:root:root body .side .dock-foot .dk i{width:22px!important;height:22px!important;flex:0 0 22px!important}
html:root:root:root body .side .dock-foot .dk i svg{width:13px!important;height:13px!important}
/* Wider slim rail so the three action buttons sit in one row */
@media(min-width:700px){
  html:root.cb-obsidian:not(.gapp):not(.mapp):not(.x) body .shell{grid-template-columns:80px minmax(0,1fr)!important}
  html:root.cb-obsidian body .side{padding-left:5px!important;padding-right:5px!important}
}
@media(min-width:700px){
  html:root.cb-obsidian:not(.gapp):not(.mapp):not(.x) body .side{width:100%!important;max-width:none!important;padding:9px 4px!important;justify-self:stretch!important}
  html:root.cb-obsidian:not(.gapp):not(.mapp):not(.x) body .side .dock-rail{width:100%!important}
  html:root.cb-obsidian:not(.gapp):not(.mapp):not(.x) body .side .dock-foot{width:auto!important}
}

/* Highlight colour (amounts, chart bars, active tabs) */
.cb-hl-row{display:flex;flex-wrap:wrap;gap:10px}
.cb-hl{width:34px;height:34px;border-radius:50%;background:var(--sw);border:2px solid transparent;cursor:pointer;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);transition:transform .12s}
.cb-hl:active{transform:scale(.9)}
.cb-hl.on{border-color:#1b2230;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--sw)}
html:root:root[data-hl]{--g1:var(--hl)!important;--g2:var(--hl)!important;--g3:var(--hl)!important;--g4:var(--hl)!important}
html:root:root[data-hl] .cbcf{--cf-income:var(--hl)!important;--cf-expense:color-mix(in srgb,var(--hl) 42%,var(--cf-bg))!important}
html:root:root[data-hl] .cbcf .cbcf-period button[aria-pressed=true]{background:var(--hl)!important;color:#10131a!important}

/* More highlight colours + custom picker */
.cb-hl-row{gap:8px}
.cb-hl{width:30px;height:30px}
.cb-hl-custom{position:relative;display:grid;place-items:center;overflow:hidden;background:conic-gradient(#f66,#fc4,#4d8,#4cf,#86f,#f6c,#f66)!important}
.cb-hl-custom input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.cb-hl-custom span{font-weight:700;font-size:16px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);pointer-events:none}
.cb-hl-custom.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--sw)}

/* Settings page: one smooth fade-up for the whole page, no per-element animation, cheaper painting */
main.content.enter>#view-settings{animation:stIn .24s cubic-bezier(.2,.8,.2,1) both!important;animation-delay:0s!important;will-change:opacity,transform}
main.content.enter #view-settings *{animation:none!important}
#view-settings .cb-personalization .card{content-visibility:auto;contain-intrinsic-size:auto 180px}
#view-settings .cb-theme-tile,#view-settings .cb-settings-monitor{contain:paint}
#view-settings .cb-settings-monitor-wrap *{transition:none!important}
#view-settings *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
@keyframes stIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---- macOS Graphite: Obsidian layout in true macOS dark mode ---- */
html:root.cb-graphite{--ob-blue:#0a84ff;--ob-frame:rgba(255,255,255,.10);--ob-bg:rgba(28,28,30,.78);--ob-panel:rgba(44,44,46,.74);--ob-raised:rgba(58,58,60,.85);--ob-line:rgba(255,255,255,.09);--ob-ink:#f5f5f7;--ob-muted:#98989f;color-scheme:dark}
html:root.cb-graphite.cb-graphite body{background:radial-gradient(1200px 700px at 15% 0%,#3a3f4d 0%,transparent 60%),linear-gradient(150deg,#26282f 0%,#18191d 55%,#0f1013 100%) fixed!important}
html:root.cb-graphite.cb-graphite .shell{background:var(--ob-bg)!important;border:1px solid rgba(255,255,255,.12)!important;box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08)!important}
html:root.cb-graphite.cb-graphite .side{background:rgba(60,60,64,.38)!important;border:1px solid rgba(255,255,255,.08)!important;-webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6)}
html:root.cb-graphite.cb-graphite :is(.ob-panel,.ob-dashboard section,.cbcf,.ob-revenue){background:var(--ob-panel)!important;border:1px solid var(--ob-line)!important;box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 8px 24px rgba(0,0,0,.28)!important}
html:root.cb-graphite.cb-graphite :is(h1,h2,h3,.ttl,.sub){color:var(--ob-ink)}
html:root.cb-graphite.cb-graphite .sub{color:var(--ob-muted)}
html:root.cb-graphite:not([data-hl]){--g1:#0a84ff;--g2:#409cff;--g3:#0a84ff;--g4:#64d2ff}
html:root.cb-graphite.cb-graphite body .side .dk.on i{outline:2px solid rgba(255,255,255,.55);outline-offset:2px}

/* ---- Ubuntu Yaru Dark: Obsidian layout in Ubuntu aubergine + orange ---- */
html:root.cb-yaru-dark{--ob-blue:#e95420;--ob-frame:rgba(255,255,255,.12);--ob-bg:rgba(48,10,36,.80);--ob-panel:rgba(74,26,62,.62);--ob-raised:rgba(94,39,80,.72);--ob-line:rgba(255,255,255,.11);--ob-ink:#fbf4f8;--ob-muted:#cdb0c4;color-scheme:dark}
html:root.cb-yaru-dark.cb-yaru-dark body{background:radial-gradient(1100px 700px at 12% 0%,#77216f 0%,transparent 62%),linear-gradient(150deg,#5e2750 0%,#2c001e 60%,#1d0014 100%) fixed!important}
html:root.cb-yaru-dark.cb-yaru-dark .shell{background:var(--ob-bg)!important;border:1px solid rgba(255,255,255,.14)!important;box-shadow:0 30px 80px rgba(20,0,14,.6),inset 0 1px 0 rgba(255,255,255,.08)!important}
html:root.cb-yaru-dark.cb-yaru-dark .side{background:rgba(33,0,24,.45)!important;border:1px solid rgba(255,255,255,.09)!important}
html:root.cb-yaru-dark.cb-yaru-dark :is(.ob-panel,.ob-dashboard section,.cbcf,.ob-revenue){background:var(--ob-panel)!important;border:1px solid var(--ob-line)!important;box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 8px 24px rgba(20,0,14,.35)!important}
html:root.cb-yaru-dark.cb-yaru-dark :is(h1,h2,h3,.ttl){color:var(--ob-ink)}
html:root.cb-yaru-dark.cb-yaru-dark .sub{color:var(--ob-muted)}
html:root.cb-yaru-dark:not([data-hl]){--g1:#e95420;--g2:#f4895f;--g3:#e95420;--g4:#ffb07a}
html:root.cb-yaru-dark.cb-yaru-dark body .side .dk.on i{outline:2px solid #e95420;outline-offset:2px}

/* ---- Ubuntu Yaru (white): aubergine wallpaper, white surfaces, orange accent ---- */
html:root.cb-yaru:not(.cb-yaru-dark){--ob-blue:#e95420;--ob-frame:rgba(255,255,255,.5);--ob-bg:#faf7f9;--ob-panel:#ffffff;--ob-raised:#ffffff;--ob-line:rgba(60,20,50,.12);--ob-ink:#2c001e;--ob-muted:#7a6572;color-scheme:light}
html:root.cb-yaru:not(.cb-yaru-dark).cb-yaru body{background:radial-gradient(1100px 700px at 12% 0%,#8d2f7f 0%,transparent 62%),linear-gradient(150deg,#77216f 0%,#3d0a2e 60%,#2c001e 100%) fixed!important}
html:root.cb-yaru:not(.cb-yaru-dark).cb-yaru .shell{background:#f6f2f5!important;border:1px solid rgba(255,255,255,.35)!important;box-shadow:0 30px 80px rgba(30,0,22,.55)!important}
html:root.cb-yaru:not(.cb-yaru-dark).cb-yaru .side{background:#ffffff!important;border:1px solid rgba(60,20,50,.10)!important}
html:root.cb-yaru:not(.cb-yaru-dark).cb-yaru :is(.ob-panel,.ob-dashboard section,.cbcf,.ob-revenue){background:#fff!important;border:1px solid var(--ob-line)!important;box-shadow:0 6px 18px rgba(60,20,50,.08)!important}
html:root.cb-yaru:not(.cb-yaru-dark).cb-yaru :is(h1,h2,h3,.ttl){color:#2c001e}
html:root.cb-yaru:not(.cb-yaru-dark).cb-yaru .sub{color:#7a6572}
html:root.cb-yaru:not(.cb-yaru-dark):not([data-hl]){--g1:#e95420;--g2:#f4895f;--g3:#e95420;--g4:#c34113}
html:root.cb-yaru:not(.cb-yaru-dark).cb-yaru body .side .dk.on i{outline:2px solid #e95420;outline-offset:2px}

/* Yaru: the three headline figures share one colour */
html:root.cb-yaru.cb-yaru .cbcf .cbcf-stat strong,html:root.cb-yaru.cb-yaru .cbcf .cbcf-stat.income strong,html:root.cb-yaru.cb-yaru .cbcf .cbcf-stat.expenses strong,html:root.cb-yaru.cb-yaru .cbcf .cbcf-stat.net strong{color:#e95420!important}