diff --git a/app/teknav-profile.jsx b/app/teknav-profile.jsx
new file mode 100644
index 0000000..789a0ae
--- /dev/null
+++ b/app/teknav-profile.jsx
@@ -0,0 +1,1015 @@
+// User profile page — /profile/@username
+// Terracotta / warm-orange / unique-green palette; no teal.
+
+import { useState, useEffect, useRef } from 'react';
+import { useNav, useAuth, useToast, EmptyState, pillBtn, inputStyle } from './teknav-ui.jsx';
+import { api } from './src/lib/api.js';
+import { engagementApi, pushApi, notificationPreferencesApi } from './src/lib/engagement-api.js';
+import { TeknavData } from './teknav-data.js';
+import { iconNode } from './src/lib/icon.jsx';
+import eyeIcon from './src/assets/icons/eye.svg';
+import gradCapIcon from './src/assets/icons/graduation-cap.svg';
+import scrollIcon from './src/assets/icons/scroll.svg';
+import botIcon from './src/assets/icons/bot.svg';
+import chartIcon from './src/assets/icons/chart-column.svg';
+import lockIcon from './src/assets/icons/lock.svg';
+import laptopIcon from './src/assets/icons/laptop.svg';
+import flameIcon from './src/assets/icons/flame.svg';
+import zapIcon from './src/assets/icons/zap.svg';
+import libraryIcon from './src/assets/icons/library.svg';
+import sproutIcon from './src/assets/icons/sprout.svg';
+import medalIcon from './src/assets/icons/medal.svg';
+
+// ── Theme ────────────────────────────────────────────────────────────────────
+const P = {
+  terracotta:  '#C45C3D',
+  orange:      '#E07A3A',
+  green:       '#3A7D5E',
+  greenLight:  '#E8F4EF',
+  ink:         '#263238',
+  muted:       '#5F6B6D',
+  cream:       '#FAF7F0',
+  panel:       '#F4EFE6',
+  line:        '#E4DDD2',
+  white:       '#fff',
+};
+
+const ROLE_LABELS = {
+  admin:    { label: 'ادمین',    bg: 'rgba(196,92,61,0.10)', color: '#C45C3D', border: 'rgba(196,92,61,0.22)' },
+  editor:   { label: 'سردبیر',   bg: 'rgba(58,125,94,0.10)', color: '#2F8F6B', border: 'rgba(58,125,94,0.22)' },
+  writer:   { label: 'نویسنده',  bg: 'rgba(212,154,42,0.10)', color: '#A87A10', border: 'rgba(212,154,42,0.22)' },
+  reviewer: { label: 'بازبین',   bg: 'rgba(100,120,200,0.10)', color: '#5566AA', border: 'rgba(100,120,200,0.22)' },
+  reader:   { label: 'خواننده',  bg: 'rgba(95,107,109,0.08)', color: '#5F6B6D', border: 'rgba(95,107,109,0.18)' },
+};
+
+function RolePill({ role }) {
+  const r = ROLE_LABELS[role] ?? ROLE_LABELS.reader;
+  return (
+    <span style={{
+      display: 'inline-block', padding: '3px 12px', borderRadius: 20,
+      fontSize: 11, fontWeight: 700, letterSpacing: 0.4,
+      background: r.bg, color: r.color, border: `1px solid ${r.border}`,
+    }}>{r.label}</span>
+  );
+}
+
+function findStaticAuthor(slug) {
+  return TeknavData.authors.find(author => author.username === slug || author.slug === slug);
+}
+
+function getPublishedAuthorArticles(author) {
+  return TeknavData.articles
+    .filter(article => (
+      (article.authorId === author.id || article.authorName === author.name || article.authorUsername === author.username)
+      && article.status === 'منتشرشده'
+    ))
+    .map(article => ({
+      id: article.id,
+      slug: article.slug,
+      title: article.title,
+      summary: article.summary,
+      publishedAt: article.dateEn ? `${article.dateEn}T09:00:00+03:30` : null,
+      views: article.views ?? 0,
+      reactions: article.reactions ?? 0,
+    }));
+}
+
+function buildStaticAuthorProfile(author) {
+  if (!author) return null;
+  const authorArticles = getPublishedAuthorArticles(author);
+  return {
+    id: author.id,
+    username: author.username,
+    name: author.name,
+    bio: author.bio,
+    avatarUrl: author.avatarUrl ?? null,
+    role: 'writer',
+    createdAt: author.joinedDate ? new Date(author.joinedDate).toISOString() : null,
+    author: {
+      articles: authorArticles,
+      articleCount: authorArticles.length,
+      verifiedExpert: author.verifiedExpert ?? false,
+      verificationNote: author.verificationNote ?? author.specialty,
+    },
+    _static: true,
+    expertise: author.expertise ?? [],
+    education: author.education ?? null,
+    alumniOf: author.alumniOf ?? null,
+    credential: author.credential ?? null,
+    social: author.social ?? {},
+    specialty: author.specialty,
+  };
+}
+
+function mergeProfileWithAuthor(profileData, author) {
+  if (!profileData || !author) return profileData;
+  return {
+    ...profileData,
+    expertise: profileData.expertise || author.expertise || [],
+    education: profileData.education || author.education || null,
+    alumniOf: profileData.alumniOf || author.alumniOf || null,
+    credential: profileData.credential || author.credential || null,
+    avatarUrl: profileData.avatarUrl || author.avatarUrl || null,
+    social: { ...author.social, ...profileData.social },
+    specialty: profileData.specialty || author.specialty,
+    author: {
+      ...profileData.author,
+      verifiedExpert: profileData.author?.verifiedExpert ?? author.verifiedExpert ?? false,
+      verificationNote: profileData.author?.verificationNote ?? author.verificationNote ?? author.specialty,
+    }
+  };
+}
+
+// ── Avatar with upload overlay ───────────────────────────────────────────────
+function AvatarUpload({ user, editable, onUploaded }) {
+  const inputRef = useRef(null);
+  const [busy, setBusy] = useState(false);
+  const [webp, setWebp] = useState(true);
+  const [preview, setPreview] = useState(user.avatarUrl ?? null);
+
+  useEffect(() => {
+    setPreview(user.avatarUrl ?? null);
+  }, [user.avatarUrl]);
+
+  const handleFile = async (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    if (file.size > 5 * 1024 * 1024) { alert('حجم تصویر نباید بیشتر از ۵ مگابایت باشد.'); return; }
+    setBusy(true);
+    try {
+      const dataUrl = await new Promise((res, rej) => {
+        const fr = new FileReader();
+        fr.onload = () => res(fr.result);
+        fr.onerror = rej;
+        fr.readAsDataURL(file);
+      });
+      const base64 = dataUrl.split(',')[1];
+      const data = await api.post('/api/auth/avatar', { file: base64, mimeType: file.type, webp });
+      setPreview(data.url);
+      onUploaded?.(data.url);
+    } catch {
+      alert('آپلود آواتار ناموفق بود. دوباره تلاش کنید.');
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const initials = user.name ? user.name.slice(0, 2) : '؟';
+  const avatarStyle = {
+    width: 110, height: 110, borderRadius: '50%',
+    border: `3px solid rgba(196,92,61,0.35)`,
+    boxShadow: '0 4px 20px rgba(196,92,61,0.15)',
+    objectFit: 'cover', display: 'block',
+  };
+
+  return (
+    <div style={{ position: 'relative', width: 110 }}>
+      {preview
+        ? <img src={preview} alt={user.name} width="110" height="110" loading="eager" decoding="async" fetchPriority="high" style={avatarStyle} />
+        : (
+          <div style={{ ...avatarStyle, background: P.terracotta, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 36, fontWeight: 900, color: '#fff' }}>
+            {initials}
+          </div>
+        )
+      }
+      {editable && (
+        <>
+          <button
+            disabled={busy}
+            onClick={() => inputRef.current?.click()}
+            style={{
+              position: 'absolute', bottom: 0, left: 0, right: 0,
+              background: 'rgba(0,0,0,0.55)', color: '#fff', border: 'none', borderRadius: '0 0 55px 55px',
+              fontSize: 11, padding: '6px 0', cursor: 'pointer',
+            }}
+          >{busy ? '…' : 'تغییر'}</button>
+          <input ref={inputRef} type="file" accept="image/*" style={{ display: 'none' }} onChange={handleFile} />
+          <label style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 8, fontSize: 11, color: P.muted, cursor: 'pointer', whiteSpace: 'nowrap' }}>
+            <input type="checkbox" checked={webp} onChange={e => setWebp(e.target.checked)} style={{ accentColor: P.terracotta }} />
+            ذخیره WebP
+          </label>
+        </>
+      )}
+    </div>
+  );
+}
+
+// ── Inline edit field ────────────────────────────────────────────────────────
+function EditField({ label, value, onChange, multiline, placeholder, maxLength }) {
+  const style = {
+    ...inputStyle,
+    fontSize: 14, padding: '8px 12px', marginTop: 4, resize: multiline ? 'vertical' : 'none',
+    minHeight: multiline ? 80 : undefined,
+  };
+  return (
+    <label style={{ display: 'block', marginBottom: 14 }}>
+      <div style={{ fontSize: 12, fontWeight: 600, color: P.muted, marginBottom: 4 }}>{label}</div>
+      {multiline
+        ? <textarea value={value} onChange={e => onChange(e.target.value)} style={style} dir="rtl" placeholder={placeholder} maxLength={maxLength} />
+        : <input type="text" value={value} onChange={e => onChange(e.target.value)} style={style} dir="auto" placeholder={placeholder} maxLength={maxLength} />
+      }
+    </label>
+  );
+}
+
+// ── Article mini-card ────────────────────────────────────────────────────────
+function ArticleMiniCard({ article, onClick }) {
+  const date = article.publishedAt ? new Date(article.publishedAt).toLocaleDateString('fa-IR') : '';
+  return (
+    <div
+      onClick={onClick}
+      style={{
+        background: P.white, border: `1px solid ${P.line}`, borderRadius: 12, padding: '16px 20px',
+        cursor: 'pointer', direction: 'rtl', transition: 'all 0.2s',
+        borderRight: `4px solid ${P.terracotta}`,
+      }}
+      onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 8px 24px rgba(0,0,0,0.07)'; }}
+      onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = ''; }}
+    >
+      <div style={{ fontSize: 15, fontWeight: 700, color: P.ink, marginBottom: 6, lineHeight: 1.5 }}>{article.title}</div>
+      {article.summary && <div style={{ fontSize: 13, color: P.muted, lineHeight: 1.7, marginBottom: 10 }}>{article.summary.slice(0, 140)}{article.summary.length > 140 ? '…' : ''}</div>}
+      <div style={{ display: 'flex', gap: 14, fontSize: 11, color: P.muted }}>
+        {date && <span>{date}</span>}
+        <span><span className="tek-icon" style={{ ['--i']: `url("${eyeIcon}")` }} aria-hidden="true" /> {article.views ?? 0}</span>
+        <span>♥ {article.reactions ?? 0}</span>
+      </div>
+    </div>
+  );
+}
+
+// ── Profile settings modal ───────────────────────────────────────────────────
+function ProfileSettingsModal({ user, account, onClose, onSaved }) {
+  const toast = useToast();
+  const { refreshMe } = useAuth();
+  const [form, setForm] = useState({ name: user.name ?? '', username: user.username ?? '', bio: user.bio ?? '' });
+  const [passwordForm, setPasswordForm] = useState({ currentPassword: '', password: '', confirm: '' });
+  const [phone, setPhone] = useState(account?.phone ?? '');
+  const [otp, setOtp] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [verifyBusy, setVerifyBusy] = useState(false);
+  const [error, setError] = useState('');
+  const [pushEnabled, setPushEnabled] = useState(false);
+  const [pushBlocked, setPushBlocked] = useState(false);
+  const [pushBusy, setPushBusy] = useState(false);
+  const canEditUsername = user?.role !== 'reader';
+
+  useEffect(() => {
+    if (!('PushManager' in window) || !('serviceWorker' in navigator)) return;
+    if (typeof Notification !== 'undefined' && Notification.permission === 'denied') {
+      setPushBlocked(true);
+      return;
+    }
+    pushApi.isSubscribed().then(setPushEnabled).catch(() => {});
+  }, []);
+  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
+  const setPasswordField = (k, v) => setPasswordForm(f => ({ ...f, [k]: v }));
+
+  const save = async () => {
+    setBusy(true); setError('');
+    try {
+      const username = form.username.trim().toLowerCase().replace(/^@/, '');
+      if (canEditUsername && !/^[a-z0-9_][a-z0-9_.]{1,28}[a-z0-9_]$/.test(username)) {
+        setError('نام کاربری باید ۳ تا ۳۰ کاراکتر لاتین، عدد، نقطه یا زیرخط باشد.');
+        return;
+      }
+      if (passwordForm.password || passwordForm.confirm || passwordForm.currentPassword) {
+        if (passwordForm.password.length < 8) {
+          setError('رمز عبور جدید باید حداقل ۸ کاراکتر باشد.');
+          return;
+        }
+        if (passwordForm.password !== passwordForm.confirm) {
+          setError('تکرار رمز عبور جدید تطابق ندارد.');
+          return;
+        }
+      }
+      const data = await api.put('/api/auth/profile', {
+        name: form.name || undefined,
+        ...(canEditUsername ? { username } : {}),
+        bio: form.bio || undefined,
+        ...(passwordForm.password ? { currentPassword: passwordForm.currentPassword, password: passwordForm.password } : {}),
+      });
+      onSaved?.(data.user);
+      await refreshMe?.();
+      onClose();
+    } catch (e) {
+      const code = e.body?.error;
+      setError(code === 'username_taken'
+        ? 'این نام کاربری قبلاً گرفته شده است.'
+        : code === 'current_password_required'
+        ? 'برای تغییر رمز عبور، رمز فعلی را وارد کنید.'
+        : code === 'current_password_invalid'
+        ? 'رمز فعلی درست نیست.'
+        : code === 'username_change_forbidden'
+        ? 'تغییر نام کاربری برای این حساب مجاز نیست.'
+        : 'ذخیره ناموفق بود.');
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const requestEmailVerification = async () => {
+    setVerifyBusy(true);
+    try {
+      const res = await api.post('/api/auth/email/verify/request', {});
+      toast(res?.alreadyVerified ? 'ایمیل قبلاً تایید شده است' : 'لینک تایید ایمیل ارسال شد');
+      await refreshMe?.();
+    } catch {
+      toast('ارسال لینک تایید ایمیل ناموفق بود', 'error');
+    } finally {
+      setVerifyBusy(false);
+    }
+  };
+
+  const sendOtp = async () => {
+    setVerifyBusy(true);
+    try {
+      await api.post('/api/auth/otp/send', { phone });
+      toast('کد تایید پیامک شد');
+    } catch (e) {
+      toast(e.body?.error === 'sms_not_configured' ? 'درگاه پیامک روی سرور تنظیم نشده است' : 'ارسال کد تایید ناموفق بود', 'error');
+    } finally {
+      setVerifyBusy(false);
+    }
+  };
+
+  const verifyOtp = async () => {
+    setVerifyBusy(true);
+    try {
+      await api.post('/api/auth/otp/verify', { phone, code: otp });
+      await refreshMe?.();
+      toast('شماره موبایل تایید شد');
+    } catch {
+      toast('کد تایید معتبر نیست', 'error');
+    } finally {
+      setVerifyBusy(false);
+    }
+  };
+
+  const toggleTwoFactor = async () => {
+    setVerifyBusy(true);
+    try {
+      const next = !account?.twoFactorEnabled;
+      const res = await api.put('/api/auth/2fa', { enabled: next });
+      await refreshMe?.();
+      onSaved?.(res.user);
+      toast(next ? 'ورود دومرحله‌ای فعال شد' : 'ورود دومرحله‌ای غیرفعال شد');
+    } catch (e) {
+      toast(e.body?.error === 'phone_required' ? 'برای فعال‌سازی، ابتدا موبایل را تایید کنید' : 'تغییر ورود دومرحله‌ای ناموفق بود', 'error');
+    } finally {
+      setVerifyBusy(false);
+    }
+  };
+
+  return (
+    <div style={{ position: 'fixed', inset: 0, zIndex: 600, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      <div onClick={onClose} style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.5)' }} />
+      <div style={{
+        position: 'relative', background: P.cream, borderRadius: 16, padding: 32,
+        maxWidth: 440, width: '90%', maxHeight: '88vh', overflowY: 'auto', direction: 'rtl', boxShadow: '0 24px 64px rgba(0,0,0,0.22)',
+      }}>
+        <h3 style={{ margin: '0 0 24px', color: P.ink, fontSize: 18 }}>ویرایش پروفایل</h3>
+        <EditField label="نام نمایشی" value={form.name} onChange={v => set('name', v)} placeholder="نام کامل شما" maxLength={80} />
+        {canEditUsername ? (
+          <EditField label="نام کاربری (@ آدرس)" value={form.username} onChange={v => set('username', v.toLowerCase())} placeholder="coaxys" maxLength={30} />
+        ) : (
+          <div style={{ fontSize: 12, color: P.muted, marginBottom: 14, background: P.panel, border: `1px solid ${P.line}`, borderRadius: 10, padding: '8px 10px' }}>
+            نام کاربری برای کاربران عادی قابل تغییر نیست.
+          </div>
+        )}
+        <EditField label="بیوگرافی" value={form.bio} onChange={v => set('bio', v)} multiline placeholder="چند جمله درباره خودتان…" maxLength={280} />
+        <div style={{ background: P.panel, border: `1px solid ${P.line}`, borderRadius: 12, padding: 14, marginBottom: 14 }}>
+          <div style={{ fontSize: 13, fontWeight: 800, color: P.ink, marginBottom: 10 }}>تغییر رمز عبور</div>
+          <div style={{ display: 'grid', gap: 10 }}>
+            <input value={passwordForm.currentPassword} onChange={e => setPasswordField('currentPassword', e.target.value)} type="password" placeholder="رمز فعلی" style={{ ...inputStyle, direction: 'ltr', textAlign: 'left' }} autoComplete="current-password" />
+            <input value={passwordForm.password} onChange={e => setPasswordField('password', e.target.value)} type="password" placeholder="رمز جدید" style={{ ...inputStyle, direction: 'ltr', textAlign: 'left' }} autoComplete="new-password" />
+            <input value={passwordForm.confirm} onChange={e => setPasswordField('confirm', e.target.value)} type="password" placeholder="تکرار رمز جدید" style={{ ...inputStyle, direction: 'ltr', textAlign: 'left' }} autoComplete="new-password" />
+          </div>
+        </div>
+        <div style={{ background: P.panel, border: `1px solid ${P.line}`, borderRadius: 12, padding: 14, marginBottom: 14 }}>
+          <div style={{ fontSize: 13, fontWeight: 800, color: P.ink, marginBottom: 10 }}>تایید حساب</div>
+          <div style={{ display: 'grid', gap: 10 }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
+              <span style={{ fontSize: 12, color: P.muted }}>ایمیل: {account?.emailVerified ? 'تایید شده' : 'تایید نشده'}</span>
+              {!account?.emailVerified && <button onClick={requestEmailVerification} disabled={verifyBusy} style={{ ...pillBtn, background: '#fff', color: P.terracotta, border: `1px solid ${P.line}`, fontSize: 12 }}>ارسال لینک تایید</button>}
+            </div>
+            <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 8 }}>
+              <input value={phone} onChange={e => setPhone(e.target.value)} placeholder="شماره موبایل" style={inputStyle} dir="ltr" />
+              <button onClick={sendOtp} disabled={verifyBusy || !phone} style={{ ...pillBtn, background: '#fff', color: P.green, border: `1px solid ${P.line}`, fontSize: 12 }}>ارسال کد</button>
+            </div>
+            <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 8 }}>
+              <input value={otp} onChange={e => setOtp(e.target.value)} placeholder="کد تایید" style={inputStyle} dir="ltr" />
+              <button onClick={verifyOtp} disabled={verifyBusy || !phone || !otp} style={{ ...pillBtn, background: P.green, color: '#fff', fontSize: 12 }}>تایید موبایل</button>
+            </div>
+            <div style={{ fontSize: 11, color: P.muted }}>وضعیت موبایل: {account?.phoneVerified ? 'تایید شده' : 'تایید نشده'}</div>
+            <div style={{ display: 'flex', justifyContent: 'space-between', gap: 10, alignItems: 'center', flexWrap: 'wrap', borderTop: `1px solid ${P.line}`, paddingTop: 10 }}>
+              <span style={{ fontSize: 12, color: P.muted }}>ورود دومرحله‌ای: {account?.twoFactorEnabled ? 'فعال' : 'غیرفعال'}</span>
+              <button onClick={toggleTwoFactor} disabled={verifyBusy || (!account?.twoFactorEnabled && !account?.phoneVerified)} style={{ ...pillBtn, background: account?.twoFactorEnabled ? '#fff' : P.green, color: account?.twoFactorEnabled ? P.terracotta : '#fff', border: `1px solid ${P.line}`, fontSize: 12 }}>
+                {account?.twoFactorEnabled ? 'غیرفعال‌سازی' : 'فعال‌سازی SMS'}
+              </button>
+            </div>
+          </div>
+        </div>
+        {'PushManager' in window && (
+          <div style={{ background: P.panel, border: `1px solid ${P.line}`, borderRadius: 12, padding: 14, marginBottom: 14 }}>
+            <div style={{ fontSize: 13, fontWeight: 800, color: P.ink, marginBottom: 10 }}>اعلان‌های مرورگر</div>
+            {pushBlocked ? (
+              <div style={{ fontSize: 12, color: P.muted }}>مرورگر شما اجازه اعلان را مسدود کرده است. برای فعال‌سازی، از تنظیمات مرورگر اجازه دهید.</div>
+            ) : (
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10 }}>
+                <span style={{ fontSize: 12, color: P.muted }}>
+                  اعلان‌های مقالات جدید و نظرات: {pushEnabled ? 'فعال' : 'غیرفعال'}
+                </span>
+                <button
+                  disabled={pushBusy}
+                  onClick={async () => {
+                    setPushBusy(true);
+                    try {
+                      if (pushEnabled) {
+                        await pushApi.unsubscribe();
+                        setPushEnabled(false);
+                        toast('اعلان‌های مرورگر غیرفعال شد');
+                      } else {
+                        const perm = typeof Notification !== 'undefined' ? await Notification.requestPermission() : 'denied';
+                        if (perm === 'granted') {
+                          await pushApi.subscribe();
+                          setPushEnabled(true);
+                          toast('اعلان‌های مرورگر فعال شد');
+                        } else {
+                          setPushBlocked(true);
+                        }
+                      }
+                    } catch { toast('عملیات ناموفق بود', 'error'); }
+                    finally { setPushBusy(false); }
+                  }}
+                  style={{ ...pillBtn, background: pushEnabled ? '#fff' : P.green, color: pushEnabled ? P.terracotta : '#fff', border: `1px solid ${P.line}`, fontSize: 12, opacity: pushBusy ? 0.6 : 1 }}
+                >
+                  {pushBusy ? '…' : pushEnabled ? 'غیرفعال‌سازی' : 'فعال‌سازی'}
+                </button>
+              </div>
+            )}
+          </div>
+        )}
+        <NotificationPreferencesPanel />
+        {error && <div style={{ fontSize: 13, color: '#C94C4C', marginBottom: 12 }}>{error}</div>}
+        <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end', marginTop: 4 }}>
+          <button onClick={onClose} style={{ ...pillBtn, background: P.panel, color: P.ink, border: `1px solid ${P.line}`, padding: '9px 20px' }}>انصراف</button>
+          <button onClick={save} disabled={busy} style={{ ...pillBtn, background: P.terracotta, color: '#fff', padding: '9px 20px', opacity: busy ? 0.6 : 1 }}>{busy ? '…' : 'ذخیره'}</button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function NotificationPreferencesPanel() {
+  const toast = useToast();
+  const EVENT_LABELS = {
+    comment: 'نظر جدید روی مقاله',
+    comment_reply: 'پاسخ به نظر',
+    new_article: 'مقاله جدید از نویسندگان دنبال‌شده',
+    review_approved: 'تأیید مقاله',
+    review_revision: 'بازخورد ویراستار',
+    review_rejected: 'رد مقاله',
+    review_submitted: 'ارسال مقاله برای بررسی',
+    system: 'پیام‌های سیستمی',
+  };
+  const CHANNEL_LABELS = { push: 'مرورگر', email: 'ایمیل', sms: 'پیامک' };
+  const CHANNELS = ['push', 'email', 'sms'];
+
+  const [prefs, setPrefs] = useState(null);
+  const [saving, setSaving] = useState(false);
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    notificationPreferencesApi.get().then((data) => setPrefs(data.preferences)).catch(() => {});
+  }, [open]);
+
+  const toggle = async (eventType, channel) => {
+    if (!prefs) return;
+    const updated = prefs.map((p) =>
+      p.eventType === eventType && p.channel === channel ? { ...p, enabled: !p.enabled } : p,
+    );
+    setPrefs(updated);
+    setSaving(true);
+    try {
+      await notificationPreferencesApi.update(updated);
+    } catch {
+      toast('ذخیره تنظیمات ناموفق بود', 'error');
+      setPrefs(prefs); // revert
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const getEnabled = (eventType, channel) =>
+    prefs?.find((p) => p.eventType === eventType && p.channel === channel)?.enabled ?? true;
+
+  return (
+    <div style={{ background: P.panel, border: `1px solid ${P.line}`, borderRadius: 12, padding: 14, marginBottom: 14 }}>
+      <button
+        onClick={() => setOpen((o) => !o)}
+        style={{ display: 'flex', width: '100%', justifyContent: 'space-between', alignItems: 'center', background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}
+      >
+        <span style={{ fontSize: 13, fontWeight: 800, color: P.ink }}>تنظیمات اعلان‌ها</span>
+        <span style={{ fontSize: 12, color: P.muted }}>{open ? '▲' : '▼'}</span>
+      </button>
+      {open && (
+        <div style={{ marginTop: 12, overflowX: 'auto' }}>
+          {prefs === null ? (
+            <div style={{ fontSize: 12, color: P.muted }}>در حال بارگذاری…</div>
+          ) : (
+            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 11 }}>
+              <thead>
+                <tr>
+                  <th style={{ textAlign: 'right', paddingLeft: 8, paddingBottom: 8, color: P.muted, fontWeight: 600 }}>رویداد</th>
+                  {CHANNELS.map((ch) => (
+                    <th key={ch} style={{ textAlign: 'center', paddingBottom: 8, color: P.muted, fontWeight: 600, minWidth: 48 }}>{CHANNEL_LABELS[ch]}</th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {Object.entries(EVENT_LABELS).map(([evt, label]) => (
+                  <tr key={evt} style={{ borderTop: `1px solid ${P.line}` }}>
+                    <td style={{ paddingTop: 6, paddingBottom: 6, color: P.ink, paddingLeft: 8 }}>{label}</td>
+                    {CHANNELS.map((ch) => (
+                      <td key={ch} style={{ textAlign: 'center', paddingTop: 6, paddingBottom: 6 }}>
+                        <button
+                          disabled={saving}
+                          onClick={() => toggle(evt, ch)}
+                          style={{
+                            width: 28, height: 16, borderRadius: 8, border: 'none', cursor: saving ? 'default' : 'pointer',
+                            background: getEnabled(evt, ch) ? P.green : '#CCC',
+                            opacity: saving ? 0.6 : 1, transition: 'background 0.2s',
+                          }}
+                          title={getEnabled(evt, ch) ? 'فعال — برای غیرفعال‌سازی کلیک کنید' : 'غیرفعال — برای فعال‌سازی کلیک کنید'}
+                        />
+                      </td>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── Inline SVG sparkline ─────────────────────────────────────────────────────
+function Sparkline({ data, color = '#C45C3D', width = 120, height = 36 }) {
+  if (!data || data.length < 2) return <svg width={width} height={height} />;
+  const vals = data.map(d => d.views ?? 0);
+  const max = Math.max(...vals, 1);
+  const pts = vals.map((v, i) => {
+    const x = (i / (vals.length - 1)) * width;
+    const y = height - (v / max) * (height - 4) - 2;
+    return `${x.toFixed(1)},${y.toFixed(1)}`;
+  }).join(' ');
+  return (
+    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} style={{ display: 'block' }}>
+      <polyline points={pts} fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+      <polyline points={`0,${height} ${pts} ${width},${height}`} fill={color} fillOpacity="0.12" stroke="none" />
+    </svg>
+  );
+}
+
+// ── Writer analytics tab ──────────────────────────────────────────────────────
+function WriterAnalyticsTab() {
+  const [overview, setOverview] = useState(null);
+  const [articles, setArticles] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    Promise.all([
+      engagementApi.writerAnalyticsOverview().catch(() => null),
+      engagementApi.writerAnalyticsArticles().catch(() => ({ items: [] })),
+    ]).then(([ov, arts]) => {
+      if (!cancelled) {
+        setOverview(ov);
+        setArticles(arts?.items ?? []);
+        setLoading(false);
+      }
+    });
+    return () => { cancelled = true; };
+  }, []);
+
+  if (loading) return <div style={{ padding: 24, color: P.muted, fontSize: 14 }}>در حال بارگذاری…</div>;
+
+  const totalViews = overview?.views ?? 0;
+  const totalReactions = overview?.reactions ?? 0;
+  const totalComments = overview?.comments ?? 0;
+  const viewsByDay = overview?.viewsByDay ?? [];
+
+  return (
+    <div style={{ direction: 'rtl' }}>
+      {/* Summary cards */}
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14, marginBottom: 28 }}>
+        {[
+          { label: 'بازدید کل', value: totalViews.toLocaleString('fa-IR'), color: P.terracotta },
+          { label: 'واکنش‌ها', value: totalReactions.toLocaleString('fa-IR'), color: P.orange },
+          { label: 'نظرات', value: totalComments.toLocaleString('fa-IR'), color: P.green },
+        ].map(({ label, value, color }) => (
+          <div key={label} style={{ background: P.white, border: `1px solid ${P.line}`, borderRadius: 12, padding: 16, borderTop: `3px solid ${color}` }}>
+            <div style={{ fontSize: 22, fontWeight: 900, color }}>{value}</div>
+            <div style={{ fontSize: 12, color: P.muted, marginTop: 4 }}>{label}</div>
+          </div>
+        ))}
+      </div>
+
+      {/* 30-day views sparkline */}
+      {viewsByDay.length > 1 && (
+        <div style={{ background: P.white, border: `1px solid ${P.line}`, borderRadius: 12, padding: 18, marginBottom: 24 }}>
+          <div style={{ fontSize: 13, fontWeight: 700, color: P.ink, marginBottom: 12 }}>بازدید ۳۰ روز اخیر</div>
+          <Sparkline data={viewsByDay} color={P.terracotta} width={500} height={56} />
+          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: P.muted, marginTop: 4 }}>
+            <span>{viewsByDay[0]?.date?.slice(5) ?? ''}</span>
+            <span>{viewsByDay[viewsByDay.length - 1]?.date?.slice(5) ?? ''}</span>
+          </div>
+        </div>
+      )}
+
+      {/* Per-article table */}
+      {articles.length > 0 && (
+        <div style={{ background: P.white, border: `1px solid ${P.line}`, borderRadius: 12, overflow: 'hidden' }}>
+          <div style={{ padding: '14px 18px', borderBottom: `1px solid ${P.line}`, fontSize: 13, fontWeight: 700, color: P.ink }}>عملکرد مقاله‌ها</div>
+          <div style={{ overflowX: 'auto' }}>
+            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12, fontFamily: 'Vazirmatn,sans-serif' }}>
+              <thead>
+                <tr style={{ background: P.panel }}>
+                  {['عنوان', 'بازدید', 'واکنش', 'نظر', 'ذخیره'].map(h => (
+                    <th key={h} style={{ padding: '8px 14px', textAlign: 'right', color: P.muted, fontWeight: 600, whiteSpace: 'nowrap' }}>{h}</th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {articles.map((a, i) => (
+                  <tr key={a.id} style={{ borderTop: `1px solid ${P.line}`, background: i % 2 === 0 ? P.white : P.cream }}>
+                    <td style={{ padding: '8px 14px', color: P.ink, maxWidth: 260, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{a.title}</td>
+                    <td style={{ padding: '8px 14px', color: P.terracotta, fontWeight: 700 }}>{(a.views ?? 0).toLocaleString('fa-IR')}</td>
+                    <td style={{ padding: '8px 14px', color: P.orange }}>{(a.reactions ?? 0).toLocaleString('fa-IR')}</td>
+                    <td style={{ padding: '8px 14px', color: P.muted }}>{(a.comments ?? 0).toLocaleString('fa-IR')}</td>
+                    <td style={{ padding: '8px 14px', color: P.muted }}>{(a.saved ?? 0).toLocaleString('fa-IR')}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+
+      {articles.length === 0 && (
+        <div style={{ textAlign: 'center', padding: '40px 0', color: P.muted, fontSize: 14 }}>هنوز داده‌ای برای نمایش وجود ندارد.</div>
+      )}
+    </div>
+  );
+}
+
+// ── Main profile page ─────────────────────────────────────────────────────────
+export function UserProfilePage({ username }) {
+  const { navigate } = useNav();
+  const { user: me } = useAuth();
+  const slug = username.replace(/^@/, '');
+  const [profile, setProfile] = useState(() => {
+    const author = findStaticAuthor(slug);
+    return buildStaticAuthorProfile(author);
+  });
+  const [loading, setLoading] = useState(() => !findStaticAuthor(slug));
+  const [showSettings, setShowSettings] = useState(false);
+  const [followers, setFollowers] = useState({ count: 0, following: false });
+  const [history, setHistory] = useState([]);
+  const [following, setFollowing] = useState([]);
+  const [activeTab, setActiveTab] = useState('articles');
+  const [badges, setBadges] = useState([]);
+
+  const isOwn = me && (me.username === slug || me.id === profile?.id);
+
+  useEffect(() => {
+    let cancelled = false;
+    const author = findStaticAuthor(slug);
+    const staticProfile = buildStaticAuthorProfile(author);
+    if (staticProfile) {
+      setProfile(staticProfile);
+      setLoading(false);
+    } else {
+      setProfile(null);
+      setLoading(true);
+    }
+    api.get(`/api/profile/${slug}`)
+      .then(d => {
+        if (cancelled) return;
+        const profileData = d.profile;
+        setProfile(profileData ? mergeProfileWithAuthor(profileData, author) : staticProfile);
+      })
+      .catch(() => {
+        if (cancelled) return;
+        if (!staticProfile) {
+          setProfile(null);
+        }
+      })
+      .finally(() => { if (!cancelled) setLoading(false); });
+    return () => { cancelled = true; };
+  }, [slug]);
+
+  useEffect(() => {
+    let cancelled = false;
+    if (!profile?.username || profile._static || !['writer', 'editor', 'admin'].includes(profile.role)) return;
+    engagementApi.writerFollowers(profile.username)
+      .then(res => { if (!cancelled) setFollowers({ count: res?.count ?? 0, following: !!res?.following }); })
+      .catch(() => {});
+    return () => { cancelled = true; };
+  }, [profile?.username, profile?.role]);
+
+  useEffect(() => {
+    let cancelled = false;
+    if (!isOwn) return;
+    Promise.all([
+      engagementApi.listHistory({ limit: 20 }).catch(() => ({ items: [] })),
+      engagementApi.following().catch(() => ({ items: [] })),
+      engagementApi.getBadges().catch(() => ({ badges: [] })),
+    ]).then(([historyRes, followingRes, badgesRes]) => {
+      if (!cancelled) {
+        setHistory(historyRes?.items ?? []);
+        setFollowing(followingRes?.items ?? []);
+        setBadges(badgesRes?.badges ?? []);
+      }
+    });
+    return () => { cancelled = true; };
+  }, [isOwn]);
+
+  if (loading) {
+    return (
+      <div style={{ paddingTop: 120, textAlign: 'center', fontFamily: 'Vazirmatn,sans-serif', color: P.muted }}>در حال بارگذاری…</div>
+    );
+  }
+
+  if (!profile) {
+    return <EmptyState title="پروفایل یافت نشد" subtitle={`@${slug} وجود ندارد یا هنوز نام کاربری تنظیم نکرده.`} />;
+  }
+
+  const articles = profile.author?.articles ?? [];
+  const articleCount = profile.author?.liveArticleCount ?? profile.author?.articleCount ?? articles.length;
+  const showArticles = ['writer', 'editor', 'admin'].includes(profile.role) && articles.length > 0;
+
+  const joinDate = profile.createdAt ? new Date(profile.createdAt).toLocaleDateString('fa-IR', { year: 'numeric', month: 'long' }) : '';
+  const canFollow = me && !isOwn && ['writer', 'editor', 'admin'].includes(profile.role);
+  const toggleFollow = async () => {
+    try {
+      const res = followers.following
+        ? await engagementApi.unfollowWriter(profile.username)
+        : await engagementApi.followWriter(profile.username);
+      setFollowers({ count: res.count ?? followers.count, following: !!res.following });
+    } catch {
+      /* follow state remains unchanged */
+    }
+  };
+
+  return (
+    <div style={{ paddingTop: 80, background: P.cream, minHeight: '100vh', fontFamily: 'Vazirmatn,sans-serif', direction: 'rtl' }}>
+      {/* Hero banner */}
+      <div style={{
+        background: `linear-gradient(145deg, #FDF6EE 0%, #F7EDE0 55%, #EEF5F0 100%)`,
+        borderBottom: `1px solid ${P.line}`,
+        padding: '52px 24px 44px',
+        position: 'relative',
+        overflow: 'hidden',
+      }}>
+        {/* Decorative shapes */}
+        <div style={{ position: 'absolute', top: -50, right: -50, width: 240, height: 240, borderRadius: '50%', background: 'rgba(196,92,61,0.06)', pointerEvents: 'none' }} />
+        <div style={{ position: 'absolute', bottom: -30, left: 60, width: 160, height: 160, borderRadius: '50%', background: 'rgba(58,125,94,0.07)', pointerEvents: 'none' }} />
+        <div style={{ position: 'absolute', top: 30, left: '40%', width: 80, height: 80, borderRadius: '50%', background: 'rgba(212,154,42,0.06)', pointerEvents: 'none' }} />
+
+        <div style={{ maxWidth: 900, margin: '0 auto', display: 'flex', gap: 32, alignItems: 'flex-start', flexWrap: 'wrap' }}>
+          <AvatarUpload
+            user={profile}
+            editable={!!isOwn}
+            onUploaded={url => setProfile(p => ({ ...p, avatarUrl: url }))}
+          />
+
+          <div style={{ flex: 1, minWidth: 200 }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6, flexWrap: 'wrap' }}>
+              <h1 style={{ fontSize: 26, fontWeight: 900, color: P.ink, margin: 0, lineHeight: 1.3, display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
+                {profile.name}
+                {profile.author?.verifiedExpert && <span style={{ fontSize: 11, color: P.terracotta, background: 'rgba(196,92,61,0.08)', border: `1px solid rgba(196,92,61,0.22)`, borderRadius: 999, padding: '2px 9px' }}>متخصص تاییدشده</span>}
+              </h1>
+              <RolePill role={profile.role} />
+            </div>
+            <div style={{ fontSize: 13, color: P.terracotta, fontWeight: 600, marginBottom: 8 }}>@{profile.username}</div>
+            {profile.author?.verifiedExpert && profile.author?.verificationNote && (
+              <div style={{ fontSize: 12, color: P.green, fontWeight: 600, marginBottom: 10, display: 'flex', alignItems: 'center', gap: 6 }}>
+                <span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: '50%', background: P.green, flexShrink: 0 }} />
+                {profile.author.verificationNote}
+              </div>
+            )}
+            {profile.bio && <p style={{ fontSize: 14, color: P.muted, lineHeight: 1.85, margin: '0 0 14px', maxWidth: 580 }}>{profile.bio}</p>}
+            {(profile.alumniOf || profile.credential) && (
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 14, background: 'rgba(255,255,255,0.6)', padding: '10px 14px', borderRadius: 8, border: `1px solid ${P.line}`, maxWidth: 580 }}>
+                {profile.alumniOf && (
+                  <div style={{ fontSize: 13, color: P.ink, display: 'flex', alignItems: 'center', gap: 8 }}>
+                    <span style={{ fontSize: 14 }}><span className="tek-icon" style={{ ['--i']: `url("${gradCapIcon}")` }} aria-hidden="true" /></span>
+                    <span>دانش‌آموخته: <strong>{profile.alumniOf.name}</strong></span>
+                    {profile.alumniOf.sameAs && (
+                      <a href={profile.alumniOf.sameAs} target="_blank" rel="noopener noreferrer" style={{ fontSize: 11, color: P.terracotta, textDecoration: 'none', background: 'rgba(196,92,61,0.06)', padding: '1px 6px', borderRadius: 4 }}>تاییدیه نهاد</a>
+                    )}
+                  </div>
+                )}
+                {profile.credential && (
+                  <div style={{ fontSize: 13, color: P.ink, display: 'flex', alignItems: 'center', gap: 8 }}>
+                    <span style={{ fontSize: 14 }}><span className="tek-icon" style={{ ['--i']: `url("${scrollIcon}")` }} aria-hidden="true" /></span>
+                    <span>درجه علمی: <strong>{profile.credential.name}</strong></span>
+                  </div>
+                )}
+              </div>
+            )}
+            {profile.expertise?.length > 0 && (
+              <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 14 }}>
+                {profile.expertise.map(tag => (
+                  <span key={tag} style={{ fontSize: 11, padding: '3px 11px', borderRadius: 20, background: P.greenLight, color: P.green, border: `1px solid rgba(58,125,94,0.18)`, fontWeight: 500 }}>{tag}</span>
+                ))}
+              </div>
+            )}
+            <div style={{ display: 'flex', gap: 18, flexWrap: 'wrap', fontSize: 12, color: P.muted, alignItems: 'center' }}>
+              {joinDate && <span>عضو از {joinDate}</span>}
+              {showArticles && <span style={{ color: P.terracotta, fontWeight: 700 }}>{articleCount} مقاله</span>}
+              {['writer', 'editor', 'admin'].includes(profile.role) && !profile._static && <span>{followers.count.toLocaleString('fa-IR')} دنبال‌کننده</span>}
+              {profile.social?.twitter && profile.social.twitter !== '#' && (
+                <a href={profile.social.twitter} target="_blank" rel="noopener noreferrer" style={{ color: P.muted, textDecoration: 'none', fontWeight: 700, fontSize: 13 }}>𝕏</a>
+              )}
+              {profile.social?.linkedin && profile.social.linkedin !== '#' && (
+                <a href={profile.social.linkedin} target="_blank" rel="noopener noreferrer" style={{ color: P.muted, textDecoration: 'none', fontWeight: 700, fontSize: 13 }}>in</a>
+              )}
+            </div>
+          </div>
+
+          {canFollow && (
+            <button
+              onClick={toggleFollow}
+              style={{
+                ...pillBtn, background: followers.following ? P.greenLight : 'rgba(196,92,61,0.08)',
+                color: followers.following ? P.green : P.terracotta,
+                border: `1px solid ${followers.following ? 'rgba(58,125,94,0.28)' : 'rgba(196,92,61,0.25)'}`, padding: '9px 20px', fontSize: 13,
+                alignSelf: 'flex-start',
+              }}
+            >{followers.following ? 'دنبال می‌کنی' : 'دنبال کردن'}</button>
+          )}
+
+          {isOwn && (
+            <button
+              onClick={() => setShowSettings(true)}
+              style={{
+                ...pillBtn, background: 'rgba(196,92,61,0.08)', color: P.terracotta,
+                border: `1px solid rgba(196,92,61,0.25)`, padding: '9px 20px', fontSize: 13,
+                alignSelf: 'flex-start',
+              }}
+            >ویرایش پروفایل</button>
+          )}
+        </div>
+      </div>
+
+      {/* Stats bar (for writers/editors) */}
+      {showArticles && (
+        <div style={{ background: P.panel, borderBottom: `1px solid ${P.line}` }}>
+          <div style={{ maxWidth: 900, margin: '0 auto', padding: '0 24px', display: 'flex', gap: 0 }}>
+            {[
+              { label: 'مقالات منتشرشده', value: articleCount },
+              { label: 'مجموع بازدید', value: articles.reduce((s, a) => s + (a.views ?? 0), 0).toLocaleString('fa-IR') },
+              { label: 'مجموع واکنش', value: articles.reduce((s, a) => s + (a.reactions ?? 0), 0).toLocaleString('fa-IR') },
+            ].map(({ label, value }) => (
+              <div key={label} style={{ padding: '18px 32px 18px 0', flex: 1, borderLeft: `1px solid ${P.line}`, lastChild: { borderLeft: 'none' } }}>
+                <div style={{ fontSize: 22, fontWeight: 900, color: P.terracotta }}>{value}</div>
+                <div style={{ fontSize: 11, color: P.muted, marginTop: 2 }}>{label}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Earned badges */}
+      {badges.length > 0 && (
+        <div style={{ background: P.white, borderBottom: `1px solid ${P.line}` }}>
+          <div style={{ maxWidth: 900, margin: '0 auto', padding: '20px 24px' }}>
+            <div style={{ fontSize: 13, fontWeight: 700, color: P.ink, marginBottom: 12 }}>نشان‌های کسب‌شده</div>
+            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
+              {badges.map((b) => {
+                const META = {
+                  ai_reader: { icon: botIcon, label: 'خواننده AI' },
+                  data_reader: { icon: chartIcon, label: 'خواننده داده' },
+                  security_reader: { icon: lockIcon, label: 'خواننده امنیت' },
+                  hardware_reader: { icon: laptopIcon, label: 'خواننده سخت‌افزار' },
+                  weekly_streak: { icon: flameIcon, label: 'رکورد هفتگی' },
+                  monthly_streak: { icon: zapIcon, label: 'رکورد ماهانه' },
+                  power_reader: { icon: libraryIcon, label: 'خواننده حرفه‌ای' },
+                  early_adopter: { icon: sproutIcon, label: 'اولین کاربران' },
+                };
+                const m = META[b.badgeType] || { icon: medalIcon, label: b.badgeType };
+                const earned = b.earnedAt ? new Date(b.earnedAt).toLocaleDateString('fa-IR', { year: 'numeric', month: 'long' }) : '';
+                return (
+                  <div key={b.id} title={earned} style={{
+                    display: 'inline-flex', alignItems: 'center', gap: 6,
+                    background: 'linear-gradient(135deg,#F4EFE6,#FDFAF5)',
+                    border: `1px solid ${P.line}`, borderRadius: 24,
+                    padding: '6px 14px', fontSize: 12, fontWeight: 600, color: P.ink,
+                    boxShadow: '0 1px 4px rgba(0,0,0,0.05)',
+                  }}>
+                    <span style={{ fontSize: 16 }}>{iconNode(m.icon)}</span>
+                    <span>{m.label}</span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Article list */}
+      <div style={{ maxWidth: 900, margin: '0 auto', padding: '32px 24px' }}>
+        {isOwn && (
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 28 }} className="profile-own-grid">
+            <div style={{ background: P.white, border: `1px solid ${P.line}`, borderRadius: 12, padding: 18 }}>
+              <h2 style={{ fontSize: 15, fontWeight: 800, color: P.ink, margin: '0 0 14px' }}>تاریخچه خواندن</h2>
+              {history.length === 0 ? <div style={{ fontSize: 13, color: P.muted }}>هنوز مقاله‌ای در تاریخچه شما ثبت نشده است.</div> : history.slice(0, 5).map(item => (
+                <button key={item.id} onClick={() => navigate('/article/' + item.article.slug)} style={{ display: 'block', width: '100%', background: 'transparent', border: 'none', borderBottom: `1px solid ${P.line}`, padding: '10px 0', textAlign: 'right', cursor: 'pointer', fontFamily: 'Vazirmatn,sans-serif' }}>
+                  <div style={{ fontSize: 13, fontWeight: 700, color: P.ink }}>{item.article.title}</div>
+                  <div style={{ fontSize: 11, color: P.muted, marginTop: 2 }}>{item.time}</div>
+                </button>
+              ))}
+              {history.length > 0 && <button onClick={async () => { if (confirm('تاریخچه خواندن پاک شود؟')) { await engagementApi.clearHistory(); setHistory([]); } }} style={{ ...pillBtn, background: '#C94C4C18', color: '#C94C4C', fontSize: 12, marginTop: 12 }}>پاک کردن تاریخچه</button>}
+            </div>
+            <div style={{ background: P.white, border: `1px solid ${P.line}`, borderRadius: 12, padding: 18 }}>
+              <h2 style={{ fontSize: 15, fontWeight: 800, color: P.ink, margin: '0 0 14px' }}>نویسندگان دنبال‌شده</h2>
+              {following.length === 0 ? <div style={{ fontSize: 13, color: P.muted }}>هنوز نویسنده‌ای را دنبال نمی‌کنید.</div> : following.slice(0, 6).map(writer => (
+                <button key={writer.id} onClick={() => navigate('/profile/@' + writer.username)} style={{ display: 'block', width: '100%', background: 'transparent', border: 'none', borderBottom: `1px solid ${P.line}`, padding: '10px 0', textAlign: 'right', cursor: 'pointer', fontFamily: 'Vazirmatn,sans-serif' }}>
+                  <div style={{ fontSize: 13, fontWeight: 700, color: P.ink }}>{writer.name}</div>
+                  <div style={{ fontSize: 11, color: P.muted, marginTop: 2 }}>@{writer.username}</div>
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+        {showArticles ? (
+          <>
+            {isOwn && ['writer', 'editor', 'admin'].includes(profile.role) && (
+              <div style={{ display: 'flex', gap: 0, marginBottom: 20, borderBottom: `2px solid ${P.line}` }}>
+                {[{ id: 'articles', label: 'مقالات' }, { id: 'analytics', label: 'آمار و تحلیل' }].map(tab => (
+                  <button key={tab.id} onClick={() => setActiveTab(tab.id)} style={{
+                    background: 'none', border: 'none', padding: '10px 20px', cursor: 'pointer',
+                    fontFamily: 'Vazirmatn,sans-serif', fontSize: 14, fontWeight: activeTab === tab.id ? 800 : 500,
+                    color: activeTab === tab.id ? P.terracotta : P.muted,
+                    borderBottom: activeTab === tab.id ? `2px solid ${P.terracotta}` : '2px solid transparent',
+                    marginBottom: -2, transition: 'all 0.15s',
+                  }}>{tab.label}</button>
+                ))}
+              </div>
+            )}
+            {activeTab === 'analytics' && isOwn && ['writer', 'editor', 'admin'].includes(profile.role) ? (
+              <WriterAnalyticsTab />
+            ) : (
+              <>
+                <h2 style={{ fontSize: 18, fontWeight: 800, color: P.ink, margin: '0 0 20px', display: 'flex', alignItems: 'center', gap: 10 }}>
+                  <span style={{ display: 'inline-block', width: 4, height: 20, background: P.terracotta, borderRadius: 2 }} />
+                  مقالات
+                </h2>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
+                  {articles.map(article => (
+                    <ArticleMiniCard
+                      key={article.id}
+                      article={article}
+                      onClick={() => navigate('/article/' + article.slug)}
+                    />
+                  ))}
+                </div>
+              </>
+            )}
+          </>
+        ) : (
+          <div style={{
+            textAlign: 'center', padding: '64px 24px', color: P.muted,
+            background: P.panel, borderRadius: 16, border: `1px solid ${P.line}`,
+          }}>
+            <div style={{ fontSize: 48, marginBottom: 16 }}>✦</div>
+            <div style={{ fontSize: 15, fontWeight: 600, color: P.ink, marginBottom: 8 }}>هنوز مقاله‌ای منتشر نشده</div>
+            <div style={{ fontSize: 13 }}>مقالات این کاربر اینجا نمایش داده خواهند شد.</div>
+          </div>
+        )}
+      </div>
+
+      {showSettings && (
+        <ProfileSettingsModal
+          user={profile}
+          account={me}
+          onClose={() => setShowSettings(false)}
+          onSaved={updated => setProfile(p => ({ ...p, ...updated }))}
+        />
+      )}
+
+      <style>{`
+        @media (max-width: 600px) {
+          .profile-hero-inner { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; }
+          .profile-own-grid { grid-template-columns: 1fr !important; }
+        }
+      `}</style>
+    </div>
+  );
+}