/* ===== منوی مدیریت (نسخه‌ی جدید) =====
   همه‌ی گزینه‌ها همیشه نمایان‌اند؛ گروه‌بندی رنگی؛ صفحه‌ی فعال با حلقه‌ی طلایی.
   با مرورگرهای قدیمی‌تر هم سازگار است (بدون :has و color-mix). */

html body header.rxh{
  --rx-ink:#06301f; --rx-deep:#052e21; --rx-green:#0b6b43; --rx-gold:#f4c20d;
  --rx-paper:#f3f9f5; --rx-line:#d3e6da;
  position:relative!important; top:auto!important; z-index:30;
  display:block!important; padding:0!important; margin:0!important;
  background:none!important; border:0!important; box-shadow:none!important;
  animation:none!important; direction:rtl; text-align:right;
  font-family:Vazirmatn,Tahoma,sans-serif; color:var(--rx-ink);
}
html body header.rxh *{box-sizing:border-box}

/* ---------- نوار برند ---------- */
.rxh .rx-bar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:10px 20px;
  background:linear-gradient(115deg,#04271c 0%,#08523a 55%,#0d7a4b 100%);
  border-bottom:3px solid var(--rx-gold);
}
.rxh .rx-brand{display:flex; align-items:center; gap:12px; min-width:0}
.rxh .rx-logo{
  flex:0 0 auto; width:52px; height:52px; border-radius:50%; background:#fff;
  box-shadow:0 0 0 3px var(--rx-gold),0 4px 14px rgba(0,0,0,.35); overflow:hidden; display:block;
}
.rxh .rx-logo img{width:100%; height:100%; object-fit:cover; display:block; border-radius:50%}
.rxh .rx-title{font-weight:800; font-size:1.2rem; color:#fff; line-height:1.3; text-shadow:0 1px 2px rgba(0,0,0,.3)}

/* صفحه‌ی فعلی */
.rxh .rx-here{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 14px; border-radius:999px; font-size:.84rem; font-weight:700;
  color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28);
}
.rxh .rx-here span{font-size:1rem}

/* دکمه‌های کاربردی (چپ نوار) */
.rxh .rx-util{display:flex; align-items:center; gap:8px; margin-inline-start:auto}
.rxh .rx-u{
  display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:6px 14px;
  border-radius:12px; font-size:.86rem; font-weight:700; text-decoration:none; white-space:nowrap;
  color:#fff; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.26);
  transition:background .15s,border-color .15s,color .15s;
}
.rxh .rx-u:hover{background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.5)}
.rxh .rx-u.on{background:var(--rx-gold); color:var(--rx-deep); border-color:var(--rx-gold)}
.rxh .rx-out{background:rgba(225,29,72,.22); border-color:rgba(255,160,185,.55)}
.rxh .rx-out:hover{background:#e11d48; border-color:#fff}

/* دکمه‌ی منو (فقط موبایل) */
.rxh .rx-tog{
  display:none; align-items:center; gap:6px; width:100%; min-height:46px; padding:8px 16px;
  font:inherit; font-weight:800; font-size:.98rem; color:var(--rx-deep); cursor:pointer;
  background:var(--rx-gold); border:0; border-radius:14px;
}
.rxh .rx-tog-cur{font-weight:700; opacity:.8; margin-inline-start:2px}

/* ---------- سکوی گزینه‌ها ---------- */
.rxh .rx-deck{
  display:flex; flex-wrap:wrap; gap:12px; align-items:stretch;
  padding:12px 18px 14px; background:var(--rx-paper);
  border-bottom:1px solid var(--rx-line);
  box-shadow:0 12px 24px -16px rgba(5,46,33,.45);
}

/* هر گروه رنگ خودش را دارد */
.rxh .rx-g{
  --ac:#0b7a47; --tn:#e6f6ed; --ln:#b9dfca; --hv:#d3efe0;
  flex:1 1 280px; min-width:0; margin:0; padding:9px 11px 11px;
  background:var(--tn); border:1.5px solid var(--ln); border-radius:18px;
}
.rxh .rx-g-base{--ac:#0b6f86; --tn:#e4f3f7; --ln:#b6dbe5; --hv:#cde9f0}
.rxh .rx-g-teach{--ac:#5b3fb0; --tn:#efeafb; --ln:#d2c6f0; --hv:#e2d9f7}
.rxh .rx-g-site{--ac:#b45f06; --tn:#fff0db; --ln:#f0cf9c; --hv:#fde3bd}

/* گروهی که صفحه‌ی فعال داخلش است */
.rxh .rx-g.has{border-color:var(--ac); box-shadow:0 0 0 1.5px var(--ac)}

.rxh .rx-gt{
  display:flex; align-items:center; gap:8px; margin:0 0 8px; padding:0;
  font-size:.86rem; font-weight:800; line-height:1.3; color:var(--ac);
}
.rxh .rx-gi{
  display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%;
  background:#fff; font-size:.95rem; box-shadow:0 0 0 1.5px var(--ln);
}
.rxh .rx-g.has .rx-gi{background:var(--ac); box-shadow:0 0 0 2px #fff,0 0 0 4px var(--rx-gold)}

.rxh .rx-items{display:flex; flex-wrap:wrap; gap:6px}

/* ---------- هر گزینه ---------- */
.rxh .rx-i{
  position:relative; display:inline-flex; align-items:center; gap:7px;
  min-height:36px; padding:5px 10px; border-radius:11px;
  font-size:.84rem; font-weight:700; line-height:1.35; text-decoration:none; white-space:nowrap;
  color:var(--rx-ink); background:#fff; box-shadow:0 0 0 1px var(--ln),0 2px 0 rgba(0,0,0,.04);
  transition:background .15s,color .15s,box-shadow .15s;
}
.rxh .rx-ic{font-size:1.05rem; line-height:1}
.rxh .rx-i:hover{background:var(--hv); box-shadow:0 0 0 1.5px var(--ac)}
.rxh .rx-i:focus-visible,.rxh .rx-u:focus-visible,.rxh .rx-tog:focus-visible{outline:3px solid var(--rx-gold); outline-offset:2px}

/* گزینه‌ی فعال: پر و تیره، با حلقه‌ی طلایی */
.rxh .rx-i.on{
  color:#fff; background:var(--ac); font-weight:800;
  box-shadow:0 0 0 2px #fff,0 0 0 4px var(--rx-gold),0 6px 14px -4px rgba(0,0,0,.35);
}
.rxh .rx-i.on:hover{background:var(--ac)}

/* نشان تعداد */
.rxh .rx-b{
  display:inline-grid; place-items:center; min-width:21px; height:21px; padding:0 6px;
  font-size:.72rem; font-weight:800; font-style:normal; line-height:1; color:#fff;
  background:#e11d48; border-radius:999px; box-shadow:0 0 0 2px #fff;
}

/* ---------- عرض متوسط: دو ستون ---------- */
@media (max-width:1199px){
  .rxh .rx-g{flex-basis:calc(50% - 6px)}
}
/* ---------- عرض زیاد: چهار گروه کنار هم ---------- */
@media (min-width:1200px){
  .rxh .rx-g{flex-basis:0}
  .rxh .rx-g-learn{flex-grow:.8}
  .rxh .rx-g-base{flex-grow:1}
  .rxh .rx-g-teach{flex-grow:1.2}
  .rxh .rx-g-site{flex-grow:1.3}
}

/* ---------- موبایل: دکمه‌ی منو، همه‌ی گزینه‌ها داخلش ---------- */
@media (max-width:820px){
  .rxh .rx-bar{padding:10px 14px}
  .rxh .rx-here{display:none}
  .rxh .rx-util{margin-inline-start:auto}
  .rxh .rx-ut{display:none}
  .rxh .rx-u{padding:6px 11px}
  .rxh .rx-tog{display:flex; order:5}
  .rxh .rx-deck{display:none; padding:12px 14px 14px; gap:10px}
  html body header.rxh.rx-open .rx-deck{display:flex}
  .rxh .rx-g{flex-basis:100%}
  .rxh .rx-i{white-space:normal; min-height:44px}
}

@media (prefers-reduced-motion:reduce){
  .rxh .rx-i,.rxh .rx-u{transition:none}
}
/* حالت تمرکز (مدیریت محتوا) و چاپ: منو مخفی شود */
html.cfocus body header.rxh{display:none!important}
@media print{html body header.rxh{display:none!important}}