@font-face {
  font-family: Vazirmatn;
  src: url("/fonts/vazirmatn-var.woff2") format("woff2-variations");
  font-weight: 300 800; font-display: swap;
}
@font-face {
  font-family: Markazi;
  src: url("/fonts/markazi-arabic.woff2") format("woff2");
  font-weight: 400 700; font-display: swap;
}

/* ==========================================================
   شش پوسته. پیش‌فرض «لاجورد».
   جهت طراحی: زمینهٔ تیرهٔ رنگ‌گرفته (نه خاکستری خنثی) با دو لهجهٔ
   اشباع — یکی سرد برای پیوند و کنش، یکی گرم برای عدد و منبع.
   هیچ رنگی فقط داخل یک بلاک تعریف نمی‌شود؛ ریشه همیشه کامل است.
   ========================================================== */

:root,
:root[data-theme="lajvard"] {
  --paper:      #0F1A30;   /* لاجورد عمیق */
  --surface:    #16233F;
  --surface-2:  #1E2E4E;
  --ink:        #EAF0FA;
  --ink-body:   #D2DDEE;   /* متن روان کمی نرم‌تر از تیتر */
  --ink-2:      #A9BAD6;
  --ink-3:      #7387A8;
  --rule:       #2A3B5C;
  --rule-soft:  #1F2E4A;
  --accent:     #3FD0E0;   /* فیروزه */
  --accent-2:   #6FE3EE;
  --accent-bg:  #14304A;
  --brass:      #F2B03B;   /* زعفران */
  --brass-bg:   #33240F;
  --flag:       #FF8A6B;
  --flag-bg:    #3A1C16;
  --icon-invert: 1;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 14px 34px -24px rgba(0,0,0,.95);
}

:root[data-theme="koore"] {
  --paper:      #241610;   /* اخگر کوره */
  --surface:    #2E1E15;
  --surface-2:  #3A271B;
  --ink:        #F7EBE2;
  --ink-body:   #E4D0C1;
  --ink-2:      #D3B9A6;
  --ink-3:      #A08876;
  --rule:       #4A3423;
  --rule-soft:  #33231A;
  --accent:     #FF8A3D;
  --accent-2:   #FFA666;
  --accent-bg:  #3D2312;
  --brass:      #FFCC5C;
  --brass-bg:   #3A2A10;
  --flag:       #FF7A6B;
  --flag-bg:    #3B1A1A;
  --icon-invert: 1;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 34px -24px rgba(0,0,0,.95);
}

:root[data-theme="zomorrod"] {
  --paper:      #0C1F1A;   /* جوهر جنگلی */
  --surface:    #122A24;
  --surface-2:  #18362E;
  --ink:        #E7F6EF;
  --ink-body:   #CBE5D9;
  --ink-2:      #A6C9BA;
  --ink-3:      #6F9486;
  --rule:       #204439;
  --rule-soft:  #163029;
  --accent:     #4ADE80;
  --accent-2:   #7CEBA3;
  --accent-bg:  #12332A;
  --brass:      #E8C468;
  --brass-bg:   #2E2A12;
  --flag:       #FF9E7A;
  --flag-bg:    #3A1F17;
  --icon-invert: 1;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 14px 34px -24px rgba(0,0,0,.95);
}

:root[data-theme="arghavan"] {
  --paper:      #1A1026;   /* آلوچهٔ نیمه‌شب */
  --surface:    #241634;
  --surface-2:  #2F1E43;
  --ink:        #F3EAFB;
  --ink-body:   #DCCCEC;
  --ink-2:      #C3AEDA;
  --ink-3:      #927BAC;
  --rule:       #3C2A54;
  --rule-soft:  #2A1B3D;
  --accent:     #E879C7;
  --accent-2:   #F29BD9;
  --accent-bg:  #33184A;
  --brass:      #F5C563;
  --brass-bg:   #33280F;
  --flag:       #FF8F87;
  --flag-bg:    #3A1B1E;
  --icon-invert: 1;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 34px -24px rgba(0,0,0,.95);
}

:root[data-theme="khakestari"] {
  --paper:      #1B1D1F;   /* خاکستری زغالی */
  --surface:    #232629;
  --surface-2:  #2C3033;
  --ink:        #ECEEEF;
  --ink-body:   #D2D6D9;
  --ink-2:      #AEB4B8;
  --ink-3:      #80878C;
  --rule:       #363B3F;
  --rule-soft:  #292D30;
  --accent:     #9FB6C4;
  --accent-2:   #C0D2DD;
  --accent-bg:  #262E33;
  --brass:      #C9B48C;
  --brass-bg:   #2C2820;
  --flag:       #DE9A85;
  --flag-bg:    #2E201B;
  --icon-invert: 1;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 34px -24px rgba(0,0,0,.95);
}

:root[data-theme="khak"] {
  --paper:      #FAF2E6;   /* کاغذ گرم */
  --surface:    #F3E9D9;
  --surface-2:  #EADCC6;
  --ink:        #23180D;
  --ink-body:   #382A1B;
  --ink-2:      #55442F;
  --ink-3:      #857055;
  --rule:       #DFCDAF;
  --rule-soft:  #EDE1CB;
  --accent:     #0F7C74;
  --accent-2:   #14968C;
  --accent-bg:  #DCEFEC;
  --brass:      #A5651A;
  --brass-bg:   #F2E3C8;
  --flag:       #A03A22;
  --flag-bg:    #F7E1D9;
  --icon-invert: 0;
  --shadow: 0 1px 2px rgba(35,24,13,.05), 0 14px 34px -24px rgba(35,24,13,.4);
}

:root[data-theme="sepid"] {
  --paper:      #F4F5F2;
  --surface:    #EAECE6;
  --surface-2:  #E0E3DB;
  --ink:        #14171A;
  --ink-body:   #23282C;
  --ink-2:      #43494C;
  --ink-3:      #6E7579;
  --rule:       #D2D6CD;
  --rule-soft:  #E2E5DE;
  --accent:     #1C5E86;
  --accent-2:   #257BAE;
  --accent-bg:  #DFEBF2;
  --brass:      #8A6A2C;
  --brass-bg:   #F1EADB;
  --flag:       #8C3A22;
  --flag-bg:    #F6E7E2;
  --icon-invert: 0;
  --shadow: 0 1px 2px rgba(20,23,26,.05), 0 14px 34px -24px rgba(20,23,26,.4);
}

:root {
  --measure: 68ch;
  --step--2: clamp(.72rem, .70rem + .08vw, .78rem);
  --step--1: clamp(.82rem, .80rem + .10vw, .88rem);
  --step-0:  clamp(1rem, .97rem + .16vw, 1.06rem);
  --step-1:  clamp(1.15rem, 1.08rem + .3vw, 1.32rem);
  --step-2:  clamp(1.45rem, 1.3rem + .55vw, 1.8rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.1vw, 2.6rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { direction: rtl; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Vazirmatn, "Segoe UI", Tahoma, sans-serif;
  font-size: var(--step-0);
  line-height: 1.8;
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; min-height: 100vh;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { margin: 0; text-wrap: balance; line-height: 1.25; font-weight: 600; }
h1 { font-family: Markazi, Vazirmatn, serif; font-size: var(--step-3); line-height: 1.12; }
h2 { font-family: Markazi, Vazirmatn, serif; font-size: var(--step-2); line-height: 1.18; }
h3 { font-size: var(--step-1); }
p { margin: 0; max-width: var(--measure); }

a { color: var(--accent); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-2); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: plaintext; white-space: nowrap; }
.eyebrow { font-size: var(--step--1); letter-spacing: .1em; color: var(--ink-3); font-weight: 500; }
.skip { position: absolute; inset-inline-start: -9999px; top: 0; z-index: 99; background: var(--accent); color: var(--paper); padding: .6rem 1rem; }
.skip:focus { inset-inline-start: 0; }

/* ---------- چیدمان ---------- */
.shell { max-width: 76rem; margin-inline: auto; width: 100%; padding-inline: clamp(1rem, 4vw, 2.5rem); }
.body-wrap { flex: 1 0 auto; }
main { display: flex; flex-direction: column; gap: clamp(2.25rem, 4vw, 3.25rem); padding-block: clamp(1.5rem, 3vw, 2.5rem) 3.5rem; }
section { display: flex; flex-direction: column; gap: 1rem; scroll-margin-top: 5rem; }

.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; border-bottom: 1px solid var(--rule); padding-bottom: .45rem; }
.sec-head h2 { flex: 1 1 auto; }
.sec-head a, .sec-head .note { font-size: var(--step--1); white-space: nowrap; color: var(--ink-3); }

/* ---------- سربرگ ---------- */
.masthead { border-bottom: 1px solid var(--rule); background: var(--surface); position: sticky; top: 0; z-index: 20; }
.masthead-in { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.25rem; padding-block: .6rem; }
.brand { font-weight: 700; font-size: var(--step-1); letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.brand span { color: var(--accent); }
.mainnav { display: flex; gap: .15rem; flex: 1 1 auto; flex-wrap: wrap; }
.mainnav a { color: var(--ink-2); text-decoration: none; font-size: var(--step--1); padding: .5rem .65rem; border-radius: 4px; min-height: 44px; display: inline-flex; align-items: center; }
.mainnav a:hover { background: var(--surface-2); color: var(--ink); }
.mainnav a[aria-current="page"] { color: var(--accent); font-weight: 600; }
@media (max-width: 52rem) {
  .masthead-in { padding-block: .45rem; }
  .mainnav {
    flex-wrap: nowrap; overflow-x: auto; width: 100%;
    scrollbar-width: none; -ms-overflow-style: none;
    margin-inline: calc(clamp(1rem, 4vw, 2.5rem) * -1);
    padding-inline: clamp(1rem, 4vw, 2.5rem);
  }
  .mainnav::-webkit-scrollbar { display: none; }
  .mainnav a { white-space: nowrap; padding-inline: .5rem; }
}

/* ---------- شبکهٔ بالای صفحهٔ اول ---------- */
.hero-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 50rem) { .hero-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 68rem) { .hero-grid { grid-template-columns: 1fr 1fr 1.05fr; } }

/* ---------- تابلوی قیمت ---------- */
.panel { border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); display: flex; flex-direction: column; overflow: hidden; }
.panel-head { padding: .7rem .95rem; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: .1rem; background: var(--surface-2); }
.panel-title { font-family: Markazi, Vazirmatn, serif; font-size: var(--step-1); font-weight: 600; line-height: 1.2; }
.panel-sub { font-size: var(--step--2); color: var(--ink-3); }
.panel-body { display: flex; flex-direction: column; }

.prow { display: grid; grid-template-columns: 1fr auto; gap: 0 .8rem; align-items: baseline; padding: .6rem .95rem; border-bottom: 1px solid var(--rule-soft); }
.prow:last-child { border-bottom: 0; }
.prow:hover { background: var(--surface-2); }
.prow-name { font-weight: 500; font-size: var(--step-1); font-family: Markazi, Vazirmatn, serif; }
.prow-val { font-size: var(--step-1); font-weight: 600; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: plaintext; color: var(--ink); }
.prow-meta { grid-column: 1 / -1; font-size: var(--step--2); color: var(--ink-3); margin-top: -.15rem; }
.prow-range { color: var(--brass); font-variant-numeric: tabular-nums; unicode-bidi: plaintext; }
.panel-foot { padding: .6rem .95rem; border-top: 1px solid var(--rule); font-size: var(--step--2); color: var(--ink-3); line-height: 1.7; background: var(--surface-2); }

.stamp { display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: var(--step--1); color: var(--ink-3); }
.stamp b { color: var(--ink-2); font-weight: 500; }
.live { display: inline-flex; align-items: center; gap: .4rem; color: var(--brass); font-weight: 500; }
.live::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--brass); flex: none; }

/* ---------- محاسبه‌گر ---------- */
.calc { gap: 0; }
.calc-body { padding: .95rem; display: flex; flex-direction: column; gap: .8rem; }
.field { display: flex; flex-direction: column; gap: .3rem; }
.field label { font-size: var(--step--1); color: var(--ink-2); font-weight: 500; }
.field select, .field input {
  font: inherit; font-family: Vazirmatn, sans-serif; font-size: var(--step-0);
  padding: .5rem .65rem; border: 1px solid var(--rule); border-radius: 5px;
  background: var(--paper); color: var(--ink); width: 100%; min-height: 44px;
  font-variant-numeric: tabular-nums;
}
.field-row { display: grid; gap: .8rem; grid-template-columns: 1fr 1fr; }
.calc-out { border-top: 1px solid var(--rule); padding: .85rem .95rem; display: flex; flex-direction: column; gap: .55rem; background: var(--surface-2); }
.oline { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; font-size: var(--step--1); }
.oline b { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: plaintext; font-weight: 600; font-size: var(--step-0); }
.oline.lead b { font-size: var(--step-2); color: var(--accent); font-family: Markazi, Vazirmatn, serif; }
.calc-note { font-size: var(--step--2); color: var(--ink-3); line-height: 1.7; padding: 0 .95rem .9rem; }

/* ---------- کارت و فهرست ---------- */
.cards { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
.card { border: 1px solid var(--rule); border-radius: 5px; background: var(--surface); padding: .8rem .9rem; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: .2rem; transition: border-color .15s; }
.card:hover { border-color: var(--accent); }
.card-title { font-weight: 600; color: var(--ink); }
.card-sub { font-size: var(--step--1); color: var(--ink-3); line-height: 1.6; }

.reads { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.read { border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: border-color .15s; }
.read:hover { border-color: var(--accent); }
.read:hover .read-title { color: var(--accent); }
.read img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; background: var(--surface-2); }
.read-text { padding: .75rem .9rem .9rem; display: flex; flex-direction: column; gap: .25rem; }
.read-cat { font-size: var(--step--2); color: var(--brass); letter-spacing: .06em; }
.read-title { font-weight: 600; color: var(--ink); line-height: 1.5; }

.readlist { display: grid; gap: 0; }
.readrow { display: grid; gap: .1rem .9rem; grid-template-columns: 1fr; padding: .8rem 0; border-bottom: 1px solid var(--rule-soft); text-decoration: none; color: inherit; }
@media (min-width: 46rem) { .readrow { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); align-items: baseline; } }
.readrow:hover .read-title { color: var(--accent); }
.readrow .read-hook { font-size: var(--step--1); color: var(--ink-2); line-height: 1.7; }

/* ---------- پاسخ سریع ---------- */
.qa { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.qa-item { border-inline-start: 2px solid var(--rule); padding-inline-start: .8rem; display: flex; flex-direction: column; gap: .15rem; }
.qa-q { font-weight: 600; font-size: var(--step--1); }
.qa-a { font-size: var(--step--1); color: var(--ink-2); line-height: 1.7; }

/* ---------- آمار ---------- */
.stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); }
.stat { display: flex; flex-direction: column; gap: .05rem; }
.stat-v { font-family: Markazi, Vazirmatn, serif; font-size: var(--step-3); font-weight: 600; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; unicode-bidi: plaintext; }
.stat-k { font-size: var(--step--1); color: var(--ink-3); line-height: 1.5; }

/* ---------- جدول عمومی ---------- */
.tablewrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: var(--step--1); }
th, td { padding: .55rem .8rem; text-align: start; border-bottom: 1px solid var(--rule-soft); vertical-align: baseline; }
thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); color: var(--ink-2); font-weight: 600; border-bottom: 1px solid var(--rule); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }
.filterbar { display: flex; flex-wrap: wrap; gap: .7rem; align-items: end; }
.filterbar .field { flex: 1 1 11rem; }

/* ---------- مقاله ---------- */
.article { max-width: 44rem; }
.article p, .article li { text-align: justify; text-justify: inter-word; }
.article p { margin: 0; max-width: none; }
.article ul { margin: 0; padding-inline-start: 1.2rem; display: flex; flex-direction: column; gap: .35rem; }
.article figure { margin: 0; }
.article figure img { border-radius: 6px; border: 1px solid var(--rule); aspect-ratio: 2 / 1; object-fit: cover; }
.article figcaption { font-size: var(--step--2); color: var(--ink-3); padding-top: .4rem; text-align: start; }
.lede { font-size: var(--step-1); line-height: 1.7; color: var(--ink-2); font-weight: 300; }

.note {
  border: 1px solid var(--rule); border-inline-start: 3px solid var(--brass);
  border-radius: 5px; padding: .85rem 1rem; background: var(--surface);
  font-size: var(--step--1); line-height: 1.75; color: var(--ink-2); max-width: var(--measure);
}
.note b { color: var(--ink); font-weight: 600; }

/* ---------- پاورقی و تم ---------- */
.pagefoot { border-top: 1px solid var(--rule); background: var(--surface); padding-block: 2rem 2.25rem; }
.footgrid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.footcol { display: flex; flex-direction: column; gap: .35rem; }
.footcol h3 { font-size: var(--step--1); color: var(--ink-3); font-weight: 600; letter-spacing: .06em; }
.footcol a { font-size: var(--step--1); color: var(--ink-2); text-decoration: none; }
.footcol a:hover { color: var(--accent); text-decoration: underline; }

.themebar { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--rule-soft); }
.themebar span { font-size: var(--step--1); color: var(--ink-3); margin-inline-end: .3rem; }
.themebtn {
  font: inherit; font-size: var(--step--1); font-family: Vazirmatn, sans-serif;
  cursor: pointer; padding: .4rem .8rem; min-height: 40px;
  border: 1px solid var(--rule); border-radius: 999px;
  background: var(--paper); color: var(--ink-2);
  display: inline-flex; align-items: center; gap: .45rem;
}
.themebtn:hover { border-color: var(--accent); color: var(--ink); }
.themebtn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.swatch { width: .8rem; height: .8rem; border-radius: 50%; border: 1px solid rgba(128,128,128,.45); flex: none; }

.footnote { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--rule-soft); font-size: var(--step--2); color: var(--ink-3); display: flex; flex-direction: column; gap: .3rem; max-width: 62ch; line-height: 1.8; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================
   افزوده‌های نسخهٔ ۱.۰.۱
   ========================================================== */

/* ---------- نوار شاخص چسبان: امضای بصری سایت ----------
   عدد مرجع بازار در همهٔ صفحات زیر سربرگ می‌ماند. کاربر برگشتی
   بدون اسکرول جوابش را می‌گیرد و سایت «زنده» حس می‌شود. */
.ticker {
  position: sticky; top: 0; z-index: 19;
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.masthead { z-index: 21; }
.ticker-in {
  display: flex; align-items: center; gap: .5rem 1.4rem;
  padding-block: .4rem; font-size: var(--step--1);
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  white-space: nowrap;
}
.ticker-in::-webkit-scrollbar { display: none; }
.ticker-label {
  color: var(--brass); font-weight: 600; flex: none;
  display: inline-flex; align-items: center; gap: .4rem;
}
.ticker-label::before {
  content: ""; width: .45rem; height: .45rem; border-radius: 50%;
  background: var(--brass); flex: none;
}
.ticker-item { color: var(--ink-2); flex: none; }
.ticker-item b {
  color: var(--ink); font-weight: 600; margin-inline-start: .3rem;
  font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: plaintext;
}
.ticker-when { color: var(--ink-3); flex: none; margin-inline-start: auto; }

/* ---------- جدول یکپارچهٔ قیمت ---------- */
.ptable { width: 100%; border-collapse: collapse; }
.ptable thead th {
  position: static; background: var(--surface-2); color: var(--ink-2);
  font-size: var(--step--2); font-weight: 600; letter-spacing: .03em;
  padding: .5rem .8rem; border-bottom: 1px solid var(--rule); white-space: nowrap;
}
.ptable thead th:not(:first-child) { text-align: center; }
.ptable td { padding: .55rem .8rem; border-bottom: 1px solid var(--rule-soft); }
.ptable tbody tr:last-child td { border-bottom: 0; }
.ptable tbody tr:hover { background: var(--surface-2); }
.pt-name { font-family: Markazi, Vazirmatn, serif; font-size: var(--step-1); font-weight: 600; color: var(--ink); }
.pt-val {
  text-align: center; font-size: var(--step-1); font-weight: 600;
  font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: plaintext;
  color: var(--ink); white-space: nowrap;
}
.pt-val span { display: block; font-size: var(--step--2); font-weight: 400; color: var(--ink-3); direction: rtl; }
.pt-val.empty { color: var(--ink-3); font-weight: 400; }

/* ستون‌های قیمت و محاسبه‌گر هم‌ارتفاع */
.hero-grid { align-items: stretch; }
.hero-grid > .panel { height: 100%; }
.panel-body { flex: 1 1 auto; }
@media (min-width: 62rem) { .hero-grid.two { grid-template-columns: 1.35fr 1fr; } }

/* ---------- آمار وسط‌چین ---------- */
.stats.center .stat { align-items: center; text-align: center; }
.stats.center .stat-k { max-width: 14rem; }

/* ---------- نوار زیر عکس مطلب: اشتراک‌گذاری و متادیتا ---------- */
.postmeta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
  padding: .6rem 0; border-bottom: 1px solid var(--rule-soft);
  font-size: var(--step--2); color: var(--ink-3);
}
.postmeta .mi { display: inline-flex; align-items: center; gap: .35rem; }
.postmeta svg { width: 1em; height: 1em; flex: none; opacity: .85; }
.share { display: flex; align-items: center; gap: .3rem; margin-inline-start: auto; }
.share a, .share button {
  width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--rule); background: var(--surface);
  color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center;
  padding: 0; transition: border-color .15s, color .15s, background .15s;
}
.share a:hover, .share button:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.share svg { width: 17px; height: 17px; }
.share .copied { color: var(--brass); border-color: var(--brass); }
.share-msg { font-size: var(--step--2); color: var(--brass); }

/* ---------- متن مطلب ---------- */
.article { color: var(--ink-body); }
.article p, .article li { color: var(--ink-body); }
.article h2 { color: var(--accent); margin-top: .4rem; }
.article h3 { color: var(--accent-2); }
.article a { text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--accent) 45%, transparent); }
.article a:hover { text-decoration-color: var(--accent-2); }

/* ---------- خواندنی‌های مرتبط ---------- */
.related { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.rel {
  display: flex; flex-direction: column; gap: .45rem;
  text-decoration: none; color: inherit;
  border: 1px solid var(--rule); border-radius: 6px; overflow: hidden;
  background: var(--surface); transition: border-color .15s;
}
.rel:hover { border-color: var(--accent); }
.rel img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; background: var(--surface-2); }
.rel span { padding: 0 .7rem .7rem; font-size: var(--step--1); font-weight: 500; line-height: 1.55; color: var(--ink); }
.rel:hover span { color: var(--accent); }

/* ---------- سرستون پاورقی: باید از لینک‌ها متمایز باشد ---------- */
.footcol h3 {
  color: var(--brass); font-size: var(--step--2); letter-spacing: .12em;
  text-transform: none; padding-bottom: .2rem; border-bottom: 1px solid var(--rule-soft);
  margin-bottom: .2rem;
}
.footver { font-size: var(--step--2); color: var(--ink-3); padding-top: .8rem; }
.footver code { font-family: inherit; color: var(--ink-2); }

/* ==========================================================
   افزوده‌های تکمیل نسخهٔ ۱.۰.۱
   ========================================================== */

/* ---------- جستجوی سربرگ ---------- */
.hsearch { display: flex; align-items: center; gap: .35rem; flex: none; margin-inline-start: auto; }
.hsearch input {
  font: inherit; font-family: Vazirmatn, sans-serif; font-size: var(--step--1);
  padding: .4rem .7rem; min-height: 38px; width: clamp(8rem, 18vw, 13rem);
  border: 1px solid var(--rule); border-radius: 999px;
  background: var(--paper); color: var(--ink);
}
.hsearch input::placeholder { color: var(--ink-3); }
.hsearch button {
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink-2);
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.hsearch button:hover { border-color: var(--accent); color: var(--accent); }
.hsearch svg { width: 16px; height: 16px; }
@media (max-width: 52rem) {
  .hsearch { order: 3; width: 100%; margin-inline-start: 0; }
  .hsearch input { width: 100%; }
}

/* ---------- نوار قیمت گردان ---------- */
.ticker-in { display: block; padding-block: .35rem; overflow: hidden; }
/* ریل باید چپ‌به‌راست بچیند وگرنه در صفحهٔ RTL از کادر بیرون می‌افتد
   و نوار خالی دیده می‌شود. متن هر آیتم جداگانه راست‌به‌چپ می‌ماند. */
.marquee { overflow: hidden; position: relative; direction: ltr; }
.marquee-track {
  display: flex; width: max-content; align-items: center; gap: 2.2rem;
  white-space: nowrap; will-change: transform;
  animation: marquee 60s linear infinite;
}
.marquee-track > .tk { direction: rtl; }
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
  .marquee-track { animation: none; transform: none; }
}
.tk { color: var(--ink-2); font-size: var(--step--1); flex: none; }
.tk b {
  color: var(--ink); font-weight: 600; margin-inline-start: .35rem;
  font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: plaintext;
}
.tk i { color: var(--ink-3); font-style: normal; margin-inline-start: .2rem; }

/* ---------- جدول قیمت جمع‌وجورتر ---------- */
.ptable thead th { padding: .4rem .7rem; font-size: 11px; }
.ptable td { padding: .38rem .7rem; }
.pt-name { font-size: var(--step-0); }
.pt-val { font-size: var(--step-0); }
.pt-val span { font-size: 10.5px; line-height: 1.5; }
.panel-head { padding: .55rem .9rem; }
.panel-foot { padding: .45rem .9rem; }
.calc-body { padding: .8rem .9rem; gap: .6rem; }
.calc-out { padding: .7rem .9rem; gap: .38rem; }
.field select, .field input { padding: .42rem .6rem; min-height: 40px; }
.oline.lead b { font-size: var(--step-1); }
.tablelink { font-size: var(--step--1); padding-top: .2rem; }

/* ---------- قیمت‌های تفکیکی ---------- */
.tafgrid { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
.tafcell {
  border: 1px solid var(--rule); border-radius: 5px; background: var(--surface);
  padding: .5rem .65rem; display: flex; flex-direction: column; gap: .1rem;
}
.tafcell .n { font-size: var(--step--1); color: var(--ink-2); line-height: 1.5; }
.tafcell .v {
  font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums;
  direction: ltr; unicode-bidi: plaintext; font-size: var(--step-0);
}
.tafcell .v em { font-style: normal; font-size: .72em; font-weight: 400; color: var(--ink-3); margin-inline-start: .3em; }
.tafcell[hidden] { display: none; }
@media (min-width: 68rem) { .tafgrid { grid-template-columns: repeat(6, 1fr); } }

/* ---------- شبکهٔ خواندنی‌ها و صفحه‌بندی ---------- */
.reads.grid3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
@media (min-width: 60rem) { .reads.grid3 { grid-template-columns: repeat(3, 1fr); } }
.pager { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; justify-content: center; padding-top: .6rem; }
.pager a, .pager span {
  min-width: 40px; min-height: 40px; padding: .3rem .7rem; border-radius: 6px;
  border: 1px solid var(--rule); display: inline-flex; align-items: center;
  justify-content: center; text-decoration: none; color: var(--ink-2);
  font-size: var(--step--1); font-variant-numeric: tabular-nums;
}
.pager a:hover { border-color: var(--accent); color: var(--accent); }
.pager [aria-current="page"] { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.pager .off { opacity: .4; }

/* ---------- آیکون شبکه‌های اجتماعی با لوگوی واقعی ---------- */
.share img { width: 19px; height: 19px; border-radius: 4px; }

/* ---------- توضیحات محاسبه‌گر به‌صورت فهرست ---------- */
ul.calc-note {
  padding: 0 .9rem .8rem 1.9rem; margin: 0; font-size: var(--step--2);
  color: var(--ink-3); line-height: 1.75; display: flex; flex-direction: column; gap: .35rem;
}

/* ---------- پاورقی وسط‌چین ---------- */
.footnote { align-items: center; text-align: center; max-width: none; margin-inline: auto; }
.footver { text-align: center; }
.themebar { justify-content: center; }

/* ---------- تکمیل: فوتر پنل دوبخشی ---------- */
.panel-foot.pf-split { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline; justify-content: space-between; }
.panel-foot.pf-split a { color: var(--accent); text-decoration: none; white-space: nowrap; }
.panel-foot.pf-split a:hover { text-decoration: underline; }

/* ---------- تکمیل: جدول قیمت کمی درشت‌تر ---------- */
.ptable thead th { padding: .5rem .8rem; font-size: 11.5px; }
.ptable td { padding: .52rem .8rem; }
.pt-name { font-size: var(--step-1); }
.pt-val { font-size: var(--step-1); }
.pt-val span { font-size: 11px; }

/* ---------- تکمیل: فاصلهٔ فهرست توضیحات محاسبه‌گر ---------- */
ul.calc-note { padding: .85rem 1.6rem 1rem 1.1rem; margin: 0; border-top: 1px solid var(--rule-soft); }

/* ---------- آیکون‌های اشتراک‌گذاری با رنگ اصلی برند ----------
   دکمه‌ها بی‌قاب می‌مانند تا خود لوگو دیده شود؛ فقط کمی بزرگ‌تر
   می‌شوند تا بازخورد لمس و هاور حس شود. */
.share a, .share button {
  border: 0; background: none; width: 30px; height: 30px;
  transition: transform .15s;
}
.share a:hover, .share button:hover {
  background: none; border: 0; transform: scale(1.12);
}
.share svg { width: 26px; height: 26px; }
.share img { width: 26px; height: 26px; border-radius: 6px; }
.share button.copied svg circle { fill: var(--brass); }

/* ---------- نوار: برچسب ثابت راست، تاریخ ثابت چپ ---------- */
.ticker-in {
  display: flex; align-items: center; gap: .9rem;
  padding-block: .35rem; overflow: hidden;
}
.ticker-in > .marquee { flex: 1 1 auto; min-width: 0; }
.ticker-label, .ticker-when { flex: none; }
@media (max-width: 40rem) { .ticker-when { display: none; } }
