/* ============================================================
   دیباگ | قالب بلاگ
   ------------------------------------------------------------
   همان سیستم طراحی فروشگاه («کارگاه شب»): همان توکن‌ها، همان هدر و
   فوتر، همان کارت مقاله. هرچه این‌جا اضافه شده مخصوص خواندن متن بلند
   فنی به فارسی است.
   ============================================================ */

@layer reset, tokens, base, layout, components, article, utilities;

/* منبع اول همان فایلی است که فروشگاه بارگذاری می‌کند، پس کسی که از
   فروشگاه می‌آید فونت را از کش دارد. اگر نبود، نسخه‌ی خود قالب. */
@font-face{
    font-family:'Vazirmatn';
    src:url('/assets/fonts/vazirmatn-fa.woff2') format('woff2'),
        url('../fonts/vazirmatn-fa.woff2') format('woff2');
    font-weight:100 900;
    font-style:normal;
    font-display:swap;
}

@view-transition{navigation:auto}

@layer reset{
    *,*::before,*::after{box-sizing:border-box}
    *{margin:0;padding:0}
    html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
    body{min-block-size:100dvh;-webkit-font-smoothing:antialiased}
    img,picture,svg,video{display:block;max-inline-size:100%;block-size:auto}
    input,button,textarea,select{font:inherit;color:inherit}
    button{background:none;border:0;cursor:pointer}
    a{color:inherit;text-decoration:none}
    ul[class],ol[class]{list-style:none}
    table{border-collapse:collapse}
    :target{scroll-margin-block-start:6rem}
}

@layer tokens{
    :root{
        color-scheme:dark;
        --font:'Vazirmatn',system-ui,'Segoe UI',Tahoma,sans-serif;
        --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
        --fw-base:430;

        --bg:#101319;--bg:oklch(0.16 0.015 260);
        --bg-2:#161a22;--bg-2:oklch(0.19 0.017 260);
        --surface:#1b1f28;--surface:oklch(0.215 0.018 260);
        --surface-2:#222735;--surface-2:oklch(0.25 0.02 260);
        --line:#2c3240;--line:oklch(0.30 0.02 260);
        --line-2:#3d4454;--line-2:oklch(0.38 0.022 260);

        --ink:#eef0f5;--ink:oklch(0.95 0.008 260);
        --ink-2:#bcc0cb;--ink-2:oklch(0.80 0.012 260);
        --muted:#8f95a3;--muted:oklch(0.66 0.015 260);

        --accent:#efab4a;
        --accent-2:#ffbe63;
        --accent-ink:#3a2a10;
        --accent-text:var(--accent);

        --ok:#3fc79a;--ok:oklch(0.75 0.15 160);
        --err:#f4635a;--err:oklch(0.68 0.19 25);
        --info:#6aa8e8;--info:oklch(0.72 0.12 250);

        --aurora-1:#5b6ae0;--aurora-1:oklch(0.55 0.18 265);
        --aurora-2:#45a5c4;--aurora-2:oklch(0.60 0.14 200);

        --glass:rgba(255,255,255,.05);
        --shadow-1:0 1px 2px rgba(0,0,0,.30);
        --shadow-2:0 6px 18px -8px rgba(0,0,0,.55);
        --shadow-3:0 22px 50px -28px rgba(0,0,0,.70);
        --noise-op:.035;

        /* بلوک کد در هر دو تم روی زمینه‌ی خودش می‌نشیند */
        --code-bg:var(--bg-2);
        --code-ink:var(--ink);

        --r-xs:.4rem;--r-sm:.6rem;--r:.9rem;--r-lg:1.4rem;--r-full:999px;

        --step--2:clamp(.75rem,.72rem + .12vw,.81rem);
        --step--1:clamp(.85rem,.82rem + .16vw,.93rem);
        --step-0:clamp(.98rem,.94rem + .20vw,1.07rem);
        --step-1:clamp(1.14rem,1.06rem + .38vw,1.35rem);
        --step-2:clamp(1.34rem,1.20rem + .66vw,1.72rem);
        --step-3:clamp(1.62rem,1.36rem + 1.24vw,2.30rem);
        --step-4:clamp(2rem,1.50rem + 2.35vw,3.30rem);

        --fs-xs:var(--step--2);--fs-sm:var(--step--1);--fs-base:var(--step-0);
        --fs-lg:var(--step-1);--fs-h3:var(--step-2);--fs-h2:var(--step-3);--fs-h1:var(--step-4);

        --space-3xs:.25rem;--space-2xs:.5rem;--space-xs:.75rem;--space-s:1rem;
        --space-m:1.5rem;--space-l:2.25rem;--space-xl:3.5rem;--space-2xl:5rem;

        --wrap:1280px;
        --gap:clamp(1rem,.72rem + 1.15vw,1.5rem);
        --block:clamp(3.5rem,2.6rem + 3.8vw,5rem);

        --dur-1:140ms;--dur-2:220ms;--dur:var(--dur-2);
        --ease:cubic-bezier(.2,.7,.3,1);

        --accent-050:#201b13;--accent-100:#2e2315;--accent-200:#46331a;
        --accent-300:#6d4e22;--accent-600:#d1913b;--accent-700:#a5712c;
    }

    :root[data-theme="light"]{
        color-scheme:light;
        --fw-base:400;

        --bg:#f9fafb;--bg:oklch(0.985 0.003 260);
        --bg-2:#f0f2f6;--bg-2:oklch(0.96 0.005 260);
        --surface:#ffffff;
        --surface-2:#f4f6f9;--surface-2:oklch(0.97 0.005 260);
        --line:#dde0e7;--line:oklch(0.90 0.008 260);
        --line-2:#c5c9d3;--line-2:oklch(0.82 0.01 260);

        --ink:#232833;--ink:oklch(0.25 0.02 260);
        --ink-2:#454c5c;--ink-2:oklch(0.42 0.02 260);
        --muted:#5f6675;--muted:oklch(0.50 0.015 260);

        --ok:#12805a;--ok:oklch(0.52 0.13 160);
        --err:#c53430;--err:oklch(0.53 0.20 25);
        --info:#2f6fb5;--info:oklch(0.52 0.13 250);

        --accent:#d9913a;
        --accent-2:#c5802c;
        --accent-ink:#2a1d08;
        --accent-text:#7c5411;

        --glass:rgba(255,255,255,.7);
        --shadow-1:0 1px 2px rgba(20,25,40,.05);
        --shadow-2:0 6px 16px -8px rgba(20,25,40,.20);
        --shadow-3:0 22px 46px -28px rgba(20,25,40,.30);
        --noise-op:.02;

        --accent-050:#fdf7ee;--accent-100:#f9ecd9;--accent-200:#f0d6ab;
        --accent-300:#e3b877;--accent-600:#c07f2b;--accent-700:#96621f;
    }

    @supports (color:color-mix(in oklch,red,blue)){
        :root{
            --accent-2:color-mix(in oklab,var(--accent) 86%,#fff);
            --accent-ink:color-mix(in oklab,var(--accent) 26%,#000);
        }
        :root[data-theme="light"]{
            --accent-2:var(--accent-600);
            --accent-ink:color-mix(in oklab,var(--accent) 24%,#000);
            --accent-text:var(--accent-700);
        }
        :root,:root[data-theme="light"]{
            --accent-050:color-mix(in oklab,var(--accent) 8%,var(--surface));
            --accent-100:color-mix(in oklab,var(--accent) 16%,var(--surface));
            --accent-200:color-mix(in oklab,var(--accent) 30%,var(--surface));
            --accent-300:color-mix(in oklab,var(--accent) 48%,var(--surface));
            --accent-600:color-mix(in oklab,var(--accent) 84%,#000);
            --accent-700:color-mix(in oklab,var(--accent) 66%,#000);
        }
    }
}

@layer base{
    html{font-family:var(--font);scroll-behavior:smooth;
        scrollbar-color:var(--line-2) transparent;scrollbar-width:thin}

    body{
        font-family:var(--font);
        font-weight:var(--fw-base);
        font-size:var(--fs-base);
        line-height:1.85;
        color:var(--ink);
        background-color:var(--bg);
        position:relative;
        overflow-x:hidden;
    }

    @supports (background:color-mix(in oklab,red,blue)){
        body{
            background-image:
                radial-gradient(58rem 38rem at 88% -12%,color-mix(in oklab,var(--aurora-1) 20%,transparent),transparent 62%),
                radial-gradient(46rem 32rem at 8% -4%,color-mix(in oklab,var(--aurora-2) 16%,transparent),transparent 58%);
            background-repeat:no-repeat;
            background-attachment:fixed;
        }
        :root[data-theme="light"] body{
            background-image:
                radial-gradient(58rem 38rem at 88% -12%,color-mix(in oklab,var(--aurora-1) 8%,transparent),transparent 60%),
                radial-gradient(46rem 32rem at 8% -4%,color-mix(in oklab,var(--aurora-2) 6%,transparent),transparent 55%);
        }
    }

    body::before{
        content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
        opacity:var(--noise-op);
        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }
    body > *{position:relative;z-index:1}

    /* 🔴 letter-spacing روی فارسی همیشه صفر؛ وزن ۷۰۰ سقف است */
    h1,h2,h3,h4{line-height:1.5;font-weight:700;text-wrap:balance;letter-spacing:0}
    h1{font-size:var(--fs-h1)}
    h2{font-size:var(--fs-h2)}
    h3{font-size:var(--fs-h3)}
    p{text-wrap:pretty}
    strong,b{font-weight:700}

    a{transition:color var(--dur) var(--ease)}
    a:hover{color:var(--accent-text)}

    ::selection{background:var(--accent);color:var(--accent-ink)}

    :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-xs)}

    hr{border:0;block-size:1px;background:var(--line)}
}

@layer layout{
    .wrap{inline-size:min(100% - 2.2rem,var(--wrap));margin-inline:auto}
    .section{padding-block:var(--block)}
    .section--tight{padding-block:var(--space-m) var(--space-l)}
}

@layer utilities{
    .ltr{unicode-bidi:isolate;direction:ltr;display:inline-block}
    .muted{color:var(--muted)}
    .num{font-variant-numeric:tabular-nums}

    .sr-only,.screen-reader-text{
        position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;
        overflow:hidden;clip-path:inset(50%);white-space:nowrap;
    }

    .skip-link{
        position:absolute;inset-block-start:-100px;inset-inline-start:1rem;z-index:99;
        background:var(--accent);color:var(--accent-ink);
        padding:.6rem 1.1rem;border-radius:var(--r-sm);font-weight:700;
        transition:inset-block-start var(--dur) var(--ease);
    }
    .skip-link:focus{inset-block-start:1rem}

    @supports (content-visibility:auto){
        .defer{content-visibility:auto;contain-intrinsic-size:auto 34rem}
    }
}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
    @view-transition{navigation:none}
}

@layer components{

    /* ---------------- دکمه ---------------- */
    .btn{
        display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
        min-block-size:2.75rem;padding-block:.6rem;padding-inline:1.4rem;
        border-radius:var(--r-full);font-weight:700;font-size:var(--fs-sm);line-height:1.6;
        border:1px solid transparent;white-space:nowrap;
        transition:transform var(--dur-1) var(--ease),background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
    }
    .btn:hover{transform:translateY(-1px)}
    .btn:active{transform:translateY(0)}
    .btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
    .btn-primary:hover{background:var(--accent-2);color:var(--accent-ink)}
    .btn-outline{border-color:var(--line-2);color:var(--ink);background:var(--glass)}
    .btn-outline:hover{border-color:var(--accent);color:var(--accent-text)}
    .btn-sm{min-block-size:2.3rem;padding-block:.4rem;padding-inline:.95rem;font-size:var(--fs-xs)}

    .icon-btn{
        display:inline-grid;place-items:center;inline-size:2.75rem;block-size:2.75rem;
        border-radius:var(--r-full);color:var(--ink-2);border:1px solid transparent;
        transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);
    }
    .icon-btn:hover{background:var(--surface-2);color:var(--ink);border-color:var(--line)}
    .icon-btn svg{inline-size:1.15rem;block-size:1.15rem;stroke-width:1.7}

    /* کلید تم: خورشید در تم تیره، ماه در تم روشن */
    .theme-ico--moon{display:none}
    [data-theme="light"] .theme-ico--sun{display:none}
    [data-theme="light"] .theme-ico--moon{display:block}

    .ico{inline-size:1.15rem;block-size:1.15rem;flex:none}

    /* ---------------- هدر ---------------- */
    .site-header{
        position:sticky;inset-block-start:0;z-index:50;
        border-block-end:1px solid transparent;
        transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
    }
    .site-header::before{
        content:"";position:absolute;inset:0;z-index:-1;opacity:0;
        background:color-mix(in oklab,var(--bg) 94%,transparent);
        transition:opacity var(--dur) var(--ease);
    }
    .site-header[data-stuck="1"]{
        border-block-end-color:var(--line);
        box-shadow:0 1px 0 rgba(15,23,42,.05),0 10px 26px -20px rgba(15,23,42,.5);
    }
    .site-header[data-stuck="1"]::before{opacity:1}

    @supports (backdrop-filter:blur(4px)){
        .site-header[data-stuck="1"]::before{
            backdrop-filter:blur(16px) saturate(150%);
            background:color-mix(in oklab,var(--bg) 86%,transparent);
        }
    }

    .header-inner{display:flex;align-items:center;gap:1.2rem;min-block-size:4.4rem}

    .brand{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.24rem;color:var(--ink)}
    .brand:hover{color:var(--ink)}
    .brand-mark{
        display:grid;place-items:center;inline-size:2.2rem;block-size:2.2rem;
        border-radius:var(--r-sm);background:var(--accent);color:var(--accent-ink);
        font-size:.95rem;font-weight:800;unicode-bidi:isolate;direction:ltr;flex:none;
    }
    .brand-logo{display:block;block-size:2.2rem;inline-size:auto;border-radius:var(--r-sm);object-fit:contain}
    .brand-sub{
        font-size:var(--fs-xs);font-weight:500;color:var(--muted);
        border-inline-start:1px solid var(--line);padding-inline-start:.6rem;margin-inline-start:.1rem;
    }

    .nav{display:flex;align-items:center;gap:.3rem;margin-inline-start:auto}
    .nav-link{white-space:nowrap;
        position:relative;padding-block:.5rem;padding-inline:.85rem;border-radius:var(--r-sm);
        font-size:var(--fs-sm);font-weight:600;color:var(--ink-2);
        transition:color var(--dur) var(--ease),background var(--dur) var(--ease);
    }
    .nav-link:hover{color:var(--ink);background:var(--surface-2)}
    .nav-link[aria-current="page"]{color:var(--accent-text)}
    .nav-link[aria-current="page"]::after{
        content:"";position:absolute;inset-block-end:.15rem;inset-inline:.85rem;
        block-size:2px;border-radius:2px;background:var(--accent);
    }

    .header-actions{display:flex;align-items:center;gap:.35rem}

    /* 🔴 فقط کوئری عرضی، مثل فروشگاه: «نمایش سایت دسکتاپ» روی موبایل
       باید دقیقاً دسکتاپ نشان بدهد. */
    @media (max-width:860px){
        .nav{
            display:flex;order:3;flex:0 0 100%;margin:0 0 .35rem;gap:.15rem;
            overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
            -webkit-overflow-scrolling:touch;
        }
        .nav::-webkit-scrollbar{display:none}
        .nav-link{padding-block:.35rem;font-size:.86rem;white-space:nowrap;flex:0 0 auto}
        .header-actions{margin-inline-start:auto}
        .brand-sub{display:none}
        .header-inner{min-block-size:3.6rem;gap:0 .7rem;flex-wrap:wrap}
        .site-header::before{opacity:1}
        .site-header{border-block-end-color:var(--line)}
        .brand{font-size:1.08rem}
        .brand-mark,.brand-logo{inline-size:1.9rem;block-size:1.9rem}
        .header-actions{margin-inline-start:auto}
        .header-actions > *:not([data-theme-toggle]):not(.header-search){display:none}
    }

    /* ---------------- نوار ناوبری پایین ---------------- */
    .tabbar{display:none}

    @media (max-width:860px){
        :root{--tabbar-h:3.4rem}

        .tabbar{
            position:fixed;inset-inline:0;inset-block-end:0;z-index:60;
            display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
            background:var(--bg-2);border-block-start:1px solid var(--line);
            padding-block-end:env(safe-area-inset-bottom,0px);
        }
        .tabbar__item{
            position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
            gap:.15rem;min-block-size:var(--tabbar-h);padding-block:.4rem;color:var(--muted);
            transition:color var(--dur-1) var(--ease);
        }
        .tabbar__item:hover{color:var(--ink-2)}
        .tabbar__ico{inline-size:1.4rem;block-size:1.4rem}
        .tabbar__label{font-size:.68rem;font-weight:600;line-height:1.6}
        .tabbar__item[aria-current="page"]{color:var(--accent-text)}
        .tabbar__item[aria-current="page"]::before{
            content:"";position:absolute;inset-block-start:0;inset-inline:28%;block-size:2px;
            border-end-start-radius:2px;border-end-end-radius:2px;background:var(--accent);
        }
        body{padding-block-end:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px))}
    }

    @supports (backdrop-filter:blur(4px)){
        @media (max-width:860px){
            .tabbar{
                background:color-mix(in oklab,var(--bg-2) 93%,transparent);
                backdrop-filter:blur(16px) saturate(150%);
            }
        }
    }

    /* ---------------- سرصفحه‌ی بخش ---------------- */
    .section-head{
        display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-s);
        flex-wrap:wrap;margin-block-end:var(--space-m);font-size:1.35rem;
    }
    .section-link{
        font-size:var(--fs-sm);font-weight:700;color:var(--accent-text);
        display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap;
    }
    .section-link .ico{inline-size:1rem;block-size:1rem;transition:transform var(--dur-1) var(--ease)}
    .section-link:hover .ico{transform:translateX(-.2rem)}

    /* ---------------- چیپ و نشان ---------------- */
    .chips-row{display:flex;flex-wrap:wrap;gap:var(--space-2xs)}
    .chip{
        display:inline-flex;align-items:center;gap:.4rem;
        padding-block:.3rem;padding-inline:.8rem;
        border:1px solid var(--line);border-radius:var(--r-full);
        background:var(--surface);font-size:var(--fs-xs);font-weight:600;
        color:var(--muted);unicode-bidi:plaintext;
        transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),background var(--dur-1) var(--ease);
    }
    .chip:hover{border-color:var(--line-2);color:var(--ink)}
    .chip__n{font-size:.72rem;font-weight:500;direction:ltr;unicode-bidi:isolate;
        font-variant-numeric:tabular-nums}
    .chip.is-active{border-color:var(--accent-300);background:var(--accent-050);color:var(--ink)}

    @media (max-width:48rem){
        .chips-row--scroll{
            flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
            margin-inline:-1.1rem;padding-inline:1.1rem;scroll-snap-type:x proximity;
        }
        .chips-row--scroll::-webkit-scrollbar{display:none}
        .chips-row--scroll .chip{flex:none;scroll-snap-align:start}
    }

    .chips-row--sub{padding-block-start:var(--space-2xs);border-block-start:1px dashed var(--line)}
    .chips-row--sub .chip{background:var(--bg)}

    .article-kind{
        display:inline-flex;align-items:center;gap:.35rem;
        font-size:var(--fs-xs);font-weight:700;
        padding-block:.15rem;padding-inline:.55rem;border-radius:var(--r-full);
        color:var(--accent-text);border:1px solid var(--accent-200);
    }
    .article-kind .ico{inline-size:.9rem;block-size:.9rem}

    /* ---------------- سرصفحه‌ی بلاگ ---------------- */
    .page-hero{padding-block:clamp(2rem,1.4rem + 3vw,3.6rem) 0}
    .page-hero h1{font-size:var(--fs-h2)}
    .page-hero__intro{color:var(--ink-2);max-inline-size:62ch;margin-block-start:.6rem;line-height:2}
    .page-hero__count{color:var(--muted);font-size:var(--fs-sm);margin-block-start:.4rem}

    .breadcrumb{
        display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
        font-size:.82rem;color:var(--muted);margin-block:1.4rem .4rem;
    }
    .breadcrumb a:hover{color:var(--accent-text)}
    .breadcrumb [aria-hidden]{opacity:.55}
    .breadcrumb [aria-current]{color:var(--ink-2);
        overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-inline-size:min(60vw,28rem)}

    /* ---------------- نوار ابزار فهرست ---------------- */
    .archive-bar{display:flex;flex-direction:column;gap:var(--space-s);margin-block:var(--space-m) 0}
    .archive-bar__row{display:flex;align-items:center;gap:var(--space-s);flex-wrap:wrap}

    .searchbar{
        display:flex;align-items:center;gap:.5rem;flex:1 1 22rem;
        max-inline-size:34rem;min-inline-size:0;
        padding-block:.3rem;padding-inline:.9rem .4rem;
        border-radius:var(--r-full);border:1px solid var(--line);background:var(--surface);
        transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease);
    }
    .searchbar:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-100)}
    .searchbar .ico{color:var(--muted);inline-size:1.05rem;block-size:1.05rem}
    .searchbar input[type="search"]{
        flex:1 1 auto;min-inline-size:0;padding:0;border:0;background:none;
        color:var(--ink);font-size:var(--fs-sm);
    }
    .searchbar input[type="search"]:focus{outline:none}
    .searchbar input::placeholder{color:var(--muted)}
    .searchbar input[type="search"]::-webkit-search-cancel-button{display:none}

    .select{
        padding-block:.55rem;padding-inline:.9rem;border-radius:var(--r-full);
        border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
        font-size:var(--fs-sm);min-block-size:2.75rem;
    }
    .select:focus{outline:2px solid var(--accent);outline-offset:1px}

    /* ---------------- کارت مقاله ---------------- */
    .article-grid{
        display:grid;gap:var(--gap);
        grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
    }
    @supports selector(:has(*)){
        .article-grid:not(:has(> :nth-child(3))){
            grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),24rem));
            justify-content:start;
        }
    }

    .article-card{
        position:relative;display:flex;flex-direction:column;
        background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
        transition:transform var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
    }
    .article-card:hover{border-color:var(--accent-300);transform:translateY(-2px);box-shadow:var(--shadow-2)}

    /* امضای فروشگاه: خط کهربایی که از لبه‌ی راست کارت باز می‌شود */
    .article-card::after{
        content:"";position:absolute;inset-block-start:0;inset-inline:var(--r);z-index:2;
        block-size:2px;background:var(--accent);transform:scaleX(0);transform-origin:100% 50%;
        transition:transform var(--dur-2) var(--ease);
    }
    .article-card:hover::after,.article-card:focus-within::after{transform:scaleX(1)}

    .article-card__media{
        display:block;background:var(--bg-2);aspect-ratio:16/9;overflow:hidden;
        border-start-start-radius:var(--r);border-start-end-radius:var(--r);
    }
    .article-card__media img{
        inline-size:100%;block-size:100%;object-fit:cover;display:block;
        transition:transform .5s var(--ease);
    }
    .article-card:hover .article-card__media img{transform:scale(1.04)}
    .article-card__blank{
        display:grid;place-items:center;block-size:100%;color:var(--accent-300);
        background:linear-gradient(135deg,var(--bg-2),var(--surface-2));
    }
    .article-card__blank .ico{inline-size:2.4rem;block-size:2.4rem;stroke-width:1.2}

    .article-card__body{padding:1rem 1.1rem 1.1rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
    .article-card__body h2,.article-card__body h3{font-size:1.02rem;line-height:1.75}
    /* کل کارت قابل کلیک است، ولی لینک واقعی فقط عنوان است */
    .article-card__body h2 a::after,.article-card__body h3 a::after{content:"";position:absolute;inset:0;z-index:1}
    .article-card__body p{
        font-size:.87rem;color:var(--ink-2);line-height:1.95;
        display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
    }
    .article-card__meta{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;font-size:.76rem;color:var(--muted)}
    .article-card__meta a{position:relative;z-index:2}
    .article-card__foot{
        display:flex;flex-wrap:wrap;gap:.7rem;font-size:.76rem;color:var(--muted);
        margin-block-start:auto;padding-block-start:.3rem;
    }

    /* ---------------- مقاله‌ی ویژه ---------------- */
    .feature{
        display:grid;gap:0;margin-block-end:var(--gap);
        grid-template-columns:minmax(0,1fr);
    }
    .feature .article-card__media{aspect-ratio:16/9}
    .feature .article-card__body{padding:clamp(1.1rem,.8rem + 1.4vw,2rem);gap:.7rem;justify-content:center}
    .feature .article-card__body h2{font-size:var(--step-2);line-height:1.65}
    .feature .article-card__body p{font-size:var(--fs-sm);-webkit-line-clamp:4}
    .feature__flag{font-size:var(--fs-xs);font-weight:700;color:var(--muted)}

    @media (min-width:56rem){
        .feature{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
        .feature .article-card__media{
            aspect-ratio:auto;block-size:100%;min-block-size:19rem;
            border-start-end-radius:0;border-end-start-radius:var(--r);
        }
    }

    /* ---------------- ورود هنگام اسکرول ---------------- */
    .article-grid > *:nth-child(4n+2){--i:1}
    .article-grid > *:nth-child(4n+3){--i:2}
    .article-grid > *:nth-child(4n+4){--i:3}

    @supports (animation-timeline:view()){
        @media (prefers-reduced-motion:no-preference){
            .reveal{
                animation:reveal-in linear both;
                animation-timeline:view();
                animation-range:entry calc(4% + var(--i,0) * 5%) cover calc(26% + var(--i,0) * 5%);
            }
        }
    }
    @keyframes reveal-in{
        /* ⚠️ فقط جابه‌جایی، بدون محوشدگی: اگر مرورگر یا خزنده‌ای خط زمانی
           اسکرول را جلو نبرد، کارت همچنان دیده می‌شود. */
        from{transform:translateY(22px) scale(.98)}
        to{transform:none}
    }

    /* ---------------- صفحه‌بندی ---------------- */
    .pager{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin-block-start:2.5rem}
    .pager .page-numbers{
        display:inline-grid;place-items:center;min-inline-size:2.5rem;block-size:2.5rem;padding-inline:.7rem;
        border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);
        font-size:var(--fs-sm);font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums;
        transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);
    }
    .pager a.page-numbers:hover{border-color:var(--accent);color:var(--accent-text)}
    .pager .page-numbers.current{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
    .pager .page-numbers.dots{border-color:transparent;background:none}

    /* ---------------- حالت خالی ---------------- */
    .empty-state{
        display:grid;place-items:center;gap:.7rem;
        padding:clamp(3rem,2rem + 5vw,5.5rem) 1rem;text-align:center;
        border:1px dashed var(--line);border-radius:var(--r);background:var(--surface);
    }
    .empty-state > .ico{inline-size:2.4rem;block-size:2.4rem;color:var(--accent-text);stroke-width:1.4}
    .empty-state h1,.empty-state h2{font-size:var(--fs-lg)}
    .empty-state p{color:var(--muted);font-size:var(--fs-sm);max-inline-size:30rem}
    .empty-state__code{
        font-size:clamp(3.4rem,2rem + 8vw,6rem);font-weight:800;line-height:1;
        color:var(--accent-300);direction:ltr;font-variant-numeric:tabular-nums;
    }

    /* ---------------- فوتر ---------------- */
    .site-footer{
        margin-block-start:var(--block);border-block-start:1px solid var(--line);
        background:var(--bg-2);padding-block:var(--block) 1.6rem;
    }
    .footer-top{
        display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-m);flex-wrap:wrap;
        padding-block-end:var(--space-m);margin-block-end:var(--space-m);border-block-end:1px solid var(--line);
    }
    .footer-brand{display:flex;align-items:flex-start;gap:.7rem;max-inline-size:34rem}
    .footer-brand strong{display:block;font-size:var(--fs-lg);font-weight:700;color:var(--ink);line-height:1.7}
    .footer-brand p{font-size:var(--fs-sm);color:var(--muted);line-height:1.9;margin-block-start:.15rem}
    .footer-social{display:flex;gap:.4rem;flex-wrap:wrap}

    .footer-grid{
        display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
        gap:clamp(1.6rem,1rem + 3vw,3.5rem);margin-block-end:2.5rem;
    }
    .footer-col h2{font-size:var(--fs-sm);font-weight:800;margin-block-end:1rem;color:var(--ink)}
    .footer-col ul{display:flex;flex-direction:column;gap:.6rem;list-style:none}
    .footer-col a,.footer-col li{font-size:var(--fs-sm);color:var(--muted);line-height:1.9}
    .footer-col a:hover{color:var(--accent-text)}
    .footer-trust li{display:flex;align-items:flex-start;gap:.5rem}
    .footer-ico{flex:none;inline-size:1rem;block-size:1rem;margin-block-start:.42rem;color:var(--accent-text)}
    .footer-badges{display:flex;flex-wrap:wrap;gap:.8rem}
    .footer-badges img{max-block-size:5.5rem;border-radius:var(--r-xs)}
    .footer-bottom{
        display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
        padding-block-start:1.5rem;border-block-start:1px solid var(--line);
        font-size:var(--fs-xs);color:var(--muted);
    }
    .footer-bottom .ltr{font-size:clamp(1.5rem,1rem + 2.4vw,2.3rem);font-weight:800;line-height:1;color:var(--muted)}

    /* ---------------- جستجوی فوری ---------------- */
    .palette{
        inline-size:min(100% - 2rem,38rem);max-block-size:min(80dvh,34rem);
        margin-inline:auto;margin-block:12dvh auto;padding:0;overflow:hidden;
        border:1px solid var(--line-2);border-radius:var(--r-lg);
        background:var(--surface);color:var(--ink);box-shadow:var(--shadow-3);
    }
    .palette[open]{display:flex;flex-direction:column;animation:palette-in var(--dur-2) var(--ease)}
    .palette::backdrop{background:rgba(10,12,18,.55);backdrop-filter:blur(6px)}
    @keyframes palette-in{from{opacity:0;transform:translateY(-.6rem) scale(.98)}to{opacity:1;transform:none}}

    .palette__form{
        display:flex;align-items:center;gap:.7rem;padding-block:.9rem;padding-inline:1.1rem;
        border-block-end:1px solid var(--line);
    }
    .palette__form .ico{color:var(--muted)}
    .palette__input{flex:1;min-inline-size:0;border:0;background:none;font-size:1.02rem;color:var(--ink)}
    .palette__input:focus{outline:none}
    .palette__input::-webkit-search-cancel-button{display:none}
    .palette__close kbd,.palette kbd{
        font-family:var(--mono);font-size:.7rem;padding:.15rem .45rem;border-radius:.3rem;
        border:1px solid var(--line-2);color:var(--muted);background:var(--surface-2);
    }
    .palette__list{overflow-y:auto;padding:.4rem;display:flex;flex-direction:column;gap:.15rem}
    .palette__list:empty{display:none}
    .palette__item{
        display:flex;flex-direction:column;gap:.1rem;padding-block:.6rem;padding-inline:.8rem;
        border-radius:var(--r-sm);border-inline-start:2px solid transparent;
    }
    .palette__item strong{font-size:.93rem;line-height:1.8;color:var(--ink)}
    .palette__item span{font-size:.74rem;color:var(--muted)}
    .palette__item:hover,.palette__item[aria-selected="true"]{
        background:var(--accent-050);border-inline-start-color:var(--accent);
    }
    .palette__hint{padding:1rem 1.2rem;font-size:var(--fs-sm);color:var(--muted)}

    /* ---------------- برگشت به بالا ---------------- */
    .to-top{
        position:fixed;inset-inline-end:1.1rem;inset-block-end:1.1rem;z-index:55;
        background:var(--surface);border-color:var(--line);box-shadow:var(--shadow-2);
        opacity:0;pointer-events:none;transform:translateY(.5rem);
        transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease);
    }
    .to-top[data-show="1"]{opacity:1;pointer-events:auto;transform:none}
    @media (max-width:860px){
        .to-top{inset-block-end:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px) + .8rem)}
        /* دکمه‌ی دستیار هم همین گوشه است: «بالا» روی آن می‌نشیند، نه زیرش */
        body:has(.di9as-btn) .to-top{inset-block-end:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px) + 4.3rem)}
    }

    [data-fx="soft"] body::before{opacity:calc(var(--noise-op) / 2)}
    [data-fx="off"] body{background-image:none}
    [data-fx="off"] body::before{display:none}
    [data-fx="off"] .reveal{animation:none;transform:none}
}

/* ============================================================
   مقاله
   ============================================================ */
@layer article{

    /* ---------- نوار پیشرفت مطالعه: بدون جاوااسکریپت ---------- */
    .read-bar{display:none}
    @supports (animation-timeline:scroll()){
        @media (prefers-reduced-motion:no-preference){
            .read-bar{
                display:block;position:fixed;inset-block-start:0;inset-inline:0;z-index:70;
                block-size:3px;background:var(--accent);
                transform:scaleX(0);transform-origin:100% 50%;
                animation:read-bar linear;animation-timeline:scroll(root block);
            }
        }
    }
    @keyframes read-bar{to{transform:scaleX(1)}}
    [data-fx="off"] .read-bar{display:none}

    /* ---------- سربرگ ---------- */
    .article-head{max-inline-size:56rem;margin-inline:auto;padding-block:.6rem 1.4rem}
    .article-head h1{font-size:clamp(1.5rem,4vw,2.2rem);line-height:1.65;margin-block:.7rem .5rem}
    .article-lead{color:var(--ink-2);font-size:1.02rem;line-height:2;max-inline-size:65ch}
    .article-meta{
        display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center;
        font-size:.84rem;color:var(--muted);margin-block-start:1rem;
    }
    .article-meta__item{display:inline-flex;align-items:center;gap:.35rem}
    .article-meta .ico{inline-size:.95rem;block-size:.95rem}
    .article-meta a{color:var(--ink-2);font-weight:600}
    .article-meta a:hover{color:var(--accent-text)}

    .avatar{
        display:inline-grid;place-items:center;flex:none;
        inline-size:1.9rem;block-size:1.9rem;border-radius:var(--r-full);
        background:var(--accent-100);color:var(--accent-text);
        font-size:.8rem;font-weight:800;border:1px solid var(--accent-200);
    }
    .avatar--lg{inline-size:3.4rem;block-size:3.4rem;font-size:1.3rem}

    .article-cover{
        max-inline-size:56rem;margin-inline:auto;margin-block-end:2rem;
        border-radius:1rem;overflow:hidden;border:1px solid var(--line);background:var(--bg-2);
    }
    .article-cover img{inline-size:100%;block-size:auto;display:block}

    /* ---------- ابزارهای خواندن ---------- */
    .article-tools{display:flex;flex-wrap:wrap;gap:.5rem;margin-block-start:1rem}
    .tool-btn{
        display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;list-style:none;
        padding-block:.35rem;padding-inline:.75rem;border-radius:var(--r-full);
        border:1px solid var(--line);background:var(--surface);
        font-size:var(--fs-xs);font-weight:600;color:var(--ink-2);
        transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
    }
    .tool-btn::-webkit-details-marker{display:none}
    .tool-btn:hover{border-color:var(--accent);color:var(--accent-text)}
    .tool-btn .ico{inline-size:.95rem;block-size:.95rem}
    .tool-menu{position:relative}
    .tool-menu__list{
        position:absolute;inset-block-start:calc(100% + .4rem);inset-inline-start:0;z-index:20;
        min-inline-size:11rem;padding:.35rem;display:flex;flex-direction:column;
        background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
        box-shadow:var(--shadow-3);
    }
    .tool-menu__list a{
        padding-block:.45rem;padding-inline:.7rem;border-radius:var(--r-xs);
        font-size:var(--fs-sm);color:var(--ink-2);direction:ltr;text-align:start;
    }
    .tool-menu__list a:hover{background:var(--accent-050);color:var(--accent-text)}

    /* ---------- چیدمان: متن + فهرست مطالب ---------- */
    .article-wrap{
        display:grid;gap:2.2rem;align-items:start;
        grid-template-columns:minmax(0,1fr);max-inline-size:70rem;margin-inline:auto;
    }
    .article-main{min-inline-size:0}

    @media (min-width:64rem){
        .article-wrap--toc{grid-template-columns:minmax(0,1fr) 16rem}
        .article-toc{position:sticky;inset-block-start:5.4rem;order:2;
            max-block-size:calc(100dvh - 7rem);overflow-y:auto;scrollbar-width:thin}
        .article-main{order:1}
    }

    .article-toc{
        background:var(--surface);border:1px solid var(--line);
        border-radius:var(--r);padding:1rem 1.1rem;
    }
    .article-toc summary{
        display:flex;align-items:center;justify-content:space-between;gap:.5rem;
        font-size:.88rem;font-weight:700;color:var(--muted);cursor:pointer;list-style:none;
    }
    .article-toc summary::-webkit-details-marker{display:none}
    .article-toc summary .ico{inline-size:1rem;block-size:1rem;transition:transform var(--dur-1) var(--ease)}
    .article-toc[open] summary .ico{transform:rotate(180deg)}
    .article-toc ol{list-style:none;display:flex;flex-direction:column;gap:.15rem;margin-block-start:.6rem}
    .article-toc a{
        display:block;padding-block:.32rem;padding-inline:.55rem;
        font-size:.85rem;color:var(--ink-2);line-height:1.8;border-radius:var(--r-xs);
        border-inline-start:2px solid transparent;
        transition:color var(--dur-1) var(--ease),background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);
    }
    .article-toc a:hover,.article-toc a[aria-current="true"]{
        color:var(--accent-text);background:var(--accent-050);border-inline-start-color:var(--accent);
    }
    .article-toc .toc-level-3 a{padding-inline-start:1.3rem;font-size:.82rem}

    @media (min-width:64rem){
        /* روی دسکتاپ فهرست همیشه باز است و فلش معنایی ندارد */
        .article-toc summary{cursor:default;pointer-events:none}
        .article-toc summary .ico{display:none}
    }

    /* ---------- 🔴 متن مقاله ----------
       عرض خط عمداً محدود است: خط بلند در فارسی خواندن را سخت می‌کند. */
    .article-body{max-inline-size:74ch;font-size:1.02rem;line-height:2.05;color:var(--ink-2);
        overflow-wrap:break-word}
    .article-body > * + *{margin-block-start:1.15rem}
    .article-body p{line-height:2.05}
    .article-body strong{color:var(--ink);font-weight:700}

    .article-body h2,.article-body h3,.article-body h4{
        color:var(--ink);line-height:1.7;scroll-margin-block-start:5.4rem;position:relative;
    }
    .article-body h2{font-size:1.35rem;margin-block-start:2.4rem;padding-inline-start:.9rem}
    .article-body h2::before{
        content:"";position:absolute;inset-block:.28em .22em;inset-inline-start:0;
        inline-size:3px;border-radius:3px;background:var(--accent);
    }
    .article-body h3{font-size:1.12rem;margin-block-start:1.8rem}
    .article-body h4{font-size:1rem;margin-block-start:1.5rem}

    /* لنگر عنوان: با هاور پیدا می‌شود تا بشود به یک بخش لینک داد */
    .heading-anchor{
        margin-inline-start:.4rem;color:var(--muted);opacity:0;text-decoration:none !important;
        font-weight:400;transition:opacity var(--dur-1) var(--ease);
    }
    .article-body :is(h2,h3):hover .heading-anchor,.heading-anchor:focus-visible{opacity:1}

    .article-body a{
        color:var(--accent-text);text-decoration:underline;
        text-underline-offset:.25em;text-decoration-thickness:1px;
    }
    .article-body a:hover{text-decoration-thickness:2px}

    .article-body ul,.article-body ol{padding-inline-start:1.4rem;display:flex;flex-direction:column;gap:.5rem}
    .article-body li{line-height:2}
    .article-body ul{list-style:disc}
    .article-body ol{list-style:persian}
    .article-body li::marker{color:var(--accent-text);font-weight:700}
    .article-body li > ul,.article-body li > ol{margin-block-start:.5rem}

    .article-body blockquote{
        border-inline-start:3px solid var(--accent);padding:.7rem 1rem;
        color:var(--ink);background:var(--surface);border-radius:.5rem;margin-inline:0;
    }
    .article-body blockquote > * + *{margin-block-start:.6rem}
    .article-body blockquote cite{display:block;font-size:var(--fs-xs);color:var(--muted);font-style:normal}

    .article-body hr{border:0;block-size:1px;background:var(--line);margin-block:2rem}

    /* ⚠️ کد همیشه چپ‌به‌راست؛ وگرنه پرانتز و نقطه‌ویرگول جابه‌جا می‌افتند */
    .article-body code{
        direction:ltr;unicode-bidi:isolate;font-family:var(--mono);
        font-size:.87em;background:var(--surface-2);padding:.12em .4em;border-radius:.35rem;
        border:1px solid var(--line);
    }
    .article-body pre{
        direction:ltr;text-align:left;background:var(--code-bg);color:var(--code-ink);
        border:1px solid var(--line);border-radius:.75rem;padding:1rem 1.1rem;
        overflow-x:auto;max-inline-size:100%;tab-size:4;
    }
    .article-body pre code{
        background:none;border:0;padding:0;font-size:.85rem;line-height:1.9;
        white-space:pre;display:block;
    }

    /* پرامپت متن فارسی است، نه کد: راست‌چین، با فونت متن و شکستن خط */
    .article-body pre.language-prompt{
        direction:rtl;text-align:right;white-space:pre-wrap;
        background:var(--accent-050);border-color:var(--accent-200);
    }
    .article-body pre.language-prompt code{
        direction:rtl;unicode-bidi:plaintext;white-space:pre-wrap;
        font-family:var(--font);font-size:.93rem;line-height:2;
    }

    /* قاب بلوک کد: نام زبان و دکمه‌ی کپی را اسکریپت قالب اضافه می‌کند */
    .code-block{position:relative;direction:ltr}
    .code-block pre{margin:0;border-start-start-radius:0;border-start-end-radius:0}
    .code-block__bar{
        display:flex;align-items:center;justify-content:space-between;gap:.5rem;
        padding-block:.3rem;padding-inline:1rem .4rem;
        background:var(--surface-2);border:1px solid var(--line);border-block-end:0;
        border-start-start-radius:.75rem;border-start-end-radius:.75rem;
        font-family:var(--mono);font-size:.72rem;color:var(--muted);
    }
    .code-block__copy{
        font-family:var(--font);font-size:.74rem;font-weight:600;color:var(--ink-2);
        padding-block:.25rem;padding-inline:.6rem;border-radius:var(--r-xs);
        transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
    }
    .code-block__copy:hover{background:var(--line);color:var(--ink)}
    .code-block__copy[data-done="1"]{color:var(--ok)}

    /* جدول روی موبایل به‌جای شکستن صفحه، خودش اسکرول می‌گیرد */
    .article-body .wp-block-table,.article-body .table-scroll{
        overflow-x:auto;border:1px solid var(--line);border-radius:.75rem;max-inline-size:100%;
    }
    .article-body table{inline-size:100%;border-collapse:collapse;font-size:.9rem;min-inline-size:32rem;
        font-variant-numeric:tabular-nums}
    .article-body th,.article-body td{
        padding:.7rem .9rem;text-align:start;border-block-end:1px solid var(--line);vertical-align:top;
    }
    .article-body th{background:var(--surface);color:var(--ink);font-weight:700;white-space:nowrap}
    .article-body tbody tr:last-child td{border-block-end:0}
    .article-body tbody tr:hover td{background:var(--surface)}
    .article-body .wp-block-table figcaption{padding:.6rem .9rem;border-block-start:1px solid var(--line)}

    .article-body figure{margin-block:1.6rem;margin-inline:0}
    .article-body .wp-block-image img,.article-figure img{
        inline-size:100%;block-size:auto;border-radius:.75rem;
        border:1px solid var(--line);display:block;background:#fff;
    }
    .article-body figcaption{
        font-size:.82rem;color:var(--muted);text-align:center;margin-block-start:.6rem;
    }

    /* ---------- بلوک‌های هسته که ممکن است در ویرایشگر استفاده شوند ---------- */
    .article-body .has-text-align-center{text-align:center}
    .article-body .has-text-align-left{text-align:left}
    .article-body .has-text-align-right{text-align:right}
    .article-body .aligncenter{margin-inline:auto}
    .article-body .wp-block-buttons{display:flex;flex-wrap:wrap;gap:.6rem}
    .article-body .wp-block-button__link{
        display:inline-flex;align-items:center;min-block-size:2.75rem;padding-inline:1.4rem;
        border-radius:var(--r-full);background:var(--accent);color:var(--accent-ink);
        font-weight:700;font-size:var(--fs-sm);text-decoration:none;
    }
    .article-body .wp-block-columns{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
    .article-body .wp-block-embed iframe,.article-body video{inline-size:100%;border-radius:.75rem}
    .article-body details{border:1px solid var(--line);border-radius:.75rem;background:var(--surface);padding:.85rem 1rem}
    .article-body details summary{cursor:pointer;font-weight:700}
    .article-body kbd{
        font-family:var(--mono);font-size:.82em;padding:.1em .45em;border-radius:.3rem;
        border:1px solid var(--line-2);border-block-end-width:2px;background:var(--surface);
        direction:ltr;unicode-bidi:isolate;
    }
    .article-body mark{background:var(--accent-100);color:var(--ink);padding-inline:.2em;border-radius:.2rem}

    /* ---------- کادر توجه ----------
       کلاس‌های is-style-* روی بلوک «نقل‌قول»: نکته، هشدار، خطر */
    .article-body blockquote:is(.is-style-tip,.is-style-warn,.is-style-danger){
        border-inline-start-width:3px;padding:.85rem 1rem;
    }
    .article-body blockquote.is-style-tip{border-inline-start-color:var(--ok);background:color-mix(in oklab,var(--ok) 9%,var(--surface))}
    .article-body blockquote.is-style-warn{border-inline-start-color:var(--accent);background:var(--accent-050)}
    .article-body blockquote.is-style-danger{border-inline-start-color:var(--err);background:color-mix(in oklab,var(--err) 9%,var(--surface))}

    /* ---------- فهرست مقاله‌های مجموعه ---------- */
    .series-box{
        border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
        padding:1rem 1.2rem;margin-block:1.6rem;
    }
    .series-box__count{font-size:var(--fs-xs);color:var(--muted);margin-block-end:.6rem}
    .article-body .series-list{list-style:none;padding:0;counter-reset:series;gap:0}
    .article-body .series-list li{
        counter-increment:series;display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
        padding-block:.55rem;border-block-end:1px dashed var(--line);line-height:1.9;
    }
    .article-body .series-list li:last-child{border-block-end:0}
    .article-body .series-list li::before{
        content:counter(series,persian);flex:none;display:inline-grid;place-items:center;
        inline-size:1.7rem;block-size:1.7rem;border-radius:var(--r-full);
        background:var(--accent-100);color:var(--accent-text);font-size:.8rem;font-weight:800;
    }
    .article-body .series-list li.is-ready a{font-weight:600;text-decoration:none}
    .article-body .series-list li.is-ready a:hover{text-decoration:underline}
    .article-body .series-list li.is-soon{color:var(--muted)}
    .article-body .series-list li.is-soon::before{background:var(--surface-2);color:var(--muted)}
    .series-soon{
        font-size:.7rem;font-weight:700;padding:.05rem .5rem;border-radius:var(--r-full);
        border:1px solid var(--line);color:var(--muted);
    }

    /* ---------- پرسش‌های متداول ---------- */
    .article-faq{margin-block-start:2.6rem;max-inline-size:74ch}
    .article-faq h2{font-size:1.3rem;margin-block-end:1rem}
    .faq-item{border:1px solid var(--line);border-radius:.75rem;background:var(--surface);margin-block-end:.6rem;
        transition:border-color var(--dur-1) var(--ease)}
    .faq-item[open]{border-color:var(--accent-300)}
    .faq-item summary{
        display:flex;align-items:center;justify-content:space-between;gap:.8rem;
        padding:.85rem 1rem;cursor:pointer;font-weight:700;font-size:.95rem;list-style:none;
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary:hover{color:var(--accent-text)}
    .faq-item summary .ico{inline-size:1rem;block-size:1rem;color:var(--muted);transition:transform var(--dur-1) var(--ease)}
    .faq-item[open] summary .ico{transform:rotate(180deg)}
    .faq-item p{padding:0 1rem 1rem;color:var(--ink-2);line-height:2}

    /* ---------- برچسب و هم‌رسانی ---------- */
    .article-tags{margin-block-start:2rem}
    .article-share{
        display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;
        margin-block-start:1.6rem;padding-block-start:1.2rem;border-block-start:1px solid var(--line);
        font-size:.86rem;color:var(--muted);max-inline-size:74ch;
    }
    .article-share a,.share-copy{
        display:inline-flex;align-items:center;gap:.4rem;
        padding-block:.45rem;padding-inline:.9rem;border:1px solid var(--line);border-radius:var(--r-full);
        color:var(--ink-2);background:var(--surface);font-size:.84rem;
        transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
    }
    .article-share a:hover,.share-copy:hover{border-color:var(--accent);color:var(--accent-text)}
    .article-share .ico{inline-size:.95rem;block-size:.95rem}

    /* ---------- محصول مرتبط: تنها جای مقاله که فروش اتفاق می‌افتد ---------- */
    .related-product{
        display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
        margin-block-start:2.6rem;padding:1.4rem;max-inline-size:74ch;
        border:1px solid var(--accent-300);border-radius:var(--r);background:var(--accent-050);
    }
    .related-product__label{font-size:.75rem;color:var(--accent-text);font-weight:700}
    .related-product h2{font-size:1.1rem;margin-block:.35rem}
    .related-product p{font-size:.87rem;color:var(--ink-2);max-inline-size:48ch;line-height:1.95}

    /* ---------- نویسنده ---------- */
    .author-box{
        display:flex;gap:1rem;align-items:flex-start;margin-block-start:2rem;padding:1.2rem;
        border:1px solid var(--line);border-radius:var(--r);background:var(--surface);max-inline-size:74ch;
    }
    .author-box__label{font-size:.75rem;color:var(--muted)}
    .author-box strong{display:block;font-size:1rem;color:var(--ink)}
    .author-box p{font-size:.87rem;color:var(--ink-2);line-height:1.95;margin-block-start:.2rem}

    /* ---------- مقاله‌ی قبلی و بعدی ---------- */
    .post-nav{
        display:grid;gap:var(--gap);margin-block-start:2rem;max-inline-size:74ch;
        grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
    }
    .post-nav a{
        display:flex;flex-direction:column;gap:.2rem;padding:1rem 1.1rem;
        border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
        transition:border-color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease);
    }
    .post-nav a:hover{border-color:var(--accent-300);transform:translateY(-2px);color:var(--ink)}
    .post-nav span{font-size:.75rem;color:var(--muted)}
    .post-nav strong{font-size:.9rem;line-height:1.8;
        display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .post-nav__next{text-align:end}
}

/* ---------------- چاپ ---------------- */
@media print{
    .site-header,.site-footer,.tabbar,.article-toc,.article-share,.read-bar,.to-top,
    .post-nav,.related-posts,.code-block__bar,.skip-link{display:none !important}
    body{background:#fff !important;color:#000;padding:0}
    body::before{display:none}
    .article-body{max-inline-size:none;color:#000}
    .article-body pre{white-space:pre-wrap;border:1px solid #999}
    .article-body a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;direction:ltr;unicode-bidi:isolate}
    .faq-item{break-inside:avoid}
}

/* دکمه‌ی «منبع ترجیحی گوگل» (di9_preferred_source_button) */
.gsource{display:flex;align-items:center;gap:.9rem;margin-block:1.6rem;padding:.9rem 1.1rem;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-1)}
.gsource__g{flex:none;inline-size:2.2rem;block-size:2.2rem}
.gsource__text{flex:1;min-inline-size:0;display:flex;flex-direction:column;gap:.15rem;line-height:1.8}
.gsource__text span{color:var(--muted);font-size:.86rem}
.gsource > .btn{flex:none}
@media (max-width:600px){.gsource{flex-wrap:wrap}.gsource > .btn{inline-size:100%;justify-content:center}}
.gsource--compact{display:inline-flex;align-items:center;gap:.35rem;margin:0;padding-block:.25rem;box-shadow:none}
.gsource--compact .gsource__g{inline-size:1rem;block-size:1rem}