/* Update 4 / Finance visual consistency — Loans first (isolated QA only).
   Derived from the APPROVED Savings overview palette and Accounts card language.
   Presentation only; no state, loan calculations, routing, or payment changes. */
#app .finance-full-shell.u4lo-shell{
 --accent:#087b59;--accent-soft:#d9efe3;
 --u4-fin-mint-bg:linear-gradient(123deg,
   color-mix(in srgb,#b8e6d1 33%,var(--card,#fff)),
   color-mix(in srgb,#dbe9f9 23%,var(--card,#fff)) 69%,
   color-mix(in srgb,#f7f0d8 38%,var(--card,#fff)));
 --u4-fin-soft-border:color-mix(in srgb,var(--accent,#087b59) 12%,transparent);
 --u4-fin-tile:color-mix(in srgb,var(--card,#fff) 78%,transparent);
}
/* Keep the established information architecture, but match Savings' hero tint,
   outline, radius, rhythm and mint glass statistic tiles. */
body.rufiyaa-liquid-glass:not(.rufiyaa-admin-mode) #app .u4lo-page .u4lo-overview{
 margin:4px 0 14px!important;
 padding:22px 24px!important;
 min-width:0!important;
 border-radius:26px!important;
 background:var(--u4-fin-mint-bg)!important;
 border:1px solid var(--u4-fin-soft-border)!important;
 box-shadow:0 14px 35px rgba(21,67,65,.07)!important;
 overflow:hidden!important;
}
#app .u4lo-page .u4lo-overview-eyebrow{
 gap:8px!important;margin-bottom:14px!important;
 font-size:11px!important;line-height:1.4!important;
 color:#087b59!important;
 letter-spacing:.10em!important;
}
#app .u4lo-page .u4lo-overview-eyebrow::before{
 content:'✦';display:inline-block;flex:0 0 auto;
 font-size:15px;line-height:1;color:#087b59;letter-spacing:0;
}
#app .u4lo-page .u4lo-overview-eyebrow>span{margin-left:auto!important}
#app .u4lo-page .u4lo-total-label{font-size:12px!important}
#app .u4lo-page .u4lo-total{font-size:clamp(25px,3.2vw,39px)!important;line-height:1.1!important;letter-spacing:-.045em!important;margin:7px 0 20px!important;font-variant-numeric:tabular-nums!important}
#app .u4lo-page .u4lo-overview-metrics{gap:10px!important;margin-bottom:16px!important}
#app .u4lo-page .u4lo-overview-metrics>div{
 background:var(--u4-fin-tile)!important;
 border:1px solid var(--u4-fin-soft-border)!important;
 padding:13px 14px!important;border-radius:16px!important;
 min-height:74px!important;align-content:center!important;
}
#app .u4lo-page .u4lo-overview-metrics span{font-size:11px!important;line-height:1.25!important}
#app .u4lo-page .u4lo-overview-metrics strong{font-size:clamp(14px,2.2vw,18px)!important;line-height:1.2!important;font-variant-numeric:tabular-nums}
#app .u4lo-page .u4lo-progress-label{font-size:11px!important;align-items:center!important}
#app .u4lo-page .u4lo-progress-label b{font-size:11px!important}
#app .u4lo-page .u4lo-overview .progress{
 height:7px!important;min-height:7px!important;
 background:color-mix(in srgb,#087b59 13%,var(--card,#fff))!important;
 border-radius:999px!important;overflow:hidden!important;
 margin:9px 0 16px!important;
}
#app .u4lo-page .u4lo-overview .progress i{
 display:block!important;max-width:100%!important;border-radius:inherit!important;
 background:linear-gradient(90deg,#188467,#52bea0)!important;
}
#app .u4lo-page .u4lo-next{align-items:baseline!important;gap:6px 14px!important}
#app .u4lo-page .u4lo-next span{font-size:11px!important}
#app .u4lo-page .u4lo-next b{font-size:11px!important;text-align:right!important}
#app .u4lo-page .u4lo-context{font-size:11px!important;line-height:1.45!important;margin:12px 0 0!important}
/* Same pill softness, dividers, and consistent label styles as approved Savings. */
#app .u4lo-page .loan-card-v73{
 border:1px solid color-mix(in srgb,var(--accent,#087b59) 12%,var(--border,#dce8e4))!important;
 background:color-mix(in srgb,var(--card,#fff) 90%,transparent)!important;
 box-shadow:0 9px 24px rgba(32,62,63,.055)!important;
 border-radius:22px!important;
}
#app .u4lo-page .loan-card-v73:focus-visible{outline:2px solid var(--accent,#087b59)!important;outline-offset:3px!important}
#app .u4lo-page .loan-card-v73 .progress{height:7px!important;border-radius:99px!important;overflow:hidden!important}
#app .u4lo-page .loan-card-v73 .progress i{border-radius:inherit!important;background:linear-gradient(90deg,#188467,#52bea0)!important}
#app .u4lo-page .loan-card-foot-v73{gap:7px!important}
/* Bring Loan Details into the same mint/ivory panel family, preserving the
   existing header actions, scrolling and floating Record Payment button. */
#modal-root .modal.u4lo-detail-modal .u4lo-hero{
 background:linear-gradient(126deg,color-mix(in srgb,#b8e6d1 28%,var(--card,#fff)),color-mix(in srgb,#dbe9f9 14%,var(--card,#fff)) 72%,color-mix(in srgb,#f7f0d8 24%,var(--card,#fff)))!important;
 border:1px solid color-mix(in srgb,var(--accent,#087b59) 12%,transparent)!important;
 border-radius:22px!important;
}
#modal-root .modal.u4lo-detail-modal .u4lo-detail-metrics>div{
 background:color-mix(in srgb,#b8e6d1 10%,var(--card,#fff))!important;
 border-color:color-mix(in srgb,var(--accent,#087b59) 10%,var(--border,#dce8e4))!important;
 border-radius:17px!important;
}
#modal-root .modal.u4lo-detail-modal .u4lo-insight{
 background:color-mix(in srgb,#b8e6d1 17%,var(--card,#fff))!important;
 border-color:color-mix(in srgb,var(--accent,#087b59) 13%,transparent)!important;
}
@media(max-width:520px){
 body.rufiyaa-liquid-glass:not(.rufiyaa-admin-mode) #app .u4lo-page .u4lo-overview{
  border-radius:23px!important;padding:19px!important;
 }
 #app .u4lo-page .u4lo-overview-metrics{gap:8px!important}
 #app .u4lo-page .u4lo-overview-metrics>div{min-height:68px!important;padding:11px 12px!important}
 #app .u4lo-page .u4lo-overview-metrics strong{font-size:14px!important}
 #app .u4lo-page .u4lo-next b{max-width:60%!important}
}
/* Finance future-section foundation: apply the same tint to the existing,
   previously unpolished subscription and person summary cards only. */
#app .u4-finance-context:is(.u4-subscriptions-summary,.u4-people-summary){
 background:linear-gradient(123deg,color-mix(in srgb,#b8e6d1 25%,var(--card,#fff)),color-mix(in srgb,#dbe9f9 15%,var(--card,#fff)) 69%,color-mix(in srgb,#f7f0d8 28%,var(--card,#fff)))!important;
 border:1px solid color-mix(in srgb,var(--accent,#087b59) 12%,transparent)!important;
 border-radius:24px!important;
 box-shadow:0 10px 29px rgba(21,67,65,.05)!important;
}
/* Explicit dark token layer, similar to approved Savings dark glass. */
html[data-theme="dark"] #app .finance-full-shell.u4lo-shell{
 --accent:#9ce4c2;--accent-soft:#204438;
 --u4-fin-mint-bg:linear-gradient(130deg,#193d36 0%,#213940 66%,#263239 100%);
 --u4-fin-soft-border:rgba(150,220,190,.17);
 --u4-fin-tile:rgba(7,25,26,.42);
}
html[data-theme="dark"] #app .u4lo-page .u4lo-overview-eyebrow,
html[data-theme="dark"] #app .u4lo-page .u4lo-overview-eyebrow::before{color:#a8e8ca!important}
html[data-theme="dark"] #app .u4lo-page .loan-card-v73{background:#172722!important;border-color:rgba(159,222,190,.13)!important}
html[data-theme="dark"] #modal-root .modal.u4lo-detail-modal .u4lo-hero{background:linear-gradient(130deg,#193d36,#263239)!important;border-color:rgba(150,220,190,.17)!important}
html[data-theme="dark"] #modal-root .modal.u4lo-detail-modal .u4lo-detail-metrics>div{background:#203b34!important;border-color:rgba(150,220,190,.14)!important}
html[data-theme="dark"] #modal-root .modal.u4lo-detail-modal .u4lo-insight{background:#162d28!important;border-color:rgba(150,220,190,.14)!important}
html[data-theme="dark"] #app .u4-finance-context:is(.u4-subscriptions-summary,.u4-people-summary){background:linear-gradient(130deg,#193d36,#213940 66%,#263239)!important;border-color:rgba(150,220,190,.17)!important}
@media(prefers-reduced-motion:reduce){#app .u4lo-page .u4lo-overview .progress i{transition:none!important}}