Profile Widget

<div
  class="ws-profile-widget rounded-2xl border p-6 max-w-xs mx-auto text-center"
  style="
    --ws-profile-widget-bg: oklch(0.98 0.005 75);
    --ws-profile-widget-text: oklch(0.2 0.02 75);
    --ws-profile-widget-text-soft: oklch(0.35 0.015 75);
    --ws-profile-widget-text-muted: oklch(0.55 0.01 75);
    --ws-profile-widget-border: oklch(0.88 0.015 75);
    --ws-profile-widget-accent: oklch(0.55 0.12 75);
    --ws-profile-widget-accent-soft: oklch(0.92 0.04 75);
    --ws-profile-widget-success: oklch(0.65 0.18 145);
    background: var(--ws-profile-widget-bg);
    color: var(--ws-profile-widget-text);
    border-color: var(--ws-profile-widget-border);
  "
>
  <!-- Avatar -->
  <div class="relative mx-auto mb-4 size-16">
    <div
      class="flex size-16 items-center justify-center rounded-full text-xl font-semibold text-white"
      style="background: var(--ws-profile-widget-accent);"
      aria-hidden="true"
    >
      S
    </div>
    <span
      class="absolute bottom-0 right-0 size-3.5 rounded-full border-2"
      style="background: var(--ws-profile-widget-success); border-color: var(--ws-profile-widget-bg);"
      aria-label="Online"
    ></span>
  </div>

  <!-- Name & Role -->
  <h3 class="text-lg font-semibold" style="color: var(--ws-profile-widget-text);">Sarah Chen</h3>
  <p class="text-sm mt-0.5" style="color: var(--ws-profile-widget-text-muted);">Product Designer</p>

  <!-- Stats -->
  <div
    class="mt-5 grid grid-cols-3 gap-2 rounded-xl border py-3"
    style="border-color: var(--ws-profile-widget-border);"
  >
    <div>
      <p class="text-lg font-semibold" style="color: var(--ws-profile-widget-text);">142</p>
      <p class="text-xs" style="color: var(--ws-profile-widget-text-muted);">Projects</p>
    </div>
    <div class="border-x" style="border-color: var(--ws-profile-widget-border);">
      <p class="text-lg font-semibold" style="color: var(--ws-profile-widget-text);">28</p>
      <p class="text-xs" style="color: var(--ws-profile-widget-text-muted);">Teams</p>
    </div>
    <div>
      <p class="text-lg font-semibold" style="color: var(--ws-profile-widget-text);">4.9</p>
      <p class="text-xs" style="color: var(--ws-profile-widget-text-muted);">Rating</p>
    </div>
  </div>

  <!-- Actions -->
  <div class="mt-5 flex gap-3">
    <button
      class="flex-1 rounded-lg px-4 py-2 text-sm font-medium text-white transition-colors"
      style="background: var(--ws-profile-widget-accent);"
      type="button"
    >
      Message
    </button>
    <button
      class="flex-1 rounded-lg border px-4 py-2 text-sm font-medium transition-colors"
      style="border-color: var(--ws-profile-widget-border); color: var(--ws-profile-widget-text-soft);"
      type="button"
    >
      Follow
    </button>
  </div>
</div>