.loan-composition-chart{margin:0 0 20px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--panel-soft)}
.loan-composition-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.loan-composition-heading h3{margin:5px 0 0;font-size:16px}
.loan-chart-legend{display:flex;gap:12px;color:var(--muted);font-size:11px;white-space:nowrap}
.loan-chart-legend span::before{content:'';display:inline-block;width:8px;height:8px;margin-left:5px;border-radius:50%;background:currentColor}
.legend-principal{color:var(--accent-strong)}
.legend-interest{color:#e2a52b}
.loan-chart-bars{display:grid;gap:7px}
.loan-chart-row{display:grid;grid-template-columns:62px minmax(0,1fr);align-items:center;gap:9px}
.loan-chart-label{color:var(--muted);font-size:10px;text-align:left;direction:rtl}
.loan-chart-track{display:flex;height:11px;overflow:hidden;border-radius:999px;background:#edf1f7;direction:ltr}
.loan-chart-track svg{display:block;width:100%;height:100%;min-width:0}.loan-chart-track rect{vector-effect:non-scaling-stroke}.loan-chart-track .chart-principal{fill:var(--accent-strong)}.loan-chart-track .chart-interest{fill:#e2a52b}
.chart-principal{background:linear-gradient(90deg,var(--accent-strong),var(--accent))}
.chart-interest{background:#e2a52b}
.loan-chart-note{margin:12px 0 0;color:var(--muted);font-size:10px}
@media(max-width:650px){
    .loan-composition-heading{flex-direction:column;gap:9px}
    .loan-chart-row{grid-template-columns:48px minmax(0,1fr);gap:7px}
    .loan-chart-label{font-size:9px}
}