update for Moadian plugin

webUI/src/views/acc/plugins/taxsettings/doc.vue

@@ -0,0 +1,747 @@
+<template>
+  <div class="plugin-doc">
+    <div class="doc-header">
+      <div class="plugin-icon">
+        <i class="fas fa-book"></i>
+      </div>
+      <div class="plugin-info">
+        <h1>راهنمای سامانه مودیان مالیاتی</h1>
+        <p class="plugin-description">
+          راهنمای کامل اتصال و استفاده از سامانه مودیان مالیاتی در حسابیکس
+        </p>
+        <div class="plugin-version">
+          <span class="version-badge">نسخه 1.0.0</span>
+          <span v-if="isPluginActive('taxsettings')" class="status-badge active">فعال</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="doc-content">
+      <div class="doc-section">
+        <h2>سامانه مودیان مالیاتی در نرم افزار حسابداری آنلاین حسابیکس</h2>
+        <hr>
+        <p>سامانه مودیان مالیاتی، سامانه‌ای آنلاین تحت مدیریت سازمان امور مالیاتی است که برای جمع آوری و یکپارچه سازی
+          اطلاعات مودیان مالیاتی و دریافت گزارش‌های الکترونیکی مودیان، از طریق ایجاد یک کارپوشه ی اختصاصی در نظر گرفته
+          شده است. این کارپوشه در واقع پل ارتباطی مودیان و سازمان امور مالیاتی است و همه اشخاص حقیقی و حقوقی ملزم به
+          ارسال صورتحساب الکترونیکی خود در این سامانه هستند.</p>
+
+        <p>کلیه اشخاص مشمول مالیات باید در این سامانه ثبت نام کرده و صورتحساب الکترونیکی کالا و خدمات خود را، در تاریخ
+          های مشخص در این سامانه بارگذاری نمایند چراکه سازمان امور مالیاتی برای محاسبه مالیات و عوارض فروش کالا و خدمات
+          اشخاص عضو سامانه مودیان، از مبالغ مندرج در صورتحساب الکترونیکی استفاده می کند و در صورت عدم استفاده مشمولین
+          مالیات از سامانه مودیان مالیاتی، شامل جریمه ای معادل حداقل ۱۰ درصد از فروش شده و از تخفیفات مالیاتی بهره مند
+          نمی شوند.</p>
+
+        <div class="highlight-box">
+          <strong>با حسابیکس به راحتی به سامانه مودیان مالیاتی متصل شوید.</strong>
+        </div>
+
+        <p>در روزهای اخیر که دغدغه ی تمامی کاربران ارسال صورتحساب به سامانه مودیان مالیاتی بوده و یکی از پر تکرارترین
+          سوالات مطرح شده از تیم پشتیبانی حسابیکس در رابطه با این مورد بوده است. تیم حسابیکس برای سهولت در انجام و ارسال
+          صورتحساب های الکترونیکی توسط کاربران، امکان اتصال نرم افزار به سامانه مودیان مالیاتی را اضافه کرده است.</p>
+
+        <p>از این پس کاربران در نرم افزار حسابداری حسابیکس این امکان را دارند که به ساده ترین حالت ممکن و بدون نیاز به
+          داشتن یک حسابدار به سامانه مودیان مالیاتی متصل شوند.</p>
+
+        <div class="info-panel">
+          <p class="mb-0">در نرم افزار حسابیکس با انجام چند مرحله ی ساده می توانید صورتحساب الکترونیکی خود را به صورت رایگان به
+            سامانه مودیان مالیاتی ارسال نمایید.</p>
+        </div>
+      </div>
+
+      <div class="doc-section">
+        <h2>اتصال حسابیکس به سامانه مودیان:</h2>
+        <p>برای اتصال به سامانه مودیان و ارسال فاکتور در حسابیکس ، باید موارد زیر را به ترتیب انجام دهید:</p>
+
+        <div class="step-item">
+          <div class="step-number">۱</div>
+          <div class="step-content">
+            <p>از بخش <span class="purple-tex">سرویس‌ها و افزونه‌ها</span> <span class="arrow"> &gt; </span> از منوی
+              <span class="purple-tex">سامانه مودیان مالیاتی</span> <span class="arrow"> &gt; </span> <span
+                class="purple-tex">زیر منوی تنظیمات مالیاتی</span> <span class="arrow"> &gt; </span> دکمه ساخت کلید را
+              انتخاب کنید. در پنجره باز شده با وارد کردن اطلاعات مورد نیاز (شناسه ملی، نام فارسی، نام انگلیسی و ایمیل)
+              اقدام به دریافت کلیدهای لازم کنید.</p>
+            <div class="image-container">
+              <img src="/img/docs/moadian/1.jpg" alt="اتصال نرم افزار حسابدای آنلاین حسابیکس به سامانه مودیان"
+                class="doc-image">
+            </div>
+
+            <div class="info-panel">
+              <strong>نکات (ویژه کاربران حقوقی)</strong>
+              <ul>
+                <li>پیشنهاد می شود شناسه ملی و نام فارسی را، با مراجعه به سایت سازمان امور مالیاتی کشور به آدرس <a
+                    href="//my.tax.gov.ir" target="_blank" rel="noopener nofollow">my.tax.gov.ir</a> و ورود به کار پوشه
+                  خود، کپی و در کادر مربوطه در حسابیکس جایگذاری نمایید.</li>
+                <li>دقت داشته باشید که در ابتدا و انتهای فیلد نام فارسی، نباید فاصله (اسپیس) اضافی گذاشته شده باشد.</li>
+                <li>نام انگلیسی را می توانید بصورت فینگیلیش وارد نمایید. (نیازی به ترجمه نام کسب و کار نیست)</li>
+                <li>در فیلد ایمیل، ترجیحا ایمیل سازمانی معتبرخود را وارد کنید.</li>
+              </ul>
+
+              <div class="image-container">
+                <img src="/img/docs/moadian/2.jpg" alt="ارسال رایگان فاکتور ها به سامانه مودیات مالیاتی"
+                  class="doc-image">
+              </div>
+            </div>
+
+            <div class="image-container">
+              <img src="/img/docs/moadian/3.jpg" alt="ارسال رایگان فاکتور ها به سامانه مودیات مالیاتی"
+                class="doc-image">
+            </div>
+          </div>
+        </div>
+
+        <div class="step-item">
+          <div class="step-number">۲</div>
+          <div class="step-content">
+            <p>بعد از تایید اطلاعات، پنجره ای باز می شود که شامل سه قسمت مجزاست. در این پنجره شما ( Private Key، Public
+              Key ،CSR) را مشاهده خواهید کرد که در ادامه به کارایی هریک از این اطلاعات خواهیم پرداخت.</p>
+            <div class="warning-panel">
+              <strong>توجه</strong>
+              <p>حتما اطلاعات نمایش داده شده در این پنجره را دانلود و در جای امن و مطمئن نگهداری کنید. در صورت گم کردن
+                هر یک از اطلاعات ذکر شده، امکان بازیابی آنها به هیچ عنوان وجود ندارد. چراکه حسابیکس این اطلاعات را به
+                دلایل امنیتی نگهداری و ذخیره نمی کند.</p>
+            </div>
+            <div class="image-container">
+              <img src="/img/docs/moadian/4.jpg" alt="سامانه مودیان تصویر سازمانPrivate Key، Public Key ،CSR"
+                class="doc-image">
+            </div>
+          </div>
+        </div>
+
+        <div class="step-item">
+          <div class="step-number">۳</div>
+          <div class="step-content">
+            <p>پس از دانلود Puplic Key به سایت <a href="//my.tax.gov.ir" target="_blank"
+                rel="noopener nofollow">my.tax.gov.ir</a> مراجعه کرده و پس از ورود به کارپوشه خود از قسمت ورود به
+              پرونده<span class="arrow"> &gt; </span>عضویت<span class="arrow"> &gt; </span> شناسه یکتا حافظه ی مالیاتی
+              <span class="arrow">&gt; </span>روی دکمه دریافت شناسه یکتا حافظه مالیاتی کلیک کنید. سپس گزینه توسط مودی را
+              انتخاب و در ادامه فرایند تکمیل فرم، فایل Public Key خود را بارگذاری نمایید. بعد از تایید نهایی، شناسه یکتا
+              نمایش داده شده را از سامانه کپی و در مکانی امن نگهداری کنید.</p>
+            <div class="image-container">
+              <img src="/img/docs/moadian/5.jpg" alt="شناسه یکتا حافظه مالیاتی سامانه مودیان" class="doc-image">
+            </div>
+          </div>
+        </div>
+
+        <div class="step-item">
+          <div class="step-number">۴</div>
+          <div class="step-content">
+            <p>به حسابیکس برگردید، شناسه یکتا حافظه مالیاتی و کداقتصادی را در فیلدهای مرتبط وارد نمایید.</p>
+          </div>
+        </div>
+
+        <div class="step-item">
+          <div class="step-number">۵</div>
+          <div class="step-content">
+            <p>فایل دانلود شده Private Key را در کادر مرتبط در حسابیکس جایگذاری کنید. روی دکمه ذخیره کلیک کنید تا اتصال
+              با موفقیت انجام شود.</p>
+          </div>
+        </div>
+
+        <div class="info-panel">
+          <strong>دریافت گواهی الکترونیکی میانی عام با کد CSR (ویژه کاربران حقوقی)</strong>
+          <ol>
+            <li>برای دریافت گواهی الکترونیکی عام به سایت<a href="//www.gica.ir/portal/" target="_blank"
+                rel="noopener nofollow">www.gica.ir</a> مراجعه نمایید.</li>
+            <li>درخواست صدور گواهی الکترونیکی را انتخاب نمایید.</li>
+            <li>در صفحه بعد اقدام به ثبت نام و تایید شماره ملی و شماره تماس مدیرعامل کنید.</li>
+            <li>ثبت فیلد واحد مالیاتی اجباری نیست.</li>
+            <li>پس از تایید اطلاعات از همین مسیر، این بار ورود به سایت را انتخاب نمایید.</li>
+            <li>درخواست گواهی از طریق کد CSR را انتخاب کنید.</li>
+            <li>فرم ها را تکمیل و با پرداخت هزینه مشخص شده اقدام به دریافت کدرهگیری کنید.</li>
+            <li>سپس با کدرهگیری دریافت شده از سایت و مدارک مربوطه، به یکی از مراکز معرفی شده در سایت مراجعه و گواهی
+              الکترونیک خود را دریافت نمایید.</li>
+          </ol>
+          <div class="image-container">
+            <img src="/img/docs/moadian/6.jpg" alt="دریافت گواهی الکترونیکی میانی سامانه مودیان" class="doc-image">
+          </div>
+        </div>
+      </div>
+
+      <div class="doc-section">
+        <h2>دریافت کدمالیاتی کالا و خدمت:</h2>
+        <p>پس از اتصال به سامانه مودیان، برای ارسال صورتحساب به این سامانه باید کد و واحد مالیاتی کالا و خدمات در
+          حسابیکس ثبت شود.</p>
+        <p>برای ثبت کد مالیاتی باید از کدهای عمومی یا اختصاصی استفاده نمایید. راهنمای کامل پیدا کردن کد مالیاتی کالاها و
+          خدمات در سایت <a href="//www.intamedia.ir/" target="_blank" rel="noopener nofollow">intamedia.ir</a> در بخش
+          پایانه های فروشگاهی وسامانه مودیان <span class="arrow"> &gt; </span> آیین نامه ها، دستورالعمل ها و نرم
+          افزارهای مرتبط <span class="arrow"> &gt; </span> راهنمای شناسه کالا و خدمت ، در دسترس است.</p>
+        <p>در حال حاضر میتوانید برای کالا از کدهای مالیاتی عمومی هم استفاده کنید. برای دریافت فایل این کدها، به سایت <a
+            href="//stuffid.tax.gov.ir/" target="_blank" rel="noopener nofollow">stuffid.gov.ir</a> مراجعه و فایل عمومی
+          شناسه کالا را دانلود نمایید. در غیر اینصورت با مراجعه به سایت <a href="//ntsw.ir/" target="_blank"
+            rel="noopener nofollow">ntsw.ir</a> نسبت به ثبت کدهای اختصاصی برای کالا های خود اقدام نمایید.</p>
+        <p>برای ثبت کد خدمات ابتدا باید در سایت <a href="//portal.gs1-ir.org/Account/Login?ReturnUrl=%2F"
+            target="_blank" rel="noopener nofollow">portal.gs1-ir.org</a> درخواست صدور کد برای خدمات را ثبت و سپس در
+          حسابیکس وارد کنید.</p>
+        <div class="image-container">
+          <img src="/img/docs/moadian/7.jpg" alt="ارسال صورتحساب به سامانه مودیان" class="doc-image">
+        </div>
+        <p>کد مالیاتی کالا را در فایل پیدا کنید. در حسابیکس از منوی کالا و خدمات، کالا را جستجو و روی دکمه ویرایش کلیک
+          نمایید. در سربرگ مالیات در کادر کدمالیاتی کد ۱۳ رقمی را وارد نمایید. امکان انتخاب واحد مالیاتی از لیست هم وجود
+          دارد.</p>
+        <div class="image-container">
+          <img src="/img/docs/moadian/8.jpg" alt="کدمالیاتی کد ۱۳ رقمی سامانه مودیان" class="doc-image">
+        </div>
+        <!-- <p>برای ثبت کد و واحد مالیاتی در نرم افزار حسابیکس به صورت دسته جمعی می توانید از طریق فایل اکسل نیز اطلاعات را
+          بارگذاری کنید. کافیست در منوی کالا و خدمات روی منو بیشتر ... بالا صفحه سمت چپ کلیک و صدور اطلاعات به اکسل را
+          انتخاب نمایید. در فایل اکسل دانلود شده، ستون های کد و واحد مالیاتی را تکمیل و ذخیره کنید. سپس فایل اکسل ذخیره
+          شده را در نرم افزار از منوی کالا و خدمات <span class="arrow"> &gt; </span> منو بیشتر ... <span class="arrow">
+            &gt; </span> ورود اطلاعات از اکسل، در نرم افزار بارگذاری کنید.</p> -->
+      </div>
+
+      <div class="doc-section">
+        <h2>ثبت و ارسال صورتحساب به سامانه مودیان:</h2>
+        <p>حال می توانید صورتحساب های خود را به سامانه مودیان ارسال کنید. پس از منو فروش و درآمد <span class="arrow"> &gt; </span> فروش اقدام به
+          ثبت فاکتورها نمایید.</p>
+
+        <div class="info-panel">
+          <h3>نکات ثبت فاکتور برای ارسال به سامانه مودیان</h3>
+          <ul>
+            <li>بهتر است تاریخ فاکتور در یک بازه زمانی مشخص، حداکثر ۲هفته قبل از تاریخ ارسال فاکتور به سامانه مودیان ثبت
+              شده باشد.</li>
+            <li>در حال حاضر تنها با واحد پولی ریال ایران (IRR) می‌توانید فاکتورها را ثبت کنید.</li>
+            <li>حسابیکس مبالغ دارای اعشار را به صورت رند شده نمایش می دهد. اما مبالغ دارای اعشار در سامانه مودیان
+              پذیرفته نمی شود. پس در صورتیکه مبلغ درج شده در فیلد مالیات ارزش افزوده دارای اعشار باشد، ارسال صورتحساب با
+              خطا مواجه خواهد شد. می بایست مبلغ واحد را به صورتی تعیین کنید که پس از کسر تخفیف و سایر موارد، محاسبه درصد
+              مالیات ارزش افزوده آن بدون اعشار باشد. پیشنهاد می شود برای حل این مشکل مبالغی را وارد نمایید که به دو صفر
+              ختم میشوند.</li>
+            <li>امکان ثبت هزینه حمل و نقل از منو حمل و نقل در پایین فاکتور نیز امکانپذیر نیست. در صورت نیاز به ثبت هزینه
+              حمل و نقل می توانید این مورد را به صورت یک خدمت تعریف کرده و در فاکتور ثبت نمایید.</li>
+          </ul>
+        </div>
+
+        <div class="image-container">
+          <img src="/img/docs/moadian/9.jpg" alt="ثبت هزینه حمل و نقل در سامانه مودیان" class="doc-image">
+        </div>
+
+        <p>برای ارسال صورتحساب به سامانه مودیان از منوی فروش و درآمد به زیر منوی فاکتورهای فروش رفته و فاکتورهای مورد
+          نظر را انتخاب نمایید. سپس روی منو بیشتر... در بالای صفحه سمت چپ کلیک و گزینه ارسال به سامانه مودیان را انتخاب
+          کنید.</p>
+        <div class="image-container">
+          <img src="/img/docs/moadian/10.jpg" alt="ثبت مبلغ اضافات و کسورات در سامانه مودیان" class="doc-image">
+        </div>
+        <p>نرم افزار شما را به منو سامانه مودیان در حسابیکس هدایت می کند. این بخش از منوی سامانه مودیان مالیاتی<span class="arrow"> &gt;
+          </span> زیر منوی صورتحساب ها هم در دسترس است.</p>
+
+        <h5>در این صفحه چند نوع فاکتور مشاهده می کنید:</h5>
+        <ul>
+          <li><strong>ارسال نشده:</strong> فاکتورهایی که هنوز به سامانه مودیان ارسال نشده است.</li>
+          <li><strong>ارسال شده:</strong> فاکتورهایی که به سامانه مودیان ارسال شده اند اما وضعیت آنها در سامانه مشخص
+            نیست.</li>
+          <li><strong>خطا:</strong> فاکتورهایی که به سامانه مودیان ارسال شده اند اما بدلیل خطا یا خطاهایی این فاکتورها
+            مورد تایید قرار نگرفته اند.</li>
+          <li><strong>تایید شده:</strong> فاکتورهای ارسال شده که در سامانه مودیان با موفقیت بارگذاری شده اند.</li>
+        </ul>
+
+        <div class="warning-panel">
+          <strong>توجه:</strong> امکان حذف صورتحساب های تایید شده وجود ندارد.
+        </div>
+
+        <div class="image-container">
+          <img src="/img/docs/moadian/11.jpg" alt="سامانه مودیان تصویر سازمان" class="doc-image">
+        </div>
+
+        <h5>در این جدول ستون هایی مشاهده می شود که به بررسی هر کدام می پردازیم:</h5>
+        <ul>
+          <li><strong>شماره فاکتور:</strong> شماره فاکتور در حسابیکس</li>
+          <li><strong>تاریخ فاکتور:</strong> تاریخ فاکتور</li>
+          <li><strong>مشتری:</strong> خریدار فاکتور</li>
+          <li><strong>مبلغ کل:</strong> مبلغ فاکتور</li>
+        </ul>
+
+        <div class="subject-description">
+          <h5>موضوع صورتحساب:</h5>
+          <ul>
+            <li><strong>اصلی:</strong> وقتی فاکتور فروش برای اولین دفعه ارسال می‌شود. فاکتور اصلی شماره ارجاع به فاکتور
+              دیگری ندارد.</li>
+            <li><strong>اصلاحی:</strong> فاکتورهای فروشی است که بعد از ارسال و تایید شدن در سامانه مودیان، در فضای نرم
+              افزار مجددا ویرایش وارسال شده اند.</li>
+          </ul>
+        </div>
+
+        <p><strong>شماره منحصر به فرد مالیاتی:</strong> به ازای هر فاکتور فروش بر مبنای الگوریتم سامانه مودیان یک شماره
+          منحصر به فرد مالیاتی به آن اختصاص می یابد.</p>
+
+        <p><strong>خطا:</strong> برای مشاهده خطاهای یک فاکتور میتونید با کلیک بر روی دکمه عملیات <span class="arrow"> &gt; </span> مشاهده خطاها، خطاهایی که سامانه مالیاتی به فاکتور وارد کرده مشاهده کنید.</p>
+
+        <div class="image-container text-center">
+          <img src="/img/docs/moadian/19.jpg" alt="سامانه مودیان تصویر سازمان" class="doc-image">
+        </div>
+
+        <div class="image-container text-center">
+          <img src="/img/docs/moadian/16.jpg" alt="سامانه مودیان تصویر سازمان" class="doc-image">
+        </div>
+      </div>
+
+      <div class="doc-section">
+        <h2>ارسال فاکتور به سامانه مودیان:</h2>
+        <p>برای ارسال فاکتور ابتدا آن را از لیست انتخاب کرده سپس روی دکمه ارسال کلیک کنید. سپس با کلیک روی دکمه بررسی وضعیت فاکتور، وضعیت فاکتور را مشخص نمایید.</p>
+        <p>اگر فاکتور در سامانه مودیان با موفقیت بارگذاری شده باشد وضعیت فاکتور به تایید شده و اگر به دلیل خطا رد شده باشد وضعیت فاکتور به خطا تغییر می کند.</p>
+          <p>در صورتیکه فاکتور در سامانه مودیان با موفقیت بارگذاری شده باشد وضعیت فاکتور به تایید شده و اگر به دلیل خطا رد شده باشد وضعیت فاکتور به خطا تغییر می کند.</p>
+        <p>با توجه به خطاهای اعلام شده اقدام به رفع ایرادات کنید و سپس از مسیر اعلام شده دوباره فاکتور را برای سامانه
+          ارسال نمایید تا نهایتا در سربرگ تایید شده قرار بگیرد.</p>
+        <div class="image-container">
+          <img src="/img/docs/moadian/17.jpg" alt="سامانه مودیان تصویر سازمان" class="doc-image">
+        </div>
+        <p>امکان مشاهده فاکتورهای ارسال شده به سامانه مودیان در سایت سازمان امور مالیاتی از مسیر مدیریت صورتحساب <span
+            class="arrow"> &gt; </span> صورتحساب های فروش <span class="arrow"> &gt; </span> فروش داخلی قابل مشاهده است.
+        </p>
+        <div class="image-container">
+          <img src="/img/docs/moadian/18.jpg" alt="سامانه مودیان تصویر سازمان" class="doc-image">
+        </div>
+      </div>
+    </div>
+
+    <div v-if="isPluginActive('taxsettings')" class="doc-footer">
+      <div class="action-buttons">
+        <router-link to="/acc/plugins/taxsettings/intro" class="btn btn-info">
+          <i class="fas fa-home"></i>
+          صفحه اصلی افزونه
+        </router-link>
+        <router-link to="/acc/plugins/tax/settings" class="btn btn-primary">
+          <i class="fas fa-cog"></i>
+          تنظیمات افزونه
+        </router-link>
+        <router-link to="/acc/plugins/tax/invoices/list" class="btn btn-success">
+          <i class="fas fa-list"></i>
+          مدیریت فاکتورها
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TaxSettingsDoc',
+  data() {
+    return {
+      pluginInfo: {
+        name: 'سامانه مودیان مالیاتی',
+        version: '1.0.0',
+        description: 'راهنمای کامل اتصال و استفاده از سامانه مودیان مالیاتی'
+      }
+    }
+  },
+  computed: {
+    plugins() {
+      return this.$store?.state?.plugins || {};
+    }
+  },
+  methods: {
+    isPluginActive(plugName) {
+      return this.plugins && this.plugins[plugName] !== undefined;
+    }
+  },
+  mounted() {
+    if (this.$store) {
+      this.$store.commit('setPageTitle', 'سامانه مودیان مالیاتی - راهنما')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.plugin-doc {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.doc-header {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  margin-bottom: 40px;
+  padding: 30px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 15px;
+  color: white;
+}
+
+.plugin-icon {
+  font-size: 3rem;
+  background: rgba(255, 255, 255, 0.2);
+  width: 80px;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.plugin-info h1 {
+  margin: 0 0 10px 0;
+  font-size: 2.5rem;
+  font-weight: 700;
+}
+
+.plugin-description {
+  font-size: 1.1rem;
+  margin: 0 0 15px 0;
+  opacity: 0.9;
+}
+
+.plugin-version {
+  display: flex;
+  gap: 10px;
+}
+
+.version-badge,
+.status-badge {
+  padding: 5px 12px;
+  border-radius: 20px;
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+
+.version-badge {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.status-badge.active {
+  background: #28a745;
+}
+
+.doc-content {
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+}
+
+.doc-section {
+  background: white;
+  border-radius: 15px;
+  padding: 30px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.doc-section h2 {
+  margin: 0 0 25px 0;
+  font-size: 1.8rem;
+  color: #333;
+  border-bottom: 3px solid #667eea;
+  padding-bottom: 10px;
+}
+
+.doc-section h5 {
+  margin: 20px 0 10px 0;
+  font-size: 1.2rem;
+  color: #333;
+}
+
+.doc-section p {
+  margin: 0 0 15px 0;
+  line-height: 1.6;
+  color: #555;
+}
+
+.doc-section ul,
+.doc-section ol {
+  margin: 15px 0;
+  padding-right: 20px;
+}
+
+.doc-section li {
+  margin-bottom: 8px;
+  line-height: 1.6;
+}
+
+.highlight-box {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  padding: 20px;
+  border-radius: 10px;
+  margin: 20px 0;
+  text-align: center;
+  font-size: 1.1rem;
+}
+
+.info-panel {
+  background: #e3f2fd;
+  border: 1px solid #2196f3;
+  border-radius: 10px;
+  padding: 20px;
+  margin: 20px 0;
+}
+
+.info-panel strong {
+  color: #1976d2;
+  display: block;
+  margin-bottom: 10px;
+  font-size: 1.1rem;
+}
+
+.warning-panel {
+  background: #fff3e0;
+  border: 1px solid #ff9800;
+  border-radius: 10px;
+  padding: 20px;
+  margin: 20px 0;
+}
+
+.warning-panel strong {
+  color: #f57c00;
+  display: block;
+  margin-bottom: 10px;
+  font-size: 1.1rem;
+}
+
+.step-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 20px;
+  margin: 20px 0;
+  padding: 20px;
+  background: #f8f9fa;
+  border-radius: 12px;
+  border-left: 4px solid #667eea;
+}
+
+.step-number {
+  background: #667eea;
+  color: white;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  font-size: 1.2rem;
+  flex-shrink: 0;
+}
+
+.step-content {
+  flex: 1;
+}
+
+.step-content p {
+  margin: 0 0 10px 0;
+}
+
+.arrow {
+  position: relative;
+  top: 3px;
+  right: 1px;
+  font-weight: 600;
+  font-size: 1.5rem;
+  color: #667eea;
+}
+
+.purple-text {
+  color: #667eea;
+}
+
+code {
+  background: #f1f3f4;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: 'Courier New', monospace;
+  color: #d73a49;
+}
+
+.doc-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 20px 0;
+  background: white;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.doc-table th {
+  background: #667eea;
+  color: white;
+  padding: 15px;
+  text-align: center;
+  font-weight: 600;
+}
+
+.doc-table td {
+  padding: 12px 15px;
+  text-align: center;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.doc-table tr:nth-child(even) {
+  background: #f8f9fa;
+}
+
+.check {
+  color: #28a745;
+  font-weight: bold;
+  font-size: 1.2rem;
+}
+
+.cross {
+  color: #dc3545;
+  font-weight: bold;
+  font-size: 1.2rem;
+}
+
+.type-description,
+.subject-description {
+  background: #f8f9fa;
+  padding: 20px;
+  border-radius: 10px;
+  margin: 20px 0;
+}
+
+.image-container {
+  margin: 20px 0;
+  text-align: center;
+}
+
+.image-container.text-center {
+  text-align: center;
+}
+
+.doc-image {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  border: 1px solid #e0e0e0;
+}
+
+.doc-footer {
+  text-align: center;
+  margin-top: 40px;
+  padding: 30px;
+  background: white;
+  border-radius: 15px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.action-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  flex-wrap: wrap;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  border-radius: 8px;
+  text-decoration: none;
+  font-weight: 600;
+  transition: all 0.3s ease;
+  border: none;
+  cursor: pointer;
+}
+
+.btn-primary {
+  background: #667eea;
+  color: white;
+}
+
+.btn-primary:hover {
+  background: #5a6fd8;
+  transform: translateY(-2px);
+}
+
+.btn-success {
+  background: #28a745;
+  color: white;
+}
+
+.btn-success:hover {
+  background: #218838;
+  transform: translateY(-2px);
+}
+
+.btn-info {
+  background: #17a2b8;
+  color: white;
+}
+
+.btn-info:hover {
+  background: #138496;
+  transform: translateY(-2px);
+}
+
+@media (max-width: 768px) {
+  .plugin-doc {
+    padding: 15px;
+  }
+
+  .doc-header {
+    flex-direction: column;
+    text-align: center;
+    padding: 20px;
+    gap: 15px;
+  }
+
+  .plugin-icon {
+    width: 60px;
+    height: 60px;
+    font-size: 2rem;
+  }
+
+  .plugin-info h1 {
+    font-size: 1.8rem;
+  }
+
+  .plugin-description {
+    font-size: 1rem;
+  }
+
+  .doc-section {
+    padding: 20px;
+  }
+
+  .step-item {
+    flex-direction: column;
+    gap: 15px;
+    padding: 15px;
+  }
+
+  .step-number {
+    width: 35px;
+    height: 35px;
+    font-size: 1rem;
+  }
+
+  .action-buttons {
+    flex-direction: column;
+    gap: 15px;
+  }
+
+  .btn {
+    justify-content: center;
+    padding: 15px 20px;
+    font-size: 1rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .plugin-doc {
+    padding: 10px;
+  }
+
+  .doc-header {
+    padding: 15px;
+  }
+
+  .plugin-info h1 {
+    font-size: 1.5rem;
+  }
+
+  .plugin-description {
+    font-size: 0.9rem;
+  }
+
+  .doc-section h2 {
+    font-size: 1.4rem;
+  }
+
+  .doc-section h5 {
+    font-size: 1rem;
+  }
+}
+</style>