/* Saros Financial Management — neutral, monochrome, one continuous workspace. */
.fin-page{max-width:1160px;margin:0 auto;display:grid;gap:16px;color:var(--text)}
.fin-intro{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;padding:4px 0 8px}.fin-intro h1{font-size:clamp(24px,3vw,31px);margin:4px 0 6px}.fin-intro p{color:var(--muted);margin:0;font-size:13px}.fin-month-label{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}.fin-month-label input{color:var(--text);background:var(--surface-2);border:1px solid var(--border);padding:8px;border-radius:10px;max-width:160px}
.fin-sections{display:grid;gap:12px}.fin-section{border:1px solid var(--border);background:var(--surface);border-radius:16px;min-width:0;padding:15px 17px;box-shadow:none}.fin-section-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:33px}.fin-section-head h2{font-size:16px;font-weight:720;margin:0}.fin-head-tools{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.fin-icon-btn{height:30px;min-width:30px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2);color:var(--text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:17px;padding:0 8px}.fin-icon-btn:hover,.fin-small-btn:hover{border-color:var(--muted)}.fin-small-btn{min-height:30px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border:1px solid var(--border);border-radius:9px;padding:4px 11px;background:var(--surface-2);color:var(--text);cursor:pointer;font-size:12px}.fin-section-content{padding-top:13px}.fin-row-between{display:flex;gap:10px;align-items:center;justify-content:space-between}.fin-muted,.fin-note,.fin-page-foot{color:var(--muted);font-size:12px;line-height:1.7}.fin-empty{margin:0;padding:15px 9px;background:var(--surface-2);border-radius:11px}.fin-note{margin:10px 0 0}.fin-page-foot{margin:2px 4px 18px}
.fin-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:11px}.fin-summary-card{border:1px solid var(--border);border-radius:13px;background:var(--surface-2);padding:14px;min-width:0}.fin-summary-card small{color:var(--muted)}.fin-large{font-size:clamp(17px,2.3vw,24px);font-weight:750;margin:12px 0;overflow-wrap:anywhere;text-align:start}.fin-summary-meta{display:grid;gap:5px}.fin-summary-meta span{display:flex;gap:8px;justify-content:space-between;font-size:12px;color:var(--muted)}.fin-summary-meta b{font-weight:650;color:var(--text)}
.fin-accounts,.fin-records,.fin-budget-list,.fin-spending,.fin-goals{display:grid;gap:8px}.fin-account,.fin-record{display:flex;gap:10px;align-items:center;border-bottom:1px solid var(--border);padding:9px 5px;min-width:0}.fin-account:last-child,.fin-record:last-child{border-bottom:0}.fin-account>div:first-child,.fin-record-body{flex:1;min-width:0;display:grid;gap:3px}.fin-account strong,.fin-record strong{font-size:13px;overflow-wrap:anywhere}.fin-account small,.fin-record small{font-size:11px;color:var(--muted)}.fin-account>b,.fin-record>b{font-size:13px;white-space:nowrap}.fin-inline-tools{display:flex;gap:3px}.fin-record-type{font-size:11px;min-width:48px;color:var(--muted)}.fin-record label{display:flex;align-items:center}.fin-record input[type=checkbox]{accent-color:var(--text)}.fin-subheading{font-size:13px;margin:15px 0 7px}.fin-strike{text-decoration:line-through;opacity:.6}
.fin-budget-row,.fin-goal{padding:11px 12px;border:1px solid var(--border);border-radius:11px;display:grid;gap:7px;font-size:12px}.fin-budget-row small,.fin-goal small{color:var(--muted)}.fin-progress{height:7px;background:var(--border);border-radius:20px;overflow:hidden;flex:1;min-width:0}.fin-progress>span{display:block;height:100%;background:var(--text);border-radius:20px}.fin-spending{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}.fin-spend-row{display:grid;grid-template-columns:1fr auto;gap:7px;font-size:12px}.fin-spend-row .fin-progress{grid-column:1/-1}
.fin-jars{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:12px}.fin-jar{display:flex;gap:12px;border:1px solid var(--border);border-radius:13px;padding:14px;background:var(--surface-2);align-items:center;min-width:0}.fin-jar-art{width:108px;flex:none;display:grid;place-items:center}.fin-jar-svg{max-width:110px;width:100%;height:155px;overflow:visible}.fin-jar-details{display:grid;gap:7px;min-width:0;flex:1}.fin-jar-details h3{margin:0;font-size:15px;overflow-wrap:anywhere}.fin-jar-amount{font-size:16px;overflow-wrap:anywhere}.fin-jar-details small{font-size:11px;color:var(--muted)}.fin-jar-buttons{display:flex;gap:4px;flex-wrap:wrap}.fin-jar-buttons .fin-small-btn{min-height:29px;padding:4px 8px}.fin-jar-buttons .fin-icon-btn{min-width:28px;height:29px;padding:0 7px}
@media(max-width:680px){.fin-page{gap:11px}.fin-section{padding:12px;border-radius:13px}.fin-section-head h2{font-size:14px}.fin-head-tools{gap:3px}.fin-head-tools .fin-icon-btn{min-width:27px;height:29px;font-size:15px;padding:0 6px}.fin-head-tools .fin-small-btn{font-size:11px;padding:4px 8px}.fin-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.fin-summary-card{padding:10px}.fin-large{font-size:15px}.fin-record{gap:5px;flex-wrap:wrap}.fin-record-body{min-width:80px}.fin-account{gap:6px}.fin-account>b{font-size:11px}.fin-jars{grid-template-columns:1fr}.fin-jar{padding:9px}.fin-jar-art{width:88px}.fin-jar-svg{height:135px}.fin-jar-amount{font-size:14px}}

/* Compact single-menu actions, avoiding dense toolbars on each section. */
.fin-section-head{position:relative}.fin-section-dropdown{position:relative;z-index:3}.fin-section-dropdown[open]{z-index:40}.fin-section-dropdown summary{list-style:none}.fin-section-dropdown summary::-webkit-details-marker{display:none}.fin-menu-trigger{border:1px solid var(--border);background:var(--surface-2);color:var(--text);border-radius:9px;min-width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:23px;line-height:1}.fin-menu{position:absolute;left:0;top:calc(100% + 6px);z-index:50;min-width:195px;width:max-content;max-width:min(230px,calc(100vw - 35px));max-height:290px;overflow-y:auto;display:grid;gap:2px;padding:7px;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:var(--shadow)}.fin-menu>*{width:100%;min-height:35px;justify-content:flex-start;text-align:right;border:0;background:transparent;font-size:12px;display:flex;align-items:center;gap:10px;padding:7px 9px}.fin-menu>*:hover{background:var(--surface-2)}.fin-menu .fin-icon-btn{width:100%;height:auto;min-height:35px;font-size:12px}.fin-menu .fin-icon-btn>span:first-child{min-width:17px;font-size:16px;display:inline-flex;align-items:center;justify-content:center}.fin-menu .fin-icon-btn .fin-menu-text{display:inline}.fin-icon-btn .fin-menu-text{display:none}.fin-summary-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
@media(max-width:680px){.fin-summary-grid{grid-template-columns:repeat(auto-fit,minmax(145px,1fr))}}

.fin-page [hidden],#fin-form [hidden]{display:none!important}

/* v26.1 compact original design: small single-page sections, no tall empty cards */
.fin-page{max-width:1110px;gap:8px}.fin-intro{padding:0 0 3px;gap:8px}.fin-intro h1{font-size:23px;margin:1px 0 2px}.fin-intro p{font-size:11px}.fin-month-label input{padding:5px 7px;font-size:12px}
.fin-sections{gap:7px}.fin-section{border-radius:11px;padding:9px 12px}.fin-section-head{min-height:26px}.fin-section-head h2{font-size:13px}.fin-section-content{padding-top:7px}.fin-menu-trigger{height:27px;min-width:28px;font-size:19px}.fin-menu>*{min-height:30px;padding:4px 7px}.fin-menu .fin-icon-btn{min-height:30px}.fin-empty{padding:5px 8px;border-radius:7px;font-size:11px}.fin-note{margin:5px 0 0;font-size:10px}.fin-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.fin-summary-card{padding:9px 11px;border-radius:9px;min-height:0}.fin-summary-card strong{font-size:12px}.fin-mini-balance{margin-top:5px;font-size:16px}.fin-mini-balance b{font-size:16px}.fin-month-stats{display:flex;gap:12px;flex-wrap:wrap;font-size:10px;color:var(--muted);margin-top:5px}.fin-subheading{font-size:12px;margin:8px 0 4px}.fin-account,.fin-record{padding:4px 2px;gap:7px}.fin-account strong,.fin-record strong{font-size:12px}.fin-account b,.fin-record b{font-size:12px}.fin-icon-btn{height:26px;min-width:26px;font-size:13px;padding:0 5px}.fin-small-btn{min-height:26px;font-size:11px;padding:3px 7px}.fin-record-type{font-size:10px;min-width:38px}.fin-budget-list,.fin-spending,.fin-goals,.fin-savings-grid{gap:5px}.fin-budget-row,.fin-goal,.fin-savings-card{padding:7px 9px;border:1px solid var(--border);border-radius:9px;font-size:11px;display:grid;gap:5px}.fin-savings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.fin-savings-card .fin-inline-tools{flex-wrap:wrap}.fin-progress{height:4px}.fin-spending{grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:6px}.fin-spend-row{font-size:11px}.fin-jars{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:7px}.fin-jar{gap:6px;padding:7px;border-radius:10px}.fin-jar-art{width:62px}.fin-jar-svg{max-width:62px;height:95px}.fin-jar-details{gap:3px}.fin-jar-details h3{font-size:12px}.fin-jar-amount{font-size:13px}.fin-jar-details small{font-size:10px}.fin-jar-buttons{gap:3px}.fin-jar-buttons .fin-small-btn,.fin-jar-buttons .fin-icon-btn{height:24px;min-height:24px;font-size:10px;padding:2px 5px}.fin-inline-disclosure{margin-top:5px}.fin-inline-disclosure summary{font-size:11px;color:var(--muted);cursor:pointer;list-style:none}.fin-inline-disclosure summary::-webkit-details-marker{display:none}.fin-inline-disclosure[open] .fin-spending{margin-top:6px}.fin-page-foot{font-size:10px;margin:3px 0 9px}
@media(max-width:680px){.fin-page{gap:7px}.fin-section{padding:8px 9px}.fin-section-head h2{font-size:12px}.fin-summary-card{padding:8px}.fin-mini-balance b{font-size:12px}.fin-jars{grid-template-columns:repeat(2,minmax(0,1fr))}.fin-jar{padding:6px;gap:5px}.fin-jar-art{width:50px}.fin-jar-svg{height:80px;max-width:50px}.fin-jar-details h3{font-size:11px}.fin-jar-amount{font-size:11px}.fin-jar-buttons .fin-small-btn{font-size:9px}.fin-savings-grid{grid-template-columns:1fr}}

.fin-neg-hint{font-size:10px;color:var(--text);margin:5px 0 0;text-decoration:underline dotted;text-underline-offset:3px}

@media(min-width:800px){.fin-sections{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.fin-section[data-fin-section="summary"],.fin-section[data-fin-section="transactions"]{grid-column:1/-1}}

/* v26.2 — designed compact financial workspace, monochrome and explanatory */
.fin-page{max-width:1160px;gap:13px}
.fin-intro{padding:5px 0 12px;align-items:flex-end;border-bottom:1px solid var(--border);margin-bottom:1px}
.fin-intro h1{font-size:clamp(24px,2.9vw,30px);font-weight:800;letter-spacing:-.5px}
.fin-intro p{font-size:12px;line-height:1.6;max-width:580px}
.fin-sections{gap:12px;align-items:start}
.fin-section{position:relative;padding:17px 19px;border-radius:18px;box-shadow:0 3px 20px rgba(0,0,0,.025);background:var(--surface);min-width:0;isolation:isolate}
.fin-section:has(.fin-section-dropdown[open]){z-index:15;isolation:auto}
.fin-section[data-fin-section="summary"]{padding:19px 20px 18px;background:linear-gradient(145deg,var(--surface),var(--surface-2))}
.fin-section-head{min-height:32px;align-items:flex-start;gap:12px}
.fin-head-label{display:flex;align-items:flex-start;gap:11px;min-width:0;flex:1}
.fin-heading-icon{display:grid;place-items:center;flex:none;width:31px;height:31px;border:1px solid var(--border);border-radius:10px;color:var(--text);background:var(--surface-2)}
.fin-outline-icon{width:18px;height:18px;display:block}
.fin-head-copy{min-width:0;display:grid;gap:3px;align-content:start}
.fin-section-head h2{font-size:15px;line-height:1.25;letter-spacing:-.16px}
.fin-head-copy p{margin:0;color:var(--muted);font-size:11px;line-height:1.65;max-width:480px}
.fin-menu-trigger{flex:none;width:29px;min-width:29px;height:29px;border-radius:9px;font-size:20px;line-height:1;border-color:transparent;background:var(--surface-2)}
.fin-menu{max-height:285px;top:calc(100% + 5px);box-shadow:0 14px 40px rgba(0,0,0,.22)}
.fin-section-content{padding-top:13px}
.fin-summary-grid{gap:11px}
.fin-summary-card{background:var(--surface);padding:15px 17px;border-radius:13px;min-height:101px;position:relative;overflow:hidden;display:grid;align-content:space-between;gap:9px}
.fin-summary-card:after{content:'';position:absolute;inset-inline-start:16px;inset-inline-end:16px;bottom:0;height:2px;background:var(--text);opacity:.35}
.fin-summary-card strong{font-size:13px}
.fin-summary-card small{font-size:11px}
.fin-mini-balance{margin-top:0;font-feature-settings:'tnum' 1}
.fin-mini-balance b{font-size:clamp(17px,2vw,23px);letter-spacing:-.3px}
.fin-month-stats{margin-top:10px;gap:8px}.fin-month-stats span{padding:5px 9px;border-radius:7px;border:1px solid var(--border)}
.fin-record,.fin-account{padding:8px 2px;gap:9px}
.fin-record-type{font-size:10px;min-width:45px;padding:3px 0;color:var(--muted)}
.fin-record-body strong{font-size:13px}.fin-record b,.fin-account b{font-size:12px}
.fin-empty{background:transparent;padding:7px 0;display:flex;align-items:center;gap:11px;min-height:45px}
.fin-empty-symbol{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border);color:var(--text);font-size:16px}
.fin-empty-copy{display:grid;gap:4px;min-width:0}.fin-empty-copy p{margin:0;line-height:1.5;font-size:11px}
.fin-empty-action{display:inline-flex;align-items:center;justify-content:flex-start;gap:5px;border:0;padding:0;background:none;color:var(--text);font-weight:700;font-size:11px;cursor:pointer;max-width:max-content;text-decoration:underline;text-underline-offset:3px}
.fin-empty-action:hover{opacity:.72}.fin-empty-action>span{font-size:15px;line-height:1}
.fin-note{font-size:10px;line-height:1.55;padding:4px 0 0;margin:4px 0 0}
.fin-savings-card,.fin-budget-row{background:var(--surface-2);padding:12px 13px;border-radius:12px;gap:8px}
.fin-progress{height:5px;background:var(--border)}.fin-progress>span{background:var(--text)}
.fin-jars{gap:11px;grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
.fin-jar{border-radius:14px;padding:11px;background:linear-gradient(130deg,var(--surface-2),var(--surface));gap:12px}
.fin-jar-art{width:78px}.fin-jar-svg{height:112px;max-width:78px}
.fin-jar-details h3{font-size:13px}.fin-jar-amount{font-size:16px}
.fin-jar-buttons .fin-small-btn,.fin-jar-buttons .fin-icon-btn{min-height:26px;height:26px;font-size:11px}
.fin-inline-disclosure{padding-top:6px;border-top:1px solid var(--border)}
.fin-inline-disclosure summary{font-weight:600;font-size:11px;color:var(--text)}
.fin-spending{margin-top:9px}.fin-spend-row{padding:5px;border-bottom:1px solid var(--border)}
.fin-form-explain{margin:0 0 12px;font-size:12px;line-height:1.65;color:var(--muted);padding:8px 10px;border:1px solid var(--border);border-radius:9px}
.fin-page-foot{margin:5px 0 16px;font-size:11px}
@media(min-width:800px){.fin-sections{grid-template-columns:repeat(2,minmax(0,1fr))}.fin-section[data-fin-section="summary"],.fin-section[data-fin-section="transactions"]{grid-column:1/-1}.fin-section[data-fin-section="jars"]{grid-column:1/-1}.fin-section[data-fin-section="shopping"]{grid-column:1}.fin-section[data-fin-section="budget"]{grid-column:2}}
@media(max-width:680px){
 .fin-page{gap:9px}.fin-intro{padding-bottom:9px}.fin-intro h1{font-size:23px}.fin-intro p{font-size:11px}
 .fin-section{padding:12px 13px;border-radius:14px}.fin-section[data-fin-section="summary"]{padding:13px}
 .fin-heading-icon{width:28px;height:28px}.fin-outline-icon{width:16px;height:16px}
 .fin-head-label{gap:8px}.fin-section-head h2{font-size:13px}.fin-head-copy p{font-size:10px;line-height:1.5}
 .fin-section-content{padding-top:10px}.fin-summary-card{padding:12px;min-height:81px}.fin-mini-balance b{font-size:16px}
 .fin-empty{gap:7px}.fin-empty-symbol{height:28px;width:28px}.fin-empty-copy p{font-size:10px}
 .fin-jars{grid-template-columns:repeat(auto-fit,minmax(175px,1fr))}.fin-jar{gap:6px;padding:8px}.fin-jar-art{width:55px}.fin-jar-svg{height:89px;max-width:55px}
 .fin-jar-amount{font-size:12px}.fin-jar-details h3{font-size:12px}.fin-jar-buttons .fin-small-btn{font-size:10px}
}
@media(max-width:375px){.fin-summary-grid{grid-template-columns:1fr}.fin-jars{grid-template-columns:1fr}}

/* v26.3: fixed positions only. Existing finance card dimensions/padding/gaps untouched. */
@media (min-width:800px){
  .fin-sections{grid-template-areas:"spending budget" "shopping savings" "bills expenses" "jars ."}
  .fin-section[data-fin-section="summary"]{grid-area:spending}
  .fin-section[data-fin-section="budget"]{grid-area:budget}
  .fin-section[data-fin-section="shopping"]{grid-area:shopping}
  .fin-section[data-fin-section="savings"]{grid-area:savings}
  .fin-section[data-fin-section="transactions"]{grid-area:expenses}
  .fin-section[data-fin-section="bills"]{grid-area:bills}
  .fin-section[data-fin-section="jars"]{grid-area:jars}
}
.fin-chart-switch{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-bottom:7px}
.fin-chart-switch .fin-small-btn[aria-pressed="true"],.fin-chart-switch .fin-small-btn[aria-selected="true"]{background:var(--text);color:var(--surface);border-color:var(--text)}
.fin-recent-heading{padding-top:9px;margin-top:9px;border-top:1px solid var(--border)}
.fin-recent-heading strong{font-size:12px}

/* ===== v28 — two-column finance board following the approved reference ===== */
.fin-v28{max-width:1160px;gap:14px}
.fin-v28 .fin-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;border:0;padding:0 2px 2px}
.fin-v28 .fin-intro h1{margin:0;font-size:clamp(24px,3vw,32px)}
.fin-v28 .fin-intro p{margin:4px 0 0;color:var(--muted);font-size:13px}
.fin-v28 .fin-intro-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fin-v28 .fin-month-label input{height:38px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text);padding:0 10px;font:inherit;font-size:13px}
.fin-v28 .fin-add-op{height:38px;padding:0 16px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-weight:700;font-size:13px;cursor:pointer}
.fin-v28 .fin-add-op:hover{background:var(--surface-2)}
.fin-v28 .fin-board{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.fin-v28 .fin-col{display:grid;gap:14px;align-content:start;min-width:0}
.fin-v28 .fin-section{margin:0;padding:16px 18px;border-radius:18px;min-width:0}
.fin-v28 .fin-section-head{min-height:28px;align-items:flex-start}
.fin-v28 .fin-head-copy h2{font-size:15px;margin:0}
.fin-v28 .fin-head-copy p{font-size:11.5px;margin:3px 0 0;color:var(--muted);line-height:1.5}
.fin-v28 .fin-heading-icon{display:none}
.fin-v28 .fin-section-content{padding-top:12px}
/* Spending hero: inverted card */
.fin-v28 .fin-section-summary{background:var(--text);color:var(--bg);border-color:transparent}
.fin-v28 .fin-section-summary .fin-head-copy h2,.fin-v28 .fin-section-summary .fin-account strong,.fin-v28 .fin-section-summary .fin-account b{color:var(--bg)}
.fin-v28 .fin-section-summary .fin-menu-trigger{color:var(--bg);background:transparent;border-color:color-mix(in srgb,var(--bg) 25%,transparent)}
.fin-v28 .fin-section-summary .fin-icon-btn{color:var(--bg);border-color:color-mix(in srgb,var(--bg) 25%,transparent);background:transparent}
.fin-v28 .fin-section-summary .fin-menu .fin-icon-btn{color:var(--text)}
.fin-v28 .fin-spend-hero{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.fin-v28 .fin-big-amount{display:block;font-family:var(--latin);font-size:clamp(26px,3.4vw,36px);font-weight:700;letter-spacing:-.5px;line-height:1.15}
.fin-v28 .fin-big-amount.is-negative{text-decoration:underline wavy;text-underline-offset:6px}
.fin-v28 .fin-hero-add{margin-top:12px;border:1px solid color-mix(in srgb,var(--bg) 25%,transparent);background:transparent;color:var(--bg);border-radius:10px;padding:6px 12px;font:inherit;font-size:12.5px;cursor:pointer}
.fin-v28 .fin-hero-add:hover{background:color-mix(in srgb,var(--bg) 8%,transparent)}
.fin-v28 .fin-section-summary .fin-accounts{margin-top:10px;border-top:1px solid color-mix(in srgb,var(--bg) 18%,transparent);padding-top:6px}
.fin-v28 .fin-section-summary .fin-neg-hint{color:var(--bg);opacity:.8}
.fin-v28 .fin-section-summary .fin-empty,.fin-v28 .fin-section-summary .fin-empty p{color:var(--bg)}
.fin-v28 .fin-section-summary .fin-empty-action{color:var(--bg);border-color:color-mix(in srgb,var(--bg) 30%,transparent);background:transparent}
/* Records: actions appear on hover/focus (always visible on touch) */
.fin-v28 .fin-record{padding:9px 0;gap:10px}
.fin-v28 .fin-record strong{font-size:13px}
.fin-v28 .fin-record small{font-size:11px}
@media (hover:hover){
 .fin-v28 .fin-record>.fin-icon-btn,.fin-v28 .fin-inline-tools .fin-icon-btn{opacity:0;transition:opacity .15s}
 .fin-v28 .fin-record:hover>.fin-icon-btn,.fin-v28 .fin-record:focus-within>.fin-icon-btn,
 .fin-v28 .fin-section:hover .fin-inline-tools .fin-icon-btn,.fin-v28 .fin-inline-tools .fin-icon-btn:focus-visible{opacity:1}
}
/* Budget */
.fin-v28 .fin-budget-row{border:0;background:transparent;padding:0}
.fin-v28 .fin-budget-row+.fin-budget-row{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.fin-v28 .fin-budget-amount{display:block;font-family:var(--latin);font-size:26px;margin:4px 0 10px}
.fin-v28 .fin-budget-foot{margin-top:8px}
.fin-v28 .fin-budget-foot small{color:var(--muted)}
.fin-v28 .fin-budget-foot b{color:var(--text);font-weight:600}
.fin-v28 .fin-progress{height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.fin-v28 .fin-progress>span{display:block;height:100%;border-radius:inherit;background:var(--text)}
.fin-v28 .fin-progress.is-over>span{background:repeating-linear-gradient(45deg,var(--text) 0 5px,var(--muted) 5px 10px)}
/* Savings */
.fin-v28 .fin-savings-grid{grid-template-columns:1fr;gap:10px}
.fin-v28 .fin-savings-card{background:transparent;border:0;padding:0}
.fin-v28 .fin-savings-card+.fin-savings-card{border-top:1px solid var(--border);padding-top:10px}
.fin-v28 .fin-savings-card .fin-row-between b{font-family:var(--latin);font-size:18px}
.fin-v28 .fin-savings-card small{display:block;margin-top:6px;color:var(--muted)}
/* Chart */
.fin-v28 .fin-chart-switch{display:inline-flex;gap:4px;padding:3px;border-radius:12px;background:var(--surface-2)}
.fin-v28 .fin-chart-switch .fin-small-btn{border:0;background:transparent;border-radius:9px;padding:5px 12px}
.fin-v28 .fin-chart-switch .fin-small-btn[aria-pressed="true"],.fin-v28 .fin-chart-switch .fin-small-btn[aria-selected="true"]{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.fin-v28 .fin-total-line{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:14px 0 10px}
.fin-v28 .fin-total-line b{font-family:var(--latin);font-size:24px}
.fin-v28 .fin-total-line small{color:var(--muted);font-size:12px}
.fin-v28 .fin-bars{display:grid;gap:9px}
.fin-v28 .fin-bar-row{display:grid;grid-template-columns:minmax(64px,90px) minmax(0,1fr) auto;align-items:center;gap:10px;font-size:12.5px}
.fin-v28 .fin-bar-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fin-v28 .fin-bar-track{height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.fin-v28 .fin-bar-track>span{display:block;height:100%;border-radius:inherit;background:var(--text)}
.fin-v28 .fin-bar-value{font-family:var(--latin);font-size:12px;min-width:74px;text-align:left}
.fin-v28 .fin-recent-heading{margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}
/* Jars, compact */
.fin-v28 .fin-page-foot,.fin-v28+.fin-page-foot{text-align:center}
/* Medium widths (e.g. a half-screen window): keep two columns while there is room */
@media (max-width:1100px) and (min-width:761px){.fin-v28 .fin-board,.fin-v28 .fin-col{gap:12px}.fin-v28 .fin-section{padding:14px}}
/* Phones and narrow windows: one column in the agreed order */
@media (max-width:760px){
 .fin-v28 .fin-board{grid-template-columns:1fr;gap:10px}
 .fin-v28 .fin-col{display:contents}
 .fin-v28 .fin-section-summary{order:1}.fin-v28 .fin-section-budget{order:2}.fin-v28 .fin-section-savings{order:3}.fin-v28 .fin-section-shopping{order:4}.fin-v28 .fin-section-transactions{order:5}.fin-v28 .fin-section-bills{order:6}.fin-v28 .fin-section-jars{order:7}
 .fin-v28 .fin-intro{align-items:stretch}
 .fin-v28 .fin-intro-tools{width:100%}
 .fin-v28 .fin-add-op{flex:1}
}
.fin-v28 .fin-section[data-fin-section]{grid-area:auto;grid-column:auto;grid-row:auto}
.fin-v28 .fin-records{display:grid;gap:0}
.fin-v28 .fin-record{display:flex;align-items:center;gap:8px;min-height:0;padding:9px 0;border-bottom:1px solid var(--border)}
.fin-v28 .fin-record:last-child{border-bottom:0}
.fin-v28 .fin-record>label{flex:none;display:flex}
.fin-v28 .fin-record-body{flex:1;min-width:0;display:grid;gap:2px}
.fin-v28 .fin-record-body strong,.fin-v28 .fin-record-body small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fin-v28 .fin-record>b{flex:none;font-family:var(--latin);font-size:13px;font-weight:600}
.fin-v28 .fin-record>.fin-icon-btn{flex:none;height:26px;min-width:26px;font-size:13px;padding:0 6px}
.fin-v28 .fin-record .fin-strike{text-decoration:line-through;color:var(--muted)}
.fin-v28 .fin-record .fin-menu-text,.fin-v28 .fin-inline-tools .fin-menu-text{display:none}
.fin-v28 .fin-budget-amount{margin:2px 0 10px}
.fin-v28 .fin-budget-row>.fin-row-between strong{font-size:12.5px;color:var(--muted);font-weight:600}

/* ===== v28.1 ===== */
/* Both columns end on the same line: columns stretch, the last card in each column grows. */
@media (min-width:761px){
 .fin-v28 .fin-board{align-items:stretch}
 .fin-v28 .fin-col{display:flex;flex-direction:column}
 .fin-v28 .fin-col>.fin-section:last-child{flex:1 1 auto}
}
.fin-v28 .fin-empty{display:block;padding:6px 0}
.fin-v28 .fin-empty-copy{display:grid;gap:8px;justify-items:start}
.fin-v28 .fin-empty-copy p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.6}
.fin-v28 .fin-empty-action{text-decoration:none;border:1px solid var(--border);border-radius:9px;padding:6px 12px;font-size:12px;background:var(--surface-2)}
.fin-v28 .fin-empty-action:hover{background:var(--text);color:var(--bg)}
.fin-v28 .fin-budget-tools{display:flex;gap:10px}
.fin-link-btn{border:0;background:none;padding:0;color:var(--muted);font:inherit;font-size:11.5px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.fin-link-btn:hover{color:var(--text)}
.fin-v28 .fin-note{margin:10px 0 0;font-size:11px;color:var(--muted)}
.fin-tag{display:inline-block;font-size:10px;font-weight:600;padding:0 6px;border-radius:99px;border:1px solid var(--border);color:var(--muted);vertical-align:middle;margin-inline-start:4px}
.fin-v28 .fin-record.is-paid strong,.fin-v28 .fin-record.is-bought strong{color:var(--muted)}
.fin-v28 .fin-approx{color:var(--muted);font-weight:500!important}
.fin-shop-total{margin-top:12px;padding:12px;border-radius:12px;background:var(--surface-2);display:grid;gap:6px;font-size:12.5px}
.fin-shop-total b{font-family:var(--latin);font-size:15px}
.fin-shop-total small{font-size:11.5px;color:var(--muted);line-height:1.6}
.fin-shop-total .fin-progress{background:var(--surface)}
.fin-shop-out b{font-size:12px;color:var(--text)}
.fin-check{display:flex;align-items:center;gap:8px;font-size:13px;margin:4px 0 12px}
@media (max-width:760px){.fin-v28 .fin-section-transactions{order:4}.fin-v28 .fin-section-shopping{order:5}}

/* ===== v29 layout: one grid, rows end level, every card the same colour ===== */
.fin-v29 .fin-grid29{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch}
.fin-v29 .fin-section-summary,.fin-v29 .fin-section-jars{grid-column:1/-1}
.fin-v29 .fin-section[data-fin-section]{grid-area:auto;grid-column:auto}
.fin-v29 .fin-section-summary,.fin-v29 .fin-section-jars{grid-column:1/-1!important}
.fin-v29 .fin-section-summary{background:var(--surface)!important;color:var(--text)!important;border:1px solid var(--border)!important}
.fin-v29 .fin-section-summary .fin-head-copy h2,.fin-v29 .fin-section-summary .fin-menu-trigger{color:var(--text)!important;border-color:var(--border)!important}
.fin-total{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.fin-total-split{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.fin-total-split b{color:var(--text);font-family:var(--latin);margin-inline-start:4px}
.fin-total-split i{font-style:normal;margin-inline-end:4px}
.fin-pool+.fin-pool{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.fin-pool-name{font-size:12.5px;color:var(--muted);font-weight:600}
.fin-pool-main{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 8px}
.fin-cat-limits{display:grid;gap:4px;margin-top:12px;padding-top:10px;border-top:1px solid var(--border);font-size:12px}
.fin-head-plus{width:30px;height:30px;font-size:16px;border-radius:9px;margin-inline-start:auto}
.fin-v29 .fin-section-head{gap:8px}
.fin-sav-list{display:grid;gap:12px}
.fin-sav{display:grid;gap:10px;padding:12px;border-radius:14px;background:var(--surface-2)}
.fin-sav-top{display:flex;gap:12px;align-items:center}
.fin-ring{width:52px;height:52px;flex:none;color:var(--text)}
.fin-sav-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--surface);flex:none}
.fin-sav-copy{flex:1;min-width:0;display:grid;gap:2px}
.fin-sav-amount{font:700 19px var(--latin)}
.fin-sav-copy small{font-size:11px;color:var(--muted)}
.fin-sav-bars{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;height:56px;align-items:end}
.fin-sav-bars span{display:grid;grid-template-rows:1fr auto;height:100%;gap:2px;text-align:center}
.fin-sav-bars i{align-self:end;display:block;width:100%;border-radius:5px 5px 2px 2px;background:var(--text)}
.fin-sav-bars i.is-out{background:repeating-linear-gradient(45deg,var(--muted) 0 3px,transparent 3px 6px)}
.fin-sav-bars small{font:10px var(--latin);color:var(--muted)}
.fin-v29 .fin-jar-buttons{display:flex;gap:5px;flex-wrap:wrap}
@media (max-width:760px){.fin-v29 .fin-grid29{grid-template-columns:1fr}}

.fin-sav-bars.is-empty{display:none}

/* ===== v29.2 finance page ===== */
.fin292 .fin-intro{align-items:flex-end}
.fin292 .fin-intro p{margin:4px 0 0;color:var(--muted);font-size:13.5px}
.fin292 .fin-intro-tools{display:flex;align-items:center;gap:8px}
.fin292-icon{all:unset;box-sizing:border-box;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer}
.fin292-icon:hover{background:var(--surface-2)}
.fin292-icon.is-solid{background:var(--text);color:var(--bg);border-color:var(--text)}
.fin292-icon:focus-visible,.fin292-add:focus-visible,.fin292-tile-head:focus-visible,.fin292-more:focus-visible,.fin292-chip:focus-visible{outline:2px solid var(--text);outline-offset:2px}

.fin292-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin:18px 0 16px}
.fin292-tile{display:grid;gap:14px;padding:18px 20px;border:1px solid var(--border);border-radius:18px;background:var(--surface)}
.fin292-tile-head{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;cursor:pointer;border-radius:10px}
.fin292-tile-head strong{display:block;font-size:15px}
.fin292-tile-head small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.fin292-tile-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--surface-2);color:var(--text);flex:none}
.fin292-tile-amount{font:700 26px var(--latin);letter-spacing:-.3px}
.fin292-tile-amount.is-negative{color:var(--danger,#b42318)}
.fin292-add{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:6px;height:40px;border-radius:99px;background:var(--surface-2);color:var(--text);font-size:13.5px;font-weight:600;cursor:pointer}
.fin292-add:hover{background:var(--text);color:var(--bg)}

.fin292-board{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;align-items:start}
.fin292-main,.fin292-side{display:grid;gap:16px;min-width:0}
.fin292 .fin292-card{margin:0;padding:18px 20px;border-radius:18px;border:1px solid var(--border);background:var(--surface);display:grid;gap:12px;align-content:start;min-width:0}
.fin292-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fin292-head h2{margin:0;font-size:16px}
.fin292-head-tools{display:flex;align-items:center;gap:8px}
.fin292-more{all:unset;cursor:pointer;font-size:12.5px;color:var(--muted);white-space:nowrap}
.fin292-more:hover{color:var(--text)}
.fin292-mini-add{all:unset;box-sizing:border-box;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;border:1px solid var(--border);cursor:pointer;font-size:15px}
.fin292-mini-add:hover{background:var(--surface-2)}
.fin292-hint{margin:0;font-size:12px;color:var(--muted)}
.fin292-line{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px}
.fin292-line b{font-family:var(--latin);font-size:13px;white-space:nowrap}
.fin292-count{margin:0;font-size:14px}.fin292-count b{font:700 20px var(--latin);margin-inline-end:4px}
.fin292-budget{display:grid;gap:6px}
.fin292-items{display:grid;gap:2px}
.fin292-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:13.5px;cursor:pointer}
.fin292-item:last-child{border-bottom:0}
.fin292-item span{flex:1}
.fin292-item b{font:600 13px var(--latin);color:var(--muted)}
.fin292-item input{width:17px;height:17px;border-radius:50%;accent-color:var(--text);margin:0}
.fin292-link{all:unset;cursor:pointer;font-size:13px;text-decoration:underline;text-underline-offset:3px}

/* main spending card */
.fin292-total{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.fin292-total b{font:700 30px var(--latin);letter-spacing:-.4px}
.fin292-total small{color:var(--muted);font-size:13px}
.fin292-spend .fin-chart-switch{justify-self:start}
.fin292-chart{display:grid;grid-template-columns:auto 1fr;gap:10px;height:248px;padding-top:8px;margin-top:4px;direction:ltr}
.fin292-axis{position:relative;margin-bottom:22px;min-width:38px;font:500 10.5px var(--latin);color:var(--muted)}
.fin292-axis span{position:absolute;left:0;transform:translateY(50%);line-height:1}
.fin292-plot{position:relative}
.fin292-gridbox{position:absolute;inset:0 0 22px 0}
.fin292-grid{position:absolute;left:0;right:0;height:0;border-top:1px dashed var(--border)}
.fin292-bars{position:absolute;inset:0;display:flex;gap:14px;padding:0 8px;direction:rtl}
.fin292-bar{flex:1;display:flex;flex-direction:column;align-items:center;min-width:0}
.fin292-fill{position:relative;flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center}
.fin292-fill span{display:block;width:min(46px,100%);background:var(--text);border-radius:8px 8px 3px 3px}
.fin292-bar small{height:22px;line-height:22px;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.fin292-chart.is-dense .fin292-bars{gap:3px;padding:0 2px}
.fin292-chart.is-dense .fin292-fill span{border-radius:3px 3px 1px 1px}
.fin292-chart.is-dense .fin292-bar small{overflow:visible}
.fin292-note{margin:0;font-size:12px}
.fin292-sub{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--border)}
.fin292-sub strong{font-size:14px}

/* transaction rows (main card + history) */
.fin292-list{display:grid}
.fin292-row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)}
.fin292-row:last-child{border-bottom:0}
.fin292-row-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--surface-2);color:var(--text)}
.fin292-row-body{min-width:0}
.fin292-row-body strong{display:block;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fin292-row-body small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.fin292-row>b{font:600 13.5px var(--latin);white-space:nowrap}
.fin292-menu{position:relative}
.fin292-menu summary{list-style:none;cursor:pointer;width:28px;height:28px;display:grid;place-items:center;border-radius:8px;color:var(--muted)}
.fin292-menu summary::-webkit-details-marker{display:none}
.fin292-menu summary:hover{background:var(--surface-2);color:var(--text)}
.fin292-menu[open]>div{position:absolute;inset-inline-end:0;top:32px;z-index:20;display:flex;gap:4px;padding:6px;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:0 8px 24px rgba(0,0,0,.14)}

/* history modal */
.modal.fin292-wide{width:min(760px,calc(100vw - 32px));max-width:none}
.fin292-history{display:grid;gap:12px}
.fin292-search{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border:1px solid var(--border);border-radius:99px;background:var(--surface);color:var(--muted)}
.fin292-search input{all:unset;flex:1;color:var(--text);font-size:14px}
.fin292-chips{display:flex;gap:8px;flex-wrap:wrap}
.fin292-chip{all:unset;cursor:pointer;padding:7px 14px;border-radius:99px;border:1px solid var(--border);font-size:13px}
.fin292-chip[aria-pressed="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}
.fin292-history .fin292-list{max-height:min(56vh,520px);overflow-y:auto;padding-inline-end:4px}
.fin292-modal{padding-top:0}
.fin292-modal .fin-section{border:0;padding:0;background:none;box-shadow:none}
.fin292-modal .fin-section-head .fin-head-label{display:none}

@media (max-width:900px){.fin292-board{grid-template-columns:1fr}.fin292-chart{height:200px}}
.fin292-status{font-size:11px;padding:3px 9px;border-radius:99px;border:1px solid var(--border);color:var(--muted);white-space:nowrap}
.fin292-status.is-paid{background:var(--text);color:var(--bg);border-color:var(--text)}

/* ===== v29.3 finance: reference layout ===== */
.fin293-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.fin293-top h1{margin:0}
.fin293-top p{margin:4px 0 0;color:var(--muted);font-size:13.5px}
.fin293-over{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:22px 0 12px}
.fin293-over h2{margin:0;font-size:16px}
.fin293-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}
.fin293-tile{display:grid;gap:14px;padding:18px 20px;border:1px solid var(--border);border-radius:18px;background:var(--surface)}
.fin293-tile-open{all:unset;box-sizing:border-box;display:grid;justify-items:start;gap:6px;cursor:pointer;border-radius:10px}
.fin293-tile-open:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.fin293-tile-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--surface-2);color:var(--text)}
.fin293-tile-label{font-size:13px;color:var(--muted)}
.fin293-tile-amount{font:700 26px var(--latin);letter-spacing:-.3px}
.fin293-tile-amount.is-negative{color:var(--danger,#b42318)}
.fin293-total{display:block;font:700 30px var(--latin);letter-spacing:-.4px;margin-top:-4px}
.fin293-modes{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.fin293-mode{all:unset;cursor:pointer;color:var(--muted)}
.fin293-mode[aria-pressed="true"]{color:var(--text);font-weight:700}
.fin293-mode:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.fin293-rows{display:grid}
.fin293-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--border);font-size:13.5px}
.fin293-row:last-child{border-bottom:0}
.fin293-row b{font:600 13.5px var(--latin);white-space:nowrap}
.fin293-item{cursor:pointer}
.fin293-item>span{display:flex;align-items:center;gap:10px}
.fin293-dot{appearance:none;-webkit-appearance:none;width:14px;height:14px;margin:0;border-radius:50%;background:var(--muted);opacity:.55;cursor:pointer;flex:none}
.fin293-dot:hover,.fin293-dot:focus-visible{opacity:1;outline:2px solid var(--text);outline-offset:2px}
.fin293-jar{display:grid;gap:6px;padding:4px 0}
.fin293-jar small{font:600 12.5px var(--latin);color:var(--muted)}
.fin293-jar-name{display:flex;align-items:center;gap:8px}
.fin293-jar-name strong{font-size:13.5px}
.fin293-jar-ico{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--surface-2)}
.fin293-jar-ico svg{width:17px;height:17px}
.fin293-budget-row{display:grid;gap:8px;padding:12px 0;border-bottom:1px solid var(--border)}
.fin293-budget-row:last-child{border-bottom:0}
.fin293-actions{display:flex;gap:14px;align-items:center}
.fin293-hist-sub{margin:-6px 0 0;font-size:13px}
@media (max-width:640px){.fin293-tiles{gap:10px}.fin293-tile{padding:14px}.fin293-tile-amount{font-size:19px}}

/* ===== v29.4 «إدارة أموالي» — approved layout ===== */
.f30{max-width:1180px}
.f30-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.f30-top h1{margin:0;font-size:30px}
.f30-top p{margin:5px 0 0;color:var(--muted);font-size:13.5px}
.f30-month{display:flex;align-items:center;gap:4px;border:1px solid var(--border);border-radius:11px;background:var(--surface);padding:3px}
.f30-month span{min-width:118px;text-align:center;font-size:13.5px;font-weight:600}
.f30-month button{all:unset;cursor:pointer;width:30px;height:30px;display:grid;place-items:center;border-radius:8px;color:var(--muted)}
.f30-month button:hover{background:var(--surface-2);color:var(--text)}
.f30-grid{display:grid;grid-template-columns:minmax(0,62fr) minmax(0,38fr);gap:16px;align-items:start}
.f30-col{display:grid;gap:14px;align-content:start;min-width:0}
.f30-card{height:var(--h);display:flex;flex-direction:column;min-width:0;min-height:0;padding:17px;border:1px solid var(--border);border-radius:12px;background:var(--surface);overflow:hidden}
.f30-inv{background:var(--text);color:var(--bg);border-color:var(--text)}
.f30-inv .f30-plus{color:var(--bg);border-color:color-mix(in srgb,var(--bg) 45%,transparent)}
.f30-inv .f30-plus:hover{background:color-mix(in srgb,var(--bg) 14%,transparent)}
.f30-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex:none}
.f30-title{all:unset;display:grid;gap:3px;min-width:0;cursor:default}
button.f30-title{cursor:pointer}
button.f30-title:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:6px}
.f30-title h2{margin:0;font-size:15px;line-height:1.3}
.f30-title small{font-size:11.5px;color:var(--muted)}
.f30-tools{display:flex;align-items:center;gap:8px;flex:none}
.f30-plus,.f30-all{all:unset;box-sizing:border-box;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;cursor:pointer;flex:none;border:1px solid var(--border);color:var(--text)}
.f30-all{border-color:transparent;color:var(--muted)}
.f30-plus:hover,.f30-all:hover{background:var(--surface-2);color:var(--text)}
.f30-plus:focus-visible,.f30-all:focus-visible,.f30-mini:focus-visible,.f30-check:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.f30-amt{display:block;font:700 30px var(--latin);letter-spacing:-.3px;margin-top:auto;text-align:right}
.f30-amt-s{font-size:24px}
.f30-muted{color:var(--muted);font-size:12px}
.f30-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.f30-foot{margin-top:auto;display:grid;gap:6px}
.f30-bar{height:7px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.f30-bar span{display:block;height:100%;background:var(--text);border-radius:inherit}
.f30-link{all:unset;cursor:pointer;font-size:12.5px;text-decoration:underline;text-underline-offset:3px}
.f30-scroll{flex:1;min-height:0;overflow-y:auto;margin-top:8px;padding-inline-end:4px;scrollbar-width:thin}
.f30-empty{margin:10px 0 0;color:var(--muted);font-size:12.5px;line-height:1.7}
.f30-li{display:flex;align-items:center;gap:10px;min-height:36px;border-bottom:1px solid var(--border);font-size:13.5px}
.f30-li:last-child{border-bottom:0}
.f30-li-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.f30-li b{font:600 13px var(--latin);white-space:nowrap}
.f30-check{width:16px;height:16px;margin:0;accent-color:var(--text);cursor:pointer;flex:none}
.f30-li-tools{display:flex;gap:2px;opacity:0;transition:opacity .15s}
.f30-li:hover .f30-li-tools,.f30-exp:hover .f30-li-tools,.f30-bill:hover .f30-li-tools,.f30-li-tools:focus-within{opacity:1}
.f30-mini{all:unset;cursor:pointer;width:24px;height:24px;display:grid;place-items:center;border-radius:7px;color:var(--muted);font-size:13px}
.f30-mini:hover{background:var(--surface-2);color:var(--text)}
.f30-total{display:flex;justify-content:space-between;align-items:center;padding-top:9px;margin-top:6px;border-top:1px solid var(--border);font-size:13px;flex:none}
.f30-total b{font:700 15px var(--latin)}
.f30-inline{display:grid;grid-template-columns:1fr 110px auto;gap:6px;margin-top:10px;flex:none}
.f30-inline input{height:34px;border-radius:9px;border:1px solid var(--border);background:var(--bg);color:var(--text);padding:0 10px;font:inherit;font-size:13px;min-width:0}
.f30-btn{all:unset;box-sizing:border-box;cursor:pointer;height:34px;padding:0 14px;border-radius:9px;background:var(--text);color:var(--bg);font-weight:700;font-size:13px;display:inline-grid;place-items:center;white-space:nowrap}
.f30-obtn{all:unset;box-sizing:border-box;cursor:pointer;height:34px;padding:0 12px;border-radius:9px;border:1px solid var(--border);font-size:12.5px;display:inline-grid;place-items:center;white-space:nowrap}
.f30-btn:focus-visible,.f30-obtn:focus-visible,.f30-link:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.f30-danger{color:#d14b3f}
.f30-tabs{display:flex;background:var(--surface-2);border-radius:9px;padding:3px;gap:2px;width:max-content;flex:none}
.f30-tabs button{all:unset;cursor:pointer;padding:4px 11px;border-radius:7px;font-size:12px;color:var(--muted);white-space:nowrap}
.f30-tabs button[aria-pressed="true"]{background:var(--text);color:var(--bg);font-weight:700}
.f30-tabs button:focus-visible{outline:2px solid var(--text)}
.f30-tabs-s{margin-top:10px}
.f30-sum{display:flex;align-items:baseline;gap:10px;margin-top:8px;flex:none}
.f30-sum b{font:700 24px var(--latin)}
.f30-hbars{flex:none;max-height:132px;overflow-y:auto;margin-top:6px;display:grid;gap:2px;padding-inline-end:4px}
.f30-hb{display:grid;grid-template-columns:84px 1fr 64px;align-items:center;gap:12px;height:26px;font-size:12.5px}
.f30-hb span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.f30-hb i{height:7px;border-radius:99px;background:var(--surface-2);overflow:hidden;display:block}
.f30-hb em{display:block;height:100%;background:var(--text);border-radius:inherit}
.f30-hb b{font:600 12.5px var(--latin);text-align:left}
.f30-subhead{margin-top:8px;padding-top:8px;border-top:1px solid var(--border);flex:none}
.f30-subhead strong{font-size:13.5px}
.f30-exp{display:flex;align-items:center;gap:10px;min-height:42px;border-bottom:1px solid var(--border)}
.f30-exp:last-child{border-bottom:0}
.f30-exp>div{flex:1;min-width:0}
.f30-exp strong{display:block;font-size:13px}
.f30-exp small{display:block;font-size:11px;color:var(--muted);margin-top:1px}
.f30-exp>b{font:600 13px var(--latin);white-space:nowrap}
.f30-bill{display:flex;align-items:center;gap:10px;min-height:46px;border-bottom:1px solid var(--border)}
.f30-bill:last-child{border-bottom:0}
.f30-bill-main{flex:1;min-width:0}
.f30-bill-main strong{display:block;font-size:13px}
.f30-bill-main small,.f30-bill-amt small{display:block;font-size:11px;color:var(--muted)}
.f30-bill-amt{text-align:left}
.f30-bill-amt b{font:600 13px var(--latin)}
.f30-bill.is-paid .f30-bill-main strong{color:var(--muted)}
.f30-jarrow{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:4px 0 10px}
.f30-jarrow+.f30-jarrow{border-top:1px solid var(--border);padding-top:10px}
.f30-jar-info{display:grid;gap:4px;min-width:0}
.f30-jar-info strong{font-size:13.5px}
.f30-jar-info b{font:700 15px var(--latin);text-align:right}
.f30-jar-btn{all:unset;cursor:pointer;border-radius:10px}
.f30-jar-btn:focus-visible{outline:2px solid var(--text)}
.f30-jar{width:56px;height:68px;display:block}
.f30-jarrow.is-big .f30-jar{width:74px;height:90px}
.f30-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.modal.f30-modal{width:min(620px,calc(100vw - 32px));max-width:none}
.f30-detail{display:grid;gap:8px}
.f30-detail .f30-amt{margin-top:0;font-size:30px}
.f30-move{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px}
.f30-move span{flex:1}.f30-move b{font:600 13px var(--latin)}
.f30-pot{display:grid;gap:6px;padding:12px 0;border-top:1px solid var(--border)}
.f30-modal-list{max-height:min(55vh,460px);overflow-y:auto;margin-top:8px}
.f30-danger-zone{padding-top:12px;margin-top:6px;border-top:1px solid var(--border)}
.f30-checkline{display:flex;align-items:center;gap:8px;font-size:13.5px;margin:4px 0 10px}
@media (max-width:900px){.f30-grid{grid-template-columns:1fr}.f30-card{height:auto;min-height:0;max-height:none}.f30-card .f30-scroll{max-height:320px}.f30-top{flex-wrap:wrap}}
@media (hover:none){.f30-li-tools{opacity:1}}
/* v29.5 menus */
.f30-menu{position:relative}
.f30-menu>summary{list-style:none}
.f30-menu>summary::-webkit-details-marker{display:none}
.f30-menu[open]>summary{background:var(--surface-2)}
.f30-menu-list{position:absolute;inset-inline-end:0;top:36px;z-index:30;min-width:190px;display:grid;padding:6px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);box-shadow:0 14px 34px rgba(0,0,0,.28)}
.f30-menu-list button{all:unset;cursor:pointer;padding:9px 11px;border-radius:8px;font-size:13px;white-space:nowrap}
.f30-menu-list button:hover,.f30-menu-list button:focus-visible{background:var(--surface-2)}
.f30-menu-list .f30-danger{color:#d14b3f}
.f30-inv .f30-menu>summary{color:var(--bg)}
.f30-li-tools{opacity:.6}
.f30-jar-info .f30-row strong{flex:1}
.f30-jar-info .f30-menu>summary{width:26px;height:26px}
.f30-card{position:relative}
.f30-card:has(details.f30-menu[open]){overflow:visible;z-index:6}
.f30-jar-info .f30-row{position:relative}
.f30-scroll:has(details.f30-menu[open]){overflow:visible}
/* shopping card: at least four rows inside the approved 200px */
.f30-shop .f30-title small{display:none}
.f30-shop .f30-scroll{margin-top:4px}
.f30-shop .f30-li{min-height:26px;font-size:13px}
.f30-shop .f30-li .f30-mini{width:22px;height:22px}
.f30-shop .f30-total{padding-top:6px;margin-top:4px}
.f30-shop .f30-inline{margin-top:6px}
.f30-shop .f30-inline input,.f30-shop .f30-inline .f30-btn{height:30px}
.f30-shop .f30-head .f30-plus,.f30-shop .f30-head .f30-all,.f30-billcard .f30-head .f30-plus,.f30-billcard .f30-head .f30-all{width:26px;height:26px}
.f30-shop .f30-title h2,.f30-billcard .f30-title h2{line-height:26px}
.f30-shop .f30-li{min-height:25px;line-height:1.2}
.f30-shop .f30-total{padding-top:5px;margin-top:3px;font-size:12.5px}
.f30-shop .f30-total b{font-size:14px}
/* bills card: at least four rows inside the approved 233px */
.f30-billcard .f30-title small{display:none}
.f30-billcard .f30-tabs-s{margin-top:6px}
.f30-billcard .f30-tabs button{padding:3px 10px}
.f30-billcard .f30-scroll{margin-top:4px}
.f30-billcard .f30-bill{min-height:32px;gap:8px}
.f30-billcard .f30-bill-main{display:flex;align-items:baseline;gap:8px;min-width:0}
.f30-billcard .f30-bill-main strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px}
.f30-billcard .f30-bill-main small{white-space:nowrap;font-size:10.5px}
.f30-billcard .f30-bill-amt{display:flex;align-items:baseline;gap:6px}
.f30-billcard .f30-bill-amt b{font-size:12.5px}
.f30-billcard .f30-bill-amt small{font-size:10.5px}
.f30-billcard .f30-mini{width:22px;height:22px}
.f30-billcard .f30-bill-amt small{display:none}
.f30-billcard .f30-bill-main strong{flex:1;min-width:0}
.f30-form-error{margin:4px 0 10px;padding:9px 12px;border-radius:9px;background:color-mix(in srgb,#d14b3f 14%,transparent);color:#e0675c;font-size:13px;line-height:1.6}
.f30-jar-plus{width:26px;height:26px}.f30-jar-info .f30-row{gap:6px}
.f30-badge{display:inline-block;font-size:10.5px;line-height:1;padding:4px 7px;border-radius:99px;border:1px solid var(--border);color:var(--muted);white-space:nowrap}
.f30-badge.is-paid{background:var(--text);color:var(--bg);border-color:var(--text)}
.f30-bill-amt{display:flex;align-items:center;gap:8px}
.f30-bill.is-paid .f30-bill-amt b{color:var(--muted)}
.f30-billcard .f30-bill-amt .f30-badge{font-size:10px;padding:3px 6px}
.f30-bought .f30-li-name{display:grid;white-space:normal}
.f30-bought .f30-li-name small{font-size:11px;color:var(--muted)}
.f30-bought{min-height:44px}
.f30-bought .f30-li-tools{opacity:1}

.f30-catlink{all:unset;display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;color:var(--muted);cursor:pointer;align-self:flex-start}
.f30-catlink:hover,.f30-catlink:focus-visible{color:var(--text);text-decoration:underline}