.completion-kpi { min-height:116px; display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); grid-template-rows: auto 1fr; align-items: center; column-gap: 12px; text-align: left; overflow: hidden; }
.completion-kpi .kpi-top { grid-column: 1 / -1; justify-content: center; text-align: center; margin-bottom: 2px; }
.completion-value { min-height: 58px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-right: 1px solid #efd5d5; }
.completion-value > span { color: var(--muted); font-size: 12px; font-weight: 700; }
.completion-value .kpi-value { margin: 3px 0 0; font-size: 28px; line-height: 1.04; white-space: nowrap; }
.completion-meta { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-width: 0; }
.completion-meta .kpi-rate { margin: 0; padding: 0; border: 0; font-size: 19px; font-weight: 850; line-height: 1.12; white-space: nowrap; }
.completion-meta .kpi-foot, .completion-meta .kpi-gap { margin: 0; font-size: 12px; line-height: 1.2; font-weight: 750; white-space: nowrap; }
.completion-meta .kpi-foot { color: #7d5256; }
@media (max-width: 900px) { .completion-kpi { grid-template-columns: 1fr; } .completion-kpi .kpi-top { grid-column: auto; } .completion-value { border-right: 0; border-bottom: 1px solid #efd5d5; padding-bottom: 6px; } .completion-meta { margin-top: 7px; } }