.ranking-scope { font-size: 12px; color: var(--muted); line-height: 1.7; }
.ranking-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.ranking-table-frame { overflow-x: auto; }
.ranking-table caption { text-align: left; padding: 12px 0; font-size: 13px; font-weight: bold; }
.ranking-table .ranking-customer { min-width: 190px; max-width: 260px; text-align: left; white-space: normal; line-height: 1.6; }
.ranking-table td:first-child { text-align: center; }
.ranking-chart { margin: 0; padding: 16px; background: #f5faf8; border: 1px solid var(--line); border-radius: 8px; min-width: 0; }
.ranking-chart figcaption { font-size: 14px; font-weight: bold; }
.ranking-chart-scale { font-size: 11px; color: var(--muted); margin: 8px 0 18px; }
.ranking-bars { list-style: none; padding: 0; margin: 0; display: grid; gap: 15px; }
.ranking-bar-name { display: flex; gap: 8px; align-items: baseline; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.ranking-bar-name:hover, .ranking-customer a:hover { text-decoration: underline; }
.ranking-order { font-size: 11px; color: var(--muted); min-width: 16px; }
.ranking-bar-line { display: grid; grid-template-columns: minmax(45px, 1fr) 140px; gap: 10px; align-items: center; margin-top: 5px; }
.ranking-track { display: block; height: 17px; position: relative; background: #e1ece7; border-radius: 3px; }
.ranking-bar { display: block; position: absolute; top: 0; height: 100%; border-radius: 3px; background: #098673; }
.ranking-bar.is-negative { background: #c74f46; }
.ranking-zero { position: absolute; top: -3px; bottom: -3px; width: 1px; background: #899d94; z-index: 1; }
.ranking-bar-value { font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; }
.ranking-negative { color: #b0352c; }
.ranking-empty { color: var(--muted); font-size: 13px; padding: 30px 0; }
@media (max-width: 1250px) { .ranking-layout { grid-template-columns: minmax(0, 1fr); }.ranking-table .ranking-customer { max-width: none; } }
@media (max-width: 600px) { .ranking-chart { padding: 12px; }.ranking-bar-line { grid-template-columns: minmax(40px, 1fr) 125px; }.ranking-bar-value { font-size: 11px; } }
.finance-filters { flex-wrap: wrap; }