Spaces:

bayan10
/

bayan-api

Running

App Files Files Community

bayan-api / src /index.html

youssefreda9

feat: Add popover dismiss button (تجاهل) + dismiss CSS styling

6b8f86b 3 days ago

Raw

History Blame Contribute Delete

146 kB

	<!doctype html>
	<html lang="ar" dir="rtl" class="h-full">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="supabase-url" content="">
	<meta name="supabase-anon-key" content="">
	<title>بيان - مساعد الكتابة العربية الذكي</title>
	<meta name="description" content="بيان — منصة ذكاء اصطناعي متكاملة لتصحيح الإملاء والنحو والترقيم وتلخيص النصوص والإكمال التلقائي وتدقيق القرآن الكريم وتحويل اللهجات — مصمّمة خصيصًا للغة العربية. جرّبه مجاناً!">
	<link rel="icon" type="image/svg+xml" href="/favicon.svg">
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Amiri+Quran&family=Cairo:wght@400;500;600;700&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="/css/tokens.css">
	<link rel="stylesheet" href="/css/base.css">
	<link rel="stylesheet" href="/css/components.css">

	<script src="/js/vendor/supabase.min.js"></script>
	<script src="/js/auth/config.js"></script>
	<script src="/js/auth/client.js"></script>
	<script src="/js/auth/session.js"></script>
	<script src="/js/auth/auth.js"></script>
	<script src="/js/auth/auth-ui.js"></script>
	<script src="/js/theme.js"></script>
	<script src="/js/vendor/mammoth.browser.min.js"></script>
	<script src="/js/vendor/docx.umd.js"></script>
	<script src="/js/vendor/FileSaver.min.js"></script>
	<script src="/js/vendor/html2pdf.bundle.min.js"></script>
	<script src="/js/renderer.js"></script>
	<script src="/js/selection.js"></script>
	<script src="/js/ui.js"></script>
	<script src="/js/documents/doc-utils.js"></script>
	<script src="/js/editor.js"></script>
	<script src="/js/autocomplete.js"></script>
	<script src="/js/format.js"></script>
	<script src="/js/documents/import.js"></script>
	<script src="/js/documents/export.js?v=20260615d"></script>
	<script src="/js/documents/documents.js"></script>
	<!-- Phase 7 — Sync System -->
	<script src="/js/sync/sync-queue.js"></script>
	<script src="/js/sync/sync-resolver.js"></script>
	<script src="/js/sync/sync-manager.js"></script>
	<!-- Phase 6 — Cloud Persistence -->
	<script src="/js/documents-cloud/documents-api.js"></script>
	<script src="/js/documents-cloud/documents-state.js"></script>
	<script src="/js/documents-cloud/documents-ui.js"></script>
	<script src="/js/summaries/summaries-api.js"></script>
	<script src="/js/summaries/summaries-ui.js"></script>
	<script src="/js/settings-sync/settings-api.js"></script>
	<script src="/js/settings-sync/settings-sync.js"></script>
	</head>
	<body class="h-full page-bg">
	<div class="h-full overflow-auto"><!-- Navigation -->
	<nav class="site-nav fixed top-0 right-0 left-0 z-50" role="navigation" aria-label="التنقل الرئيسي">
	<div class="max-w-7xl mx-auto px-4 md:px-6 py-3">
	<div class="flex items-center justify-between gap-3">
	<div class="flex items-center gap-3">
	<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>
	<button onclick="showPage('home')" class="flex items-center gap-3" style="background:none;border:none;cursor:pointer;" aria-label="الرئيسية"><svg width="22" height="22" fill="none" stroke="url(#navGrad)" viewBox="0 0 24 24" style="flex-shrink:0;"><defs><linearGradient id="navGrad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:var(--color-primary)"/><stop offset="100%" style="stop-color:var(--color-secondary)"/></linearGradient></defs><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><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>
	<button onclick="showPage('features')" class="nav-link text-base font-medium" data-page="features">الميزات</button>
	<button onclick="showPage('pricing')" class="nav-link text-base font-medium" data-page="pricing">الأسعار</button>
	<button onclick="showPage('editor')" class="nav-link text-base font-medium" data-page="editor">المحرر</button>
	<a href="https://bayyinah-alpha.vercel.app/" class="nav-bayyinah-link" target="_blank" rel="noopener noreferrer" aria-label="بَيِّنَة — مساعد ذكي للإجابة عن أسئلة القرآن والحديث وقصص الأنبياء"><svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="flex-shrink:0;"><path d="M12 7v14"/><path d="M16 12h2"/><path d="M16 8h2"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/><path d="M6 12h2"/><path d="M6 8h2"/></svg> بَيِّنَة <span class="nav-bayyinah-arrow">↗</span></a>
	</div>
	<div class="flex items-center gap-2 md:gap-3">
	<div id="auth-menu-wrap" class="auth-menu-wrap is-hidden">
	<div class="auth-dropdown">
	<button id="auth-menu-trigger" class="auth-menu-trigger" type="button" aria-label="قائمة الحساب" aria-haspopup="true" aria-expanded="false">
	<span id="auth-avatar" class="auth-avatar" aria-hidden="true"><svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24"><path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z"/></svg></span>
	<span id="auth-display-name" class="auth-display-name">ضيف</span>
	<span class="auth-menu-chevron" aria-hidden="true">▾</span>
	</button>
	<div id="auth-account-menu" class="auth-account-menu" role="menu" aria-label="الحساب">
	<div class="auth-account-menu__header">
	<span id="auth-provider-label" class="auth-provider-label">ضيف</span>
	</div>
	<button id="auth-link-google-btn" type="button" class="auth-account-menu__item" role="menuitem">ربط حساب Google</button>
	<button id="auth-logout-btn" type="button" class="auth-account-menu__item auth-account-menu__item--danger" role="menuitem">تسجيل الخروج</button>
	</div>
	</div>
	</div>
	<button id="theme-toggle" class="theme-toggle-animated" aria-label="تبديل السمة" aria-pressed="true" type="button">
	<svg class="theme-icon-sun" width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
	<svg class="theme-icon-moon" width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg>
	</button>

	</div>
	</div>
	</div>
	</nav>
	<!-- Mobile drawer -->
	<div id="mobile-drawer" class="mobile-drawer" aria-hidden="true">
	<div id="mobile-drawer-backdrop" class="mobile-drawer-backdrop"></div>
	<div class="mobile-drawer-panel" role="dialog" aria-label="قائمة التنقل">
	<button id="mobile-drawer-close" class="mobile-drawer-link" style="text-align:left" aria-label="إغلاق القائمة">✕ إغلاق</button>
	<button class="mobile-drawer-link active" data-page="home">الرئيسية</button>
	<button class="mobile-drawer-link" data-page="features">الميزات</button>
	<button class="mobile-drawer-link" data-page="pricing">الأسعار</button>
	<button class="mobile-drawer-link" data-page="editor">المحرر</button>
	<a href="https://bayyinah-alpha.vercel.app/" class="mobile-drawer-link mobile-drawer-link-external" target="_blank" rel="noopener noreferrer" aria-label="بَيِّنَة — مساعد ذكي للإجابة عن أسئلة القرآن والحديث وقصص الأنبياء">بَيِّنَة — القرآن والحديث والسيرة</a>
	<div class="auth-drawer-section">
	<p class="auth-drawer-label">الحساب</p>
	<p id="auth-drawer-name" class="auth-drawer-name">—</p>
	<p id="auth-drawer-provider" class="auth-drawer-provider"></p>
	<button id="auth-link-google-btn-mobile" type="button" class="mobile-drawer-link auth-drawer-action is-hidden">ربط حساب Google</button>
	<button id="auth-logout-btn-mobile" type="button" class="mobile-drawer-link auth-drawer-action is-hidden">تسجيل الخروج</button>
	</div>
	</div>
	</div>
	<div id="auth-offline-banner" class="auth-offline-banner is-hidden" role="status" aria-live="polite">
	تعذر الاتصال بخدمة المصادقة. يمكنك متابعة استخدام المحرر والمحاولة لاحقاً.
	</div>
	<!-- Phase 6.1 — Docs Sidebar (mobile only overlay) -->
	<div id="docs-sidebar" class="docs-sidebar" role="complementary" aria-label="مستنداتي">
	<div class="docs-sidebar__header">
	<span class="docs-sidebar__title">مستنداتي</span>
	</div>
	<div class="docs-sidebar__body">
	<button id="docs-new-btn-mobile" class="docs-new-btn" type="button" aria-label="مستند جديد">
	<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="M12 4v16m8-8H4"/></svg>
	مستند جديد
	</button>
	<div id="docs-list-mobile" role="list" aria-label="قائمة المستندات"></div>
	</div>
	</div>
	<!-- Auth Gate -->
	<div id="auth-gate" class="auth-gate" aria-hidden="true" role="dialog" aria-labelledby="auth-gate-title" aria-modal="true">
	<div id="auth-gate-backdrop" class="auth-gate-backdrop"></div>
	<div class="auth-gate-panel auth-gate-panel--desktop">
	<h2 id="auth-gate-title" class="auth-gate-title">مرحباً بك في بيان</h2>
	<p class="auth-gate-subtitle">اختر طريقة المتابعة للبدء في الكتابة والتحليل</p>
	<div class="auth-gate-actions">
	<button id="auth-guest-btn" type="button" class="btn-primary auth-gate-btn">المتابعة كضيف</button>
	<button id="auth-google-btn" type="button" class="btn-ghost auth-gate-btn auth-gate-btn--google">
	<svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="currentColor" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="currentColor" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="currentColor" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
	المتابعة باستخدام Google
	</button>
	</div>
	</div>
	<div id="auth-gate-sheet" class="auth-gate-panel auth-gate-panel--mobile">
	<div class="bottom-sheet-handle" aria-hidden="true"></div>
	<h2 class="auth-gate-title">مرحباً بك في بيان</h2>
	<p class="auth-gate-subtitle">اختر طريقة المتابعة</p>
	<button id="auth-guest-btn-mobile" type="button" class="btn-primary auth-gate-btn w-full">المتابعة كضيف</button>
	<button id="auth-google-btn-mobile" type="button" class="btn-ghost auth-gate-btn auth-gate-btn--google w-full">المتابعة باستخدام Google</button>
	</div>
	</div><!-- Home Page -->
	<div id="page-home" class="page"><!-- Hero Section -->
	<section class="gradient-bg min-h-screen pt-28 pb-20 relative overflow-hidden"><!-- Background Decoration -->
	<div class="absolute inset-0 overflow-hidden pointer-events-none">
	<div class="absolute top-20 left-20 w-96 h-96 rounded-full opacity-20" style="background: radial-gradient(circle, var(--primary-color) 0%, transparent 70%); filter: blur(80px);"></div>
	<div class="absolute bottom-20 right-20 w-96 h-96 rounded-full opacity-20" style="background: radial-gradient(circle, var(--secondary-color) 0%, transparent 70%); filter: blur(80px);"></div>
	</div>
	<div class="max-w-7xl mx-auto px-6 relative z-10">
	<div class="grid lg:grid-cols-2 gap-16 items-center"><!-- Hero Content -->
	<div class="text-center lg:text-right animate-fade-in">

	<h1 id="hero-headline" class="text-5xl lg:text-7xl font-bold leading-tight mb-6" style="line-height: 1.4;">اكتب العربية<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.35); color: var(--text-color); box-shadow: 0 0 20px rgba(107, 163, 224, 0.12);">اكتشف الميزات</button>
	</div><!-- Stats -->
	<div class="flex items-center gap-8 justify-center lg:justify-start">
	<div class="text-center">
	<div class="text-3xl font-bold text-gradient">
	٧ أدوات
	</div>
	<div class="text-sm mt-1" style="color: var(--text-secondary);">
	ذكاء اصطناعي
	</div>
	</div>
	<div class="w-px h-12" style="background: rgba(255, 255, 255, 0.2);"></div>
	<div class="text-center">
	<div class="text-3xl font-bold text-gradient">
	فوري
	</div>
	<div class="text-sm mt-1" style="color: var(--text-secondary);">
	تحليل لحظي
	</div>
	</div>
	<div class="w-px h-12" style="background: rgba(255, 255, 255, 0.2);"></div>
	<div class="text-center">
	<div class="text-3xl font-bold text-gradient">
	مجاني
	</div>
	<div class="text-sm mt-1" style="color: var(--text-secondary);">
	لا يحتاج تسجيل
	</div>
	</div>
	</div>
	</div><!-- Editor Mockup -->
	<div class="relative animate-float">
	<div class="rounded-3xl overflow-hidden shadow-2xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.1);"><!-- Editor Header -->
	<div class="flex items-center justify-between p-4 border-b" style="border-color: rgba(255, 255, 255, 0.1);">
	<div class="flex items-center gap-3">
	<div class="w-3 h-3 rounded-full" style="background: #ef4444;"></div>
	<div class="w-3 h-3 rounded-full" style="background: #fbbf24;"></div>
	<div class="w-3 h-3 rounded-full" style="background: #22c55e;"></div>
	</div><span class="text-sm" style="color: var(--text-secondary);">محرر بيان</span>
	<div class="w-20"></div>
	</div><!-- Mock Editor Content -->
	<div class="p-8 editor-content text-right text-lg" dir="rtl" style="background: var(--surface-color); color: var(--text-color); min-height: 300px;">
	<p class="mb-4">تعتبر اللغة العربية من أجمل <span class="spelling-error">اللغاة</span> في العالم<span class="punctuation-suggestion">،</span> وهي لغة <span class="spelling-error">القرأن</span> الكريم<span class="punctuation-suggestion">.</span></p>
	<p class="mb-4">الطالبات <span class="grammar-error">ذهبوا</span> إلى المكتبة لأن <span class="spelling-error">الأمتحان</span> قريب جداً<span class="punctuation-suggestion">.</span></p>
	<p>محرر بيان يساعدك على كتابة نصوص عربية <span class="spelling-error">صحيحه</span> بكل <span style="color: var(--text-secondary); opacity: 0.4; font-style: italic; border-bottom: 1px dashed rgba(107,163,224,0.3);">سهولة ويسر وإتقان</span></p>
	</div><!-- Mock Stats Bar -->
	<div class="flex items-center justify-between p-4 border-t" style="border-color: rgba(255, 255, 255, 0.1);">
	<div class="flex items-center gap-6">
	<div class="flex items-center gap-2">
	<div class="w-3 h-3 rounded-full" style="background: #ef4444;"></div><span class="text-sm" style="color: var(--text-secondary);">٤ إملائي</span>
	</div>
	<div class="flex items-center gap-2">
	<div class="w-3 h-3 rounded-full" style="background: #fbbf24;"></div><span class="text-sm" style="color: var(--text-secondary);">١ نحوي</span>
	</div>
	<div class="flex items-center gap-2">
	<div class="w-3 h-3 rounded-full" style="background: #22c55e;"></div><span class="text-sm" style="color: var(--text-secondary);">٣ ترقيم</span>
	</div>
	</div>
	<div class="flex items-center gap-2"><span class="text-2xl font-bold text-gradient">٧٥</span> <span class="text-sm" style="color: var(--text-secondary);">التقييم</span>
	</div>
	</div>
	<div class="absolute -bottom-6 -left-6 p-4 rounded-2xl shadow-xl animate-fade-in" style="background: var(--surface-color); border: 1px solid rgba(34, 197, 94, 0.3); max-width: 280px;">
	<div class="flex items-start gap-3">
	<div class="w-10 h-10 rounded-xl flex items-center justify-center" style="background: rgba(34, 197, 94, 0.15);"><span style="color: #22c55e; font-size: 20px;">✓</span>
	</div>
	<div>
	<div class="text-sm font-bold mb-1">
	تصحيح تلقائي
	</div>
	<div class="text-xs" style="color: var(--text-secondary);">
	تم إصلاح ٨ أخطاء في النص
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section><!-- Features Preview Section -->
	<section class="py-24" style="background: var(--background-color);">
	<div class="max-w-7xl mx-auto px-6">
	<div class="text-center mb-16">
	<h2 class="text-4xl lg:text-5xl font-bold mb-6">ميزات <span class="text-gradient">قوية ومتقدمة</span></h2>
	<p class="text-xl max-w-3xl mx-auto" style="color: var(--text-secondary); line-height: 1.9;">كل ما تحتاجه لكتابة نصوص عربية احترافية وخالية من الأخطاء</p>
	</div>
	<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6"><!-- Feature 1: Spelling -->
	<div class="card-hover p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
	<div class="feature-icon mb-6" style="background: rgba(239, 68, 68, 0.15); color: #ef4444;">
	<svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
	</div>
	<h3 class="text-xl font-bold mb-3">التدقيق الإملائي الذكي</h3>
	<p class="text-sm leading-relaxed" style="color: var(--text-secondary); line-height: 1.8;">فهم الجذور الصرفية والسياق لتصحيح الأخطاء الإملائية بدقة عالية</p>
	</div><!-- Feature 2: Grammar -->
	<div class="card-hover p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
	<div class="feature-icon mb-6" style="background: rgba(251, 191, 36, 0.15); color: #fbbf24;">
	<svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
	</div>
	<h3 class="text-xl font-bold mb-3">تصحيح القواعد النحوية</h3>
	<p class="text-sm leading-relaxed" style="color: var(--text-secondary); line-height: 1.8;">توافق الفعل والفاعل واقتراح الإعراب الصحيح بشكل تلقائي</p>
	</div><!-- Feature 3: Punctuation -->
	<div class="card-hover p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
	<div class="feature-icon mb-6" style="background: rgba(34, 197, 94, 0.15); color: #22c55e;">
	<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10H14.017zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10H0z"/></svg>
	</div>
	<h3 class="text-xl font-bold mb-3">تصحيح علامات الترقيم</h3>
	<p class="text-sm leading-relaxed" style="color: var(--text-secondary); line-height: 1.8;">الفواصل والنقط وعلامات الاقتباس العربية في المكان الصحيح</p>
	</div><!-- Feature 4: Summarization -->
	<div class="card-hover p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
	<div class="feature-icon mb-6" style="background: rgba(139, 92, 246, 0.15); color: #8b5cf6;">
	<svg width="24" height="24" 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>
	</div>
	<h3 class="text-xl font-bold mb-3">تلخيص النصوص العربية</h3>
	<p class="text-sm leading-relaxed" style="color: var(--text-secondary); line-height: 1.8;">الحفاظ على المعنى والأسلوب مع تقليل طول النص بذكاء</p>
	</div><!-- Feature 5: Autocomplete -->
	<div class="card-hover p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
	<div class="feature-icon mb-6" style="background: rgba(236, 72, 153, 0.15); color: #ec4899;">
	<svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
	</div>
	<h3 class="text-xl font-bold mb-3">الإكمال التلقائي الذكي</h3>
	<p class="text-sm leading-relaxed" style="color: var(--text-secondary); line-height: 1.8;">اقتراحات فورية لإكمال الجمل والعبارات أثناء الكتابة بذكاء اصطناعي</p>
	</div>
	<!-- Feature 6: Quran Verification -->
	<div class="card-hover p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
	<div class="feature-icon mb-6" style="background: rgba(6, 182, 212, 0.15); color: #06b6d4;">
	<svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
	</div>
	<h3 class="text-xl font-bold mb-3">تدقيق النص القرآني</h3>
	<p class="text-sm leading-relaxed" style="color: var(--text-secondary); line-height: 1.8;">تحقق من النص القرآني وعرضه بالتشكيل مع اسم السورة ورقم الآية وترجمته إلى ١٤ لغة</p>
	</div><!-- Feature 7: Dialect Conversion -->
	<div class="card-hover p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
	<div class="feature-icon mb-6" style="background: rgba(249, 115, 22, 0.15); color: #f97316;">
	<svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/></svg>
	</div>
	<h3 class="text-xl font-bold mb-3">تحويل اللهجات للفصحى</h3>
	<p class="text-sm leading-relaxed" style="color: var(--text-secondary); line-height: 1.8;">حوّل أي لهجة عربية إلى لغة عربية فصحى بذكاء اصطناعي</p>
	</div><!-- Feature 8: Bayyinah -->
	<div class="card-hover p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
	<div class="feature-icon mb-6" style="background: rgba(20, 145, 155, 0.15); color: #14919b;">
	<svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 7v14"/><path d="M16 12h2"/><path d="M16 8h2"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/><path d="M6 12h2"/><path d="M6 8h2"/></svg>
	</div>
	<h3 class="text-xl font-bold mb-3">بَيِّنَة</h3>
	<p class="text-sm leading-relaxed" style="color: var(--text-secondary); line-height: 1.8;">بوابتك للقرآن والتفسير والسنة والمصادر السردية الموثقة</p>
	</div>
	</div>
	<div class="text-center mt-12"><button onclick="showPage('features')" class="px-8 py-4 rounded-2xl text-lg font-bold border-2 transition-all hover:scale-105" style="border-color: var(--primary-color); color: var(--primary-color);">← اكتشف جميع الميزات</button>
	</div>
	</div>
	</section>
	<!-- How It Works -->
	<section class="py-24" style="background: var(--surface-color);">
	<div class="max-w-7xl mx-auto px-6">
	<div class="text-center mb-16">
	<h2 class="text-4xl lg:text-5xl font-bold mb-6">كيف <span class="text-gradient">يعمل بيان؟</span></h2>
	<p class="text-xl max-w-3xl mx-auto" style="color: var(--text-secondary); line-height: 1.9;">ثلاث خطوات بسيطة للحصول على نص عربي مثالي</p>
	</div>
	<div class="grid md:grid-cols-3 gap-8">
	<!-- Step 1 -->
	<div class="text-center p-8 rounded-3xl" style="background: var(--background-color); border: 1px solid var(--color-border);">
	<div class="w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-6" style="background: linear-gradient(135deg, rgba(107, 163, 224, 0.15), rgba(107, 163, 224, 0.05));">
	<svg width="28" height="28" fill="none" stroke="var(--color-primary)" 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>
	</div>
	<div class="text-sm font-bold mb-2 text-gradient">الخطوة ١</div>
	<h3 class="text-xl font-bold mb-3">اكتب نصّك</h3>
	<p class="text-sm" style="color: var(--text-secondary); line-height: 1.8;">اكتب أو الصق نصك العربي في المحرر — يدعم جميع أنماط الكتابة</p>
	</div>
	<!-- Step 2 -->
	<div class="text-center p-8 rounded-3xl" style="background: var(--background-color); border: 1px solid var(--color-border);">
	<div class="w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-6" style="background: linear-gradient(135deg, rgba(165, 148, 232, 0.15), rgba(165, 148, 232, 0.05));">
	<svg width="28" height="28" fill="none" stroke="var(--color-secondary)" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
	</div>
	<div class="text-sm font-bold mb-2 text-gradient">الخطوة ٢</div>
	<h3 class="text-xl font-bold mb-3">تحليل تلقائي</h3>
	<p class="text-sm" style="color: var(--text-secondary); line-height: 1.8;">يحلل بيان النص فورًا ويكتشف الأخطاء الإملائية والنحوية والترقيمية</p>
	</div>
	<!-- Step 3 -->
	<div class="text-center p-8 rounded-3xl" style="background: var(--background-color); border: 1px solid var(--color-border);">
	<div class="w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-6" style="background: linear-gradient(135deg, rgba(107, 201, 138, 0.15), rgba(107, 201, 138, 0.05));">
	<svg width="28" height="28" fill="none" stroke="var(--color-success)" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
	</div>
	<div class="text-sm font-bold mb-2 text-gradient">الخطوة ٣</div>
	<h3 class="text-xl font-bold mb-3">صحّح بضغطة</h3>
	<p class="text-sm" style="color: var(--text-secondary); line-height: 1.8;">اختر الاقتراح المناسب وطبّقه بضغطة واحدة — أو طبّق الكل دفعة واحدة</p>
	</div>
	</div>
	<div class="text-center mt-12">
	<button 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>
	</div>
	</div>
	</section>
	</div><!-- Features Page -->
	<div id="page-features" class="page">
	<section class="pt-32 pb-24" style="background: var(--background-color);">
	<div class="max-w-7xl mx-auto px-6">
	<div class="text-center mb-20">
	<h1 class="text-5xl lg:text-6xl font-bold mb-6">ميزات <span class="text-gradient">شاملة ومتكاملة</span></h1>
	<p class="text-xl max-w-3xl mx-auto" style="color: var(--text-secondary); line-height: 1.9;">أدوات متخصصة مصممة خصيصًا للغة العربية</p>
	</div><!-- Feature 1: Spelling Check -->
	<div class="grid lg:grid-cols-2 gap-16 items-center mb-32">
	<div class="order-2 lg:order-1">
	<div class="p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
	<div class="text-right text-xl editor-content" dir="rtl" style="color: var(--text-color); line-height: 2;">
	<p class="mb-4">الكتابة <span class="spelling-error">الصحيحه</span> مهمة جدًا في التواصل الفعّال.</p>
	<div class="mt-6 p-4 rounded-xl" style="background: rgba(239, 68, 68, 0.1); border-right: 4px solid #ef4444;">
	<div class="text-sm font-bold mb-2" style="color: #ef4444;">
	خطأ إملائي
	</div>
	<div class="flex items-center justify-between text-base">
	<div><span style="text-decoration: line-through; color: var(--text-secondary);">الصحيحه</span> <span class="mx-3">←</span> <span style="color: #22c55e; font-weight: 600;">الصحيحة</span>
	</div>
	</div>
	<div class="text-sm mt-3" style="color: var(--text-secondary);">
	التاء المربوطة (ة) تُستخدم مع الصفات المؤنثة
	</div>
	</div>
	</div>
	</div>
	</div>
	<div class="order-1 lg:order-2 text-right">
	<div class="feature-icon mb-6" style="background: rgba(239, 68, 68, 0.15); color: #ef4444; width: 64px; height: 64px; font-size: 32px;">
	<svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
	</div>
	<h2 class="text-4xl font-bold mb-6">التدقيق الإملائي الذكي</h2>
	<p class="text-lg mb-8 leading-relaxed" style="color: var(--text-secondary); line-height: 2;">محرك ذكي يفهم الجذور الصرفية والسياق اللغوي لتصحيح الأخطاء الإملائية التي تفوتها البرامج التقليدية.</p>
	<ul class="space-y-4">
	<li class="flex items-center gap-4">
	<div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span>
	</div><span class="text-base">اقتراحات حسب السياق اللغوي</span></li>
	<li class="flex items-center gap-4">
	<div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span>
	</div><span class="text-base">التعرف على الجذور الصرفية العربية</span></li>
	<li class="flex items-center gap-4">
	<div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span>
	</div><span class="text-base">تصحيح فوري أثناء الكتابة</span></li>
	</ul>
	</div>
	</div><!-- Feature 2: Grammar Check -->
	<div class="grid lg:grid-cols-2 gap-16 items-center mb-32">
	<div class="text-right">
	<div class="feature-icon mb-6" style="background: rgba(251, 191, 36, 0.15); color: #fbbf24; width: 64px; height: 64px; font-size: 32px;">
	<svg width="24" height="24" 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>
	</div>
	<h2 class="text-4xl font-bold mb-6">تصحيح القواعد النحوية</h2>
	<p class="text-lg mb-8 leading-relaxed" style="color: var(--text-secondary); line-height: 2;">فهم عميق لقواعد النحو العربي بما في ذلك الإعراب وتوافق الفعل مع الفاعل والصفات.</p>
	<ul class="space-y-4">
	<li class="flex items-center gap-4">
	<div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span>
	</div><span class="text-base">توافق الفعل والفاعل تلقائيًا</span></li>
	<li class="flex items-center gap-4">
	<div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span>
	</div><span class="text-base">اقتراح الإعراب الصحيح للكلمات</span></li>
	<li class="flex items-center gap-4">
	<div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span>
	</div><span class="text-base">شرح تفصيلي لكل تصحيح</span></li>
	</ul>
	</div>
	<div>
	<div class="p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
	<div class="text-right text-xl editor-content" dir="rtl" style="color: var(--text-color); line-height: 2;">
	<p class="mb-4">الطلاب <span class="grammar-error">ذهبوا</span> إلى المدرسة صباحًا.</p>
	<div class="mt-6 p-4 rounded-xl" style="background: rgba(251, 191, 36, 0.1); border-right: 4px solid #fbbf24;">
	<div class="text-sm font-bold mb-2" style="color: #fbbf24;">
	اقتراح نحوي
	</div>
	<div class="text-base mb-3"><span style="color: var(--text-secondary);">يُفضل:</span> <span style="color: #22c55e; font-weight: 600; margin-right: 8px;">ذهب الطلاب</span>
	</div>
	<div class="text-sm" style="color: var(--text-secondary); line-height: 1.7;">
	في اللغة العربية الفصحى، عندما يتقدم الفعل على الفاعل الجمع، يُفضل إفراد الفعل.
	</div>
	</div>
	</div>
	</div>
	</div>
	</div><!-- Feature 3: Punctuation -->
	<div class="grid lg:grid-cols-2 gap-16 items-center mb-32">
	<div class="order-2 lg:order-1">
	<div class="p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
	<div class="text-right text-xl editor-content" dir="rtl" style="color: var(--text-color); line-height: 2;">
	<p class="mb-4">قال المعلم<span class="punctuation-suggestion">:</span> <span class="punctuation-suggestion">«</span>الدرس مهم جدًا<span class="punctuation-suggestion">»</span><span class="punctuation-suggestion">.</span></p>
	<div class="mt-6 p-4 rounded-xl" style="background: rgba(34, 197, 94, 0.1); border-right: 4px solid #22c55e;">
	<div class="text-sm font-bold mb-2" style="color: #22c55e;">
	✓ تم إصلاح علامات الترقيم
	</div>
	<div class="text-sm" style="color: var(--text-secondary); line-height: 1.7;">
	• أُضيفت النقطتان بعد "قال المعلم"<br>
	• استُخدمت علامات الاقتباس العربية «»<br>
	• أُضيفت النقطة في نهاية الجملة
	</div>
	</div>
	</div>
	</div>
	</div>
	<div class="order-1 lg:order-2 text-right">
	<div class="feature-icon mb-6" style="background: rgba(34, 197, 94, 0.15); color: #22c55e; width: 64px; height: 64px; font-size: 32px;">
	<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10H14.017zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10H0z"/></svg>
	</div>
	<h2 class="text-4xl font-bold mb-6">تصحيح علامات الترقيم</h2>
	<p class="text-lg mb-8 leading-relaxed" style="color: var(--text-secondary); line-height: 2;">كشف وتصحيح تلقائي لعلامات الترقيم العربية بما في ذلك الوضع الصحيح للفواصل والنقاط وعلامات الاقتباس.</p>
	<ul class="space-y-4">
	<li class="flex items-center gap-4">
	<div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span>
	</div><span class="text-base">علامات الترقيم العربية الأصيلة</span></li>
	<li class="flex items-center gap-4">
	<div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span>
	</div><span class="text-base">تحليل بنية الجمل والفقرات</span></li>
	<li class="flex items-center gap-4">
	<div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span>
	</div><span class="text-base">معالجة علامات الاقتباس والحوار</span></li>
	</ul>
	</div>
	</div><!-- Feature 4: Summarization -->
	<div class="grid lg:grid-cols-2 gap-16 items-center mb-32">
	<div class="text-right">
	<div class="feature-icon mb-6" style="background: rgba(139, 92, 246, 0.15); color: #8b5cf6; width: 64px; height: 64px; font-size: 32px;">
	<svg width="24" height="24" 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>
	</div>
	<h2 class="text-4xl font-bold mb-6">تلخيص النصوص العربية</h2>
	<p class="text-lg mb-8 leading-relaxed" style="color: var(--text-secondary); line-height: 2;">توليد ملخصات دقيقة وموجزة للنصوص الطويلة مع الحفاظ على المعنى الأساسي والأسلوب العربي الأصيل.</p>
	<ul class="space-y-4">
	<li class="flex items-center gap-4">
	<div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span>
	</div><span class="text-base">طول ملخص قابل للتعديل</span></li>
	<li class="flex items-center gap-4">
	<div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span>
	</div><span class="text-base">استخراج النقاط الرئيسية</span></li>
	<li class="flex items-center gap-4">
	<div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span>
	</div><span class="text-base">الحفاظ على فصاحة اللغة</span></li>
	</ul>
	</div>
	<div>
	<div class="p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
	<div class="text-right" dir="rtl">
	<div class="text-sm mb-4 p-4 rounded-xl" style="background: rgba(255, 255, 255, 0.05); color: var(--text-secondary); line-height: 1.8;">
	النص الأصلي: ١٥٠ كلمة...<br>
	مقالة طويلة تتحدث عن أهمية التكنولوجيا في العصر الحديث وتأثيرها على المجتمع...
	</div>
	<div class="flex items-center justify-center my-4">
	<svg class="w-8 h-8" style="color: var(--secondary-color);" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
	</svg>
	</div>
	<div class="text-lg p-4 rounded-xl editor-content" style="background: rgba(139, 92, 246, 0.1); border-right: 4px solid #8b5cf6; line-height: 2;">
	<div class="text-sm font-bold mb-3" style="color: #8b5cf6;">
	الملخص: ٣٠ كلمة
	</div>
	<p style="color: var(--text-color);">التكنولوجيا الحديثة أحدثت ثورة في حياتنا اليومية، حيث سهّلت التواصل والتعلم والعمل، مما أدى إلى تطور المجتمعات وتحسين جودة الحياة.</p>
	</div>
	</div>
	</div>
	</div>
	</div><!-- End Feature 4 grid -->
	<div class="grid lg:grid-cols-2 gap-16 items-center mt-32">
	<div class="order-2 lg:order-1">
	<div class="p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
	<div class="text-right text-xl editor-content" dir="rtl" style="color: var(--text-color); line-height: 2;">
	<p class="mb-4">اللغة العربية هي لغة <span style="color: var(--text-secondary); opacity: 0.5;">\|</span></p>
	<div class="mt-6 p-4 rounded-xl" style="background: rgba(236, 72, 153, 0.1); border-right: 4px solid #ec4899;">
	<div class="text-sm font-bold mb-3" style="color: #ec4899;">⚡ اقتراحات الإكمال</div>
	<div class="space-y-2">
	<div class="p-3 rounded-lg" style="background: rgba(236, 72, 153, 0.15); border: 1px solid rgba(236, 72, 153, 0.3);"><span class="text-base" style="color: var(--text-color);">القرآن الكريم والحضارة الإسلامية</span></div>
	<div class="p-3 rounded-lg" style="background: rgba(255, 255, 255, 0.05);"><span class="text-base" style="color: var(--text-secondary);">الضاد وأقدم اللغات السامية</span></div>
	<div class="p-3 rounded-lg" style="background: rgba(255, 255, 255, 0.05);"><span class="text-base" style="color: var(--text-secondary);">العلم والأدب والشعر العربي</span></div>
	</div>
	<div class="text-xs mt-3" style="color: var(--text-secondary);">اضغط <kbd style="background: rgba(255,255,255,0.1); padding: 2px 6px; border-radius: 4px; font-size: 11px;">Tab</kbd> لقبول الاقتراح</div>
	</div>
	</div>
	</div>
	</div>
	<div class="order-1 lg:order-2 text-right">
	<div class="feature-icon mb-6" style="background: rgba(236, 72, 153, 0.15); color: #ec4899; width: 64px; height: 64px; font-size: 32px;"><svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg></div>
	<h2 class="text-4xl font-bold mb-6">الإكمال التلقائي الذكي</h2>
	<p class="text-lg mb-8 leading-relaxed" style="color: var(--text-secondary); line-height: 2;">محرك ذكي يقترح إكمال الجمل والعبارات أثناء الكتابة، مدعوم بنماذج لغوية متقدمة تفهم السياق العربي.</p>
	<ul class="space-y-4">
	<li class="flex items-center gap-4"><div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span></div><span class="text-base">اقتراحات ذكية حسب السياق</span></li>
	<li class="flex items-center gap-4"><div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span></div><span class="text-base">قبول بضغطة زر واحدة (Tab)</span></li>
	<li class="flex items-center gap-4"><div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span></div><span class="text-base">تسريع الكتابة بنسبة تصل إلى ٤٠٪</span></li>
	</ul>
	</div>
	</div><!-- Feature 6: Quran Verification -->
	<div class="grid lg:grid-cols-2 gap-16 items-center mt-32">
	<div class="text-right">
	<div class="feature-icon mb-6" style="background: rgba(6, 182, 212, 0.15); color: #06b6d4; width: 64px; height: 64px; font-size: 32px;"><svg width="24" height="24" 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></div>
	<h2 class="text-4xl font-bold mb-6">تدقيق النص القرآني</h2>
	<p class="text-lg mb-8 leading-relaxed" style="color: var(--text-secondary); line-height: 2;">علّم على أي نص قرآني واضغط زر التدقيق — يتحول تلقائيًا للرسم العثماني بالتشكيل الكامل مع اسم السورة ورقم الآية، مع إمكانية ترجمته إلى ١٤ لغة عالمية.</p>
	<ul class="space-y-4">
	<li class="flex items-center gap-4"><div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span></div><span class="text-base">تشكيل كامل بالرسم العثماني</span></li>
	<li class="flex items-center gap-4"><div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span></div><span class="text-base">اسم السورة ورقم الآية تلقائيًا</span></li>
	<li class="flex items-center gap-4"><div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span></div><span class="text-base">ترجمة الآيات إلى ١٤ لغة (الإنجليزية، الفرنسية، التركية، الأردية...)</span></li>
	<li class="flex items-center gap-4"><div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span></div><span class="text-base">زر في شريط الأدوات — علّم واضغط</span></li>
	</ul>
	</div>
	<div>
	<div class="p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
	<div class="text-right" dir="rtl">
	<div class="text-sm mb-4 p-4 rounded-xl" style="background: rgba(255, 255, 255, 0.05); color: var(--text-secondary); line-height: 1.8;"><span style="font-size: 13px;">📝 النص المحدد:</span><br><span style="font-size: 16px;">انا انزلناه قرانا عربيا لعلكم تعقلون</span></div>
	<div class="flex items-center justify-center my-4"><svg class="w-8 h-8" style="color: #06b6d4;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" /></svg></div>
	<div class="text-lg p-4 rounded-xl editor-content" style="background: rgba(6, 182, 212, 0.1); border-right: 4px solid #06b6d4; line-height: 2.2;">
	<div class="text-sm font-bold mb-3" style="color: #06b6d4;">✓ النص القرآني المدقق</div>
	<p style="color: var(--text-color); font-size: 22px; font-family: 'Traditional Arabic', serif;">﴿إِنَّا أَنزَلْنَاهُ قُرْآنًا عَرَبِيًّا لَّعَلَّكُمْ تَعْقِلُونَ﴾</p>
	<p class="mt-2" style="color: var(--text-secondary); font-size: 14px;">[يوسف: آية ٢]</p>
	<div class="mt-4 pt-3" style="border-top: 1px solid rgba(6, 182, 212, 0.2);">
	<div class="flex items-center gap-2 mb-2">
	<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color: #06b6d4;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/></svg>
	<span class="text-xs font-bold" style="color: #06b6d4;">English Translation</span>
	</div>
	<p style="color: var(--text-secondary); font-size: 13px; font-style: italic; line-height: 1.7;">Indeed, We have sent it down as an Arabic Quran that you might understand.</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div><!-- Feature 7: Dialect Conversion -->
	<div class="grid lg:grid-cols-2 gap-16 items-center mt-32">
	<div class="order-2 lg:order-1">
	<div class="p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
	<div class="text-right" dir="rtl">
	<div class="text-sm mb-4 p-4 rounded-xl" style="background: rgba(255, 255, 255, 0.05); line-height: 1.8;"><span style="font-size: 13px; color: var(--text-secondary);">🗣️ النص باللهجة:</span><br><span style="font-size: 16px; color: var(--text-color);">ازيك يا صاحبي، انت فين دلوقتي؟ انا مستنيك من بدري</span></div>
	<div class="flex items-center justify-center my-4"><svg class="w-8 h-8" style="color: #f97316;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" /></svg></div>
	<div class="text-lg p-4 rounded-xl editor-content" style="background: rgba(249, 115, 22, 0.1); border-right: 4px solid #f97316; line-height: 2;">
	<div class="text-sm font-bold mb-3" style="color: #f97316;">✓ النص بالعربية الفصحى</div>
	<p style="color: var(--text-color);">كيف حالك يا صديقي، أين أنت الآن؟ أنا أنتظرك منذ وقت مبكر</p>
	<div class="flex items-center gap-2 mt-3"><span class="text-xs px-2 py-1 rounded-full" style="background: rgba(249, 115, 22, 0.15); color: #f97316;">🇪🇬 لهجة مصرية</span><span class="text-xs" style="color: var(--text-secondary);">→ عربية فصحى</span></div>
	</div>
	</div>
	</div>
	</div>
	<div class="order-1 lg:order-2 text-right">
	<div class="feature-icon mb-6" style="background: rgba(249, 115, 22, 0.15); color: #f97316; width: 64px; height: 64px; font-size: 32px;"><svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/></svg></div>
	<h2 class="text-4xl font-bold mb-6">تحويل اللهجات للفصحى</h2>
	<p class="text-lg mb-8 leading-relaxed" style="color: var(--text-secondary); line-height: 2;">اكتب بأي لهجة عربية — مصرية، خليجية، شامية، مغاربية — وحوّلها تلقائيًا إلى لغة عربية فصحى سليمة.</p>
	<ul class="space-y-4">
	<li class="flex items-center gap-4"><div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span></div><span class="text-base">دعم جميع اللهجات العربية</span></li>
	<li class="flex items-center gap-4"><div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span></div><span class="text-base">الحفاظ على المعنى والسياق</span></li>
	<li class="flex items-center gap-4"><div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span></div><span class="text-base">تحويل فوري بضغطة واحدة</span></li>
	</ul>
	</div>
	</div>
	<!-- Feature 8: Bayyinah RAG -->
	<div class="grid lg:grid-cols-2 gap-16 items-center mt-32">
	<div class="text-right">
	<div class="feature-icon mb-6" style="background: rgba(20, 145, 155, 0.15); color: #14919b; width: 64px; height: 64px; font-size: 32px;"><svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M12 7v14"/><path d="M16 12h2"/><path d="M16 8h2"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/><path d="M6 12h2"/><path d="M6 8h2"/></svg></div>
	<h2 class="text-4xl font-bold mb-6">بَيِّنَة</h2>
	<p class="text-lg mb-8 leading-relaxed" style="color: var(--text-secondary); line-height: 2;">بوابتك للقرآن والتفسير والسنة والمصادر السردية الموثقة — اسأل أي سؤال في الدين الإسلامي واحصل على إجابة مدعومة بالمصادر.</p>
	<ul class="space-y-4">
	<li class="flex items-center gap-4"><div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span></div><span class="text-base">إجابات من القرآن الكريم والتفسير</span></li>
	<li class="flex items-center gap-4"><div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span></div><span class="text-base">أحاديث نبوية وسيرة مع التخريج</span></li>
	<li class="flex items-center gap-4"><div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span></div><span class="text-base">مصادر موثقة وقابلة للتحقق</span></li>
	</ul>
	<a href="https://bayyinah-alpha.vercel.app/" target="_blank" rel="noopener noreferrer" class="inline-block mt-8 px-6 py-3 rounded-xl text-base font-bold text-white transition-all hover:scale-105" style="background: linear-gradient(135deg, #14919b, #0e7c86);">جرّب بَيِّنَة الآن ↗</a>
	</div>
	<div>
	<div class="p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
	<div class="text-right" dir="rtl">
	<div class="p-4 rounded-xl mb-4" style="background: rgba(20, 145, 155, 0.08); border: 1px solid rgba(20, 145, 155, 0.2);">
	<div class="flex items-center gap-2 mb-3"><svg width="18" height="18" fill="none" stroke="#14919b" viewBox="0 0 24 24" style="flex-shrink:0;"><path d="M12 7v14"/><path d="M16 12h2"/><path d="M16 8h2"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/><path d="M6 12h2"/><path d="M6 8h2"/></svg><span class="text-sm font-bold" style="color: #14919b;">بَيِّنَة</span></div>
	<p class="text-base mb-2" style="color: var(--text-color);">ما حكم صلاة الضحى؟</p>
	</div>
	<div class="p-4 rounded-xl" style="background: rgba(20, 145, 155, 0.05); border-right: 4px solid #14919b; line-height: 2;">
	<div class="text-sm font-bold mb-3" style="color: #14919b;">📖 الإجابة من المصادر</div>
	<p class="text-base mb-3" style="color: var(--text-color);">صلاة الضحى سنة مؤكدة، وأقلها ركعتان وأكثرها ثمان ركعات.</p>
	<div class="space-y-2 mt-3">
	<div class="text-xs p-2 rounded-lg" style="background: rgba(20, 145, 155, 0.1);"><span style="color: #14919b; font-weight: 600;">📜 الحديث:</span> <span style="color: var(--text-secondary);">«يصبح على كل سُلامى من أحدكم صدقة...» رواه مسلم</span></div>
	<div class="text-xs p-2 rounded-lg" style="background: rgba(20, 145, 155, 0.1);"><span style="color: #14919b; font-weight: 600;">📖 التفسير:</span> <span style="color: var(--text-secondary);">تفسير ابن كثير — سورة ص: آية ١٨</span></div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>
	</div><!-- Editor Page -->
	<div id="page-editor" class="page">
	<section class="pt-16 md:pt-20 min-h-screen page-bg">
	<div class="max-w-[1600px] mx-auto">
	<div class="editor-layout">
	<!-- RIGHT: Documents Panel (always visible on desktop) -->
	<div class="docs-panel docs-panel-desktop">
	<div class="docs-panel__header">
	<svg class="docs-panel__icon" width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
	<span class="docs-panel__title">مستنداتي</span>
	</div>
	<div class="docs-panel__body">
	<button id="docs-new-btn" class="docs-new-btn" type="button" aria-label="مستند جديد">
	<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="M12 4v16m8-8H4"/></svg>
	مستند جديد
	</button>
	<div class="docs-search">
	<svg class="docs-search__icon" width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
	<input type="text" class="docs-search__input" id="docs-search-input" placeholder="بحث في المستندات..." autocomplete="off">
	</div>
	<div id="docs-list" role="list" aria-label="قائمة المستندات"></div>
	</div>
	</div>
	<!-- CENTER: Main Editor -->
	<div>
	<div class="editor-shell">
	<div class="editor-toolbar">
	<div class="flex items-center gap-2 flex-wrap">
	<div class="doc-title-bar">
	<span id="doc-current-title" class="doc-current-title">مستند جديد</span>
	</div>
	<div class="toolbar-separator"></div>
	<button id="write-tab" onclick="switchTab('write')" class="editor-tab active" type="button">كتابة</button>
	<button id="summarize-tab" onclick="switchTab('summarize')" class="editor-tab" type="button">تلخيص</button>
	<button id="dialect-tab" onclick="switchTab('dialect')" class="editor-tab" type="button">تحويل للفصحى</button>
	<button id="docs-sidebar-toggle" class="docs-sidebar-toggle-mobile btn-ghost lg:hidden" type="button" aria-label="مستنداتي" aria-expanded="false" aria-controls="docs-sidebar">
	<svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
	</button>
	</div>
	<div class="flex items-center gap-4 flex-wrap">
	<div id="analyzing-indicator" class="analyzing-indicator" aria-live="polite">
	<span class="analyzing-spinner" aria-hidden="true"></span>
	<span>جاري التحليل...</span>
	</div>
	<span id="auto-save-status" class="text-xs text-secondary" style="opacity:0;transition:opacity 0.3s;"></span>
	<div class="window-dots" aria-hidden="true">
	<span class="dot dot--red" title="مسح المحرر" onclick="showConfirmDialog('مسح المحرر','هل تريد مسح جميع محتويات المحرر؟ لا يمكن التراجع عن هذا.',function(){document.getElementById('editor-surface').innerHTML='';if(typeof updatePlaceholder==='function')updatePlaceholder();if(typeof updateEditorStats==='function')updateEditorStats()})" style="cursor:pointer;"></span>
	<span class="dot dot--yellow" title="طي لوحة الاقتراحات" onclick="document.querySelector('.sidebar-desktop')?.classList.toggle('collapsed')" style="cursor:pointer;"></span>
	<span class="dot dot--green" title="توسيع المحرر للعرض الكامل" onclick="document.querySelector('.editor-layout')?.classList.toggle('editor-fullscreen')" style="cursor:pointer;"></span>
	</div>
	</div>
	</div>
	<!-- Formatting Toolbar -->
	<div class="format-toolbar" id="format-toolbar">
	<!-- Font group -->
	<div class="fmt-group fmt-group--font">
	<div class="fmt-dropdown" id="fmt-font-wrap">
	<button class="fmt-dropdown__trigger" type="button" id="fmt-font-trigger" aria-haspopup="true" aria-expanded="false">
	<svg class="fmt-dropdown__icon" width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7V4h16v3M9 20h6M12 4v16"/></svg>
	<span id="fmt-font-label">Cairo</span>
	<svg class="fmt-dropdown__chevron" width="10" height="10" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/></svg>
	</button>
	<div class="fmt-dropdown__menu" id="fmt-font-menu" role="menu">
	<button class="fmt-dropdown__item" data-font="Cairo" role="menuitem" style="font-family:Cairo">Cairo</button>
	<button class="fmt-dropdown__item" data-font="Arial" role="menuitem" style="font-family:Arial">Arial</button>
	<button class="fmt-dropdown__item" data-font="Times New Roman" role="menuitem" style="font-family:'Times New Roman'">Times New Roman</button>
	<button class="fmt-dropdown__item" data-font="Tahoma" role="menuitem" style="font-family:Tahoma">Tahoma</button>
	<button class="fmt-dropdown__item" data-font="Simplified Arabic" role="menuitem" style="font-family:'Simplified Arabic'">Simplified Arabic</button>
	<button class="fmt-dropdown__item" data-font="Traditional Arabic" role="menuitem" style="font-family:'Traditional Arabic'">Traditional Arabic</button>
	<button class="fmt-dropdown__item" data-font="Courier New" role="menuitem" style="font-family:'Courier New'">Courier New</button>
	</div>
	</div>
	<div class="fmt-dropdown" id="fmt-size-wrap">
	<button class="fmt-dropdown__trigger fmt-dropdown__trigger--size" type="button" id="fmt-size-trigger" aria-haspopup="true" aria-expanded="false">
	<span id="fmt-size-label">16</span>
	<svg class="fmt-dropdown__chevron" width="10" height="10" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/></svg>
	</button>
	<div class="fmt-dropdown__menu fmt-dropdown__menu--size" id="fmt-size-menu" role="menu">
	<button class="fmt-dropdown__item" data-size="12px" role="menuitem"><span class="fmt-size-preview" style="font-size:10px">بيان</span> 12</button>
	<button class="fmt-dropdown__item fmt-dropdown__item--active" data-size="16px" role="menuitem"><span class="fmt-size-preview" style="font-size:12px">بيان</span> 16</button>
	<button class="fmt-dropdown__item" data-size="20px" role="menuitem"><span class="fmt-size-preview" style="font-size:14px">بيان</span> 20</button>
	<button class="fmt-dropdown__item" data-size="24px" role="menuitem"><span class="fmt-size-preview" style="font-size:16px">بيان</span> 24</button>
	<button class="fmt-dropdown__item" data-size="32px" role="menuitem"><span class="fmt-size-preview" style="font-size:18px">بيان</span> 32</button>
	<button class="fmt-dropdown__item" data-size="48px" role="menuitem"><span class="fmt-size-preview" style="font-size:22px">بيان</span> 48</button>
	</div>
	</div>
	</div>
	<div class="fmt-divider"></div>
	<!-- Text style group -->
	<div class="fmt-group">
	<button id="fmt-bold" class="fmt-btn" onclick="formatBold()" type="button" title="غامق (Ctrl+B)"><b>B</b></button>
	<button id="fmt-italic" class="fmt-btn" onclick="formatItalic()" type="button" title="مائل (Ctrl+I)"><i>I</i></button>
	<button id="fmt-underline" class="fmt-btn" onclick="formatUnderline()" type="button" title="تحته خط (Ctrl+U)"><u>U</u></button>
	<button id="fmt-strikethrough" class="fmt-btn" onclick="formatStrikethrough()" type="button" title="يتوسطه خط"><s>S</s></button>
	</div>
	<div class="fmt-divider"></div>
	<!-- Alignment group -->
	<div class="fmt-group">
	<button id="fmt-align-right" class="fmt-btn fmt-active" onclick="formatAlignRight()" type="button" title="محاذاة لليمين">
	<svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M3 5h18v2H3V5zm4 4h14v2H7V9zm-4 4h18v2H3v-2zm4 4h14v2H7v-2z"/></svg>
	</button>
	<button id="fmt-align-center" class="fmt-btn" onclick="formatAlignCenter()" type="button" title="توسيط">
	<svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M3 5h18v2H3V5zm3 4h12v2H6V9zm-3 4h18v2H3v-2zm3 4h12v2H6v-2z"/></svg>
	</button>
	<button id="fmt-align-left" class="fmt-btn" onclick="formatAlignLeft()" type="button" title="محاذاة لليسار">
	<svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M3 5h18v2H3V5zm0 4h14v2H3V9zm0 4h18v2H3v-2zm0 4h14v2H3v-2z"/></svg>
	</button>
	</div>
	<div class="fmt-divider"></div>
	<!-- Undo/Redo group -->
	<div class="fmt-group">
	<button class="fmt-btn" onclick="formatUndo()" type="button" title="تراجع (Ctrl+Z)">
	<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="M3 10h10a5 5 0 015 5v2M3 10l4-4M3 10l4 4"/></svg>
	</button>
	<button class="fmt-btn" onclick="formatRedo()" type="button" title="إعادة (Ctrl+Y)">
	<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="M21 10H11a5 5 0 00-5 5v2M21 10l-4-4M21 10l-4 4"/></svg>
	</button>
	</div>
	<div class="fmt-divider"></div>
	<!-- Item 8: Color pickers -->
	<div class="fmt-group fmt-group--font">
	<div class="fmt-dropdown" id="fmt-textcolor-wrap">
	<button class="fmt-color-btn" type="button" id="fmt-textcolor-trigger" title="لون النص">
	<svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M11 2L5.5 16h2.25l1.12-3h6.25l1.12 3h2.25L13 2h-2zm-1.38 9L12 4.67 14.38 11H9.62z"/></svg>
	<span class="fmt-color-indicator" id="fmt-textcolor-bar" style="background:#ECEEF2"></span>
	</button>
	<div class="fmt-dropdown__menu" id="fmt-textcolor-menu" role="menu">
	<div class="fmt-color-grid" id="fmt-textcolor-grid"></div>
	</div>
	</div>
	<div class="fmt-dropdown" id="fmt-highlight-wrap">
	<button class="fmt-color-btn" type="button" id="fmt-highlight-trigger" title="لون التظليل">
	<svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M16.56 8.94L7.62 0 6.21 1.41l2.38 2.38-5.15 5.15a1.49 1.49 0 000 2.12l5.5 5.5c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.58.59-1.53 0-2.12zM5.21 10L10 5.21 14.79 10H5.21zM19 11.5s-2 2.17-2 3.5c0 1.1.9 2 2 2s2-.9 2-2c0-1.33-2-3.5-2-3.5zM2 20h20v4H2v-4z"/></svg>
	<span class="fmt-color-indicator" id="fmt-highlight-bar" style="background:transparent"></span>
	</button>
	<div class="fmt-dropdown__menu" id="fmt-highlight-menu" role="menu">
	<div class="fmt-color-grid" id="fmt-highlight-grid"></div>
	</div>
	</div>
	</div>
	<div class="fmt-divider"></div>
	<!-- Clear formatting -->
	<div class="fmt-group">
	<button class="fmt-btn" onclick="execFormat('removeFormat')" type="button" 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="M6 4h12v3M12 4v16"/><path stroke-linecap="round" stroke-width="2.5" stroke="currentColor" d="M5 19L19 5" opacity="0.6"/></svg>
	</button>
	</div>
	<div class="fmt-divider"></div>
	<!-- Quran verification -->
	<div class="fmt-group">
	<button id="fmt-quran" class="fmt-btn" onclick="verifyQuranText()" type="button" title="تدقيق النص القرآني" style="color: #06b6d4;">
	<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="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>
	<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>
	<div id="editor-container" class="editor-surface editor-content"
	role="textbox" aria-multiline="true" aria-label="محرر النص العربي"
	aria-describedby="editor-hint" contenteditable="true"
	data-placeholder="ابدأ الكتابة هنا... اكتب نصك العربي وسنساعدك في تصحيحه وتحسينه بشكل فوري"></div>
	<p id="editor-hint" class="sr-only">اكتب نصاً عربياً. ستظهر الاقتراحات تلقائياً.</p>
	<div id="editor-tooltip" class="suggestion-popover" role="dialog" aria-label="اقتراح تصحيح">
	<div id="tooltip-type" class="popover-type">خطأ</div>
	<div class="popover-original-word"><span class="popover-label">الكلمة:</span> <span id="tooltip-original"></span></div>
	<div id="tooltip-alternatives" class="popover-alternatives"></div>
	<button type="button" class="popover-dismiss" onclick="if(window.currentApplySuggestion){dismissSuggestion(window.currentApplySuggestion);hideTooltip();}" title="تجاهل هذا الاقتراح">تجاهل</button>
	<p class="popover-hint">اختر التصحيح المناسب · Escape للإغلاق</p>
	</div>
	</div>
	<div id="summarize-area" class="summarize-panel is-hidden">
	<!-- Item 11: Mode Toggle -->
	<div class="summary-mode-toggle">
	<button type="button" class="summary-mode-btn active" id="summary-mode-paragraph" onclick="setSummaryMode('paragraph')">
	<svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24"><path d="M3 5h18v2H3V5zm0 8h18v2H3v-2zm0 4h12v2H3v-2z"/></svg>
	فقرة
	</button>
	<button type="button" class="summary-mode-btn" id="summary-mode-bullets" onclick="setSummaryMode('bullets')">
	<svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24"><path d="M4 6h2v2H4V6zm4 0h12v2H8V6zM4 11h2v2H4v-2zm4 0h12v2H8v-2zm-4 5h2v2H4v-2zm4 0h12v2H8v-2z"/></svg>
	نقاط
	</button>
	</div>
	<div class="mb-6">
	<label class="block text-base font-bold mb-3" for="summary-length">طول الملخص</label>
	<div class="flex items-center gap-4">
	<span class="text-sm text-secondary">طويل</span>
	<input type="range" id="summary-length" min="1" max="3" value="2" onchange="updateSummaryLength()" aria-valuetext="متوسط">
	<span class="text-sm text-secondary">قصير</span>
	</div>
	<div class="text-center mt-2"><span id="summary-length-text" class="text-sm font-bold text-brand">متوسط</span></div>
	</div>
	<button id="generate-summary-btn" onclick="generateSummary(event)" class="btn-primary w-full py-4 text-lg mb-6" type="button">توليد الملخص</button>
	<div id="summary-preview" class="summary-preview">
	<div class="summary-card">
	<!-- Item 6: Summary Stats -->
	<div id="summary-stats" class="summary-stats" style="display:none">
	<div class="summary-stat"><span>كلمات الملخص:</span> <span class="summary-stat__value" id="summary-word-count">0</span></div>
	<div class="summary-stat"><span>نسبة الاختصار:</span> <span class="summary-stat__value" id="summary-compression">0%</span></div>
	</div>
	<div class="flex items-center justify-between mb-4">
	<h3 class="text-lg font-bold summary-card__title">الملخص</h3>
	<div class="flex items-center gap-2">
	<button onclick="copySummary()" class="btn-ghost" type="button">نسخ</button>
	<div class="doc-dropdown" style="display:inline-block;">
	<button id="summary-export-trigger" class="btn-ghost" type="button" aria-haspopup="true" aria-expanded="false">تصدير ▾</button>
	<div id="summary-export-menu" class="doc-dropdown__menu" role="menu">
	<button type="button" class="doc-dropdown__item" role="menuitem" onclick="exportSummaryAs('txt')">نصي (.txt)</button>
	<button type="button" class="doc-dropdown__item" role="menuitem" onclick="exportSummaryAs('docx')">Word (.docx)</button>
	<button type="button" class="doc-dropdown__item" role="menuitem" onclick="exportSummaryAs('pdf')">PDF (.pdf)</button>
	</div>
	</div>
	</div>
	</div>
	<div id="summary-text" class="text-right text-lg editor-content" dir="rtl"></div>
	</div>
	</div>
	</div>
	<!-- Dialect Conversion Panel -->
	<div id="dialect-area" class="summarize-panel is-hidden">
	<div class="mb-4">
	<div class="flex items-center gap-2 mb-3">
	<svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color: var(--color-primary);"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/></svg>
	<span class="text-base font-bold">تحويل اللهجات للفصحى</span>
	</div>
	<p class="text-sm mb-4" style="color: var(--text-secondary);">اكتب نصًا بأي لهجة عربية (مصرية، خليجية، شامية...) وسنحوّله إلى لغة عربية فصحى سليمة.</p>
	</div>
	<textarea id="dialect-input" class="w-full p-4 rounded-xl text-right text-lg editor-content" dir="rtl" rows="6" placeholder="اكتب النص باللهجة هنا..." oninput="updateDialectCharCount()" style="background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-primary); resize: vertical; font-family: inherit;"></textarea>
	<div class="flex items-center justify-between mt-1 mb-2" dir="rtl">
	<span id="dialect-char-count" class="text-xs" style="color: var(--text-secondary);">٠ / ٥٬٠٠٠ حرف</span>
	</div>
	<button id="dialect-convert-btn" onclick="convertDialect()" class="btn-primary w-full py-4 text-lg mt-4 mb-4" type="button">تحويل إلى الفصحى</button>
	<div id="dialect-result-card" class="is-hidden" style="background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 1rem; padding: 1.5rem;">
	<div class="flex items-center justify-between mb-3">
	<h3 class="text-base font-bold" style="color: var(--color-primary);">✓ النص بالعربية الفصحى</h3>
	<div class="flex items-center gap-2">
	<button onclick="copyDialectResult()" class="quran-copy-btn" type="button" title="نسخ">📋</button>
	<button id="dialect-apply-btn" onclick="applyDialectResult()" class="quran-apply-btn is-hidden" type="button">تطبيق في المحرر ✓</button>
	</div>
	</div>
	<div id="dialect-result" class="text-right text-lg editor-content" dir="rtl" style="line-height: 2;"></div>
	</div>
	</div>
	<div class="editor-footer">
	<div class="editor-stats" role="status" aria-label="إحصائيات">
	<div class="flex items-center gap-2"><span class="stat-dot stat-dot--spelling" aria-hidden="true"></span><span class="text-sm text-secondary"><span id="spelling-count">٠</span> إملائي</span></div>
	<div class="flex items-center gap-2"><span class="stat-dot stat-dot--grammar" aria-hidden="true"></span><span class="text-sm text-secondary"><span id="grammar-count">٠</span> نحوي</span></div>
	<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" 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>
	<div class="editor-actions">
	<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="مسح الكل">
	<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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
	</button>
	<button onclick="copyText()" class="btn-ghost" type="button" 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 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
	</button>
	<button id="doc-import-btn" class="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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
	</button>
	<div class="doc-dropdown" style="display:inline-block;">
	<button id="doc-export-trigger" class="btn-ghost" type="button" aria-label="تصدير" title="تصدير" aria-haspopup="true" aria-expanded="false">
	<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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
	</button>
	<div id="doc-export-menu" class="doc-dropdown__menu" role="menu" aria-label="خيارات التصدير">
	<button type="button" class="doc-dropdown__item" role="menuitem" data-export-format="txt">نصي (.txt)</button>
	<button type="button" class="doc-dropdown__item" role="menuitem" data-export-format="docx">Word (.docx)</button>
	<button type="button" class="doc-dropdown__item" role="menuitem" data-export-format="pdf">PDF (.pdf)</button>
	</div>
	</div>
	</div>
	</div>
	</div>
	<button id="mobile-sheet-trigger" class="mobile-sheet-trigger" type="button" aria-expanded="false" aria-controls="bottom-sheet">
	<span>الاقتراحات (<span id="mobile-suggestion-count">٠</span>)</span>
	<span aria-hidden="true">▲</span>
	</button>
	</div>
	<!-- 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>
	<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>
	</div>
	<div class="surface-card sidebar-card">
	<h3 class="text-xl font-bold mb-4 text-right">تقييم الكتابة</h3>
	<div class="score-ring-wrap" role="img" aria-label="تقييم الكتابة">
	<svg class="w-full h-full transform -rotate-90" viewBox="0 0 160 160" aria-hidden="true">
	<circle cx="80" cy="80" r="70" fill="none" stroke="var(--color-border)" stroke-width="10"/>
	<circle id="score-circle" cx="80" cy="80" r="70" fill="none" stroke="url(#scoreGradient)" stroke-width="10" stroke-linecap="round" stroke-dasharray="440" stroke-dashoffset="440" class="score-circle"/>
	<defs><linearGradient id="scoreGradient" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="var(--primary-color)"/><stop offset="100%" stop-color="var(--secondary-color)"/></linearGradient></defs>
	</svg>
	<div class="score-value"><span id="score-value">--</span></div>
	</div>
	<p id="score-hint" class="text-center text-sm text-secondary">ابدأ الكتابة لرؤية تقييمك</p>
	</div>
	</div>
	</div>
	</div>
	</section>
	</div>
	<!-- Mobile bottom sheet -->
	<div id="bottom-sheet" class="bottom-sheet" aria-hidden="true">
	<div id="bottom-sheet-backdrop" class="bottom-sheet-backdrop"></div>
	<div class="bottom-sheet-panel" role="dialog" aria-label="الاقتراحات">
	<div class="bottom-sheet-handle" aria-hidden="true"></div>
	<div class="flex items-center justify-between mb-4">
	<h3 class="text-lg font-bold">الاقتراحات</h3>
	<button id="bottom-sheet-close" class="btn-ghost" type="button" aria-label="إغلاق">إغلاق</button>
	</div>
	<div id="bottom-sheet-list" class="suggestions-scroll" role="list" aria-live="polite"></div>
	<button id="apply-all-sheet" class="btn-primary apply-all-btn mt-4 is-hidden" type="button">تطبيق الكل</button>
	</div>
	</div>
	<!-- Mobile export sheet (documents) -->
	<div id="doc-export-sheet" class="bottom-sheet" aria-hidden="true">
	<div id="doc-export-sheet-backdrop" class="bottom-sheet-backdrop"></div>
	<div class="bottom-sheet-panel" role="dialog" aria-label="تصدير المستند">
	<div class="bottom-sheet-handle" aria-hidden="true"></div>
	<div class="flex items-center justify-between mb-4">
	<h3 class="text-lg font-bold">تصدير المستند</h3>
	<button id="doc-export-sheet-close" class="btn-ghost" type="button" aria-label="إغلاق">إغلاق</button>
	</div>
	<div class="flex flex-col gap-2">
	<button type="button" class="doc-dropdown__item" data-export-format="txt">ملف نصي (.txt)</button>
	<button type="button" class="doc-dropdown__item" data-export-format="docx">Word (.docx)</button>
	<button type="button" class="doc-dropdown__item" data-export-format="pdf">PDF (.pdf)</button>
	</div>
	</div>
	</div><!-- Pricing Page -->
	<div id="page-pricing" class="page">
	<section class="pt-32 pb-24" style="background: var(--background-color);">
	<div class="max-w-7xl mx-auto px-6">
	<div class="text-center mb-16">
	<h1 class="text-5xl lg:text-6xl font-bold mb-6">خطط <span class="text-gradient">واضحة ومرنة</span></h1>
	<p class="text-xl max-w-3xl mx-auto" style="color: var(--text-secondary); line-height: 1.9;">جميع الميزات متاحة مجانًا خلال الإصدار التجريبي. الخطط المدفوعة قادمة قريبًا.</p>
	</div>
	<!-- Beta Banner -->
	<div class="text-center mb-12 p-6 rounded-2xl beta-shimmer" style="background: linear-gradient(135deg, rgba(107, 163, 224, 0.1), rgba(165, 148, 232, 0.1)); border: 1px solid rgba(107, 163, 224, 0.2);">
	<div class="flex items-center justify-center gap-2 mb-2">
	<span class="text-sm font-bold px-3 py-1 rounded-full text-white gradient-accent">BETA</span>
	<span class="text-lg font-bold">الإصدار التجريبي — مجاني بالكامل</span>
	</div>
	<p class="text-base" style="color: var(--text-secondary);">استمتع بجميع ميزات بيان بدون أي قيود أثناء فترة التطوير</p>
	</div>
	<div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto"><!-- Current: Beta Free -->
	<div class="p-8 rounded-3xl transition-all hover:scale-105 relative shadow-2xl pricing-glow" style="background: linear-gradient(165deg, var(--surface-color) 0%, rgba(59, 130, 246, 0.1) 100%); border: 2px solid var(--primary-color);">
	<div class="pricing-badge gradient-accent text-white">
	متاح الآن
	</div>
	<div class="text-center mb-8">
	<h3 class="text-3xl font-bold mb-2">الإصدار التجريبي</h3>
	<p class="text-base mb-6" style="color: var(--text-secondary);">جميع الميزات بدون قيود</p>
	<div class="text-6xl font-bold mb-2">
	مجاني
	</div>
	<p class="text-base" style="color: var(--text-secondary);">لفترة محدودة</p>
	</div>
	<ul class="space-y-4 mb-8">
	<li class="flex items-center gap-3">
	<svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">تدقيق إملائي ونحوي متقدم</span></li>
	<li class="flex items-center gap-3">
	<svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">تصحيح علامات الترقيم</span></li>
	<li class="flex items-center gap-3">
	<svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">تلخيص النصوص بالذكاء الاصطناعي</span></li>
	<li class="flex items-center gap-3">
	<svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">الإكمال التلقائي الذكي</span></li>
	<li class="flex items-center gap-3">
	<svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">تصدير PDF و Word</span></li>
	<li class="flex items-center gap-3">
	<svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">تدقيق النص القرآني + ترجمة</span></li>
	<li class="flex items-center gap-3">
	<svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">تحويل اللهجات إلى الفصحى</span></li>
	<li class="flex items-center gap-3">
	<svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">كلمات غير محدودة</span></li>
	</ul><button onclick="showPage('editor')" class="w-full py-4 rounded-2xl text-lg font-bold text-white gradient-accent transition-all hover:scale-105 hover:shadow-2xl">← ابدأ الكتابة مجانًا</button>
	</div><!-- Future: Pro Plan -->
	<div class="p-8 rounded-3xl transition-all hover:scale-105 relative" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08); opacity: 0.7;">
	<div class="pricing-badge" style="background: var(--color-surface-elevated); color: var(--color-text-secondary);">
	قريبًا
	</div>
	<div class="text-center mb-8">
	<h3 class="text-3xl font-bold mb-2">احترافي</h3>
	<p class="text-base mb-6" style="color: var(--text-secondary);">للكُتّاب الجادين</p>
	<div class="flex items-center justify-center gap-2"><span class="text-6xl font-bold">٩</span>
	<div class="text-right">
	<div class="text-lg font-bold">دولار</div>
	<div class="text-sm" style="color: var(--text-secondary);">شهريًا</div>
	</div>
	</div>
	</div>
	<ul class="space-y-4 mb-8">
	<li class="flex items-center gap-3">
	<svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">كل ميزات الإصدار التجريبي</span></li>
	<li class="flex items-center gap-3">
	<svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">أولوية في التحليل</span></li>
	<li class="flex items-center gap-3">
	<svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">تخزين سحابي للمستندات</span></li>
	<li class="flex items-center gap-3">
	<svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">دعم فني مباشر</span></li>
	</ul><button disabled class="w-full py-4 rounded-2xl text-lg font-bold border-2 transition-all" style="border-color: rgba(255, 255, 255, 0.2); color: var(--text-secondary); cursor: not-allowed;">قريبًا</button>
	</div><!-- Future: Enterprise Plan -->
	<div class="p-8 rounded-3xl transition-all hover:scale-105" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08); opacity: 0.7;">
	<div class="pricing-badge" style="background: var(--color-surface-elevated); color: var(--color-text-secondary);">
	قريبًا
	</div>
	<div class="text-center mb-8">
	<h3 class="text-3xl font-bold mb-2">مؤسسات</h3>
	<p class="text-base mb-6" style="color: var(--text-secondary);">للفرق والمنظمات</p>
	<div class="flex items-center justify-center gap-2"><span class="text-6xl font-bold">٢٩</span>
	<div class="text-right">
	<div class="text-lg font-bold">دولار</div>
	<div class="text-sm" style="color: var(--text-secondary);">لكل مستخدم/شهر</div>
	</div>
	</div>
	</div>
	<ul class="space-y-4 mb-8">
	<li class="flex items-center gap-3">
	<svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">كل ميزات الاحترافي</span></li>
	<li class="flex items-center gap-3">
	<svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">إدارة الفرق</span></li>
	<li class="flex items-center gap-3">
	<svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">واجهة برمجية (API)</span></li>
	<li class="flex items-center gap-3">
	<svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">تكامل مخصص</span></li>
	<li class="flex items-center gap-3">
	<svg class="w-5 h-5" style="color: #22c55e;" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg><span class="text-base">دعم فني ذو أولوية</span></li>
	</ul><button disabled class="w-full py-4 rounded-2xl text-lg font-bold border-2 transition-all" style="border-color: rgba(255, 255, 255, 0.2); color: var(--text-secondary); cursor: not-allowed;">قريبًا</button>
	</div>
	</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">
	<div class="grid grid-cols-1 md:grid-cols-3 gap-12 mb-12" dir="rtl">
	<div>
	<div class="flex items-center gap-3 mb-4">
	<svg width="24" height="24" fill="none" stroke="url(#grad1)" viewBox="0 0 24 24" style="flex-shrink:0;"><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:var(--color-primary)"/><stop offset="100%" style="stop-color:var(--color-secondary)"/></linearGradient></defs><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><span id="footer-brand" class="text-2xl font-bold text-gradient">بيان</span>
	</div>
	<p class="text-sm leading-relaxed" style="color: var(--text-secondary); line-height: 1.8;">منصة ذكاء اصطناعي للكتابة العربية — تدقيق إملائي ونحوي، ترقيم، تلخيص، إكمال تلقائي، تدقيق القرآن، وتحويل اللهجات.</p>
	</div>
	<div>
	<h4 class="text-base font-bold mb-4">المنتج</h4>
	<ul class="space-y-3">
	<li><button onclick="showPage('editor')" class="text-sm transition-colors footer-link-hover" style="color: var(--text-secondary); background: none; border: none; cursor: pointer; font-family: inherit;">المحرر</button></li>
	<li><button onclick="showPage('features')" class="text-sm transition-colors footer-link-hover" style="color: var(--text-secondary); background: none; border: none; cursor: pointer; font-family: inherit;">الميزات</button></li>
	<li><button onclick="showPage('pricing')" class="text-sm transition-colors footer-link-hover" style="color: var(--text-secondary); background: none; border: none; cursor: pointer; font-family: inherit;">الأسعار</button></li>
	</ul>
	</div>
	<div>
	<h4 class="text-base font-bold mb-4">المزيد</h4>
	<ul class="space-y-3">
	<li><a href="https://bayyinah-alpha.vercel.app/" class="footer-external-link text-sm transition-colors" target="_blank" rel="noopener noreferrer">بَيِّنَة — القرآن والحديث</a></li>
	<li><a href="https://github.com/mohamedatef24/BAYAN" class="text-sm transition-colors hover:text-white" style="color: var(--text-secondary); display: flex; align-items: center; gap: 6px;" target="_blank" rel="noopener noreferrer"><svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/></svg>المستودع على GitHub</a></li>
	</ul>
	</div>
	</div>
	<div class="pt-8 border-t" style="border-color: var(--color-border);">
	<p class="text-sm text-center" style="color: var(--text-secondary);">© ٢٠٢٦ بيان. جميع الحقوق محفوظة.</p>
	</div>
	</div>
	</footer>
	<!-- Toast Container -->
	<div id="toast-container" class="toast-container"></div>
	<!-- Scroll to Top -->
	<button id="scroll-top-btn" class="scroll-top-btn" type="button" aria-label="العودة للأعلى">
	<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/></svg>
	</button>
	</div>
	<script>
	// Toast notification system
	function showToast(message, type = 'success', duration = 2500) {
	const container = document.getElementById('toast-container');
	if (!container) return;
	const toast = document.createElement('div');
	toast.className = 'toast toast--' + type;
	toast.textContent = message;
	container.appendChild(toast);
	setTimeout(() => {
	toast.classList.add('toast-out');
	setTimeout(() => toast.remove(), 300);
	}, duration);
	}

	// Custom confirmation dialog (replaces window.confirm)
	function showConfirmDialog(title, message, onConfirm) {
	var overlay = document.createElement('div');
	overlay.className = 'confirm-dialog-overlay';
	overlay.innerHTML =
	'<div class="confirm-dialog" dir="rtl">' +
	'<div class="confirm-dialog__title">' + title + '</div>' +
	'<div class="confirm-dialog__message">' + message + '</div>' +
	'<div class="confirm-dialog__actions">' +
	'<button class="confirm-dialog__btn" id="confirm-cancel">\u0625\u0644\u063a\u0627\u0621</button>' +
	'<button class="confirm-dialog__btn confirm-dialog__btn--danger" id="confirm-ok">\u062a\u0623\u0643\u064a\u062f</button>' +
	'</div>' +
	'</div>';
	document.body.appendChild(overlay);
	overlay.querySelector('#confirm-cancel').onclick = function() { overlay.remove(); };
	overlay.querySelector('#confirm-ok').onclick = function() { overlay.remove(); if (onConfirm) onConfirm(); };
	overlay.addEventListener('click', function(e) { if (e.target === overlay) overlay.remove(); });
	document.addEventListener('keydown', function _esc(e) {
	if (e.key === 'Escape') { overlay.remove(); document.removeEventListener('keydown', _esc); }
	});
	}

	// Scroll to top
	(function() {
	const btn = document.getElementById('scroll-top-btn');
	const sc = document.querySelector('.h-full.overflow-auto') \|\| document.documentElement;
	if (!btn) return;
	const target = sc === document.documentElement ? window : sc;
	(sc === document.documentElement ? window : sc).addEventListener('scroll', () => {
	const st = sc === document.documentElement ? window.scrollY : sc.scrollTop;
	btn.classList.toggle('visible', st > 400);
	const nav = document.querySelector('.site-nav');
	if (nav) nav.classList.toggle('nav-scrolled', st > 20);
	});
	btn.addEventListener('click', () => {
	(sc === document.documentElement ? window : sc).scrollTo({ top: 0, behavior: 'smooth' });
	});
	})();

	// Default configuration
	const defaultConfig = {
	brand_name: 'بيان',
	hero_headline: 'اكتب العربية بثقة واحتراف',
	hero_subheadline: 'منصة ذكاء اصطناعي متكاملة لتصحيح الإملاء والنحو والترقيم وتلخيص النصوص والإكمال التلقائي — مصمّمة خصيصًا للغة العربية.',
	cta_primary: 'ابدأ الكتابة مجانًا',
	primary_color: '#6BA3E0',
	secondary_color: '#A594E8',
	font_family: 'Cairo',
	font_size: 16
	};

	let config = { ...defaultConfig };

	// Page navigation
	function showPage(pageId) {
	document.querySelectorAll('.page').forEach(page => page.classList.remove('active'));
	document.getElementById('page-' + pageId).classList.add('active');

	document.querySelectorAll('.nav-link, .mobile-drawer-link').forEach(link => {
	link.classList.remove('active');
	});

	document.querySelectorAll(`[data-page="${pageId}"]`).forEach(link => {
	link.classList.add('active');
	});

	try {
	sessionStorage.setItem('bayan_current_page', pageId);
	} catch (e) {}

	window.scrollTo(0, 0);
	}


	function switchTab(tab) {
	const writeTab = document.getElementById('write-tab');
	const summarizeTab = document.getElementById('summarize-tab');
	const dialectTab = document.getElementById('dialect-tab');
	const writeArea = document.getElementById('write-area');
	const summarizeArea = document.getElementById('summarize-area');
	const dialectArea = document.getElementById('dialect-area');
	const formatToolbar = document.getElementById('format-toolbar');
	[writeTab, summarizeTab, dialectTab].forEach(function(t){if(t)t.classList.remove('active');});
	[writeArea, summarizeArea, dialectArea].forEach(function(a){if(a)a.classList.add('is-hidden');});
	if (tab === 'write') { writeTab.classList.add('active'); writeArea.classList.remove('is-hidden'); if(formatToolbar)formatToolbar.style.display=''; }
	else if (tab === 'summarize') { summarizeTab.classList.add('active'); summarizeArea.classList.remove('is-hidden'); if(formatToolbar)formatToolbar.style.display='none'; }
	else if (tab === 'dialect') { dialectTab.classList.add('active'); dialectArea.classList.remove('is-hidden'); if(formatToolbar)formatToolbar.style.display='none'; }
	}
	let _dialectResult = '';
	async function convertDialect() {
	var input = document.getElementById('dialect-input').value.trim();
	if (!input) { if (typeof showToast === 'function') showToast('الرجاء كتابة نص أولاً', 'warning'); return; }

	var resultCard = document.getElementById('dialect-result-card');
	var resultDiv = document.getElementById('dialect-result');
	var applyBtn = document.getElementById('dialect-apply-btn');
	var convertBtn = document.getElementById('dialect-convert-btn');
	resultDiv.innerHTML = '<p class="text-secondary text-center">⏳ جاري التحويل...</p>';
	resultCard.classList.remove('is-hidden');
	if (applyBtn) applyBtn.classList.add('is-hidden');
	if (convertBtn) { convertBtn.disabled = true; convertBtn.textContent = '⏳ جاري التحويل...'; }

	var _abortCtrl = new AbortController();
	var _timeout = setTimeout(function(){ _abortCtrl.abort(); }, 30000);
	try {
	var resp = await fetch('/api/dialect', {
	method: 'POST',
	headers: { 'Content-Type': 'application/json' },
	body: JSON.stringify({ text: input }),
	signal: _abortCtrl.signal
	});
	var data = await resp.json();
	if (data.status === 'success' && data.converted_text) {
	_dialectResult = data.converted_text;
	var esc = function(t) { return t.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'); };
	resultDiv.innerHTML = '<p style="font-size:20px; line-height:2; direction:rtl; text-align:center;">' + esc(data.converted_text) + '</p>';
	if (applyBtn) applyBtn.classList.remove('is-hidden');
	} else {
	_dialectResult = '';
	var errMsg = (data.error \|\| 'حدث خطأ أثناء التحويل').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
	resultDiv.innerHTML = '<p class="text-secondary text-center">' + errMsg + '</p>';
	}
	} catch (err) {
	_dialectResult = '';
	var msg = err.name === 'AbortError' ? 'انتهى وقت الانتظار — حاول مرة أخرى' : 'حدث خطأ — تأكد من الاتصال';
	resultDiv.innerHTML = '<p class="text-secondary text-center">' + msg + '</p>';
	} finally {
	clearTimeout(_timeout);
	if (convertBtn) { convertBtn.disabled = false; convertBtn.textContent = 'تحويل إلى الفصحى'; }
	}
	}

	function copyDialectResult() {
	if (!_dialectResult) { var t = document.getElementById('dialect-result'); if (t) navigator.clipboard.writeText(t.innerText); }
	else navigator.clipboard.writeText(_dialectResult);
	if (typeof showToast === 'function') showToast('✓ تم النسخ');
	}

	function applyDialectResult() {
	if (!_dialectResult) return;
	var editor = document.getElementById('editor-container');
	if (!editor) return;
	pushUndoState();
	var esc = function(t) { return t.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'); };
	editor.innerHTML = esc(_dialectResult);
	editor.dispatchEvent(new Event('input', { bubbles: true }));
	switchTab('write');
	if (typeof showToast === 'function') showToast('✓ تم تطبيق النص الفصيح في المحرر');
	}

	function updateDialectCharCount() {
	var input = document.getElementById('dialect-input');
	var counter = document.getElementById('dialect-char-count');
	if (!input \|\| !counter) return;
	var len = input.value.length;
	var arabicLen = len.toLocaleString('ar-EG');
	counter.textContent = arabicLen + ' / ٥٬٠٠٠ حرف';
	counter.style.color = len > 5000 ? '#ef4444' : 'var(--text-secondary)';
	}

	/* ═══════════════════════════════════════════
	Quran Verification & Translation
	═══════════════════════════════════════════ */
	let _quranCurrentQuery = '';
	let _quranSavedRange = null;
	let _quranVerseClean = '';
	let _quranTransClean = '';
	let _quranRef = '';
	let _quranTransRef = '';

	async function verifyQuranText() {
	const sel = window.getSelection();
	const text = sel ? sel.toString().trim() : '';
	if (!text) {
	if (typeof showToast === 'function') showToast('علّم على النص القرآني أولاً', 'warning');
	return;
	}
	// Save selection range before modal steals focus
	_quranSavedRange = (sel.rangeCount > 0) ? sel.getRangeAt(0).cloneRange() : null;
	_quranCurrentQuery = text;
	_quranVerseClean = '';

	// Show modal with loading
	const modal = document.getElementById('quran-modal');
	document.getElementById('quran-input-display').textContent = text;
	document.getElementById('quran-uthmani-text').innerHTML = '<span class="text-secondary">⏳ جاري البحث...</span>';
	document.getElementById('quran-reference').textContent = '';
	document.getElementById('quran-translation-result').classList.add('is-hidden');
	document.getElementById('quran-lang-select').value = '';
	// Hide apply/copy until result
	var _applyBtn = document.getElementById('quran-apply-btn');
	var _copyBtn = document.getElementById('quran-copy-btn');
	if (_applyBtn) _applyBtn.classList.add('is-hidden');
	if (_copyBtn) _copyBtn.classList.add('is-hidden');
	modal.classList.remove('is-hidden');
	document.body.style.overflow = 'hidden';

	var _qAbort = new AbortController();
	var _qTimeout = setTimeout(function(){ _qAbort.abort(); }, 30000);
	try {
	const res = await fetch('/api/quran', {
	method: 'POST',
	headers: { 'Content-Type': 'application/json' },
	body: JSON.stringify({ text: text, language: 'تدقيق الايات' }),
	signal: _qAbort.signal
	});
	const data = await res.json();

	if (data.error) {
	var _escErr = data.error.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
	document.getElementById('quran-uthmani-text').innerHTML =
	'<span class="text-secondary">' + _escErr + '</span>';
	return;
	}

	// Parse matched_segment: "(verse text) 【surah: ayah】"
	const seg = data.matched_segment \|\| '';
	const refMatch = seg.match(/【([^】]+)】/);
	const verseText = seg.replace(/\s【[^】]+】\s$/, '').replace(/^$/, '').replace(/$$/, '');
	const reference = refMatch ? refMatch[1] : '';

	_quranVerseClean = verseText;
	_quranRef = reference;
	document.getElementById('quran-uthmani-text').textContent = verseText;
	document.getElementById('quran-reference').textContent = reference ? '[' + reference + ']' : '';
	// Show apply & copy buttons
	document.getElementById('quran-apply-btn').classList.remove('is-hidden');
	document.getElementById('quran-copy-btn').classList.remove('is-hidden');

	} catch (err) {
	var _qMsg = err.name === 'AbortError' ? 'انتهى وقت الانتظار — حاول مرة أخرى' : 'حدث خطأ أثناء البحث — تأكد من الاتصال';
	document.getElementById('quran-uthmani-text').innerHTML =
	'<span class="text-secondary">' + _qMsg + '</span>';
	} finally {
	clearTimeout(_qTimeout);
	}
	}

	async function translateQuranVerse() {
	const lang = document.getElementById('quran-lang-select').value;
	if (!lang \|\| !_quranCurrentQuery) return;

	const resultDiv = document.getElementById('quran-translation-result');
	const textEl = document.getElementById('quran-translation-text');
	textEl.innerHTML = '<span class="text-secondary">⏳ جاري الترجمة...</span>';
	resultDiv.classList.remove('is-hidden');
	// Hide apply/copy translation until result
	var _applyTransBtn = document.getElementById('quran-apply-trans-btn');
	var _copyTransBtn = document.getElementById('quran-copy-trans-btn');
	if (_applyTransBtn) _applyTransBtn.classList.add('is-hidden');
	if (_copyTransBtn) _copyTransBtn.classList.add('is-hidden');

	var _tAbort = new AbortController();
	var _tTimeout = setTimeout(function(){ _tAbort.abort(); }, 30000);
	try {
	const res = await fetch('/api/quran', {
	method: 'POST',
	headers: { 'Content-Type': 'application/json' },
	body: JSON.stringify({ text: _quranCurrentQuery, language: lang }),
	signal: _tAbort.signal
	});
	const data = await res.json();

	if (data.error) {
	var _escTErr = data.error.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
	textEl.innerHTML = '<span class="text-secondary">' + _escTErr + '</span>';
	return;
	}

	// Parse translation: "(text (ayah)) 【SurahName: ayah】"
	const seg = data.matched_segment \|\| '';
	const refMatch = seg.match(/【([^】]+)】/);
	const transText = seg.replace(/\s【[^】]+】\s$/, '').replace(/^$/, '').replace(/$$/, '');
	const transRef = refMatch ? refMatch[1] : '';

	textEl.textContent = transText;
	_quranTransClean = transText;
	_quranTransRef = transRef;
	// Show reference in translated language
	const refEl = document.getElementById('quran-translation-ref');
	if (refEl) {
	refEl.textContent = transRef ? '[' + transRef + ']' : '';
	refEl.style.display = transRef ? '' : 'none';
	}
	// Show apply translation button
	document.getElementById('quran-apply-trans-btn').classList.remove('is-hidden');
	document.getElementById('quran-copy-trans-btn').classList.remove('is-hidden');

	} catch (err) {
	var _tMsg = err.name === 'AbortError' ? 'انتهى وقت الانتظار — حاول مرة أخرى' : 'حدث خطأ في الترجمة';
	textEl.innerHTML = '<span class="text-secondary">' + _tMsg + '</span>';
	} finally {
	clearTimeout(_tTimeout);
	}
	}

	function closeQuranModal() {
	document.getElementById('quran-modal').classList.add('is-hidden');
	document.body.style.overflow = '';
	}

	function copyQuranResult() {
	const verse = _quranVerseClean \|\| '';
	const ref = _quranRef ? ' [' + _quranRef + ']' : '';
	const text = verse + ref;
	if (!text.trim()) return;
	navigator.clipboard.writeText(text).then(() => {
	if (typeof showToast === 'function') showToast('✓ تم نسخ النص المدقق');
	const btn = document.getElementById('quran-copy-btn');
	if (btn) { btn.textContent = '✅'; setTimeout(() => { btn.textContent = '📋'; }, 1500); }
	});
	}

	// Ctrl+Q → Quran verification shortcut (e.code works with any keyboard language)
	// Escape → Close Quran modal
	document.addEventListener('keydown', (e) => {
	if ((e.ctrlKey \|\| e.metaKey) && e.code === 'KeyQ') {
	e.preventDefault();
	verifyQuranText();
	}
	if (e.key === 'Escape') {
	var modal = document.getElementById('quran-modal');
	if (modal && !modal.classList.contains('is-hidden')) {
	closeQuranModal();
	}
	}
	});

	function copyQuranTranslation() {
	const trans = _quranTransClean \|\| '';
	const ref = _quranTransRef ? ' [' + _quranTransRef + ']' : '';
	const text = trans + ref;
	if (!text.trim()) return;
	navigator.clipboard.writeText(text).then(() => {
	if (typeof showToast === 'function') showToast('✓ تم نسخ الترجمة');
	const btn = document.getElementById('quran-copy-trans-btn');
	if (btn) { btn.textContent = '✅'; setTimeout(() => { btn.textContent = '📋'; }, 1500); }
	});
	}

	function _replaceInEditor(newText, ref) {
	var editor = document.getElementById('editor-container');
	if (!editor \|\| !_quranCurrentQuery) return false;
	pushUndoState(); // Save state before Quran replace
	closeQuranModal();
	// Replace in editor: wrap in quran-applied span to protect from analysis
	var plain = editor.textContent \|\| '';
	var idx = plain.indexOf(_quranCurrentQuery);
	if (idx === -1) return false;
	var before = plain.substring(0, idx);
	var after = plain.substring(idx + _quranCurrentQuery.length);
	// Build HTML: before + quran span (verse + styled ref) + after
	var esc = function(t) { return t.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'); };
	var refHTML = ref ? ' <span class="quran-ref-inline">[' + esc(ref) + ']</span>' : '';
	editor.innerHTML = esc(before) +
	'<span class="quran-applied" contenteditable="false" data-quran="true">' +
	esc(newText) + refHTML + '</span>' +
	esc(after);
	editor.focus();
	editor.dispatchEvent(new Event('input', { bubbles: true }));
	return true;
	}

	function applyQuranText() {
	if (!_quranVerseClean \|\| !_quranCurrentQuery) {
	if (typeof showToast === 'function') showToast('لا يوجد نص للتطبيق', 'warning');
	return;
	}
	if (_replaceInEditor(_quranVerseClean, _quranRef)) {
	if (typeof showToast === 'function') showToast('✓ تم تطبيق النص القرآني المدقق');
	} else {
	if (typeof showToast === 'function') showToast('لم يتم العثور على النص الأصلي', 'error');
	}
	}

	function applyQuranTranslation() {
	if (!_quranTransClean \|\| !_quranCurrentQuery) {
	if (typeof showToast === 'function') showToast('لا يوجد ترجمة للتطبيق', 'warning');
	return;
	}
	if (_replaceInEditor(_quranTransClean, _quranTransRef)) {
	if (typeof showToast === 'function') showToast('✓ تم تطبيق الترجمة');
	} else {
	if (typeof showToast === 'function') showToast('لم يتم العثور على النص الأصلي', 'error');
	}
	}



	// Summarization functions
	function updateSummaryLength() {
	// Slider moves but label stays fixed as متوسط
	}

	async function generateSummary(event) {
	const text = (typeof getEditorText === 'function' ? getEditorText() : '').trim();

	if (!text) {
	const summaryText = document.getElementById('summary-text');
	summaryText.innerHTML = '<p class="text-secondary text-center">الرجاء كتابة نص في المحرر أولاً</p>';
	document.getElementById('summary-preview').classList.add('show');
	return;
	}

	const lengthValue = document.getElementById('summary-length').value;
	const isFullText = false;
	const generateButton = event ? event.target : document.getElementById('generate-summary-btn');
	const summaryText = document.getElementById('summary-text');
	const summaryPreview = document.getElementById('summary-preview');

	// Show loading state
	const originalButtonText = generateButton.textContent;
	generateButton.textContent = 'جاري التوليد...';
	generateButton.disabled = true;
	summaryText.innerHTML = '<div class="summary-loading"><span class="summary-loading__spinner" aria-hidden="true"></span><p class="summary-loading__text">جاري توليد الملخص...</p></div>';
	summaryPreview.classList.add('show');

	// Add spin animation if not exists — defined in base.css

	try {
	// Call API
	const response = await fetch('/api/summarize', {
	method: 'POST',
	headers: {
	'Content-Type': 'application/json',
	},
	body: JSON.stringify({
	text: text,
	length: parseInt(lengthValue),
	full_text: isFullText
	})
	});

	const data = await response.json();

	if (!response.ok) {
	throw new Error(data.error \|\| 'حدث خطأ أثناء توليد الملخص');
	}

	if (data.status === 'success' && data.summary) {
	let summaryContent = data.summary;

	// Item 11: Bullet mode
	if (window._summaryMode === 'bullets') {
	const sentences = summaryContent.split(/[.،؛]\s*/).filter(s => s.trim().length > 2);
	const ul = document.createElement('ul');
	ul.style.cssText = 'list-style: disc; padding-right: 1.5rem; direction: rtl; text-align: right;';
	sentences.forEach(s => {
	const li = document.createElement('li');
	li.textContent = s.trim();
	li.style.marginBottom = '8px';
	ul.appendChild(li);
	});
	summaryText.textContent = '';
	summaryText.appendChild(ul);
	} else {
	const p = document.createElement('p');
	p.textContent = summaryContent;
	summaryText.textContent = '';
	summaryText.appendChild(p);
	}

	// Item 6: Summary stats
	if (typeof updateSummaryStats === 'function') {
	updateSummaryStats(summaryContent);
	}
	} else {
	throw new Error(data.error \|\| 'لم يتم توليد ملخص');
	}

	} catch (error) {
	console.error('Error generating summary:', error);
	const safeMsg = typeof escapeHtml === 'function'
	? escapeHtml(error.message \|\| 'تعذر توليد الملخص. يرجى المحاولة مرة أخرى.')
	: String(error.message \|\| 'تعذر توليد الملخص. يرجى المحاولة مرة أخرى.');
	summaryText.innerHTML = `
	<div class="summary-loading">
	<p class="summary-error">⚠️ حدث خطأ</p>
	<p class="text-secondary text-caption">${safeMsg}</p>
	<p class="text-muted text-label mt-2">تأكد من أن الخادم يعمل وأن النموذج محمّل بشكل صحيح.</p>
	</div>
	`;
	} finally {
	// Restore button state
	generateButton.textContent = originalButtonText;
	generateButton.disabled = false;
	}
	}

	function copySummary() {
	const text = document.getElementById('summary-text').innerText;
	navigator.clipboard.writeText(text).then(() => {
	const btn = document.querySelector('[onclick="copySummary()"]');
	if (btn) {
	const originalText = btn.textContent;
	btn.textContent = 'تم النسخ!';
	if (typeof showToast === 'function') showToast('✓ تم نسخ الملخص');
	setTimeout(() => btn.textContent = originalText, 2000);
	}
	}).catch(() => {
	// Fallback for older browsers
	const ta = document.createElement('textarea');
	ta.value = text;
	document.body.appendChild(ta);
	ta.select();
	document.execCommand('copy');
	document.body.removeChild(ta);
	});
	}

	function exportSummaryAsTxt() {
	exportSummaryAs('txt');
	}

	function getSummaryText() {
	return (document.getElementById('summary-text')?.innerText \|\| '').trim();
	}

	async function exportSummaryAs(format) {
	const text = getSummaryText();
	if (!text) {
	if (typeof showToast === 'function') showToast('لا يوجد ملخص للتصدير', 'error');
	return;
	}

	if (format === 'txt') {
	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('✓ تم تصدير الملخص');
	} else if (format === 'docx') {
	if (typeof docx === 'undefined') {
	if (typeof showToast === 'function') showToast('مكتبة Word غير محمّلة', 'error');
	return;
	}
	try {
	const paragraphs = text.split(/\n+/).filter(p => p.trim());
	const children = paragraphs.map(block =>
	new docx.Paragraph({
	bidirectional: true,
	alignment: docx.AlignmentType.RIGHT,
	children: [new docx.TextRun({ text: block, rightToLeft: true, font: 'Arial' })]
	})
	);
	const doc = new docx.Document({ sections: [{ properties: { rightToLeft: true }, children }] });
	const blob = await docx.Packer.toBlob(doc);
	const url = URL.createObjectURL(blob);
	const a = document.createElement('a');
	a.href = url;
	a.download = 'ملخص-بيان.docx';
	document.body.appendChild(a);
	a.click();
	document.body.removeChild(a);
	URL.revokeObjectURL(url);
	if (typeof showToast === 'function') showToast('✓ تم تصدير الملخص كـ Word');
	} catch (err) {
	console.error('Summary DOCX export error:', err);
	if (typeof showToast === 'function') showToast('تعذر تصدير ملف Word', 'error');
	}
	} else if (format === 'pdf') {
	if (typeof html2pdf === 'undefined') {
	if (typeof showToast === 'function') showToast('مكتبة PDF غير محمّلة', 'error');
	return;
	}
	try {
	if (typeof showToast === 'function') showToast('جاري تصدير PDF...');
	const html = buildPdfHtmlString(text);
	await html2pdf().set({
	margin: [15, 15, 15, 15],
	filename: 'ملخص-بيان.pdf',
	image: { type: 'jpeg', quality: 0.95 },
	html2canvas: { scale: 1.5, useCORS: true, backgroundColor: '#ffffff', logging: false, foreignObjectRendering: false },
	jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
	}).from(html, 'string').save();
	if (typeof showToast === 'function') showToast('✓ تم تصدير الملخص كـ PDF');
	} catch (err) {
	console.error('Summary PDF export error:', err);
	if (typeof showToast === 'function') showToast('تعذر تصدير PDF', 'error');
	}
	}

	// Close dropdown
	const menu = document.getElementById('summary-export-menu');
	if (menu) menu.classList.remove('show');
	}

	// 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);
	}

	// Word count goal UI
	function setWordGoalUI() {
	const current = localStorage.getItem('bayan_word_goal') \|\| '0';
	const input = prompt('حدد هدف عدد الكلمات (أدخل ٠ لإلغاء الهدف):', current);
	if (input === null) return;
	const goal = parseInt(input, 10);
	if (isNaN(goal) \|\| goal < 0) return;
	localStorage.setItem('bayan_word_goal', String(goal));
	if (typeof updateEditorStats === 'function') updateEditorStats();
	if (goal > 0) {
	if (typeof showToast === 'function') showToast('✓ تم تحديد الهدف: ' + goal + ' كلمة');
	} else {
	if (typeof showToast === 'function') showToast('تم إلغاء هدف الكلمات');
	const el = document.getElementById('word-goal-indicator');
	if (el) el.style.display = 'none';
	}
	}

	// Element SDK Integration
	async function onConfigChange(cfg) {
	config = { ...defaultConfig, ...cfg };

	// Brand accents only — surfaces & text are owned by data-theme in tokens.css
	const primary = config.primary_color \|\| defaultConfig.primary_color;
	const secondary = config.secondary_color \|\| defaultConfig.secondary_color;
	document.documentElement.style.setProperty('--color-primary', primary);
	document.documentElement.style.setProperty('--color-secondary', secondary);
	document.documentElement.style.setProperty('--primary-color', primary);
	document.documentElement.style.setProperty('--secondary-color', secondary);

	const brandName = config.brand_name \|\| defaultConfig.brand_name;
	const navBrand = document.getElementById('nav-brand');
	const footerBrand = document.getElementById('footer-brand');
	if (navBrand) navBrand.textContent = brandName;
	if (footerBrand) footerBrand.textContent = brandName;

	const heroHeadline = config.hero_headline \|\| defaultConfig.hero_headline;
	const headlineEl = document.getElementById('hero-headline');
	if (headlineEl) {
	const parts = heroHeadline.split('\n');
	if (parts.length > 1) {
	headlineEl.innerHTML = parts[0] + '<br/><span class="text-gradient">' + parts[1] + '</span>';
	} else {
	headlineEl.innerHTML = heroHeadline.replace('بثقة واحتراف', '<span class="text-gradient">بثقة واحتراف</span>');
	}
	}

	const heroSubheadline = document.getElementById('hero-subheadline');
	if (heroSubheadline) {
	heroSubheadline.textContent = config.hero_subheadline \|\| defaultConfig.hero_subheadline;
	}

	const ctaPrimary = config.cta_primary \|\| defaultConfig.cta_primary;
	const navCta = document.getElementById('nav-cta');
	const heroCta = document.getElementById('hero-cta-primary');
	if (navCta) navCta.textContent = ctaPrimary;
	if (heroCta) heroCta.textContent = ctaPrimary;

	const fontFamily = config.font_family \|\| defaultConfig.font_family;
	const fontSize = config.font_size \|\| defaultConfig.font_size;
	document.body.style.fontFamily = `${fontFamily}, 'Cairo', sans-serif`;
	document.body.style.fontSize = `${fontSize}px`;
	}

	function mapToCapabilities(cfg) {
	return {
	recolorables: [
	{
	get: () => cfg.primary_color \|\| defaultConfig.primary_color,
	set: (value) => { cfg.primary_color = value; window.elementSdk.setConfig({ primary_color: value }); }
	},
	{
	get: () => cfg.secondary_color \|\| defaultConfig.secondary_color,
	set: (value) => { cfg.secondary_color = value; window.elementSdk.setConfig({ secondary_color: value }); }
	}
	],
	borderables: [],
	fontEditable: {
	get: () => cfg.font_family \|\| defaultConfig.font_family,
	set: (value) => { cfg.font_family = value; window.elementSdk.setConfig({ font_family: value }); }
	},
	fontSizeable: {
	get: () => cfg.font_size \|\| defaultConfig.font_size,
	set: (value) => { cfg.font_size = value; window.elementSdk.setConfig({ font_size: value }); }
	}
	};
	}

	function mapToEditPanelValues(cfg) {
	return new Map([
	['brand_name', cfg.brand_name \|\| defaultConfig.brand_name],
	['hero_headline', cfg.hero_headline \|\| defaultConfig.hero_headline],
	['hero_subheadline', cfg.hero_subheadline \|\| defaultConfig.hero_subheadline],
	['cta_primary', cfg.cta_primary \|\| defaultConfig.cta_primary]
	]);
	}

	// Initialize SDK
	if (window.elementSdk) {
	window.elementSdk.init({
	defaultConfig,
	onConfigChange,
	mapToCapabilities,
	mapToEditPanelValues
	});
	} else {
	onConfigChange(defaultConfig);
	}

	document.addEventListener('DOMContentLoaded', async () => {
	await initAuth();
	initTheme();
	initUI();
	initEditor();
	if (typeof initFormatToolbar === 'function') initFormatToolbar();
	if (typeof initDocSearch === 'function') initDocSearch();
	initDocuments();
	updateSuggestionsList([]);
	// Phase 7 — Sync System
	if (typeof SyncManager !== 'undefined') SyncManager.init();

	// Phase 6 — Cloud persistence
	await initSettingsSync();
	initDocumentsCloud();
	initSummaries();

	try {
	const savedPage = sessionStorage.getItem('bayan_current_page');
	if (savedPage) {
	showPage(savedPage);
	} else if (window.location.hash === '#/editor') {
	showPage('editor');
	} else {
	showPage('home');
	}
	} catch (e) {
	if (window.location.hash === '#/editor') {
	showPage('editor');
	} else {
	showPage('home');
	}
	}
	});
	</script>
	<!-- Quran Verification Modal -->
	<div id="quran-modal" class="quran-modal is-hidden" role="dialog" aria-label="نتيجة التدقيق القرآني" aria-modal="true">
	<div class="quran-modal-backdrop" onclick="closeQuranModal()"></div>
	<div class="quran-modal-panel" dir="rtl">
	<!-- Header -->
	<div class="flex items-center justify-between mb-4">
	<div class="flex items-center gap-2">
	<svg width="20" height="20" fill="none" stroke="#06b6d4" 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>
	<span class="text-lg font-bold">تدقيق النص القرآني</span>
	</div>
	<button onclick="closeQuranModal()" class="btn-ghost" style="font-size:18px;padding:4px 8px;" aria-label="إغلاق">✕</button>
	</div>
	<!-- Input text -->
	<div class="p-3 rounded-xl mb-4" style="background: rgba(255,255,255,0.04); border: 1px solid var(--color-border);">
	<span class="text-xs" style="color:var(--text-secondary);">📝 النص المحدد:</span>
	<p id="quran-input-display" class="text-base mt-1" style="color:var(--color-text-primary);"></p>
	</div>
	<!-- Uthmani Result -->
	<div class="quran-result-card">
	<div class="flex items-center justify-between mb-3">
	<div class="text-sm font-bold" style="color:#06b6d4;">✓ النص القرآني المدقق</div>
	<div class="flex items-center gap-2">
	<button id="quran-copy-btn" onclick="copyQuranResult()" class="quran-copy-btn is-hidden" type="button" title="نسخ النص المدقق">📋</button>
	<button id="quran-apply-btn" onclick="applyQuranText()" class="quran-apply-btn is-hidden" type="button">تطبيق ✓</button>
	</div>
	</div>
	<p id="quran-uthmani-text" class="quran-uthmani"></p>
	<p id="quran-reference" class="quran-reference"></p>
	</div>
	<!-- Translation -->
	<div class="mt-4 pt-4" style="border-top:1px solid var(--color-border);">
	<div class="flex items-center gap-3 mb-3 flex-wrap">
	<svg width="16" height="16" fill="none" stroke="#06b6d4" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/></svg>
	<span class="text-sm font-bold">ترجمة الآية</span>
	<select id="quran-lang-select" onchange="translateQuranVerse()" class="quran-lang-select">
	<option value="">— اختر لغة —</option>
	<option value="english">🇬🇧 English</option>
	<option value="french">🇫🇷 Français</option>
	<option value="turkish">🇹🇷 Türkçe</option>
	<option value="persian">🇮🇷 فارسی</option>
	<option value="russian">🇷🇺 Русский</option>
	<option value="spanish">🇪🇸 Español</option>
	<option value="german">🇩🇪 Deutsch</option>
	<option value="indonesian">🇮🇩 Indonesia</option>
	<option value="malay">🇲🇾 Melayu</option>
	<option value="bengali">🇧🇩 বাংলা</option>
	<option value="bosnian">🇧🇦 Bosanski</option>
	<option value="portuguese">🇵🇹 Português</option>
	<option value="uzbek">🇺🇿 O'zbek</option>
	</select>
	</div>
	<div id="quran-translation-result" class="is-hidden p-4 rounded-xl" style="background:rgba(6,182,212,0.06); border:1px solid rgba(6,182,212,0.15);">
	<p id="quran-translation-text" style="font-size:20px; line-height:2; color:var(--color-text-primary); text-align:center;"></p>
	<p id="quran-translation-ref" class="quran-reference" style="display:none;"></p>
	<div class="flex items-center justify-center gap-2 mt-3">
	<button id="quran-copy-trans-btn" onclick="copyQuranTranslation()" class="quran-copy-btn is-hidden" type="button" title="نسخ الترجمة">📋</button>
	<button id="quran-apply-trans-btn" onclick="applyQuranTranslation()" class="quran-apply-btn is-hidden" type="button">تطبيق الترجمة ✓</button>
	</div>
	</div>
	</div>
	</div>
	</div>
	</body>
	</html>