/* SNS Supplier Web · 柔光渐变指标卡 V1.0 · 2026-10-28
 * 顺序：颜色 → 字体 → 几何 → 投影 → 本文件。默认浅色深字。
 * 装饰渐变独立于四个既有主题线性渐变，不模拟背后内容模糊。
 */
.sns-soft-metric {
  --soft-metric-base: var(--palette-brand-100);
  --soft-metric-core: var(--palette-brand-400);
  --soft-metric-edge: var(--palette-brand-50);
  display: flex;
  flex-direction: column;
  gap: var(--gap-related, 16px);
  min-width: 0;
  min-height: 208px;
  padding: var(--padding-card, 24px);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card, 16px);
  background-color: var(--soft-metric-base);
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / 30%) 0%, rgb(255 255 255 / 8%) 38%, rgb(255 255 255 / 68%) 100%),
    radial-gradient(ellipse at 55% 26%, var(--soft-metric-core) 0%, var(--soft-metric-base) 72%, var(--soft-metric-edge) 100%);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-card, none);
  font: 400 .875rem/1.5714285714 var(--font-family-ui, sans-serif);
  overflow-wrap: anywhere;
}
.sns-soft-metric[data-soft-tone="accent"] {
  --soft-metric-base: var(--palette-accent-100);
  --soft-metric-core: var(--palette-accent-400);
  --soft-metric-edge: var(--palette-accent-50);
}
.sns-soft-metric[data-soft-tone="warm"] {
  --soft-metric-base: var(--palette-amber-100);
  --soft-metric-core: var(--palette-amber-300);
  --soft-metric-edge: var(--palette-amber-50);
}
.sns-soft-metric[data-soft-appearance="inverse"] {
  --soft-metric-base: var(--palette-brand-800);
  --soft-metric-core: var(--palette-brand-700);
  --soft-metric-edge: var(--palette-brand-900);
  background-image:
    radial-gradient(ellipse at 55% 26%, var(--soft-metric-core) 0%, var(--soft-metric-base) 72%, var(--soft-metric-edge) 100%);
  color: var(--color-text-inverse);
}
.sns-soft-metric__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--gap-related, 16px);
}
.sns-soft-metric__label { margin: 0; font-size: .875rem; line-height: 1.5714285714; font-weight: 500; }
.sns-soft-metric__icon {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  height: 32px;
  background: rgb(255 255 255 / 30%);
  border: 1px solid rgb(255 255 255 / 40%);
  border-radius: var(--radius-popover, 8px);
}
.sns-soft-metric__icon svg { width: 16px; height: 16px; }
.sns-soft-metric__body { display: grid; gap: var(--space-1, 4px); margin-top: auto; }
.sns-soft-metric__value { font-size: 2rem; line-height: 1.25; font-weight: 700; font-variant-numeric: tabular-nums; }
.sns-soft-metric__trend { font-size: .875rem; line-height: 1.5714285714; }
.sns-soft-metric__note { margin: 0; font-size: .75rem; line-height: 1.6666666667; }
@media (max-width: 767px) { .sns-soft-metric { padding: var(--space-4, 16px); } }
@media (prefers-reduced-transparency: reduce) {
  .sns-soft-metric, .sns-soft-metric[data-soft-appearance="inverse"] { background: var(--soft-metric-base); }
  .sns-soft-metric__icon { background: transparent; border-color: currentColor; }
}
@media (forced-colors: active) {
  .sns-soft-metric, .sns-soft-metric[data-soft-appearance="inverse"] { color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none; }
  .sns-soft-metric__icon { background: transparent; border-color: CanvasText; }
}
@media print {
  .sns-soft-metric, .sns-soft-metric[data-soft-appearance="inverse"] { color: #101C18; background: #FFFFFF; border-color: #657771; box-shadow: none; }
  .sns-soft-metric__icon { background: transparent; border-color: currentColor; }
}