.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5); }
.card--flat { background: var(--surface-2); border-color: transparent; }

.metric { display: flex; flex-direction: column; gap: var(--sp-1); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-4); min-width: 0; }
.metric__label { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-xs); font-weight: var(--w-medium); color: var(--text-3); }
.metric__value { font-size: var(--text-metric); font-weight: var(--w-semibold); line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
.metric__value small { font-size: var(--text-sm); font-weight: var(--w-regular); color: var(--text-3); margin-left: var(--sp-0-5); }
.metric__hint { font-size: var(--text-xs); color: var(--text-3); }
.metric__hint.is-warning { color: var(--warning-text); }