/* New pieces (add-card list, open entry, profile menu). Kept on in both looks of the preview. */
:root{--s-bg:#f8f7f4;--s-card:#fff;--s-track:#f1efea;--s-hair:rgba(40,30,20,.075);--s-dot:#d9d6cb;--s-whisper:0 1px 2px rgba(40,30,20,.05),0 8px 22px -12px rgba(40,30,20,.17);--s-fade:color-mix(in srgb,#fff 97%,#e9e2d8);--s-brand:#bf1240}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--s-bg:#121110;--s-card:#252320;--s-track:#2a2725;--s-hair:rgba(255,255,255,.09);--s-dot:#55514d;--s-whisper:0 1px 2px rgba(0,0,0,.25),0 8px 20px -14px rgba(0,0,0,.6);--s-fade:#22201d;--s-brand:#e0285a}}
:root[data-theme="dark"]{--s-bg:#121110;--s-card:#252320;--s-track:#2a2725;--s-hair:rgba(255,255,255,.09);--s-dot:#55514d;--s-whisper:0 1px 2px rgba(0,0,0,.25),0 8px 20px -14px rgba(0,0,0,.6);--s-fade:#22201d;--s-brand:#e0285a}
/* ===== iPhone was enlarging text on its own; keep every font at its set size ===== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ===== Add a card: fits above the keyboard, slim white search, list results ===== */
@media(max-width:760px){#as .phone{height:calc(100% - 12px)}}
#as .x{width:36px;height:36px;background:var(--s-card);border:1px solid var(--s-hair);color:var(--text)}
#as .x svg{width:13px;height:13px}
#as .search{height:44px;border-radius:14px;background:var(--s-card);border:1.5px solid var(--s-hair);margin-top:8px}
#as .search:focus-within{border-color:var(--brand)}
#as .search svg{width:17px;height:17px}
#as .search input{font-size:16px}
#as .chips{min-height:0;padding:8px 0 2px}
#as .chips:empty{padding:0}
#as .chip{height:28px;font-size:12.5px;background:var(--s-card);border-color:var(--s-hair)}
#as #as-s1 .body{-webkit-mask:linear-gradient(transparent,#000 10px);mask:linear-gradient(transparent,#000 10px);padding-top:4px}
#as #as-go{display:none}
#as .lsl{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:8px 2px 6px}
#as .lst{background:var(--s-card);border:1px solid var(--s-hair);border-radius:16px;box-shadow:var(--s-whisper);overflow:hidden}
#as .li{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;background:none;padding:9px 12px;border-bottom:1px dotted var(--s-dot);transition:background .15s;-webkit-tap-highlight-color:transparent}
#as .li:last-child{border-bottom:0}
#as .li:active,#as .li.on{background:color-mix(in srgb,var(--brand) 7%,transparent)}
@media(hover:hover){#as .li:hover{background:color-mix(in srgb,var(--brand) 5%,transparent)}}
#as .li .art{width:32px;aspect-ratio:5/7;border-radius:4px;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
#as .li .t{flex:1;min-width:0;display:grid}
#as .li .n{font-weight:800;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#as .li .m{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#as .li .bm{color:var(--green);font-weight:800;font-size:11px;margin-left:8px}
#as .li .go{width:7px;height:7px;border-right:1.8px solid var(--muted);border-top:1.8px solid var(--muted);transform:rotate(45deg);flex:none;margin-right:4px}
#as .addtyped{background:var(--s-card);border-color:var(--s-hair)}
#as .none{margin-top:18px}

/* ===== Open entry: stays white, details as small labeled stats, quiet pill buttons ===== */
.ct-demo .ct-row.expanded,.ct-demo .ct-row:hover{background:var(--s-card)}
.ct-demo .ct-row.expanded .ct-art-ph,.ct-demo .ct-row:hover .ct-art-ph{background:var(--s-track)}
.ct-demo .ct-stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:8px 12px;border-top:1px dotted var(--s-dot);padding-top:10px;margin-top:2px}
.ct-demo .ct-stats-row>div{min-width:0}
.ct-demo .ct-stats-row small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ct-muted);white-space:nowrap}
.ct-demo .ct-stats-row span{display:block;font-size:13.5px;font-weight:700;color:var(--ct-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-demo .ct-stats-row em{display:block;font-style:normal;font-size:11px;color:var(--ct-muted)}
.ct-demo .ct-pct{font-size:11.5px;color:var(--ct-muted);margin-top:6px}
.ct-demo .ct-demo-actions{display:flex;gap:8px;margin-top:12px}
.ct-demo .ct-demo-actions button{flex:1;height:34px;padding:0 10px;border-radius:999px;border:1px solid var(--s-hair);background:var(--s-card);font-size:12.5px;font-weight:700;color:var(--ct-text);white-space:nowrap}
.ct-demo .ct-demo-actions button[data-act="del"]{flex:0 0 auto;border-color:transparent;background:none;color:var(--s-brand)}
@media(hover:hover){.ct-demo .ct-demo-actions button:hover{background:var(--s-bg)}.ct-demo .ct-demo-actions button[data-act="del"]:hover{background:color-mix(in srgb,var(--s-brand) 8%,transparent)}}

/* ===== Profile menu: the same menu as Card Board and Stories ===== */
.app-menu.am{--am-hl:color-mix(in srgb,var(--text) 6%,transparent);width:auto;min-width:280px;max-width:calc(100vw - 24px);max-height:min(78vh,620px);background:var(--s-card);border:1px solid var(--s-hair);border-radius:16px;padding:6px;box-shadow:0 14px 34px rgba(0,0,0,.18);font-family:inherit;animation:amIn .22s cubic-bezier(.2,.8,.2,1) both;transform-origin:top right}
.app-menu.am>*{animation:amItem .26s cubic-bezier(.2,.8,.2,1) both}
.app-menu.am>*:nth-child(2){animation-delay:.02s}.app-menu.am>*:nth-child(3){animation-delay:.04s}.app-menu.am>*:nth-child(4){animation-delay:.06s}.app-menu.am>*:nth-child(5){animation-delay:.08s}.app-menu.am>*:nth-child(6){animation-delay:.1s}
@keyframes amIn{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
@keyframes amItem{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@keyframes amPop{from{opacity:0;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%)}}
.app-menu.am .amh{display:flex;align-items:center;gap:12px;padding:10px;margin:0 0 2px;border:0;flex-direction:row}
.app-menu.am .av{display:grid;place-items:center;border-radius:50%;background:var(--s-brand);color:#fff;font-weight:800;background-size:cover;background-position:center}
.app-menu.am .av.lg{width:42px;min-width:42px;height:42px;font-size:17px}
.app-menu.am .amh-t{display:grid;min-width:0;flex:1}
.app-menu.am .amh b{display:flex;align-items:center;gap:8px;font-size:15px;white-space:nowrap}
.app-menu.am .amh .am-nm{font-size:15px;font-weight:800}
.app-menu.am .amh small{font-size:12.5px;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-menu.am .am-plan{border-bottom:0;border-top:1px solid var(--s-hair);margin:0;padding:10px}
.app-menu.am .am-plan[hidden]{display:none}
.app-menu.am .amg{border-top:1px solid var(--s-hair);padding:4px 0}
.app-menu.am .amg button{display:flex;align-items:center;justify-content:flex-start;gap:12px;width:100%;border:0;background:none;text-align:left;font:inherit;font-weight:650;font-size:14px;padding:9px 10px;border-radius:10px;color:var(--text);cursor:pointer;-webkit-tap-highlight-color:transparent}
.app-menu.am .amg button[hidden]{display:none}
.app-menu.am .amg button>span{flex:1;min-width:0}
.app-menu.am .amg button:hover,.app-menu.am .amg button:focus-visible{background:var(--am-hl);outline:0}
.app-menu.am .mi{flex:none;color:var(--muted)}
.app-menu.am .amg button:hover .mi{color:var(--text)}
.app-menu.am .amgo button.here{color:var(--muted);cursor:default}
.app-menu.am .amgo button.here::after{content:"You're here";margin-left:auto;font-size:11.5px;font-weight:750;color:var(--s-brand)}
.app-menu.am .amgo button.here:hover{background:none}
.app-menu.am .amr{display:flex;align-items:center;gap:12px;padding:7px 10px;font-weight:650;font-size:14px}
.app-menu.am .amr[hidden]{display:none}
.app-menu.am .amr>span{flex:1}
.app-menu.am .seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;padding:3px;flex:none;min-width:186px;background:var(--s-track);border-radius:999px}
.app-menu.am .amr .seg button{width:auto;display:block;text-align:center;padding:5px 9px;font-size:12px;font-weight:750;border-radius:999px;color:var(--muted);justify-content:center}
.app-menu.am .amr .seg button:hover{background:none;color:var(--text)}
.app-menu.am .amr .seg button[aria-checked="true"]{background:var(--s-card);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.app-menu.am .swt{width:42px;height:26px;padding:2px;border-radius:999px;background:var(--s-dot);flex:none;transition:background .2s;display:block;border:0}
.app-menu.am .swt i{display:block;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.app-menu.am .swt[aria-checked="true"]{background:var(--green)}
.app-menu.am .swt[aria-checked="true"] i{transform:translateX(16px)}
.app-menu.am .am-dev{border-top:1px solid var(--s-hair);margin-top:0}
.am-bd{position:fixed;inset:0;z-index:49;background:rgba(10,10,10,.32);animation:amFade .22s ease both}
@keyframes amFade{from{opacity:0}}
@media(min-width:761px){.am-bd{display:none}}
@media(max-width:760px){
  .app-menu.am:not([hidden]){position:fixed;left:50%!important;top:50%!important;right:auto;transform:translate(-50%,-50%);width:min(360px,calc(100vw - 32px));max-height:calc(100dvh - 48px);overflow:auto;overscroll-behavior:contain;animation:amPop .26s cubic-bezier(.2,.8,.2,1) both;transform-origin:50% 50%}
  html.am-lock,html.am-lock body{overflow:hidden}
}
@media(prefers-reduced-motion:reduce){.app-menu.am,.app-menu.am>*,.am-bd{animation:none!important}}
.app-menu.am .amr button.swt{width:42px;height:26px;padding:2px;display:block;border-radius:999px;flex:none}
.app-menu.am .amr button.swt:hover{background:var(--s-dot)}.app-menu.am .amr button.swt[aria-checked="true"]:hover{background:var(--green)}
.app-menu.am .amgo button.here:focus-visible{background:none}

/* ===== Sheets move exactly like the board's: up from the bottom on phones, a soft rise on desktop, and they slide away on close ===== */
@keyframes ct-shUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes ct-shDown{to{transform:translateY(100%)}}
@keyframes ct-sheetIn{from{opacity:0;transform:translateY(22px) scale(.97)}45%{opacity:1}to{opacity:1;transform:none}}
@keyframes ct-sheetOut{to{opacity:0;transform:translateY(6px) scale(.98)}}
@keyframes ct-bdIn{from{opacity:0}}
@keyframes ct-bdOut{to{opacity:0}}
/* desktop: a slower, softer rise (opacity eases in quicker than the movement, so it never looks like a pop) */
#as .phone,.ed .ed-form{animation:ct-sheetIn .52s cubic-bezier(.16,1,.3,1) both}
#as.closing .phone,.ed.closing .ed-form{animation:ct-sheetOut .24s cubic-bezier(.4,0,1,1) both}
#as[open]::backdrop,.ed[open]::backdrop{animation:ct-bdIn .45s ease-out both}
#as.closing::backdrop,.ed.closing::backdrop{animation:ct-bdOut .19s ease both}
#as.closing,.ed.closing{pointer-events:none}
@media(max-width:760px){
  #as .phone,.ed .ed-form{animation:ct-shUp .42s cubic-bezier(.2,.8,.2,1) both}
  #as.closing .phone,.ed.closing .ed-form{animation:ct-shDown .22s ease-in both}
}
@media(prefers-reduced-motion:reduce){#as .phone,.ed .ed-form,#as::backdrop,.ed::backdrop{animation:none!important}}

/* ===== Add a card on phones: anchored to the top so the keyboard only ever changes the hidden bottom edge;
   it slides as one layer, and slides fully off screen on close even when it's been shortened above the keyboard ===== */
@keyframes ct-shDownFar{to{transform:translateY(100vh)}}
@keyframes ct-shUpFar{from{transform:translateY(100vh)}to{transform:none}}
@media(max-width:760px){
  #as[open]{align-items:flex-start}
  #as .phone{margin-top:12px;height:calc(100% - 12px)}
  #as .phone{animation:ct-shUpFar .42s cubic-bezier(.2,.8,.2,1) both}
  #as.moving .phone,#as.closing .phone{will-change:transform}
  #as.closing .phone{animation:ct-shDownFar .26s cubic-bezier(.4,0,1,1) both}
}
/* sheets keep touches to themselves (no page lock: switching the page's overflow on open forced a full relayout on iPhone) */
#as,.ed{overscroll-behavior:contain;touch-action:pan-y}

#as .sheet:focus{outline:none}

/* preview-only helper chip (?preview) */
.pv-chip{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:45;height:40px;padding:0 18px;border-radius:999px;border:1px solid var(--s-hair);background:var(--s-card);color:var(--ct-text);font:inherit;font-weight:800;font-size:13px;box-shadow:0 8px 22px -12px rgba(0,0,0,.35);white-space:nowrap;cursor:pointer}

/* Appearance: the Light / Dark / Auto switch sits on its own line under the label, so the menu never runs wider than the screen */
.app-menu.am{overflow-x:hidden}
.app-menu.am .amr.amth{flex-wrap:wrap;row-gap:8px;padding-bottom:10px}
.app-menu.am .amr.amth>span{flex:1 1 auto}
.app-menu.am .amr.amth .seg{flex:0 0 calc(100% - 30px);min-width:0;margin-left:30px}
.app-menu.am .amr.amth .seg button{padding:0 10px;height:32px;font-size:13px}

/* ---------- monthly budget ---------- */
:root{--bu-ok:#3f7a22;--bu-okbg:#e9f3dd;--bu-warn:#b8650a;--bu-warnbg:#fbeed9;--bu-over:#b42a3f;--bu-overbg:#fbe4e8}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bu-ok:#91c85b;--bu-okbg:#1e3519;--bu-warn:#f0a548;--bu-warnbg:#3a2a14;--bu-over:#f08aa0;--bu-overbg:#3a1820}}
:root[data-theme="dark"]{--bu-ok:#91c85b;--bu-okbg:#1e3519;--bu-warn:#f0a548;--bu-warnbg:#3a2a14;--bu-over:#f08aa0;--bu-overbg:#3a1820}
.ct-budget{position:relative;margin-top:12px;border-radius:20px;background:linear-gradient(180deg,var(--s-card) 55%,var(--s-fade));border:1px solid var(--s-hair);box-shadow:var(--s-whisper)}
.ct-budget[hidden]{display:none}
.ct-budget .bu-open{display:flex;flex-direction:column;gap:10px;width:100%;padding:14px 16px 13px;border:0;background:none;color:var(--ct-text);font:inherit;text-align:left;cursor:pointer;border-radius:inherit;-webkit-tap-highlight-color:transparent}
.ct-budget .bu-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ct-budget .bu-t{font-weight:800;font-size:14.5px;letter-spacing:-.01em}
.ct-budget .bu-chip{flex:none;height:24px;padding:0 10px;border-radius:999px;display:inline-flex;align-items:center;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;background:var(--bu-okbg);color:var(--bu-ok);white-space:nowrap}
.ct-budget .bu-bar{display:block;height:8px;border-radius:999px;background:var(--s-track);overflow:hidden}
.ct-budget .bu-bar i{display:block;height:100%;border-radius:inherit;background:var(--bu-ok);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1),background-color .3s}
.ct-budget .bu-foot{font-size:12.5px;color:var(--ct-muted);font-weight:650;font-variant-numeric:tabular-nums}
.ct-budget .bu-foot b{color:var(--ct-text);font-weight:800}
.ct-budget.is-warn .bu-chip{background:var(--bu-warnbg);color:var(--bu-warn)}.ct-budget.is-warn .bu-bar i{background:var(--bu-warn)}
.ct-budget.is-over .bu-chip{background:var(--bu-overbg);color:var(--bu-over)}.ct-budget.is-over .bu-bar i{background:var(--bu-over)}
.ct-budget.is-unset{background:transparent;box-shadow:none;border:1.5px dashed var(--s-dot)}
.ct-budget.is-unset .bu-open{gap:3px;padding-right:48px}
.ct-budget.is-unset .bu-s{font-size:12.5px;color:var(--ct-muted);font-weight:600}
.ct-budget .bu-x{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;border:0;background:transparent;color:var(--ct-muted);font-size:12px;font-weight:800;cursor:pointer}
@media (hover:hover) and (pointer:fine){.ct-budget:not(.is-unset):hover{border-color:var(--s-ctl-line)}.ct-budget .bu-x:hover{background:var(--s-track)}}
.app-menu.am .am-val{margin-left:auto;font-style:normal;font-weight:750;font-size:13px;color:var(--muted)}
/* the heads-up note */
.bu-note{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;align-items:center;gap:12px;width:min(420px,calc(100vw - 28px));padding:12px 16px 12px 12px;border-radius:18px;background:var(--s-pop,var(--s-card));border:1px solid var(--s-hair);box-shadow:0 14px 34px -12px rgba(0,0,0,.4);color:var(--ct-text);transform:translate(-50%,16px);opacity:0;transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .2s;cursor:pointer}
.bu-note.on{transform:translate(-50%,0);opacity:1}
.bu-note[hidden]{display:none}
.bu-note i{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;background:var(--bu-warnbg);color:var(--bu-warn)}
.bu-note.is-over i{background:var(--bu-overbg);color:var(--bu-over)}
.bu-note b{display:block;font-size:14px}.bu-note span span{display:block;font-size:12.5px;color:var(--ct-muted);font-weight:600}
/* the sheet */
.bu-sheet{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;margin:0;color:var(--ct-text)}
.bu-sheet::backdrop{background:rgba(10,8,6,.42);animation:ct-bdIn .3s ease-out both}
.bu-sheet[open]{display:grid;place-items:center}
.bu-p{width:min(400px,calc(100vw - 32px));background:var(--s-bg,#f8f7f4);border-radius:26px;padding:16px 20px 20px;box-shadow:0 24px 60px rgba(0,0,0,.3);animation:ct-sheetIn .45s cubic-bezier(.16,1,.3,1) both}
@media(max-width:760px){.bu-sheet[open]{place-items:end stretch}.bu-p{width:100%;border-radius:26px 26px 0 0;padding-bottom:max(22px,env(safe-area-inset-bottom,0px));animation:ct-shUp .42s cubic-bezier(.2,.8,.2,1) both}}
:root:not([data-theme="light"]) .bu-p{background:var(--s-bg)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bu-p{background:#1c1a18}}
:root[data-theme="dark"] .bu-p{background:#1c1a18}
.bu-hd{display:flex;align-items:center;justify-content:space-between}
.bu-hd h2{margin:0;font-size:19px;font-weight:800;letter-spacing:-.01em}
.bu-xx{width:32px;height:32px;border-radius:50%;border:1px solid var(--s-hair);background:var(--s-ctl,var(--s-card));color:var(--ct-muted);font-weight:800;font-size:12px;cursor:pointer}
.bu-amt{display:flex;align-items:baseline;justify-content:center;gap:2px;margin:22px 0 2px;font-size:52px;font-weight:800;letter-spacing:-.04em;cursor:text}
.bu-amt span{font-size:30px;color:var(--ct-muted)}
.bu-amt input{width:3.4ch;min-width:1.4ch;border:0;background:transparent;color:var(--ct-text);font:inherit;letter-spacing:inherit;text-align:left;padding:0;outline:none;font-variant-numeric:tabular-nums}
.bu-amt input::placeholder{color:var(--ct-muted);opacity:.5}
.bu-per{text-align:center;margin:0 0 16px;color:var(--ct-muted);font-size:13px;font-weight:700}
.bu-quick{display:flex;gap:8px;justify-content:center;margin-bottom:14px;flex-wrap:wrap}
.bu-quick button{height:36px;padding:0 16px;border-radius:999px;border:1px solid var(--s-hair);background:var(--s-ctl,var(--s-card));color:var(--ct-text);font:inherit;font-weight:800;font-size:13px;cursor:pointer}
.bu-quick button[aria-pressed="true"]{background:var(--ct-text);color:var(--s-bg,#fff);border-color:transparent}
.bu-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;border-top:1px solid var(--s-hair);font-weight:750;font-size:14px}
.bu-opt small{display:block;color:var(--ct-muted);font-weight:600;font-size:12px}
.bu-opt .swt{width:46px;height:28px;padding:3px;border-radius:999px;border:0;background:var(--s-dot);flex:none;cursor:pointer;transition:background .2s}
.bu-opt .swt i{display:block;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.bu-opt .swt[aria-checked="true"]{background:#5aa534}.bu-opt .swt[aria-checked="true"] i{transform:translateX(18px)}
.bu-save{width:100%;height:50px;margin-top:6px;border-radius:999px;border:0;background:var(--s-brand,#b0123d);color:#fff;font:inherit;font-weight:800;font-size:15px;cursor:pointer}
.bu-save:disabled{opacity:.45;cursor:default}
.bu-off{display:block;margin:10px auto 0;height:36px;padding:0 14px;border:0;background:none;color:var(--ct-muted);font:inherit;font-weight:750;font-size:13px;cursor:pointer}
.bu-p:focus{outline:none}

/* budget v2: roomier card, a press you can feel, and a centered window that sits in the visible part of the screen */
.ct-budget{margin-top:16px;margin-bottom:16px;transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.ct-budget:active:not(.is-unset){transform:scale(.985)}
.ct-budget .bu-open{gap:14px;padding:18px 18px 16px}
.ct-budget.is-unset .bu-open{gap:5px;padding:16px 50px 16px 18px}
@media(max-width:760px){.ct-budget .bu-open{gap:15px;padding:18px 18px 20px}.ct-budget .bu-bar{height:9px}}
html.bu-lock,html.bu-lock body{overflow:hidden;overscroll-behavior:none}
.bu-sheet{position:fixed;inset:0 0 auto 0;height:100%;overflow:hidden;overscroll-behavior:contain}
.bu-sheet[open]{display:grid!important;place-items:center!important;padding:16px}
.bu-p{width:min(400px,100%)!important;border-radius:26px!important;max-height:calc(100% - 8px);overflow:auto;animation:none!important;padding-bottom:20px!important;will-change:transform,opacity}
.bu-amt input{caret-color:var(--s-brand,#b0123d)}
.bu-amt input:focus,.bu-amt input:focus-visible{outline:none!important;box-shadow:none!important}
.bu-amt input::selection{background:color-mix(in srgb,var(--s-brand,#b0123d) 16%,transparent);color:inherit}

/* ---------- phones: the slim search bar that slides back in when you scroll up ---------- */
.ct-stick{display:none}
@media(max-width:760px){
  .ct-stick{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;position:fixed;left:0;right:0;top:0;z-index:40;
    padding:calc(env(safe-area-inset-top,0px) + 10px) max(12px,env(safe-area-inset-right,0px)) 10px max(12px,env(safe-area-inset-left,0px));
    transform:translate3d(0,-100%,0);pointer-events:none;will-change:transform;transition:transform .8s cubic-bezier(.4,0,.2,1)}
  .ct-stick.on{transform:none;pointer-events:auto;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
  .ct-demo .ct-stick .ct-stick-q{grid-column:1 / -1;grid-row:1;display:flex;align-items:center;gap:8px;width:auto!important;min-width:0;margin:0;flex:none;height:44px;padding:0 56px 0 16px!important}
  .ct-demo .ct-stick .ct-stick-q input{flex:1;min-width:0;border:0;background:transparent;color:var(--ct-text);font:inherit;font-size:15px;outline:none;padding:0}
  .ct-demo .ct-stick .ct-stick-q input::placeholder{color:var(--ct-muted)}
  .ct-demo .ct-stick .ct-stick-add{grid-column:2;grid-row:1;justify-self:end;position:relative;z-index:2;margin:0;width:44px;height:44px;min-width:0;padding:0!important;display:flex;align-items:center;justify-content:center;border-radius:50%!important}
  .ct-demo .ct-stick .ct-stick-add .ct-ic{width:17px;height:17px;stroke-width:2.6}
}
@media (prefers-reduced-motion:reduce){.ct-stick,.ct-stick.on{transition-duration:.01s!important}}

@media(max-width:760px){
  /* the bar's frosted background is its own layer, so it can melt away as the bar docks into the header */
  .ct-stick::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--s-bg,#f8f7f4) 86%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--s-hair);box-shadow:0 6px 24px rgba(0,0,0,.06);opacity:calc(1 - var(--dock,0))}
  .ct-stick.snap,.ct-stick.snap.on{transition:none!important}
  .ct-demo .ct-demo-top.stick-away .ct-search,.ct-demo .ct-demo-top.stick-away .ct-add{visibility:hidden}
}
/* budget ruler (v30): swipe a ruler under a fixed needle; $5 per tick, it stops at each $50, faster on repeated swipes */
.bu-per{margin-bottom:10px}
.bu-ru{position:relative;height:74px;margin:0 -20px 2px;user-select:none;-webkit-user-select:none}
.bu-sc{height:100%;display:flex;overflow-x:auto;overflow-y:hidden;padding-inline:calc(50% - 5px);scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;outline:none;cursor:grab;-webkit-overflow-scrolling:touch}
.bu-sc::-webkit-scrollbar{display:none}
/* soft fades at both ends: overlays in the window's own color (a mask on a scrolling area can blank it out on iPhone) */
.bu-p{--bu-pbg:var(--s-bg,#f8f7f4);background:var(--bu-pbg)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bu-p{--bu-pbg:#1c1a18}}
:root[data-theme="dark"] .bu-p{--bu-pbg:#1c1a18}
.bu-ru::before,.bu-ru::after{content:"";position:absolute;top:0;bottom:0;width:26%;z-index:1;pointer-events:none}
.bu-ru::before{left:0;background:linear-gradient(90deg,var(--bu-pbg),color-mix(in srgb,var(--bu-pbg) 0%,transparent))}
.bu-ru::after{right:0;background:linear-gradient(270deg,var(--bu-pbg),color-mix(in srgb,var(--bu-pbg) 0%,transparent))}
.bu-nd,.bu-fast{z-index:2}
.bu-sc.free{scroll-snap-type:none}
.bu-sc.grab{cursor:grabbing;scroll-snap-type:none}
.bu-sc>i{flex:none;width:10px;position:relative;scroll-snap-align:center;font-style:normal}
.bu-sc>i::before{content:"";position:absolute;left:4px;top:12px;width:2px;height:15px;border-radius:1px;background:var(--ct-muted);opacity:.32}
.bu-sc>i.m::before{height:22px;opacity:.55}
.bu-sc>i.s::before{height:30px;opacity:.9;background:var(--ct-text)}
.bu-sc>i.s{scroll-snap-stop:always}
.bu-sc.f1>i.s{scroll-snap-stop:normal}.bu-sc.f1>i.h{scroll-snap-stop:always}
.bu-sc.f2>i.s{scroll-snap-stop:normal}.bu-sc.f2>i.k{scroll-snap-stop:always}
.bu-sc.f3>i.s{scroll-snap-stop:normal}
.bu-sc>i b{position:absolute;top:48px;left:5px;transform:translateX(-50%);font-size:11px;font-weight:800;color:var(--ct-muted);white-space:nowrap}
.bu-sc>i.lm::after{content:"";position:absolute;left:2px;top:2px;width:6px;height:6px;border-radius:50%;background:var(--ct-muted)}
.bu-nd{position:absolute;left:50%;top:4px;width:4px;height:42px;margin-left:-2px;border-radius:2px;background:var(--s-brand,#b0123d);pointer-events:none}
.bu-fast{position:absolute;left:50%;top:-30px;transform:translate(-50%,4px);opacity:0;height:22px;padding:0 10px;border-radius:999px;display:flex;align-items:center;white-space:nowrap;background:var(--s-brand,#b0123d);color:#fff;font-size:11px;font-weight:800;pointer-events:none;transition:opacity .2s,transform .25s cubic-bezier(.2,.8,.2,1)}
.bu-fast.on{opacity:1;transform:translate(-50%,0)}
.bu-per{transition:opacity .2s}.bu-p.fast .bu-per{opacity:0}
.bu-last{margin:2px 0 12px;text-align:center;font-size:12.5px;font-weight:650;color:var(--ct-muted)}
.bu-last::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:7px;vertical-align:2px}
.bu-amt{margin-top:16px}
.bu-amt input{border-radius:12px;transition:background-color .2s}
@media (hover:none){.bu-amt input:not(:focus){text-decoration:underline dotted color-mix(in srgb,var(--ct-muted) 55%,transparent);text-underline-offset:8px;text-decoration-thickness:2px}}
@media (prefers-reduced-motion:reduce){.bu-fast{transition:none}}
.bu-off.sure{color:var(--bu-over,#c0392b)}
/* v30.4: the app behind the budget window is softly blurred (the same frosted look as the locked Premium widgets), fading in and out with the window */
.bu-sheet::backdrop{background:rgba(10,8,6,.3);-webkit-backdrop-filter:blur(6px) saturate(1.1);backdrop-filter:blur(6px) saturate(1.1);animation:ct-bdIn .35s ease-out both}
.bu-sheet.closing::backdrop{animation:ct-bdOut .24s ease-in both}
@media (prefers-reduced-transparency:reduce){.bu-sheet::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(10,8,6,.5)}}
/* v30.5: a barely-there hairline around the budget window, like a chat bubble edge */
.bu-p{border:1px solid rgba(40,30,20,.1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bu-p{border-color:rgba(255,255,255,.1)}}
:root[data-theme="dark"] .bu-p{border-color:rgba(255,255,255,.1)}
/* v31: one window style across the whole app (and Card Board, which shares this page): a soft frosted blur behind every window
   and a barely-there hairline around it. Same on phones and desktop; light and dark have their own veil and edge. */
:root{--win-veil:rgba(10,8,6,.3);--win-edge:rgba(40,30,20,.1);--win-blur:blur(6px) saturate(1.1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--win-veil:rgba(0,0,0,.42);--win-edge:rgba(255,255,255,.1)}}
:root[data-theme="dark"]{--win-veil:rgba(0,0,0,.42);--win-edge:rgba(255,255,255,.1)}
@media (prefers-reduced-transparency:reduce){:root{--win-blur:none;--win-veil:rgba(10,8,6,.5)}}
dialog::backdrop,.bu-sheet::backdrop{background:var(--win-veil)!important;-webkit-backdrop-filter:var(--win-blur);backdrop-filter:var(--win-blur)}
.bu-p,.ed-form,#as .phone,.app-menu.am{border:1px solid var(--win-edge)!important}
@media(max-width:760px){.ed-form,#as .phone{border-bottom-color:transparent!important}}
/* v31.1: phones: a round close button in the profile menu's corner, and the same frosted blur behind phone menus as behind windows */
.am-x{display:none}
@media(max-width:760px){
 .am-x{display:grid;place-items:center;flex:none;width:34px;height:34px;margin-left:auto;padding:0;border-radius:50%;border:1px solid var(--win-edge);background:color-mix(in srgb,currentColor 7%,transparent);color:inherit;opacity:.75;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s,opacity .15s}
 .am-x:active{transform:scale(.92);opacity:1}
}
.am-bd{background:var(--win-veil)!important;-webkit-backdrop-filter:var(--win-blur);backdrop-filter:var(--win-blur)}
@media(max-width:760px){.app-menu.am .amh{align-items:flex-start}.app-menu.am .am-x{margin-top:2px}}
/* v32: the budget card is the same 90px as the Spent and Profit tiles: name and what's left on the left, a ring on the right that fills with what you've used */
.ct-budget .bu-open.bu-rg{flex-direction:row;align-items:center;gap:14px;height:88px;padding:15px 15px 15px 15px}
.ct-budget .bu-tx{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:space-between}
.ct-budget .bu-rg .bu-t{font-size:13.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-budget .bu-d{color:var(--ct-muted);font-weight:650;font-size:12.5px}
.ct-budget .bu-big{font-size:24px;font-weight:800;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.ct-budget .bu-big em{font-style:normal;font-size:13px;font-weight:700;letter-spacing:0;color:var(--ct-muted);margin-left:6px}
.ct-budget.is-over .bu-big{color:var(--bu-over)}
.ct-budget .bu-ring{flex:none;width:58px;height:58px;overflow:visible}
.ct-budget .bu-ring circle{fill:none;stroke-width:6;transform:rotate(-90deg);transform-origin:50% 50%}
.ct-budget .bu-trk{stroke:var(--s-track)}
.ct-budget .bu-arc{stroke:var(--bu-ok);stroke-linecap:round;stroke-dasharray:100 100;transition:stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1),stroke .3s}
.ct-budget.is-warn .bu-arc{stroke:var(--bu-warn)}.ct-budget.is-over .bu-arc{stroke:var(--bu-over)}
.ct-budget .bu-rn{font:800 13px Manrope,system-ui,sans-serif;fill:var(--ct-text);font-variant-numeric:tabular-nums}
.ct-budget .bu-ru2{font:700 9.5px Manrope,system-ui,sans-serif;fill:var(--ct-muted);letter-spacing:.02em}
.ct-budget.is-over .bu-rn{fill:var(--bu-over)}
.ct-budget.is-unset .bu-open{min-height:88px;justify-content:center}
@media (prefers-reduced-motion:reduce){.ct-budget .bu-arc{transition:none}}
/* v32.1: two halves at tile height: Used (fills from the bottom with green, amber from 80%, red when over) | Days left */
.ct-budget .bu-open.bu-hv{display:grid;grid-template-columns:1fr 1px 1fr;align-items:stretch;gap:0;height:88px;padding:0;overflow:hidden;position:relative}
.ct-budget .bu-hv .bu-h{position:relative;z-index:1;padding:14px 15px;display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.ct-budget .bu-hv .bu-used::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--bu-ok) 14%,transparent);transform-origin:bottom;transform:scaleY(var(--fill,0));transition:transform .6s cubic-bezier(.2,.8,.2,1),background-color .3s}
.ct-budget.is-warn .bu-hv .bu-used::before{background:color-mix(in srgb,var(--bu-warn) 15%,transparent)}
.ct-budget.is-over .bu-hv .bu-used::before{background:color-mix(in srgb,var(--bu-over) 15%,transparent)}
.ct-budget .bu-hv .bu-dv{background:var(--s-hair)}
.ct-budget .bu-hv .bu-t{font-size:13.5px;font-weight:800;white-space:nowrap}
.ct-budget .bu-hv .bu-nb{display:flex;flex-direction:column;min-width:0}
.ct-budget .bu-hv .bu-big{font-size:24px;font-weight:800;letter-spacing:-.035em;line-height:1.05;font-variant-numeric:tabular-nums;white-space:nowrap}
.ct-budget .bu-hv small{font-size:12px;font-weight:650;color:var(--ct-muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.ct-budget.is-over .bu-hv .bu-used .bu-big,.ct-budget.is-over .bu-hv .bu-used .bu-t{color:var(--bu-over)}
@media (prefers-reduced-motion:reduce){.ct-budget .bu-hv .bu-used::before{transition:none}}

.ct-budget.is-over .bu-hv .bu-h:not(.bu-used) .bu-big{color:var(--ct-text)}
/* ================= v33: the main screen, "Concept 2" =================
   tiles with one small line each; the budget lives in the Spent tile; Insights, the budget card and the scope line leave the
   main screen (charts are in Board); Entries · Board · Stories as a bottom bar on phones and tabs beside the logo on desktop */
.ct-insight,#ct-budget,#app-scope{display:none!important}
.ct-stats>div{display:flex;flex-direction:column}
.ct-line{display:block;margin-top:4px;height:22px;line-height:22px;font-size:12px;font-weight:650;color:var(--ct-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;font-style:normal}
.ct-line[hidden]{display:none}
.ct-line.is-ok,.ct-line.is-warn,.ct-line.is-over,.ct-line.is-up,.ct-line.is-dn{align-self:flex-start;max-width:100%;height:22px;line-height:22px;padding:0 9px;border-radius:999px;font-weight:800;font-size:11.5px}
.ct-line.is-ok,.ct-line.is-up{background:var(--bu-okbg);color:var(--bu-ok)}
.ct-line.is-warn{background:var(--bu-warnbg);color:var(--bu-warn)}
.ct-line.is-over,.ct-line.is-dn{background:var(--bu-overbg);color:var(--bu-over)}
.ct-line.is-set{color:var(--s-brand,#b0123d);font-weight:750}
.ct-positive .ct-line:not([class*="is-"]){color:inherit;opacity:.75}
/* the Spent tile fills from the bottom with what you've used of the budget */
.ct-stats>div.ct-budtile{position:relative;overflow:hidden;isolation:isolate;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.ct-stats>div.ct-budtile::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--bu-ok) 14%,transparent);transform-origin:bottom;transform:scaleY(var(--fill,0));transition:transform .6s cubic-bezier(.2,.8,.2,1),background-color .3s}
.ct-stats>div.ct-budtile[data-bud="warn"]::before{background:color-mix(in srgb,var(--bu-warn) 15%,transparent)}
.ct-stats>div.ct-budtile[data-bud="over"]::before{background:color-mix(in srgb,var(--bu-over) 15%,transparent)}
.ct-stats>div.ct-budtile:active{transform:scale(.97)}
.ct-stats>div.ct-budtile:focus-visible{outline:2px solid var(--s-brand,#b0123d);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.ct-stats>div.ct-budtile:hover{border-color:var(--s-ctl-line,var(--s-hair))}}
@media (prefers-reduced-motion:reduce){.ct-stats>div.ct-budtile::before{transition:none}}

/* --- phones: bottom bar --- */
.ct-tabs{display:none}
.ct-tbar{display:none}
@media(max-width:760px){
 .ct-tbar{display:flex;justify-content:space-around;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:7px max(14px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px));background:color-mix(in srgb,var(--s-bg,#f8f7f4) 84%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border-top:1px solid var(--win-edge)}
 #view-app[hidden]~.ct-tbar{display:none}
 .ct-tbar button{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:76px;padding:0;border:0;background:none;color:var(--ct-muted);font:inherit;font-size:11.5px;font-weight:750;cursor:pointer;-webkit-tap-highlight-color:transparent}
 .ct-tbar button span{display:grid;place-items:center;width:58px;height:30px;border-radius:999px;transition:background-color .2s,transform .15s}
 .ct-tbar button:active span{transform:scale(.92)}
 .ct-tbar button[aria-current]{color:var(--ct-text)}
 .ct-tbar button[aria-current] span{background:color-mix(in srgb,var(--s-brand,#b0123d) 15%,transparent);color:var(--s-brand,#b0123d)}
 .ct-demo-right{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
 .app-toasts{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
 .pv-chip{bottom:calc(80px + env(safe-area-inset-bottom,0px))}
}

/* --- desktop: one centered column, tabs beside the logo, 60px under the top bar (like Card Board) --- */
@media(min-width:761px){
 .ct-demo-top,#app-grid.ct-demo-grid{width:min(920px,100%)!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important}
 .ct-demo-top{grid-template-columns:auto minmax(0,1fr)!important;margin-bottom:60px!important}
 #app-grid.ct-demo-grid{display:block!important}
 .ct-demo .ct-demo-left{position:static!important;max-height:none!important;overflow:visible!important;padding-bottom:0!important;min-height:0}
 .ct-demo .ct-stats{grid-template-columns:repeat(4,minmax(0,1fr))!important;margin-bottom:28px!important}
 .ct-export{display:none!important}
 .ct-brand{display:flex!important;align-items:center}
 .ct-tabs{display:flex;gap:4px;padding:4px;margin-left:18px;border-radius:999px;background:var(--s-track)}
 .ct-tabs button{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;border:0;border-radius:999px;background:none;color:var(--ct-muted);font:inherit;font-size:13.5px;font-weight:750;white-space:nowrap;cursor:pointer;transition:background-color .2s,color .2s}
 .ct-tabs button:hover{color:var(--ct-text)}
 .ct-tabs button[aria-current]{background:var(--s-card);color:var(--ct-text);box-shadow:0 1px 2px rgba(0,0,0,.12)}
 .ct-tabs button[aria-current] svg{color:var(--s-brand,#b0123d)}
}
/* ================= v33.1: one bar on every page, highlight B, floating Add =================
   highlight B: a brand-tinted pill with the icon and label in brand; in dark mode a soft rose so it reads pink, never maroon */
:root{--tab-on:var(--s-brand,#b0123d);--tab-onbg:color-mix(in srgb,var(--s-brand,#b0123d) 16%,transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--tab-on:#ff8db0;--tab-onbg:rgba(255,128,165,.17)}}
:root[data-theme="dark"]{--tab-on:#ff8db0;--tab-onbg:rgba(255,128,165,.17)}
@media(max-width:760px){
 .ct-tbar{z-index:55}
 .ct-tbar button[aria-current]{color:var(--tab-on);font-weight:800}
 .ct-tbar button[aria-current] span{background:var(--tab-onbg);color:var(--tab-on)}
 /* Add New moves down to a floating button where your thumb is; search gets the full width */
 .ct-demo .ct-demo-top .ct-add,.ct-stick .ct-stick-add{display:none!important}
 .ct-demo .ct-demo-top .ct-search{padding-right:16px!important}
 .ct-stick .ct-stick-q{grid-column:1/-1!important;margin-right:0!important;width:auto!important}
 .ct-fab{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:44;width:58px;height:58px;border-radius:20px;border:0;padding:0;display:grid;place-items:center;background:var(--s-brand,#b0123d);color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;box-shadow:0 12px 26px -10px color-mix(in srgb,var(--s-brand,#b0123d) 75%,transparent),0 2px 6px rgba(0,0,0,.22);transition:transform .18s cubic-bezier(.2,.8,.2,1)}
 .ct-fab:active{transform:scale(.92)}
 #view-app[hidden]~.ct-fab{display:none}
 .app-toasts{bottom:calc(152px + env(safe-area-inset-bottom,0px))}
}
.ct-fab{display:none}
@media(max-width:760px){.ct-fab{display:grid}}
@media(min-width:761px){
 .ct-tabs button[aria-current]{background:var(--tab-onbg);color:var(--tab-on);box-shadow:none}
 .ct-tabs button[aria-current] svg{color:var(--tab-on)}
}

/* v33.4: phones: the profile menu sits above the bottom bar (the bar frosts with the rest of the page) and always fits the screen, scrolling inside when it's taller */
@media(max-width:760px){
 .am-bd{z-index:56!important}
 .app-menu.am{z-index:57!important;max-height:calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))!important;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
}
/* while one of Card Board's menus is open on a phone, the bar tucks behind the board so the board's dim covers it too */
@media(max-width:760px){html:has(#mbd.on) .ct-tbar{z-index:45}}
/* v33.9: one profile menu on every page: it sits above Card Board and Stories, and has an "On this page" section */
.app-menu.am{z-index:97!important}.am-bd{z-index:96!important}
.app-menu.am .am-sub{padding:8px 12px 2px;font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ct-muted)}
.app-menu.am .am-sub[hidden]{display:none}
/* v34.1: Add to Home Screen: the offer card (phones, above the bar) and the window with device-specific steps */
.ct-hint{display:none}
@media(max-width:760px){
 .ct-hint{display:flex;flex-direction:column;gap:10px;position:fixed;left:max(14px,env(safe-area-inset-left,0px));right:max(14px,env(safe-area-inset-right,0px));bottom:calc(80px + env(safe-area-inset-bottom,0px));z-index:54;padding:14px 14px 12px 16px;border-radius:20px;background:color-mix(in srgb,var(--s-card,#fff) 92%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border:1px solid var(--win-edge);box-shadow:0 16px 36px -14px rgba(0,0,0,.35);opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.2,1)}
 .ct-hint.on{opacity:1;transform:none;pointer-events:auto}
 html.ct-hinting .ct-fab{opacity:0;pointer-events:none;transform:scale(.8)}
 .ct-fab{transition:transform .18s cubic-bezier(.2,.8,.2,1),opacity .2s}
}
.ct-hint .ch-x{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;border:0;background:color-mix(in srgb,currentColor 8%,transparent);color:var(--ct-muted);font-size:11px;font-weight:800;cursor:pointer}
.ct-hint .ht{display:flex;align-items:center;gap:12px;padding-right:30px}
.ct-hint .ht img{flex:none;width:40px;height:40px;border-radius:10px}
.ct-hint .ht b{display:block;font-size:14px;font-weight:800;color:var(--ct-text)}
.ct-hint .ht small{display:block;font-size:12.5px;font-weight:650;color:var(--ct-muted)}
.ct-hint .ha{display:flex;justify-content:flex-end;gap:8px}
.ct-hint .ha button{height:34px;padding:0 14px;border-radius:999px;border:0;font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.ct-hint .ha .h1{background:none;color:var(--ct-muted)}
.ct-hint .ha .h2{background:var(--ct-text);color:var(--s-card,#fff)}
.hs-sheet{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;margin:0;color:var(--ct-text);position:fixed;inset:0}
.hs-sheet[open]{display:grid;place-items:center;padding:16px}
.hs-p{width:min(400px,100%);max-height:calc(100% - 8px);overflow:auto;background:var(--s-bg,#f8f7f4);border:1px solid var(--win-edge);border-radius:26px;padding:18px 20px 20px;box-shadow:0 24px 60px rgba(0,0,0,.3);animation:ct-sheetIn .45s cubic-bezier(.16,1,.3,1) both;outline:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hs-p{background:#1c1a18}}
:root[data-theme="dark"] .hs-p{background:#1c1a18}
.hs-hd{display:flex;align-items:center;gap:12px}
.hs-hd .hs-ic img{display:block;width:44px;height:44px;border-radius:11px}
.hs-hd h2{margin:0;font-size:18px;font-weight:800;letter-spacing:-.01em}
.hs-hd p{margin:1px 0 0;font-size:12.5px;font-weight:700;color:var(--ct-muted)}
.hs-x{margin-left:auto;align-self:flex-start;width:32px;height:32px;border-radius:50%;border:1px solid var(--win-edge);background:color-mix(in srgb,currentColor 7%,transparent);color:var(--ct-muted);font-weight:800;font-size:12px;cursor:pointer}
.hs-why{margin:14px 0 6px;font-size:14px;line-height:1.45;color:var(--ct-muted);font-weight:600}
.hs-install{display:block;width:100%;height:50px;margin:12px 0 4px;border-radius:999px;border:0;background:var(--s-brand,#b0123d);color:#fff;font:inherit;font-weight:800;font-size:15px;cursor:pointer}
.hs-install[hidden]{display:none}
.hs-steps{list-style:none;margin:10px 0 16px;padding:0;display:grid;gap:8px}
.hs-steps li{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:color-mix(in srgb,currentColor 5%,transparent);font-size:14.5px;font-weight:650;line-height:1.35}
.hs-steps b{font-weight:800}
.hs-n{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;background:var(--ct-text);color:var(--s-bg,#fff)}
.hs-si{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--tab-onbg);color:var(--tab-on)}
.hs-ok{display:block;width:100%;height:48px;border-radius:999px;border:0;background:var(--ct-text);color:var(--s-bg,#fff);font:inherit;font-weight:800;font-size:15px;cursor:pointer}
@media (prefers-reduced-motion:reduce){.ct-hint{transition:none}.hs-p{animation:none}}
/* v34.2: phones: the profile menu is a bottom sheet (Threads-style): grab handle, each group a rounded card on a soft
   background, slides up and swipes down. Desktop keeps the dropdown. One avatar size everywhere. */
.app-avatar{width:38px!important;height:38px!important;font-size:15px!important;font-weight:800!important}
.app-menu.am .am-edit{display:block;font-style:normal;font-size:12.5px;font-weight:750;color:var(--s-brand,#b0123d);margin-top:2px}
.app-menu.am .am-who{cursor:pointer;border-radius:14px}
@media (hover:hover) and (pointer:fine){.app-menu.am .am-who:hover{background:var(--am-hl)}}
@media(max-width:760px){
 :root{--sheet-bg:#efede8}
 @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--sheet-bg:#141311}}
 :root[data-theme="dark"]{--sheet-bg:#141311}
 .app-menu.am,.app-menu.am:not([hidden]){transform:none;top:auto!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;min-width:0!important;max-width:none!important;max-height:min(88dvh,calc(100dvh - 40px - env(safe-area-inset-top,0px)))!important;border-radius:26px 26px 0 0!important;border:0!important;border-top:1px solid var(--win-edge)!important;background:var(--sheet-bg)!important;padding:22px 12px calc(14px + env(safe-area-inset-bottom,0px))!important;box-shadow:0 -12px 40px -16px rgba(0,0,0,.35)!important;transform-origin:bottom center!important;animation:amSheet .42s cubic-bezier(.2,.9,.25,1) both!important;will-change:transform}
 .app-menu.am::before{content:"";position:absolute;top:8px;left:50%;width:38px;height:5px;margin-left:-19px;border-radius:999px;background:color-mix(in srgb,var(--ct-text) 22%,transparent)}
 .app-menu.am .am-x{display:none!important}
 .app-menu.am>.amh,.app-menu.am>.am-plan,.app-menu.am>.amg,.app-menu.am>.am-dev{background:var(--s-card);border-radius:18px!important;border:0!important;margin:0 0 10px!important}
 .app-menu.am>.amh{padding:14px 14px!important}
 .app-menu.am>.am-plan{padding:12px 14px!important}
 .app-menu.am>.amg{padding:2px 0!important;overflow:hidden}
 .app-menu.am>.amg>button,.app-menu.am>.amg>.amr{min-height:52px;padding-left:16px!important;padding-right:16px!important;position:relative}
 .app-menu.am>.amg>button+button::before,.app-menu.am>.amg>.amr+.amr::before,.app-menu.am>.amg>button+.amr::before,.app-menu.am>.amg>.amr+button::before{content:"";position:absolute;top:0;left:48px;right:0;height:1px;background:var(--win-edge)}
 .app-menu.am>.amg>.am-sub+button::before{display:none}
 .app-menu.am>.am-dev{padding:4px 6px!important}
 .am-bd{background:rgba(10,8,6,.34)!important}
}
@keyframes amSheet{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.app-menu.am{animation:none!important}}

@media(max-width:760px){
 @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #app-menu.app-menu.am{background:var(--sheet-bg)!important;border-color:var(--win-edge)!important}}
 :root[data-theme="dark"] #app-menu.app-menu.am{background:var(--sheet-bg)!important;border-color:var(--win-edge)!important}
}
/* v34.3: your avatar at the right end of the phone slim bars */
.ct-me{flex:none;padding:0;border:0;cursor:pointer;display:grid;place-items:center;border-radius:50%;-webkit-tap-highlight-color:transparent}
@media(max-width:760px){
 .ct-stick .ct-stick-q{grid-column:1!important;padding-right:16px!important}
 .ct-stick .ct-me{grid-column:2;grid-row:1;justify-self:end;align-self:center}
}

/* v34.4: the slim bar's avatar is a perfect circle, lined up with the header's */
.ct-stick .ct-me,.ct-me{border-radius:50%!important}
@media(max-width:760px){.ct-stick .ct-me{margin-right:4px}}
/* a new account: "Add your first card" sits above the tiles, so the room for the bottom bar goes under the tiles instead */
@media(max-width:760px){
 #app-first-wrap.ct-demo-right{padding-bottom:0!important;margin-bottom:16px}
 #app-grid:has(#app-first-wrap:not([hidden])) .ct-demo-left{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important}
}
/* v34.6 desktop: Entries · Board · Stories as a centered switcher (the desktop twin of the phone's bottom bar):
   bigger, in the middle of the header, the page you're on lifted as a card. Same look on Board and Stories. */
@media(min-width:761px){
 .ct-demo-top{grid-template-columns:auto minmax(0,1fr) auto!important;align-items:center}
 .ct-demo-top .ct-tabs{justify-self:center;margin:0 16px!important}
 .ct-tabs,.cb-tabs{gap:4px;padding:5px!important;border-radius:16px!important;background:var(--s-track)!important}
 .ct-tabs button,.cb-tabs button{height:40px!important;padding:0 18px!important;border-radius:12px!important;gap:9px!important;font-size:14px!important;font-weight:800!important;color:var(--ct-muted,var(--muted))!important;background:none!important;box-shadow:none!important}
 .ct-tabs button svg,.cb-tabs button svg{width:17px;height:17px}
 .ct-tabs button:hover,.cb-tabs button:hover{color:var(--ct-text,var(--text))!important}
 .ct-tabs button[aria-current],.cb-tabs button[aria-current]{background:var(--s-card)!important;color:var(--ct-text,var(--text))!important;box-shadow:0 1px 2px rgba(0,0,0,.08),0 6px 16px -8px rgba(0,0,0,.28)!important}
 .ct-tabs button[aria-current] svg,.cb-tabs button[aria-current] svg{color:var(--tab-on)}
 .ct-demo-top .ct-top-actions{min-width:0}
 .ct-demo-top .ct-search{min-width:150px}
 .cbx .cb-tabs{margin:0 auto!important}
}


/* ================= v35: month by month, wider desktop, the summary bar ================= */
/* the month switcher replaces the date-range menu (phones and desktop) */
#ct-period{display:none!important}
.ct-mstep{display:flex;align-items:center;gap:6px;min-width:0}
.ct-mstep>button{flex:none;border:1px solid var(--s-hair);background:var(--s-card);color:var(--ct-text);display:grid;place-items:center;padding:0;cursor:pointer;border-radius:50%;transition:opacity .2s,transform .15s}
.ct-mstep>button:active{transform:scale(.92)}
.ct-mstep>button:disabled{opacity:.35;cursor:default;transform:none}
.ct-mstep .ms-lab{position:relative;display:grid;overflow:hidden;white-space:nowrap;font-weight:800;letter-spacing:-.02em}
.ct-mstep .ms-lab>span{grid-area:1/1;padding:0 4px}
.ct-mstep .ms-lab>.in-r{animation:msInR .26s cubic-bezier(.2,.8,.25,1) both}.ct-mstep .ms-lab>.in-l{animation:msInL .26s cubic-bezier(.2,.8,.25,1) both}
.ct-mstep .ms-lab>.out-l{animation:msOutL .2s ease-in both}.ct-mstep .ms-lab>.out-r{animation:msOutR .2s ease-in both}
@keyframes msInR{from{opacity:0;transform:translateX(14px)}}@keyframes msInL{from{opacity:0;transform:translateX(-14px)}}
@keyframes msOutL{to{opacity:0;transform:translateX(-14px)}}@keyframes msOutR{to{opacity:0;transform:translateX(14px)}}
.ct-mstep.is-all .ms-prev,.ct-mstep.is-all .ms-next{opacity:0;pointer-events:none;width:0;margin:0 -3px;border:0}
.ct-mstep.ms-main{margin:0 0 14px}
.ct-mstep.ms-main>button{width:36px;height:36px}
.ct-mstep.ms-main .ms-lab{font-size:22px;min-width:0}
.ct-mstep.ms-main .ms-all{width:auto;height:32px;padding:0 13px;margin-left:auto;border-radius:999px;font:inherit;font-size:13px;font-weight:750;color:var(--ct-muted)}
.ct-mstep.ms-main .ms-all[aria-pressed=true]{background:var(--tab-onbg);color:var(--tab-on);border-color:transparent}
.ct-stats.ms-swap>div{animation:msSwap .3s ease-out}
@keyframes msSwap{from{opacity:.35}}
@media (prefers-reduced-motion:reduce){.ct-mstep .ms-lab>span,.ct-stats.ms-swap>div{animation:none!important}}
.ct-empty-month{text-align:center}
.ct-empty-month button{margin-top:4px}
@media(max-width:760px){
 .ct-mstep.ms-main{margin:2px 0 12px}
 .ct-mstep.ms-main>button{width:34px;height:34px}
 .ct-mstep.ms-main .ms-lab{font-size:20px}
}

/* desktop: wider, tabs beside the logo, a big search */
@media(min-width:761px){
 .ct-demo-top,#app-grid.ct-demo-grid{width:min(1120px,calc(100% - 64px))!important}
 .ct-demo-top{grid-template-columns:auto auto minmax(0,1fr)!important;margin-bottom:44px!important}
 .ct-demo-top .ct-tabs{justify-self:start;margin:0 0 0 28px!important}
 .ct-demo-top .ct-top-actions{justify-content:flex-end;min-width:0}
 .ct-demo-top .ct-search{flex:1 1 440px;max-width:440px;min-width:150px!important;height:44px!important;margin-left:24px}
}
@media(min-width:761px) and (max-width:1000px){
 .ct-demo-top .ct-tabs{margin-left:14px!important}
 .ct-demo-top .ct-tabs button{padding:0 12px!important}
 .ct-demo-top .ct-search{margin-left:12px}
}

/* desktop: the summary bar that fades in once the tiles scroll away */
.ct-sumbar{display:none}
@media(min-width:761px){
 .ct-sumbar{display:block;position:fixed;left:0;right:0;top:0;z-index:40;opacity:0;transform:translateY(-10px);pointer-events:none;
  transition:opacity .22s ease,transform .26s cubic-bezier(.2,.8,.25,1)}
 .ct-sumbar::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--s-bg,#f8f7f4) 86%,transparent);-webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px);border-bottom:1px solid var(--win-edge,var(--s-hair))}
 .ct-sumbar.on{opacity:1;transform:none;pointer-events:auto}
 .sb-in{position:relative;width:min(1120px,calc(100% - 64px));margin:0 auto;height:64px;display:flex;align-items:center;gap:12px}
 .sb-stats{display:flex;align-items:center;gap:18px;min-width:0;transition:opacity .18s ease,transform .22s ease}
 .ct-mstep.ms-mini>button{width:30px;height:30px}
 .ct-mstep.ms-mini .ms-lab{font-size:16px}
 .sb-sep{width:1px;height:28px;background:var(--s-hair);flex:none}
 .sb-num{all:unset;cursor:pointer;display:flex;flex-direction:column;line-height:1.15;border-radius:8px}
 .sb-num small{font-size:11.5px;font-weight:750;color:var(--ct-muted)}
 .sb-num b{font-size:17px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
 .sb-num:focus-visible{outline:2px solid var(--tab-on);outline-offset:3px}
 .sb-profit b{color:var(--bu-ok)}.sb-profit.neg b{color:var(--bu-over)}
 .sb-bud{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:750;color:var(--ct-muted);white-space:nowrap}
 .sb-bud i{display:block;width:84px;height:6px;border-radius:999px;background:var(--s-track);overflow:hidden}
 .sb-bud em{display:block;height:100%;background:var(--bu-ok);border-radius:inherit;transform-origin:left;transform:scaleX(0);transition:transform .35s ease}
 .sb-bud[data-bud=warn] em{background:var(--bu-warn)}.sb-bud[data-bud=over] em{background:var(--bu-over)}.sb-bud[data-bud=over] span{color:var(--bu-over)}
 .sb-acts{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
 .sb-search{width:40px;height:40px;border-radius:50%;border:1px solid var(--s-hair);background:var(--s-card);color:var(--ct-text);display:grid;place-items:center;cursor:pointer;padding:0}
 .sb-add{height:40px;padding:0 16px 0 13px;border-radius:999px;border:0;background:var(--s-brand,#b0123d);color:#fff;font:inherit;font-size:14px;font-weight:750;display:flex;align-items:center;gap:6px;cursor:pointer}
 .sb-add:active,.sb-search:active{transform:scale(.95)}
 /* search open: the numbers step aside and the box fades in over their spot */
 .sb-q{position:absolute;left:0;right:150px;top:12px;height:40px;display:flex;align-items:center;gap:9px;padding:0 14px;border-radius:999px;background:var(--s-card);border:1px solid var(--s-hair);color:var(--ct-muted);
  opacity:0;transform:translateX(12px);pointer-events:none;transition:opacity .18s ease,transform .22s ease}
 .sb-q input{flex:1;min-width:0;border:0;background:none;color:var(--ct-text);font:inherit;font-size:15px;outline:none}
 .ct-sumbar.q-on .sb-q{opacity:1;transform:none;pointer-events:auto}
 .ct-sumbar.q-on .sb-stats{opacity:0;transform:translateX(-12px);pointer-events:none}
 .ct-sumbar.q-on .sb-search{opacity:0;pointer-events:none}
}
@media(min-width:761px) and (max-width:1000px){.sb-bud span{display:none}.sb-stats{gap:12px}}
@media (prefers-reduced-motion:reduce){.ct-sumbar,.sb-stats,.sb-q{transition-duration:.01s!important}}
@media(min-width:761px){.ct-sumbar .sb-q input{-webkit-appearance:none;appearance:none;border:0!important;outline:none!important;box-shadow:none!important;background:transparent!important;padding:0!important;height:auto!important;border-radius:0!important}
 .ct-sumbar .sb-q:focus-within{border-color:color-mix(in srgb,var(--tab-on) 45%,var(--s-hair))}}

/* v35.2 desktop: one header for Entries, Board and Stories. Same 1120px column, the name in a 172px slot, the tabs right
   after it, actions on the right, 60px down to the content. The tabs sit in exactly the same spot on every page. */
@media(min-width:761px){
 .ct-demo-top{grid-template-columns:148px auto minmax(0,1fr)!important;column-gap:24px!important;margin-bottom:60px!important}
 .ct-demo-top .ct-tabs{margin:0!important;justify-self:start!important;gap:4px!important}
 .ct-demo-top .ct-brand{min-width:0}
 /* while pages slide, one copy of the tabs holds still on top and the real ones step aside */
 html.navhold .ct-demo-top .ct-tabs,html.navhold .cb-tabs{visibility:hidden}
 .ct-navhold{position:fixed;z-index:120;margin:0!important;pointer-events:none}
 .ct-navhold button{position:relative;z-index:1;background:none!important;box-shadow:none!important;transition:color .3s ease}
 .ct-navhold button.nh-on{color:var(--ct-text,var(--text))!important}
 .ct-navhold button svg{transition:color .3s ease}
 .ct-navhold button.nh-on svg{color:var(--tab-on)}
 .ct-navhold .nh-pill{position:absolute;top:5px;height:40px;left:0;border-radius:12px;background:var(--s-card);box-shadow:0 1px 2px rgba(0,0,0,.08),0 6px 16px -8px rgba(0,0,0,.28);transform-origin:0 50%}
}

/* v35.4 */
.ct-bname{display:inline-block}
/* desktop: Edit and Duplicate are snug pills on the left, Delete on the right (no more half-row-wide buttons) */
@media(min-width:761px){
 .ct-demo .ct-demo-actions button{flex:0 0 auto;min-width:96px;padding:0 18px}
 .ct-demo .ct-demo-actions button[data-act="del"]{margin-left:auto;min-width:0}
}

/* v35.4 entry rows. Desktop: name first, one quiet line (type, platform, date), the money on the right edge.
   Phones keep today's row, with the Sale/Purchase tag the same size as the price line. Opening a row looks the same on both. */
.ct-demo .ct-row-line,.ct-demo .ct-row-amt{display:none}
.ct-dot{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block;background:var(--ct-muted)}
.ct-dot.sale{background:#4f8f2a}.ct-dot.purchase{background:#c98a1e}.ct-dot.refund{background:#6d68c4}
@media(min-width:761px){
 /* collapsed and open rows share the same header: name, the quiet line, the money on the right */
 .ct-demo .ct-row .ct-row-meta,.ct-demo .ct-row .ct-row-bottom,.ct-demo .ct-row .ct-row-toggle .ct-tag,.ct-demo .ct-row .ct-row-chevron{display:none}
 .ct-demo .ct-row:not(.expanded) .ct-row-toggle{align-items:center;min-height:85px}
 .ct-demo .ct-row .ct-expanded-right{min-width:0;flex:1}
 .ct-demo .ct-row .ct-row-name{font-size:15px;font-weight:700;letter-spacing:-.01em;transition:font-size .25s ease}
 .ct-demo .ct-row .ct-row-line{display:flex;align-items:center;gap:7px;margin-top:5px;font-size:13px;font-weight:600;color:var(--ct-muted);white-space:nowrap}
 .ct-demo .ct-row .ct-row-amt{display:flex;flex-direction:column;align-items:flex-end;gap:3px;margin-left:auto;padding:0 12px 0 20px;flex:none;text-align:right}
 .ct-row-amt strong{font-size:17px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ct-text)}
 .ct-row-amt.sale strong{color:var(--bu-ok)}
 .ct-row-amt small{font-size:12.5px;font-weight:600;color:var(--ct-muted);font-variant-numeric:tabular-nums}
 /* open: the same header, a size up, then the details as a clean spec sheet and the actions */
 .ct-demo .ct-row.expanded .ct-row-toggle{align-items:flex-start;padding-top:18px!important}
 .ct-demo .ct-row.expanded .ct-row-name{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.25}
 .ct-demo .ct-row.expanded .ct-row-line{margin-top:7px;font-size:13.5px}
 .ct-demo .ct-row.expanded .ct-row-amt strong{font-size:22px}
 .ct-demo .ct-row.expanded .ct-row-amt small{font-size:13px}
 .ct-demo .ct-row.expanded .ct-open-actions{margin-top:14px;margin-bottom:18px;padding-right:12px}
 .ct-demo .ct-row .ct-stats-row{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px 18px;border-top:1px solid var(--s-hair);padding-top:16px;margin-top:0}
 .ct-demo .ct-row .ct-stats-row small{font-size:11px;letter-spacing:.06em;margin-bottom:4px}
 .ct-demo .ct-row .ct-stats-row span{font-size:16px;font-weight:750;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
 .ct-demo .ct-row .ct-stats-row em{font-size:12px;margin-top:1px}
 .ct-demo .ct-row .ct-row-note{margin-top:14px;padding:10px 14px;border-radius:12px;background:var(--s-bg);font-size:13.5px;color:var(--ct-text)}
 .ct-demo .ct-row .ct-demo-actions{margin-top:18px}
}
@media(max-width:760px){.ct-demo .ct-row-toggle .ct-tag{font-size:12px!important;padding:3px 9px!important;font-weight:650}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ct-dot.sale{background:#7ac95e}:root:not([data-theme="light"]) .ct-dot.purchase{background:#e4aa50}:root:not([data-theme="light"]) .ct-dot.refund{background:#a9a6f0}}
:root[data-theme="dark"] .ct-dot.sale{background:#7ac95e}:root[data-theme="dark"] .ct-dot.purchase{background:#e4aa50}:root[data-theme="dark"] .ct-dot.refund{background:#a9a6f0}

/* v35.5 the range menu and custom dates (phones and desktop) */
.ct-mstep .ms-rw{margin-left:auto;position:relative;flex:none}
.ct-mstep .ms-rng{border:1px solid var(--s-hair);background:var(--s-card);cursor:pointer;width:auto!important;height:34px!important;padding:0 11px 0 14px;border-radius:999px!important;display:flex!important;align-items:center;gap:6px;font:inherit;font-size:13px;font-weight:750;color:var(--ct-muted)}
.ct-mstep .ms-rng.act,.ct-mstep .ms-rng.open{background:var(--tab-onbg);color:var(--tab-on);border-color:transparent}
.ct-mstep .ms-rng svg{transition:transform .2s ease}.ct-mstep .ms-rng.open svg{transform:rotate(180deg)}
.ms-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:30;background:var(--s-card);border:1px solid var(--s-hair);border-radius:16px;box-shadow:0 18px 44px -18px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.06);
 transform-origin:top right;animation:msPop .18s cubic-bezier(.2,.8,.2,1) both}
.ms-pop.out{animation:msPopOut .14s ease-in both}
@keyframes msPop{from{opacity:0;transform:translateY(-4px) scale(.97)}}@keyframes msPopOut{to{opacity:0;transform:translateY(-4px) scale(.98)}}
.ms-menu{width:212px;padding:6px;display:flex;flex-direction:column}
.ms-menu button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;width:100%;height:38px;padding:0 12px;border-radius:10px;font-size:14px;font-weight:650;color:var(--ct-text);cursor:pointer}
.ms-menu button:hover,.ms-menu button:focus-visible{background:var(--s-track)}
.ms-menu button.on{font-weight:800}.ms-menu button.on svg{color:var(--tab-on)}
.ms-menu hr{border:0;border-top:1px solid var(--s-hair);margin:5px 6px}
.ms-cal{width:min(304px,calc(100vw - 32px));padding:14px}
.mc-h{display:flex;align-items:center;justify-content:space-between}.mc-h b{font-size:14.5px;font-weight:800}
.mc-h button{width:32px;height:32px;border-radius:50%;border:1px solid var(--s-hair);background:none;color:var(--ct-text);display:grid;place-items:center;cursor:pointer;padding:0}
.mc-h button:disabled{opacity:.3;cursor:default}
.mc-wk,.mc-g{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}
.mc-wk{font-size:11.5px;font-weight:750;color:var(--ct-muted);margin:12px 0 4px}
.mc-g{row-gap:2px}
.mc-g button{all:unset;box-sizing:border-box;height:36px;display:grid;place-items:center;font-size:13.5px;font-weight:650;color:var(--ct-text);cursor:pointer;position:relative;z-index:0;font-variant-numeric:tabular-nums}
.mc-g button::before{content:"";position:absolute;inset:2px;border-radius:50%;z-index:-1}
.mc-g button:hover::before{background:var(--s-track)}
.mc-g button.today{color:var(--tab-on)}
.mc-g button.in{background:var(--tab-onbg)}
.mc-g button.first{background:linear-gradient(90deg,transparent 50%,var(--tab-onbg) 50%)}.mc-g button.last{background:linear-gradient(90deg,var(--tab-onbg) 50%,transparent 50%)}
.mc-g button.end{color:#fff}.mc-g button.end::before{background:var(--s-brand,#b0123d)}
.mc-g button:disabled{opacity:.28;cursor:default}.mc-g button:disabled::before{display:none}
.mc-f{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;font-size:13px;font-weight:750}
.mc-go{height:36px;padding:0 15px;border-radius:999px;border:0;background:var(--s-brand,#b0123d);color:#fff;font:inherit;font-size:13px;font-weight:750;cursor:pointer;white-space:nowrap}
.mc-go:disabled{opacity:.4;cursor:default}
@media(max-width:760px){.ct-mstep.ms-main .ms-lab{font-size:clamp(16px,5vw,20px)}}
@media(max-width:760px){
 .ct-demo .ct-row .ct-stats-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 14px;border-top-style:solid;border-top-color:var(--s-hair);padding-top:12px}
 .ct-demo .ct-row .ct-stats-row span{white-space:normal;font-size:14.5px;line-height:1.25}
 .ct-demo .ct-row .ct-stats-row small{font-size:10.5px}
}
/* v35.7: Sale / Purchase / Refund as a clear colored label again (desktop rows) */
.ct-pill{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:750;margin-right:3px;letter-spacing:.01em}
.ct-pill.sale{background:#e7f4de;color:#38720e}.ct-pill.purchase{background:#fff0d9;color:#8a5208}.ct-pill.refund{background:#e7e8f9;color:#5753a4}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ct-pill.sale{background:#20331b;color:#7ac95e}:root:not([data-theme="light"]) .ct-pill.purchase{background:#392710;color:#e4aa50}:root:not([data-theme="light"]) .ct-pill.refund{background:#24233f;color:#a9a6f0}}
:root[data-theme="dark"] .ct-pill.sale{background:#20331b;color:#7ac95e}:root[data-theme="dark"] .ct-pill.purchase{background:#392710;color:#e4aa50}:root[data-theme="dark"] .ct-pill.refund{background:#24233f;color:#a9a6f0}
html.pg-moving .ct-sumbar::before,html.pg-moving .ct-stick::before,html.pg-moving .ct-tbar{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* v35.8 phones: the top row stays put while the page scrolls under it (replaces the slide-in bar) */
.ct-phead{display:none}
@media(max-width:760px){
 .ct-stick{display:none!important}
 .ct-phead{display:block;position:fixed;left:0;right:0;top:0;z-index:40;height:calc(var(--ph-top,33px) * 2);pointer-events:none;visibility:hidden}
 .ct-phead.on{visibility:visible;pointer-events:auto}
 .ct-phead::before{content:"";position:absolute;inset:0;opacity:var(--ph-bg,0);background:color-mix(in srgb,var(--s-bg,#f8f7f4) 86%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--win-edge)}
 .ph-row{position:absolute;inset:0;transition:opacity .18s ease}
 .ph-brand{position:absolute;left:var(--ph-left,12px);top:var(--ph-top,33px);transform:translateY(-50%);display:flex;align-items:center;white-space:nowrap}
 .ph-brand img{display:block}
 .ph-r{position:absolute;right:var(--ph-right,12px);top:var(--ph-avtop,33px);transform:translateY(-50%);display:flex;align-items:center;gap:10px}
 .ph-q{width:var(--ph-av,38px);height:var(--ph-av,38px);border-radius:50%;border:1px solid var(--s-hair);background:var(--s-card);color:var(--ct-text);display:grid;place-items:center;padding:0;opacity:var(--ph-q,0);transform:scale(calc(.82 + .18 * var(--ph-q,0)))}
 .ph-q:active{transform:scale(.92)}
 .ct-phead .ph-r .ct-me{width:var(--ph-av,38px)!important;height:var(--ph-av,38px)!important;margin:0!important}
 .ct-demo-top.ph-away .ct-brand,.ct-demo-top.ph-away #app-avatar{visibility:hidden}
 .ph-field{position:absolute;left:12px;right:12px;top:var(--ph-avtop,33px);transform:translateY(-50%);height:42px;display:flex;align-items:center;gap:9px;padding:0 4px 0 14px;border-radius:999px;background:var(--s-card);border:1px solid var(--s-hair);color:var(--ct-muted);opacity:0;pointer-events:none;transition:opacity .18s ease}
 .ph-field input{flex:1;min-width:0;border:0!important;background:none!important;font:inherit;font-size:16px;outline:none!important;color:var(--ct-text);padding:0!important;height:auto!important;box-shadow:none!important;-webkit-appearance:none;appearance:none}
 .ph-x{border:0;background:none;color:var(--tab-on);font:inherit;font-size:14px;font-weight:750;padding:0 12px;height:36px}
 .ct-phead.q-on .ph-row{opacity:0;pointer-events:none}
 .ct-phead.q-on .ph-field{opacity:1;pointer-events:auto}
}
html.pg-moving .ct-phead::before{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* ================= v36: the app shell. One header for every page; the pages sit side by side and slide. ================= */
.ct-shell{position:fixed;left:0;right:0;top:0;z-index:95;pointer-events:none}
.ct-shell::before{content:"";position:absolute;inset:0;opacity:var(--sh-bg,0);background:color-mix(in srgb,var(--s-bg,#f8f7f4) 86%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--win-edge)}
html.pg-moving .ct-shell::before{-webkit-backdrop-filter:none;backdrop-filter:none}
.sh-in{position:relative;pointer-events:auto}
.sh-brand{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--ct-text);min-width:0;white-space:nowrap}
.sh-brand img{display:block;flex:none}
.sh-name{display:grid;min-width:0}.sh-name>span{grid-area:1/1;overflow:hidden;text-overflow:ellipsis;transition:opacity .22s ease,transform .28s cubic-bezier(.2,.8,.2,1)}
.sh-name>.nin{opacity:0;transform:translate3d(0,8px,0)}.sh-name>.nout{opacity:0;transform:translate3d(0,-6px,0)}
.sh-acts{display:grid;justify-items:end;min-width:0}
.sha{grid-area:1/1;display:flex;align-items:center;justify-content:flex-end;gap:10px;width:100%;min-width:0;opacity:0;visibility:hidden;transform:translate3d(0,6px,0);transition:opacity .14s ease,transform .2s ease,visibility 0s .2s}
.sha.on{opacity:1;visibility:visible;transform:none;transition:opacity .26s ease .1s,transform .32s cubic-bezier(.2,.8,.2,1) .1s,visibility 0s}
.sh-ic{width:40px;height:40px;border-radius:50%;border:1px solid var(--s-hair);background:var(--s-card);color:var(--ct-text);display:grid;place-items:center;padding:0;cursor:pointer;flex:none;-webkit-tap-highlight-color:transparent}
.sh-ic:active,.sh-pillbtn:active{transform:scale(.94)}
.sh-ask{color:var(--tab-on)}
.sh-pillbtn{height:40px;padding:0 16px 0 13px;border-radius:999px;border:1px solid var(--s-hair);background:var(--s-card);color:var(--ct-text);display:flex;align-items:center;gap:7px;font:inherit;font-size:13.5px;font-weight:750;cursor:pointer;white-space:nowrap;flex:none}
.sh-pillbtn svg{width:15px;height:15px}
.sh-pillbtn.on{background:var(--s-brand,#b0123d);color:#fff;border-color:transparent}
.sh-me{display:flex;align-items:center}
.sh-field{display:none}
/* the pages: all drawn, parked side by side by the shell (transforms only) */
.cbx.off{opacity:1!important;visibility:visible!important;transform:translate3d(100vw,0,0)}
.csx{visibility:visible!important}
.cbx,.csx,#view-app .ct-app{will-change:transform}
.ct-sumbar,.ct-phead,.ct-stick{display:none!important}

@media(min-width:761px){
 .sh-in{width:min(var(--sh-w,1120px),calc(100% - 64px));margin:0 auto;height:94px;display:grid;grid-template-columns:148px auto minmax(0,1fr) auto auto;align-items:center;column-gap:10px}
 .sh-brand{font-size:19px}
 .sh-tabs{margin-left:14px}
 .sh-tabs .ct-tabs{position:relative;display:flex;margin:0!important}
 .sh-tabs .ct-tabs button{position:relative;z-index:1;width:112px;justify-content:center;background:none!important;box-shadow:none!important;transition:color .3s ease}
 .sh-tabs .ct-tabs button svg{transition:color .3s ease}
 .sh-pill{position:absolute;top:5px;left:0;height:40px;border-radius:12px;background:var(--s-card);box-shadow:0 1px 2px rgba(0,0,0,.08),0 6px 16px -8px rgba(0,0,0,.28);transition:transform .56s cubic-bezier(.4,0,.2,1),width .56s cubic-bezier(.4,0,.2,1);pointer-events:none}
 .sh-acts{margin-left:14px}
 .sha[data-p="entries"] .ct-search{flex:1 1 440px;max-width:440px;min-width:150px!important;height:44px!important;margin:0!important}
 .sha[data-p="entries"] .ct-add{margin:0!important}
 .sh-q,.sh-sshare{display:none!important}
 /* the old per-page headers are replaced by the shell */
 .ct-demo .ct-demo-top{display:none!important}
 .ct-demo .ct-app{padding-top:132px!important}
}
@media(max-width:760px){
 .sh-in{height:calc(62px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));display:flex;align-items:center;gap:8px;transition:opacity .16s ease}
 .sh-tabs{display:none}
 .sh-brand{flex:1}
 .ct-shell[data-page="entries"] .sh-brand{font-size:17px}
 .ct-shell:not([data-page="entries"]) .sh-brand{font-size:24px;letter-spacing:-.02em}
 .ct-shell:not([data-page="entries"]) .sh-brand img{display:none}
 .sh-acts{flex:none}
 .sha{gap:8px}
 .sh-ic{width:38px;height:38px}
 .sh-pillbtn{height:38px;padding:0 13px 0 11px}
 .sh-save span{display:none}.sh-save{width:38px;padding:0;justify-content:center}
 .sha[data-p="entries"] .ct-add{display:none}
 .sh-q{opacity:var(--k,0);transform:scale(calc(.82 + .18 * var(--k,0)))}
 .sh-field{position:absolute;left:12px;right:12px;bottom:10px;height:42px;display:flex;align-items:center;gap:9px;padding:0 4px 0 14px;border-radius:999px;background:var(--s-card);border:1px solid var(--s-hair);color:var(--ct-muted);opacity:0;pointer-events:none;transition:opacity .18s ease}
 .sh-field input{flex:1;min-width:0;border:0!important;background:none!important;font:inherit;font-size:16px;outline:none!important;color:var(--ct-text);padding:0!important;height:auto!important;box-shadow:none!important;-webkit-appearance:none;appearance:none}
 .sh-x{border:0;background:none;color:var(--tab-on);font:inherit;font-size:14px;font-weight:750;padding:0 12px;height:36px}
 .ct-shell.q-on .sh-in{opacity:0;pointer-events:none}
 .ct-shell.q-on .sh-field{opacity:1;pointer-events:auto}
 /* Entries: its header keeps only the big search, just under the shell */
 .ct-demo .ct-demo-top .ct-brand{display:none!important}
 .ct-demo .ct-demo-top{padding-top:calc(52px + env(safe-area-inset-top,0px))!important}
}

/* ================= v36.2: Entries, boxes on the left, entries on the right ================= */
/* quick metrics */
.ct-qm{background:var(--s-card);border:1px solid var(--s-hair);border-radius:20px;box-shadow:var(--s-whisper);position:relative}
.qm-h{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 4px;font-size:12.5px;font-weight:800;color:var(--ct-muted)}
.qm-edit{border:0;background:none;padding:4px 2px;font:inherit;font-size:12.5px;font-weight:750;color:var(--tab-on);cursor:pointer}
.qm-rows{overflow:hidden;border-radius:0 0 20px 20px}
.qm-row{position:relative;display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 16px;isolation:isolate}
.qm-row+.qm-row{border-top:1px solid var(--s-hair)}
.qm-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--s-track);flex:none;color:var(--ct-muted)}
.qm-tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.qm-tx small{font-size:11.5px;font-weight:750;color:var(--ct-muted)}
.qm-tx em{font-style:normal;font-size:14px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ct-text)}
.qm-v{text-align:right;display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;flex:none}
.qm-v strong{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ct-text)}.qm-v strong.g{color:var(--bu-ok)}
.qm-v span{font-size:11.5px;font-weight:650;color:var(--ct-muted)}
.qm-none{margin:6px 16px 14px;font-size:13px;color:var(--ct-muted)}
/* Best sale: the art shows most in the middle and fades out under the words on both sides */
.qm-art{min-height:68px}
.qm-bg{position:absolute;inset:0;z-index:-1;background-size:130% auto;background-position:50% 30%;background-repeat:no-repeat;opacity:.62;
 -webkit-mask:linear-gradient(90deg,rgba(0,0,0,.06) 0%,rgba(0,0,0,.14) 24%,#000 50%,rgba(0,0,0,.14) 76%,rgba(0,0,0,.06) 100%);mask:linear-gradient(90deg,rgba(0,0,0,.06) 0%,rgba(0,0,0,.14) 24%,#000 50%,rgba(0,0,0,.14) 76%,rgba(0,0,0,.06) 100%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .qm-bg{opacity:.5}}
:root[data-theme="dark"] .qm-bg{opacity:.5}
.qm-pop{position:absolute;right:10px;top:40px;z-index:30;width:220px;background:var(--s-card);border:1px solid var(--s-hair);border-radius:16px;box-shadow:0 18px 44px -18px rgba(0,0,0,.4);padding:6px;animation:msPop .18s cubic-bezier(.2,.8,.2,1) both}
.qm-pop p{margin:4px 10px 6px;font-size:11.5px;font-weight:750;color:var(--ct-muted)}
.qm-pop button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;width:100%;height:36px;padding:0 10px;border-radius:10px;font-size:13.5px;font-weight:650;color:var(--ct-text);cursor:pointer}
.qm-pop button:hover{background:var(--s-track)}
.qm-pop button i{width:18px;height:18px;border-radius:6px;border:1.5px solid var(--s-hair)}
.qm-pop button[aria-checked="true"] i{background:var(--s-brand,#b0123d) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat;border-color:transparent}
/* the filter row */
.ct-demo-right .ct-filters,.ct-demo-right .ct-list-meta{display:none!important}
.ct-fbar{display:flex;align-items:center;gap:10px;margin:0 0 14px;flex-wrap:wrap}
.fb-chips{display:flex;gap:6px;margin-right:auto;min-width:0}
.fb-chips button{height:34px;padding:0 14px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font:inherit;font-size:13.5px;font-weight:750;color:var(--ct-muted);border:1px solid var(--s-hair);background:transparent;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.fb-chips button em{font-style:normal;font-weight:700;opacity:.6}.fb-chips button em:empty{display:none}
.fb-chips button.on{background:var(--ct-text);color:var(--s-card);border-color:transparent}
.fb-chips button:active{transform:scale(.96)}
.fb-dds{display:flex;align-items:center;gap:4px}
.fb-dds select{-webkit-appearance:none;appearance:none;height:34px!important;width:auto!important;max-width:none!important;min-width:0!important;margin:0!important;padding:0 24px 0 10px!important;border:0!important;border-radius:10px!important;box-shadow:none!important;
 background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2377736d' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 6px center/12px no-repeat!important;
 font:inherit!important;font-size:13px!important;font-weight:750!important;color:var(--ct-text)!important;cursor:pointer}
.fb-dds select:hover{background-color:var(--s-track)!important}
@media(min-width:1100px){
 .ct-shell{--sh-w:1360px}
 .ct-app #app-grid.ct-demo-grid{flex:none!important;height:auto!important;max-height:none!important;grid-template-rows:auto!important;width:min(1360px,calc(100% - 64px))!important;display:grid!important;grid-template-columns:372px minmax(0,1fr)!important;column-gap:40px!important;align-items:start}
 .ct-demo .ct-demo-right{contain:none!important}
 .ct-app #app-grid.ct-demo-grid>.ct-demo-left{position:sticky!important;top:110px!important;align-self:start!important;display:flex;flex-direction:column;gap:14px}
 .ct-app .ct-demo-left .ct-stats{grid-template-columns:1fr 1fr!important;margin:0!important}
 .ct-demo-left .ct-mstep.ms-main{margin:0 0 2px!important}.ct-demo-left .ct-mstep.ms-main .ms-lab{font-size:20px!important}
 .ct-fbar{min-height:36px;margin-bottom:16px}
}
@media(min-width:761px) and (max-width:1099px){
 .ct-qm{margin:-12px 0 24px}.qm-rows{display:grid;grid-template-columns:1fr 1fr}.qm-row+.qm-row{border-top:0}.qm-row:nth-child(n+3){border-top:1px solid var(--s-hair)}
}
@media(max-width:760px){
 .ct-qm{display:none}
 .ct-fbar{gap:8px;margin:4px 0 12px}
 .fb-chips{width:100%;margin:0 -12px;padding:0 12px;overflow-x:auto;scrollbar-width:none;flex:none;width:calc(100% + 24px)}.fb-chips::-webkit-scrollbar{display:none}
 .fb-chips button{flex:none}
 .fb-dds{margin-left:auto}
}
@media(min-width:1100px){.ct-demo .ct-app{max-width:none!important;padding-left:0!important;padding-right:0!important}}
.ct-demo .ct-fbar .fb-dds select,:root .ct-demo .ct-fbar .fb-dds select{background-color:transparent!important;border:0!important;box-shadow:none!important}
.ct-demo .ct-fbar .fb-dds select:hover{background-color:var(--s-track)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ct-demo .ct-fbar .fb-dds select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a4a4a0' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")!important}}
.ct-demo .ct-fbar .fb-dds select{field-sizing:content}
@media(max-width:760px){.ct-demo .ct-fbar .fb-dds select{max-width:46vw!important;font-size:13.5px!important}}
/* v36.3 desktop: with the header always on screen, pages start 20px under it (not 60), on all three pages */
@media(min-width:761px){.ct-demo .ct-app{padding-top:114px!important}}
@media(min-width:1100px){.ct-app #app-grid.ct-demo-grid>.ct-demo-left{top:114px!important}}

/* ================= v36.4: the pill switcher (desktop) and a floating pill tab bar (phones) ================= */
:root{--pill-on:var(--s-card,#fff);--pill-edge:transparent;--pill-glow:0 1px 2px rgba(0,0,0,.08),0 6px 16px -8px rgba(0,0,0,.28)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--pill-on:#3a3734;--pill-edge:rgba(255,255,255,.13);--pill-glow:inset 0 1px 0 rgba(255,255,255,.1),0 4px 14px -6px rgba(0,0,0,.6)}}
:root[data-theme="dark"]{--pill-on:#3a3734;--pill-edge:rgba(255,255,255,.13);--pill-glow:inset 0 1px 0 rgba(255,255,255,.1),0 4px 14px -6px rgba(0,0,0,.6)}
@media(min-width:761px){
 .sh-tabs .ct-tabs{border-radius:999px!important;padding:5px!important}
 .sh-tabs .ct-tabs button{border-radius:999px!important}
 .sh-pill{border-radius:999px!important;background:var(--pill-on)!important;box-shadow:var(--pill-glow)!important;outline:1px solid var(--pill-edge);outline-offset:-1px}
}
@media(max-width:760px){
 .ct-tbar{left:max(14px,env(safe-area-inset-left,0px))!important;right:max(14px,env(safe-area-inset-right,0px))!important;bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;
  height:62px;padding:5px!important;border-radius:999px;border:1px solid var(--win-edge)!important;border-top:1px solid var(--win-edge)!important;justify-content:stretch!important;
  background:color-mix(in srgb,var(--s-card,#fff) 82%,transparent)!important;box-shadow:0 10px 30px -12px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.06)}
 .ct-tbar button{position:relative;z-index:1;flex:1;min-width:0!important;justify-content:center;gap:2px!important;border-radius:999px;transition:color .3s ease}
 .ct-tbar button span{width:auto!important;height:26px!important;background:none!important;transition:transform .15s}
 .ct-tbar button[aria-current] span{color:var(--tab-on)!important}
 .ct-tbar .tb-pill{position:absolute;top:5px;bottom:5px;left:0;border-radius:999px;background:var(--tab-onbg);pointer-events:none;transition:transform .46s cubic-bezier(.4,0,.2,1),width .46s cubic-bezier(.4,0,.2,1)}
 .ct-demo-right{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important}
 .app-toasts{bottom:calc(86px + env(safe-area-inset-bottom,0px))!important}
 .ct-fab{bottom:calc(86px + env(safe-area-inset-bottom,0px))!important}
}

/* v36.5: Add to Home Screen close button stays a true circle (it was squeezed by the title next to it) */
.hs-x{flex:none;padding:0;display:grid;place-items:center;aspect-ratio:1;line-height:0}

/* v36.5: At a glance picker — showing ones on top in order, with a grip to drag */
.qm-pop{width:240px}
.qm-it{display:flex;align-items:center;gap:2px;border-radius:10px;background:var(--s-card);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.qm-it button{flex:1;min-width:0}
.qm-grip{flex:none;width:26px;height:36px;display:grid;place-items:center;color:var(--ct-muted);cursor:grab;touch-action:none;border-radius:8px;opacity:.75}
.qm-grip:hover{opacity:1}.qm-grip:focus-visible{outline:2px solid var(--s-brand,#b0123d);outline-offset:-2px}
.qm-nogrip{cursor:default}
.qm-held{position:relative;z-index:2;transition:none;box-shadow:0 10px 24px -10px rgba(0,0,0,.45);cursor:grabbing}
.qm-held .qm-grip{cursor:grabbing;opacity:1}
.qm-more{display:block;margin:8px 10px 2px;padding-top:8px;border-top:1px solid var(--s-hair);font-size:11px;font-weight:800;color:var(--ct-muted);text-transform:uppercase;letter-spacing:.05em}

/* ===== v37: the toolbar row — the same second row under the header on every page ===== */
.sh-row2{display:none}
@media(min-width:1100px){
 .sh-row2{display:grid;position:relative;width:min(var(--sh-w,1120px),calc(100% - 64px));margin:-6px auto 0;height:56px;grid-template-columns:372px minmax(0,1fr);column-gap:40px;align-items:center}
 .sh-date,.sh-tools{position:relative;display:grid;align-items:center;min-width:0;height:100%}
 .shd,.sht{grid-area:1/1;display:flex;align-items:center;min-width:0;opacity:0;pointer-events:none;transition:opacity .22s ease}
 .shd.on,.sht.on{opacity:1;pointer-events:auto}
 .sh-tools .sht{justify-content:flex-end}.sh-tools .sht[data-p="entries"]{justify-content:stretch}
 .shd>.ct-mstep{flex:1;margin:0!important}
 .shd .ct-mstep .ms-lab{font-size:20px!important}
 .sht .ct-fbar{flex:1;margin:0!important;min-height:0;flex-wrap:nowrap}
 .sh-row2 .ct-fbar .fb-dds select{background-color:transparent!important;border:0!important;box-shadow:none!important;field-sizing:content}
 .sh-row2 .ct-fbar .fb-dds select:hover{background-color:var(--s-track)!important}
 /* the page content starts under both rows */
 html.has-row2 .ct-demo .ct-app{padding-top:160px!important}
 html.has-row2 .ct-app #app-grid.ct-demo-grid>.ct-demo-left{top:160px!important}
}
@media(min-width:1100px) and (prefers-reduced-motion:reduce){.shd,.sht{transition:none}}
/* the small menus in the row (board platform, Stories range) */
.sh-dd{position:relative}
.sh-ddb{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:999px;border:0;background:transparent;color:var(--ct-text);font:inherit;font-size:13.5px;font-weight:750;cursor:pointer}
.sh-ddb:hover,.sh-ddb.open{background:var(--s-track)}
.sh-ddb svg{color:var(--ct-muted);transition:transform .2s ease}.sh-ddb.open svg{transform:rotate(180deg)}
.sh-dd .sh-ddm{right:0;left:auto;min-width:200px}
.sht .sh-dd .sh-ddm{top:42px}
/* Stories' themes, as chips in the row */
.sh-chips{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.sh-chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px 0 10px;border-radius:999px;border:1px solid var(--s-hair);background:var(--s-card);color:var(--ct-text);font:inherit;font-size:13.5px;font-weight:750;white-space:nowrap;cursor:pointer;transition:transform .15s ease}
.sh-chip:active{transform:scale(.96)}
.sh-chip[aria-pressed="true"]{background:var(--ct-text);color:var(--s-bg,#f8f7f4);border-color:transparent}
.sh-chip .sw{display:inline-flex}.sh-chip .sw i{width:13px;height:13px;border-radius:50%;margin-left:-5px;box-shadow:0 0 0 1.5px var(--s-card)}.sh-chip .sw i:first-child{margin-left:0}
.sh-chip[aria-pressed="true"] .sw i{box-shadow:0 0 0 1.5px var(--ct-text)}
.sh-chip .rbw{width:15px;height:15px;border-radius:50%;background:conic-gradient(#ff5d73,#ffb547,#ffe45c,#5fd38d,#4fa8ff,#9b7bff,#ff5d73)}
/* the board's own date switcher (narrower screens) */
.ms-board{flex:none}

/* ===== v37: rows — the type is a small dot (no pill), and phones use the same row as desktop, just smaller ===== */
.ct-demo .ct-row .ct-row-line .ct-dot{width:7px;height:7px}
@media(max-width:760px){
 .ct-demo .ct-row .ct-row-toggle{display:flex!important;align-items:center;gap:10px}
 .ct-demo .ct-row .ct-expanded-right{display:block!important;flex:1;min-width:0}
 .ct-demo .ct-row .ct-row-meta,.ct-demo .ct-row .ct-row-bottom,.ct-demo .ct-row .ct-row-toggle .ct-tag,.ct-demo .ct-row .ct-row-chevron{display:none!important}
 .ct-demo .ct-row .ct-row-name{font-size:14.5px!important;font-weight:700;letter-spacing:-.01em;line-height:1.3;margin:0!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 .ct-demo .ct-row.expanded .ct-row-name{-webkit-line-clamp:4;font-size:15.5px!important;font-weight:800}
 .ct-demo .ct-row .ct-row-line{display:block;margin-top:4px;font-size:12.5px;font-weight:600;color:var(--ct-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .ct-demo .ct-row .ct-row-line .ct-dot{vertical-align:1px;margin-right:6px}
 .ct-demo .ct-row .ct-row-amt{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none;text-align:right;padding-right:2px}
 .ct-demo .ct-row-amt strong{font-size:16px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ct-text)}
 .ct-demo .ct-row-amt.sale strong{color:var(--bu-ok)}
 .ct-demo .ct-row-amt small{font-size:12px;font-weight:600;color:var(--ct-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
 .ct-demo .ct-row.expanded .ct-row-toggle{align-items:flex-start}
 .ct-demo .ct-row.expanded .ct-expanded-right,.ct-demo .ct-row.expanded .ct-row-amt{padding-top:2px}
 .ct-demo .ct-row .ct-stats-row{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

/* ===== v37: List / Gallery switch ===== */
.fb-view{display:inline-flex;background:var(--s-track);border-radius:999px;padding:3px;gap:2px;flex:none}
.fb-view button{all:unset;box-sizing:border-box;width:34px;height:28px;border-radius:999px;display:grid;place-items:center;color:var(--ct-muted);cursor:pointer;transition:color .2s ease}
.fb-view button[aria-pressed="true"]{background:var(--pill-on,var(--s-card));color:var(--ct-text);box-shadow:var(--pill-glow,0 1px 2px rgba(0,0,0,.08));outline:1px solid var(--pill-edge,transparent);outline-offset:-1px}
.fb-view button:focus-visible{outline:2px solid var(--tab-on,#b0123d);outline-offset:1px}
.ct-fbar .fb-dds{margin-left:auto}
#ct-rows{transition:opacity .14s ease}
#ct-rows.ct-swap{opacity:0}

/* ===== v37: gallery ===== */
.ct-demo #ct-rows.ct-gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-content:start;background:none!important;box-shadow:none!important;border:0!important;-webkit-mask-image:none;mask-image:none;padding:2px 2px 24px}
@media(min-width:1100px){.ct-demo #ct-rows.ct-gal{grid-template-columns:repeat(5,minmax(0,1fr))}}
.ct-demo #ct-rows.ct-gal>.ct-month,.ct-demo #ct-rows.ct-gal>.ct-empty{grid-column:1/-1}
.ct-tile{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:6px;min-width:0;background:var(--s-card);border:1px solid var(--s-hair);border-radius:16px;padding:11px;cursor:pointer;box-shadow:var(--s-whisper,0 1px 2px rgba(0,0,0,.05));transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.ct-tile:hover{transform:translateY(-2px)}
.ct-tile:active{transform:scale(.98)}
.ct-tile:focus-visible{outline:2px solid var(--tab-on,#b0123d);outline-offset:2px}
.ct-tile-art{display:grid;place-items:center;aspect-ratio:63/88;border-radius:8px;overflow:hidden;background:var(--s-track)}
.ct-tile-art img{width:100%;height:100%;object-fit:cover;display:block}
.ct-tile-art i{font-style:normal;font-size:12.5px;font-weight:700;color:var(--ct-muted);text-align:center;padding:12px;line-height:1.35}
.ct-tile-nm{display:block;margin-top:4px;font-size:13.5px;font-weight:700;line-height:1.3;color:var(--ct-text)}
.ct-tile-full{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.ct-tile-short,.ct-tile-pl{display:none}
.ct-tile-ln{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ct-muted);min-width:0;white-space:nowrap}
.ct-tile-amt{font-size:17px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ct-text)}
.ct-tile-amt.sale{color:var(--bu-ok)}
.ct-tile.ct-new{animation:tileIn .5s cubic-bezier(.2,.9,.25,1) both}
@keyframes tileIn{from{opacity:0;transform:translateY(10px) scale(.97)}}
@media(max-width:760px){
 .ct-demo #ct-rows.ct-gal{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px;padding:4px 0 24px}
 .ct-tile{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"art art" "nm nm" "ln amt";gap:0;background:none;border:0;padding:0;box-shadow:none;border-radius:10px}
 .ct-tile:hover{transform:none}
 .ct-tile-art{grid-area:art;border-radius:9px;box-shadow:0 1px 2px rgba(0,0,0,.08),0 8px 18px -12px rgba(0,0,0,.4)}
 .ct-tile-nm{grid-area:nm;margin-top:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .ct-tile-full{display:none}.ct-tile-short{display:inline}
 .ct-tile-ln{grid-area:ln;font-size:12px;margin-top:1px;overflow:hidden}
 .ct-tile-meta{display:none}.ct-tile-pl{display:inline;overflow:hidden;text-overflow:ellipsis}
 .ct-tile-amt{grid-area:amt;font-size:13.5px;margin-top:1px;padding-left:6px;align-self:center}
}
@media(prefers-reduced-motion:reduce){.ct-tile,#ct-rows{transition:none}.ct-tile.ct-new{animation:none}}

/* ===== v37: the details panel for a gallery card ===== */
.ct-gp{border:0;padding:0;margin:auto;background:transparent;width:min(760px,calc(100vw - 140px));max-width:none;max-height:calc(100dvh - 48px);overflow:visible;color:var(--ct-text)}
.ct-gp::backdrop{background:rgba(0,0,0,.42);animation:gpFade .24s ease both}
.ct-gp.out::backdrop{animation:gpFade .2s ease reverse both}
.ct-gp .gp-in{position:relative;display:grid;grid-template-columns:240px minmax(0,1fr);gap:26px;background:var(--s-card);border-radius:24px;padding:24px;box-shadow:0 30px 70px -20px rgba(0,0,0,.55);animation:gpIn .3s cubic-bezier(.2,.9,.25,1) both}
.ct-gp.out .gp-in{animation:gpOut .2s ease both}
@keyframes gpFade{from{opacity:0}}
@keyframes gpIn{from{opacity:0;transform:translate3d(0,14px,0) scale(.97)}}
@keyframes gpOut{to{opacity:0;transform:translate3d(0,10px,0) scale(.98)}}
.gp-grab{display:none}
.gp-x{position:absolute;right:14px;top:14px;width:32px;height:32px;padding:0;border-radius:50%;border:1px solid var(--s-hair);background:var(--s-track);color:var(--ct-muted);display:grid;place-items:center;cursor:pointer;z-index:2}
.gp-art{aspect-ratio:63/88;border-radius:12px;overflow:hidden;background:var(--s-track);display:grid;place-items:center;align-self:start;box-shadow:0 1px 2px rgba(0,0,0,.1),0 14px 30px -18px rgba(0,0,0,.5)}
.gp-art img{width:100%;height:100%;object-fit:cover;display:block}
.gp-art i{font-style:normal;font-weight:700;color:var(--ct-muted);text-align:center;padding:16px}
.gp-body{min-width:0;padding-top:4px}
.gp-line{display:block;font-size:13px;font-weight:650;color:var(--ct-muted);padding-right:40px}
.gp-line .ct-dot{width:7px;height:7px;vertical-align:1px;margin-right:6px}
.gp-nm{margin:6px 0 0;font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.25;padding-right:30px}
.gp-amt{display:flex;align-items:baseline;gap:10px;margin-top:12px}
.gp-amt strong{font-size:24px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.gp-amt strong.sale{color:var(--bu-ok)}
.gp-amt span{font-size:13.5px;font-weight:600;color:var(--ct-muted)}
.ct-gp .ct-stats-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 18px;border-top:1px solid var(--s-hair);margin-top:18px;padding-top:16px}
.ct-gp .ct-stats-row small{display:block;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ct-muted);margin-bottom:3px}
.ct-gp .ct-stats-row span{font-size:16px;font-weight:750;font-variant-numeric:tabular-nums}
.ct-gp .ct-row-note{margin-top:14px;padding:10px 14px;border-radius:12px;background:var(--s-bg);font-size:13.5px}
.ct-gp .ct-demo-actions{display:flex;gap:8px;margin-top:20px}
.ct-gp .ct-demo-actions button{all:unset;box-sizing:border-box;height:38px;padding:0 18px;border-radius:999px;border:1px solid var(--s-hair);background:var(--s-card);font-size:14px;font-weight:700;cursor:pointer;color:var(--ct-text)}
.ct-gp .ct-demo-actions button:hover{background:var(--s-track)}
.ct-gp .ct-demo-actions [data-gact="del"]{margin-left:auto;border-color:transparent!important;background:transparent!important;box-shadow:none!important;color:var(--tab-on,#b0123d)}
.ct-gp .ct-demo-actions button:focus-visible,.gp-x:focus-visible,.gp-nav:focus-visible{outline:2px solid var(--tab-on,#b0123d);outline-offset:2px}
.gp-nav{position:absolute;top:50%;width:42px;height:42px;margin-top:-21px;padding:0;border-radius:50%;border:0;background:var(--s-card);color:var(--ct-text);display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 24px -10px rgba(0,0,0,.5)}
.gp-nav:disabled{opacity:.35;cursor:default}
.gp-prev{left:-62px}.gp-next{right:-62px}
@media(max-width:760px){
 .ct-gp{width:100%;max-width:100%;margin:auto 0 0;max-height:90dvh}
 .ct-gp .gp-in{grid-template-columns:96px minmax(0,1fr);column-gap:14px;row-gap:0;border-radius:24px 24px 0 0;padding:10px 18px calc(22px + env(safe-area-inset-bottom,0px));max-height:90dvh;overflow-y:auto;transform:translate3d(0,var(--dy,0),0);animation:gpUp .36s cubic-bezier(.2,.9,.25,1) both;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
 .ct-gp.out .gp-in{animation:gpDown .22s ease-in both}
 @keyframes gpUp{from{transform:translate3d(0,100%,0)}}
 @keyframes gpDown{from{transform:translate3d(0,var(--dy,0),0)}to{transform:translate3d(0,100%,0)}}
 .gp-grab{display:block;grid-column:1/-1;width:38px;height:5px;border-radius:9px;background:var(--s-hair);margin:0 auto 14px;touch-action:none}
 .gp-x{top:22px;right:16px}
 .gp-art{grid-row:2/5;border-radius:9px}
 .gp-body{display:contents}
 .gp-line{grid-column:2;align-self:end;font-size:12.5px}
 .gp-nm{grid-column:2;font-size:16px;margin-top:4px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
 .gp-amt{grid-column:2;margin-top:8px;flex-wrap:wrap;gap:2px 8px;align-self:start}
 .gp-amt strong{font-size:19px}.gp-amt span{font-size:12.5px}
 .ct-gp .ct-row-expanded-info{grid-column:1/-1}
 .ct-gp .ct-stats-row{gap:10px 12px;margin-top:16px;padding-top:14px}
 .ct-gp .ct-stats-row small{font-size:10px}.ct-gp .ct-stats-row span{font-size:15px}
 .ct-gp .ct-demo-actions{margin-top:16px}.ct-gp .ct-demo-actions button{height:36px;padding:0 15px;font-size:13.5px}
 .gp-nav{display:none}
}
@media(prefers-reduced-motion:reduce){.ct-gp .gp-in,.ct-gp::backdrop{animation:none!important}}

/* ===== v37.1: the open row, modeled on the website's card ===== */
/* open: the date line moves above the name, the name gets the full width (the right-hand amount steps aside), and the
   money reads as a short receipt beside the art: Sold, Fees and shipping, a dashed line, You kept */
.ct-demo .ct-row:not(.expanded) .ct-money{display:none}
.ct-demo .ct-row.expanded .ct-row-amt{display:none!important}
.ct-demo .ct-row.expanded .ct-expanded-right{display:flex!important;flex-direction:column;min-width:0;flex:1}
.ct-demo .ct-row.expanded .ct-row-line{order:-1;margin:0 0 6px!important}
.ct-demo .ct-row.expanded .ct-row-name{display:block!important;-webkit-line-clamp:unset!important;overflow:visible!important}
.ct-money{display:grid;gap:8px;margin-top:14px;max-width:440px;width:100%}
.ct-mr{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:15px;font-weight:600;color:var(--ct-text)}
.ct-mr b{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.ct-mr.neg b{color:var(--tab-on,#b0123d)}
.ct-mdash{display:block;border-top:1.5px dashed var(--s-hair);margin:6px 0 4px}
.ct-mr.kept span{font-size:16.5px;font-weight:800}
.ct-mr.kept b{font-size:27px;font-weight:800;letter-spacing:-.02em;color:var(--bu-ok)}
.ct-mr.paid b{font-size:19px;font-weight:800}
.ct-facts{display:flex;flex-wrap:wrap;gap:6px}
.ct-facts span{font-size:12.5px;font-weight:700;color:var(--ct-muted);background:var(--s-track);border-radius:999px;padding:4px 11px}
.ct-demo .ct-row .ct-open-actions .ct-facts+.ct-demo-actions,.ct-demo .ct-row .ct-open-actions .ct-row-note+.ct-demo-actions{margin-top:14px}
.ct-demo .ct-row .ct-open-actions .ct-row-note{margin-top:10px}
@media(min-width:761px){
 .ct-demo .ct-row.expanded .ct-row-name{font-size:20px}
 .ct-demo .ct-row.expanded .ct-open-actions{margin-top:2px}
 .ct-demo .ct-row.expanded .ct-demo-actions{margin-top:16px}
}
@media(max-width:760px){
 .ct-demo .ct-row.expanded .ct-row-name{font-size:17px!important;line-height:1.28}
 .ct-demo .ct-row.expanded .ct-row-line{font-size:12.5px}
 .ct-money{gap:6px;margin-top:12px}
 .ct-mr{font-size:14px}
 .ct-mr.kept span{font-size:15px}
 .ct-mr.kept b{font-size:22px}
 .ct-mr.paid b{font-size:17px}
 .ct-demo .ct-row.expanded .ct-open-actions{margin-top:4px}
}
/* the gallery's details panel uses the same receipt */
.ct-gp .ct-money{margin-top:16px}
.ct-gp .ct-facts{margin-top:16px}
.ct-gp .ct-row-expanded-info>.ct-row-note{margin-top:12px}
@media(max-width:760px){.ct-gp .ct-money{grid-column:2;margin-top:10px}.ct-gp .gp-art{grid-row:2/5}.ct-gp .ct-facts{margin-top:14px}}
/* the header's page buttons only take the room of the page you're on (the others fade out on top, at the right) */
.sh-acts{position:relative}
.sha:not(.on){position:absolute;right:0;top:50%;margin-top:-20px;width:auto}
@media(max-width:760px){.sha:not(.on){margin-top:-18px}}
html.cs-modal .csx{z-index:120!important}

/* ===== v37.2: open row — condition in the date line; desktop puts the total across from the buttons ===== */
.ct-demo .ct-row:not(.expanded) .ct-cond{display:none}
.ct-money{max-width:none}
.ct-mtot{display:grid;gap:8px}
.ct-dtot,.ct-pacts{display:none}
@media(min-width:761px){
 .ct-demo .ct-row .ct-mtot{display:none}
 .ct-demo .ct-row .ct-money-solo{display:none}
 .ct-demo .ct-row .ct-dtot{display:block}
 .ct-demo .ct-row .ct-dtot .ct-mdash{margin:4px 0 10px}
 .ct-dtrow{display:flex;align-items:center;gap:16px}
 .ct-demo .ct-row .ct-dtrow .ct-demo-actions{margin:0!important;flex:none}
 .ct-demo .ct-row .ct-dtrow .ct-demo-actions button[data-act="del"]{margin-left:0!important}
 .ct-dtrow .ct-mr{margin-left:auto;gap:18px}
 .ct-demo .ct-row.expanded .ct-open-actions{margin-top:10px!important;margin-bottom:16px!important}
 .ct-demo .ct-row .ct-open-actions .ct-row-note{margin-top:12px}
}
@media(max-width:760px){
 .ct-demo .ct-row .ct-pacts{display:block}
 .ct-demo .ct-row .ct-pacts .ct-demo-actions{margin-top:12px}
}
.ct-gp .ct-pacts,.ct-gp .ct-dtot{display:none}
@media(min-width:761px){.ct-demo .ct-row .ct-row-line{display:block!important;overflow:hidden;text-overflow:ellipsis}.ct-demo .ct-row .ct-row-line .ct-dot{vertical-align:1px;margin-right:7px}}
/* the sign-in page has no app header (nothing to switch to before you are in) */
body:has(#view-app[hidden]) .ct-shell,body:has(#view-app[hidden]) .ct-tbar,body:has(#view-app[hidden]) #ct-fab{display:none!important}

/* ===== v37.4: phone rows, closed (option A): the name gets the whole width (up to two lines); under it the date line
   on the left and the amount on the right. "After fees" lives in the open row, where You kept says it. ===== */
@media(max-width:760px){
 .ct-demo .ct-row:not(.expanded) .ct-row-toggle{display:grid!important;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:4px;align-content:center;align-items:baseline}
 .ct-demo .ct-row:not(.expanded) .ct-expanded-right{display:contents!important}
 .ct-demo .ct-row:not(.expanded) .ct-row-name{grid-column:1/-1;grid-row:1}
 .ct-demo .ct-row:not(.expanded) .ct-row-line{grid-column:1;grid-row:2;margin:0!important;min-width:0}
 .ct-demo .ct-row:not(.expanded) .ct-row-amt{grid-column:2;grid-row:2;display:block!important;padding:0}
 .ct-demo .ct-row:not(.expanded) .ct-row-amt small{display:none}
 .ct-demo .ct-row:not(.expanded) .ct-row-amt strong{font-size:15.5px}
}
/* v37.5: narrow phones (big text sizes): the date label steps down a size and header pills become icons, so nothing is cut off */
@media(max-width:350px){
 .ct-mstep.ms-main .ms-lab{font-size:16.5px!important}
 .ct-mstep.ms-main>button{width:32px!important;height:32px!important}
 .ct-mstep .ms-rng{padding:0 9px 0 11px!important}
 .sh-pillbtn span{display:none}
 .sh-pillbtn{width:36px;padding:0!important;justify-content:center}
}

/* ===== v37.6: the entry form on phones, styled like the profile sheet ===== */
.ed-g{display:contents}
.ed-grab{display:none}
@media(max-width:760px){
 .ed[open]{align-items:flex-end;padding:0;margin:0;width:100%;max-width:100%;height:100%;max-height:100%}
 .ed .ed-form{width:100%!important;max-height:min(90dvh,calc(100dvh - 40px - env(safe-area-inset-top,0px)))!important;background:var(--sheet-bg)!important;border:0!important;border-top:1px solid var(--win-edge)!important;border-radius:26px 26px 0 0!important;padding:0 12px!important;gap:10px!important;box-shadow:0 -12px 40px -16px rgba(0,0,0,.35)!important;overscroll-behavior:contain}
 /* the top: grab handle and title, pinned while the fields scroll */
 .ed .ed-head{position:sticky;top:0;z-index:3;margin:0 -12px;padding:22px 16px 8px;background:var(--sheet-bg);touch-action:none}
 .ed .ed-grab{display:block;position:absolute;top:8px;left:50%;width:38px;height:5px;margin-left:-19px;border-radius:999px;background:color-mix(in srgb,var(--ct-text) 22%,transparent)}
 .ed .ed-head h2{font-size:20px;font-weight:800;letter-spacing:-.02em}
 .ed .ed-x{width:32px;height:32px;margin:0;background:var(--s-card);border:1px solid var(--s-hair)}
 /* Purchase / Sale / Refund */
 .ed .ed-seg{background:var(--s-card);border-radius:16px;padding:4px}
 .ed .ed-seg button{padding:10px 4px;border-radius:12px;font-size:14.5px;font-weight:700}
 .ed .ed-pill{top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/3);border-radius:12px;background:var(--s-track);box-shadow:none}
 /* each group is a rounded card, like the profile sheet's */
 .ed .ed-g{display:grid;gap:12px;background:var(--s-card);border-radius:18px;padding:14px}
 .ed .ed-g .ed-row{gap:10px}
 .ed .ed-f{gap:6px;font-size:12.5px}
 .ed .ed-f>span:first-child{font-weight:700}
 /* every field the same: same height, same corners, same fill — text, money, date, select */
 .ed .ed-f input,.ed .ed-f select,.ed .ed-f textarea{-webkit-appearance:none;appearance:none;height:46px;min-height:46px;border-radius:12px!important;border:1px solid transparent!important;background:var(--s-track)!important;color:var(--ct-text);font:inherit;font-size:16px!important;font-weight:600;padding:0 14px;box-shadow:none!important;margin:0}
 .ed .ed-money input{padding-left:28px}
 .ed .ed-money i{left:14px;font-size:16px}
 .ed .ed-f input:focus,.ed .ed-f select:focus,.ed .ed-f textarea:focus{border-color:#5b9fe3!important;outline:none}
 .ed .ed-f input[type=date]{display:block;width:100%;text-align:left;line-height:46px}
 .ed .ed-f input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0}
 .ed .ed-f input[type=date]::-webkit-calendar-picker-indicator{opacity:.5}
 .ed .ed-f select{padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 14px center!important;background-size:14px!important}
 .ed .ed-f textarea{height:auto;min-height:72px;padding:12px 14px;line-height:1.4}
 .ed .ed-keep{font-size:12.5px;margin-top:-2px}
 .ed .ed-left{margin:0;border-radius:14px}
 /* the bottom: Save, pinned */
 .ed .ed-foot{position:sticky;bottom:0;z-index:3;margin:2px -12px 0;padding:10px 12px calc(12px + env(safe-area-inset-bottom,0px));background:var(--sheet-bg);gap:10px}
 .ed .ed-cancel{display:none}
 .ed .ed-del{padding:0 14px;height:50px;font-weight:700;font-size:15px}
 .ed .ed-save{flex:1;height:50px;border-radius:999px;font-size:16px}
}
@media(max-width:760px){
 .ed .ed-f select{background:var(--s-track) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/14px!important}
}
@media(max-width:350px){.ed .ed-g-when .ed-row{grid-template-columns:minmax(0,1fr)}}
.ed .ed-f select{border-radius:12px!important}
/* v37.7: phones — the entry sheet is pinned to the bottom of the screen itself (like the profile sheet), so it can never
   open half off the top, whatever the browser does with the window's height */
@media(max-width:760px){
 .ed[open]{position:fixed!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;overflow:hidden!important}
 .ed .ed-form{position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;margin:0!important;transform-origin:bottom center}
}

/* ===== v37.8: Add a card on phones matches the entry and profile sheets: same sheet color, corners, grab handle,
   title, close button, switch and field shapes ===== */
@media(max-width:760px){
 #as .phone{background:var(--sheet-bg)!important;border:0!important;border-top:1px solid var(--win-edge)!important;border-radius:26px 26px 0 0!important;box-shadow:0 -12px 40px -16px rgba(0,0,0,.35)!important}
 #as .sheet{padding:0 12px}
 #as .grab{width:38px;height:5px;border-radius:999px;background:color-mix(in srgb,var(--ct-text) 22%,transparent);margin:8px auto 0}
 #as .hd{padding:6px 4px 8px}
 #as .hd h2{font-size:20px;font-weight:800;letter-spacing:-.02em}
 #as .x{width:32px;height:32px;background:var(--s-card);border:1px solid var(--s-hair)}
 #as .ctx{gap:10px}
 #as .seg{background:var(--s-card)!important;border-radius:16px!important;padding:4px!important}
 #as .seg .th{top:4px!important;bottom:4px!important;left:4px!important;border-radius:12px!important;background:var(--s-track)!important;box-shadow:none!important}
 #as .seg.n2 .th{width:calc(50% - 4px)!important}
 #as .seg button{height:40px!important;border-radius:12px!important;font-size:14.5px}
 #as .sel select{height:48px;border-radius:14px;border:0;background:var(--s-card);font-size:15px}
 #as .search{height:48px;border-radius:14px;border:1.5px solid transparent;background:var(--s-card);margin-top:10px}
 #as .lst{border:0;box-shadow:none;border-radius:18px}
 #as .addtyped{border:0;background:var(--s-card)}
 #as .save{height:50px;border-radius:999px;font-size:16px}
}
@media(max-width:760px){#as .search{border:1.5px solid transparent!important}#as .search:focus-within{border-color:#5b9fe3!important}#as .phone{height:calc(100% - 40px)!important}}
@media(max-width:760px){#as[open]{align-items:flex-end!important}}
@media(max-width:760px){
 #as#as .search,#as#as .sel select,#as#as #as-plat{background-color:var(--s-card)!important;border-color:transparent!important}
 #as#as .search:focus-within{border-color:#5b9fe3!important}
}
/* v37.9: while a sheet or window is open, the page behind it can't scroll (no scrolling "past" a sheet on phones) */
/* (v37.18: no page lock here — on iPhone it made sheets stall and jump; each sheet holds its own scrolling instead) */
/* v37.10: phones — the tab bar slides down out of the way while you scroll down, and back up when you scroll up */
@media(max-width:760px){
 .ct-tbar{transition:transform .32s cubic-bezier(.2,.8,.2,1)}
 html.tb-away .ct-tbar{transform:translate3d(0,calc(100% + 24px + env(safe-area-inset-bottom,0px)),0)}
}
@media(prefers-reduced-motion:reduce){.ct-tbar{transition:none}}
/* v37.11: the row shows one number (after fees by default); the full breakdown is in the open row */
.ct-demo .ct-row .ct-row-amt small{display:none!important}
/* v37.12: type your dates at the top of the custom calendar */
.mc-in{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.mc-in label{display:grid;gap:4px;min-width:0}
.mc-in small{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ct-muted)}
.mc-in input{width:100%;min-width:0;height:38px;border-radius:10px;border:1px solid var(--s-hair);background:var(--s-track);color:var(--ct-text);font:inherit;font-size:14px;font-weight:650;padding:0 10px;font-variant-numeric:tabular-nums;outline:none;margin:0}
.mc-in input:focus{border-color:#5b9fe3}
.mc-in input.bad{border-color:var(--tab-on,#b0123d)}
@media(max-width:760px){.mc-in input{font-size:16px;height:42px}}

/* ===== v37.13 ===== */
/* Add a card: the full-form link sits up off the bottom edge (clear of the home bar) */
@media(max-width:760px){#as .other{margin:4px auto calc(14px + env(safe-area-inset-bottom,0px))!important;padding:8px 6px}}
/* the entry form's lists (condition, platform): our own arrow, inside the field on every screen */
.ed .ed-f select{-webkit-appearance:none;appearance:none;padding-right:38px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 14px center!important;background-size:14px!important}
.ed .ed-f select+input{margin-top:8px}
/* profile: "Sales show" uses the exact same switch as Appearance */
.app-menu.am #am-amt{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #am-amt{background:var(--s-ctl)!important}:root:not([data-theme="light"]) #am-amt [aria-checked=true]{background:var(--s-raise)!important}}
:root[data-theme="dark"] #am-amt{background:var(--s-ctl)!important}:root[data-theme="dark"] #am-amt [aria-checked=true]{background:var(--s-raise)!important}
.app-menu.am .amr.amth .seg button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;padding:0 6px}
@media(max-width:760px){.app-menu.am .amr.amth .seg button{height:36px;font-size:13.5px}}
/* header buttons are always true circles (no squeezing on narrow phones) */
.sh-ic,.app-avatar{aspect-ratio:1;flex:none}
@media(max-width:350px){.sh-pillbtn{width:38px!important;height:38px!important;flex:none}}
/* phones: the tab bar and the header slide away while you scroll down and glide back on scroll up — the same motion as the website's header */
@media(max-width:760px){
 .ct-tbar{will-change:transform;transition:transform .8s cubic-bezier(.22,.61,.36,1)!important}
 html.tb-away .ct-tbar{transition:transform .6s cubic-bezier(.4,0,.2,1)!important}
 .ct-shell{will-change:transform;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
 html.tb-away .ct-shell:not(.q-on){transform:translate3d(0,-100%,0);transition:transform .6s cubic-bezier(.4,0,.2,1)}
}
@media(prefers-reduced-motion:reduce){.ct-tbar,.ct-shell{transition-duration:.01s!important}}
#ed .ed-f select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 14px center!important;background-size:14px!important;padding-right:38px!important}
/* v37.14: the At a glance picker floats over the page and scrolls inside when it's taller than the window */
body>.qm-pop{position:fixed;left:auto;z-index:120;overflow-y:auto;overscroll-behavior:contain;width:240px}
/* the picker beside the card on wide screens: a little wider, with a soft arrow-free slide in from the card */
body>.qm-pop.qm-side{width:270px;padding:8px;border-radius:18px;transform-origin:left center;animation:qmSide .22s cubic-bezier(.2,.8,.2,1) both}
@keyframes qmSide{from{opacity:0;transform:translate3d(-8px,0,0) scale(.98)}}
@media(prefers-reduced-motion:reduce){body>.qm-pop.qm-side{animation:none}}

/* ===== v37.16: phones — Add New is a round red button beside the tab bar, on every page; it tucks away with the bar
   while you scroll down. The top bar stays put. ===== */
@media(max-width:760px){
 html.tb-away .ct-shell{transform:none!important}
 .ct-tbar{right:calc(max(14px,env(safe-area-inset-right,0px)) + 70px)!important}
 .ct-fab{right:max(14px,env(safe-area-inset-right,0px))!important;bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;width:62px!important;height:62px!important;border-radius:50%!important;z-index:56!important;
  will-change:transform;transition:transform .8s cubic-bezier(.22,.61,.36,1),opacity .2s!important}
 .ct-fab:active{transform:scale(.92)}
 html.tb-away .ct-fab{transform:translate3d(0,calc(100% + 24px + env(safe-area-inset-bottom,0px)),0)!important;transition:transform .6s cubic-bezier(.4,0,.2,1),opacity .2s!important}
}
@media(prefers-reduced-motion:reduce){.ct-fab{transition-duration:.01s!important}}
/* v37.17: the tab bar and Add New sit above Board and Stories too (Stories' layer is z 90), under the header (95);
   an open Stories sheet still covers them (it lifts Stories to 120) */
@media(max-width:760px){.ct-tbar{z-index:92!important}.ct-fab{z-index:93!important}}

/* v37.18: Add a card is sized to the screen you can actually see (dynamic viewport), so its bottom is never below the
   screen; while you type, the keyboard-aware sizing takes over */
@media(max-width:760px){#as{height:100dvh;max-height:100dvh;overscroll-behavior:contain}}

/* ===== v37.19 ===== */
/* profile sheet on phones: no "stuck" hover highlight after a tap, and a pressed row fills its row edge to edge (the
   group's rounded corners clip it), the same size as every other row */
@media(hover:none){.app-menu.am .amg button:hover{background:none}.app-menu.am .amg button:hover .mi{color:inherit}}
@media(max-width:760px){
 .app-menu.am>.amg>button,.app-menu.am>.amg>.amr{border-radius:0!important;margin:0!important;width:100%}
 .app-menu.am>.amg>button:active{background:var(--am-hl)}
}
/* phones: while a window is open, the header and tab bar glass under it stops blurring (the window's own frosted veil covers
   them, so it looks the same). v37.22: every window keeps the same frosted veil on phones as on desktop. */
@media(max-width:760px){
 html.sheet-up .ct-tbar,html.sheet-up .ct-shell::before,html.sheet-up .ct-shell{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}

/* v37.21 Profit: tap for what it means */
.ct-stats small .ct-why{all:unset;display:inline-flex;align-items:center;gap:4px;cursor:pointer;color:inherit;font:inherit;border-radius:6px;-webkit-tap-highlight-color:transparent}
.ct-stats small .ct-why svg{opacity:.7;transition:opacity .15s}
.ct-stats small .ct-why:hover svg,.ct-stats small .ct-why[aria-expanded="true"] svg{opacity:1}
.ct-stats small .ct-why:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.ct-whypop{position:fixed;z-index:96;padding:12px 14px;border-radius:14px;background:var(--ct-surface,#fff);color:var(--ct-text,#1a1918);border:1px solid color-mix(in srgb,var(--ct-text,#1a1918) 12%,transparent);box-shadow:0 10px 30px rgba(0,0,0,.18);font-size:13px;line-height:1.45;opacity:0;transform:translateY(-4px);transition:opacity .18s ease,transform .18s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.ct-whypop.in{opacity:1;transform:none;pointer-events:auto}
.ct-whypop b{display:block;font-size:13.5px;margin-bottom:3px}
.ct-whypop p{margin:0;color:var(--ct-muted,#77736d)}

/* v37.21 fees and refunds on two short lines, so neither gets cut off on narrow phones */
.ct-line.is-two{height:auto;line-height:18px;padding-top:2px;white-space:pre-line}

/* v37.23 phones: Add New slides only once it's drawn (the .go class arrives one frame after opening), and drops the
   things iPhone is slow to draw on a full-screen layer: the big shadow and the faded edge on the results list */
@media(max-width:760px){
 #as .phone{animation:none;transform:translateY(100vh);box-shadow:none}
 #as.go .phone{animation:ct-shUpFar .42s cubic-bezier(.2,.8,.2,1) both}
 #as.go.closing .phone,#as.closing .phone{animation:ct-shDownFar .26s cubic-bezier(.4,0,1,1) both}
 #as #as-s1 .body{-webkit-mask:none;mask:none}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){#as .phone{transform:none}}

/* testing tool: Add New timing readout */
.as-diag{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:5;display:grid;gap:2px;padding:10px 12px;border-radius:14px;background:#111;color:#f4f4f1;font:600 12.5px/1.4 ui-monospace,Menlo,monospace;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.as-diag b{font-weight:800}

/* v37.26 phones: Add New starts its slide with its top edge just inside the bottom of the screen (like the profile sheet),
   never fully below it. Safari pauses animations on things that are completely off screen until you scroll, which is
   why the sheet only appeared after a drag. */
@keyframes ct-shUpEdge{from{transform:translateY(calc(100% - 2px))}to{transform:none}}
@media(max-width:760px){
 #as .phone{transform:translateY(calc(100% - 2px))}
 #as.go .phone{animation:ct-shUpEdge .42s cubic-bezier(.2,.8,.2,1) both}
}

/* ===== v38 Notifications ===== */
:root{--ntf-dot:#e8323f}
.app-avatar.has-ntf::after{content:"";position:absolute;top:-1px;right:-1px;width:11px;height:11px;border-radius:50%;background:var(--ntf-dot);box-shadow:0 0 0 2px var(--s-bg,#f8f7f4);animation:ntfPop .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes ntfPop{from{transform:scale(.3);opacity:0}}
.app-menu.am .amg button .am-ntf-n{margin-left:auto;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--ntf-dot);color:#fff;font:800 12px/22px Manrope,system-ui,sans-serif;font-style:normal;text-align:center}
.app-menu.am .amg button .am-ntf-n[hidden]{display:none}
.ntf .ntf-form{display:flex;flex-direction:column}
.ntf .ed-head{display:flex;align-items:center;gap:8px}
.ntf .ed-head h2{margin-right:auto}
.ntf-back{all:unset;cursor:pointer;font-size:26px;line-height:1;color:var(--muted,#77736d);padding:0 4px 3px 0;-webkit-tap-highlight-color:transparent}
.ntf-gear{width:32px;height:32px;border-radius:50%;border:1px solid var(--s-hair);background:var(--s-card);color:var(--muted,#77736d);display:grid;place-items:center;padding:0;cursor:pointer;flex:none}
.ntf-gear[hidden],.ntf-back[hidden]{display:none}
.ntf-body{padding:4px 0 6px;min-height:120px}
.ntf-gl{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#77736d);margin:16px 4px 7px}
.ntf-body>.ntf-gl:first-child{margin-top:4px}
.ntf-it{position:relative;background:var(--s-card);border:1px solid var(--s-hair);border-radius:18px;padding:13px 14px 13px 16px;margin-bottom:8px}
.ntf-it.new::before{content:"";position:absolute;left:6px;top:19px;width:6px;height:6px;border-radius:50%;background:var(--ntf-dot)}
.ntf-it.urgent{border-color:color-mix(in srgb,var(--ntf-dot) 45%,transparent)}
.ntf-t{display:flex;gap:11px;align-items:flex-start}
.ntf-tx{flex:1;min-width:0}
.ntf-tx b{display:block;font-size:14px;line-height:1.35;font-weight:800;color:var(--text)}
.ntf-tx p{margin:2px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted,#77736d)}
.ntf-when{font-size:11px;font-weight:700;color:var(--muted,#77736d);flex:none;padding-top:1px}
.ntf-ic{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;background:color-mix(in srgb,var(--brand,#b0123d) 10%,transparent);color:var(--brand,#b0123d)}
.ntf-it.urgent .ntf-ic{background:var(--ntf-dot);color:#fff}
.ntf-typo{text-decoration:underline wavy color-mix(in srgb,var(--ntf-dot) 70%,transparent);text-underline-offset:3px;color:var(--text)}
.ntf-acts{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0 41px}
.ntf-btn{font:800 12.5px Manrope,system-ui,sans-serif;border-radius:999px;padding:7px 13px;border:1px solid var(--s-hair);background:transparent;color:var(--text);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s}
.ntf-btn:active{transform:scale(.96)}
.ntf-btn.p{background:#c2163f;border-color:#c2163f;color:#fff}
.ntf-empty{display:grid;justify-items:center;text-align:center;gap:4px;padding:30px 12px 24px;color:var(--muted,#77736d)}
.ntf-empty b{color:var(--text);font-size:15px;margin-top:6px}.ntf-empty p{margin:0;font-size:13px;max-width:30ch}
.ntf-set{background:var(--s-card);border:1px solid var(--s-hair);border-radius:18px;overflow:hidden;margin-bottom:10px;transition:opacity .2s}
.ntf-set.dim{opacity:.55}
.ntf-sr{display:flex;align-items:center;gap:12px;padding:13px 14px;border-bottom:1px dotted var(--s-dot)}
.ntf-sr:last-child{border-bottom:0}
.ntf-sr>div{flex:1;min-width:0}.ntf-sr b{display:block;font-size:14.5px;font-weight:800;color:var(--text)}
.ntf-sr span{display:block;font-size:12px;line-height:1.4;color:var(--muted,#77736d)}
.ntf .swt{width:44px;height:26px;padding:2px;border-radius:999px;border:0;background:var(--s-dot);flex:none;cursor:pointer;transition:background .2s}
.ntf .swt i{display:block;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.ntf .swt[aria-checked="true"]{background:var(--green,#3f9a2a)}
.ntf .swt[aria-checked="true"] i{transform:translateX(18px)}
.ntf .swt:disabled{cursor:default}
.ntf-fine{font-size:12px;line-height:1.45;color:var(--muted,#77736d);margin:2px 6px 10px}
.ntf-lede{font-size:13.5px;line-height:1.5;color:var(--muted,#77736d);margin:2px 2px 12px}
.ntf-lede b{color:var(--text)}
.ntf-search{display:flex;align-items:center;gap:10px;height:46px;border-radius:14px;border:1.5px solid var(--s-hair);background:var(--s-card);padding:0 14px;color:var(--muted,#77736d)}
.ntf-search:focus-within{border-color:var(--brand,#b0123d)}
.ntf-search input{flex:1;min-width:0;border:0;background:none;outline:none;font:600 16px Manrope,system-ui,sans-serif;color:var(--text)}
.ntf-res{min-height:90px;padding-top:4px}
.ntf-lst{background:var(--s-card);border:1px solid var(--s-hair);border-radius:16px;overflow:hidden;margin-top:10px}
.ntf-res>.ntf-gl+.ntf-lst{margin-top:0}
.ntf-li{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;background:none;padding:10px 12px;border-bottom:1px dotted var(--s-dot);cursor:pointer;font:inherit;color:var(--text);-webkit-tap-highlight-color:transparent}
.ntf-li:last-child{border-bottom:0}
.ntf-li:active{background:color-mix(in srgb,var(--brand,#b0123d) 7%,transparent)}
@media(hover:hover){.ntf-li:hover{background:color-mix(in srgb,var(--brand,#b0123d) 5%,transparent)}}
.ntf-li>span:last-child{min-width:0;display:grid}
.ntf-li b{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ntf-li small{font-size:12px;color:var(--muted,#77736d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ntf-art{width:32px;aspect-ratio:5/7;border-radius:4px;flex:none}
@media(min-width:761px){.ntf .ntf-form{width:min(460px,calc(100vw - 32px))}}

/* v38.1 phones: Add New opens as a normal layer (not the browser's pop-up layer), like the profile menu */
.as-bd{position:fixed;inset:0;z-index:130;background:var(--win-veil);-webkit-backdrop-filter:var(--win-blur);backdrop-filter:var(--win-blur);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility 0s .3s}
.as-bd.on{opacity:1;visibility:visible;transition:opacity .35s ease-out,visibility 0s}
#as.nm[open]{position:fixed;inset:0;z-index:131;display:flex}

/* v38.1 phones: the tiles step aside while you search */
.ct-stats.q-hide{display:none!important}
/* v38.2 with All notifications off, the category switches show off and grey (their own choices are kept for later) */
.ntf-set.dim .swt,.ntf-set.dim .swt[aria-checked="true"]{background:var(--s-dot);opacity:.6}
.ntf-set.dim .swt i,.ntf-set.dim .swt[aria-checked="true"] i{transform:none;box-shadow:none}

/* ===== v38.2 card art viewer ===== */
.ct-row.expanded img.ct-card-art,.ct-gp .gp-art img{cursor:zoom-in;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
@media(hover:hover){.ct-row.expanded img.ct-card-art:hover,.ct-gp .gp-art img:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 12px 28px rgba(0,0,0,.22)}}
.zm{position:fixed;inset:0;z-index:150;display:none;touch-action:none;-webkit-user-select:none;user-select:none;overscroll-behavior:contain}
.zm.on{display:block}
.zm-bg{position:absolute;inset:0;background:rgba(8,7,6,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:var(--bg,1);animation:zmFade .3s ease-out both}
.zm.out .zm-bg{animation:zmFadeOut .26s ease-in both}
.zm-img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.55);cursor:zoom-in;will-change:transform;background:#222}
.zm.zoomed .zm-img{cursor:grab;border-radius:6px}.zm.drag .zm-img{cursor:grabbing}
.zm-x{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:calc(14px + env(safe-area-inset-right,0px));width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:zmFade .3s ease-out both}
.zm-tip{position:absolute;left:0;right:0;bottom:calc(18px + env(safe-area-inset-bottom,0px));margin:0;text-align:center;color:rgba(255,255,255,.7);font:700 12.5px Manrope,system-ui,sans-serif;pointer-events:none;animation:zmTip 3.2s ease both}
.zm.zoomed .zm-tip,.zm.out .zm-tip,.zm.out .zm-x{opacity:0;transition:opacity .2s}
@keyframes zmFade{from{opacity:0}}
@keyframes zmFadeOut{to{opacity:0}}
@keyframes zmTip{0%{opacity:0}12%,75%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.zm-bg,.zm-x,.zm-tip{animation:none}}
.zm.zoomed .zm-tip,.zm.out .zm-tip{visibility:hidden}

/* v38.3 the bell in the header, next to Ask: the same grey as the tabs you're not on, the red dot when something's new */
.sh-bell{position:relative;color:var(--ct-muted)}
.sh-bell.has-ntf::after{content:"";position:absolute;top:5px;right:5px;width:9px;height:9px;border-radius:50%;background:var(--ntf-dot);box-shadow:0 0 0 2px var(--s-bg,#f8f7f4);animation:ntfPop .35s cubic-bezier(.2,.8,.2,1) both}
.app-avatar.has-ntf::after{display:none}
/* desktop: the notifications panel slides in from the right, like Ask */
@keyframes ntfIn{from{transform:translateX(100%)}to{transform:none}}
@keyframes ntfOut{to{transform:translateX(100%)}}
@media(min-width:761px){
 #ntf[open]{display:flex!important;justify-content:flex-end;align-items:stretch;padding:0!important}
 #ntf .ntf-form{width:min(420px,100vw)!important;max-width:none!important;height:100%!important;max-height:none!important;margin:0!important;border-radius:24px 0 0 24px!important;overflow:auto;animation:ntfIn .38s cubic-bezier(.2,.8,.2,1) both!important}
 #ntf.closing .ntf-form{animation:ntfOut .22s cubic-bezier(.4,0,1,1) both!important}
}
@media(min-width:761px){.sh-in{grid-template-columns:148px auto minmax(0,1fr) auto auto auto}}
/* v38.3 Your platforms */
.ntf-addp{display:flex;gap:8px;margin:0 0 12px}
.ntf-addp input{flex:1;min-width:0;height:44px;border-radius:14px;border:1.5px solid var(--s-hair);background:var(--s-card);padding:0 14px;font:600 16px Manrope,system-ui,sans-serif;color:var(--text);outline:none}
.ntf-addp input:focus{border-color:var(--brand,#b0123d)}
.ntf-addp .ntf-btn{height:44px;padding:0 18px}

/* v39.5 phones: no bell in the header (it's in the profile menu); the dot shows on your picture instead. Desktop keeps the bell. */
@media(max-width:760px){.sh-bell{display:none!important}.app-avatar.has-ntf::after{display:block!important}}
@media(min-width:761px){.app-avatar.has-ntf::after{display:none!important}}

/* v39.7: narrow phones swap long tile lines for a shorter wording instead of cutting them off */
.ct-line .ct-short{display:none}
@media (max-width:360px){.ct-line .ct-long{display:none}.ct-line .ct-short{display:inline}}

/* v39.8 Delete account */
.del-sheet .del-p{margin:0 0 12px;color:var(--mut,#77736d);font-size:14.5px;line-height:1.45}
.del-sheet .del-prem{color:inherit;font-weight:600}
.del-sheet .del-exp{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:46px;margin:4px 0 14px;border-radius:14px;border:1px solid var(--line,rgba(0,0,0,.12));background:transparent;color:inherit;font:inherit;font-weight:700;cursor:pointer}
.del-sheet .del-ok{display:flex;align-items:center;gap:10px;min-height:44px;margin-bottom:12px;font-size:14.5px;cursor:pointer}
.del-sheet .del-ok input{width:20px;height:20px;accent-color:#c62828;flex:none}
.del-sheet .del-go{width:100%;min-height:50px;border:0;border-radius:16px;background:#c62828;color:#fff;font:inherit;font-weight:800;font-size:16px;cursor:pointer;transition:opacity .2s}
.del-sheet .del-go:disabled{opacity:.4;cursor:default}
.del-sheet .del-cancel{display:block}
/* v40: from 1200px the Stories style panel (inside the Stories page) replaces the theme chips in the header row */
@media (min-width:1200px){.sh-chips{display:none!important}}

/* ===== v41 phones: Add New is a full screen with search on top =====
   The keyboard only covers the bottom, so the matches and their art stay in view while typing, and nothing has to
   resize when the keyboard comes up (that resize was the stutter). It opens with a quick fade and rise. The
   Purchase/Sale switch and platform step aside while searching (a Bought/Sold chip flips the type) and come back on the price step. */
@keyframes ct-fsIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes ct-fsOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(14px)}}
@media(max-width:760px){
 #as.nm[open]{align-items:stretch}
 #as.nm .phone{margin:0!important;height:100%!important;max-height:none!important;border-radius:0!important;border:0!important;box-shadow:none!important;transform:none;opacity:0;padding-top:env(safe-area-inset-top,0px)}
 #as.nm.go .phone{animation:ct-fsIn .24s cubic-bezier(.2,.8,.2,1) both}
 #as.nm.go.closing .phone,#as.nm.closing .phone{animation:ct-fsOut .18s ease-in both}
 #as.nm .grab{display:none}
 #as.nm .hd{padding-top:10px}
 #as.nm.st1 .ctx,#as.nm.st1 #as-addplat{display:none!important}
 #as.nm.st1 .search{margin-top:2px}
 #as.nm .chips{display:flex;flex-wrap:wrap;gap:6px}
 #as .tchip{font:inherit;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent}
 #as .tchip i{color:var(--brand);font-weight:800}
 #as.nm .other{margin-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){#as.nm .phone{opacity:1;animation:none!important}}

/* ===== v41.1 real sign-in: after the email goes out, the card turns into "Check your inbox" with a code field ===== */
.auth-sent{display:none}
.auth-card.sent .auth-form,.auth-card.sent .auth-seg,.auth-card.sent #auth-h,.auth-card.sent #auth-sub,.auth-card.sent .auth-early{display:none!important}
.auth-card.sent .auth-sent{display:grid;gap:12px;background:none;padding:0;animation:ct-fsIn .28s cubic-bezier(.2,.8,.2,1) both}
.auth-sent-h{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.auth-sent-p{margin:-4px 0 0;color:var(--muted);font-size:14.5px;line-height:1.45}
.auth-sent-p strong{color:var(--text);font-weight:700;word-break:break-all}
#auth-code{font-size:24px!important;font-weight:800;letter-spacing:.22em;text-align:center;font-variant-numeric:tabular-nums}
.auth-sent-more{margin:0;display:flex;flex-wrap:wrap;gap:6px 10px;justify-content:center;align-items:center;color:var(--muted);font-size:13.5px}
.auth-link{border:0;background:none;padding:6px 2px;font:inherit;font-weight:700;color:var(--text);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.auth-link:disabled{color:var(--muted);text-decoration:none;cursor:default;font-variant-numeric:tabular-nums}
.auth-go:disabled{opacity:.6}
#auth-code::placeholder{color:var(--muted);opacity:.35;font-weight:700}