بطاقة الملف الشخصي للمستخدم User Card

<!-- Qahera UI Kit — User Profile Card Pattern (Native HTML) -->
<div class="qhr-card qhr-user-card" style="max-width: 380px; margin: 0 auto; padding: 28px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; border-radius: var(--qhr-radius-2xl, 20px); position: relative; overflow: hidden;" role="region" aria-label="بطاقة الملف الشخصي للمستخدم">

  <!-- Header Accent Glow -->
  <div style="position: absolute; inset-block-start: 0; inset-inline: 0; height: 70px; background: linear-gradient(180deg, rgba(212,175,55,0.15) 0%, transparent 100%);"></div>

  <!-- Avatar Frame -->
  <div style="position: relative; margin-block-end: 16px;">
    <div class="qhr-avatar qhr-avatar--xl" style="width: 76px; height: 76px; border-radius: 50%; background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); border: 2px solid var(--qhr-color-primary-500, #d4af37); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,0.3);">
      <svg class="qhr-icon" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" style="color: var(--qhr-color-primary-500, #d4af37);">
        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
        <circle cx="12" cy="7" r="4"></circle>
      </svg>
    </div>
    <span style="position: absolute; inset-block-end: 2px; inset-inline-end: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--qhr-color-success-500, #10b981); border: 2px solid var(--qhr-surface, #0d121f);" title="متصل الآن"></span>
  </div>

  <!-- User Identity -->
  <h3 style="margin: 0 0 4px 0; font-family: var(--qhr-font-heading, sans-serif); font-size: 1.15rem; font-weight: 800; color: var(--qhr-text-primary, #f8fafc);">م. أحمد عبد الرحمن</h3>
  <div style="display: flex; align-items: center; gap: 6px; margin-block-end: 14px;">
    <span class="qhr-badge qhr-badge--primary qhr-badge--sm" style="font-weight: 700;">كبير المعماريين</span>
    <span style="font-size: 12px; color: var(--qhr-text-muted, #64748b);">· القاهرة</span>
  </div>

  <p style="margin: 0 0 20px 0; font-size: 13px; color: var(--qhr-text-secondary, #94a3b8); line-height: 1.6;">
    متخصص في هندسة أنظمة التصميم الشاملة، تطوير الويب فائق السرعة، ومواءمة الواجهات ثنائية الاتجاه RTL/LTR.
  </p>

  <!-- Metrics Row -->
  <div style="display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; padding-block: 12px; border-block: 1px solid var(--qhr-border, rgba(255,255,255,0.08)); margin-block-end: 20px;">
    <div>
      <div style="font-family: var(--qhr-font-heading, sans-serif); font-weight: 800; font-size: 16px; color: var(--qhr-text-primary, #f8fafc);">142</div>
      <div style="font-size: 11px; color: var(--qhr-text-muted, #64748b);">مساهمة</div>
    </div>
    <div style="border-inline: 1px solid var(--qhr-border, rgba(255,255,255,0.08));">
      <div style="font-family: var(--qhr-font-heading, sans-serif); font-weight: 800; font-size: 16px; color: var(--qhr-color-primary-500, #d4af37);">24</div>
      <div style="font-size: 11px; color: var(--qhr-text-muted, #64748b);">مشروعاً</div>
    </div>
    <div>
      <div style="font-family: var(--qhr-font-heading, sans-serif); font-weight: 800; font-size: 16px; color: var(--qhr-text-primary, #f8fafc);">4.9</div>
      <div style="font-size: 11px; color: var(--qhr-text-muted, #64748b);">تقييم</div>
    </div>
  </div>

  <!-- Action Buttons -->
  <div style="display: flex; gap: 8px; width: 100%;">
    <button type="button" class="qhr-btn qhr-btn--secondary qhr-btn--md" style="flex: 1;">
      <span>الملف الكامل</span>
    </button>
    <button type="button" class="qhr-btn qhr-btn--primary qhr-btn--md" style="flex: 1; font-weight: 700;">
      <span>تواصل الآن</span>
    </button>
  </div>

</div>