Trend Card

<!-- Trend Card -->
<div class="nuda-trend">
  <div class="nuda-trend__head">
    <span class="nuda-trend__title">Revenue</span>
    <span class="nuda-trend__delta">
      <svg viewBox="0 0 12 12" width="10" height="10" fill="none"
           stroke="currentColor" stroke-width="2"
           stroke-linecap="round" stroke-linejoin="round">
        <path d="M2 9 L10 3" />
        <path d="M5 3 L10 3 L10 8" />
      </svg>
      +18.4%
    </span>
  </div>
  <div class="nuda-trend__value">$24,580</div>
  <svg class="nuda-trend__spark" viewBox="0 0 100 24" fill="none" preserveAspectRatio="none">
    <path d="M0 18 L14 14 L28 16 L42 10 L56 12 L70 6 L84 8 L100 4"
          stroke="#e4ff54" stroke-width="1.5"
          stroke-linecap="round" stroke-linejoin="round" />
  </svg>
</div>

/* Trend Card
   KPI tile: title, delta badge, value, drawing sparkline.
   Customize: --trend-color, --trend-bg */

.nuda-trend {
  --trend-color: #e4ff54;
  --trend-bg: rgba(255, 255, 255, 0.03);
  width: 100%;
  max-width: 220px;
  padding: 14px 16px;
  background: var(--trend-bg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: nuda-trend-in 0.8s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.nuda-trend__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nuda-trend__title {
  font: 600 0.625rem ui-sans-serif, system-ui, sans-serif;
  color: #a1a1aa;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.nuda-trend__delta {
  display: flex;
  align-items: center;
  gap: 3px;
  font: 700 0.7rem ui-sans-serif, system-ui, sans-serif;
  color: var(--trend-color);
  background: rgba(228, 255, 84, 0.1);
  padding: 3px 7px;
  border-radius: 6px;
}

.nuda-trend__value {
  font: 700 1.5rem ui-sans-serif, system-ui, sans-serif;
  color: #fafafa;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.nuda-trend__spark { width: 100%; height: 28px; }

.nuda-trend__spark path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: nuda-trend-draw 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
  filter: drop-shadow(0 0 4px rgba(228, 255, 84, 0.4));
}

@keyframes nuda-trend-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes nuda-trend-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .nuda-trend         { animation: none; }
  .nuda-trend__spark path { stroke-dashoffset: 0; animation: none; }
}