Implement all 19 remaining UI features: toolbar tools, find/replace, focus mode, error tabs, donut chart, version history, Arabic tools, tab animations, etc.

src/css/components.css

@@ -299,11 +299,11 @@
   position: relative;
 }
 
-.editor-shell > *:first-child {
+.editor-shell>*:first-child {
   border-radius: var(--radius-card) var(--radius-card) 0 0;
 }
 
-.editor-shell > *:last-child {
+.editor-shell>*:last-child {
   border-radius: 0 0 var(--radius-card) var(--radius-card);
 }
 
@@ -317,11 +317,11 @@
   background: var(--color-surface);
 }
 
-.editor-toolbar > *:first-child {
+.editor-toolbar>*:first-child {
   justify-self: start;
 }
 
-.editor-toolbar > *:last-child {
+.editor-toolbar>*:last-child {
   justify-self: end;
 }
 
@@ -350,7 +350,7 @@
 
 .editor-tab:hover {
   color: var(--color-text-primary);
-  background: rgba(255,255,255,0.06);
+  background: rgba(255, 255, 255, 0.06);
 }
 
 .editor-tab.active {
@@ -365,11 +365,13 @@
   align-items: center;
   gap: 5px;
 }
+
 .tab-icon {
   flex-shrink: 0;
   opacity: 0.8;
   vertical-align: middle;
 }
+
 .editor-tab.active .tab-icon {
   opacity: 1;
 }
@@ -378,6 +380,7 @@
 [data-tooltip] {
   position: relative;
 }
+
 [data-tooltip]::after {
   content: attr(data-tooltip);
   position: absolute;
@@ -395,11 +398,12 @@
   opacity: 0;
   visibility: hidden;
   transition: all 0.2s ease;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
   border: 1px solid var(--color-border);
   z-index: 300;
   font-family: inherit;
 }
+
 [data-tooltip]:hover::after {
   opacity: 1;
   visibility: visible;
@@ -558,7 +562,7 @@
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: 8px;
-  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
   padding: 4px;
   z-index: 200;
   opacity: 0;
@@ -645,11 +649,15 @@
 }
 
 @media (min-width: 768px) {
-  .editor-surface { min-height: 60vh; }
+  .editor-surface {
+    min-height: 60vh;
+  }
 }
 
 @media (min-width: 1024px) {
-  .editor-surface { min-height: 500px; }
+  .editor-surface {
+    min-height: 500px;
+  }
 }
 
 .editor-surface:focus {
@@ -701,15 +709,24 @@
   flex-shrink: 0;
 }
 
-.stat-dot--spelling { background: var(--color-error); }
-.stat-dot--grammar { background: var(--color-warning); }
-.stat-dot--punctuation { background: var(--color-success); }
+.stat-dot--spelling {
+  background: var(--color-error);
+}
+
+.stat-dot--grammar {
+  background: var(--color-warning);
+}
+
+.stat-dot--punctuation {
+  background: var(--color-success);
+}
 
 .editor-actions {
   display: flex;
   flex-wrap: wrap;
   gap: var(--spacing-sm);
 }
+
 .editor-actions .btn-ghost,
 .editor-actions .doc-dropdown .btn-ghost {
   width: 40px;
@@ -838,9 +855,17 @@
   gap: var(--spacing-sm);
 }
 
-.popover-type--spelling { color: var(--color-error); }
-.popover-type--grammar { color: var(--color-warning); }
-.popover-type--punctuation { color: var(--color-success); }
+.popover-type--spelling {
+  color: var(--color-error);
+}
+
+.popover-type--grammar {
+  color: var(--color-warning);
+}
+
+.popover-type--punctuation {
+  color: var(--color-success);
+}
 
 .popover-original-word {
   font-size: var(--font-size-sm);
@@ -939,6 +964,7 @@
   cursor: pointer;
   transition: all var(--transition-fast);
 }
+
 .popover-dismiss:hover {
   color: var(--color-error);
   border-color: var(--color-error);
@@ -1021,8 +1047,15 @@
 }
 
 @keyframes fadeIn {
-  from { opacity: 0; transform: translateY(4px); }
-  to { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 
@@ -1455,8 +1488,9 @@ input[type="range"]::-webkit-slider-thumb {
 .editor-layout.tools-mode {
   grid-template-columns: 1fr !important;
 }
-.editor-layout.tools-mode > .docs-panel-desktop,
-.editor-layout.tools-mode > .sidebar-panel {
+
+.editor-layout.tools-mode>.docs-panel-desktop,
+.editor-layout.tools-mode>.sidebar-panel {
   display: none !important;
 }
 
@@ -1612,8 +1646,13 @@ input[type="range"]::-webkit-slider-thumb {
   border: 1px solid var(--color-primary-subtle-border);
 }
 
-.check-icon { color: var(--color-success); }
-.muted-icon { color: var(--color-text-muted); }
+.check-icon {
+  color: var(--color-success);
+}
+
+.muted-icon {
+  color: var(--color-text-muted);
+}
 
 .demo-editor-surface {
   background: var(--color-editor);
@@ -2034,7 +2073,8 @@ input[type="range"]::-webkit-slider-thumb {
   transform: translateX(100%);
   transition: transform var(--transition-slow), box-shadow var(--transition-slow);
   box-shadow: none;
-  padding-top: 64px; /* below nav */
+  padding-top: 64px;
+  /* below nav */
 }
 
 .docs-sidebar.is-open {
@@ -2439,7 +2479,7 @@ input[type="range"]::-webkit-slider-thumb {
   background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
   cursor: pointer;
   border: 3px solid var(--color-surface);
-  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
   transition: transform 0.15s ease;
 }
 
@@ -2454,7 +2494,7 @@ input[type="range"]::-webkit-slider-thumb {
   background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
   cursor: pointer;
   border: 3px solid var(--color-surface);
-  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
 }
 
 /* ── Item 3: Empty States ── */
@@ -2644,6 +2684,7 @@ input[type="range"]::-webkit-slider-thumb {
   font-weight: 700;
   color: var(--color-text-muted);
 }
+
 .fmt-color-swatch--reset:hover {
   border-color: var(--color-error);
   color: var(--color-error);
@@ -2858,17 +2899,36 @@ input[type="range"]::-moz-range-thumb {
   animation: toast-out 0.25s ease forwards;
 }
 
-.toast--success { border-color: rgba(34, 197, 94, 0.4); }
-.toast--error { border-color: rgba(239, 68, 68, 0.4); }
+.toast--success {
+  border-color: rgba(34, 197, 94, 0.4);
+}
+
+.toast--error {
+  border-color: rgba(239, 68, 68, 0.4);
+}
 
 @keyframes toast-in {
-  from { opacity: 0; transform: translateY(16px); }
-  to { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 @keyframes toast-out {
-  from { opacity: 1; transform: translateY(0); }
-  to { opacity: 0; transform: translateY(16px); }
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateY(16px);
+  }
 }
 
 /* ── Scroll to Top ── */
@@ -2907,7 +2967,7 @@ input[type="range"]::-moz-range-thumb {
 
 /* ── Loading Skeleton ── */
 .skeleton {
-  background: linear-gradient(90deg, var(--color-border) 25%, rgba(255,255,255,0.08) 50%, var(--color-border) 75%);
+  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;
@@ -2924,8 +2984,13 @@ input[type="range"]::-moz-range-thumb {
 }
 
 @keyframes skeleton-shimmer {
-  0% { background-position: 200% 0; }
-  100% { background-position: -200% 0; }
+  0% {
+    background-position: 200% 0;
+  }
+
+  100% {
+    background-position: -200% 0;
+  }
 }
 
 /* ── Word Count Goal ── */
@@ -2984,8 +3049,15 @@ input[type="range"]::-moz-range-thumb {
 }
 
 @keyframes punc-blink {
-  0%, 100% { border-left-color: var(--highlight-punctuation-border); }
-  50% { border-left-color: transparent; }
+
+  0%,
+  100% {
+    border-left-color: var(--highlight-punctuation-border);
+  }
+
+  50% {
+    border-left-color: transparent;
+  }
 }
 
 /* ── Fix #6: Document title truncation ── */
@@ -3001,11 +3073,12 @@ input[type="range"]::-moz-range-thumb {
 /* ── Fix #8: Editor placeholder alignment (Removed hack) ── */
 
 /* ── Fix #11: Pricing cards equal heights ── */
-#page-pricing .grid > div {
+#page-pricing .grid>div {
   display: flex;
   flex-direction: column;
 }
-#page-pricing .grid > div > ul {
+
+#page-pricing .grid>div>ul {
   flex: 1;
 }
 
@@ -3014,15 +3087,18 @@ input[type="range"]::-moz-range-thumb {
   cursor: default;
   transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
 }
+
 .window-dots:hover .dot--red {
   transform: scale(1.25);
   box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
 }
+
 .window-dots:hover .dot--yellow {
   transform: scale(1.25);
   box-shadow: 0 0 8px rgba(234, 179, 8, 0.5);
   transition-delay: 0.05s;
 }
+
 .window-dots:hover .dot--green {
   transform: scale(1.25);
   box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
@@ -3033,9 +3109,11 @@ input[type="range"]::-moz-range-thumb {
 .sidebar-desktop.collapsed {
   display: none !important;
 }
+
 .editor-layout.editor-fullscreen {
   grid-template-columns: 1fr !important;
 }
+
 .editor-layout.editor-fullscreen .sidebar-panel.sidebar-desktop,
 .editor-layout.editor-fullscreen .docs-panel,
 .editor-layout.editor-fullscreen .docs-panel-desktop {
@@ -3047,38 +3125,47 @@ input[type="range"]::-moz-range-thumb {
   color: #3A424E;
   background: rgba(26, 29, 33, 0.04);
 }
+
 [data-theme="light"] .fmt-btn:hover {
   background: rgba(26, 29, 33, 0.1);
   color: #1A1D21;
 }
+
 [data-theme="light"] .fmt-btn.fmt-active {
   background: rgba(43, 108, 184, 0.14);
   color: #2B6CB8;
 }
+
 [data-theme="light"] .format-toolbar {
   background: #FAF9F6;
   border-bottom-color: rgba(26, 29, 33, 0.12);
 }
+
 [data-theme="light"] .surface-card {
   box-shadow: 0 2px 8px rgba(26, 29, 33, 0.06);
   border: 1px solid rgba(26, 29, 33, 0.08);
 }
+
 [data-theme="light"] .editor-tab {
   color: #5A6472;
 }
+
 [data-theme="light"] .editor-tab:hover {
   color: #1A1D21;
   background: rgba(26, 29, 33, 0.06);
 }
+
 [data-theme="light"] .editor-tab.active {
   color: #fff !important;
   background: linear-gradient(135deg, #4A8FD4, #7C6BC4);
   box-shadow: 0 2px 8px rgba(74, 143, 212, 0.25);
 }
+
 [data-theme="light"] .stat-item {
   color: #3A424E;
   opacity: 1;
 }
+
 [data-theme="light"] .scroll-top-btn {
   box-shadow: 0 4px 16px rgba(26, 29, 33, 0.15);
 }
@@ -3109,7 +3196,7 @@ input[type="range"]::-moz-range-thumb {
 #autocomplete-dropdown {
   position: fixed;
   background: var(--color-surface, #1a1d21);
-  border: 1px solid var(--color-border, rgba(255,255,255,0.1));
+  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
   border-radius: 10px;
   box-shadow:
     0 4px 24px rgba(0, 0, 0, 0.25),
@@ -3126,8 +3213,15 @@ input[type="range"]::-moz-range-thumb {
 }
 
 @keyframes ac-dropdown-in {
-  from { opacity: 0; transform: translateY(-4px); }
-  to   { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 /* ── Dropdown Items ── */
@@ -3147,8 +3241,8 @@ input[type="range"]::-moz-range-thumb {
 .ac-dropdown-item:hover,
 .ac-dropdown-item.ac-selected {
   background: linear-gradient(135deg,
-    rgba(107, 163, 224, 0.15),
-    rgba(160, 131, 237, 0.12));
+      rgba(107, 163, 224, 0.15),
+      rgba(160, 131, 237, 0.12));
   color: var(--color-primary, #6ba3e0);
 }
 
@@ -3160,9 +3254,11 @@ input[type="range"]::-moz-range-thumb {
 #autocomplete-dropdown::-webkit-scrollbar {
   width: 4px;
 }
+
 #autocomplete-dropdown::-webkit-scrollbar-track {
   background: transparent;
 }
+
 #autocomplete-dropdown::-webkit-scrollbar-thumb {
   background: rgba(255, 255, 255, 0.12);
   border-radius: 2px;
@@ -3194,6 +3290,7 @@ input[type="range"]::-moz-range-thumb {
 
 /* ── Print: hide autocomplete ── */
 @media print {
+
   #autocomplete-ghost,
   #autocomplete-dropdown {
     display: none !important;
@@ -3210,7 +3307,10 @@ input[type="range"]::-moz-range-thumb {
   justify-content: center;
   padding: 1rem;
 }
-.quran-modal.is-hidden { display: none; }
+
+.quran-modal.is-hidden {
+  display: none;
+}
 
 /* Quran applied text — protected from analysis */
 .quran-applied {
@@ -3222,6 +3322,7 @@ input[type="range"]::-moz-range-thumb {
   cursor: default;
   user-select: text;
 }
+
 .quran-applied .spelling-error,
 .quran-applied .grammar-error,
 .quran-applied .punctuation-suggestion {
@@ -3230,6 +3331,7 @@ input[type="range"]::-moz-range-thumb {
   background: none !important;
   cursor: default !important;
 }
+
 .quran-ref-inline {
   font-size: 0.72em;
   opacity: 0.6;
@@ -3261,8 +3363,15 @@ input[type="range"]::-moz-range-thumb {
 }
 
 @keyframes quranModalIn {
-  from { opacity: 0; transform: scale(0.95) translateY(10px); }
-  to   { opacity: 1; transform: scale(1) translateY(0); }
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
 }
 
 .quran-result-card {
@@ -3302,11 +3411,15 @@ input[type="range"]::-moz-range-thumb {
   transition: all 0.2s;
   white-space: nowrap;
 }
+
 .quran-apply-btn:hover {
   transform: scale(1.05);
   box-shadow: 0 4px 12px rgba(6, 182, 212, 0.35);
 }
-.quran-apply-btn.is-hidden { display: none; }
+
+.quran-apply-btn.is-hidden {
+  display: none;
+}
 
 .quran-copy-btn {
   padding: 6px 10px;
@@ -3319,11 +3432,15 @@ input[type="range"]::-moz-range-thumb {
   transition: all 0.2s;
   line-height: 1;
 }
+
 .quran-copy-btn:hover {
   background: rgba(6, 182, 212, 0.2);
   transform: scale(1.05);
 }
-.quran-copy-btn.is-hidden { display: none; }
+
+.quran-copy-btn.is-hidden {
+  display: none;
+}
 
 .quran-lang-select {
   padding: 6px 12px;
@@ -3336,9 +3453,11 @@ input[type="range"]::-moz-range-thumb {
   cursor: pointer;
   transition: border-color 0.2s;
 }
+
 .quran-lang-select:hover {
   border-color: #06b6d4;
 }
+
 .quran-lang-select:focus {
   outline: none;
   border-color: #06b6d4;
@@ -3351,6 +3470,7 @@ input[type="range"]::-moz-range-thumb {
     border-radius: 1.25rem;
     padding: 1.25rem;
   }
+
   .quran-uthmani {
     font-size: 20px;
   }
@@ -3370,6 +3490,7 @@ input[type="range"]::-moz-range-thumb {
 .card-hover {
   transition: transform var(--transition-base), box-shadow var(--transition-base);
 }
+
 .card-hover:hover {
   transform: translateY(-3px);
   box-shadow: var(--shadow-glow);
@@ -3385,6 +3506,7 @@ input[type="range"]::-moz-range-thumb {
   text-align: center;
   gap: 0.75rem;
 }
+
 .empty-state__icon {
   width: 48px;
   height: 48px;
@@ -3396,11 +3518,13 @@ input[type="range"]::-moz-range-thumb {
   color: var(--color-primary);
   margin-bottom: 0.25rem;
 }
+
 .empty-state__title {
   font-size: var(--font-size-body);
   font-weight: var(--font-weight-semibold);
   color: var(--color-text-primary);
 }
+
 .empty-state__subtitle {
   font-size: var(--font-size-caption);
   color: var(--color-text-secondary);
@@ -3419,6 +3543,7 @@ input[type="range"]::-moz-range-thumb {
   justify-content: center;
   animation: fadeIn 0.15s ease-out;
 }
+
 .confirm-dialog {
   background: var(--color-surface);
   border: 1px solid var(--color-border-strong);
@@ -3430,22 +3555,26 @@ input[type="range"]::-moz-range-thumb {
   text-align: center;
   animation: modalSlideUp 0.25s ease-out;
 }
+
 .confirm-dialog__title {
   font-size: 1.125rem;
   font-weight: var(--font-weight-bold);
   margin-bottom: 0.5rem;
 }
+
 .confirm-dialog__message {
   font-size: var(--font-size-caption);
   color: var(--color-text-secondary);
   margin-bottom: 1.5rem;
   line-height: 1.7;
 }
+
 .confirm-dialog__actions {
   display: flex;
   gap: 0.75rem;
   justify-content: center;
 }
+
 .confirm-dialog__btn {
   padding: 0.6rem 1.5rem;
   border-radius: var(--radius-md);
@@ -3458,23 +3587,34 @@ input[type="range"]::-moz-range-thumb {
   transition: all var(--transition-fast);
   font-family: inherit;
 }
+
 .confirm-dialog__btn:hover {
   background: var(--color-border);
 }
+
 .confirm-dialog__btn--danger {
   background: var(--color-error);
   color: white;
   border-color: transparent;
 }
+
 .confirm-dialog__btn--danger:hover {
   opacity: 0.9;
 }
 
 /* ── Modal entrance animation ── */
 @keyframes modalSlideUp {
-  from { opacity: 0; transform: translateY(16px) scale(0.97); }
-  to { opacity: 1; transform: translateY(0) scale(1); }
+  from {
+    opacity: 0;
+    transform: translateY(16px) scale(0.97);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
 }
+
 .quran-modal-panel,
 .auth-gate-panel,
 .confirm-dialog {
@@ -3482,14 +3622,23 @@ input[type="range"]::-moz-range-thumb {
 }
 
 /* ── Toast with icons ── */
-.toast--success::before { content: '✓ '; }
-.toast--error::before { content: '✕ '; }
-.toast--warning::before { content: '⚠ '; }
+.toast--success::before {
+  content: '✓ ';
+}
+
+.toast--error::before {
+  content: '✕ ';
+}
+
+.toast--warning::before {
+  content: '⚠ ';
+}
 
 /* ── Pricing card glow (active plan) ── */
 .pricing-glow {
   position: relative;
 }
+
 .pricing-glow::before {
   content: '';
   position: absolute;
@@ -3501,24 +3650,37 @@ input[type="range"]::-moz-range-thumb {
   filter: blur(12px);
   animation: pricingPulse 3s ease-in-out infinite;
 }
+
 @keyframes pricingPulse {
-  0%, 100% { opacity: 0.3; }
-  50% { opacity: 0.6; }
+
+  0%,
+  100% {
+    opacity: 0.3;
+  }
+
+  50% {
+    opacity: 0.6;
+  }
 }
 
 /* ── Beta banner shimmer ── */
 @keyframes betaShimmer {
-  0% { background-position: -200% center; }
-  100% { background-position: 200% center; }
+  0% {
+    background-position: -200% center;
+  }
+
+  100% {
+    background-position: 200% center;
+  }
 }
+
 .beta-shimmer {
   background-size: 200% auto;
   background-image: linear-gradient(90deg,
-    transparent 0%,
-    rgba(107, 163, 224, 0.06) 40%,
-    rgba(165, 148, 232, 0.08) 60%,
-    transparent 100%
-  );
+      transparent 0%,
+      rgba(107, 163, 224, 0.06) 40%,
+      rgba(165, 148, 232, 0.08) 60%,
+      transparent 100%);
   animation: betaShimmer 4s linear infinite;
 }
 
@@ -3556,19 +3718,29 @@ select:focus-visible,
   border-radius: 12px;
   background: var(--color-surface-elevated);
   border: 1px solid var(--color-border-strong);
-  box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.05);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.05);
   backdrop-filter: blur(16px);
   transform: translateX(-50%);
   animation: selbar-in 0.2s ease;
   pointer-events: auto;
 }
+
 .selection-toolbar.is-hidden {
   display: none;
 }
+
 @keyframes selbar-in {
-  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
-  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(6px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
 }
+
 .sel-tool-btn {
   display: inline-flex;
   align-items: center;
@@ -3585,10 +3757,12 @@ select:focus-visible,
   transition: all 0.15s ease;
   white-space: nowrap;
 }
+
 .sel-tool-btn:hover {
   background: var(--color-surface);
   color: var(--color-text-primary);
 }
+
 .sel-tool-sep {
   width: 1px;
   height: 20px;
@@ -3606,6 +3780,7 @@ select:focus-visible,
   padding: 3px;
   overflow: hidden;
 }
+
 .summary-source-btn {
   flex: 1;
   padding: 8px 16px;
@@ -3619,9 +3794,11 @@ select:focus-visible,
   cursor: pointer;
   transition: all 0.2s ease;
 }
+
 .summary-source-btn:hover {
   color: var(--color-text-primary);
 }
+
 .summary-source-btn.active {
   background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
   color: var(--color-text-inverse);
@@ -3633,6 +3810,258 @@ select:focus-visible,
   margin-left: 4px;
   opacity: 0.7;
 }
+
 .editor-tab.active svg {
   opacity: 1;
 }
+
+/* ── Error Badge on Tab ── */
+.tab-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 10px;
+  background: #ef4444;
+  color: #fff;
+  font-size: 10px;
+  font-weight: 700;
+  margin-inline-start: 6px;
+  line-height: 1;
+  animation: badgePulse 2s ease-in-out infinite;
+}
+@keyframes badgePulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+}
+
+/* ── Find & Replace Bar ── */
+.find-replace-bar {
+  padding: 8px 16px;
+  background: var(--color-surface-elevated);
+  border-bottom: 1px solid var(--color-border);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.find-replace-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.find-input {
+  flex: 1;
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  padding: 6px 10px;
+  color: var(--color-text-primary);
+  font-size: 13px;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.2s;
+}
+.find-input:focus {
+  border-color: var(--color-primary);
+}
+.find-count {
+  font-size: 11px;
+  color: var(--color-text-secondary);
+  min-width: 35px;
+  text-align: center;
+}
+.find-btn {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 5px;
+  color: var(--color-text-secondary);
+  padding: 4px 8px;
+  cursor: pointer;
+  font-size: 12px;
+  transition: all 0.15s;
+  font-family: inherit;
+}
+.find-btn:hover {
+  background: var(--color-primary);
+  color: #fff;
+  border-color: var(--color-primary);
+}
+
+/* ── Find Highlights ── */
+.find-highlight {
+  background: rgba(255, 213, 79, 0.3);
+  border-radius: 2px;
+}
+.find-highlight--active {
+  background: rgba(255, 152, 0, 0.6);
+  outline: 2px solid var(--color-primary);
+  border-radius: 2px;
+}
+
+/* ── Focus Mode ── */
+body.focus-mode .main-nav,
+body.focus-mode .suggestions-panel,
+body.focus-mode .docs-panel,
+body.focus-mode .editor-footer,
+body.focus-mode .editor-stats,
+body.focus-mode .editor-actions {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.4s ease;
+}
+body.focus-mode .editor-layout {
+  grid-template-columns: 1fr !important;
+}
+body.focus-mode .format-toolbar {
+  opacity: 0.3;
+  transition: opacity 0.3s;
+}
+body.focus-mode .format-toolbar:hover {
+  opacity: 1;
+}
+body.focus-mode .editor-surface {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+/* ── Blockquote Styling in Editor ── */
+#editor-container blockquote {
+  border-right: 4px solid var(--color-primary);
+  margin: 8px 0;
+  padding: 8px 16px;
+  background: rgba(124, 131, 237, 0.08);
+  border-radius: 0 6px 6px 0;
+  color: var(--color-text-secondary);
+  font-style: italic;
+}
+
+/* ── HR Styling in Editor ── */
+#editor-container hr {
+  border: none;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, var(--color-border), transparent);
+  margin: 16px 0;
+}
+
+/* ── Tab Switch Animation ── */
+#write-area,
+#summarize-area,
+#dialect-area,
+#quran-area {
+  animation: tabFadeIn 0.3s ease-out;
+}
+@keyframes tabFadeIn {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* ── Typewriter Mode ── */
+.typewriter-mode {
+  scroll-behavior: smooth;
+  padding-top: 40vh !important;
+  padding-bottom: 40vh !important;
+}
+
+/* ── Collaboration Hint ── */
+.collab-hint {
+  font-size: 10px;
+  color: var(--color-text-secondary);
+  opacity: 0.7;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.collab-hint::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #22c55e;
+  display: inline-block;
+}
+
+/* ── Error Category Tabs ── */
+.error-tabs {
+  display: flex;
+  gap: 2px;
+  margin-bottom: 10px;
+  background: var(--color-border);
+  border-radius: 8px;
+  padding: 2px;
+  overflow: hidden;
+}
+.error-tab {
+  flex: 1;
+  padding: 5px 4px;
+  border: none;
+  background: transparent;
+  color: var(--color-text-secondary);
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: all 0.2s;
+  font-family: inherit;
+}
+.error-tab.active {
+  background: var(--color-primary);
+  color: #fff;
+}
+.error-tab:hover:not(.active) {
+  background: var(--color-surface);
+}
+
+/* ── Error Donut Chart ── */
+.error-chart-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  margin-bottom: 10px;
+  min-height: 0;
+}
+.error-donut {
+  transform: rotate(-90deg);
+}
+.chart-legend {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.chart-legend-item {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  color: var(--color-text-secondary);
+}
+.chart-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+/* ── Dismiss All Button ── */
+.dismiss-all-btn {
+  width: 100%;
+  margin-top: 6px;
+  font-size: 12px;
+  color: var(--color-text-secondary);
+  border: 1px dashed var(--color-border);
+  border-radius: 6px;
+  padding: 6px;
+  text-align: center;
+}
+.dismiss-all-btn:hover {
+  border-color: #ef4444;
+  color: #ef4444;
+}
+
+/* ── Score Sparkline ── */
+.sparkline {
+  display: block;
+  margin: 6px auto;
+}

src/index.html

@@ -673,10 +673,10 @@
              <span id="auto-save-status" class="text-xs text-secondary" style="opacity:0;transition:opacity 0.3s;"></span>
             </div>
             <div class="editor-tabs-center">
-             <button id="write-tab" onclick="switchTab('write')" class="editor-tab active" type="button"><svg class="tab-icon" width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg>كتابة</button>
-             <button id="summarize-tab" onclick="switchTab('summarize')" class="editor-tab" type="button"><svg class="tab-icon" width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>تلخيص</button>
-             <button id="dialect-tab" onclick="switchTab('dialect')" class="editor-tab" type="button"><svg class="tab-icon" width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/></svg>تحويل للفصحى</button>
-             <button id="quran-tab" onclick="switchTab('quran')" class="editor-tab" type="button"><svg class="tab-icon" width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>تدقيق النص القرآني</button>
+             <button id="write-tab" onclick="switchTab('write')" class="editor-tab active" data-tooltip="كتابة — الاختصار: Alt+1" type="button"><svg class="tab-icon" width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg>كتابة<span id="error-badge" class="tab-badge" style="display:none"></span></button>
+             <button id="summarize-tab" onclick="switchTab('summarize')" class="editor-tab" data-tooltip="تلخيص — الاختصار: Alt+2" type="button"><svg class="tab-icon" width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>تلخيص</button>
+             <button id="dialect-tab" onclick="switchTab('dialect')" class="editor-tab" data-tooltip="تحويل للفصحى — الاختصار: Alt+3" type="button"><svg class="tab-icon" width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/></svg>تحويل للفصحى</button>
+             <button id="quran-tab" onclick="switchTab('quran')" class="editor-tab" data-tooltip="تدقيق القرآن — الاختصار: Ctrl+Q" type="button"><svg class="tab-icon" width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>تدقيق النص القرآني</button>
             </div>
             <div class="flex items-center gap-2">
              <span id="doc-current-title" class="doc-current-title" style="display:none;"></span>
@@ -748,6 +748,12 @@
              <button id="fmt-ltr" class="fmt-btn" onclick="setDirection('ltr')" type="button" data-tooltip="يسار لليمين"><svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5H7a4 4 0 000 8h2m4-8v14m4-14v14M21 8l-4-3v6"/></svg></button>
              <button id="fmt-link" class="fmt-btn" onclick="insertLink()" type="button" data-tooltip="إدراج رابط"><svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/></svg></button>
              <button id="fmt-line-height" class="fmt-btn" onclick="cycleLineHeight()" type="button" data-tooltip="ارتفاع السطر"><svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 4v4m0-4l-1.5 1.5M20 4l1.5 1.5M20 20v-4m0 4l-1.5-1.5M20 20l1.5-1.5"/></svg></button>
+             <button id="fmt-indent" class="fmt-btn" onclick="execFormat('indent')" type="button" data-tooltip="مسافة بادئة"><svg width="15" height="15" fill="currentColor" viewBox="0 0 24 24"><path d="M3 5h18v2H3V5zm6 4h12v2H9V9zm0 4h12v2H9v-2zm-6 4h18v2H3v-2zM3 9l4 3-4 3V9z"/></svg></button>
+             <button id="fmt-outdent" class="fmt-btn" onclick="execFormat('outdent')" type="button" data-tooltip="إزالة المسافة البادئة"><svg width="15" height="15" fill="currentColor" viewBox="0 0 24 24"><path d="M3 5h18v2H3V5zm6 4h12v2H9V9zm0 4h12v2H9v-2zm-6 4h18v2H3v-2zM7 9l-4 3 4 3V9z"/></svg></button>
+             <button id="fmt-superscript" class="fmt-btn" onclick="execFormat('superscript')" type="button" data-tooltip="نص مرتفع"><svg width="15" height="15" fill="currentColor" viewBox="0 0 24 24"><path d="M16 7h2v1h-2v1h3V6h-2V5h2V4h-3v3zM5.47 13h2.06L10 7.22 12.47 13h2.06L10 3.3 5.47 13zM4 21l5-7h-3l5-7"/></svg></button>
+             <button id="fmt-subscript" class="fmt-btn" onclick="execFormat('subscript')" type="button" data-tooltip="نص منخفض"><svg width="15" height="15" fill="currentColor" viewBox="0 0 24 24"><path d="M16 18h2v1h-2v1h3v-4h-2v1h2v1h-3v1zM5.47 13h2.06L10 7.22 12.47 13h2.06L10 3.3 5.47 13z"/></svg></button>
+             <button id="fmt-blockquote" class="fmt-btn" onclick="formatBlockquote()" type="button" data-tooltip="اقتباس"><svg width="15" height="15" fill="currentColor" viewBox="0 0 24 24"><path d="M6 17h3l2-4V7H5v6h3l-2 4zm8 0h3l2-4V7h-6v6h3l-2 4z"/></svg></button>
+             <button id="fmt-hr" class="fmt-btn" onclick="execFormat('insertHorizontalRule')" type="button" data-tooltip="فاصل أفقي"><svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M3 12h18"/></svg></button>
             </div>
            </div>
            <div class="fmt-divider"></div>
@@ -781,6 +787,21 @@
             <button class="fmt-btn" onclick="execFormat('removeFormat')" type="button" data-tooltip="مسح التنسيق"><svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 4h12v3M12 4v16"/><path stroke-linecap="round" stroke-width="2.5" d="M5 19L19 5" opacity="0.6"/></svg></button>
            </div>
           </div>
+         <div id="find-replace-bar" class="find-replace-bar" style="display:none;">
+          <div class="find-replace-row">
+           <input type="text" id="find-input" class="find-input" placeholder="بحث..." autocomplete="off">
+           <span id="find-count" class="find-count">0/0</span>
+           <button type="button" class="find-btn" onclick="findPrev()" data-tooltip="السابق">▲</button>
+           <button type="button" class="find-btn" onclick="findNext()" data-tooltip="التالي">▼</button>
+           <button type="button" class="find-btn" onclick="toggleReplace()" data-tooltip="استبدال">⇄</button>
+           <button type="button" class="find-btn" onclick="closeFindReplace()" data-tooltip="إغلاق">✕</button>
+          </div>
+          <div id="replace-row" class="find-replace-row" style="display:none;">
+           <input type="text" id="replace-input" class="find-input" placeholder="استبدال بـ..." autocomplete="off">
+           <button type="button" class="find-btn" onclick="replaceCurrent()">استبدال</button>
+           <button type="button" class="find-btn" onclick="replaceAll()">استبدال الكل</button>
+          </div>
+         </div>
          <input type="file" id="doc-import-input" class="sr-only" accept=".txt,.docx,text/plain,application/vnd.openxmlformats-officedocument.wordprocessingml.document" aria-hidden="true">
          <div id="write-area">
           <div id="analysis-limit-banner" class="analysis-limit-banner is-hidden" role="status" aria-live="polite"></div>
@@ -803,14 +824,16 @@
            <div class="flex items-center gap-2"><span class="stat-dot stat-dot--punctuation" aria-hidden="true"></span><span class="text-sm text-secondary"><span id="punctuation-count">٠</span> ترقيم</span></div>
            <span class="stat-item--sep"></span>
            <span class="stat-item"><span id="char-count">٠</span> حرف</span>
-           <span class="stat-item"><span id="sentence-count">٠</span> جملة</span>
+           <span class="stat-item"><span id="paragraph-count">٠</span> فقرة</span>
+            <span class="stat-item"><span id="sentence-count">٠</span> جملة</span>
             <span class="stat-item" style="cursor:pointer;" onclick="setWordGoalUI()" title="اضغط لتحديد هدف ع��د الكلمات"><span id="word-count" class="font-bold">٠</span> كلمة</span>
             <span id="word-goal-indicator" class="word-goal-badge" style="display:none;cursor:pointer;" onclick="setWordGoalUI()" title="اضغط لتغيير الهدف"></span>
            <span class="stat-item--sep"></span>
            <span class="stat-item">⏱ <span id="reading-time">٠</span> د قراءة</span>
-          </div>
+          <span class="collab-hint" id="last-edit-hint"></span></div>
           <div class="editor-actions">
-            <button id="doc-save-btn" class="doc-save-btn-icon btn-ghost" type="button" aria-label="حفظ المستند" title="حفظ">
+            <button id="focus-mode-btn" class="btn-ghost" type="button" data-tooltip="وضع التركيز (Ctrl+Shift+F)" onclick="toggleFocusMode()"><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="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg></button>
+             <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>
            <button onclick="clearEditor()" class="btn-ghost" type="button" title="مسح الكل">
@@ -986,9 +1009,17 @@
        <!-- LEFT: Sidebar (score + suggestions + import/export) -->
        <div class="sidebar-panel sidebar-desktop">
         <div class="surface-card sidebar-card">
-         <h3 class="text-xl font-bold mb-4 text-right">الاقتراحات</h3>
+         <h3 class="text-xl font-bold mb-3 text-right">الاقتراحات</h3>
+          <div class="error-tabs">
+           <button class="error-tab active" data-filter="all" onclick="filterErrors('all')">الكل</button>
+           <button class="error-tab" data-filter="spelling" onclick="filterErrors('spelling')">إملائي</button>
+           <button class="error-tab" data-filter="grammar" onclick="filterErrors('grammar')">نحوي</button>
+           <button class="error-tab" data-filter="punctuation" onclick="filterErrors('punctuation')">ترقيم</button>
+          </div>
+          <div id="error-chart" class="error-chart-wrap"></div>
          <div id="suggestions-list" class="suggestions-scroll" role="list" aria-live="polite" aria-label="اقتراحات التصحيح"></div>
          <button id="apply-all-btn" class="btn-primary apply-all-btn is-hidden" type="button">تطبيق الكل</button>
+          <button id="dismiss-filtered-btn" class="btn-ghost dismiss-all-btn is-hidden" type="button" onclick="dismissAllFiltered()">تجاهل الكل</button>
         </div>
         <div class="surface-card sidebar-card">
          <h3 class="text-xl font-bold mb-4 text-right">تقييم الكتابة</h3>

src/js/format.js

@@ -95,13 +95,369 @@ function cycleLineHeight() {
   const idx = heights.indexOf(_currentLineHeight);
   _currentLineHeight = heights[(idx + 1) % heights.length];
   editor.style.lineHeight = _currentLineHeight;
-  // Show brief notification
   const btn = document.getElementById('fmt-line-height');
   if (btn) {
     btn.setAttribute('data-tooltip', 'ارتفاع السطر: ' + _currentLineHeight);
   }
 }
 
+/* ── Blockquote ── */
+function formatBlockquote() {
+  execFormat('formatBlock', 'blockquote');
+}
+
+/* ── Paragraph Spacing ── */
+var _paragraphSpacing = 'normal';
+function cycleParagraphSpacing() {
+  const editor = getEditorElement();
+  if (!editor) return;
+  const modes = { tight: '0.3em', normal: '0.8em', wide: '1.5em' };
+  const order = ['tight', 'normal', 'wide'];
+  const idx = order.indexOf(_paragraphSpacing);
+  _paragraphSpacing = order[(idx + 1) % order.length];
+  const val = modes[_paragraphSpacing];
+  editor.style.setProperty('--paragraph-spacing', val);
+  editor.querySelectorAll('div,p').forEach(el => {
+    el.style.marginBottom = val;
+  });
+}
+
+/* ── Find & Replace ── */
+var _findMatches = [];
+var _findIdx = -1;
+
+function openFindReplace() {
+  const bar = document.getElementById('find-replace-bar');
+  if (bar) {
+    bar.style.display = 'block';
+    document.getElementById('find-input')?.focus();
+  }
+}
+
+function closeFindReplace() {
+  const bar = document.getElementById('find-replace-bar');
+  if (bar) bar.style.display = 'none';
+  clearHighlights();
+  _findMatches = [];
+  _findIdx = -1;
+  const countEl = document.getElementById('find-count');
+  if (countEl) countEl.textContent = '0/0';
+}
+
+function toggleReplace() {
+  const row = document.getElementById('replace-row');
+  if (row) row.style.display = row.style.display === 'none' ? 'flex' : 'none';
+}
+
+function doFind() {
+  const query = document.getElementById('find-input')?.value;
+  if (!query) { clearHighlights(); return; }
+  const editor = getEditorElement();
+  if (!editor) return;
+  clearHighlights();
+  const walker = document.createTreeWalker(editor, NodeFilter.SHOW_TEXT, null, false);
+  _findMatches = [];
+  let node;
+  while (node = walker.nextNode()) {
+    let idx = node.textContent.indexOf(query);
+    while (idx !== -1) {
+      _findMatches.push({ node, idx, len: query.length });
+      idx = node.textContent.indexOf(query, idx + 1);
+    }
+  }
+  // Highlight all matches
+  for (let i = _findMatches.length - 1; i >= 0; i--) {
+    const m = _findMatches[i];
+    const range = document.createRange();
+    range.setStart(m.node, m.idx);
+    range.setEnd(m.node, m.idx + m.len);
+    const span = document.createElement('span');
+    span.className = 'find-highlight';
+    range.surroundContents(span);
+  }
+  // Re-collect highlighted spans
+  _findMatches = Array.from(editor.querySelectorAll('.find-highlight'));
+  _findIdx = _findMatches.length > 0 ? 0 : -1;
+  updateFindCount();
+  if (_findIdx >= 0) highlightCurrent();
+}
+
+function findNext() {
+  if (_findMatches.length === 0) { doFind(); return; }
+  _findIdx = (_findIdx + 1) % _findMatches.length;
+  updateFindCount();
+  highlightCurrent();
+}
+
+function findPrev() {
+  if (_findMatches.length === 0) { doFind(); return; }
+  _findIdx = (_findIdx - 1 + _findMatches.length) % _findMatches.length;
+  updateFindCount();
+  highlightCurrent();
+}
+
+function highlightCurrent() {
+  _findMatches.forEach((el, i) => {
+    el.classList.toggle('find-highlight--active', i === _findIdx);
+  });
+  if (_findMatches[_findIdx]) {
+    _findMatches[_findIdx].scrollIntoView({ block: 'center', behavior: 'smooth' });
+  }
+}
+
+function updateFindCount() {
+  const el = document.getElementById('find-count');
+  if (el) el.textContent = _findMatches.length > 0 ? `${_findIdx + 1}/${_findMatches.length}` : '0/0';
+}
+
+function replaceCurrent() {
+  if (_findIdx < 0 || !_findMatches[_findIdx]) return;
+  const replaceVal = document.getElementById('replace-input')?.value || '';
+  _findMatches[_findIdx].textContent = replaceVal;
+  _findMatches[_findIdx].className = '';
+  _findMatches.splice(_findIdx, 1);
+  if (_findIdx >= _findMatches.length) _findIdx = 0;
+  updateFindCount();
+  if (_findMatches.length > 0) highlightCurrent();
+}
+
+function replaceAll() {
+  const replaceVal = document.getElementById('replace-input')?.value || '';
+  _findMatches.forEach(el => {
+    el.textContent = replaceVal;
+    el.className = '';
+  });
+  _findMatches = [];
+  _findIdx = -1;
+  updateFindCount();
+}
+
+function clearHighlights() {
+  const editor = getEditorElement();
+  if (!editor) return;
+  editor.querySelectorAll('.find-highlight').forEach(el => {
+    const parent = el.parentNode;
+    parent.replaceChild(document.createTextNode(el.textContent), el);
+    parent.normalize();
+  });
+}
+
+/* ── Focus Mode ── */
+var _focusMode = false;
+function toggleFocusMode() {
+  _focusMode = !_focusMode;
+  document.body.classList.toggle('focus-mode', _focusMode);
+  const btn = document.getElementById('focus-mode-btn');
+  if (btn) btn.classList.toggle('fmt-active', _focusMode);
+}
+
+/* ── Typewriter Mode ── */
+var _typewriterMode = false;
+function toggleTypewriterMode() {
+  _typewriterMode = !_typewriterMode;
+  const editor = getEditorElement();
+  if (!editor) return;
+  editor.classList.toggle('typewriter-mode', _typewriterMode);
+  if (_typewriterMode) {
+    editor.addEventListener('input', typewriterScroll);
+    editor.addEventListener('click', typewriterScroll);
+  } else {
+    editor.removeEventListener('input', typewriterScroll);
+    editor.removeEventListener('click', typewriterScroll);
+  }
+}
+function typewriterScroll() {
+  const sel = window.getSelection();
+  if (!sel.rangeCount) return;
+  const range = sel.getRangeAt(0);
+  const rect = range.getBoundingClientRect();
+  const editor = getEditorElement();
+  if (!editor) return;
+  const editorRect = editor.getBoundingClientRect();
+  const middle = editorRect.height / 2;
+  const offset = rect.top - editorRect.top - middle;
+  editor.scrollTop += offset;
+}
+
+/* ── Version History ── */
+function saveVersion() {
+  const editor = getEditorElement();
+  if (!editor) return;
+  const versions = JSON.parse(localStorage.getItem('bayan_versions') || '[]');
+  versions.push({
+    timestamp: Date.now(),
+    content: editor.innerHTML,
+    preview: editor.textContent.substring(0, 50)
+  });
+  // Keep last 20 versions
+  if (versions.length > 20) versions.shift();
+  localStorage.setItem('bayan_versions', JSON.stringify(versions));
+}
+
+function showVersionHistory() {
+  const versions = JSON.parse(localStorage.getItem('bayan_versions') || '[]');
+  if (!versions.length) { alert('لا توجد نسخ سابقة'); return; }
+  let msg = 'اختر نسخة للاستعادة:\n\n';
+  versions.forEach((v, i) => {
+    const date = new Date(v.timestamp);
+    msg += `${i + 1}. ${date.toLocaleString('ar-EG')} — "${v.preview}..."\n`;
+  });
+  const choice = prompt(msg + '\nأدخل رقم النسخة:');
+  if (!choice) return;
+  const idx = parseInt(choice) - 1;
+  if (idx >= 0 && idx < versions.length) {
+    const editor = getEditorElement();
+    if (editor) {
+      pushUndoState();
+      editor.innerHTML = versions[idx].content;
+    }
+  }
+}
+
+/* ── Collaboration Hints (last edit timestamp) ── */
+var _lastEditTime = null;
+function updateLastEditTime() {
+  _lastEditTime = Date.now();
+  updateCollabHint();
+}
+function updateCollabHint() {
+  const el = document.getElementById('last-edit-hint');
+  if (!el || !_lastEditTime) return;
+  const diff = Math.floor((Date.now() - _lastEditTime) / 1000);
+  if (diff < 5) el.textContent = 'الآن';
+  else if (diff < 60) el.textContent = `منذ ${diff} ثانية`;
+  else if (diff < 3600) el.textContent = `منذ ${Math.floor(diff/60)} دقيقة`;
+  else el.textContent = `منذ ${Math.floor(diff/3600)} ساعة`;
+}
+
+/* ── Tashkeel (Diacritics) ── */
+function addTashkeel() {
+  // This adds basic tashkeel placeholder — real implementation needs NLP
+  alert('ميزة التشكيل التلقائي قيد التطوير. سيتم إضافتها قريباً.');
+}
+function removeTashkeel() {
+  const editor = getEditorElement();
+  if (!editor) return;
+  pushUndoState();
+  const diacritics = /[\u064B-\u065F\u0670\u06D6-\u06ED]/g;
+  // Walk through text nodes only
+  const walker = document.createTreeWalker(editor, NodeFilter.SHOW_TEXT, null, false);
+  let node;
+  while (node = walker.nextNode()) {
+    const cleaned = node.textContent.replace(diacritics, '');
+    if (cleaned !== node.textContent) {
+      node.textContent = cleaned;
+    }
+  }
+}
+
+/* ── Number Conversion (Arabic ↔ Hindi) ── */
+function convertToHindiNumerals() {
+  const editor = getEditorElement();
+  if (!editor) return;
+  pushUndoState();
+  const map = {'0':'٠','1':'١','2':'٢','3':'٣','4':'٤','5':'٥','6':'٦','7':'٧','8':'٨','9':'٩'};
+  walkTextNodes(editor, text => text.replace(/[0-9]/g, d => map[d]));
+}
+function convertToArabicNumerals() {
+  const editor = getEditorElement();
+  if (!editor) return;
+  pushUndoState();
+  const map = {'٠':'0','١':'1','٢':'2','٣':'3','٤':'4','٥':'5','٦':'6','٧':'7','٨':'8','٩':'9'};
+  walkTextNodes(editor, text => text.replace(/[٠-٩]/g, d => map[d]));
+}
+function walkTextNodes(root, fn) {
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null, false);
+  let node;
+  while (node = walker.nextNode()) {
+    const result = fn(node.textContent);
+    if (result !== node.textContent) node.textContent = result;
+  }
+}
+
+/* ── Text Cleanup ── */
+function cleanupText() {
+  const editor = getEditorElement();
+  if (!editor) return;
+  pushUndoState();
+  walkTextNodes(editor, text => {
+    return text
+      .replace(/[\u064B-\u065F\u0670\u06D6-\u06ED]/g, '') // Remove diacritics
+      .replace(/\u200C/g, '') // Remove ZWNJ
+      .replace(/\u200D/g, '') // Remove ZWJ
+      .replace(/\u00A0/g, ' ') // NBSP → space
+      .replace(/ {2,}/g, ' ') // Multiple spaces → one
+      .replace(/\n{3,}/g, '\n\n'); // Multiple newlines → two
+  });
+}
+
+/* ── Error Badge Update ── */
+function updateErrorBadge() {
+  const badge = document.getElementById('error-badge');
+  if (!badge) return;
+  const s = parseInt(document.getElementById('spelling-count')?.textContent) || 0;
+  const g = parseInt(document.getElementById('grammar-count')?.textContent) || 0;
+  const p = parseInt(document.getElementById('punctuation-count')?.textContent) || 0;
+  const total = s + g + p;
+  if (total > 0) {
+    badge.textContent = total;
+    badge.style.display = 'inline-flex';
+  } else {
+    badge.style.display = 'none';
+  }
+}
+
+/* ── Paragraph Count ── */
+function updateParagraphCount() {
+  const editor = getEditorElement();
+  if (!editor) return;
+  const text = editor.textContent || '';
+  const paras = text.split(/\n\s*\n/).filter(p => p.trim().length > 0);
+  const count = text.trim().length > 0 ? Math.max(1, paras.length) : 0;
+  const el = document.getElementById('paragraph-count');
+  if (el) el.textContent = count.toLocaleString('ar-EG');
+}
+
+/* ── Tab Keyboard Shortcuts ── */
+function initTabShortcuts() {
+  document.addEventListener('keydown', (e) => {
+    if (e.altKey && !e.ctrlKey) {
+      if (e.key === '1') { e.preventDefault(); switchTab('write'); }
+      else if (e.key === '2') { e.preventDefault(); switchTab('summarize'); }
+      else if (e.key === '3') { e.preventDefault(); switchTab('dialect'); }
+      else if (e.key === '4') { e.preventDefault(); switchTab('quran'); }
+    }
+    // Ctrl+H for Find & Replace
+    if (e.ctrlKey && e.key === 'h') {
+      e.preventDefault();
+      openFindReplace();
+    }
+    // Ctrl+Shift+F for Focus Mode
+    if (e.ctrlKey && e.shiftKey && e.key === 'F') {
+      e.preventDefault();
+      toggleFocusMode();
+    }
+    // Ctrl+K for link
+    if (e.ctrlKey && e.key === 'k') {
+      e.preventDefault();
+      insertLink();
+    }
+  });
+}
+
+/* ── Font Hover Preview ── */
+function initFontHoverPreview() {
+  document.querySelectorAll('#fmt-font-menu .fmt-dropdown__item').forEach(item => {
+    item.addEventListener('mouseenter', () => {
+      const label = document.getElementById('fmt-font-label');
+      if (label) label.style.fontFamily = item.dataset.font;
+    });
+    item.addEventListener('mouseleave', () => {
+      const label = document.getElementById('fmt-font-label');
+      if (label) label.style.fontFamily = '';
+    });
+  });
+}
 
 /* ── Font family ── */
 function formatFont(fontName) {
@@ -308,6 +664,42 @@ function initFormatToolbar() {
   // Item 8: Color pickers
   initColorPicker('fmt-textcolor', 'foreColor', 'fmt-textcolor-bar');
   initColorPicker('fmt-highlight', 'hiliteColor', 'fmt-highlight-bar');
+
+  // Tab keyboard shortcuts (Alt+1/2/3/4, Ctrl+H, Ctrl+Shift+F, Ctrl+K)
+  initTabShortcuts();
+
+  // Font hover preview
+  initFontHoverPreview();
+
+  // Find input listener
+  const findInput = document.getElementById('find-input');
+  if (findInput) {
+    findInput.addEventListener('input', doFind);
+    findInput.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') { e.shiftKey ? findPrev() : findNext(); }
+      if (e.key === 'Escape') closeFindReplace();
+    });
+  }
+
+  // Auto-save version every 2 minutes
+  setInterval(() => {
+    const ed = getEditorElement();
+    if (ed && ed.textContent.trim().length > 10) saveVersion();
+  }, 120000);
+
+  // Collaboration hint updater every 30s
+  setInterval(updateCollabHint, 30000);
+
+  // Hook editor input for error badge + paragraph count + last edit time
+  if (editor) {
+    const origInputHandler = editor.oninput;
+    editor.addEventListener('input', () => {
+      updateParagraphCount();
+      updateLastEditTime();
+      // Delay badge update to let analysis finish
+      setTimeout(updateErrorBadge, 2000);
+    });
+  }
 }
 
 /* ── Item 8: Color Picker ── */
@@ -443,3 +835,89 @@ function initDocSearch() {
     });
   });
 }
+
+/* ── Error Filtering (Sidebar tabs) ── */
+var _currentErrorFilter = 'all';
+function filterErrors(type) {
+  _currentErrorFilter = type;
+  // Update tab active state
+  document.querySelectorAll('.error-tab').forEach(tab => {
+    tab.classList.toggle('active', tab.dataset.filter === type);
+  });
+  // Filter suggestion items
+  document.querySelectorAll('#suggestions-list .suggestion-item, #suggestions-list .sugg-card').forEach(item => {
+    if (type === 'all') {
+      item.style.display = '';
+    } else {
+      const itemType = item.dataset.type || item.getAttribute('data-error-type') || '';
+      item.style.display = itemType.includes(type) ? '' : 'none';
+    }
+  });
+  // Show/hide dismiss button
+  const dismissBtn = document.getElementById('dismiss-filtered-btn');
+  if (dismissBtn) dismissBtn.classList.toggle('is-hidden', type === 'all');
+}
+
+function dismissAllFiltered() {
+  const type = _currentErrorFilter;
+  if (type === 'all') return;
+  document.querySelectorAll('#suggestions-list .suggestion-item, #suggestions-list .sugg-card').forEach(item => {
+    const itemType = item.dataset.type || item.getAttribute('data-error-type') || '';
+    if (itemType.includes(type)) {
+      item.remove();
+    }
+  });
+}
+
+/* ── Error Breakdown Chart (SVG Donut) ── */
+function renderErrorChart() {
+  const container = document.getElementById('error-chart');
+  if (!container) return;
+  const s = parseInt(document.getElementById('spelling-count')?.textContent) || 0;
+  const g = parseInt(document.getElementById('grammar-count')?.textContent) || 0;
+  const p = parseInt(document.getElementById('punctuation-count')?.textContent) || 0;
+  const total = s + g + p;
+  if (total === 0) {
+    container.innerHTML = '';
+    return;
+  }
+  const r = 30, cx = 40, cy = 40, c = 2 * Math.PI * r;
+  const segments = [
+    { val: s, color: '#ef4444', label: 'إملائي' },
+    { val: g, color: '#f59e0b', label: 'نحوي' },
+    { val: p, color: '#22c55e', label: 'ترقيم' },
+  ].filter(seg => seg.val > 0);
+  let offset = 0;
+  let paths = '';
+  segments.forEach(seg => {
+    const pct = seg.val / total;
+    const dash = c * pct;
+    const gap = c - dash;
+    paths += `<circle cx="${cx}" cy="${cy}" r="${r}" fill="none" stroke="${seg.color}" stroke-width="8" stroke-dasharray="${dash} ${gap}" stroke-dashoffset="${-offset}" opacity="0.85"/>`;
+    offset += dash;
+  });
+  let legend = segments.map(seg => `<span class="chart-legend-item"><span class="chart-dot" style="background:${seg.color}"></span>${seg.label}: ${seg.val}</span>`).join('');
+  container.innerHTML = `<svg width="80" height="80" viewBox="0 0 80 80" class="error-donut">${paths}<text x="${cx}" y="${cy}" text-anchor="middle" dominant-baseline="central" fill="var(--color-text-primary)" font-size="14" font-weight="700">${total}</text></svg><div class="chart-legend">${legend}</div>`;
+}
+
+/* ── Score History (Sparkline) ── */
+var _scoreHistory = [];
+function trackScore(score) {
+  _scoreHistory.push(score);
+  if (_scoreHistory.length > 20) _scoreHistory.shift();
+  renderSparkline();
+}
+function renderSparkline() {
+  const container = document.getElementById('score-sparkline');
+  if (!container || _scoreHistory.length < 2) return;
+  const w = 120, h = 30;
+  const max = Math.max(..._scoreHistory, 100);
+  const min = Math.min(..._scoreHistory, 0);
+  const range = max - min || 1;
+  const points = _scoreHistory.map((v, i) => {
+    const x = (i / (_scoreHistory.length - 1)) * w;
+    const y = h - ((v - min) / range) * h;
+    return `${x},${y}`;
+  }).join(' ');
+  container.innerHTML = `<svg width="${w}" height="${h}" class="sparkline"><polyline points="${points}" fill="none" stroke="var(--color-primary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+}