.kpi-card {
  min-height: 164px;
  border-radius: 24px;
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  border: 1px solid rgba(17, 49, 69, 0.06);
  box-shadow: 0 14px 30px rgba(14, 36, 51, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(246, 249, 252, 0.9));

  &.tone-sales {
    background: linear-gradient(180deg, rgba(220, 242, 250, 0.95), rgba(245, 252, 255, 0.92));
  }

  &.tone-expenses {
    background: linear-gradient(180deg, rgba(255, 236, 214, 0.95), rgba(255, 249, 242, 0.92));
  }

  &.tone-net {
    background: linear-gradient(180deg, rgba(229, 236, 255, 0.95), rgba(248, 250, 255, 0.92));
  }

  &.tone-receivables {
    background: linear-gradient(180deg, rgba(225, 247, 236, 0.95), rgba(246, 252, 248, 0.92));
  }
}

.kpi-card__label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: var(--ink-500);
}

.kpi-card__value {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--ink-900);
  line-height: 1.1;
}

.kpi-card__detail,
.kpi-card__trend {
  color: var(--ink-700);
  line-height: 1.45;
}

.kpi-card__trend {
  margin-top: auto;
  font-size: 0.9rem;
  font-weight: 700;
}

.kpi-skeleton {
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(217, 227, 233, 0.9), rgba(241, 245, 248, 0.95), rgba(217, 227, 233, 0.9));
  background-size: 200% 100%;
  animation: skeletonShift 1.3s linear infinite;
}

.kpi-skeleton--sm {
  width: 42%;
  height: 14px;
}

.kpi-skeleton--lg {
  width: 78%;
  height: 34px;
}

.kpi-skeleton--md {
  width: 60%;
  height: 16px;
  margin-top: auto;
}

@keyframes skeletonShift {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}