body{margin:0;background:var(--bg)}

/* Topbar */
.ptopbar{
  position:sticky;top:0;z-index:10;
  display:flex;gap:10px;align-items:center;justify-content:space-between;
  padding:10px 12px;background:#fff;border-bottom:1px solid var(--border);
}
.pt{font-weight:900}
.pbtns{display:flex;gap:8px;flex-wrap:wrap}
.piconbtn{
  border:1px solid var(--border);background:#fff;border-radius:12px;
  padding:8px 10px;font-family:inherit;cursor:pointer;color:inherit
}

/* Header */
.phead{
  display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap
}
.ptitle{font-weight:900;font-size:15px}
.psub{margin-top:6px;color:var(--muted);font-size:12px;line-height:1.9}
.pminiLink{
  border:1px solid rgba(37,99,235,.35);
  background:rgba(37,99,235,.08);
  color:var(--text);
  padding:10px 12px;border-radius:14px;font-weight:900;
  display:inline-flex;align-items:center;justify-content:center;
}

/* Filters */
.pfilters{margin-top:12px}
.psearch{display:flex;gap:8px;flex-wrap:wrap}
.pminiBtn{
  border:1px solid var(--border);background:#fff;border-radius:14px;
  padding:10px 12px;font-weight:900;cursor:pointer;font-family:inherit
}

/* tag row */
.ptags{
  margin-top:10px;
  display:flex;gap:8px;flex-wrap:wrap;
}
.ptagBtn{
  border:1px solid var(--border);
  background:#fff;
  border-radius:999px;
  padding:8px 12px;
  font-family:inherit;
  cursor:pointer;
  font-weight:900;
  font-size:12px;
  color:var(--text);
}
.ptagBtn.on{
  border-color:rgba(37,99,235,.35);
  background:linear-gradient(135deg, rgba(37,99,235,.10), rgba(124,58,237,.08));
}

/* List */
.plist{display:grid;gap:10px;margin-top:12px}

/* Card */
.pcard{
  display:grid;
  grid-template-columns: 110px 1fr;
  gap:12px;
  border:1px solid var(--border);
  border-radius:18px;
  background:#fff;
  padding:10px;
  text-decoration:none;
  color:inherit;
  overflow:hidden;
}
.pcard:active{transform:translateY(1px)}

@media (max-width:380px){
  .pcard{grid-template-columns: 98px 1fr;}
}

.pmedia{position:relative}
.pcover{
  width:100%;
  height:96px;
  border-radius:16px;
  border:1px solid var(--border);
  background:#fff;
  object-fit:cover;
  display:block;
}
.pstrip{
  margin-top:8px;
  display:flex;
  gap:6px;
}
.pminiImg{
  width: calc((100% - 12px) / 3);
  height: 34px;
  border-radius:10px;
  border:1px solid var(--border);
  object-fit:cover;
  background:#fff;
  display:block;
}

/* Body */
.pbody{min-width:0}
.prow{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:space-between;
}
.pname{
  font-weight:900;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pgo{
  font-size:12px;
  font-weight:900;
  color:#334155;
  border:1px solid var(--border);
  background:#fff;
  border-radius:999px;
  padding:6px 10px;
}

.platin{
  margin-top:6px;
  font-size:12px;
  direction:ltr;
  text-align:left;
  color:#334155;
  opacity:.95;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.platin .pdot{margin:0 6px; opacity:.6}

.pmeta{
  margin-top:6px;
  color:var(--muted);
  font-size:12px;
  line-height:1.9;
}
.pdesc{
  margin-top:6px;
  color:#334155;
  font-size:12px;
  line-height:1.9;
}

/* Chips */
.pchips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
.pchip{
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  background:#fff;
}
.pchip.soft{
  border-color:rgba(37,99,235,.25);
  background:rgba(37,99,235,.06);
  color:#0f172a;
}
.pchip.muted{
  opacity:.8;
}

/* Empty/Error */
.pempty{
  border:1px dashed var(--border);
  border-radius:18px;
  padding:14px;
  color:var(--muted);
  text-align:center;
  line-height:1.9;
  margin-top:12px;
}

    /* اولویت بالا برای اینکه “حتماً” اعمال شود */
    .contentWrap .contentCard{overflow:hidden}
    .phead{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
    .ptitle{font-weight:900;font-size:18px;line-height:1.7;color:var(--text)}
    .pmeta{margin-top:6px;color:var(--muted);font-size:13px;line-height:2}
    .pmeta.ltr{direction:ltr;text-align:left}
    .ptags{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
    .ptag{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:#fff;
      padding:6px 10px;border-radius:999px;font-size:12px;color:#0f172a}

    /* Slider */
    .ps{margin-top:12px;border:1px solid var(--border);background:#fff;border-radius:18px;overflow:hidden}
    .ps-viewport{position:relative;overflow:hidden}
    .ps-track{display:flex;width:100%;transform:translateX(0);transition:transform .28s ease;will-change:transform}
    .ps-slide{flex:0 0 100%;height:clamp(170px, 30vw, 280px);background:#f8fafc}
    .ps-slide img{width:100%;height:100%;object-fit:cover;display:block}
    .ps-nav{
      position:absolute;top:50%;transform:translateY(-50%);
      width:42px;height:42px;border-radius:14px;
      border:1px solid rgba(226,232,240,.9);
      background:rgba(255,255,255,.92);
      backdrop-filter: blur(6px);
      cursor:pointer;z-index:3;
      display:grid;place-items:center;
      font-size:20px;color:#0f172a;
    }
    .ps-prev{right:10px}
    .ps-next{left:10px}
    .ps-nav:disabled{opacity:.45;cursor:not-allowed}

    .ps-dots{display:flex;gap:8px;justify-content:center;padding:10px 12px;background:#fff}
    .ps-dot{width:10px;height:10px;border-radius:999px;border:1px solid var(--border);background:#fff;cursor:pointer}
    .ps-dot.is-active{background:rgba(37,99,235,.25);border-color:rgba(37,99,235,.45)}

    /* Content boxes (اگر content_html ساختار gdoc/gbox دارد) */
    .gdoc{margin-top:12px;line-height:2.05}
    .gbox{border:1px solid var(--border);border-radius:18px;padding:14px;background:#fff;margin-top:12px}
    .gbox h2,.gbox h3{margin:0 0 8px;font-weight:900;color:var(--text)}
    .gbox p{margin:0;color:#334155}
    .gbox ul{margin:0;padding-right:18px;color:#334155}
    .gbox li{margin:6px 0}

    .gintro{background:linear-gradient(135deg, rgba(37,99,235,.08), rgba(124,58,237,.06))}
    .gsimple{background:linear-gradient(135deg, rgba(14,165,233,.08), rgba(240,249,255,.92))}
    .gscience{background:linear-gradient(135deg, rgba(22,163,74,.08), rgba(240,253,244,.92))}
    .guse{background:linear-gradient(135deg, rgba(245,158,11,.10), rgba(255,251,235,.92))}
    .gexamples{background:linear-gradient(135deg, rgba(236,72,153,.08), rgba(253,242,248,.92))}
   
   /* =========================
   Plant content boxes (ROBUST)
   حتی اگر content_html کلاس نداشته باشد
   ========================= */

/* ظرف محتوا */
.formulaBody{margin-top:12px;line-height:2.05}

/* هر section داخل content_html را باکس کن */
.formulaBody > section{
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px;
  background:#fff;
  margin-top:12px;
}

/* تیترها */
.formulaBody > section h2,
.formulaBody > section h3{
  margin:0 0 10px;
  font-weight:900;
  color:var(--text);
}

/* متن‌ها */
.formulaBody > section p{
  margin:0;
  color:#334155;
}

/* لیست‌ها */
.formulaBody > section ul{
  margin:0;
  padding-right:18px;
  color:#334155;
}
.formulaBody > section li{margin:6px 0}

/* اگر داخل section چند پاراگراف پشت سر هم بود */
.formulaBody > section p + p{margin-top:10px}

/* اگر در content_html کلاس‌های gbox/gdoc وجود داشت هم پشتیبانی کن */
.formulaBody .gdoc{margin-top:12px;line-height:2.05}
.formulaBody .gbox{
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px;
  background:#fff;
  margin-top:12px;
}
/* رنگ‌بندی خودکار بر اساس ترتیب (اختیاری ولی خیلی شیک) */
.formulaBody > section:nth-of-type(1){
  background:linear-gradient(135deg, rgba(37,99,235,.08), rgba(124,58,237,.06));
}
.formulaBody > section:nth-of-type(2){
  background:linear-gradient(135deg, rgba(14,165,233,.08), rgba(240,249,255,.92));
}
.formulaBody > section:nth-of-type(3){
  background:linear-gradient(135deg, rgba(22,163,74,.08), rgba(240,253,244,.92));
}
.formulaBody > section:nth-of-type(4){
  background:linear-gradient(135deg, rgba(245,158,11,.10), rgba(255,251,235,.92));
}
.formulaBody > section:nth-of-type(5){
  background:linear-gradient(135deg, rgba(236,72,153,.08), rgba(253,242,248,.92));
}
.formulaBody > section:nth-of-type(6){
  background:linear-gradient(135deg, rgba(239,68,68,.06), rgba(254,242,242,.92));
}

.formulaBody section,
.formulaBody .gbox,
.formulaBody article > div{
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px;
  background:#fff;
  margin-top:12px;
}
 .pdoc{
    margin-top:12px;
    display:grid;
    gap:12px;
    line-height:2.05;
  }

  .pdoc .pbox{
    border:1px solid var(--border);
    border-radius:18px;
    padding:14px;
    background:#fff;
    overflow:hidden;
  }

  /* تیتر و متن داخل باکس‌ها */
  .pdoc .pbox .h3{
    margin:0 0 8px;
    font-weight:900;
    font-size:15px;
    color:var(--text);
    line-height:1.8;
  }
  .pdoc .pbox .p{
    margin:0;
    color:#334155;
    font-size:13.5px;
    line-height:2.05;
  }

  /* لیست‌ها اگر داخل محتوا بود */
  .pdoc .pbox ul{margin:8px 0 0;padding-right:18px;color:#334155}
  .pdoc .pbox li{margin:6px 0}

  /* تصاویر داخل محتوا */
  .pdoc .pbox img{
    max-width:100%;
    height:auto;
    border-radius:14px;
    border:1px solid var(--border);
    display:block;
    margin:8px 0;
  }

  /* ===== رنگ‌بندی بر اساس کلاس نوع: a,b,c,... ===== */
  .pdoc .pbox.a{background:linear-gradient(135deg, rgba(37,99,235,.08), rgba(124,58,237,.06));}
  .pdoc .pbox.b{background:linear-gradient(135deg, rgba(14,165,233,.08), rgba(240,249,255,.92));}
  .pdoc .pbox.c{background:linear-gradient(135deg, rgba(22,163,74,.08), rgba(240,253,244,.92));}
  .pdoc .pbox.d{background:linear-gradient(135deg, rgba(245,158,11,.10), rgba(255,251,235,.92));}
  .pdoc .pbox.e{background:linear-gradient(135deg, rgba(236,72,153,.08), rgba(253,242,248,.92));}
  .pdoc .pbox.warn{background:linear-gradient(135deg, rgba(239,68,68,.06), rgba(254,242,242,.92)); border-color:rgba(239,68,68,.25);}