/*
 * mizan-theme.css — سیستمِ رنگ/تمِ مشترکِ سایتِ میزان
 * ────────────────────────────────────────────────────
 * این فایل از داخلِ index.html استخراج شده تا همه‌ی صفحاتِ سایت یک منبعِ
 * واحد برایِ متغیرهایِ رنگی (۷ پالت + حالتِ روشن/تاریکِ هرکدام)، ابعادِ
 * کانتینر در مانیتورهایِ بزرگ، و ظاهرِ نوارِ ابزارهایِ بالایِ ناوبری
 * (تمِ رنگی، حالتِ نمایش، تاریخ، جستجو) داشته باشند.
 *
 * وقتی اینجا چیزی اصلاح بشه (مثلِ باگِ تداخلِ bg-white با بوت‌استرپ، یا
 * رنگِ نامرئیِ دکمه‌ی «نمایش میلادی»)، خودکار روی همه‌ی صفحاتی که این
 * فایل رو لینک کرده‌ن اعمال می‌شه — دیگه لازم نیست جدا‌جدا در هر صفحه
 * دستی درستش کنیم.
 *
 * نحوه‌ی استفاده: این فایل رو در <head>، قبلِ استایل‌هایِ اختصاصیِ خودِ
 * صفحه لینک کن:
 *   <link rel="stylesheet" href="assets/css/mizan-theme.css">
 * و مطمئن شو نوارِ ناوبریِ صفحه همون ساختارِ index.html رو داره (کلاس‌هایِ
 * .navbar / .tool-chip / .tool-popover / .palette-popover و دکمه‌هایِ
 * theme-toggle-btn / palette-toggle-btn / date-toggle-btn / search-toggle-btn).
 */

        :root {
            --ink: #1B2A41;
            --ink-soft: #3B4A63;
            --paper: #F6F4EC;
            --paper-line: #DAD4C1;
            --gold: #B08A34;
            --gold-deep: #8C6B24;
            --muted: #6B7280;
            --white: #FFFDF8;
            --shadow: 0 2px 12px rgba(27, 42, 65, 0.08);
            --shadow-hover: 0 6px 24px rgba(27, 42, 65, 0.14);
            --radius: 6px;
            /* ⭐ --good/--good-bg (سبزِ موفقیت) توی ۴۷ تا از ~۵۰ صفحه‌ی
               سایت تکرار شده بود؛ چون رنگِ معناییِ «موفقیت»ه و نباید با
               پالت‌های تزئینی عوض بشه، اینجا یک‌بار ثابت تعریف می‌شه (فقط
               حالتِ تاریک مقدارش فرق می‌کنه) و صفحات دیگه لازم نیست خودشون
               تعریفش کنن. */
            --good: #3E6E52;
            --good-bg: #F1F7F3;
            /* ⭐ --gold-deep-fixed: برایِ عناصری مثلِ دکمه‌ی «نمایش میلادی» یا
               چیپِ درسِ کارت‌های آزمون که پس‌زمینه‌شون همیشه یک کِرِمِ روشنِ
               ثابته (صرف‌نظر از تاریک/روشن بودنِ صفحه) — متنِ روشونش باید
               «رنگِ حالتِ روشنِ همون پالت» بمونه، نه اینکه با رفتنِ به حالتِ
               تاریک روشن بشه و رویِ اون زمینه‌ی روشن ناخونا بشه. برای همین،
               بر‌خلافِ بقیه‌ی متغیرها، این یکی توی body.dark-mode یا هیچ‌کدوم
               از ترکیب‌هایِ «پالت+تاریک» بازتعریف نمی‌شه — فقط هر پالت مقدارِ
               روشنِ خودش رو داره و همون ثابت می‌مونه. */
            --gold-deep-fixed: #8C6B24;
            /* ⭐ --tint: زمینهٔ کم‌رنگِ طلاییِ کادرها/آمارها/تب‌هایِ فعال (قبلاً #FBF6EA ثابت بود و در تمِ تاریک متنِ روشن رویِ آن
               ناخوانا می‌شد). در حالتِ روشن همان کِرِمِ قبلی؛ در تمِ تاریک آمیزهٔ ملایمی از رنگِ تمِ فعال با زمینهٔ تاریک. */
            --tint: #FBF6EA;
        }
        body.dark-mode {
            --ink: #EAE4D6;
            --ink-soft: #C8BFA8;
            --paper: #171D26;
            --paper-line: #2E3A4C;
            --gold: #E5C97E;
            --gold-deep: #F0DCA8;
            --muted: #93A0B5;
            --white: #1D2530;
            --shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
            --shadow-hover: 0 6px 24px rgba(0, 0, 0, 0.55);
            --good: #6FA687;
            --good-bg: #16241B;
            --tint: color-mix(in srgb, var(--gold) 14%, var(--white));
            /* رنگ‌هایِ هشدار/خطا برایِ تمِ تاریک: متنِ روشن‌تر و زمینهٔ تیره (صفحه‌ها در :root مقدارِ حالتِ روشن را تعریف کرده‌اند) */
            --danger: #F0907A;
            --danger-bg: #2B1A17;
            --warn: #E3C46A;
            --warn-bg: #2A2514;
        }
        /* لینکِ بدونِ کلاس در تمِ تاریک: آبیِ پیش‌فرضِ مرورگر رویِ زمینهٔ تیره ناخوانا است */
        body.dark-mode a:where(:not([class])){ color: var(--gold-deep); }

        /* ═══ تمِ تاریک: اصلاحِ ترکیب‌هایِ «متنِ روشن رویِ زمینهٔ روشن» که صفحه‌ها در CSSِ خودشان ثابت نوشته‌اند ═══ */
        body.dark-mode{
            --cream: var(--tint);
            --info: #8DB8E8;
            --info-bg: #16222F;
        }
        /* پنل‌هایِ تیرهٔ ثابت (در حالتِ روشن var(--ink) تیره است؛ در تاریک روشن می‌شد و متنِ روشنِ ثابتشان گم می‌شد) */
        body.dark-mode .side,
        body.dark-mode .balance-card:not(.coin-theme),
        body.dark-mode .tree-node.you{
            background: color-mix(in srgb, var(--gold) 14%, #0F141B);
            color: var(--ink);
            border: 1px solid var(--paper-line);
        }
        body.dark-mode .btn-ghost-dark{ color: var(--ink); }
        body.dark-mode .tree-node.you .tn-sub{ color: var(--ink-soft); }
        /* شمارهٔ مراحل / دکمهٔ «شروع داوری» (راهنمایِ داوری): زمینهٔ طلایی روشن با متنِ سفیدِ ثابت */
        body.dark-mode .mrg-n,
        body.dark-mode .mrg-btn{ color: var(--white); }
        /* آمارِ داوری (my-reviews) */
        body.dark-mode .rs-label{ color:#fff; }
        body.dark-mode .rs-group.rs-purple .rs-label{ background:#4A55A0; }
        body.dark-mode .rs-group.rs-green  .rs-label{ background:#2F6B4A; }
        body.dark-mode .rs-group.rs-pink   .rs-label{ background:#8E3A33; }
        body.dark-mode .rs-cell{ border-color: var(--paper-line); }
        /* برچسب‌ها/نوارهایِ کم‌رنگِ طلاییِ ثابت (#FBF6EA) در صفحه‌هایی که هنوز از --tint استفاده نمی‌کنند */
        body.dark-mode .grade-inline,
        body.dark-mode .chip-gold{ background: var(--tint); }
        body.dark-mode .step.done .step-num{ color:#14181F; }

        /* ═══════════════════════════════════════════════════════
           ۷ تمِ رنگیِ اضافه — هرکدام با حالتِ روشن و تاریکِ اختصاصی.
           چون کلِ استایلِ صفحه روی همین متغیرها سوار است، هیچ قاعده‌ی
           دیگری لازم نیست تغییر کند؛ فقط مقادیرِ متغیرها عوض می‌شود.
           ═══════════════════════════════════════════════════════ */

        /* ── دخترانه ۱: صورتی و گل‌بهی ── */
        body[data-theme="pink"] {
            --ink: #4A2B39; --ink-soft: #7A4B5E; --paper: #FFF3F6; --paper-line: #F3D8E1;
            --gold: #E8638F; --gold-deep: #C94770; --muted: #9C7684; --white: #FFFFFF;
            --shadow: 0 2px 12px rgba(180, 60, 100, 0.10); --shadow-hover: 0 6px 24px rgba(180, 60, 100, 0.18);
            --gold-deep-fixed: #C94770;
        }
        body[data-theme="pink"].dark-mode {
            --ink: #F6DCE6; --ink-soft: #D9AEC0; --paper: #2A1720; --paper-line: #4A2A38;
            --gold: #F08FB0; --gold-deep: #F7B8CE; --muted: #B98CA0; --white: #331D28;
            --shadow: 0 2px 12px rgba(0, 0, 0, 0.4); --shadow-hover: 0 6px 24px rgba(0, 0, 0, 0.55);
        }

        /* ── دخترانه ۲: یاسی و بنفشِ روشن ── */
        body[data-theme="lilac"] {
            --ink: #3B2E52; --ink-soft: #645585; --paper: #F7F4FC; --paper-line: #E1D7F2;
            --gold: #9B7FD4; --gold-deep: #7A5CC0; --muted: #8D82A8; --white: #FFFFFF;
            --shadow: 0 2px 12px rgba(122, 92, 192, 0.10); --shadow-hover: 0 6px 24px rgba(122, 92, 192, 0.18);
            --gold-deep-fixed: #7A5CC0;
        }
        body[data-theme="lilac"].dark-mode {
            --ink: #E7E0F5; --ink-soft: #C3B6E0; --paper: #1E1A2E; --paper-line: #372F4E;
            --gold: #B79EEA; --gold-deep: #D2BFF5; --muted: #A79BC4; --white: #282239;
            --shadow: 0 2px 12px rgba(0, 0, 0, 0.4); --shadow-hover: 0 6px 24px rgba(0, 0, 0, 0.55);
        }

        /* ── دخترانه ۳: سفید و سرخابی ── */
        body[data-theme="white-magenta"] {
            --ink: #3A1A2C; --ink-soft: #6B3050; --paper: #FFFFFF; --paper-line: #F2DDE8;
            --gold: #D6336C; --gold-deep: #B0215A; --muted: #8A7580; --white: #FFFDFE;
            --shadow: 0 2px 12px rgba(214, 51, 108, 0.10); --shadow-hover: 0 6px 24px rgba(214, 51, 108, 0.18);
            --gold-deep-fixed: #B0215A;
        }
        body[data-theme="white-magenta"].dark-mode {
            --ink: #F7E4EE; --ink-soft: #E0A9C4; --paper: #20121A; --paper-line: #402531;
            --gold: #F0568F; --gold-deep: #F794B8; --muted: #B98EA2; --white: #2B1922;
            --shadow: 0 2px 12px rgba(0, 0, 0, 0.4); --shadow-hover: 0 6px 24px rgba(0, 0, 0, 0.55);
        }

        /* ── پسرانه ۱: آبیِ کم‌رنگ و سرمه‌ای ── */
        body[data-theme="blue-navy"] {
            --ink: #152A44; --ink-soft: #365472; --paper: #F2F7FC; --paper-line: #D8E4F0;
            --gold: #2E5C8A; --gold-deep: #1F3A5F; --muted: #6E859C; --white: #FFFFFF;
            --shadow: 0 2px 12px rgba(31, 58, 95, 0.10); --shadow-hover: 0 6px 24px rgba(31, 58, 95, 0.18);
            --gold-deep-fixed: #1F3A5F;
        }
        body[data-theme="blue-navy"].dark-mode {
            --ink: #DCE7F4; --ink-soft: #A9C2DC; --paper: #0D1B2A; --paper-line: #1F324A;
            --gold: #7FB3E0; --gold-deep: #A9CEF0; --muted: #7E97B0; --white: #15263A;
            --shadow: 0 2px 12px rgba(0, 0, 0, 0.4); --shadow-hover: 0 6px 24px rgba(0, 0, 0, 0.55);
        }

        /* ── پسرانه ۲: سبزِ مریم‌گلی و سبزِ تیره ── */
        body[data-theme="green"] {
            --ink: #22321F; --ink-soft: #47593F; --paper: #F5F7F0; --paper-line: #DDE5D2;
            --gold: #5C7A45; --gold-deep: #3F5A2E; --muted: #7C8B70; --white: #FFFFFF;
            --shadow: 0 2px 12px rgba(63, 90, 46, 0.10); --shadow-hover: 0 6px 24px rgba(63, 90, 46, 0.18);
            --gold-deep-fixed: #3F5A2E;
        }
        body[data-theme="green"].dark-mode {
            --ink: #E1E8D8; --ink-soft: #B7C7A8; --paper: #16211A; --paper-line: #2B3A28;
            --gold: #8FAE72; --gold-deep: #B0CB94; --muted: #8FA07E; --white: #1E2C22;
            --shadow: 0 2px 12px rgba(0, 0, 0, 0.4); --shadow-hover: 0 6px 24px rgba(0, 0, 0, 0.55);
        }

        /* ── پسرانه ۳: قهوه‌ای و طوسیِ تیره ── */
        body[data-theme="brown-gray"] {
            --ink: #2E2420; --ink-soft: #5A4A41; --paper: #F5F1EC; --paper-line: #E1D6C9;
            --gold: #8B5E3C; --gold-deep: #6B4226; --muted: #8A7D72; --white: #FFFFFF;
            --shadow: 0 2px 12px rgba(107, 66, 38, 0.10); --shadow-hover: 0 6px 24px rgba(107, 66, 38, 0.18);
            --gold-deep-fixed: #6B4226;
        }
        body[data-theme="brown-gray"].dark-mode {
            --ink: #EDE3D8; --ink-soft: #C7B6A6; --paper: #211C18; --paper-line: #3B332C;
            --gold: #B98F66; --gold-deep: #D4AC85; --muted: #A6978A; --white: #2B2521;
            --shadow: 0 2px 12px rgba(0, 0, 0, 0.4); --shadow-hover: 0 6px 24px rgba(0, 0, 0, 0.55);
        }

        /* ═══════════════════════════════════════════════════════
           عریض‌ترکردنِ کانتینر برای مانیتورهای بزرگ (مثلِ فرادرس/مکتب‌خونه)
           — کاملاً ریسپانسیو: زیرِ ۱۴۰۰px همان رفتارِ استاندارد بوتస‌تراپ.
           ═══════════════════════════════════════════════════════ */
        @media (min-width: 1400px) { .container { max-width: 1360px; } }
        @media (min-width: 1600px) { .container { max-width: 1540px; } }
        @media (min-width: 1800px) { .container { max-width: 1720px; } }

        /* ⭐ همون عریض‌شدنِ کانتینر، برایِ صفحاتِ داخلی که به‌جایِ
           بوت‌استرپ از کلاسِ اختصاصیِ `.wrap` (پایه ۱۲۰۰px) استفاده
           می‌کنن — یعنی تقریباً همه‌ی صفحاتِ سایت به‌جز index.html.
           ⭐ نکته‌ی مهم: خودِ قاعده‌ی پایه (max-width:1200px) هم باید اینجا،
           توی فایلِ مشترک، تعریف بشه — نه فقط نسخه‌ی داخلِ مدیاکوئری‌ها.
           چون اگه صفحه خودش هم یک `.wrap{max-width:1200px}` بدونِ مدیاکوئری
           داشته باشه (که بعد از این فایل لینک‌شده میاد)، توی کشکشِ CSS همون
           قاعده‌ی صفحه، حتی بالایِ ۱۴۰۰px هم، رویِ قاعده‌ی مدیاکوئریِ اینجا
           برنده می‌شه (چون با تخصیصِ برابر، آخرین قاعده در ترتیبِ سند برنده
           است، نه اینکه مدیاکوئری امتیازِ بیشتری بده) — و عریض‌شدن اصلاً
           دیده نمی‌شه. برای همین، وقتی صفحه‌ای این فایل رو لینک می‌کنه،
           قاعده‌ی `.wrap{max-width:1200px...}`ِ محلیِ خودش باید حذف بشه. */
        .wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
        @media (min-width: 1400px) { .wrap { max-width: 1360px; } }
        @media (min-width: 1600px) { .wrap { max-width: 1540px; } }
        @media (min-width: 1800px) { .wrap { max-width: 1720px; } }

        /* ⭐ نسخه‌ی جادارترِ هدر (`.wrap.nav`، ۱۰۰px بیشتر از `.wrap` معمولی)
           که در برخی صفحات (مثلِ shop.html) برایِ جاشدنِ منویِ اصلی استفاده
           می‌شه — با همون نسبت عریض می‌شه. */
        .wrap.nav { max-width: 1300px; }
        @media (min-width: 1400px) { .wrap.nav { max-width: 1460px; } }
        @media (min-width: 1600px) { .wrap.nav { max-width: 1640px; } }
        @media (min-width: 1800px) { .wrap.nav { max-width: 1820px; } }

        /* ── پاپ‌آورِ انتخابِ تمِ رنگی ── */
        .palette-popover { min-width: 268px; }
        .palette-popover .swatch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 8px; }
        .palette-popover .swatch-btn {
            display: flex; flex-direction: column; align-items: center; gap: 5px;
            background: none; border: none; font-family: inherit; cursor: pointer; padding: 4px;
        }
        .palette-popover .swatch-circle {
            width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--paper-line); transition: transform .2s;
        }
        .palette-popover .swatch-btn:hover .swatch-circle { transform: scale(1.1); }
        .palette-popover .swatch-btn.active .swatch-circle {
            box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--gold-deep);
        }
        .palette-popover .swatch-label { font-size: .64rem; color: var(--ink-soft); text-align: center; line-height: 1.3; }
        .palette-popover .swatch-group-title {
            font-size: .68rem; font-weight: 700; color: var(--muted); margin: 10px 0 6px; text-align: center;
        }
        .palette-popover .swatch-group-title:first-child { margin-top: 0; }

        * { font-family: 'Vazirmatn', sans-serif; }
        /* ⭐ توجه: قبلاً اینجا transition: background .3s, color .3s;
           وجود داشت. این باعثِ یک باگِ جدی می‌شد: وقتی data-theme
           عوض می‌شد، رنگِ خودِ body (و هر چیزی که رنگش را از body
           به ارث می‌برد، مثلِ h1های بدونِ رنگِ مستقیم) روی مقدارِ
           پالتِ قبلی "گیر" می‌کرد — چون تغییرِ selector match باعثِ
           تغییرِ ناگهانیِ مقدارِ var(--ink)/var(--paper) می‌شود و
           transition روی این نوع تغییر (نه یک تغییرِ تدریجیِ عادی)
           در برخی مرورگرها به‌درستی اجرا نمی‌شود و مقدار روی حالتِ
           میانی/قبلی می‌ماند. برایِ همینه که فقط بعضی عناصر (اونایی
           که خودشون مستقیم color/background:var(...) دارن) درست
           آپدیت می‌شدن ولی body و وارث‌هاش نه. حذفِ transition اینجا
           این مشکل رو کاملاً و به‌طور پایدار حل می‌کنه.
        */
        body { background: var(--paper); color: var(--ink); }

        /* ⭐ هدرِ چسبانِ بالایِ صفحه — تقریباً عیناً در همه‌ی صفحاتِ داخلیِ
           سایت (غیر از index.html) تکرار شده بود، با یک پس‌زمینه‌ی رنگِ
           ثابت (rgba(230,221,199,...)) که به هیچ متغیری وصل نبود — یعنی
           در حالتِ تاریک همیشه همون رنگِ روشن می‌موند. اینجا یک‌بار،
           بر‌اساسِ var(--paper)، تعریف می‌شه تا خودکار با تاریک/روشن و
           هر ۷ پالت هماهنگ بمونه. صفحاتی که این قاعده رو دارن، نسخه‌ی
           محلی‌شون حذف می‌شه.
        */
        header {
            position: sticky; top: 0; z-index: 50;
            /* ⭐ به‌درخواستِ کاربر: نوارِ بالا باید یه‌کم تیره‌تر از نوارِ
               پایینش (که مستقیم رنگِ var(--paper) خودِ صفحه‌ست) باشه تا
               دو نوار از هم جدا و قابل‌تشخیص بمونن — برایِ همین به‌جایِ
               ترکیب با transparent، با var(--ink) ترکیب می‌شه (نه با
               black خام) تا رنگِ نتیجه هم‌خانواده‌ی خودِ پالت بمونه. */
            background: color-mix(in srgb, var(--paper) 88%, var(--ink) 12%);
            backdrop-filter: blur(6px);
            border-bottom: 1px solid var(--paper-line);
        }
        body.dark-mode header { background: color-mix(in srgb, var(--paper) 82%, black 18%); }
        .navbar {
            /* ⭐ این پس‌زمینه قبلاً rgba ثابت بود (به هیچ متغیری وصل نبود)
               و اصلاً با تغییرِ پالت/حالتِ تاریک عوض نمی‌شد. حالا هم مثلِ
               header اصلی، بر‌اساسِ var(--paper)+var(--ink) تعریف می‌شه. */
            background: color-mix(in srgb, var(--paper) 88%, var(--ink) 12%) !important;
            backdrop-filter: blur(6px);
            border-bottom: 1px solid var(--paper-line);
            padding: 10px 0;
        }
        body.dark-mode .navbar { background: color-mix(in srgb, var(--paper) 82%, black 18%) !important; }
        .navbar .nav-link {
            color: var(--ink-soft) !important;
            font-weight: 500;
            /* ⭐ transition روی خودِ رنگ حذف شد — همون باگِ body (بالاتر)
               اینجا هم ممکنه پیش بیاد چون color از var(--ink-soft) که
               با تغییرِ data-theme عوض می‌شه گرفته شده. */
            border-radius: 8px;
            padding: 8px 14px;
        }
        .navbar .nav-link:hover {
            color: var(--gold-deep) !important;
            background: var(--paper);
        }
        body.dark-mode .navbar .nav-link:hover { background: var(--white); }
        .navbar .nav-link.btn-gold {
            color: #fff !important;
            background: var(--gold);
            padding: 8px 22px;
            border-radius: 8px;
        }
        .navbar .nav-link.btn-gold:hover { background: var(--gold-deep); transform: translateY(-1px); }
        body.dark-mode .navbar .nav-link.btn-gold { color: var(--paper) !important; }
        .navbar-brand { font-weight: 800; font-size: 1.35rem; color: var(--ink) !important; }
        body.dark-mode .navbar .navbar-brand { color: var(--ink) !important; }
        .navbar-brand span { color: var(--gold); }
        .head-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
        .tool-chip {
            display: inline-flex; align-items: center; gap: 6px;
            background: var(--paper); border: 1px solid var(--paper-line); border-radius: 999px;
            padding: 6px 12px; font-size: .8rem; color: var(--ink-soft);
            cursor: pointer; font-family: inherit; position: relative;
        }
        body.dark-mode .tool-chip { background: var(--white); border-color: var(--paper-line); color: var(--ink-soft); }
        .tool-chip:hover { border-color: var(--gold); color: var(--gold-deep); }
        .tool-popover {
            display: none; position: absolute; top: 115%; right: 0;
            background: var(--white); border: 1px solid var(--paper-line); border-radius: 10px;
            box-shadow: var(--shadow-hover); z-index: 300; padding: 12px 16px;
        }
        body.dark-mode .tool-popover { background: var(--white); border-color: var(--paper-line); }
        .tool-popover.show { display: block; }
        .date-popover { min-width: 230px; text-align: center; }
        .date-popover .dp-date { font-size: 1.05rem; font-weight: 800; color: var(--ink); }
        .date-popover .dp-cal { font-size: .75rem; color: var(--muted); margin-top: 4px; }
        .date-popover .dp-switch {
            /* ⭐ پس‌زمینه‌ی این دکمه همیشه یک کِرِمِ روشنِ ثابت است (#FBF6EA)،
               مستقل از تم/حالت — برای همین رنگِ متن هم به‌جایِ var(--gold-deep)
               (که در حالتِ تاریک روشن می‌شه و روی این زمینه ناخونا می‌مونه) از
               var(--gold-deep-fixed) استفاده می‌کنه: این متغیر با هر پالت عوض
               می‌شه ولی با تاریک/روشن‌شدنِ صفحه ثابت می‌مونه — یعنی هم به پالتِ
               فعال واکنش نشون می‌ده، هم همیشه رویِ این زمینه‌ی روشن خواناست.
            */
            margin-top: 10px; font-size: .74rem; font-weight: 700; color: var(--gold-deep-fixed);
            background: #FBF6EA; border: 1px solid var(--gold); border-radius: 999px;
            padding: 4px 12px; cursor: pointer; font-family: inherit;
        }
        .search-popover { min-width: 250px; }
        .search-popover input {
            width: 100%; padding: 8px 12px; border: 1px solid var(--paper-line);
            border-radius: 8px; font-family: inherit; font-size: .85rem;
        }
        .search-popover .sp-hint { font-size: .72rem; color: var(--muted); margin-top: 6px; }
        mark.search-hit { background: #FBF3DE; color: var(--ink); border-radius: 3px; padding: 0 2px; }
        body.dark-mode mark.search-hit { background: var(--gold); color: var(--paper); }

        /* ⭐ سوییچِ آیکونِ ماه/خورشیدِ دکمه‌ی تمِ روشن/تاریک — این قاعده جزوِ
           ناوبریِ مشترک است (نه محتوایِ اختصاصیِ صفحه‌ی اصلی)، ولی در
           استخراجِ اولیه از index.html جا مانده بود و فقط در آن صفحه کار
           می‌کرد. بدونِ این، آیکونِ ماه/خورشید در نوارِ همه‌ی صفحاتِ دیگر
           هیچ‌وقت جابه‌جا نمی‌شد.
        */
        .theme-toggle-btn .moon, .theme-toggle-btn .sun { display: none; }
        body.dark-mode .theme-toggle-btn .sun { display: inline; }
        body:not(.dark-mode) .theme-toggle-btn .moon { display: inline; }

        /* ═══════════════════════════════════════════════════════
           حالتِ سبک (بدونِ ناوبریِ کاملِ بوت‌استرپی): برای صفحاتی که
           هدرِ اختصاصیِ خودشون رو نگه می‌دارن و فقط دکمه‌های تاریخ/
           جستجو/حالت‌نمایش/تمِ‌رنگی رو به همون هدر اضافه می‌کنن — این
           دکمه‌ها فقط آیکون‌ان (بدونِ متن) تا فضای کمی اشغال کنن.
           ═══════════════════════════════════════════════════════ */
        .tool-chip.icon-only {
            width: 36px; height: 36px; padding: 0; border-radius: 50%;
            justify-content: center; font-size: .95rem;
        }
        .visually-hidden {
            position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
            overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
        }