.metric-card{--metric-color:var(--color-accent);transition:transform var(--duration-base) var(--ease-out-expo), box-shadow var(--duration-base) var(--ease-out-expo);position:relative;overflow:hidden}.metric-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.metric-card__body{padding:var(--space-5);gap:var(--space-3);flex-direction:column;display:flex}.metric-card--compact .metric-card__body{padding:var(--space-4);gap:var(--space-2)}.metric-card__header{justify-content:space-between;align-items:center;gap:var(--space-2);display:flex}.metric-card__label-wrap{align-items:center;gap:var(--space-2);min-width:0;display:inline-flex}.metric-card__icon{border-radius:var(--radius-sm);background:color-mix(in srgb, var(--metric-color) 12%, transparent);width:24px;height:24px;color:var(--metric-color);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.metric-card__dot{border-radius:var(--radius-full);background:var(--metric-color);width:8px;height:8px;box-shadow:0 0 0 3px color-mix(in srgb, var(--metric-color) 18%, transparent);flex-shrink:0}.metric-card__icon+.metric-card__dot{display:none}.metric-card__label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.04em;font-weight:var(--weight-semibold);color:var(--color-text-secondary);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.metric-card__trend{font-size:var(--text-xs);font-weight:var(--weight-semibold);border-radius:var(--radius-full);font-variant-numeric:tabular-nums;white-space:nowrap;padding:2px 8px}.metric-card__trend--up{color:var(--color-success);background:var(--color-success-bg)}.metric-card__trend--down{color:var(--color-danger,var(--otus-danger));background:var(--color-danger-bg,var(--otus-danger-pale))}.metric-card__trend--flat{color:var(--color-text-muted);background:var(--color-bg-secondary)}.metric-card__value{font-family:var(--font-display);font-size:var(--text-3xl);line-height:1.1;font-weight:var(--weight-bold);color:var(--color-text-heading);font-variant-numeric:tabular-nums}.metric-card--compact .metric-card__value{font-size:var(--text-2xl)}.metric-card__hint{font-size:var(--text-xs);color:var(--color-text-muted)}.metric-card__sparkline{width:100%;height:28px;display:block;overflow:visible}.metric-card__sparkline-line{fill:none;stroke:var(--metric-color);stroke-width:1.5px;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}.metric-card__sparkline-area{fill:color-mix(in srgb, var(--metric-color) 14%, transparent);stroke:none}.metric-card__target{gap:var(--space-1);flex-direction:column;display:flex}.metric-card__target-track{border-radius:var(--radius-full);background:var(--color-bg-tertiary);height:6px;overflow:hidden}.metric-card__target-fill{border-radius:inherit;background:linear-gradient(90deg, var(--metric-color), color-mix(in srgb, var(--metric-color) 65%, var(--otus-gold-bright,var(--metric-color))));height:100%;transition:width var(--duration-slower) var(--ease-out-expo)}.metric-card__target-label{font-size:var(--text-xs);color:var(--color-text-muted);font-variant-numeric:tabular-nums}@media (prefers-reduced-motion:reduce){.metric-card{transition:none}.metric-card:hover{transform:none}.metric-card__target-fill{transition:none}}