/* ================= Card Tab app — soft look (preview). Look only: layout, sizes, behavior untouched. ================= */
: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}
html,body,.ct-demo{background:var(--s-bg)}
.ct-demo{--ct-bg:var(--s-bg);--ct-line:var(--s-hair)}
.ct-demo .ct-app{background:var(--s-bg)}
/* the paper cards: stats, Insights, first-run card, sign-in card */
.ct-demo .ct-stats>div,.ct-demo .ct-insight,.app-first,.auth-card{background:linear-gradient(180deg,var(--s-card) 55%,var(--s-fade));border:1px solid var(--s-hair);box-shadow:var(--s-whisper);border-radius:20px;background-clip:padding-box}
.auth-card{border-color:transparent!important}
/* profit reads like the board: green number on a white card */
.ct-demo .ct-stats>div.ct-positive{background:linear-gradient(180deg,var(--s-card) 55%,var(--s-fade))!important}
/* segmented controls look like the board's */
.ct-demo .ct-insight-tabs,.auth-seg{background:var(--s-track);border-radius:12px}
.ct-demo .ct-insight-tabs button.ct-selected{background:var(--s-card);border-color:transparent;box-shadow:0 1px 3px rgba(0,0,0,.1)}
/* fields, filters and quiet buttons: white with a hairline edge */
.ct-demo .ct-search,.ct-demo .ct-filters select,.ct-demo #ct-sort,.ct-demo .ct-earlier-btn,.auth-g,.auth-f input,#auth-email{background:var(--s-card);border-color:var(--s-hair)!important;box-shadow:0 1px 2px rgba(40,30,20,.035);border-radius:14px}
.ct-demo .ct-search{border-radius:14px}
/* top bar: Add New is the one crimson button, like Done on the board; export is a quiet pill; your picture is a crimson circle */
.ct-demo .ct-add:not(.app-big),.ct-demo .app-big,.auth-go{background:var(--s-brand)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 6px 14px -10px rgba(160,15,54,.6)}
.ct-demo .ct-export{background:var(--s-card);color:var(--ct-text);border-color:var(--s-hair)!important;box-shadow:0 1px 2px rgba(40,30,20,.035)}
.ct-demo .app-avatar{background:var(--s-brand);color:#fff;border-color:transparent}
/* the entries list becomes a receipt: each month is one paper strip with dotted lines between entries and a torn edge at the bottom */
.ct-demo .ct-month{border-top-color:transparent;border-bottom-color:transparent}
.ct-demo .ct-row{background:var(--s-card);border-radius:0;border-bottom-style:dotted;border-bottom-color:var(--s-dot)}
.ct-demo .ct-month+.ct-row{border-radius:18px 18px 0 0}
.ct-demo .ct-row.ct-last{border-bottom:12px solid var(--s-card);margin-bottom:14px;
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/16px 8px repeat-x;mask:linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/16px 8px repeat-x}
.ct-demo .ct-month+.ct-row.ct-last{border-radius:18px 18px 0 0}
/* add sheet: same light ground, white tiles with hairline edges */
#as{--surface:var(--s-track);--raised:var(--s-card);--line:var(--s-hair)}
#as .sheet{background:var(--s-bg)}
#as .tile{box-shadow:var(--s-whisper)}
#as .save{background:var(--s-brand)}
/* menus and toasts */
.app-menu{background:var(--s-card);border-color:var(--s-hair);box-shadow:0 18px 40px -16px rgba(40,30,20,.3)}

/* filter and sort pills: the same inner padding on every pill, so text never sits against the left edge */
.ct-demo select{padding-left:14px!important;padding-right:32px!important;background-position:right 12px center}
@media(max-width:760px){.ct-demo .ct-filters select{padding-left:12px!important;padding-right:26px!important}}
/* type tabs: one segmented control on the light track, like Monthly / Platform fees / Ask and the board */
.ct-demo .ct-tabs{gap:2px;background:var(--s-track);border-radius:999px;padding:3px;align-self:center}
.ct-demo .ct-tabs button{background:none!important;border:0!important;color:var(--ct-muted)!important;border-radius:999px;padding:7px 14px;font-weight:700;white-space:nowrap;transition:background .2s,color .2s}
.ct-demo .ct-tabs button.ct-selected{background:var(--s-card)!important;color:var(--ct-text)!important;box-shadow:0 1px 3px rgba(0,0,0,.1)}
@media(hover:hover){.ct-demo .ct-tabs button:not(.ct-selected):hover{color:var(--ct-text)!important}}

/* rows below the fold skip layout and paint until they scroll near the screen */
.ct-demo .ct-row:not(.expanded){content-visibility:auto;contain-intrinsic-size:auto 96px}

/* ===== Mirror the board: widget-style tiles, pill tabs, round icon buttons, crimson links, slimmer bars ===== */
.ct-demo .ct-stats>div,.ct-demo .ct-insight{border-radius:22px}
.ct-demo .ct-stats small{color:var(--ct-text);font-size:13.5px;font-weight:800;letter-spacing:-.01em}
.ct-demo .ct-stats .ct-positive small{color:var(--ct-text)}
.ct-demo .ct-stats strong{font-weight:800;letter-spacing:-.035em}
@media(max-width:760px){.ct-demo .ct-stats strong{font-size:clamp(22px,6.2vw,28px)}}
.ct-demo .ct-insight-tabs,.auth-seg{border-radius:999px}
.ct-demo .ct-insight-tabs button,.auth-seg button{border-radius:999px}
@media(max-width:760px){.ct-demo .ct-export{width:40px;height:40px;padding:0!important;border-radius:50%;display:grid;place-items:center}}
.ct-demo .ct-chart-col button{max-width:36px!important}
.app-scope button,.am-plan .up,.app-toast button{color:var(--s-brand)!important}
.app-first-ic,.imp-ic{background:color-mix(in srgb,var(--s-brand) 10%,transparent)!important;color:var(--s-brand)!important}
.imp-pills button.on{border-color:var(--s-brand)!important;background:color-mix(in srgb,var(--s-brand) 9%,transparent)!important;color:var(--s-brand)!important}

/* ===== Phones: logo left, profile alone top right (like the board and Stories). Under it, one row: a long search pill
   and a round crimson + (everyone knows what + means). The profile and the + share one center line, so they read as a
   column, not two stray dots. Export lives in the profile menu on phones (Export everything). ===== */
@media(max-width:760px){
  .ct-demo .ct-demo-top{display:grid!important;grid-template-columns:minmax(0,1fr) 44px;grid-template-areas:"brand av" "search add";align-items:center;gap:14px 10px}
  .ct-demo .ct-demo-top .ct-top-actions{display:contents}
  .ct-demo .ct-demo-top .ct-brand{grid-area:brand;min-width:0}
  .ct-demo .ct-demo-top .app-avatar{grid-area:av;justify-self:center;order:0;margin:0;width:38px;height:38px}
  .ct-demo .ct-demo-top .ct-search{grid-area:search;width:auto!important;min-width:0;margin:0;order:0;flex:none;height:44px;padding:0 16px}
  .ct-demo .ct-demo-top .ct-export{display:none!important}
  .ct-demo .ct-demo-top .ct-add{grid-area:add;order:0;margin:0;width:44px;height:44px;min-width:0;padding:0!important;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 2px rgba(40,30,20,.08),0 6px 14px -8px rgba(165,14,55,.45)!important}
  .ct-demo .ct-demo-top .ct-add .ct-add-label{display:none}
  .ct-demo .ct-demo-top .ct-add .ct-ic{width:17px;height:17px;stroke-width:2.6}
}
/* ===== Every screen size: the phone's rounded look leads. Pills for search, buttons, filters and sort; light shadows ===== */
.ct-demo .ct-search,.ct-demo .ct-export,.ct-demo .ct-add,.ct-demo select,.ct-demo .ct-earlier-btn,.ct-demo .ct-ask-input,.ct-demo .ct-ask-input+button,.ct-demo .ct-expand{border-radius:999px!important}
.ct-demo .ct-export,.ct-demo .ct-add{box-shadow:0 1px 2px rgba(40,30,20,.06)}
.ct-demo .ct-add{padding-left:18px;padding-right:18px}
.ct-demo .ct-expand{width:32px;height:32px;display:inline-grid;place-items:center}
/* search and Export keep the soft look in dark mode too (old dark rules were winning) */
.ct-demo .ct-search,.ct-demo .ct-search input{background:var(--s-card)!important;color:var(--ct-text)!important}
.ct-demo .ct-search{border-color:var(--s-hair)!important}
.ct-demo .ct-export{background:var(--s-card)!important;color:var(--ct-text)!important;border-color:var(--s-hair)!important}

/* icons in the header buttons: one size and weight, matching the board's icons */
.ct-demo .ct-export,.ct-demo .ct-add{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.ct-demo .ct-ic{flex:none;display:block}
/* every pill and tag keeps clear space either side of its text */
.ct-demo .ct-tag{border-radius:999px;padding:3px 10px}
.ed-del{padding-left:14px!important;padding-right:14px!important;border-radius:999px!important}
.ed .ed-actions button,.ed-form button.ct-add,.ed-form .ed-cancel{border-radius:999px}
/* Add a card: the Purchase / Sale switch takes the room its words need; the platform pill gives way first */
#as .ctx{gap:8px}
#as .ctx>.seg.n2{flex:none;width:max-content;grid-template-columns:1fr 1fr}
#as #as-type button{padding:0 16px}
#as .sel{flex:1 1 auto;min-width:96px}
.ed-save,.ed-cancel{padding-left:18px!important;padding-right:18px!important;white-space:nowrap;border-radius:999px!important}
.ed-save{min-width:0!important}
.ed-del{padding-left:12px!important;padding-right:12px!important}
.ed-del+.ed-cancel{margin-left:auto}
/* the editor's buttons never squeeze their words: on very narrow screens Save drops to its own full-width row */
.ed-foot{flex-wrap:wrap}
.ed-foot>button{flex:none}
@media(max-width:360px){.ed-foot .ed-save{flex:1 1 100%;order:3}}
@media(max-width:350px){#as #as-type button{padding:0 12px;font-size:14px}#as .sel{min-width:86px}#as .sel select{padding-left:12px;padding-right:26px}}
#as .ctx{min-width:0}#as .sel{min-width:0}
@media(min-width:761px){.ct-demo .ct-export{padding-left:16px!important;padding-right:18px!important}.ct-demo .ct-add{padding-left:16px!important;padding-right:18px!important}}
/* Sign in / Create account switch: two equal halves, a fully round thumb inset evenly on every side, raised (lighter) in dark mode too */
:root{--s-raise:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--s-raise:#3a3633}}
:root[data-theme="dark"]{--s-raise:#3a3633}
.auth-seg{display:grid!important;grid-template-columns:1fr 1fr;align-items:center;height:50px;padding:4px!important;border-radius:999px!important;background:var(--s-track)!important}
.auth-seg button{min-width:0;height:42px;padding:0 16px!important;border-radius:999px!important;font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;transition:color .2s}
.auth-pill{top:4px!important;bottom:4px!important;left:4px!important;width:calc(50% - 4px)!important;border-radius:999px!important;background:var(--s-raise)!important;box-shadow:0 1px 2px rgba(0,0,0,.08),0 4px 12px -6px rgba(0,0,0,.25)!important}
@media(max-width:360px){.auth-seg button{padding:0 8px!important;font-size:13.5px}}

/* ---- dark mode: three clear levels. Page (darkest) → cards and widgets → things you tap (search, selects, buttons, inputs), with menus raised above ---- */
:root{--s-ctl:#fff;--s-ctl-line:var(--s-hair);--s-pop:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--s-card:#252320;--s-fade:#22201d;--s-hair:rgba(255,255,255,.09);--s-dot:#55514d;--s-ctl:#302d2a;--s-ctl-line:rgba(255,255,255,.12);--s-pop:#2b2926;--s-raise:#423e3a;--s-thumb-sh:0 1px 2px rgba(0,0,0,.35)}}
:root[data-theme="dark"]{--s-card:#252320;--s-fade:#22201d;--s-hair:rgba(255,255,255,.09);--s-dot:#55514d;--s-ctl:#302d2a;--s-ctl-line:rgba(255,255,255,.12);--s-pop:#2b2926;--s-raise:#423e3a;--s-thumb-sh:0 1px 2px rgba(0,0,0,.35)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #ct-search,:root:not([data-theme="light"]) .ct-search{background:var(--s-ctl)!important;border-color:var(--s-ctl-line)!important}}
:root[data-theme="dark"] #ct-search,:root[data-theme="dark"] .ct-search{background:var(--s-ctl)!important;border-color:var(--s-ctl-line)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #ct-search input,:root:not([data-theme="light"]) .ct-search input{background:transparent!important}}
:root[data-theme="dark"] #ct-search input,:root[data-theme="dark"] .ct-search input{background:transparent!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ct-demo select{background-color:var(--s-ctl)!important;border-color:var(--s-ctl-line)!important}}
:root[data-theme="dark"] .ct-demo select{background-color:var(--s-ctl)!important;border-color:var(--s-ctl-line)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ct-demo .ct-demo-actions button{background:var(--s-ctl)!important;border-color:var(--s-ctl-line)!important}}
:root[data-theme="dark"] .ct-demo .ct-demo-actions button{background:var(--s-ctl)!important;border-color:var(--s-ctl-line)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ct-demo .ct-demo-actions button:hover{background:#3a3633!important}}
:root[data-theme="dark"] .ct-demo .ct-demo-actions button:hover{background:#3a3633!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ct-demo .ct-insight-tabs{background:var(--s-ctl)!important}}
:root[data-theme="dark"] .ct-demo .ct-insight-tabs{background:var(--s-ctl)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ct-demo .ct-insight-tabs button.ct-selected{background:var(--s-raise)!important;box-shadow:var(--s-thumb-sh)!important}}
:root[data-theme="dark"] .ct-demo .ct-insight-tabs button.ct-selected{background:var(--s-raise)!important;box-shadow:var(--s-thumb-sh)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #app-menu{background:var(--s-pop)!important;border-color:var(--s-ctl-line)!important;box-shadow:0 18px 40px -10px rgba(0,0,0,.6)!important}}
:root[data-theme="dark"] #app-menu{background:var(--s-pop)!important;border-color:var(--s-ctl-line)!important;box-shadow:0 18px 40px -10px rgba(0,0,0,.6)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #app-menu .am-plan{border-color:var(--s-ctl-line)!important}}
:root[data-theme="dark"] #app-menu .am-plan{border-color:var(--s-ctl-line)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #am-theme{background:var(--s-ctl)!important}}
:root[data-theme="dark"] #am-theme{background:var(--s-ctl)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #am-theme [aria-checked=true],:root:not([data-theme="light"]) #am-theme .on{background:var(--s-raise)!important}}
:root[data-theme="dark"] #am-theme [aria-checked=true],:root[data-theme="dark"] #am-theme .on{background:var(--s-raise)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .auth-seg{background:var(--s-ctl)!important}}
:root[data-theme="dark"] .auth-seg{background:var(--s-ctl)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #as .search,:root:not([data-theme="light"]) #as .sel select,:root:not([data-theme="light"]) #as #as-plat{background:var(--s-ctl)!important;border-color:var(--s-ctl-line)!important}}
:root[data-theme="dark"] #as .search,:root[data-theme="dark"] #as .sel select,:root[data-theme="dark"] #as #as-plat{background:var(--s-ctl)!important;border-color:var(--s-ctl-line)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #as .seg{background:var(--s-ctl)!important}}
:root[data-theme="dark"] #as .seg{background:var(--s-ctl)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #as .seg .th{background:var(--s-raise)!important}}
:root[data-theme="dark"] #as .seg .th{background:var(--s-raise)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #as .x,:root:not([data-theme="light"]) .ed .x{background:var(--s-ctl)!important;border-color:var(--s-ctl-line)!important}}
:root[data-theme="dark"] #as .x,:root[data-theme="dark"] .ed .x{background:var(--s-ctl)!important;border-color:var(--s-ctl-line)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ed input,:root:not([data-theme="light"]) .ed select,:root:not([data-theme="light"]) .ed textarea{background:var(--s-ctl)!important;border-color:var(--s-ctl-line)!important}}
:root[data-theme="dark"] .ed input,:root[data-theme="dark"] .ed select,:root[data-theme="dark"] .ed textarea{background:var(--s-ctl)!important;border-color:var(--s-ctl-line)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #as .sheet,:root:not([data-theme="light"]) .ed .ed-form,:root:not([data-theme="light"]) .ed.imp > div:first-child{background:#1c1a18!important}}
:root[data-theme="dark"] #as .sheet,:root[data-theme="dark"] .ed .ed-form,:root[data-theme="dark"] .ed.imp > div:first-child{background:#1c1a18!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ct-demo .ct-export,:root:not([data-theme="light"]) .ct-demo .ct-earlier-btn,:root:not([data-theme="light"]) .ct-demo .ct-ask-input,:root:not([data-theme="light"]) .ct-demo .ct-expand{background:var(--s-ctl)!important;border-color:var(--s-ctl-line)!important}}
:root[data-theme="dark"] .ct-demo .ct-export,:root[data-theme="dark"] .ct-demo .ct-earlier-btn,:root[data-theme="dark"] .ct-demo .ct-ask-input,:root[data-theme="dark"] .ct-demo .ct-expand{background:var(--s-ctl)!important;border-color:var(--s-ctl-line)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ct-demo .ct-tabs{background:var(--s-ctl)!important}}
:root[data-theme="dark"] .ct-demo .ct-tabs{background:var(--s-ctl)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ct-demo .ct-tabs button.ct-selected{background:var(--s-raise)!important;box-shadow:var(--s-thumb-sh)!important}}
:root[data-theme="dark"] .ct-demo .ct-tabs button.ct-selected{background:var(--s-raise)!important;box-shadow:var(--s-thumb-sh)!important}
/* entries: thin solid lines between rows (was dotted) */
:root{--s-rowline:#e6e3dc}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--s-rowline:#36332f}}
:root[data-theme="dark"]{--s-rowline:#36332f}
.ct-demo .ct-row{border-bottom-style:solid!important;border-bottom-color:var(--s-rowline)!important}
.ct-demo .ct-row.ct-last{border-bottom-color:var(--s-card)!important}
/* the Profit tile keeps the demo's soft green (red when profit is negative), on the paper-card look */
:root{--s-pos-a:#e9f3dd;--s-pos-b:#e2edd3;--s-pos-line:rgba(56,114,14,.14);--s-neg-a:#f9e6ea;--s-neg-b:#f4dde2;--s-neg-line:rgba(165,14,55,.14);--s-rowhover:#f5f3ee}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--s-pos-a:#1e3519;--s-pos-b:#1a2f16;--s-pos-line:rgba(145,200,91,.16);--s-neg-a:#3a1820;--s-neg-b:#33151c;--s-neg-line:rgba(240,138,160,.16);--s-rowhover:#2d2a27}}
:root[data-theme="dark"]{--s-pos-a:#1e3519;--s-pos-b:#1a2f16;--s-pos-line:rgba(145,200,91,.16);--s-neg-a:#3a1820;--s-neg-b:#33151c;--s-neg-line:rgba(240,138,160,.16);--s-rowhover:#2d2a27}
.ct-demo .ct-stats>div.ct-positive{background:linear-gradient(180deg,var(--s-pos-a) 55%,var(--s-pos-b))!important;border-color:var(--s-pos-line)!important}
.ct-demo .ct-stats>div.ct-negative{background:linear-gradient(180deg,var(--s-neg-a) 55%,var(--s-neg-b))!important;border-color:var(--s-neg-line)!important}
/* desktop: an entry darkens a touch under the pointer, like the demo */
.ct-demo .ct-row{transition:background-color .15s ease}
@media (hover:hover) and (pointer:fine){.ct-demo .ct-row:hover{background:var(--s-rowhover)!important}.ct-demo .ct-row.ct-last:hover{border-bottom-color:var(--s-rowhover)!important}}
/* phones: the search bar runs the full width and the round + sits over its right end */
@media(max-width:760px){
  .ct-demo .ct-demo-top .ct-search{grid-column:1 / -1;grid-row:2;padding-right:56px!important}
  .ct-demo .ct-demo-top .ct-add{grid-column:2;grid-row:2;justify-self:end;position:relative;z-index:2}
}