Currency Exchange Widget

<div class="ws-currency-widget rounded-2xl border p-6 max-w-sm mx-auto"
     style="background: var(--ws-currency-widget-bg); color: var(--ws-currency-widget-text); border-color: var(--ws-currency-widget-border);">

  <h2 class="text-lg font-semibold tracking-tight mb-4"
      style="color: var(--ws-currency-widget-text);">Currency Exchange</h2>

  <div class="space-y-3">
    <!-- From -->
    <div class="rounded-xl border px-4 py-3 flex items-center justify-between gap-3"
         style="border-color: var(--ws-currency-widget-border);">
      <div class="flex flex-col gap-1 flex-1">
        <span class="text-xs font-medium uppercase tracking-wide"
              style="color: var(--ws-currency-widget-text-muted);">From</span>
        <span class="text-2xl font-semibold tabular-nums"
              style="color: var(--ws-currency-widget-text);">1,000.00</span>
      </div>
      <div class="flex items-center gap-2 rounded-lg border px-3 py-1.5 text-sm font-medium"
           style="border-color: var(--ws-currency-widget-border); color: var(--ws-currency-widget-text-soft);">
        <span>🇺🇸</span>
        <span>USD</span>
      </div>
    </div>

    <!-- Swap -->
    <div class="flex justify-center">
      <div class="w-10 h-10 rounded-full border flex items-center justify-center text-lg font-bold"
           style="border-color: var(--ws-currency-widget-border); color: var(--ws-currency-widget-accent);">
        ⇅
      </div>
    </div>

    <!-- To -->
    <div class="rounded-xl border px-4 py-3 flex items-center justify-between gap-3"
         style="border-color: var(--ws-currency-widget-border); background: var(--ws-currency-widget-accent); background: color-mix(in oklch, var(--ws-currency-widget-accent) 8%, transparent);">
      <div class="flex flex-col gap-1 flex-1">
        <span class="text-xs font-medium uppercase tracking-wide"
              style="color: var(--ws-currency-widget-text-muted);">To</span>
        <span class="text-2xl font-semibold tabular-nums"
              style="color: var(--ws-currency-widget-text);">921.45</span>
      </div>
      <div class="flex items-center gap-2 rounded-lg border px-3 py-1.5 text-sm font-medium"
           style="border-color: var(--ws-currency-widget-border); color: var(--ws-currency-widget-text-soft);">
        <span>🇪🇺</span>
        <span>EUR</span>
      </div>
    </div>
  </div>

  <!-- Rate Info -->
  <div class="mt-4 pt-4 border-t flex flex-col gap-1"
       style="border-color: var(--ws-currency-widget-border);">
    <p class="text-sm font-medium"
       style="color: var(--ws-currency-widget-text-soft);">1 USD = 0.9215 EUR</p>
    <p class="text-xs"
       style="color: var(--ws-currency-widget-text-muted);">Last updated: Mar 22, 2026 · 14:32 UTC</p>
  </div>
</div>