.article-content {
    --ac-navy: #070d30;
    --ac-royal: #002796;
    --ac-azure: #0060ff;
    --ac-skyx: #0086ff;
    --ac-violetx: #7f44bc;
    --ac-pinkx: #fa297c;
    --ac-amberx: #fea100;
    --ac-emerald: #10b981;
    --ac-dusk: #576896;
    --ac-steel: #7e90b7;
    --ac-cloud: #d3dcf1;
    --ac-mist: #f1f5fd;
    --ac-snow: #f9fbfe;
    --ac-mono: "JetBrains Mono", "Fira Code", "Courier New", monospace;

    color: #46598f;
    font-size: 1.02rem;
    line-height: 2.05;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.article-content > * + * { margin-top: 1.15rem; }
.article-content p:empty { display: none; }
.article-content ::selection { background: rgba(0, 96, 255, .16); }

.article-content > p:first-of-type {
    font-size: 1.08rem;
    font-weight: 500;
    color: var(--ac-dusk);
    line-height: 2.15;
}

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4 { scroll-margin-top: 7.5rem; }

.article-content h1 {
    font-size: 1.7rem;
    font-weight: 900;
    line-height: 1.7;
    color: var(--ac-navy);
    margin-top: 2.6rem;
}
.article-content h2 {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: 1.42rem;
    font-weight: 800;
    line-height: 1.8;
    color: var(--ac-navy);
    margin-top: 2.7rem;
}
.article-content h2::before {
    content: "";
    flex: 0 0 auto;
    width: .38rem;
    height: 1.35em;
    min-height: 1.55rem;
    border-radius: 99px;
    background: linear-gradient(180deg, var(--ac-azure), var(--ac-skyx));
}
.article-content h3 {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.18rem;
    font-weight: 800;
    line-height: 1.9;
    color: var(--ac-navy);
    margin-top: 2.1rem;
}
.article-content h3::before {
    content: "";
    flex: 0 0 auto;
    width: .55rem;
    height: .55rem;
    border-radius: .18rem;
    background: var(--ac-azure);
    transform: rotate(45deg);
}
.article-content h4 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ac-royal);
    margin-top: 1.7rem;
}

.article-content a {
    color: var(--ac-azure);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1.5px dashed rgba(0, 96, 255, .45);
    padding: 0 .1rem;
    transition: color .2s, border-color .2s;
}
.article-content a:hover {
    color: var(--ac-skyx);
    border-bottom-style: solid;
    border-bottom-color: var(--ac-skyx);
}
.article-content a:focus-visible {
    outline: 2px solid var(--ac-azure);
    outline-offset: 3px;
    border-radius: 4px;
}

.article-content strong { font-weight: 800; color: var(--ac-navy); }
.article-content em { font-style: italic; color: var(--ac-violetx); }
.article-content mark {
    background: rgba(254, 161, 0, .18);
    color: #8a5a00;
    padding: .05rem .45rem;
    border-radius: .4rem;
    font-weight: 600;
}
.article-content del,
.article-content s { color: var(--ac-steel); }

.article-content ul { list-style: disc; padding-inline-start: 1.45rem; }
.article-content ol { list-style: decimal; padding-inline-start: 1.65rem; }
.article-content ul li::marker { color: var(--ac-azure); }
.article-content ol li::marker { color: var(--ac-azure); font-weight: 800; }
.article-content li { margin-top: .55rem; }
.article-content li > ul,
.article-content li > ol { margin-top: .55rem; }
.article-content li p { margin: 0; }

.article-content blockquote {
    position: relative;
    margin: 2rem 0;
    padding: 1.2rem 1.6rem;
    background: linear-gradient(135deg, rgba(0, 96, 255, .07), rgba(0, 134, 255, .02));
    border-inline-start: 4px solid var(--ac-azure);
    border-radius: 1rem;
    color: var(--ac-dusk);
    font-weight: 500;
}
.article-content blockquote::before {
    content: "»";
    position: absolute;
    top: .2rem;
    right: ;
    inset-inline-end: .9rem;
    font-size: 2.3rem;
    font-weight: 900;
    line-height: 1;
    color: rgba(0, 96, 255, .16);
    pointer-events: none;
}
.article-content blockquote p { margin: 0; }
.article-content blockquote cite {
    display: block;
    margin-top: .6rem;
    font-size: .85rem;
    font-style: normal;
    color: var(--ac-steel);
}

.article-content code {
    direction: ltr;
    unicode-bidi: embed;
    font-family: var(--ac-mono);
    font-size: .85em;
    background: var(--ac-mist);
    border: 1px solid var(--ac-cloud);
    color: var(--ac-royal);
    padding: .12rem .45rem;
    border-radius: .45rem;
}
.article-content pre {
    direction: ltr;
    text-align: left;
    background: #0b1233;
    color: #dbe4ff;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 1.1rem;
    padding: 1.25rem 1.4rem;
    overflow-x: auto;
    line-height: 1.85;
    font-size: .86rem;
    margin: 1.8rem 0;
}
.article-content pre code {
    background: none;
    border: none;
    color: inherit;
    padding: 0;
    font-size: inherit;
    white-space: pre;
}
.article-content pre::-webkit-scrollbar { height: 6px; }
.article-content pre::-webkit-scrollbar-thumb { background: #2a3763; border-radius: 99px; }

.article-content .table-responsive {
    overflow-x: auto;
    margin: 2rem 0;
    border-radius: 1rem;
}
.article-content .table-responsive table { margin: 0; min-width: 560px; }
.article-content table {
    width: 100%;
    margin: 2rem 0;
    font-size: .92rem;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--ac-cloud);
    border-radius: 1rem;
    overflow: hidden;
}
.article-content thead th {
    background: var(--ac-mist);
    color: var(--ac-navy);
    font-weight: 800;
    font-size: .85rem;
    padding: .8rem 1rem;
    text-align: right;
    border-bottom: 2px solid var(--ac-cloud);
    white-space: nowrap;
}
.article-content td {
    padding: .75rem 1rem;
    border-top: 1px solid #e6ecf8;
    color: var(--ac-dusk);
}
.article-content tbody tr:nth-child(even) { background: var(--ac-snow); }
.article-content tbody tr:hover { background: rgba(0, 96, 255, .04); }

.article-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.7rem auto;
    border-radius: 1.1rem;
    border: 1px solid var(--ac-cloud);
}
.article-content figure { margin: 2.2rem 0; text-align: center; }
.article-content figure img { margin: 0 auto .8rem; }
.article-content figcaption {
    font-size: .8rem;
    line-height: 1.8;
    color: var(--ac-steel);
    text-align: center;
}

.article-content iframe {
    max-width: 100%;
    border: none;
    border-radius: 1rem;
    aspect-ratio: 16 / 9;
}

.article-content hr {
    border: none;
    height: 1px;
    max-width: 70%;
    margin: 3rem auto;
    background: linear-gradient(to left, transparent, var(--ac-cloud) 20%, var(--ac-cloud) 80%, transparent);
}

   نمونه:
   <div class="callout callout-info"><div class="callout-icon">💡</div><div>متن نکته…</div></div>
   ─── */
.article-content .callout {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: 1rem 1.2rem;
    margin: 1.8rem 0;
    border-radius: 1rem;
    border: 1px solid;
    font-size: .95rem;
    line-height: 1.95;
}
.article-content .callout p { margin: 0; }
.article-content .callout-icon {
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    display: grid;
    place-items: center;
    border-radius: .65rem;
    font-size: 1rem;
}
.article-content .callout-info    { background: rgba(0, 134, 255, .06); border-color: rgba(0, 134, 255, .25); color: #1c4b8f; }
.article-content .callout-success { background: rgba(16, 185, 129, .07); border-color: rgba(16, 185, 129, .28); color: #0c6b4f; }
.article-content .callout-warning { background: rgba(254, 161, 0, .08);  border-color: rgba(254, 161, 0, .30);  color: #8a5300; }
.article-content .callout-danger  { background: rgba(250, 41, 124, .06); border-color: rgba(250, 41, 124, .25); color: #a3134f; }
.article-content .callout-info    .callout-icon { background: rgba(0, 134, 255, .15);  color: var(--ac-azure); }
.article-content .callout-success .callout-icon { background: rgba(16, 185, 129, .15); color: var(--ac-emerald); }
.article-content .callout-warning .callout-icon { background: rgba(254, 161, 0, .16);  color: var(--ac-amberx); }
.article-content .callout-danger  .callout-icon { background: rgba(250, 41, 124, .13); color: var(--ac-pinkx); }

@media (max-width: 640px) {
    .article-content { font-size: .95rem; line-height: 2; }
    .article-content h1 { font-size: 1.45rem; }
    .article-content h2 { font-size: 1.22rem; }
    .article-content h3 { font-size: 1.08rem; }
    .article-content pre { font-size: .78rem; padding: 1rem; border-radius: .9rem; }
    .article-content blockquote { padding: 1rem 1.2rem; }
}