.demo-metric{border-radius:8px;align-items:center;gap:12px;display:flex}.demo-metric-icon{background:#fff;border-radius:8px;justify-content:center;align-items:center;width:36px;height:36px;display:flex;box-shadow:0 1px 2px #0000000d}.demo-metric-content{flex-direction:column;gap:2px;display:flex}.demo-metric-value{align-items:center;gap:8px;font-size:20px;font-weight:700;display:flex}.demo-metric-trend{align-items:center;gap:2px;font-size:11px;font-weight:600;display:inline-flex}.demo-metric-trend.up{color:#16a34a}.demo-metric-trend.down{color:#dc2626}.demo-metric-label{color:#6b7280;font-size:11px}