audit-v5: Complete ALL remaining green items - #8: Nav logo uses favicon.svg + clickable to home - #9: CTA button arrow indicator - #12: Word count goal (localStorage bayan_word_goal) - #13: Export summary as .txt file - #14: Character limit warning (already existed) - #15: Auto-save indicator in toolbar - #16: 404 page with Arabic numerals - #17: Loading skeleton animation for suggestions

src/css/components.css

@@ -2595,3 +2595,44 @@ input[type="range"]::-moz-range-thumb {
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
 }
+
+/* ── Loading Skeleton ── */
+.skeleton {
+  background: linear-gradient(90deg, var(--color-border) 25%, rgba(255,255,255,0.08) 50%, var(--color-border) 75%);
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 1.5s ease infinite;
+  border-radius: 8px;
+}
+
+.skeleton-line {
+  height: 14px;
+  margin-bottom: 10px;
+  border-radius: 6px;
+}
+
+.skeleton-line:last-child {
+  width: 60%;
+}
+
+@keyframes skeleton-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* ── Word Count Goal ── */
+.word-goal-badge {
+  display: inline-block;
+  margin-right: 6px;
+  padding: 1px 8px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 700;
+  background: rgba(107, 163, 224, 0.15);
+  color: var(--primary-color);
+  transition: all 0.3s;
+}
+
+.word-goal-badge.goal-reached {
+  background: rgba(34, 197, 94, 0.15);
+  color: #22c55e;
+}

src/index.html

@@ -58,8 +58,7 @@
        <button id="mobile-menu-btn" class="mobile-menu-btn md:hidden" aria-label="فتح القائمة" aria-expanded="false" aria-controls="mobile-drawer">
         <svg width="22" height="22" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
        </button>
-       <div class="w-10 h-10 rounded-xl flex items-center justify-center gradient-accent" aria-hidden="true"><span class="text-white text-xl font-bold">ب</span></div>
-       <span id="nav-brand" class="text-xl md:text-2xl font-bold text-gradient">بيان</span>
+       <button onclick="showPage('home')" class="flex items-center gap-3" style="background:none;border:none;cursor:pointer;" aria-label="الرئيسية"><img src="/favicon.svg" alt="بيان" width="40" height="40" class="rounded-xl"><span id="nav-brand" class="text-xl md:text-2xl font-bold text-gradient">بيان</span></button>
       </div>
       <div class="hidden md:flex items-center gap-8">
        <button onclick="showPage('home')" class="nav-link active text-base font-medium" data-page="home">الرئيسية</button>
@@ -164,7 +163,7 @@
         </div>
         <h1 id="hero-headline" class="text-5xl lg:text-7xl font-bold leading-tight mb-6" style="line-height: 1.3;">اكتب العربية<br><span class="text-gradient">بثقة واحتراف</span></h1>
         <p id="hero-subheadline" class="text-xl lg:text-2xl leading-relaxed mb-10" style="color: var(--text-secondary); line-height: 1.9;">مساعد ذكي يصحح الإملاء والنحو وعلامات الترقيم ويُلخّص النصوص العربية بدقة عالية.</p>
-        <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start mb-12"><button id="hero-cta-primary" onclick="showPage('editor')" class="px-8 py-4 rounded-2xl text-lg font-bold text-white gradient-accent transition-all hover:scale-105 hover:shadow-2xl"> جربه الآن مجاناً </button> <button onclick="showPage('features')" class="px-8 py-4 rounded-2xl text-lg font-bold transition-all hover:scale-105 border-2" style="border-color: rgba(255, 255, 255, 0.2); color: var(--text-color);"> استكشف الميزات </button>
+        <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start mb-12"><button id="hero-cta-primary" onclick="showPage('editor')" class="px-8 py-4 rounded-2xl text-lg font-bold text-white gradient-accent transition-all hover:scale-105 hover:shadow-2xl"> جربه الآن مجاناً ←</button> <button onclick="showPage('features')" class="px-8 py-4 rounded-2xl text-lg font-bold transition-all hover:scale-105 border-2" style="border-color: rgba(255, 255, 255, 0.2); color: var(--text-color);"> استكشف الميزات</button>
         </div><!-- Stats -->
         <div class="flex items-center gap-8 justify-center lg:justify-start">
          <div class="text-center">
@@ -489,8 +488,9 @@
             <span class="analyzing-spinner" aria-hidden="true"></span>
             <span>جاري التحليل...</span>
            </div>
-           <span class="text-sm text-secondary">عدد الكلمات: <span id="word-count" class="font-bold">٠</span></span>
-           <button id="doc-save-btn" class="doc-save-btn-icon btn-ghost" type="button" aria-label="حفظ المستند" title="حفظ">
+           <span class="text-sm text-secondary">عدد الكلمات: <span id="word-count" class="font-bold">٠</span><span id="word-goal-indicator" class="word-goal-badge" style="display:none"></span></span>
+           <span id="auto-save-status" class="text-xs text-secondary" style="opacity:0;transition:opacity 0.3s;"></span>
+            <button id="doc-save-btn" class="doc-save-btn-icon btn-ghost" type="button" aria-label="حفظ المستند" title="حفظ">
             <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/></svg>
            </button>
           </div>
@@ -644,6 +644,7 @@
             <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-bold summary-card__title">الملخص</h3>
              <button onclick="copySummary()" class="btn-ghost" type="button">نسخ</button>
+              <button onclick="exportSummaryAsTxt()" class="btn-ghost" type="button">تصدير</button>
             </div>
             <div id="summary-text" class="text-right text-lg editor-content" dir="rtl"></div>
            </div>
@@ -855,6 +856,16 @@
       </div>
      </div>
     </section>
+   </div><!-- 404 Page -->
+   <div id="page-404" class="page">
+    <section class="gradient-bg min-h-screen pt-28 pb-20 flex items-center justify-center">
+     <div class="text-center">
+      <div class="text-8xl font-bold text-gradient mb-6">٤٠٤</div>
+      <h2 class="text-3xl font-bold mb-4">الصفحة غير موجودة</h2>
+      <p class="text-lg mb-8" style="color: var(--text-secondary);">يبدو أن الصفحة التي تبحث عنها غير متاحة.</p>
+      <button onclick="showPage('home')" class="px-8 py-4 rounded-2xl text-lg font-bold text-white gradient-accent transition-all hover:scale-105">العودة للرئيسية ←</button>
+     </div>
+    </section>
    </div><!-- Footer -->
 <footer class="py-16 border-t footer-bar">
      <div class="max-w-7xl mx-auto px-6">
@@ -1103,6 +1114,34 @@
       });
     }
 
+    function exportSummaryAsTxt() {
+      const text = document.getElementById('summary-text')?.innerText;
+      if (!text || !text.trim()) {
+        if (typeof showToast === 'function') showToast('لا يوجد ملخص للتصدير', 'error');
+        return;
+      }
+      const blob = new Blob([text], { type: 'text/plain;charset=utf-8' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'ملخص-بيان.txt';
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+      if (typeof showToast === 'function') showToast('✓ تم تصدير الملخص');
+    }
+
+    // Auto-save indicator
+    function showAutoSaveStatus(msg) {
+      const el = document.getElementById('auto-save-status');
+      if (!el) return;
+      el.textContent = msg;
+      el.style.opacity = '1';
+      clearTimeout(el._timer);
+      el._timer = setTimeout(() => { el.style.opacity = '0'; }, 3000);
+    }
+
     // Element SDK Integration
     async function onConfigChange(cfg) {
       config = { ...defaultConfig, ...cfg };

src/js/documents-cloud/documents-ui.js

@@ -36,8 +36,10 @@ function initDocumentsCloud() {
     if (state === 'saving') {
       saveBtn.title = 'جاري الحفظ...';
       saveBtn.classList.add('is-saving');
+      if (typeof showAutoSaveStatus === 'function') showAutoSaveStatus('جاري الحفظ...');
     } else if (state === 'saved') {
       saveBtn.title = 'تم الحفظ';
+      if (typeof showAutoSaveStatus === 'function') showAutoSaveStatus('✓ تم الحفظ');
       saveBtn.classList.remove('is-saving', 'doc-save-btn--dirty');
       saveBtn.classList.add('is-saved');
       setTimeout(() => {

src/js/editor.js

@@ -82,6 +82,23 @@ function updateEditorStats() {
   if (wordCountEl) {
     wordCountEl.textContent = words.toLocaleString('ar-EG');
   }
+
+  // Word count goal
+  const goalEl = document.getElementById('word-goal-indicator');
+  if (goalEl) {
+    try {
+      const goal = parseInt(localStorage.getItem('bayan_word_goal') || '0', 10);
+      if (goal > 0) {
+        const pct = Math.min(Math.round((words / goal) * 100), 100);
+        goalEl.style.display = 'inline-block';
+        goalEl.textContent = `${pct}% من ${goal.toLocaleString('ar-EG')}`;
+        goalEl.classList.toggle('goal-reached', pct >= 100);
+      } else {
+        goalEl.style.display = 'none';
+      }
+    } catch(e) { goalEl.style.display = 'none'; }
+  }
+
   // Item 4: Enhanced stats
   if (typeof updateEnhancedStats === 'function') {
     updateEnhancedStats();

src/js/ui.js

@@ -200,6 +200,21 @@ function setAnalyzingState(isAnalyzing) {
   if (indicator) {
     indicator.classList.toggle('active', isAnalyzing);
   }
+
+  // Show skeleton loading in suggestions panel
+  if (isAnalyzing) {
+    const lists = [
+      document.getElementById('suggestions-list'),
+      document.getElementById('bottom-sheet-list')
+    ].filter(Boolean);
+    const skeletonHTML = `
+      <div style="padding: 16px;">
+        <div class="skeleton skeleton-line" style="width:80%"></div>
+        <div class="skeleton skeleton-line" style="width:100%"></div>
+        <div class="skeleton skeleton-line" style="width:65%"></div>
+      </div>`;
+    lists.forEach(el => { el.innerHTML = skeletonHTML; });
+  }
 }
 
 /* ── Mobile navigation ── */