/* ==========================================================================
   ساسان کلینیک · مجله‌ی سلامت
   ۱. صفحه‌ی هر مقاله (article-….html): سربرگ، عکس اصلی، فهرست مطالب چسبان، متن، نمودارهای متحرک، سؤال‌ها، دعوت و مقاله‌های مرتبط
   ۲. فهرست همه‌ی مقاله‌ها (articles.html): مقاله‌های برگزیده، فیلتر بخش‌ها و کارت‌ها
   حرکت‌ها فقط transform و opacity اند؛ بدون اسکریپت یا با «کاهش حرکت» همه‌چیز کامل و ثابت دیده می‌شود.
   ========================================================================== */

.ap, .ac, .ap-side__cta, .ap-cta { --tone: #1E5EEB; --tone-bg: #EAF1FF; --tone-ink: #123A9E; }
[data-k="dental"].ap, .ac[data-k="dental"], .ap-side__cta[data-k="dental"], .ap-cta[data-k="dental"] { --tone: #1673D6; --tone-bg: #E7F2FC; --tone-ink: #0D4F97; }
[data-k="beauty"].ap, .ac[data-k="beauty"], .ap-side__cta[data-k="beauty"], .ap-cta[data-k="beauty"] { --tone: #C2386B; --tone-bg: #FBEAF0; --tone-ink: #8C2452; }
[data-k="medicine"].ap, .ac[data-k="medicine"], .ap-side__cta[data-k="medicine"], .ap-cta[data-k="medicine"] { --tone: #0E8F6B; --tone-bg: #E5F5EF; --tone-ink: #0C6C53; }

.ap-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; background: var(--tone-bg, var(--blue-50)); color: var(--tone-ink, var(--blue-700)); font-family: var(--f-ui); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.ap-chip--light { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }

/* ---------- نوار پیشرفت خواندن ---------- */
.ap-prog { position: fixed; top: 0; inset-inline: 0; z-index: 90; height: 3px; pointer-events: none; }
.ap-prog i { position: absolute; inset: 0; background: linear-gradient(270deg, var(--tone), color-mix(in srgb, var(--tone) 55%, #8A6CF5)); transform-origin: 100% 50%; transform: scaleX(0); will-change: transform; }

/* ---------- سربرگ ---------- */
.ap-hero { --lap: clamp(48px, 9vh, 110px); padding-bottom: calc(clamp(40px, 6vh, 70px) + var(--lap)); }
.ap-hero__in { max-width: 980px; }
.ap-kick { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; font-family: var(--f-ui); font-size: var(--fs-label); color: rgba(217, 226, 241, .72); }
.ap-title { max-width: 24ch; font-size: clamp(1.9rem, 1.05rem + 2.7vw, 3.35rem); line-height: 1.35; }
.ap-lead { max-width: 62ch; }
.ap-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; font-family: var(--f-ui); font-size: var(--fs-label); color: rgba(217, 226, 241, .78); }
.ap-meta li { display: inline-flex; align-items: center; gap: 7px; }
.ap-meta .ic { width: 16px; height: 16px; color: #9EC5FF; }

.ap-cover-wrap { position: relative; z-index: 2; margin-top: calc(-1 * clamp(48px, 9vh, 110px)); }
.ap-cover { margin: 0; aspect-ratio: 16 / 8; overflow: hidden; border-radius: clamp(16px, 2vw, 26px); background: #DCE5EF; box-shadow: 0 40px 80px -48px rgba(6, 16, 34, .7), 0 0 0 1px rgba(13, 27, 48, .06); }
.ap-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- ستون‌ها: فهرست مطالب (کنار) و متن ---------- */
.ap-grid { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; padding-top: clamp(40px, 6vh, 64px); padding-bottom: clamp(56px, 9vh, 100px); }
.ap-main { min-width: 0; max-width: 760px; }
.ap-side { position: sticky; top: calc(var(--hdr-h) + 24px); }
.ap-side__in { display: grid; gap: 22px; }
.ap-side__h { font-family: var(--f-ui); font-size: var(--fs-label); font-weight: 700; color: var(--ink-3); }
.ap-toc { display: grid; gap: 2px; margin-top: -8px; }
.ap-toc a { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; padding: 8px 12px 8px 8px; border-radius: 10px; font-size: .9375rem; line-height: 1.7; color: var(--ink-2); text-decoration: none; transition: background-color .25s, color .25s; }
.ap-toc a span { font-family: var(--f-ui); font-size: .75rem; font-weight: 700; line-height: 2.2; color: var(--ink-3); font-variant-numeric: tabular-nums; transition: color .25s; }
.ap-toc a::before { content: ""; position: absolute; inset-inline-start: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--tone); transform: scaleY(0); transition: transform .45s var(--spring); }
.ap-toc a:hover { background: var(--mist); color: var(--ink); }
.ap-toc a[aria-current="true"] { background: var(--tone-bg); color: var(--tone-ink); font-weight: 600; }
.ap-toc a[aria-current="true"] span { color: var(--tone-ink); }
.ap-toc a[aria-current="true"]::before { transform: none; }
.ap-side__cta { display: grid; gap: 10px; padding: 18px; border-radius: 16px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--line); }
.ap-side__cta b { font-size: .9375rem; line-height: 1.8; color: var(--navy-800); }
.ap-side__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 999px; background: var(--navy-800); color: #fff; font-size: .875rem; font-weight: 700; transition: background-color .25s, transform .5s var(--spring); }
.ap-side__btn:hover { background: var(--tone); transform: translateY(-2px); }
.ap-side__btn .ic { width: 17px; height: 17px; }
.ap-side__tel { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border-radius: 999px; font-family: var(--f-ui); font-size: .875rem; font-weight: 600; color: var(--navy-800); box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color .25s; }
.ap-side__tel:hover { background: #fff; }
.ap-side__tel .ic { width: 16px; height: 16px; }

/* فهرست مطالب روی صفحه‌های باریک: جمع‌شونده، بالای متن */
.ap-tocm { display: none; margin-bottom: 26px; border-radius: 14px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--line); }
.ap-tocm summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; list-style: none; cursor: pointer; font-weight: 700; color: var(--navy-800); }
.ap-tocm summary::-webkit-details-marker { display: none; }
.ap-tocm summary .ic { width: 18px; height: 18px; color: var(--tone); }
.ap-tocm summary small { margin-inline-start: auto; font-family: var(--f-ui); font-weight: 600; color: var(--ink-3); }
.ap-tocm summary i { width: 10px; height: 10px; border-inline-end: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg) translateY(-3px); transition: transform .35s var(--spring); }
.ap-tocm[open] summary i { transform: rotate(-135deg) translateY(-3px); }
.ap-tocm .ap-toc { margin: 0; padding: 0 8px 10px; }

/* ---------- متن مقاله ---------- */
.ap-body { font-size: clamp(1.0625rem, 1.02rem + .15vw, 1.125rem); line-height: 2.15; color: var(--ink); }
.ap-body > :first-child { margin-top: 0; }
.ap-body h2 { margin-top: 60px; scroll-margin-top: calc(var(--hdr-h) + 28px); font-size: clamp(1.4rem, 1.12rem + .95vw, 1.9rem); font-weight: 800; line-height: 1.55; color: var(--navy-800); }
.ap-body h3 { margin-top: 34px; font-size: clamp(1.14rem, 1.06rem + .35vw, 1.3rem); font-weight: 800; line-height: 1.7; color: var(--navy-800); }
.ap-body p { margin-top: 16px; }
.ap-body a:not([class]) { color: var(--tone-ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--tone) 45%, transparent); text-underline-offset: 5px; transition: text-decoration-color .2s; }
.ap-body a:not([class]):hover { text-decoration-color: var(--tone); }
.ap-body ul, .ap-body ol { display: grid; gap: 10px; margin-top: 16px; }
.ap-body ul > li { position: relative; padding-inline-start: 24px; }
.ap-body ul > li::before { content: ""; position: absolute; inset-inline-start: 4px; top: .92em; width: 8px; height: 8px; border-radius: 50%; background: var(--tone); }
.ap-body ol { counter-reset: ap; }
.ap-body ol > li { position: relative; padding-inline-start: 40px; counter-increment: ap; }
.ap-body ol > li::before { content: counter(ap, persian); position: absolute; inset-inline-start: 0; top: .28em; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--tone-bg); color: var(--tone-ink); font-family: var(--f-ui); font-size: .8125rem; font-weight: 700; line-height: 1; }
.ap-body b, .ap-body strong { font-weight: 800; }
.ap-body blockquote { margin: 30px 0 0; padding: 4px 22px 4px 0; border-inline-start: 3px solid var(--tone); font-size: 1.1em; font-weight: 600; line-height: 2; color: var(--navy-800); }
.ap-body blockquote p { margin: 0; }
.ap-body blockquote cite { display: block; margin-top: 6px; font-family: var(--f-ui); font-size: .8125rem; font-style: normal; font-weight: 600; color: var(--ink-3); }

.ap-sum { margin-bottom: 34px; padding: 20px 22px 22px; border-radius: 18px; background: var(--tone-bg); }
.ap-sum__h { display: flex; align-items: center; gap: 8px; font-family: var(--f-ui); font-size: .875rem; font-weight: 700; color: var(--tone-ink); }
.ap-sum__h .ic { width: 18px; height: 18px; }
.ap-sum ul { margin-top: 10px; gap: 8px; font-size: 1rem; line-height: 2; }
.ap-sum ul > li::before { background: var(--tone); }

.ap-fig { margin: 34px 0 0; }
.ap-fig img { display: block; width: 100%; height: auto; border-radius: 16px; background: #DCE5EF; }
.ap-fig figcaption { margin-top: 10px; font-family: var(--f-ui); font-size: .8125rem; line-height: 1.9; color: var(--ink-3); }
.ap-fig--wide { margin-inline: clamp(-60px, -4vw, 0px); }
.ap-fig--portrait { max-width: 460px; margin-inline: auto; }

/* جدول مقایسه: روی صفحه‌ی باریک افقی اسکرول می‌شود */
.ap-table { margin-top: 22px; overflow-x: auto; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.ar-cmp { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .9375rem; line-height: 1.85; }
.ar-cmp th, .ar-cmp td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.ar-cmp tr:last-child > * { border-bottom: 0; }
.ar-cmp thead th { background: var(--mist); font-family: var(--f-ui); font-size: .8125rem; font-weight: 700; color: var(--navy-800); }
.ar-cmp tbody th { width: 26%; font-weight: 700; color: var(--navy-800); }

.ar-box { margin-top: 30px; padding: 18px 22px 20px; border-radius: 16px; border-inline-start: 4px solid; }
.ar-box > b { display: block; font-size: 1.0625rem; }
.ar-box p, .ar-box ul { margin-top: 8px; font-size: 1rem; line-height: 2; }
.ar-box--tip { background: var(--blue-50); border-color: var(--blue); }
.ar-box--tip > b { color: #123A9E; }
.ar-box--warn { background: #FFF5E6; border-color: #E08A00; }
.ar-box--warn > b { color: #8A5300; }
.ar-box--warn ul > li::before { background: #E08A00; }
.ar-box--ok { background: #E5F5EF; border-color: #0E8F6B; }
.ar-box--ok > b { color: #0C6C53; }
.ar-box--ok ul > li::before { background: #0E8F6B; }

/* ---------- نمودارهای متحرک (js/mg.js) ---------- */
.ap-mg { position: relative; margin: 36px 0 0; padding: clamp(18px, 3vw, 28px); border-radius: 22px; background: radial-gradient(120% 90% at 100% 0%, var(--tone-bg), #fff 62%), #fff; box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -44px rgba(6, 16, 34, .45); overflow: hidden; }
.ap-mg__h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; }
.ap-mg__t { font-size: 1.0625rem; font-weight: 800; line-height: 1.7; color: var(--navy-800); }
.ap-mg__k { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-ui); font-size: .75rem; font-weight: 700; color: var(--tone-ink); }
.ap-mg__k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tone) 18%, transparent); }
.ap-mg__cv { position: relative; margin-top: 16px; }
.ap-mg__cv svg { display: block; width: 100%; height: auto; overflow: visible; }
.ap-mg__cap { margin-top: 14px; font-family: var(--f-ui); font-size: .8125rem; line-height: 1.9; color: var(--ink-3); }
.ap-mg:not(.is-built) .ap-mg__cv { min-height: 220px; }
.mg-seg { display: inline-flex; gap: 4px; margin-top: 14px; padding: 4px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.mg-seg button { height: 36px; padding: 0 16px; border-radius: 999px; font-family: var(--f-ui); font-size: .8125rem; font-weight: 700; color: var(--ink-2); transition: background-color .3s, color .3s; }
.mg-seg button[aria-pressed="true"] { background: var(--navy-800); color: #fff; }
.mg-range { display: grid; gap: 8px; margin-top: 16px; font-family: var(--f-ui); font-size: .8125rem; color: var(--ink-2); }
.mg-range__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mg-range__row b { font-weight: 700; color: var(--navy-800); font-variant-numeric: tabular-nums; }
.mg-range input[type="range"] { width: 100%; accent-color: var(--tone); height: 28px; }
.mg-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; font-family: var(--f-ui); font-size: .75rem; color: var(--ink-2); }
.mg-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mg-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.mg-out { margin-top: 14px; padding: 12px 16px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: .9375rem; line-height: 1.9; color: var(--ink); min-height: 3.9em; }
.mg-out b { color: var(--tone-ink); }

/* ---------- نمودار: ایمپلنت، بریج و جای خالی ---------- */
.mg-ivb .ivb-gum-up { fill: #F4B7C3; }
.mg-ivb .ivb-upt { fill: url(#ivbTooth); stroke: #C9D3E1; stroke-width: 2; }
.mg-ivb .ivb-bone { stroke: #D9C29A; stroke-width: 1.5; }
.mg-ivb .ivb-gum { fill: #F2A9B7; }
.mg-ivb .ivb-root { fill: #F7EEDC; stroke: #D8C39C; stroke-width: 2; }
.mg-ivb .ivb-crown, .mg-ivb .ivb-cap { fill: url(#ivbTooth); stroke: #BFCADA; stroke-width: 2; }
.mg-ivb .ivb-prep { fill: #F0E5CF; stroke: #CDB891; stroke-width: 1.5; opacity: 0; }
.mg-ivb .ivb-loss { fill: #F6C9D2; stroke: #E59AAB; stroke-width: 1.5; stroke-dasharray: 5 5; opacity: 0; }
.mg-ivb .ivb-thread { stroke: #6E7A8E; stroke-width: 2; stroke-linecap: round; }
.mg-ivb .ivb-force path { fill: none; stroke: #1673D6; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mg-ivb .ivb-bridge { fill: rgba(255, 255, 255, .8); stroke: #0E8F6B; stroke-width: 2.5; }
.mg-ivb .ivb-joint { stroke: #0E8F6B; stroke-width: 1.5; stroke-dasharray: 3 5; opacity: .7; }
.mg-ivb .ivb-lbl { fill: var(--navy-800); }
.mg-ivb .ivb-l--gap { fill: #B4264F; }
.mg-ivb .ivb-l--imp { fill: #0D4F97; }
.mg-ivb .ivb-l--br { fill: #0C6C53; }
.is-narrow .mg-ivb .ivb-l text { display: none; }
.is-narrow .mg-ivb .ivb-l .ivb-m { display: inline; font-size: 32px; }
.mg-ivb .ivb-t, .mg-ivb .ivb-upt--m { transition: transform 1.1s cubic-bezier(.34, 1.25, .64, 1); }
.mg-ivb .ivb-loss, .mg-ivb .ivb-imp, .mg-ivb .ivb-br, .mg-ivb .ivb-l, .mg-ivb .ivb-prep, .mg-ivb .ivb-crown { transition: opacity .6s var(--ease-out); }
.mg-ivb .ivb-imp, .mg-ivb .ivb-br, .mg-ivb .ivb-l { opacity: 0; }
.mg-ivb[data-s="gap"] .ivb-t--l { transform: rotate(7deg); }
.mg-ivb[data-s="gap"] .ivb-t--r { transform: rotate(-7deg); }
.mg-ivb[data-s="gap"] .ivb-upt--m { transform: translate(0, 24px); }
.mg-ivb[data-s="gap"] .ivb-loss:not(.ivb-loss--b) { opacity: 1; }
.mg-ivb[data-s="gap"] .ivb-l--gap, .mg-ivb[data-s="implant"] .ivb-l--imp, .mg-ivb[data-s="bridge"] .ivb-l--br { opacity: 1; }
.mg-ivb[data-s="implant"] .ivb-imp { opacity: 1; }
.mg-ivb[data-s="bridge"] .ivb-br, .mg-ivb[data-s="bridge"] .ivb-loss--b { opacity: 1; }
.mg-ivb[data-s="bridge"] .ivb-crown { opacity: 0; }
.mg-ivb[data-s="bridge"] .ivb-prep { opacity: 1; }
@keyframes ivbPush { 0%, 100% { transform: translate(0, 0); opacity: .35; } 50% { transform: translate(0, 10px); opacity: 1; } }
html:not(.rm) .mg-ivb[data-s="implant"] .ivb-force { animation: ivbPush 1.6s ease-in-out 1.4s infinite; }

/* ---------- نمودار: زمان‌بندی درمان ---------- */
.mg-itl text { fill: var(--ink-2); }
.mg-itl .itl-tick line { stroke: #DCE3EC; stroke-dasharray: 3 5; }
.mg-itl .itl-tick text { fill: var(--ink-3); }
.mg-itl .itl-track { fill: #EDF1F6; }
.mg-itl .itl-bar { fill: var(--c); }
.mg-itl .itl-bar--soft { fill: color-mix(in srgb, var(--c) 42%, #fff); }
.mg-itl .itl-t { font-weight: 600; fill: var(--navy-800); }
.mg-itl .itl-name { font-size: 16px; font-weight: 800; fill: var(--navy-800); }
.is-narrow .mg-itl .itl-name { font-size: 34px; }
.is-narrow .mg-itl .itl-vis { font-size: 28px; }
.mg-itl .itl-end { font-weight: 700; fill: var(--c); }
.mg-itl .itl-vis { font-size: 12px; font-weight: 700; fill: var(--c); }
.mg-itl .itl-dot circle { fill: #fff; stroke: var(--c); stroke-width: 3; }
.mg-itl .itl-dot--end circle { fill: var(--c); }
.mg-itl .itl-dot text { font-weight: 700; fill: var(--navy-800); }
.mg-itl .itl-dot--end text { fill: var(--c); }
.mg-itl .itl-ck { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.mg-itl .itl-head line { stroke: var(--navy-800); stroke-width: 1.5; stroke-dasharray: 4 4; }
.mg-itl .itl-head circle { fill: var(--navy-800); }
/* ---------- نمودار: شاخص UV ---------- */
.mg-uv .uv-ax { stroke: #C7D1DE; stroke-width: 1.5; }
.mg-uv .uv-tk { stroke: #C7D1DE; }
.mg-uv .uv-h { fill: var(--ink-3); }
.mg-uv .uv-bl { font-weight: 700; }
.mg-uv .uv-line { fill: none; stroke: #E0453A; stroke-width: 3.5; stroke-linejoin: round; }
.is-narrow .mg-uv .uv-line { stroke-width: 6; }
.mg-uv .uv-mk__l { stroke: var(--navy-800); stroke-width: 1.5; stroke-dasharray: 4 5; }
.mg-uv .uv-mk__d { stroke: #fff; stroke-width: 3; transition: fill .3s; }
.mg-uv .uv-mk__tag rect { fill: var(--navy-800); }
.mg-uv .uv-mk__v { fill: #fff; font-weight: 700; }

/* ---------- نمودار: مقدار ضدآفتاب ---------- */
.mg-sd .sd-sun circle { fill: #FFC53D; }
.mg-sd .sd-ray path { fill: none; stroke: #8A3FC7; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.is-narrow .mg-sd .sd-ray path { stroke-width: 4; }
.mg-sd .sd-ray { opacity: 0; }
@keyframes sdBlock { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(0, var(--stop, 150px)); opacity: 0; } }
@keyframes sdPass { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translate(0, var(--go, 210px)); opacity: 0; } }
.mg-sd .sd-ray > path { animation: sdBlock 1.8s linear infinite; animation-delay: inherit; animation-play-state: paused; }
.mg-sd .sd-ray { opacity: 1; }
.mg-sd .sd-ray.is-pass > path { animation-name: sdPass; stroke: #E0453A; }
.mg-sd.is-on .sd-ray > path { animation-play-state: running; }
.mg-sd { --stop: 150px; --go: 212px; }
.is-narrow .mg-sd { --stop: 180px; --go: 262px; }
.mg-sd .sd-layer { fill: rgba(255, 255, 255, .92); stroke: #D8DEE8; stroke-width: 1.5; transition: transform .45s var(--ease-out); }
.mg-sd .sd-skin { fill: #F3C2A5; }
.mg-sd .sd-lb { fill: #8C4A2F; font-weight: 700; }
.mg-sd .sd-lb--c { fill: var(--ink-3); }
.mg-sd .sd-fg { fill: #F6D2BC; stroke: #E4B597; stroke-width: 2; }
.mg-sd .sd-nail { fill: #FBE6DA; }
.mg-sd .sd-cream rect { fill: #fff; stroke: #D8DEE8; stroke-width: 2; }
.mg-sd .sd-cream { transition: transform .45s var(--ease-out); }
.mg-sd .sd-k { fill: var(--ink-3); font-weight: 600; }
.mg-sd .sd-big { fill: var(--navy-800); font-weight: 800; }
.mg-sd .sd-pc { fill: var(--ink-2); font-weight: 600; }
.mg-sd .sd-bar { fill: #EDF1F6; }
.mg-sd .sd-bar__f { fill: #C2386B; transition: transform .45s var(--ease-out); }

/* ---------- نمودار: دسته‌ی فشار خون ---------- */
.mg-bp .bp-z { fill: var(--t); transition: fill .4s var(--ease-out); }
.mg-bp .bp-z.is-on { fill: color-mix(in srgb, var(--c) 34%, #fff); }
.mg-bp .bp-frame { stroke: #C7D1DE; stroke-width: 1.5; }
.mg-bp .bp-ax { fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.mg-bp .bp-axt { fill: var(--ink-2); font-weight: 600; }
.mg-bp .bp-dot { transition: transform .6s cubic-bezier(.34, 1.3, .64, 1); }
.mg-bp .bp-dot__h { fill: #fff; opacity: .85; }
.mg-bp .bp-dot__c { stroke: #fff; stroke-width: 3; transition: fill .3s; }
.mg-bp .bp-rk { fill: var(--ink-3); font-weight: 600; }
.mg-bp .bp-rv { fill: var(--navy-800); font-weight: 800; }
.mg-bp .bp-rc { font-weight: 800; }
.mg-seg:has(button:nth-child(5)) { flex-wrap: wrap; }
/* ---------- نمودار: وضعیت بدن هنگام اندازه‌گیری ---------- */
.mg-bpp .bpp-floor { stroke: #C7D1DE; stroke-width: 3; stroke-linecap: round; }
.mg-bpp .bpp-table { fill: #E4EAF2; stroke: #C7D1DE; stroke-width: 1.5; }
.mg-bpp .bpp-tleg, .mg-bpp .bpp-cleg { stroke: #C7D1DE; stroke-width: 6; stroke-linecap: round; }
.mg-bpp .bpp-chair { fill: #B9C4D4; }
.mg-bpp .bpp-pant { fill: none; stroke: #20345A; stroke-width: 22; stroke-linecap: round; stroke-linejoin: round; }
.mg-bpp .bpp-shoe { stroke: #0B1A33; stroke-width: 12; stroke-linecap: round; }
.mg-bpp .bpp-shirt { fill: #0E8F6B; }
.mg-bpp .bpp-skin { fill: #F2C6A8; }
.mg-bpp .bpp-hair { fill: none; stroke: #4A3426; stroke-width: 9; stroke-linecap: round; }
.mg-bpp .bpp-arm { fill: none; stroke: #F2C6A8; stroke-width: 15; stroke-linecap: round; }
.mg-bpp .bpp-sleeve { fill: none; stroke: #0E8F6B; stroke-width: 18; stroke-linecap: round; opacity: 0; transition: opacity .4s; }
.mg-bpp .bpp-cuff { fill: #1B3A66; }
.mg-bpp .bpp-bub { fill: #fff; stroke: #1673D6; stroke-width: 2; }
.mg-bpp .bpp-talk circle { fill: #1673D6; }
.mg-bpp .bpp-bl path { fill: #0E8F6B; stroke: #fff; stroke-width: 2; }
.mg-bpp .bpp-talk, .mg-bpp .bpp-bl, .mg-bpp .bpp-leg2 { opacity: 0; transition: opacity .4s var(--ease-out); }
.mg-bpp .bpp-up, .mg-bpp .bpp-fore { transition: transform .8s cubic-bezier(.34, 1.2, .64, 1); }
.mg-bpp.m-back .bpp-up { transform: rotate(-11deg); }
.mg-bpp.m-arm .bpp-fore { transform: rotate(-72deg); }
.mg-bpp.m-legs .bpp-leg2, .mg-bpp.m-talk .bpp-talk, .mg-bpp.m-bladder .bpp-bl, .mg-bpp.m-cloth .bpp-sleeve { opacity: 1; }
@keyframes bppPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
html:not(.rm) .mg-bpp.m-bladder .bpp-bl path { transform-box: fill-box; transform-origin: 50% 70%; animation: bppPulse 1.2s ease-in-out infinite; }
.mg-bpp .bpp-k { fill: var(--ink-2); font-weight: 600; }
.mg-bpp .bpp-big { fill: var(--navy-800); font-weight: 800; transition: fill .3s; }
.mg-bpp .bpp-big.is-up { fill: #E0453A; }
.mg-bpp .bpp-add { fill: var(--ink-2); font-weight: 700; }
.mg-bpp .bpp-track { fill: #EDF1F6; }
.mg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mg-chips button { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px 0 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font-family: var(--f-ui); font-size: .8125rem; font-weight: 700; color: var(--ink-2); transition: background-color .25s, color .25s, box-shadow .25s; }
.mg-chips button i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.mg-chips button small { font-weight: 700; color: var(--c); }
.mg-chips button[aria-pressed="true"] { background: color-mix(in srgb, var(--c) 12%, #fff); box-shadow: inset 0 0 0 1.5px var(--c); color: var(--navy-800); }
.mg-chips__reset { color: var(--navy-800) !important; }

/* ---------- نمودار: برش دندان ---------- */
.mg-tt .tt-bone { fill: #EFE0C4; }
.mg-tt .tt-dentin { fill: #F6E7C8; stroke: #D8C39C; stroke-width: 2; }
.mg-tt .tt-enamel { fill: #FFFFFF; stroke: #C9D3E1; stroke-width: 2; }
.mg-tt .tt-pulp { fill: #F28C9B; }
.mg-tt .tt-gum { fill: #F2A9B7; }
.mg-tt .tt-tub { fill: none; stroke: #C9AE80; stroke-width: 1.6; stroke-linecap: round; }
.mg-tt .tt-fl { fill: #1673D6; }
.mg-tt .tt-plug { fill: #0E8F6B; stroke: #fff; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; transform: scale(0); transition: opacity .4s, transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.mg-tt[data-s="paste"] .tt-plug { opacity: 1; transform: none; }
.mg-tt .tt-ice rect { fill: #CFE6FF; stroke: #6FAEF2; stroke-width: 2; }
.mg-tt .tt-ice path, .mg-tt .tt-cold path { fill: none; stroke: #1673D6; stroke-width: 2.5; stroke-linecap: round; }
.mg-tt .tt-flash circle { fill: #FFD23F; opacity: .45; }
.mg-tt .tt-flash path { fill: #FFB800; stroke: #fff; stroke-width: 1.5; }
.mg-tt .tt-flash { opacity: 0; transition: opacity .3s; }
.mg-tt .tt-lbl text { fill: var(--navy-800); font-weight: 700; }
.mg-tt .tt-lbl path { stroke: var(--ink-3); stroke-width: 1.2; fill: none; }
.mg-tt .tt-k { fill: var(--ink-2); font-weight: 600; }
.mg-tt .tt-track { fill: #EDF1F6; }
.mg-tt .tt-pain { fill: #E0453A; transform: scaleX(.92); transition: transform .7s var(--ease-out), fill .5s; }
.mg-tt[data-s="paste"] .tt-pain { transform: scaleX(.16); fill: #0E8F6B; }
.mg-tt .tt-big { fill: var(--navy-800); font-weight: 800; }
@keyframes ttFlow { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(-62px, 3px); opacity: 0; } }
@keyframes ttFlash { 0%, 55%, 100% { opacity: 0; } 65%, 80% { opacity: 1; } }
@keyframes ttBob { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-6px, 0); } }
.mg-tt.is-on:not([data-s="paste"]) .tt-fl { animation: ttFlow 1.4s linear infinite; }
.mg-tt.is-on:not([data-s="paste"]) .tt-flash { animation: ttFlash 1.4s linear infinite; }
.mg-tt[data-s="paste"] .tt-fl { opacity: 0; }
.mg-tt.is-on .tt-ice, .mg-tt.is-on .tt-cold { animation: ttBob 1.4s ease-in-out infinite; }
/* ---------- نمودار: اسیدیته‌ی دهان ---------- */
.mg-ac .ac-ax { fill: var(--ink-3); }
.mg-ac .ac-grid { stroke: #EDF1F6; }
.mg-ac .ac-low { fill: rgba(224, 69, 58, .16); }
.mg-ac .ac-crit { stroke: #E0453A; stroke-width: 2; stroke-dasharray: 6 5; }
.mg-ac .ac-critl { fill: #B4264F; font-weight: 700; }
.mg-ac .ac-line { fill: none; stroke: var(--navy-800); stroke-width: 3.5; stroke-linejoin: round; }
.is-narrow .mg-ac .ac-line { stroke-width: 6; }
.mg-ac .ac-bl { stroke: #0E8F6B; stroke-width: 2; stroke-dasharray: 4 4; }
.mg-ac .ac-bt { fill: #0C6C53; font-weight: 700; }
.mg-ac .ac-brush { transition: transform .6s var(--ease-out), opacity .3s; }

/* ---------- نمودار منحنی عمومی ---------- */
.mg-cu .cu-base { stroke: #C7D1DE; stroke-width: 1.5; }
.mg-cu .cu-tk { stroke: #C7D1DE; }
.mg-cu .cu-ax { fill: var(--ink-3); }
.mg-cu .cu-line { fill: none; stroke: var(--c); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.is-narrow .mg-cu .cu-line { stroke-width: 6; }
.mg-cu .cu-band { fill: color-mix(in srgb, var(--c) 10%, transparent); }
.mg-cu .cu-bandt { fill: var(--c); font-weight: 700; }
.mg-cu .cu-ml { stroke: var(--c); stroke-width: 1.5; stroke-dasharray: 3 4; }
.mg-cu .cu-md { fill: #fff; stroke: var(--c); stroke-width: 3; }
.mg-cu .cu-mt { fill: var(--navy-800); font-weight: 700; }
.mg-cu .cu-mkl { stroke: var(--navy-800); stroke-width: 1.5; stroke-dasharray: 4 5; }
.mg-cu .cu-mkd { fill: var(--c); stroke: #fff; stroke-width: 3; }
/* ---------- نمودار: ناحیه‌های بوتاکس ---------- */
.mg-bf .bf-face { fill: #F8DCCB; stroke: #E8BFA6; stroke-width: 2; }
.mg-bf .bf-hair { fill: #3E2A20; }
.mg-bf .bf-brow path { fill: none; stroke: #4A3426; stroke-width: 6; stroke-linecap: round; }
.mg-bf .bf-eye path { fill: #fff; stroke: #6B4C3B; stroke-width: 2; }
.mg-bf .bf-eye circle { fill: #3E2A20; }
.mg-bf .bf-nose { fill: none; stroke: #D9A487; stroke-width: 2.5; stroke-linecap: round; }
.mg-bf .bf-lips { fill: #D9798B; }
.mg-bf .bf-z { fill: #C2386B; opacity: 0; transition: opacity .45s var(--ease-out); }
.mg-bf .bf-l path { fill: none; stroke: #B06A55; stroke-width: 2.2; stroke-linecap: round; }
.mg-bf .bf-l { opacity: .18; transition: opacity .5s var(--ease-out); }
.mg-bf[data-z="fh"] .bf-z[data-z="fh"], .mg-bf[data-z="gl"] .bf-z[data-z="gl"], .mg-bf[data-z="cf"] .bf-z[data-z="cf"] { opacity: .16; }
.mg-bf .bf-brow, .mg-bf .bf-eye { transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes bfLines { 0%, 100% { opacity: .15; } 40%, 70% { opacity: 1; } }
@keyframes bfUp { 0%, 100% { transform: translate(0, 0); } 40%, 70% { transform: translate(0, -7px); } }
@keyframes bfInR { 0%, 100% { transform: translate(0, 0) rotate(0); } 40%, 70% { transform: translate(5px, 4px) rotate(8deg); } }
@keyframes bfInL { 0%, 100% { transform: translate(0, 0) rotate(0); } 40%, 70% { transform: translate(-5px, 4px) rotate(-8deg); } }
@keyframes bfSq { 0%, 100% { transform: scaleY(1); } 40%, 70% { transform: scaleY(.55); } }
.mg-bf.is-on[data-s="before"][data-z="fh"] .bf-l[data-z="fh"], .mg-bf.is-on[data-s="before"][data-z="gl"] .bf-l[data-z="gl"], .mg-bf.is-on[data-s="before"][data-z="cf"] .bf-l[data-z="cf"] { animation: bfLines 3.2s ease-in-out infinite; }
.mg-bf.is-on[data-s="before"][data-z="fh"] .bf-brow { animation: bfUp 3.2s ease-in-out infinite; }
.mg-bf.is-on[data-s="before"][data-z="gl"] .bf-brow--r { animation: bfInR 3.2s ease-in-out infinite; }
.mg-bf.is-on[data-s="before"][data-z="gl"] .bf-brow--l { animation: bfInL 3.2s ease-in-out infinite; }
.mg-bf.is-on[data-s="before"][data-z="cf"] .bf-eye { animation: bfSq 3.2s ease-in-out infinite; }
.mg-bf[data-s="after"] .bf-l { opacity: .1; }
.mg-row { display: flex; flex-wrap: wrap; gap: 0 12px; }

/* ---------- نمودار: مراحل ترمیم زخم ---------- */
.mg-wp .wp-fat { fill: #FCE8A8; }
.mg-wp .wp-derm { fill: #F4B9A6; }
.mg-wp .wp-epi { fill: #E89A83; }
.mg-wp .wp-vessel { fill: none; stroke: #C7485A; stroke-width: 3; opacity: .55; }
.mg-wp .wp-gap { fill: #FDF3EC; }
.mg-wp .wp-clot { fill: #9E1B2C; }
.mg-wp .wp-cells circle { fill: #fff; stroke: #C7485A; stroke-width: 2; }
.mg-wp .wp-gran { fill: #F07F94; }
.mg-wp .wp-newv { fill: none; stroke: #C7485A; stroke-width: 2.5; stroke-linecap: round; }
.mg-wp .wp-scar { fill: #F7C9BA; }
.mg-wp .wp-scab { fill: #7A3B24; }
.mg-wp .wp-newepi { fill: #E89A83; }
.mg-wp .wp-st path { fill: none; stroke: #1B3A66; stroke-width: 3; stroke-linecap: round; }
.mg-wp .wp-red { fill: #E0453A; opacity: 0; }
.mg-wp .wp-clot, .mg-wp .wp-cells, .mg-wp .wp-gran, .mg-wp .wp-newv, .mg-wp .wp-scar, .mg-wp .wp-scab, .mg-wp .wp-st, .mg-wp .wp-red { transition: opacity .6s var(--ease-out); }
.mg-wp .wp-cells, .mg-wp .wp-gran, .mg-wp .wp-newv, .mg-wp .wp-scar, .mg-wp .wp-scab { opacity: 0; }
.mg-wp .wp-newepi { transform: scaleX(0); transition: transform .9s var(--ease-out); }
.mg-wp[data-s="infl"] .wp-clot { opacity: .9; }
.mg-wp[data-s="infl"] .wp-cells, .mg-wp[data-s="infl"] .wp-scab { opacity: 1; }
.mg-wp[data-s="infl"] .wp-red { opacity: .18; }
.mg-wp[data-s="prol"] .wp-clot, .mg-wp[data-s="remo"] .wp-clot { opacity: 0; }
.mg-wp[data-s="prol"] .wp-gran, .mg-wp[data-s="prol"] .wp-newv { opacity: 1; }
.mg-wp[data-s="prol"] .wp-scab { opacity: .6; }
.mg-wp[data-s="prol"] .wp-newepi { transform: scaleX(.75); }
.mg-wp[data-s="remo"] .wp-scar { opacity: 1; }
.mg-wp[data-s="remo"] .wp-newepi { transform: none; }
.mg-wp[data-s="remo"] .wp-st { opacity: 0; }
@keyframes wpCell { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(4px, -5px); } }
.mg-wp.is-on[data-s="infl"] .wp-cells circle { transform-box: fill-box; animation: wpCell 1.8s ease-in-out infinite; }
.mg-wp .wp-b rect { fill: #EDF1F6; transition: fill .4s; }
.mg-wp .wp-b text { fill: var(--ink-3); font-weight: 600; transition: fill .4s; }
.mg-wp .wp-b .wp-bd { font-weight: 500; }
.mg-wp[data-s="clot"] .wp-b[data-k="clot"] rect, .mg-wp[data-s="infl"] .wp-b[data-k="infl"] rect, .mg-wp[data-s="prol"] .wp-b[data-k="prol"] rect, .mg-wp[data-s="remo"] .wp-b[data-k="remo"] rect { fill: #0E8F6B; }
.mg-wp[data-s="clot"] .wp-b[data-k="clot"] text, .mg-wp[data-s="infl"] .wp-b[data-k="infl"] text, .mg-wp[data-s="prol"] .wp-b[data-k="prol"] text, .mg-wp[data-s="remo"] .wp-b[data-k="remo"] text { fill: var(--navy-800); font-weight: 700; }
.mg-seg:has(button:nth-child(4)) { flex-wrap: wrap; }
/* ---------- نمودار: زمان کشیدن بخیه ---------- */
.mg-sdy .sdy-hit { fill: transparent; transition: fill .25s; cursor: pointer; }
.mg-sdy .sdy-r.is-on .sdy-hit { fill: #E5F5EF; }
.mg-sdy .sdy-r:focus-visible { outline: none; }
.mg-sdy .sdy-r:focus-visible .sdy-hit { stroke: var(--navy-800); stroke-width: 2; }
.mg-sdy .sdy-t { fill: var(--navy-800); font-weight: 700; }
.mg-sdy .sdy-track { fill: #EDF1F6; }
.mg-sdy .sdy-bar { fill: #0E8F6B; }
.mg-sdy .sdy-v { fill: #0C6C53; font-weight: 700; }
.mg-sdy .sdy-ax { fill: var(--ink-3); }
.mg-sdy .sdy-grid { stroke: #EDF1F6; stroke-dasharray: 3 4; }

/* ---------- نمودار: ترمیم حفره‌ی دندان ---------- */
.mg-sh .sh-air { fill: #EEF3F9; }
.mg-sh .sh-clot rect { fill: #8E1B2B; }
.mg-sh .sh-clot circle { fill: #A8283B; }
.mg-sh .sh-gran rect { fill: #F28C9C; }
.mg-sh .sh-cap { fill: none; stroke: #D9546B; stroke-width: 2.5; stroke-linecap: round; opacity: .7; }
.mg-sh .sh-nb rect { fill: #F8EBCD; }
.mg-sh .sh-nb .sh-nb__t { fill: url(#shTrabN); }
.mg-sh #shTrabN { fill: #E6CF9E; }
.mg-sh .sh-bone { fill: #F2E2BF; }
.mg-sh #shTrab { fill: #E3C993; }
.mg-sh .sh-wall { fill: none; stroke: #D5B77B; stroke-width: 3.5; stroke-linecap: round; transition: opacity .8s var(--ease-out); }
.mg-sh .sh-canal { fill: #EAD6AA; stroke: #D5B77B; stroke-width: 2; }
.mg-sh .sh-nerve { fill: none; stroke: #E5B02E; stroke-width: 4; stroke-linecap: round; transition: stroke .4s; }
.mg-sh .sh-root { fill: #F7EEDC; stroke: #D8C39C; stroke-width: 2; }
.mg-sh .sh-crown { fill: #FFFFFF; stroke: #C9D3E1; stroke-width: 2.5; }
.mg-sh .sh-gum, .mg-sh .sh-tg { fill: #F2A9B7; }
.mg-sh .sh-dome { fill: #8E1B2B; }
.mg-sh .sh-exp { fill: none; stroke: #FFF8E4; stroke-width: 7; stroke-linecap: round; }
.mg-sh .sh-exp--g { stroke: #F5CF7A; stroke-width: 16; opacity: .55; }
.mg-sh .sh-deb circle, .mg-sh .sh-deb path { fill: #9C8757; }
.mg-sh .sh-inf { fill: #E0453A; opacity: .32; }
.mg-sh .sh-pain circle { fill: none; stroke: #E0453A; stroke-width: 3; opacity: 0; }
.mg-sh .sh-lb text { font-weight: 700; }
.mg-sh .sh-lb--gum { fill: #8C2452; }
.mg-sh .sh-lb--bone { fill: #86652A; }
.mg-sh .sh-lb--nerve { fill: #86652A; }
.mg-sh .sh-ln { stroke: var(--navy-800); stroke-width: 2; }
.mg-sh .sh-ln--h { stroke: #fff; stroke-width: 6; opacity: .8; }
.mg-sh .sh-pd { fill: var(--navy-800); stroke: #fff; stroke-width: 3; }
.mg-sh .sh-chip rect { fill: var(--navy-800); }
.mg-sh .sh-chip text { fill: #fff; font-weight: 700; }
.mg-sh[data-s="dry"] .sh-chip rect, .mg-sh[data-s="dry"] .sh-pd { fill: #B42318; }
.mg-sh[data-s="dry"] .sh-ln:not(.sh-ln--h) { stroke: #B42318; }
.mg-sh .sh-kt { fill: var(--navy-800); font-weight: 800; }
.mg-sh .sh-k text { fill: var(--ink-2); font-weight: 600; }
.mg-sh .sh-k__tr { fill: #EDF1F6; }
.mg-sh .sh-k__f { transform: scaleX(0); transition: transform .9s var(--ease-out); }
.mg-sh .sh-k--clot .sh-k__f { fill: #8E1B2B; }
.mg-sh .sh-k--gran .sh-k__f { fill: #F07F94; }
.mg-sh .sh-k--nb .sh-k__f { fill: #DDBE82; }
.mg-sh .sh-warn { fill: #B42318; font-weight: 700; opacity: 0; transition: opacity .4s; }
/* حالت‌ها: لایه‌ها با opacity و transform (بافت ترمیمی و استخوان از کف حفره بالا می‌آیند، لثه از دو لبه جلو می‌آید) */
.mg-sh .sh-clot, .mg-sh .sh-dome, .mg-sh .sh-dry { transition: opacity .6s var(--ease-out); }
.mg-sh .sh-dry { opacity: 0; }
.mg-sh .sh-gran, .mg-sh .sh-nb { transform: scaleY(0); transition: transform 1.1s var(--ease-out); }
.mg-sh .sh-tg { transform: scaleX(0); transition: transform 1.1s var(--ease-out); }
.mg-sh[data-s="d3"] .sh-gran { transform: scaleY(.3); }
.mg-sh[data-s="d3"] .sh-tg { transform: scaleX(.14); }
.mg-sh[data-s="w1"] .sh-gran { transform: scaleY(.76); }
.mg-sh[data-s="w1"] .sh-tg { transform: scaleX(.58); }
.mg-sh[data-s="w1"] .sh-dome { opacity: 0; }
.mg-sh[data-s="w2"] .sh-gran, .mg-sh[data-s="m2"] .sh-gran { transform: none; }
.mg-sh[data-s="w2"] .sh-nb { transform: scaleY(.36); }
.mg-sh[data-s="m2"] .sh-nb { transform: scaleY(.9); }
.mg-sh[data-s="w2"] .sh-tg, .mg-sh[data-s="m2"] .sh-tg { transform: none; }
.mg-sh[data-s="w2"] .sh-dome, .mg-sh[data-s="m2"] .sh-dome, .mg-sh[data-s="dry"] .sh-dome,
.mg-sh[data-s="w2"] .sh-clot, .mg-sh[data-s="m2"] .sh-clot, .mg-sh[data-s="dry"] .sh-clot { opacity: 0; }
.mg-sh[data-s="m2"] .sh-wall { opacity: .25; }
.mg-sh[data-s="dry"] .sh-dry, .mg-sh[data-s="dry"] .sh-warn { opacity: 1; }
.mg-sh[data-s="dry"] .sh-nerve--s { stroke: #E0453A; }
@keyframes shPain { 0% { transform: scale(.45); opacity: .85; } 100% { transform: scale(2.1); opacity: 0; } }
.mg-sh.is-on[data-s="dry"] .sh-pain circle { transform-box: fill-box; transform-origin: 50% 50%; animation: shPain 1.8s cubic-bezier(.2, .6, .4, 1) infinite; }
.mg-seg button[data-v="dry"] { color: #B42318; }
.mg-seg button[data-v="dry"][aria-pressed="true"] { background: #B42318; color: #fff; }
.mg-seg:has(button:nth-child(6)) { justify-content: center; }

/* ---------- نمودار: راهنمای روزبه‌روز بعد از کشیدن دندان ---------- */
.mg-xd .xd-cap { fill: var(--ink-3); font-weight: 600; }
.mg-xd .xd-grid { stroke: #E3E9F1; stroke-dasharray: 3 5; }
.mg-xd .xd-base { stroke: #D5DDE8; stroke-width: 1.5; }
.mg-xd .xd-g0 { stop-color: #F07F5A; stop-opacity: .34; }
.mg-xd .xd-g1 { stop-color: #F07F5A; stop-opacity: 0; }
.mg-xd .xd-area { fill: url(#xdGrad); }
.mg-xd .xd-line { fill: none; stroke: #E0603A; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.is-narrow .mg-xd .xd-line { stroke-width: 5; }
.mg-xd .xd-cur { stroke: var(--navy-800); stroke-width: 1.5; stroke-dasharray: 4 5; opacity: .5; }
.mg-xd .xd-trk { stroke: #E3E9F1; stroke-width: 4; stroke-linecap: round; }
.mg-xd .xd-fil { stroke: var(--tone); stroke-width: 4; stroke-linecap: round; transition: transform .8s var(--ease-out); }
.is-narrow .mg-xd .xd-trk, .is-narrow .mg-xd .xd-fil { stroke-width: 7; }
.mg-xd .xd-mk__h { fill: #E0603A; opacity: .16; }
.mg-xd .xd-mk__d { fill: #E0603A; stroke: #fff; stroke-width: 3; }
.mg-xd .xd-n { cursor: pointer; outline: none; }
.mg-xd .xd-n__hit { fill: transparent; transition: fill .25s; }
.mg-xd .xd-n:hover .xd-n__hit { fill: color-mix(in srgb, var(--tone) 6%, transparent); }
.mg-xd .xd-n:focus-visible .xd-n__hit { stroke: var(--navy-800); stroke-width: 2; }
.mg-xd .xd-n__d { fill: #fff; stroke: #C7D1DE; stroke-width: 3; transition: fill .35s, stroke .35s; }
.mg-xd .xd-n.is-past .xd-n__d { fill: var(--tone); stroke: var(--tone); }
.mg-xd .xd-n.is-on .xd-n__d { fill: #fff; stroke: var(--tone); stroke-width: 5; }
.mg-xd .xd-n__t { fill: var(--ink-3); font-weight: 600; transition: fill .3s; }
.mg-xd .xd-n.is-on .xd-n__t { fill: var(--navy-800); font-weight: 800; }
.xd-panes { display: grid; margin-top: 16px; }
.xd-pane { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .3s var(--ease-out), visibility 0s linear .3s; }
.xd-pane.is-on { visibility: visible; opacity: 1; transition: opacity .45s var(--ease-out) .06s, visibility 0s; }
.xd-ph { display: flex; align-items: center; gap: 12px; }
.xd-ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--tone-bg); color: var(--tone); }
.xd-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ap-mg .xd-ph b { display: block; font-size: 1.0625rem; font-weight: 800; line-height: 1.6; color: var(--navy-800); }
.xd-ph span { display: block; font-family: var(--f-ui); font-size: .8125rem; font-weight: 600; line-height: 1.6; color: var(--ink-3); }
.xd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.is-narrow .xd-cols { grid-template-columns: 1fr; }
.xd-col { padding: 14px 16px 16px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.ap-mg .xd-ch { margin: 0; font-family: var(--f-ui); font-size: .8125rem; font-weight: 800; line-height: 1.6; }
.xd-col--yes .xd-ch { color: #0C6C53; }
.xd-col--no .xd-ch { color: #B42318; }
.ap-mg .xd-col ul { gap: 8px; margin-top: 8px; font-size: .9375rem; line-height: 1.85; }
.ap-mg .xd-col li { padding-inline-start: 28px; }
.ap-mg .xd-col li::before { inset-inline-start: 0; top: .3em; width: 19px; height: 19px; background: #0E8F6B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.8 6.3l2.1 2.1L9.3 3.9' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; }
.ap-mg .xd-col--no li::before { background-color: #D6453D; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.8 3.8l4.4 4.4M8.2 3.8L3.8 8.2' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ap-mg .xd-note { margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: #F2F6FA; font-family: var(--f-ui); font-size: .8125rem; font-weight: 600; line-height: 1.9; color: var(--ink-2); }
.ap-mg .xd-note.is-warn { background: #FFF5E6; color: #7A4A00; }
@keyframes xdSpin { to { transform: rotate(360deg); } }
@keyframes xdRise { 0% { transform: translateY(2px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(-3px); opacity: 0; } }
.ap-mg__cv.is-on .xd-pane.is-on .xd-spin { transform-box: view-box; transform-origin: 12px 12px; animation: xdSpin 9s linear infinite; }
.ap-mg__cv.is-on .xd-pane.is-on .xd-steam, .ap-mg__cv.is-on .xd-pane.is-on .xd-bub { animation: xdRise 2.2s ease-out infinite; }

/* ---------- نمودار: چرخه‌ی رشد مو و لیزر ---------- */
.mg-hc .hc-air { fill: #F1F5FA; }
.mg-hc .hc-derm { fill: #F8D6C4; }
.mg-hc .hc-epi { fill: #E9A68C; }
.mg-hc .hc-fat { fill: #FCEBC0; }
.mg-hc #hcFat { fill: none; stroke: #F1D48C; stroke-width: 1.5; }
.mg-hc .hc-sh { fill: #F2BCA6; stroke: #E29B82; stroke-width: 1.5; }
.mg-hc .hc-bulb { fill: #5B3B2D; }
.mg-hc .hc-pap { fill: #E77F8C; }
.mg-hc .hc-dmg { fill: #C9C2BD; opacity: 0; transition: opacity .9s var(--ease-out); }
.mg-hc .hc-hair { fill: none; stroke: #33241D; stroke-width: 5; stroke-linecap: round; }
.mg-hc .hc-hair--new { stroke-width: 4; }
.mg-hc .hc-thin { fill: none; stroke: #8A6A58; stroke-width: 2.5; stroke-linecap: round; opacity: 0; transition: opacity .9s var(--ease-out) .5s; }
.mg-hc .hc-club { fill: #7A5646; }
.mg-hc .hc-str { stroke: #E29B82; stroke-width: 2; stroke-dasharray: 3 4; }
.mg-hc .hc-germ { fill: #EFA3AE; }
.mg-hc .hc-glow { opacity: 0; }
.mg-hc .hc-glow circle { fill: url(#hcHeat); }
.mg-hc .hc-glow path { fill: none; stroke: #FF8A3D; stroke-width: 7; stroke-linecap: round; opacity: .55; }
.mg-hc .hc-d--A { fill: #0E8F6B; }
.mg-hc .hc-d--C { fill: #E08A00; }
.mg-hc .hc-d--T { fill: #1673D6; }
.mg-hc .hc-d { stroke: #fff; stroke-width: 3; }
.mg-hc .hc-d--up { opacity: 0; transition: opacity .6s; }
.mg-hc .hc-hp { opacity: 0; transform: translateX(var(--hx0)); }
.mg-hc .hc-beam { fill: url(#hcBeam); }
.mg-hc .hc-hpb { fill: #fff; stroke: #C9D3E1; stroke-width: 2; }
.mg-hc .hc-hpt { fill: #FF7A45; }
.mg-hc .hc-f--a > .hc-hair, .mg-hc .hc-old { transition: transform 1.3s var(--ease-out), opacity 1.1s var(--ease-out); }
.mg-hc .hc-new { opacity: 0; transform: scaleY(.35); transition: opacity .8s var(--ease-out), transform 1.2s var(--ease-out); }
/* شلیک: دستگاه از راست به چپ می‌رود و ریشه‌ی موهای در حال رشد، همان لحظه که نور از رویشان رد می‌شود گرم می‌شود */
@keyframes hcSweep { 0% { transform: translateX(var(--hx0)); opacity: 0; } 7% { opacity: 1; } 93% { opacity: 1; } 100% { transform: translateX(var(--hx1)); opacity: 0; } }
@keyframes hcHeat { 0% { opacity: 1; transform: scale(1.12); } 35% { opacity: .45; transform: scale(1); } 100% { opacity: .3; transform: scale(1); } }
.mg-hc.is-on[data-s="shot"] .hc-hp { animation: hcSweep linear infinite; }
.mg-hc[data-s="shot"] .hc-glow { opacity: .4; }
.mg-hc.is-on[data-s="shot"] .hc-glow { transform-box: fill-box; transform-origin: 50% 90%; animation: hcHeat 3.2s linear infinite; }
.mg-hc[data-s="shed"] .hc-f--a > .hc-hair, .mg-hc[data-s="next"] .hc-f--a > .hc-hair { transform: translateY(-52px); opacity: 0; }
.mg-hc[data-s="shed"] .hc-dmg, .mg-hc[data-s="next"] .hc-dmg { opacity: 1; }
.mg-hc[data-s="next"] .hc-old { transform: translateY(-40px); opacity: 0; }
.mg-hc[data-s="next"] .hc-new { opacity: 1; transform: none; }
.mg-hc[data-s="next"] .hc-thin, .mg-hc[data-s="next"] .hc-d--up { opacity: 1; }
.mg-hc .hc-f--t > .hc-germ { transition: opacity .5s; }
.mg-hc[data-s="next"] .hc-f--t > .hc-germ { opacity: 0; }
.mg-hc + .mg-legend { margin-top: 10px; }

/* ---------- نمودار: کاهش مو جلسه‌به‌جلسه ---------- */
.mg-ls .ls-frame { fill: none; stroke: rgba(160, 100, 70, .18); stroke-width: 1.5; }
.mg-ls .ls-hairs path { fill: none; stroke: #3B2A22; stroke-linecap: round; transition: opacity .5s var(--ease-out); }
.mg-ls .ls-k { fill: var(--ink-3); font-weight: 600; }
.mg-ls .ls-v { fill: var(--navy-800); font-weight: 800; font-variant-numeric: tabular-nums; }
.mg-ls .ls-p { fill: var(--tone-ink); }
.mg-ls .ls-tr { fill: #EDF1F6; }
.mg-ls .ls-f { fill: var(--tone); transition: transform .6s var(--ease-out); }

/* ---------- ابزار: نشانه‌های کم‌آبی ---------- */
.mg-dc { --lv: #0E8F6B; }
.mg-dc .dc-glass-bg { fill: #F4F8FC; }
.mg-dc .dc-glass { fill: none; stroke: #B9C6D6; stroke-width: 3; stroke-linejoin: round; }
.mg-dc .dc-shine { stroke: #fff; stroke-width: 5; stroke-linecap: round; opacity: .8; }
.mg-dc .dc-water { transition: transform 1s cubic-bezier(.34, 1.2, .64, 1); }
.mg-dc .dc-wave path { fill: #5AA7EE; opacity: .9; }
@keyframes dcWave { to { transform: translateX(var(--wv, 124px)); } }
.mg-dc.is-on .dc-wave { animation: dcWave 2.6s linear infinite; }
.is-narrow .mg-dc { --wv: 200px; }
.mg-dc .dc-k { fill: var(--ink-3); font-weight: 600; }
.mg-dc .dc-lv { fill: var(--lv); font-weight: 800; transition: fill .4s; }
.mg-dc .dc-seg { fill: color-mix(in srgb, var(--c) 18%, #fff); transition: fill .4s; }
.mg-dc .dc-seg.is-on { fill: var(--c); }
.mg-dc .dc-sl { fill: var(--ink-3); font-weight: 600; transition: fill .3s; }
.mg-dc .dc-sl.is-on { fill: var(--navy-800); font-weight: 800; }
.mg-dc .dc-ptr { fill: var(--lv); transition: transform .7s cubic-bezier(.34, 1.3, .64, 1), fill .4s; }
.dc-chips button small { color: #D6453D; }
.dc-chips button[aria-pressed="true"] small { color: #B42318; }

/* ---------- نمودار: یک لیتر سرم کجا می‌رود ---------- */
.mg-fl .fl-tube { fill: none; stroke: #C9D6E6; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.is-narrow .mg-fl .fl-tube { stroke-width: 6; }
.mg-fl .fl-hook { fill: #B9C6D6; }
.mg-fl .fl-bag { fill: rgba(236, 244, 252, .9); stroke: #B9C6D6; stroke-width: 2.5; }
.mg-fl .fl-liq { fill: #BFE0FA; }
.mg-fl .fl-bt { fill: var(--navy-800); font-weight: 800; }
.mg-fl .fl-bn { fill: var(--ink-2); font-weight: 700; }
.mg-fl .fl-neck { stroke: #B9C6D6; stroke-width: 2.5; }
.mg-fl .fl-ch { fill: #F4F8FC; stroke: #B9C6D6; stroke-width: 2.5; }
.mg-fl .fl-drop { fill: #5AA7EE; opacity: 0; }
@keyframes flDrop { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(var(--dy, 22px)); opacity: 0; } }
.mg-fl.is-on .fl-drop { animation: flDrop .9s cubic-bezier(.5, 0, .9, .5) infinite; }
.is-narrow .mg-fl { --dy: 34px; }
.mg-fl .fl-tb { fill: #F7F9FC; stroke: #D5DDE8; stroke-width: 2; }
.mg-fl .fl-pt { opacity: .5; }
.mg-fl .fl-f { transform: scaleY(0); }
.mg-fl .fl-t--dv .fl-f { fill: #E86A61; }
.mg-fl .fl-t--di .fl-f { fill: #5AA7EE; }
.mg-fl .fl-t--dc .fl-f { fill: #2BAE8A; }
.mg-fl .fl-f { opacity: .82; }
.mg-fl #flP-dv { fill: #F2B8B3; }
.mg-fl #flP-di { fill: #B9D7F4; }
.mg-fl #flP-dc { fill: none; stroke: #BFE3D6; stroke-width: 2; }
.mg-fl .fl-l { fill: var(--navy-800); font-weight: 700; }
.mg-fl .fl-v { fill: var(--navy-800); font-weight: 800; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: rgba(255, 255, 255, .85); stroke-width: 4px; stroke-linejoin: round; }
.fl-mix { font-family: var(--f-ui); font-size: .8125rem; color: var(--ink-3); }
.mg-fl .fl-ar path { fill: none; stroke: #7C8DA6; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.is-narrow .mg-fl .fl-ar path { stroke-width: 4.5; }
.mg-fl .fl-ar { transition: opacity .5s; }
@keyframes flFlow { 0% { transform: translateX(6px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateX(-6px); opacity: 0; } }
.mg-fl.is-on .fl-ar path { animation: flFlow 1.4s ease-in-out infinite; }
.mg-fl.is-on .fl-ar path + path { animation-delay: -.7s; }
.mg-fl[data-s="ns"] .fl-ar--2, .mg-fl[data-s="rl"] .fl-ar--2 { opacity: .12; }
.dc-out b { color: var(--lv, var(--tone-ink)); }

/* دو عکس کنار هم */
.ap-pair { margin: 34px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ap-pair > .ap-fig { margin: 0; }
.ap-pair > figcaption { grid-column: 1 / -1; font-family: var(--f-ui); font-size: .8125rem; line-height: 1.9; color: var(--ink-3); }
html.rm .ap-mg *, html.rm .ap-mg *::before { transition: none !important; animation: none !important; }

/* ---------- سؤال‌ها ---------- */
.ap-faq { margin-top: 64px; }
.ap-faq h2 { font-size: clamp(1.4rem, 1.12rem + .95vw, 1.9rem); font-weight: 800; line-height: 1.55; color: var(--navy-800); scroll-margin-top: calc(var(--hdr-h) + 28px); }
.ap-q { margin-top: 12px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .25s, background-color .25s; }
.ap-q[open] { background: var(--mist); box-shadow: inset 0 0 0 1px var(--line-2); }
.ap-q summary { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 12px 20px; list-style: none; cursor: pointer; font-size: 1.0625rem; font-weight: 700; line-height: 1.8; color: var(--navy-800); }
.ap-q summary::-webkit-details-marker { display: none; }
.ap-q summary span { flex: 1; }
.ap-q summary i { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--tone-bg); }
.ap-q summary i::before, .ap-q summary i::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--tone-ink); transition: transform .45s var(--spring); }
.ap-q summary i::after { transform: rotate(90deg); }
.ap-q[open] summary i::after { transform: rotate(0deg); }
.ap-q__a { padding: 0 20px 18px; overflow: hidden; }
.ap-q__a p { font-size: 1rem; line-height: 2.05; color: var(--ink-2); }

.ap-end { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); }
.ap-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--f-ui); font-size: .875rem; color: var(--ink-2); }
.ap-share > span { margin-inline-end: 6px; }
.ap-share__b { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px; font-family: var(--f-ui); font-size: .8125rem; font-weight: 700; color: var(--navy-800); box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color .25s, color .25s, box-shadow .25s; }
.ap-share__b:hover { background: var(--navy-800); color: #fff; box-shadow: none; }
.ap-share__b .ic { width: 16px; height: 16px; }
.ap-copy.is-done { background: #E5F5EF; color: #0C6C53; box-shadow: inset 0 0 0 1px #9ED7C0; }
.ap-note { margin-top: 16px; font-size: .875rem; line-height: 2; color: var(--ink-3); }

/* ---------- دعوت پایین مقاله ---------- */
.ap-cta { padding-block: clamp(20px, 4vh, 40px); }
.ap-cta__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; padding: clamp(26px, 4vw, 48px); border-radius: 26px; color: #fff; background: radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--tone) 72%, #0B1A33), #0B1A33 68%); box-shadow: 0 40px 70px -48px rgba(6, 16, 34, .8); }
.ap-cta__t { max-width: 560px; }
.ap-cta__t h2 { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.9rem); font-weight: 800; line-height: 1.55; }
.ap-cta__t p { margin-top: 8px; line-height: 2; color: rgba(255, 255, 255, .82); }
.ap-cta__acts { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- کارت مقاله (مقاله‌های مرتبط و فهرست) ---------- */
.ap-more { padding-block: clamp(48px, 8vh, 96px) clamp(64px, 10vh, 120px); }
.ac-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 22px; margin-top: clamp(24px, 4vh, 40px); }
.ac { display: grid; align-content: start; gap: 14px; color: var(--ink); text-decoration: none; }
.ac[hidden] { display: none; }
.ac__img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px; background: #DCE5EF; }
.ac__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.ac:hover .ac__img img { transform: scale(1.06); }
.ac__no { position: absolute; top: 12px; right: 12px; padding: 1px 9px; border-radius: 999px; background: rgba(255, 255, 255, .92); font-family: var(--f-ui); font-size: .75rem; font-style: normal; font-weight: 700; line-height: 1.9; color: var(--navy-800); }
.ac__go { position: absolute; left: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--navy-800); opacity: 0; transform: translate3d(8px, 8px, 0) scale(.8); transition: opacity .3s, transform .5s var(--spring); }
.ac__go .ic { width: 18px; height: 18px; }
.ac:hover .ac__go, .ac:focus-visible .ac__go { opacity: 1; transform: none; }
.ac__txt { display: grid; gap: 8px; }
.ac__meta { display: flex; align-items: center; gap: 10px; }
.ac__meta small, .ac__by { font-family: var(--f-ui); font-size: .75rem; color: var(--ink-3); }
.ac b { font-size: 1.0938rem; font-weight: 800; line-height: 1.8; color: var(--navy-800); background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 1.5px; transition: background-size .55s var(--ease-out), color .25s; }
.ac:hover b { background-size: 100% 1.5px; color: var(--tone-ink); }
.ac.is-pre { opacity: 0; }

/* ==========================================================================
   فهرست همه‌ی مقاله‌ها
   ========================================================================== */
.ax-hero .pg-stats dd.ax-last { font-size: clamp(1.05rem, .9rem + .6vw, 1.4rem); line-height: 2.2; }
.axf { padding-top: clamp(36px, 6vh, 64px); background: #fff; }
.axf__stage { position: relative; aspect-ratio: 16 / 7; overflow: hidden; isolation: isolate; border-radius: clamp(16px, 2vw, 26px); background: #0B1A33; touch-action: pan-y; }
.axf__slide { position: absolute; inset: 0; z-index: 0; overflow: hidden; visibility: hidden; }
.axf__slide.is-on { visibility: visible; z-index: 2; }
.axf__slide.is-under { visibility: visible; z-index: 1; }
.axf__in { position: absolute; inset: 0; display: block; }
.axf__in img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
.axf__slide:focus-visible { outline: none; }
.axf__stage:has(.axf__slide:focus-visible) { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--blue); }
.axf__shade { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(0deg, rgba(6, 12, 30, .88) 0%, rgba(6, 12, 30, .45) 40%, rgba(6, 12, 30, 0) 68%), linear-gradient(270deg, rgba(6, 12, 30, .4), rgba(6, 12, 30, 0) 60%); }
.axf__txt { position: absolute; z-index: 4; inset-inline: clamp(20px, 4vw, 44px) auto; bottom: clamp(22px, 3.6vw, 38px); max-width: min(640px, calc(100% - 220px)); color: #fff; pointer-events: none; }
.axf__t { display: grid; justify-items: start; gap: 12px; }
.axf__t[hidden] { display: none; }
.axf__t b { font-size: clamp(1.3rem, .95rem + 1.4vw, 2.2rem); font-weight: 800; line-height: 1.5; }
.axf__t small { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-ui); font-size: .8125rem; color: rgba(255, 255, 255, .8); }
.axf__t small .ic { width: 15px; height: 15px; }
.axf__go { position: absolute; z-index: 4; left: clamp(20px, 3.6vw, 38px); bottom: clamp(22px, 3.6vw, 38px); display: inline-flex; align-items: center; gap: 8px; height: 46px; padding-inline: 20px 16px; border-radius: 999px; background: #fff; color: var(--navy-800); font-size: .9375rem; font-weight: 700; pointer-events: none; transition: transform .5s var(--spring), box-shadow .3s; }
.axf__go .ic { width: 18px; height: 18px; transition: transform .5s var(--spring); }
.axf__stage:hover .axf__go { transform: translate3d(-4px, 0, 0); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .6); }
.axf__stage:hover .axf__go .ic { transform: translate3d(-4px, 0, 0); }
.axf__nav { display: flex; align-items: center; gap: 18px; margin-top: 16px; }
.axf__idx { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.axf__idx button { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 4px 8px; padding-top: 6px; text-align: start; color: var(--ink-3); transition: color .3s; }
.axf__idx button:hover, .axf__idx button[aria-current] { color: var(--navy-800); }
.axf__no { font-family: var(--f-ui); font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.axf__c { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .8125rem; font-weight: 600; }
.axf__bar { grid-column: 1 / -1; position: relative; display: block; height: 2px; margin-top: 4px; overflow: hidden; border-radius: 2px; background: var(--line); }
.axf__bar i { position: absolute; inset: 0; background: var(--navy-800); transform-origin: 100% 50%; transform: scaleX(0); }
.axf__idx button[aria-current] .axf__bar i { transform: scaleX(1); }
.axf__arrows { display: flex; gap: 8px; }
.axf__arrow { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--navy-800); box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color .25s, color .25s, box-shadow .25s; }
.axf__arrow:hover { background: var(--navy-800); color: #fff; box-shadow: none; }
.axf__arrow .ic { width: 18px; height: 18px; }

.ax-list { position: relative; padding-top: clamp(40px, 7vh, 72px); padding-bottom: clamp(56px, 9vh, 100px); background: #fff; }
.ax-tabs button small { margin-inline-start: 4px; font-family: var(--f-ui); font-size: .75rem; font-weight: 600; opacity: .6; }
.ax-tabs:not(.has-pill) { padding: 4px; background: #fff; border-radius: calc(var(--r1) + 4px); }
.ax-grid { margin-top: clamp(28px, 5vh, 44px); }

/* ---------- اندازه‌های کوچک‌تر ---------- */
@media (max-width: 1099px) {
  .ap-grid { grid-template-columns: minmax(0, 1fr); }
  .ap-side { display: none; }
  .ap-tocm { display: block; }
  .ap-main { max-width: 760px; margin-inline: auto; width: 100%; }
  .ac-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699.98px) {
  .ap-cover { aspect-ratio: 4 / 3; }
  .ap-body h2 { margin-top: 48px; }
  .ap-fig--wide { margin-inline: 0; }
  .ap-mg { margin-inline: -4px; border-radius: 18px; }
  .ap-cta__acts, .ap-cta__acts .btn { width: 100%; justify-content: center; }
  .ac-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ac { grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 14px; }
  .ac__img { aspect-ratio: 1; border-radius: 12px; }
  .ac__no { top: 8px; right: 8px; font-size: .6875rem; }
  .ac__go { display: none; }
  .ac b { font-size: 1rem; line-height: 1.7; }
  .axf__stage { aspect-ratio: 4 / 5; }
  .axf__txt { inset-inline: 18px; max-width: none; bottom: 82px; }
  .axf__go { left: auto; right: 18px; bottom: 20px; height: 42px; }
  .axf__c, .axf__arrows { display: none; }
  .axf__idx { gap: 8px; }
  .ax-bar .ar-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ax-bar .ar-tabs::-webkit-scrollbar { display: none; }
  .ax-bar .ar-tabs button { flex: none; }
  .ax-count { display: none; }
}
html.rm .ap-toc a::before, html.rm .ac__img img, html.rm .ac__go, html.rm .ap-q summary i::after { transition: none; }