<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, interactive-widget=resizes-content">
  
  <title>مبهر | Mobhir Audio</title>
  <meta name="description" content="منصة مبهر لبث وتخزين المواد الصوتية والاستشارات المباشرة بأعلى معايير الأداء والسرعة">
  <meta name="theme-color" content="#0f172a">
  <meta name="color-scheme" content="dark">
  
  <!-- تعريفات الـ PWA المعيارية وبيئة التشغيل المستقلة -->
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="apple-mobile-web-app-title" content="مبهر">
  <link rel="manifest" href="/manifest.webmanifest">
  <link rel="apple-touch-icon" href="/icons/icon-192.png">
  
  <!-- خريطة التحميل المسبق الصارمة لمكافحة الشلال الشبكي للموديولات -->
  <link rel="modulepreload" href="/js/config.js">
  <link rel="modulepreload" href="/js/utils.js">
  <link rel="modulepreload" href="/js/storage.js">
  <link rel="modulepreload" href="/js/sync.js">
  <link rel="modulepreload" href="/js/app.js">

  <!-- ملفات التنسيق القياسية الخالية من أي اعتماديات خارجية -->
  <link rel="stylesheet" href="/css/design-tokens.css">
  <link rel="stylesheet" href="/css/main.css">
</head>
<body class="app-body">

  <div id="app-root" class="app-root">

    <!-- الترويسة العليا المستقرة -->
    <header id="app-header" class="app-header" role="banner">
      <div class="header-brand">
        <h1 class="brand-title">مبهر</h1>
        <span class="brand-badge" id="engine-status" role="status" aria-live="polite" hidden></span>
      </div>
      <div class="header-actions">
        <button type="button" id="btn-header-auth" class="btn-icon" aria-label="إدارة الحساب">
          <svg class="icon" aria-hidden="true"><use href="#icon-user"></use></svg>
        </button>
        <button type="button" id="btn-notifications-toggle" class="btn-icon btn-notifications" aria-label="التنبيهات والإشعارات" aria-expanded="false" aria-controls="notifications-panel">
          <svg class="icon" aria-hidden="true"><use href="#icon-bell"></use></svg>
          <span id="notifications-badge" class="notifications-badge" hidden>0</span>
        </button>
        <button type="button" id="btn-search-toggle" class="btn-icon" aria-label="البحث في التسجيلات">
          <svg class="icon" aria-hidden="true"><use href="#icon-search"></use></svg>
        </button>
      </div>
    </header>

    <!-- لوحة التنبيهات المنبثقة التفاعلية -->
    <aside id="notifications-panel" class="notifications-panel" aria-label="مركز التنبيهات" hidden>
      <div class="notifications-header">
        <h2 class="notifications-title">التنبيهات والإشعارات</h2>
        <button type="button" id="btn-notifications-close" class="btn-icon" aria-label="إغلاق التنبيهات">
          <svg class="icon" aria-hidden="true"><use href="#icon-close"></use></svg>
        </button>
      </div>
      <div id="notifications-list" class="notifications-list" role="region" aria-live="polite"></div>
    </aside>

    <!-- شاشة البحث والتصفية السريعة -->
    <section id="search-container" class="search-container" aria-label="أدوات البحث" hidden>
      <div class="search-input-wrapper">
        <svg class="icon search-icon" aria-hidden="true"><use href="#icon-search"></use></svg>
        <input type="search" id="audio-search" class="search-input" placeholder="ابحث باسم المادة، السلسلة، أو المتحدث..." autocomplete="off" spellcheck="false" aria-label="حقل البحث الصوتي">
        <button type="button" id="btn-search-clear" class="btn-icon search-clear" aria-label="إغلاق البحث">
          <svg class="icon" aria-hidden="true"><use href="#icon-close"></use></svg>
        </button>
      </div>
    </section>

    <!-- مساحة العرض المركزية وتدوير المشاهد التفاعلية -->
    <main id="main-content" class="main-viewport" role="main">
      
      <!-- 1. مشهد مكتبة "اعرف دينك" وعرض القوائم والمواد الصوتية -->
      <section id="playlist-view" class="view-panel active" aria-label="اعرف دينك" tabindex="-1">
        <div class="section-header">
          <h2 class="section-title">اعرف دينك</h2>
          <span class="section-counter" id="tracks-count" aria-live="polite">0 مواد</span>
        </div>
        <div id="tracks-list" class="tracks-list" role="region" aria-live="polite"></div>
      </section>

      <!-- 2. مشهد منصة "سؤال" المتكاملة -->
      <section id="question-view" class="view-panel" aria-label="منظومة سؤال" hidden tabindex="-1">
        <h2 class="visually-hidden">منظومة سؤال والاستشارات</h2>
        
        <!-- بطاقة الملف الشخصي للمجيب المعتمد -->
        <section id="respondent-profile-card" class="respondent-profile-card" aria-label="الملف الشخصي للمجيب">
          <div class="profile-main-row">
            <div class="profile-avatar-circle" id="profile-avatar-node">
              <svg class="icon-avatar" aria-hidden="true"><use href="#icon-user-circle"></use></svg>
            </div>
            <div class="profile-details-col">
              <div class="profile-name-row">
                <h3 id="profile-display-name" class="profile-name">المجيب المعتمد</h3>
                <span class="golden-badge" aria-label="حساب موثق">
                  <svg class="icon-badge" aria-hidden="true"><use href="#icon-verified-gold"></use></svg>
                </span>
              </div>
              <span id="profile-username" class="profile-username">@mobhir</span>
            </div>
          </div>
          
          <div class="profile-actions-row">
            <button id="btn-share-profile" class="btn-profile-action" type="button">
              <svg class="icon-btn" aria-hidden="true"><use href="#icon-share"></use></svg>
              <span>مشاركة الرابط المباشر</span>
            </button>
            <button id="btn-owner-edit-profile" class="btn-profile-action is-owner-only" type="button" hidden>
              <svg class="icon-btn" aria-hidden="true"><use href="#icon-settings"></use></svg>
              <span>تعديل الملف الشخصي</span>
            </button>
          </div>
        </section>

        <!-- شريط التبويب الفرعي الداخلي لمنظومة سؤال -->
        <nav class="subview-nav" aria-label="أقسام سؤال">
          <button type="button" class="subview-tab active" data-subview="public-feed" aria-current="page">
            <svg class="icon" aria-hidden="true"><use href="#icon-globe"></use></svg>
            <span>المعرض العام</span>
          </button>
          <button type="button" class="subview-tab" data-subview="my-questions">
            <svg class="icon" aria-hidden="true"><use href="#icon-chat"></use></svg>
            <span>استشاراتي</span>
            <span id="my-questions-badge" class="tab-indicator-badge" hidden>0</span>
          </button>
          <button type="button" id="tab-respondent-inbox" class="subview-tab" data-subview="respondent-inbox" hidden>
            <svg class="icon" aria-hidden="true"><use href="#icon-inbox"></use></svg>
            <span>صندوق الوارد</span>
            <span id="respondent-inbox-badge" class="tab-indicator-badge" hidden>0</span>
          </button>
        </nav>

        <!-- مساحة زر فتح بطاقة طرح استشارة جديدة للسائل -->
        <div class="ask-action-bar">
          <button type="button" id="btn-open-ask-sheet" class="btn-ask-trigger">
            <svg class="icon" aria-hidden="true"><use href="#icon-plus"></use></svg>
            <span>اطرح استشارة بسرية تامة...</span>
          </button>
        </div>

        <!-- المعرض العام للإجابات المعتمدة للنشر -->
        <div id="subview-public-feed" class="question-subview-panel active" role="region" aria-label="الإجابات العامة">
          <div id="public-feed-list" class="questions-feed-list" aria-live="polite"></div>
        </div>

        <!-- استشارات السائل الخاصة ومتابعة الردود -->
        <div id="subview-my-questions" class="question-subview-panel" role="region" aria-label="استشاراتي الخاصة" hidden>
          <div id="my-questions-list" class="questions-inbox-list" aria-live="polite"></div>
        </div>

        <!-- صندوق فرز المجيب الموثق -->
        <div id="subview-respondent-inbox" class="question-subview-panel" role="region" aria-label="صندوق فرز المجيب" hidden>
          <div class="triage-filters-row" role="group" aria-label="تصفية الاستشارات">
            <button type="button" class="triage-chip active" data-filter="pending">
              <span>بانتظار الإجابة</span>
              <span class="triage-count" id="count-pending">0</span>
            </button>
            <button type="button" class="triage-chip" data-filter="answered">
              <span>تمت الإجابة</span>
              <span class="triage-count" id="count-answered">0</span>
            </button>
            <button type="button" class="triage-chip" data-filter="archived">
              <span>الأرشيف</span>
              <span class="triage-count" id="count-archived">0</span>
            </button>
          </div>
          <div id="respondent-triage-list" class="questions-inbox-list" aria-live="polite"></div>
        </div>

      </section>

      <!-- 3. مشهد المحادثة المتداخلة بملء الشاشة -->
      <section id="conversation-view" class="view-panel conversation-viewport" aria-label="المحادثة النشطة" hidden tabindex="-1">
        <h2 class="visually-hidden">المحادثة النشطة</h2>
        
        <div class="conversation-header">
          <div class="conversation-partner-meta">
            <button type="button" id="btn-conversation-back" class="btn-back" aria-label="الرجوع للقائمة">
              <svg class="icon" aria-hidden="true"><use href="#icon-back"></use></svg>
              <span>رجوع</span>
            </button>
            <div class="partner-avatar-wrapper">
              <div class="partner-avatar-placeholder" id="conv-partner-avatar">؟</div>
            </div>
            <div class="partner-titles">
              <div class="partner-name-row">
                <span id="conv-partner-name" class="partner-name">اسم الطرف الآخر</span>
                <span id="conv-golden-badge" class="golden-badge" aria-label="مجيب موثق بشارة ذهبية" hidden>
                  <svg class="icon-badge" aria-hidden="true"><use href="#icon-verified-gold"></use></svg>
                </span>
              </div>
              <span id="conv-status-subtitle" class="partner-subtitle">قيد الانتظار</span>
            </div>
          </div>
        </div>

        <div id="conversation-messages-flow" class="messages-flow-container" role="log" aria-live="polite"></div>

        <div id="conversation-input-dock" class="conversation-input-dock">
          
          <!-- واجهة إرسال السائل -->
          <div id="asker-input-controls" class="input-controls-group">
            <div class="input-field-wrapper">
              <textarea id="asker-message-input" class="chat-textarea" rows="1" maxlength="1500" placeholder="اكتب استشارتك هنا..." autocomplete="off" spellcheck="false" aria-label="نص الاستشارة"></textarea>
              <div class="char-counter-wrapper">
                <span id="asker-char-counter" class="char-counter" aria-live="polite">1500</span>
              </div>
            </div>
            <button type="button" id="btn-asker-send" class="btn-send-message" aria-label="إرسال الاستشارة">
              <svg class="icon" aria-hidden="true"><use href="#icon-send"></use></svg>
            </button>
          </div>

          <!-- واجهة المجيب الموثق -->
          <div id="respondent-input-controls" class="input-controls-group" hidden>
            <div class="visibility-toggle-row">
              <label class="visibility-toggle-label" for="chk-publish-public">
                <input type="checkbox" id="chk-publish-public" class="custom-checkbox">
                <svg class="icon-sm" aria-hidden="true"><use href="#icon-globe"></use></svg>
                <span>نشر في المعرض العام للفائدة</span>
              </label>
            </div>

            <div id="respondent-idle-bar" class="respondent-bar-row">
              <textarea id="respondent-message-input" class="chat-textarea" rows="1" maxlength="5000" placeholder="اكتب الرد النصي هنا..." autocomplete="off" spellcheck="false" aria-label="نص الرد"></textarea>
              <button type="button" id="btn-start-recording" class="btn-icon btn-mic" aria-label="بدء تسجيل رد صوتي (حتى 10 دقائق)">
                <svg class="icon" aria-hidden="true"><use href="#icon-mic"></use></svg>
              </button>
              <button type="button" id="btn-respondent-send-text" class="btn-send-message" aria-label="إرسال الرد النصي">
                <svg class="icon" aria-hidden="true"><use href="#icon-send"></use></svg>
              </button>
            </div>

            <div id="respondent-recording-bar" class="recording-bar-row" hidden>
              <div class="recording-pulse-indicator" aria-hidden="true"></div>
              <span id="recording-timer" class="recording-timer-digits" aria-live="off">00:00</span>
              <div class="recording-actions">
                <button type="button" id="btn-pause-resume-recording" class="btn-control" aria-label="إيقاف مؤقت للتسجيل">
                  <svg class="icon" aria-hidden="true"><use href="#icon-pause"></use></svg>
                </button>
                <button type="button" id="btn-cancel-recording" class="btn-control btn-danger" aria-label="إلغاء وحذف التسجيل">
                  <svg class="icon" aria-hidden="true"><use href="#icon-trash"></use></svg>
                </button>
                <button type="button" id="btn-stop-recording" class="btn-control btn-success" aria-label="إنهاء التسجيل والانتقال للمعاينة">
                  <svg class="icon" aria-hidden="true"><use href="#icon-check"></use></svg>
                </button>
              </div>
            </div>

            <div id="respondent-preview-bar" class="preview-bar-row" hidden>
              <div class="preview-playback-group">
                <button type="button" id="btn-preview-play-toggle" class="btn-control btn-primary-play" aria-label="تشغيل معاينة التسجيل">
                  <svg class="icon" aria-hidden="true"><use href="#icon-play"></use></svg>
                </button>
                <div class="preview-scrubber">
                  <span id="preview-time-current" class="time-readout">00:00</span>
                  <input type="range" id="preview-seek-slider" class="seek-slider" min="0" max="100" value="0" step="0.1" aria-label="التحكم بموضع المعاينة">
                  <span id="preview-time-duration" class="time-readout">00:00</span>
                </div>
              </div>
              <div class="preview-decision-actions">
                <button type="button" id="btn-discard-preview" class="btn-control btn-danger" aria-label="حذف المسودة وإعادة التسجيل">
                  <svg class="icon" aria-hidden="true"><use href="#icon-trash"></use></svg>
                </button>
                <button type="button" id="btn-confirm-send-voice" class="btn-send-message" aria-label="اعتماد ورفع الرد الصوتي">
                  <svg class="icon" aria-hidden="true"><use href="#icon-send"></use></svg>
                </button>
              </div>
            </div>

          </div>
        </div>

      </section>

    </main>

    <!-- المشغل الصوتي العائم الثابت للمكتبة -->
    <aside id="audio-dock" class="audio-dock" aria-label="مشغل الصوت الرئيسي">
      <div class="dock-controls-row">
        <div class="dock-buttons">
          <button type="button" id="btn-audio-replay-10" class="btn-control" aria-label="تأخير 10 ثوانٍ">
            <svg class="icon" aria-hidden="true"><use href="#icon-replay-10"></use></svg>
          </button>
          <button type="button" id="btn-audio-play" class="btn-control btn-primary-play" aria-label="تشغيل">
            <svg class="icon icon-play-state" aria-hidden="true"><use href="#icon-play"></use></svg>
          </button>
          <button type="button" id="btn-audio-forward-10" class="btn-control" aria-label="تقديم 10 ثوانٍ">
            <svg class="icon" aria-hidden="true"><use href="#icon-forward-10"></use></svg>
          </button>
        </div>
        <div class="dock-track-details">
          <span id="dock-track-title" class="dock-title">جاهز للتشغيل</span>
          <span id="dock-track-artist" class="dock-artist">اختر مادة صوتية من القائمة</span>
        </div>
      </div>
      <div class="dock-scrubber-wrapper">
        <span id="dock-time-current" class="time-readout" aria-live="off">00:00</span>
        <input type="range" id="dock-seek-slider" class="seek-slider" min="0" max="100" value="0" step="0.1" aria-label="التحكم بموضع التشغيل">
        <span id="dock-time-duration" class="time-readout">00:00</span>
      </div>
    </aside>

    <!-- شريط التنقل السفلي المحصن معمارياً -->
    <nav id="bottom-navigation" class="bottom-navigation" role="navigation" aria-label="التنقل الرئيسي">
      <button type="button" class="nav-tab active" data-target-view="playlist-view" aria-current="page">
        <svg class="icon" aria-hidden="true"><use href="#icon-library"></use></svg>
        <span class="nav-label">اعرف دينك</span>
      </button>
      <button type="button" class="nav-tab" data-target-view="question-view">
        <svg class="icon" aria-hidden="true"><use href="#icon-question"></use></svg>
        <span class="nav-label">سؤال</span>
        <span id="question-tab-indicator" class="nav-tab-badge" hidden></span>
      </button>
    </nav>

  </div>

  <!-- نافذة طرح استشارة جديدة المحولة إلى عنصر حوار أصيل -->
  <dialog id="ask-question-sheet" class="app-modal ask-sheet-modal" aria-labelledby="ask-sheet-title">
    <div class="modal-card sheet-surface">
      <header class="modal-header sheet-header">
        <h3 id="ask-sheet-title" class="modal-title sheet-title">طرح استشارة جديدة بسرية تامة</h3>
        <button type="button" id="btn-close-ask-sheet" class="btn-icon" aria-label="إغلاق النافذة">
          <svg class="icon" aria-hidden="true"><use href="#icon-close"></use></svg>
        </button>
      </header>
      <form id="ask-question-form" class="modal-form" method="dialog">
        <div class="sheet-body">
          <div class="ask-target-info">
            <span class="target-label">المجيب المستهدف:</span>
            <div class="target-card">
              <span id="ask-target-name" class="target-name">المجيب المعتمد</span>
              <span class="golden-badge" aria-label="موثق">
                <svg class="icon-badge" aria-hidden="true"><use href="#icon-verified-gold"></use></svg>
              </span>
            </div>
          </div>
          <div class="form-group">
            <label for="new-question-text" class="form-label">نص الاستشارة أو المسألة:</label>
            <textarea id="new-question-text" class="sheet-textarea form-textarea" rows="5" maxlength="1500" placeholder="اكتب استشارتك بوضوح وتفصيل كافٍ..." autocomplete="off" spellcheck="false" required></textarea>
            <div class="sheet-counter-row">
              <span class="sheet-hint">السقف الأقصى 1500 حرف • مدخلات نصية فقط</span>
              <span id="sheet-char-counter" class="char-counter" aria-live="polite">1500</span>
            </div>
          </div>
        </div>
        <footer class="modal-footer sheet-footer">
          <button type="submit" id="btn-submit-new-question" class="btn-primary-block btn-submit-question">
            <span>إرسال الاستشارة الآن</span>
            <svg class="icon" aria-hidden="true"><use href="#icon-send"></use></svg>
          </button>
        </footer>
      </form>
    </div>
  </dialog>

  <!-- 1. نافذة تسجيل دخول المجيب المعتمد / إعداد حساب المالك -->
  <dialog id="auth-modal" class="app-modal" aria-labelledby="auth-modal-title">
    <div class="modal-card">
      <header class="modal-header">
        <h3 id="auth-modal-title" class="modal-title">تسجيل دخول المجيب</h3>
        <button id="btn-close-auth-modal" class="btn-icon" type="button" aria-label="إغلاق">
          <svg class="icon" aria-hidden="true"><use href="#icon-close"></use></svg>
        </button>
      </header>
      <form id="auth-form" class="modal-form" method="dialog">
        <div id="setup-only-fields" class="form-group" hidden>
          <label for="setup-display-name">الاسم الظاهر</label>
          <input type="text" id="setup-display-name" class="form-input" autocomplete="name" placeholder="مثال: خالد المنصور">
        </div>
        <div class="form-group">
          <label for="auth-username">اسم المستخدم (بالأحرف اللاتينية)</label>
          <input type="text" id="auth-username" class="form-input" autocomplete="username" placeholder="مثال: khaled" required>
        </div>
        <div class="form-group">
          <label for="auth-password">كلمة المرور</label>
          <input type="password" id="auth-password" class="form-input" autocomplete="current-password" placeholder="••••••••" required>
        </div>
        <p id="auth-error-msg" class="form-error-msg" hidden></p>
        <footer class="modal-footer">
          <button id="btn-auth-submit" class="btn-primary-block" type="submit">دخول</button>
        </footer>
      </form>
    </div>
  </dialog>

  <!-- 2. نافذة تعديل بيانات الملف الشخصي للمجيب المعتمد -->
  <dialog id="profile-settings-modal" class="app-modal" aria-labelledby="profile-modal-title">
    <div class="modal-card">
      <header class="modal-header">
        <h3 id="profile-modal-title" class="modal-title">تعديل الملف الشخصي</h3>
        <button id="btn-close-profile-modal" class="btn-icon" type="button" aria-label="إغلاق">
          <svg class="icon" aria-hidden="true"><use href="#icon-close"></use></svg>
        </button>
      </header>
      <form id="profile-form" class="modal-form" method="dialog">
        <div class="form-group">
          <label for="edit-display-name">الاسم الظاهر</label>
          <input type="text" id="edit-display-name" class="form-input" required>
        </div>
        <div class="form-group">
          <label for="edit-username">اسم المستخدم (الرابط المباشر mobhir.com/name)</label>
          <input type="text" id="edit-username" class="form-input" pattern="[a-z0-9_]{3,30}" required>
          <small class="form-hint">أحرف لاتينية صغيرة وأرقام فقط</small>
        </div>
        <div class="form-group">
          <label for="edit-password">كلمة المرور الجديدة (اتركه فارغاً إذا لا ترغب بالتغيير)</label>
          <input type="password" id="edit-password" class="form-input" autocomplete="new-password" placeholder="اختياري (6 أحرف فأكثر)">
        </div>
        <p id="profile-error-msg" class="form-error-msg" hidden></p>
        <footer class="modal-footer">
          <button id="btn-save-profile" class="btn-primary-block" type="submit">حفظ التغييرات</button>
          <button id="btn-logout" class="btn-danger-outline" type="button">تسجيل الخروج</button>
        </footer>
      </form>
    </div>
  </dialog>

  <!-- 3. نافذة تعديل بيانات المادة الصوتية والمحاضر -->
  <dialog id="edit-track-modal" class="app-modal" aria-labelledby="edit-track-modal-title">
    <div class="modal-card">
      <header class="modal-header">
        <h3 id="edit-track-modal-title" class="modal-title">تعديل بيانات المادة الصوتية</h3>
        <button id="btn-close-track-modal" class="btn-icon" type="button" aria-label="إغلاق">
          <svg class="icon" aria-hidden="true"><use href="#icon-close"></use></svg>
        </button>
      </header>
      <form id="track-edit-form" class="modal-form" method="dialog">
        <input type="hidden" id="edit-track-id">
        <div class="form-group">
          <label for="edit-track-title">عنوان الدرس أو المادة</label>
          <input type="text" id="edit-track-title" class="form-input" required>
        </div>
        <div class="form-group">
          <label for="edit-track-artist">اسم المحاضر / المتحدث</label>
          <input type="text" id="edit-track-artist" class="form-input" required>
        </div>
        <div class="form-group">
          <label for="edit-track-playlist">عنوان السلسلة أو القائمة</label>
          <input type="text" id="edit-track-playlist" class="form-input">
        </div>
        <p id="track-edit-error-msg" class="form-error-msg" hidden></p>
        <footer class="modal-footer">
          <button id="btn-save-track" class="btn-primary-block" type="submit">حفظ التعديل</button>
        </footer>
      </form>
    </div>
  </dialog>

  <!-- حاوية التنبيهات الحية لإشعارات النظام والأوفلاين وقارئات الشاشة -->
  <div id="toast-region" class="toast-region" role="region" aria-live="assertive" aria-atomic="true"></div>

  <!-- كائن الصوت الأحادي والفريد حصراً في كامل التطبيق -->
  <audio id="global-audio" preload="metadata"></audio>

  <!-- خريطة الرموز المركزية المستدعاة حصرياً عبر use -->
  <svg hidden class="svg-definitions-layer">
    <defs>
      <symbol id="icon-play" viewBox="0 0 24 24">
        <path fill="currentColor" d="M8 5.14v14l11-7l-11-7z"/>
      </symbol>
      
      <symbol id="icon-pause" viewBox="0 0 24 24">
        <path fill="currentColor" d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
      </symbol>
      
      <symbol id="icon-replay-10" viewBox="0 0 24 24">
        <path fill="currentColor" d="M12.5 3a9 9 0 1 0 8.7 6.8l-1.9.5A7 7 0 1 1 12.5 5v3l4.5-4L12.5 0v3zm-2.5 7v6h-1.5v-4.5h-1V10.3l1.5-.3h1zm4 0a1.8 1.8 0 0 1 1.8 1.8v2.4a1.8 1.8 0 0 1-3.6 0v-2.4A1.8 1.8 0 0 1 14 10zm.5 4.2v-2.4a.5.5 0 0 0-1 0v2.4a.5.5 0 0 0 1 0z"/>
      </symbol>

      <symbol id="icon-forward-10" viewBox="0 0 24 24">
        <path fill="currentColor" d="M11.5 3a9 9 0 1 1-8.7 6.8l1.9.5A7 7 0 1 0 11.5 5v3l-4.5-4L11.5 0v3zm-1.5 7v6h-1.5v-4.5h-1V10.3l1.5-.3h1zm4 0a1.8 1.8 0 0 1 1.8 1.8v2.4a1.8 1.8 0 0 1-3.6 0v-2.4A1.8 1.8 0 0 1 14 10zm.5 4.2v-2.4a.5.5 0 0 0-1 0v2.4a.5.5 0 0 0 1 0z"/>
      </symbol>

      <symbol id="icon-bell" viewBox="0 0 24 24">
        <path fill="currentColor" d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/>
      </symbol>

      <symbol id="icon-search" viewBox="0 0 24 24">
        <path fill="currentColor" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3S3 5.91 3 9.5S5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5S14 7.01 14 9.5S11.99 14 9.5 14z"/>
      </symbol>
      
      <symbol id="icon-close" viewBox="0 0 24 24">
        <path fill="currentColor" d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"/>
      </symbol>
      
      <symbol id="icon-library" viewBox="0 0 24 24">
        <path fill="currentColor" d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H8V4h12v12z"/>
      </symbol>

      <symbol id="icon-question" viewBox="0 0 24 24">
        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8zm-1-4h2v2h-2zm1-10c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5c0-2.21-1.79-4-4-4z"/>
      </symbol>

      <symbol id="icon-verified-gold" viewBox="0 0 24 24">
        <path fill="#f59e0b" d="m23 12l-2.44-2.79l.34-3.69l-3.61-.82l-1.89-3.2L12 2.96L8.6 1.5L6.71 4.69L3.1 5.5l.34 3.7L1 12l2.44 2.79l-.34 3.7l3.61.82L8.6 22.5l3.4-1.47l3.4 1.46l1.89-3.19l3.61-.82l-.34-3.69L23 12zm-12.91 4.72l-3.8-3.81l1.48-1.48l2.32 2.33l5.85-5.87l1.48 1.48l-7.33 7.35z"/>
      </symbol>

      <symbol id="icon-playlist" viewBox="0 0 24 24">
        <path fill="currentColor" d="M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h10v2H4v-2zm14 0l4 3l-4 3v-6z"/>
      </symbol>

      <symbol id="icon-back" viewBox="0 0 24 24">
        <path fill="currentColor" d="M20 11H7.83l5.59-5.59L12 4l-8 8l8 8l1.41-1.41L7.83 13H20v-2z"/>
      </symbol>

      <symbol id="icon-offline" viewBox="0 0 24 24">
        <path fill="currentColor" d="M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5c0-2.64-2.05-4.78-4.65-4.96zM12 17l-4-4h2.5V9h3v4H16l-4 4z"/>
      </symbol>

      <symbol id="icon-check" viewBox="0 0 24 24">
        <path fill="currentColor" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/>
      </symbol>

      <symbol id="icon-mic" viewBox="0 0 24 24">
        <path fill="currentColor" d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.91-3c-.49 0-.9.36-.98.85C16.52 14.2 14.47 16 12 16s-4.52-1.8-4.93-4.15c-.08-.49-.49-.85-.98-.85c-.61 0-1.09.54-1 1.14c.49 3 2.89 5.35 5.91 5.78V20H9c-.55 0-1 .45-1 1s.45 1 1 1h6c.55 0 1-.45 1-1s-.45-1-1-1h-2v-2.08c3.02-.43 5.42-2.78 5.91-5.78c.1-.6-.38-1.14-1-1.14z"/>
      </symbol>

      <symbol id="icon-send" viewBox="0 0 24 24">
        <path fill="currentColor" d="M2.01 21L23 12L2.01 3L2 10l15 2l-15 2z"/>
      </symbol>

      <symbol id="icon-trash" viewBox="0 0 24 24">
        <path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
      </symbol>

      <symbol id="icon-globe" viewBox="0 0 24 24">
        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93c0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41c0 2.08-.8 3.97-2.1 5.39z"/>
      </symbol>

      <symbol id="icon-chat" viewBox="0 0 24 24">
        <path fill="currentColor" d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z"/>
      </symbol>

      <symbol id="icon-inbox" viewBox="0 0 24 24">
        <path fill="currentColor" d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12h-4c0 1.66-1.34 3-3 3s-3-1.34-3-3H5V5h14v10z"/>
      </symbol>

      <symbol id="icon-plus" viewBox="0 0 24 24">
        <path fill="currentColor" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
      </symbol>

      <symbol id="icon-user" viewBox="0 0 24 24">
        <path fill="currentColor" d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
      </symbol>

      <symbol id="icon-user-circle" viewBox="0 0 24 24">
        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/>
      </symbol>

      <symbol id="icon-share" viewBox="0 0 24 24">
        <path fill="currentColor" d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92c0-1.61-1.31-2.92-2.92-2.92z"/>
      </symbol>

      <symbol id="icon-settings" viewBox="0 0 24 24">
        <path fill="currentColor" d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>
      </symbol>

      <symbol id="icon-edit" viewBox="0 0 24 24">
        <path fill="currentColor" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
      </symbol>
    </defs>
  </svg>

  <!-- نقطة الدخول المعمارية الوحيدة للموديولات -->
  <script type="module" src="/js/app.js"></script>
</body>
</html>
