.masraf-dash{--dash-green:#1da990;--dash-blue:#5397e6;line-height:1.5}.masraf-dash .dash-head{border-radius:20px;background:linear-gradient(115deg,#123d45,#1c655d);color:#fff;padding:26px 30px;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.masraf-dash .dash-head h2{color:#fff;font-size:26px;margin:5px 0}.masraf-dash .dash-kicker{font-size:11px;letter-spacing:2px;opacity:.75}.masraf-dash .dash-head p{opacity:.8;margin:0}.masraf-dash .dash-head a{background:#fff;color:#15554f;border:0;border-radius:10px;padding:11px 17px;white-space:nowrap;font-weight:600}.masraf-dash .dash-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:22px}.masraf-dash .dash-panel{border:1px solid rgba(145,160,170,.25);border-radius:16px;padding:22px;background:rgba(145,160,170,.045);box-shadow:0 5px 18px rgba(0,0,0,.025)}.masraf-dash .dash-label{font-size:13px;opacity:.8}.masraf-dash .dash-amount{font-size:clamp(20px,2.1vw,29px);font-weight:650;margin:10px 0 4px;letter-spacing:-.6px;overflow-wrap:anywhere}.masraf-dash .dash-foot{font-size:12px;opacity:.75}.masraf-dash .dash-icon{float:right;color:var(--dash-green);font-size:22px}.masraf-dash .dash-columns{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(260px,1fr);gap:20px;margin-bottom:22px}.masraf-dash h3{font-size:17px;font-weight:600;margin:0 0 5px;color:inherit}.masraf-dash .dash-sub{font-size:12px;opacity:.7;margin-bottom:20px}.masraf-dash .dash-legend{display:flex;gap:18px;font-size:12px;margin:15px 0}.masraf-dash .dash-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;background:var(--dash-green)}.masraf-dash .dash-dot.old{background:var(--dash-blue)}.masraf-dash .dash-chart-scroll{overflow-x:auto}.masraf-dash .dash-chart{display:grid;grid-template-columns:repeat(12,minmax(42px,1fr));gap:9px;min-width:610px}.masraf-dash .dash-bars{height:175px;display:flex;align-items:flex-end;justify-content:center;gap:4px;border-bottom:1px solid rgba(145,160,170,.25)}.masraf-dash .dash-bar{width:13px;background:var(--dash-green);border-radius:4px 4px 0 0;min-height:0}.masraf-dash .dash-bar.old{background:var(--dash-blue);opacity:.7}.masraf-dash .dash-month{text-align:center;font-size:11px;opacity:.7;padding-top:9px}.masraf-dash .dash-category{padding:15px 0;border-bottom:1px solid rgba(145,160,170,.18)}.masraf-dash .dash-category:last-child{border-bottom:0}.masraf-dash .dash-category-top{display:flex;justify-content:space-between;gap:10px;font-size:14px}.masraf-dash .dash-track{height:6px;border-radius:9px;background:rgba(145,160,170,.16);margin:10px 0}.masraf-dash .dash-fill{height:100%;border-radius:9px;background:var(--dash-green)}.masraf-dash .dash-table{width:100%;font-size:13px;margin-top:16px}.masraf-dash .dash-table td,.masraf-dash .dash-table th{padding:12px 8px;border-bottom:1px solid rgba(145,160,170,.18);text-align:left}.masraf-dash .dash-table th{font-size:11px;font-weight:600;opacity:.7;text-transform:uppercase;letter-spacing:.5px}.masraf-dash .dash-table .money{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}.masraf-dash .dash-table-wrap{overflow:auto}.masraf-dash .dash-empty{padding:35px 15px;text-align:center;opacity:.7}.masraf-dash .dash-mobile-summary{font-size:12px;margin-top:18px}.masraf-dash details summary{cursor:pointer;opacity:.8}
@media(max-width:1100px){.masraf-dash .dash-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.masraf-dash .dash-columns{grid-template-columns:1fr}}@media(max-width:540px){.masraf-dash .dash-head{padding:20px;align-items:flex-start;flex-direction:column}.masraf-dash .dash-panel{padding:16px}.masraf-dash .dash-metrics{gap:10px}.masraf-dash .dash-amount{font-size:20px}.masraf-dash .dash-head h2{font-size:23px}}

/* Opaque tinted surfaces keep the text readable over every existing gradient theme. */
.masraf-dash{color:#f5f8fc;--dash-surface:rgba(12,29,45,.9);--dash-muted:#d3dfeb}
.masraf-dash .dash-panel{background:var(--dash-surface);border-color:rgba(227,238,247,.22)}
.masraf-dash .dash-amount,.masraf-dash .dash-panel h3,.masraf-dash .dash-table td{color:#f5f8fc}
.masraf-dash .dash-label,.masraf-dash .dash-foot,.masraf-dash .dash-sub,.masraf-dash .dash-month,.masraf-dash .dash-table th{color:var(--dash-muted);opacity:1}
.masraf-dash .dash-detail{display:inline-flex;align-items:center;gap:5px;border:1px solid rgba(217,239,247,.5);border-radius:8px;padding:7px 12px;color:#fff;background:rgba(255,255,255,.08);text-decoration:none;white-space:nowrap;font-size:12px}
.masraf-dash .dash-detail:hover,.masraf-dash .dash-detail:focus-visible{background:rgba(255,255,255,.19);outline:2px solid #70e2d2;outline-offset:2px}
body.bg-theme7 .masraf-dash,body.bg-theme14 .masraf-dash{--dash-surface:rgba(5,40,35,.92)}
body.bg-theme10 .masraf-dash,body.bg-theme13 .masraf-dash{--dash-surface:rgba(48,24,31,.92)}
body.bg-theme12 .masraf-dash,body.bg-theme15 .masraf-dash{--dash-surface:rgba(30,23,60,.92)}

/* Keep intrinsic chart/table widths inside their cards, including mobile grid tracks. */
.masraf-dash{width:100%;min-width:0;max-width:100%}
.masraf-dash,.masraf-dash *{box-sizing:border-box}
.masraf-dash .dash-metrics,.masraf-dash .dash-columns,.masraf-dash .dash-panel,
.masraf-dash .dash-head>div,.masraf-dash .dash-chart-scroll,.masraf-dash .dash-table-wrap{min-width:0;max-width:100%}
.masraf-dash .dash-chart-scroll,.masraf-dash .dash-table-wrap{width:100%;overscroll-behavior-x:contain}
.masraf-dash .dash-category-top{flex-wrap:wrap;align-items:baseline}
.masraf-dash .dash-category-top>span{min-width:0;overflow-wrap:anywhere}
.masraf-dash .dash-category-top>strong{margin-left:auto;font-variant-numeric:tabular-nums}
.masraf-dash .dash-foot,.masraf-dash h3{overflow-wrap:anywhere}
@media(max-width:1100px){.masraf-dash .dash-columns{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){
    .masraf-dash .dash-chart{min-width:0;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px 10px}
    .masraf-dash .dash-chart>div{min-width:0}
    .masraf-dash .dash-bars{height:115px;gap:4px}
    .masraf-dash .dash-bar{width:clamp(6px,2vw,13px);flex:0 1 13px}
    .masraf-dash .dash-month{font-size:11px;padding-top:6px}
    .masraf-dash .dash-label{font-size:12px}
    .masraf-dash .dash-icon{font-size:18px}
    .masraf-dash .dash-legend{flex-wrap:wrap}
}
@media(max-width:360px){.masraf-dash .dash-metrics{grid-template-columns:minmax(0,1fr)}}