/* Rufiyaa Update 4 — Savings overview + detail refresh, isolated QA only.
   No styles touch Accounts, Wallet, cards, or financial input logic. */
#app .finance-full-shell.u4sg-page{--u4sg-green:var(--accent,#0a7054);--u4sg-mint:color-mix(in srgb,var(--accent,#087b59) 6%,var(--card,#fff))}
#app .u4sg-page .finance-full-top.u4sg-header{align-items:center!important;gap:12px!important}
#app .u4sg-page .u4sg-add-button{
 position:relative!important;inset:auto!important;margin:0!important;max-width:43%!important;
 height:42px!important;min-height:42px!important;padding:0 16px!important;width:auto!important;
 border-radius:999px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
 white-space:nowrap!important;font-size:12px!important;line-height:1.2!important;font-weight:760!important;
 color:#075940!important;-webkit-text-fill-color:#075940!important;
 background:color-mix(in srgb,var(--accent,#087b59) 11%,var(--card,#fff))!important;
 border:1px solid color-mix(in srgb,var(--accent,#087b59) 18%,var(--border,#dce8e4))!important;
 box-shadow:0 6px 22px rgba(9,65,50,.06)!important;
}
#app .u4sg-page .u4sg-overview{
 margin:4px 0 12px!important;padding:22px 24px!important;min-width:0!important;border-radius:26px!important;
 background: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)))!important;
 border:1px solid color-mix(in srgb,var(--accent,#087b59) 12%,transparent)!important;
 box-shadow:0 14px 35px rgba(21,67,65,.07)!important;
 overflow:hidden!important;position:relative!important;
}
#app .u4sg-overview .u4sg-kicker{
 display:flex;align-items:center;gap:8px;font-size:10px;font-weight:800;letter-spacing:.105em;
 color:var(--u4sg-green,#075940);line-height:1.4;
}
#app .u4sg-overview .u4sg-kicker-star{font-size:16px;letter-spacing:0;line-height:1}
#app .u4sg-overview-main{margin:18px 0 20px!important;position:relative!important;min-width:0!important}
#app .u4sg-overview-main>div:first-child{position:relative;z-index:1;display:grid;gap:6px;min-width:0}
#app .u4sg-overview-label{color:var(--muted,#65717b);font-size:12px;line-height:1.3}
#app .u4sg-big-number{font-size:clamp(25px,3.2vw,39px);line-height:1.1;letter-spacing:-.045em;overflow-wrap:anywhere;color:var(--text,#172138)}
#app .u4sg-overview-main small{font-size:10px;line-height:1.45;max-width:540px;color:var(--muted,#65717b)}
#app .u4sg-overview-decoration{position:absolute!important;right:2%;top:-38px;font-size:150px;line-height:1;opacity:.07;color:var(--u4sg-green,#075940);z-index:0;pointer-events:none}
#app .u4sg-summary-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;min-width:0}
#app .u4sg-summary-grid>div{display:flex;flex-direction:column;justify-content:center;gap:6px;min-height:74px;
 padding:13px 14px;border:1px solid color-mix(in srgb,var(--accent,#087b59) 10%,transparent);
 border-radius:16px;background:color-mix(in srgb,var(--card,#fff) 78%,transparent);min-width:0}
#app .u4sg-summary-grid span{font-size:11px;line-height:1.3;color:var(--muted,#65717b)}
#app .u4sg-summary-grid strong{font-size:clamp(16px,2.1vw,23px);line-height:1.2;color:var(--text,#172138);font-variant-numeric:tabular-nums}
#app .u4sg-overall-progress{display:grid;grid-template-columns:1fr auto;gap:9px 12px;align-items:center;margin-top:16px}
#app .u4sg-overall-progress>span{font-size:11px;color:var(--muted)}
#app .u4sg-overall-progress>b{font-size:11px;color:var(--u4sg-green)}
#app .u4sg-track{height:7px!important;min-height:7px!important;width:100%;border-radius:99px!important;overflow:hidden!important;background:color-mix(in srgb,var(--accent,#087b59) 13%,var(--card,#fff))!important;display:block!important}
#app .u4sg-track i{height:100%;background:linear-gradient(90deg,#188467,#52bea0)!important;border-radius:inherit!important;display:block!important;max-width:100%;transition:width .35s ease}
#app .u4sg-overall-progress>.u4sg-track{grid-column:1/-1}
#app .u4sg-insight{display:flex;align-items:center;gap:13px;padding:14px 16px;margin:0 0 20px;
 border-radius:19px;border:1px solid color-mix(in srgb,var(--accent,#087b59) 10%,transparent);
 background:color-mix(in srgb,var(--accent,#087b59) 5%,var(--card,#fff));min-width:0}
#app .u4sg-insight-icon{width:37px;height:37px;display:flex;align-items:center;justify-content:center;flex:0 0 37px;
 border-radius:12px;background:color-mix(in srgb,#a6d9c3 30%,var(--card,#fff));color:var(--u4sg-green);font-size:18px}
#app .u4sg-insight>div:last-child{min-width:0;display:grid;gap:4px}
#app .u4sg-insight b{font-size:12px;color:var(--u4sg-green)}
#app .u4sg-insight p{margin:0;font-size:11px;line-height:1.5;color:var(--muted)}
#app .u4sg-tools{margin-bottom:10px!important}
#app .u4sg-filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
#app .u4sg-filter{min-height:36px;padding:0 15px;border:1px solid var(--border,#dce8e4);border-radius:999px;
 background:var(--card,#fff);color:var(--text,#172138);font-size:11px;font-weight:750;box-shadow:none}
#app .u4sg-filter.is-active{background:color-mix(in srgb,var(--accent,#087b59) 13%,var(--card,#fff));
 border-color:color-mix(in srgb,var(--accent,#087b59) 24%,var(--border,#dce8e4));color:var(--u4sg-green)}
#app .u4sg-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important;align-items:stretch!important;min-width:0!important}
#app .u4sg-list > .u4sg-card{display:flex!important;flex-direction:column!important;gap:15px!important;min-width:0!important;
 margin:0!important;padding:18px!important;border-radius:22px!important;text-align:left!important;width:100%!important;min-height:192px!important;
 border:1px solid color-mix(in srgb,var(--accent,#087b59) 10%,var(--border,#dce8e4))!important;
 background:color-mix(in srgb,var(--card,#fff) 96%,#b8e6d1)!important;
 box-shadow:0 10px 25px rgba(22,58,55,.05)!important;color:var(--text,#172138)!important;overflow:hidden!important;}
#app .u4sg-list > .u4sg-card[hidden]{display:none!important}
#app .u4sg-card-top{display:flex;align-items:center;gap:11px;min-width:0}
#app .u4sg-card-symbol{display:flex;align-items:center;justify-content:center;flex:0 0 42px;width:42px;height:42px;
 border-radius:14px;background:color-mix(in srgb,var(--accent,#087b59) 8%,var(--card,#fff));font-size:21px}
#app .u4sg-card-title{display:grid;gap:4px;flex:1;min-width:0}
#app .u4sg-card-title strong{font-size:14px;line-height:1.25;white-space:normal;overflow-wrap:anywhere}
#app .u4sg-card-title span{font-size:11px;color:var(--muted);line-height:1.1}
#app .u4sg-type-pill{padding:5px 9px;border-radius:999px;flex:0 0 auto;background:color-mix(in srgb,var(--accent,#087b59) 8%,var(--card,#fff));
 font-weight:800;font-size:9px;letter-spacing:.04em;color:var(--u4sg-green)}
#app .u4sg-type-pill.is-reached{background:color-mix(in srgb,#92d4b4 25%,var(--card,#fff))}
#app .u4sg-card-money{display:grid;gap:5px;margin-top:3px;min-width:0}
#app .u4sg-card-money span{font-size:10px;color:var(--muted)}
#app .u4sg-card-money strong{font-size:clamp(18px,2.5vw,24px);line-height:1.2;letter-spacing:-.02em;overflow-wrap:anywhere}
#app .u4sg-goal-rail{display:grid;gap:10px;margin-top:auto}
#app .u4sg-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;min-width:0}
#app .u4sg-card-foot span{font-size:10px;line-height:1.4;color:var(--muted);overflow-wrap:anywhere}
#app .u4sg-card-foot span:last-child{text-align:right}
#app .u4sg-card-chevron{font-size:23px!important;color:var(--u4sg-green)!important}
#app .u4sg-filter-empty{grid-column:1/-1;padding:22px;text-align:center;border-radius:18px;background:var(--card,#fff);color:var(--muted);font-size:12px}
/* Detail and editor sheets inherit the approved app modal shell; refine only savings content. */
#modal-root .modal.u4sg-detail .u4sg-detail-hero{border-radius:22px!important;
 background:linear-gradient(125deg,color-mix(in srgb,#b8e6d1 20%,var(--card,#fff)),color-mix(in srgb,#f7f0d8 22%,var(--card,#fff)))!important;
 border:1px solid color-mix(in srgb,var(--accent,#087b59) 11%,var(--border,#dce8e4))!important;
 padding:19px!important;overflow:hidden!important}
#modal-root .modal.u4sg-detail .savings-detail-head-v74>div>b{font-size:clamp(20px,3vw,30px)!important;line-height:1.18!important;overflow-wrap:anywhere}
#modal-root .modal.u4sg-detail .savings-health-pill-v74{border-radius:999px!important;font-size:10px!important}
#modal-root .modal.u4sg-detail .savings-health-v74,
#modal-root .modal.u4sg-detail .savings-history-v74{border-radius:21px!important;padding:16px!important;overflow:hidden!important}
#modal-root .modal.u4sg-detail .savings-health-grid-v74{gap:9px!important}
#modal-root .modal.u4sg-detail .savings-health-grid-v74>div{min-height:66px;padding:12px!important;border-radius:14px!important;
 background:color-mix(in srgb,var(--accent,#087b59) 5%,var(--card,#fff))!important}
#modal-root .modal.u4sg-detail .savings-health-grid-v74 b{font-size:12px!important;white-space:normal!important;overflow-wrap:anywhere!important}
#modal-root .modal.u4sg-detail .u4sg-detail-insight{background:color-mix(in srgb,var(--accent,#087b59) 7%,var(--card,#fff))!important;
 border:1px solid color-mix(in srgb,var(--accent,#087b59) 12%,var(--border,#dce8e4))!important;border-radius:17px!important}
#modal-root .modal.u4sg-detail .u4sg-detail-insight b{color:var(--accent,#087b59)!important}
#modal-root .modal.u4sg-detail .u4sg-linked-account{border-radius:14px!important;background:color-mix(in srgb,var(--accent,#087b59) 6%,var(--card,#fff))!important}
#modal-root .modal.u4sg-detail .u4sg-pot-hint{font-size:11px;color:var(--muted);line-height:1.5;margin:-3px 8px 14px}
#modal-root .modal.u4sg-detail .savings-history-row-v74{gap:12px;min-height:54px}
#modal-root .modal.u4sg-detail .savings-actions-v74 button{border-radius:15px!important;min-height:44px!important}
#modal-root .modal.u4sg-editor form .field input,
#modal-root .modal.u4sg-editor form .field select{border-radius:14px!important}
#modal-root .modal.u4sg-editor .seg{border-radius:15px!important}
html[data-theme="dark"] #app .u4sg-page .u4sg-add-button{color:#a7e6c8!important;-webkit-text-fill-color:#a7e6c8!important}
@media(max-width:720px){
 #app .u4sg-list{grid-template-columns:minmax(0,1fr)!important}
 #app .u4sg-page .u4sg-overview{padding:18px!important;border-radius:22px!important}
 #app .u4sg-summary-grid{gap:7px!important}
 #app .u4sg-summary-grid>div{padding:10px!important;border-radius:13px!important;min-height:66px!important}
 #app .u4sg-summary-grid span{font-size:10px}
 #app .u4sg-summary-grid strong{font-size:16px}
 #app .u4sg-page .u4sg-add-button{padding:0 11px!important;font-size:11px!important}
 #modal-root .modal.u4sg-detail .savings-health-grid-v74{grid-template-columns:1fr!important}
}
@media(max-width:360px){
 #app .u4sg-page .u4sg-add-button{max-width:40%!important;padding:0 7px!important;font-size:10px!important}
 #app .u4sg-page .u4sg-big-number{font-size:24px!important}
 #app .u4sg-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important}
 #app .u4sg-summary-grid>div{padding:8px!important}
}
@media(prefers-reduced-motion:reduce){#app .u4sg-page .u4sg-track i{transition:none!important}}

/* Shared header's generic circular-button rule is more specific; exempt the Savings action pill. */
body.rufiyaa-liquid-glass:not(.rufiyaa-admin-mode) #app .finance-full-shell.u4sg-page .finance-full-top.u4sg-header > button.u4sg-add-button{
 width:auto!important;min-width:112px!important;max-width:42%!important;min-height:42px!important;height:42px!important;
 border-radius:999px!important;padding:0 14px!important;display:inline-flex!important;place-items:unset!important;
 align-items:center!important;justify-content:center!important;font-size:12px!important;white-space:nowrap!important;
 color:#075940!important;-webkit-text-fill-color:#075940!important;
 background:color-mix(in srgb,#b8e6d1 33%,var(--card,#fff))!important;
 border:1px solid color-mix(in srgb,#087b59 19%,var(--border,#dce8e4))!important;
 box-shadow:0 7px 20px rgba(9,65,50,.065)!important;
}
#app .finance-full-shell.u4sg-page{--accent:#087b59;--accent-soft:#d9efe3;--u4sg-green:#087b59}
#modal-root .modal.u4sg-detail,#modal-root .modal.u4sg-editor{--accent:#087b59;--accent-soft:#d9efe3}
#app .u4sg-overview-decoration{display:none!important}
@media(max-width:420px){
 body.rufiyaa-liquid-glass:not(.rufiyaa-admin-mode) #app .finance-full-shell.u4sg-page .finance-full-top.u4sg-header > button.u4sg-add-button{
 min-width:102px!important;padding:0 9px!important;font-size:11px!important;
 }
}
html[data-theme="dark"] body.rufiyaa-liquid-glass:not(.rufiyaa-admin-mode) #app .finance-full-shell.u4sg-page .finance-full-top.u4sg-header > button.u4sg-add-button{
 color:#b4ebd2!important;-webkit-text-fill-color:#b4ebd2!important;background:rgba(35,102,84,.34)!important;border-color:rgba(126,205,173,.24)!important;
}
/* Dark theme: retain emerald readability against the premium Savings panels. */
html[data-theme="dark"] #app .finance-full-shell.u4sg-page{--accent:#9ce4c2;--accent-soft:#204438;--u4sg-green:#a8e8ca}
html[data-theme="dark"] #app .u4sg-page .u4sg-overview{
 background:linear-gradient(130deg,#193d36 0%,#213940 66%,#263239 100%)!important;
 border-color:rgba(150,220,190,.17)!important;
}
html[data-theme="dark"] #app .u4sg-page .u4sg-summary-grid>div{
 background:rgba(7,25,26,.42)!important;border-color:rgba(160,221,192,.12)!important;
}
html[data-theme="dark"] #app .u4sg-page .u4sg-list>.u4sg-card{
 background:#172722!important;border-color:rgba(159,222,190,.13)!important;
}
html[data-theme="dark"] #app .u4sg-page .u4sg-insight{
 background:#162d28!important;border-color:rgba(159,222,190,.14)!important;
}
html[data-theme="dark"] #app .u4sg-page .u4sg-card-symbol{background:#244239!important}
html[data-theme="dark"] #app .u4sg-page .u4sg-type-pill{background:#244339!important}
html[data-theme="dark"] #app .u4sg-page .u4sg-type-pill.is-reached{background:#24543d!important}
#app .u4sg-page .u4sg-tools .savings-search-v74 input{
 border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;
}