.client-volume-overview,
.client-volume-table-panel { box-sizing: border-box; }
.client-volume-overview { grid-column: 1 / -1; width: 100%; margin: 0 0 18px; padding: 20px 22px; border: 1px solid rgba(75, 102, 180, .18); border-radius: 18px; background: linear-gradient(135deg, rgba(246, 249, 255, .98), rgba(238, 247, 247, .96)); box-shadow: 0 12px 32px rgba(37, 65, 126, .08); color: #182238; }
.client-volume-table-panel { margin: 18px 0 22px; padding: 18px 20px; border: 1px solid rgba(75, 102, 180, .18); border-radius: 16px; background: rgba(255, 255, 255, .98); box-shadow: 0 10px 26px rgba(37, 65, 126, .07); color: #182238; }
.client-volume-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.client-volume-head .eyebrow { margin: 0 0 5px; color: #5270c8; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.client-volume-head h3 { margin: 0; font-size: 18px; line-height: 1.35; }
.client-volume-head p:not(.eyebrow) { margin: 5px 0 0; color: #72809a; font-size: 12px; }
.client-volume-refresh { flex: 0 0 auto; padding: 8px 14px; border: 1px solid rgba(75, 102, 180, .24); border-radius: 10px; background: #fff; color: #3857ae; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; }
.client-volume-refresh:hover { border-color: rgba(75, 102, 180, .5); background: #f5f8ff; }
.client-volume-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.client-volume-kpis article { min-width: 0; padding: 15px 16px; border: 1px solid rgba(75, 102, 180, .13); border-radius: 13px; background: rgba(255, 255, 255, .82); }
.client-volume-kpis span, .client-volume-kpis small { display: block; color: #7b879d; font-size: 12px; }
.client-volume-kpis strong { display: block; margin: 5px 0 3px; color: #1f2e52; font-size: 26px; line-height: 1.1; }
.client-volume-kpis .is-performance { border-color: rgba(26, 154, 140, .25); background: linear-gradient(135deg, rgba(235, 251, 247, .98), rgba(240, 247, 255, .9)); }
.client-volume-kpis .is-performance strong { color: #087f72; }
.client-volume-table-wrap { max-height: 430px; overflow: auto; border: 1px solid rgba(75, 102, 180, .13); border-radius: 12px; }
.client-volume-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.client-volume-table th, .client-volume-table td { padding: 11px 13px; border-bottom: 1px solid #edf0f7; text-align: left; white-space: nowrap; }
.client-volume-table th { position: sticky; top: 0; z-index: 1; background: #f5f8ff; color: #52617d; font-size: 12px; }
.client-volume-table th:nth-child(n+2), .client-volume-table td:nth-child(n+2) { text-align: right; }
.client-volume-table td strong { color: #087f72; }
.client-volume-table tbody tr:hover { background: #fbfcff; }
.client-volume-empty { color: #8a95a8; text-align: center !important; }
@media (max-width: 860px) { .client-volume-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .client-volume-head { flex-direction: column; } }
@media (max-width: 520px) { .client-volume-overview, .client-volume-table-panel { padding: 15px; } .client-volume-kpis { grid-template-columns: 1fr 1fr; } .client-volume-kpis strong { font-size: 22px; } }