/* 31 Oct 2026 — Finance Home visual refinement after actual iPad QA.
   Presentation-only. Excludes Wallet carousel, ledger and Rewind. */
#app main.u4-finance-home .u4-health-dashboard .v12432-health-head{
  padding-right:0!important;
}
#app main.u4-finance-home .u4-health-dashboard .v12432-health-head .v12432-collapse{
  margin-right:0!important;
  flex:0 0 38px!important;
  width:38px!important;height:38px!important;
  touch-action:manipulation;
}
/* Reports & Trends is a small quick-entry, not a competing dashboard hero. */
#app main.u4-finance-home .u3-finance-reports.u4-finance-reports{
  margin:4px 0 12px!important;padding:0!important;
  border-radius:16px!important;
  background:linear-gradient(125deg,rgba(188,214,244,.20),rgba(224,223,244,.21))!important;
  border:1px solid rgba(131,165,188,.17)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55)!important;
}
#app main.u4-finance-home .u3-finance-reports.u4-finance-reports > button{
  display:grid!important;grid-template-columns:36px minmax(0,1fr) auto!important;
  grid-template-rows:auto auto!important;align-items:center!important;
  gap:2px 11px!important;min-height:59px!important;
  padding:9px 13px!important;width:100%!important;
  text-align:left!important;
}
#app main.u4-finance-home .u3-finance-reports.u4-finance-reports > button > span:first-child{
  grid-column:1;grid-row:1/3;display:grid!important;place-items:center;
  width:34px;height:34px;border-radius:11px;background:rgba(49,132,160,.10);
  color:var(--accent);font-size:18px!important;
}
#app main.u4-finance-home .u3-finance-reports.u4-finance-reports > button > b{
  grid-column:2;grid-row:1;font-size:13px!important;font-weight:750!important;
}
#app main.u4-finance-home .u3-finance-reports.u4-finance-reports > button > small{
  grid-column:2;grid-row:2;font-size:11px!important;line-height:1.3!important;
  color:var(--muted)!important;min-width:0;
}
#app main.u4-finance-home .u3-finance-reports.u4-finance-reports > button > em{display:none!important}
#app main.u4-finance-home .u4-finance-reports .u4-reports-action{
  grid-column:3;grid-row:1/3;display:flex;align-items:center;gap:6px;
  font-weight:720;font-size:11px;color:var(--accent);white-space:nowrap;
}
#app main.u4-finance-home .u4-finance-reports .u4-reports-action::after{content:'›';font-size:20px;line-height:1}
/* Lower subsections flow naturally, separated by fine rules rather than 5 giant glass boxes. */
#app main.u4-finance-home .u4-finance-overview-list{
  display:flex!important;flex-direction:column!important;gap:0!important;
  padding:0 0 10px!important;
}
#app main.u4-finance-home .u4-finance-overview-list > .u4-finance-overview-section{
  box-sizing:border-box;background:transparent!important;background-image:none!important;
  border:0!important;border-bottom:1px solid rgba(130,151,166,.20)!important;
  border-radius:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;padding:15px 0 17px!important;margin:0!important;
}
#app main.u4-finance-home .u4-finance-overview-list > .u4-finance-overview-section:last-child{
  border-bottom:0!important;
}
#app main.u4-finance-home .u4-finance-overview-section .finance-clean-head{
  border:0!important;border-bottom:0!important;margin:0!important;
  padding:3px 0 8px!important;background:transparent!important;
}
#app main.u4-finance-home .u4-finance-overview-section .finance-min-rows,
#app main.u4-finance-home .u4-finance-overview-section .fin12-rows{padding-top:0!important}
#app main.u4-finance-home .u4-finance-overview-section .finance-min-row{min-height:39px!important;padding:5px 0!important}
/* Retain Wallet's approved card carousel dimensions and controls. */
#app main.u4-finance-home .u4-finance-overview-list > .fin12-section:not(.u4-finance-overview-section){background:transparent!important}
@media (min-width:840px){
 #app main.u4-finance-home .u4-finance-overview-list{display:flex!important;flex-direction:column!important;grid-template-columns:none!important}
}
@media (max-width:430px){
 #app main.u4-finance-home .u4-finance-reports .u4-reports-action{font-size:0!important;gap:0}
 #app main.u4-finance-home .u4-finance-reports .u4-reports-action::after{font-size:21px}
}
html[data-theme="dark"] #app main.u4-finance-home .u4-finance-overview-section{
 border-bottom-color:rgba(220,239,233,.13)!important;
}
html[data-theme="dark"] #app main.u4-finance-home .u4-finance-reports{
 background:linear-gradient(125deg,rgba(38,66,83,.36),rgba(39,49,75,.24))!important;
 border-color:rgba(255,255,255,.12)!important;
}
/* Customize Finance — a static header in the SAME glass layer as the sheet.
   Only the form content scrolls, so a white sticky strip never crosses rows. */
#modal-root .modal.u4-custom-finance-sheet:has(.u4-finance-customization-editor),
body.rufiyaa-liquid-glass:not(.rufiyaa-admin-mode) #modal-root .modal.u4-custom-finance-sheet{
  display:flex!important;flex-direction:column!important;
  max-height:min(85dvh,860px)!important;overflow:hidden!important;
  padding:15px 17px 0!important;
  background-clip:padding-box!important;
}
#modal-root .modal.u4-custom-finance-sheet > .modal-head{
  flex:0 0 auto!important;position:relative!important;top:auto!important;
  display:flex!important;align-items:center!important;
  margin:0!important;padding:0 0 12px!important;
  border:0!important;background:transparent!important;background-image:none!important;
  box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
#modal-root .modal.u4-custom-finance-sheet > .u4-finance-settings-scroll{
  flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;scrollbar-gutter:stable;
  padding:0 3px max(20px,env(safe-area-inset-bottom,0px));
}
#modal-root .modal.u4-custom-finance-sheet > .u4-finance-settings-scroll:focus-visible{
 outline:2px solid var(--accent);outline-offset:-2px;
}
@media(max-width:600px){
 #modal-root .modal.u4-custom-finance-sheet{padding:13px 13px 0!important}
}


/* 31 Oct user-reviewed Finance ordering and accent consistency: Health, Reports, Salary. */
#app main.u4-finance-home .u4-health-dashboard + .u4-finance-reports {margin-top:8px!important;}
/* One border only: the parent is the glass frame, the inner button is transparent. */
#app main.u4-finance-home .u3-finance-reports.u4-finance-reports,
#app main.u4-finance-home .u4-salary-banner {
 background:linear-gradient(125deg,rgba(51,153,129,.12),rgba(143,211,190,.20))!important;
 border:1px solid rgba(40,146,114,.19)!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.55)!important;
 border-radius:16px!important;
}
#app main.u4-finance-home .u3-finance-reports.u4-finance-reports > button {
 border:0!important;outline:0!important;box-shadow:none!important;
 background:transparent!important;background-image:none!important;
 border-radius:inherit!important;
}
#app main.u4-finance-home .u4-salary-banner {
 min-height:51px!important;padding:7px 12px!important;
 margin:8px 0 12px!important;
 grid-template-columns:30px minmax(0,1fr) auto!important;
 gap:1px 9px!important;
}
#app main.u4-finance-home .u4-salary-banner .u4-salary-icon {
 width:29px!important;height:29px!important;border-radius:9px!important;
}
#app main.u4-finance-home .u4-salary-banner .u4-salary-icon svg {width:17px;height:17px}
#app main.u4-finance-home .u4-salary-banner>b {font-size:clamp(12px,1.8vw,15px)!important}
#app main.u4-finance-home .u4-salary-banner>span:not(.u4-salary-icon) {font-size:10px!important}
#app main.u4-finance-home .u4-salary-banner>small {font-size:10px!important}
#app main.u4-finance-home .u4-finance-reports > button {min-height:52px!important;padding:7px 12px!important}
#app main.u4-finance-home .u4-finance-reports > button > span:first-child {
 width:30px;height:30px;border-radius:9px;
 background:rgba(36,156,115,.13)!important;
}
/* Reports page remains a standalone destination with an explicit return path. */
#app .u3-report-page .u4-reports-back{
 display:inline-flex;align-items:center;justify-content:center;gap:6px;
 min-height:40px;padding:8px 14px;margin:0 0 12px;
 font-size:13px;font-weight:700;color:var(--accent,#086b52);
 background:rgba(59,156,120,.08);border:1px solid rgba(55,135,112,.23);
 border-radius:13px;cursor:pointer;
}
#app .u3-report-page .u4-reports-back:focus-visible {outline:2px solid var(--accent,#086b52);outline-offset:2px}
html[data-theme="dark"] #app main.u4-finance-home .u3-finance-reports.u4-finance-reports,
html[data-theme="dark"] #app main.u4-finance-home .u4-salary-banner {
 background:linear-gradient(125deg,rgba(22,93,79,.29),rgba(39,96,85,.24))!important;
 border-color:rgba(131,213,181,.19)!important;
}


/* 31 Oct — Real-device alignment: three matching compact Finance utility rows.
   Expanded Financial Health remains the full approved dashboard. */
#app main.u4-finance-home{
 --u4-finance-utility-height:62px;
 --u4-finance-utility-icon:34px;
 --u4-finance-utility-inset:13px;
 --u4-finance-utility-gap:11px;
}
#app main.u4-finance-home .v12432-health.u4-health-dashboard.is-collapsed{
 box-sizing:border-box!important;
 height:var(--u4-finance-utility-height)!important;
 min-height:var(--u4-finance-utility-height)!important;
 padding:6px var(--u4-finance-utility-inset)!important;
 border-radius:16px!important;
 margin-bottom:0!important;
}
#app main.u4-finance-home .u4-health-dashboard.is-collapsed .v12432-health-head{
 display:flex!important;align-items:center!important;
 justify-content:space-between!important;gap:10px!important;
 width:100%;height:100%;min-height:0!important;padding-right:0!important;
}
#app main.u4-finance-home .u4-health-dashboard.is-collapsed .v12432-health-head .eyebrow{
 display:flex!important;align-items:center!important;
 gap:var(--u4-finance-utility-gap)!important;
 min-width:0;flex:1 1 auto;
 font-size:12px!important;line-height:1.22!important;
}
#app main.u4-finance-home .u4-health-dashboard.is-collapsed .v12432-health-head .eyebrow::before{
 box-sizing:border-box!important;
 width:var(--u4-finance-utility-icon)!important;
 height:var(--u4-finance-utility-icon)!important;
 flex:0 0 var(--u4-finance-utility-icon)!important;
 border-radius:10px!important;font-size:16px!important;
}
#app main.u4-finance-home .u4-health-dashboard.is-collapsed .u4-health-heading-stack{
 display:flex;min-width:0;flex-direction:column;align-items:flex-start;gap:3px;
}
#app main.u4-finance-home .u4-health-dashboard .u4-health-compact-balance{display:none!important}
#app main.u4-finance-home .u4-health-dashboard.is-collapsed .u4-health-compact-balance{
 display:block!important;min-width:0;max-width:100%;font-size:12px!important;
 font-weight:550;letter-spacing:0!important;line-height:1.17!important;
 color:var(--muted)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#app main.u4-finance-home .u4-health-dashboard.is-collapsed .u4-health-compact-balance strong{
 font-weight:750;color:#259a72;font-variant-numeric:tabular-nums;
}
#app main.u4-finance-home .u4-health-dashboard.is-collapsed .u4-health-compact-balance.is-negative strong{color:#d36a77}
/* Prevent the prior collapsed-body override from adding a second row. */
#app main.u4-finance-home .u4-health-dashboard.is-collapsed .v12432-health-body{
 display:none!important;
}
#app main.u4-finance-home .u4-health-dashboard.is-collapsed .v12432-collapse{
 box-sizing:border-box!important;display:grid!important;place-items:center!important;
 width:38px!important;height:42px!important;flex:0 0 38px!important;
 margin:0!important;font-size:18px!important;
}
#app main.u4-finance-home .u3-finance-reports.u4-finance-reports{
 box-sizing:border-box!important;height:var(--u4-finance-utility-height)!important;
 min-height:var(--u4-finance-utility-height)!important;margin:9px 0!important;
}
#app main.u4-finance-home .u3-finance-reports.u4-finance-reports > button{
 box-sizing:border-box!important;height:100%!important;min-height:0!important;
 padding:6px var(--u4-finance-utility-inset)!important;
 grid-template-columns:var(--u4-finance-utility-icon) minmax(0,1fr) auto!important;
 column-gap:var(--u4-finance-utility-gap)!important;
 grid-template-rows:minmax(0,1fr) minmax(0,1fr)!important;
}
#app main.u4-finance-home .u3-finance-reports.u4-finance-reports > button > span:first-child{
 box-sizing:border-box!important;width:var(--u4-finance-utility-icon)!important;
 height:var(--u4-finance-utility-icon)!important;border-radius:10px!important;
 align-self:center!important;
}
#app main.u4-finance-home .u3-finance-reports.u4-finance-reports > button > b{align-self:end!important;line-height:1.23!important}
#app main.u4-finance-home .u3-finance-reports.u4-finance-reports > button > small{align-self:start!important;line-height:1.22!important}
#app main.u4-finance-home .u4-finance-reports .u4-reports-action{align-self:center!important;line-height:1.1!important}
#app main.u4-finance-home .u4-salary-banner{
 box-sizing:border-box!important;height:var(--u4-finance-utility-height)!important;
 min-height:var(--u4-finance-utility-height)!important;
 padding:6px var(--u4-finance-utility-inset)!important;
 margin:9px 0 12px!important;
 grid-template-columns:var(--u4-finance-utility-icon) minmax(0,1fr) auto!important;
 column-gap:var(--u4-finance-utility-gap)!important;
 grid-template-rows:minmax(0,1fr) minmax(0,1fr)!important;
 align-items:center!important;
}
#app main.u4-finance-home .u4-salary-banner .u4-salary-icon{
 box-sizing:border-box!important;width:var(--u4-finance-utility-icon)!important;
 height:var(--u4-finance-utility-icon)!important;border-radius:10px!important;
 align-self:center!important;
}
#app main.u4-finance-home .u4-salary-banner > b{align-self:center!important;line-height:1.2!important}
#app main.u4-finance-home .u4-salary-banner > span:not(.u4-salary-icon){align-self:end!important;line-height:1.23!important}
#app main.u4-finance-home .u4-salary-banner > small{align-self:start!important;line-height:1.22!important}
body.finance-privacy #app main.u4-finance-home .u4-health-compact-balance strong,
body.global-privacy #app main.u4-finance-home .u4-health-compact-balance strong{
 filter:blur(8px)!important;user-select:none!important;
}
@media(max-width:430px){
 #app main.u4-finance-home{--u4-finance-utility-inset:11px;--u4-finance-utility-gap:9px}
 #app main.u4-finance-home .u4-health-dashboard.is-collapsed .u4-health-compact-balance{font-size:11px!important}
}

/* 31 Oct — approved Finance overview refinement. The three compact utility
   cards share one mint-glass skin and one 62px geometry; only the EXPANDED
   Financial Health dashboard retains its distinct detailed surface. */
#app main.u4-finance-home{
 --u4-overview-mint:linear-gradient(125deg,rgba(51,153,129,.12),rgba(143,211,190,.20));
 --u4-overview-border:rgba(40,146,114,.19);
 --u4-overview-icon-bg:rgba(36,156,115,.13);
 --u4-overview-icon-border:rgba(30,133,99,.12);
 --u4-overview-gap:8px;
}
#app main.u4-finance-home .v12432-health.u4-health-dashboard.is-collapsed,
#app main.u4-finance-home .u3-finance-reports.u4-finance-reports,
#app main.u4-finance-home .u4-salary-banner{
 background:var(--u4-overview-mint)!important;
 background-image:var(--u4-overview-mint)!important;
 border:1px solid var(--u4-overview-border)!important;
 border-radius:16px!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.55)!important;
 -webkit-backdrop-filter:blur(18px) saturate(1.28)!important;
 backdrop-filter:blur(18px) saturate(1.28)!important;
}
/* No extra margin hidden between Health, Reports and Salary. */
#app main.u4-finance-home .v12432-health.u4-health-dashboard{
 margin-bottom:0!important;
}
#app main.u4-finance-home .u3-finance-reports.u4-finance-reports{
 margin:var(--u4-overview-gap) 0 0!important;
}
#app main.u4-finance-home .u4-salary-banner{
 margin:var(--u4-overview-gap) 0 14px!important;
}
/* The left-hand icon chips share size, background, border and vertical center. */
#app main.u4-finance-home .u4-health-dashboard.is-collapsed .v12432-health-head .eyebrow::before,
#app main.u4-finance-home .u4-finance-reports > button > span:first-child,
#app main.u4-finance-home .u4-salary-banner .u4-salary-icon{
 width:var(--u4-finance-utility-icon)!important;
 height:var(--u4-finance-utility-icon)!important;
 flex:0 0 var(--u4-finance-utility-icon)!important;
 box-sizing:border-box!important;
 border-radius:10px!important;
 border:1px solid var(--u4-overview-icon-border)!important;
 background:var(--u4-overview-icon-bg)!important;
 color:#13795d!important;
 display:grid!important;
 place-items:center!important;
}
#app main.u4-finance-home .u4-salary-banner .u4-salary-icon svg{
 width:17px!important;height:17px!important;
}
/* Same text baseline and visual hierarchy, with secondary details underneath. */
#app main.u4-finance-home .u4-health-dashboard.is-collapsed .u4-health-heading-stack,
#app main.u4-finance-home .u4-finance-reports > button > b,
#app main.u4-finance-home .u4-salary-banner > span:not(.u4-salary-icon){
 letter-spacing:0!important;text-transform:none!important;
}
#app main.u4-finance-home .u4-health-dashboard.is-collapsed .u4-health-heading-stack,
#app main.u4-finance-home .u4-finance-reports > button > b,
#app main.u4-finance-home .u4-salary-banner > span:not(.u4-salary-icon){
 font-size:13px!important;font-weight:750!important;line-height:1.23!important;
}
#app main.u4-finance-home .u4-finance-reports > button > small,
#app main.u4-finance-home .u4-salary-banner > small,
#app main.u4-finance-home .u4-health-dashboard.is-collapsed .u4-health-compact-balance{
 font-size:11px!important;line-height:1.22!important;
}
#app main.u4-finance-home .u4-finance-reports > button > small{
 white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
#app main.u4-finance-home .u4-salary-banner > span:not(.u4-salary-icon){
 align-self:end!important;
}
#app main.u4-finance-home .u4-salary-banner > b{
 font-size:13px!important;font-weight:720!important;
 align-self:center!important;
}
/* Align the center of the chevron, Explore and salary date to the same row. */
#app main.u4-finance-home .u4-health-dashboard.is-collapsed .v12432-collapse{
 display:flex!important;align-items:center!important;justify-content:flex-end!important;
 padding:0 2px 0 0!important;
}
#app main.u4-finance-home .u4-finance-reports .u4-reports-action{
 display:flex!important;align-items:center!important;justify-content:flex-end!important;
}
html[data-theme="dark"] #app main.u4-finance-home{
 --u4-overview-mint:linear-gradient(125deg,rgba(22,93,79,.29),rgba(39,96,85,.24));
 --u4-overview-border:rgba(131,213,181,.19);
 --u4-overview-icon-bg:rgba(71,183,146,.18);
 --u4-overview-icon-border:rgba(131,213,181,.18);
}
html[data-theme="dark"] #app main.u4-finance-home .u4-health-dashboard.is-collapsed .v12432-health-head .eyebrow::before,
html[data-theme="dark"] #app main.u4-finance-home .u4-finance-reports > button > span:first-child,
html[data-theme="dark"] #app main.u4-finance-home .u4-salary-banner .u4-salary-icon{
 color:#9de0be!important;
}
@media(max-width:430px){
 #app main.u4-finance-home .u4-finance-reports > button > small{max-width:100%}
 #app main.u4-finance-home .u4-salary-banner > b{font-size:12px!important}
}


/* 31 Oct — FINAL FINANCE HOME APPROVAL: Health keeps the SAME mint-glass
   surface in both collapsed and expanded states. Only shadow/depth changes;
   Financial Health metrics, views and the measured-height unfolding animation
   retain their original behavior. Use the exact overview variables shared by
   Reports & Trends and Estimated Salary; dark mode inherits its matching mint. */
#app main.u4-finance-home .v12432-health.u4-health-dashboard,
html[data-theme="dark"] #app main.u4-finance-home .v12432-health.u4-health-dashboard{
  background:var(--u4-overview-mint)!important;
  background-image:var(--u4-overview-mint)!important;
  border:1px solid var(--u4-overview-border)!important;
  border-radius:16px!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.28)!important;
  backdrop-filter:blur(18px) saturate(1.28)!important;
}
#app main.u4-finance-home .v12432-health.u4-health-dashboard:not(.is-collapsed){
  box-shadow:0 12px 28px rgba(27,110,86,.085),inset 0 1px 0 rgba(255,255,255,.55)!important;
}
html[data-theme="dark"] #app main.u4-finance-home .v12432-health.u4-health-dashboard:not(.is-collapsed){
  box-shadow:0 14px 28px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.09)!important;
}