/* ===========================================================
   رهیار — صفحه ورود
   پالت: شب مطالعه (نیوی تیره) + دو رنگ مسیر رشد (کهربایی/نعنایی)
   =========================================================== */

/* ⭐ اصلاحِ یه باگِ ریشه‌ای: هر جایی که به یه المان هم display:flex/grid صریح
   دادیم و هم قراره با اتریبیوتِ hidden مخفی/آشکارش کنیم، چون specificity
   با استایلِ کلاس برابره، مرورگر معمولاً استایلِ نویسنده (display:flex) رو
   به‌جایِ [hidden]{display:none} می‌ذاره - یعنی با وجودِ hidden، بازم دیده
   می‌شه! (دقیقاً همون چیزی که باعث می‌شد باکسِ «انتخابِ دستی + ذخیره»یِ
   کارتِ دوره‌ها، حتی وقتی نباید، همیشه نمایان بمونه و باعثِ گیج‌شدن بشه.)
   این یه قانونِ سراسریه که همچین باگی رو همه‌جایِ سایت یک‌جا حل می‌کنه. */
[hidden]{ display:none !important; }

:root{
  /* ⭐ تمِ روشن — پالتِ «صبحِ گرم»: زمینه‌ی کرمی/هلویی‌رنگِ گرم +
     شیشه‌ی مات (glassmorphism) به‌جایِ اون بنفشِ سردِ قبلی که
     حسِ «یخی» می‌داد */
  --bg-night:      #F5F6F8;
  --bg-night-2:    #E6E8EC;
  --card-bg:       rgba(252,252,253,0.58);
  --panel-solid-bg: #FBFBFD; /* نسخه‌ی کاملاً مات (بدون شفافیت) همون رنگِ --card-bg — برایِ هدرهایِ sticky که نباید حینِ اسکرول شیشه‌ای/نامفهوم بشن */
  --table-header-bg: #F7F7FA; /* ⭐ سفید/طوسیِ خیلی‌روشن به‌جایِ بنفشِ کم‌رنگِ قبلی — هدرِ جدول‌ها حالا سفیده، نه رنگی */
  --card-border:   rgba(70,78,92,0.16);
  --text-paper:    #23262D;
  --text-muted:    #787C85;
  --text-faint:    #A9ADB5;

  --accent-lav:    #7C6CFF;   /* پایه دهم   */
  --accent-amber:  #D97706;   /* پایه یازدهم */
  --accent-mint:   #059669;   /* پایه دوازدهم */
  --accent-warn-red: #E11D48; /* اصلاً انجام نشده (صفر) */
  --accent-warn-amber: #CA8A04; /* کمتر از مدت‌زمانِ برنامه‌ریزی‌شده، ولی صفر نیست */

  --radius-card: 26px;
  --radius-field: 14px;

  --shadow-card: 0 24px 60px -18px rgba(55,62,75,0.24), 0 0 0 1px rgba(255,255,255,0.55) inset;

  /* ⭐ تینتِ خنثیِ طوسی (slate) - قبلاً یه قهوه‌ایِ گرم بود و چون تقریباً
     همه‌یِ سطح‌هایِ ظریفِ سایت با rgba(var(--ink),x) ساخته می‌شن، کلِ صفحه
     به کِرِم می‌زد. حالا خنثیِ خاکستریه؛ نسبتِ پررنگ/کم‌رنگِ همه‌جا همون
     که بود می‌مونه، فقط طیفش از گرم به طوسی می‌ره. */
  --ink: 104,111,124;

  /* ⭐ پالتِ ۷ رنگیِ روزهایِ هفته - برنامه‌ی مطالعاتی رو زنده و قابلِ‌مرور
     می‌کنه، هر روز شناسنامه‌ی رنگیِ خودش رو داره */
  --day-1: #7C6CFF;  /* شنبه */
  --day-2: #0284C7;  /* یکشنبه */
  --day-3: #D97706;  /* دوشنبه */
  --day-4: #DB2777;  /* سه‌شنبه */
  --day-5: #059669;  /* چهارشنبه */
  --day-6: #9333EA;  /* پنجشنبه */
  --day-7: #CA8A04;  /* جمعه */

  --ease-pop: cubic-bezier(.2,.9,.3,1.3);
}

*{ box-sizing: border-box; }

html,body{
  height:100%;
  margin:0;
  background: var(--bg-night);
}

body{
  font-family: "Vazirmatn", Tahoma, sans-serif;
  background: var(--bg-night);
  color: var(--text-paper);
  overflow-x:hidden;
}

.scene{
  position: relative;
  min-height: 100vh;
  width: 100%;
  /* ⭐ پالتِ «صبحِ گرم» قبلی خیلی کم‌جون/محو بود (بلورهایِ رنگی با
     آلفایِ ۰.۱ تا ۰.۳۸ و همه‌شون تویِ طیفِ نارنجی/قهوه‌ای) - نتیجه یه
     پس‌زمینه‌ی یک‌دست و بی‌روح بود. این‌جا (فقط صفحه‌ی ورود) با همون
     پایه‌ی روشن/گرمِ سایتِ اصلی، ولی با ۴ تا نورِ رنگیِ واضح‌تر و
     متنوع‌تر (بنفش/نارنجی/سبزآبی/صورتی - هماهنگ با رنگِ گره‌هایِ
     پایه‌یِ ۱۰/۱۱/۱۲ تویِ همین مسیرِ SVG) و آلفایِ بیشتر، حس‌وحالِ
     شاداب‌تر و پرانرژی‌تری ساخته می‌شه. */
  background:
    radial-gradient(60% 50% at 12% 8%,   rgba(124,108,255,0.56) 0%, transparent 64%),
    radial-gradient(54% 46% at 89% 14%,  rgba(255,140,30,0.50)  0%, transparent 62%),
    radial-gradient(60% 50% at 92% 88%,  rgba(6,199,140,0.46)   0%, transparent 62%),
    radial-gradient(52% 44% at 8% 90%,   rgba(236,72,153,0.38)  0%, transparent 60%),
    radial-gradient(44% 38% at 52% 14%,  rgba(56,189,248,0.30)  0%, transparent 60%),
    radial-gradient(74% 62% at 50% 48%,  rgba(124,108,255,0.14) 0%, transparent 66%),
    linear-gradient(160deg, var(--bg-night) 0%, var(--bg-night-2) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ---------- مسیر تحصیلی پس‌زمینه ---------- */
.path-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0.85;
}
.study-path{
  animation: dash-flow 40s linear infinite;
}
@keyframes dash-flow{
  to{ stroke-dashoffset: -800; }
}
.node-label{
  font-family:"Vazirmatn", sans-serif;
  font-size: 15px;
  font-weight: 600;
  fill: rgba(32,30,61,0.42);
  letter-spacing: 0.02em;
}
.node-num{
  font-family: "Orbitron", sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.5px;
  opacity: 0.85;
}
.node circle:nth-child(1){
  animation: node-pulse 4.5s ease-in-out infinite;
}
.node--11 circle:nth-child(1){ animation-delay:.6s; }
.node--12 circle:nth-child(1){ animation-delay:1.2s; }
@keyframes node-pulse{
  0%,100%{ opacity:.55; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.08); }
}
.study-path-glow{
  animation: dash-flow 40s linear infinite;
}

/* ---------- ستاره‌های چشمک‌زنِ رویِ مسیر ---------- */
.sparkle{
  filter: drop-shadow(0 0 5px currentColor);
  transform-box: fill-box;
  transform-origin: center;
  animation: sparkle-twinkle 3.6s ease-in-out infinite;
}
.sparkle--1{ animation-delay: 0s; }
.sparkle--2{ animation-delay: .9s; }
.sparkle--3{ animation-delay: 1.8s; }
.sparkle--4{ animation-delay: 2.7s; }
@keyframes sparkle-twinkle{
  0%,100%{ opacity:0; transform: scale(.4); }
  50%{ opacity:1; transform: scale(1.15); }
}

.scene__vignette{
  position:absolute; inset:0;
  background: radial-gradient(60% 55% at 50% 48%, transparent 0%, rgba(120,120,220,.10) 78%, rgba(120,120,220,.16) 100%);
  pointer-events:none;
}

/* ---------- عناصرِ گرافیکیِ بلورشده‌یِ پس‌زمینه: کتاب/دفتر/مداد/خط‌کش/کلاهِ فارغ‌التحصیلی
   هدف: پر کردنِ فضایِ خالیِ اطراف با موتیف‌هایِ آموزشی، محو و تار (blur)،
   طوری که از پشتِ شیشه‌یِ کارتِ ورود هم به‌آرومی دیده بشن و صفحاتِ داخلی رو
   هم از سادگیِ صرف خارج کنن، بدونِ اینکه مزاحمِ خوانایی یا تعاملِ کاربر بشن. ---------- */
.scene__doodles{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
}
.scene__doodle{
  position:absolute;
  display:block;
}
.scene__doodle--1{ top:6%;    left:4%;   width:104px; height:104px; color:var(--accent-lav);   opacity:.26; filter:blur(3px);   transform:rotate(-12deg); }
.scene__doodle--2{ top:9%;    right:6%;  width:128px; height:128px; color:var(--accent-mint);  opacity:.28; filter:blur(3px);   transform:rotate(14deg); }
.scene__doodle--3{ bottom:8%; left:5%;   width:118px; height:118px; color:var(--accent-amber); opacity:.28; filter:blur(3.5px); transform:rotate(9deg); }
.scene__doodle--4{ bottom:9%; right:4%;  width:138px; height:138px; color:var(--accent-lav);   opacity:.24; filter:blur(4px);   transform:rotate(-15deg); }
.scene__doodle--5{ top:38%;   left:8%;   width:86px;  height:86px;  color:var(--accent-amber); opacity:.2;  filter:blur(5px);   transform:rotate(-8deg); }
.scene__doodle--6{ top:42%;   right:9%;  width:92px;  height:92px;  color:var(--accent-mint);  opacity:.2;  filter:blur(5px);   transform:rotate(11deg); }
.scene__doodle--7{ top:64%;   left:13%;  width:78px;  height:78px;  color:var(--accent-lav);   opacity:.18; filter:blur(6px);   transform:rotate(6deg); }
.scene__doodle--8{ top:19%;   left:21%;  width:68px;  height:68px;  color:var(--accent-amber); opacity:.16; filter:blur(6px);   transform:rotate(-18deg); }
.scene__doodle--9{ top:4%;    left:38%;  width:70px;  height:70px;  color:var(--accent-mint);  opacity:.2;  filter:blur(4px);   transform:rotate(7deg); }
.scene__doodle--10{ bottom:5%; left:41%; width:74px;  height:74px;  color:var(--accent-lav);   opacity:.2;  filter:blur(4px);   transform:rotate(-10deg); }
.scene__doodle--11{ top:26%;  right:3%;  width:70px;  height:70px;  color:var(--accent-amber); opacity:.22; filter:blur(4px);   transform:rotate(19deg); }
.scene__doodle--12{ bottom:30%; left:2%; width:70px;  height:70px;  color:var(--accent-mint);  opacity:.22; filter:blur(4px);   transform:rotate(-14deg); }

@media (max-width: 640px){
  .scene__doodle--5, .scene__doodle--6, .scene__doodle--7, .scene__doodle--8{ opacity:.1; }
  .scene__doodle--1, .scene__doodle--2, .scene__doodle--3, .scene__doodle--4{ opacity:.18; }
}

.stage{
  position:relative;
  z-index:2;
  width:100%;
  display:flex;
  justify-content:center;
  padding: 32px 20px;
}

/* ---------- کارت ورود (مینیمال / شیشه‌ای) ---------- */
.modal{
  position:relative;
  width:100%;
  max-width: 388px;
  background: linear-gradient(180deg, rgba(var(--ink),0.055), rgba(var(--ink),0.02));
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  padding: 40px 32px 32px;
  /* ⭐ یه سایه‌ی رنگیِ نرم (بنفش/نارنجی) هم به سایه‌ی اصلی اضافه شد تا
     خودِ کارت هم انگار از نورهایِ پس‌زمینه رنگ گرفته - نه یه جعبه‌ی
     کاملاً خنثی و بی‌ربط وسطِ یه پس‌زمینه‌ی رنگی. */
  box-shadow: var(--shadow-card), 0 30px 70px -30px rgba(124,108,255,.35), 0 20px 50px -28px rgba(120,128,145,.26);
  animation: card-in .7s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes card-in{
  from{ opacity:0; transform: translateY(18px) scale(.98); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

.modal__mark{
  width:52px; height:52px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--accent-mint), var(--accent-amber));
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 20px;
  box-shadow: 0 10px 24px -8px rgba(69,230,165,0.55);
}
.modal__mark svg{ width:22px; height:22px; }

.modal__eyebrow{
  margin:0 0 10px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--accent-amber);
}

.modal__title{
  margin:0 0 8px;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.2px;
  background: linear-gradient(180deg, #ffffff 0%, #EDEBFF 55%, #C7CAF2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 24px rgba(139,144,214,0.35);
}

.modal__subtitle{
  margin:0 0 28px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-muted);
}

/* ---------- فرم ---------- */
.form{ display:flex; flex-direction:column; gap:16px; }

.field label{
  display:block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.field input{
  width:100%;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 15px;
  color: var(--text-paper);
  background: rgba(var(--ink),0.035);
  border: 1px solid rgba(var(--ink),0.09);
  border-radius: var(--radius-field);
  outline: none;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.field input::placeholder{ color: var(--text-faint); }

.field input:hover{ border-color: rgba(var(--ink),0.16); }

.field input:focus{
  border-color: var(--accent-mint);
  background: rgba(69,230,165,0.045);
  box-shadow: 0 0 0 4px rgba(69,230,165,0.14);
}

/* فیلدِ «مدت‌زمان» - عددِ فارسی، وسط‌چین و جذاب‌تر از یه inputِ معمولی
   (با id به‌جایِ کلاس استایل می‌دیم که مطمئن باشیم رویِ .field input غالب می‌شه) */
#spDuration{
  text-align: center;
  direction: ltr; /* فقط برایِ چیدمانِ رقم‌ها؛ خودِ رقم‌ها فارسی نمایش داده می‌شن */
  font-family: "Vazirmatn", Tahoma, sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--accent-mint);
  background: linear-gradient(180deg, rgba(69,230,165,0.09), rgba(69,230,165,0.03));
  border: 1.5px solid rgba(69,230,165,0.28);
}
#spDuration::placeholder{ font-weight:600; color: var(--text-faint); letter-spacing:normal; }
#spDuration:hover{ border-color: rgba(69,230,165,0.45); }
#spDuration:focus{
  border-color: var(--accent-mint);
  background: rgba(69,230,165,0.1);
  box-shadow: 0 0 0 4px rgba(69,230,165,0.18);
}

.field__input-wrap{ position:relative; }
.field__input-wrap input{ padding-left: 46px; }

/* ⭐ .field قبلاً فقط <input> رو استایل می‌داد؛ برایِ فرمِ ثبتِ برنامه به
   <select>/<textarea> هم نیاز داشتیم، برایِ همین همون استایل رو به این دو
   هم گسترش دادیم. */
.field select, .field textarea{
  width:100%;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 15px;
  color: var(--text-paper);
  background: rgba(var(--ink),0.035);
  border: 1px solid rgba(var(--ink),0.09);
  border-radius: var(--radius-field);
  outline: none;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
  resize: vertical;
}
.field select:hover, .field textarea:hover{ border-color: rgba(var(--ink),0.16); }
.field select:focus, .field textarea:focus{
  border-color: var(--accent-mint);
  background: rgba(69,230,165,0.045);
  box-shadow: 0 0 0 4px rgba(69,230,165,0.14);
}
.field select option{ background: var(--bg-night-2); color: var(--text-paper); }

.toggle-pass{
  position:absolute;
  left: 6px; top: 50%;
  transform: translateY(-50%);
  width: 34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none;
  color: var(--text-faint);
  cursor:pointer;
  border-radius: 10px;
  transition: color .2s ease, background .2s ease;
}
.toggle-pass:hover{ color: var(--text-paper); background: rgba(var(--ink),0.06); }
.toggle-pass svg{ width:19px; height:19px; }

.form__error{
  margin: -4px 0 0;
  font-size: 13px;
  font-weight:600;
  color: #BE123C;
  background: rgba(225,29,72,0.1);
  border: 1px solid rgba(225,29,72,0.28);
  border-radius: 10px;
  padding: 10px 12px;
  animation: shake .35s ease;
}
@keyframes shake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-5px); }
  75%{ transform:translateX(5px); }
}

.btn-submit{
  position:relative;
  margin-top: 6px;
  padding: 15px 18px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #0F1130;
  background: linear-gradient(95deg, var(--accent-mint), #7be8c2 55%, var(--accent-amber));
  background-size: 160% 100%;
  background-position: 0% 0%;
  border: none;
  border-radius: var(--radius-field);
  cursor:pointer;
  transition: background-position .5s ease, transform .15s ease, box-shadow .3s ease;
  box-shadow: 0 14px 28px -10px rgba(69,230,165,0.45);
}
.btn-submit:hover{ background-position: 100% 0%; }
.btn-submit:active{ transform: scale(.98); }

.btn-submit__spinner{
  display:none;
  position:absolute; top:50%; left:50%;
  width:16px; height:16px;
  margin:-8px 0 0 -8px;
  border-radius:50%;
  border: 2.5px solid rgba(15,17,48,0.25);
  border-top-color:#0F1130;
  animation: spin .7s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

.btn-submit.is-loading .btn-submit__label{ visibility:hidden; }
.btn-submit.is-loading .btn-submit__spinner{ display:block; }
.btn-submit:disabled{ cursor:default; opacity:.85; }

/* دکمه‌ی «ثبتِ برنامه» - نسخه‌ی جذاب‌تر، فقط برایِ همین دکمه */
.btn-submit--plan{
  display: block;
  width: fit-content;
  min-width: 220px;
  margin: 0.5rem auto 0;
  padding: 17px 18px;
  font-size: 16.5px;
  letter-spacing: .2px;
  border-radius: calc(var(--radius-field) + 4px);
  background: linear-gradient(100deg, var(--accent-mint) 0%, #7be8c2 45%, var(--accent-amber) 100%);
  background-size: 220% 100%;
  box-shadow: 0 16px 34px -8px rgba(69,230,165,0.55), 0 0 0 1px rgba(var(--ink),0.08) inset;
  transition: background-position .5s ease, transform .15s ease, box-shadow .3s ease;
}
.btn-submit--plan .btn-submit__label{ display:inline-flex; align-items:center; gap:6px; }
.btn-submit--plan .btn-submit__label::before{ content:"✅"; font-size:15px; }
.btn-submit--plan:hover{
  background-position: 100% 0%;
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 20px 40px -8px rgba(69,230,165,0.65), 0 0 0 1px rgba(var(--ink),0.12) inset;
}
.btn-submit--plan:active{ transform: scale(.98); }

/* ---------- نمادِ اعتمادِ الکترونیکی (اینماد) - پایینِ صفحه‌یِ ورود ---------- */
.site-enamad{
  position: fixed;
  right: 18px;
  bottom: 14px;
  z-index: 6; /* بالایِ پس‌زمینه و دودل‌ها (z-index تا ۴)، ولی زیرِ مودال‌ها/پاپ‌آپ‌ها */
  line-height: 0;
  opacity: 0.92;
  transition: opacity .2s ease;
}
.site-enamad:hover{ opacity: 1; }
.site-enamad img{
  display:block;
  width: 80px;
  height: auto;
  border-radius: 8px;
}
@media (max-width: 640px){
  .site-enamad{ right: 10px; bottom: 10px; }
  .site-enamad img{ width: 64px; }
}

.modal__footer{
  margin: 22px 0 0;
  text-align:center;
  font-size: 13px;
  color: var(--text-faint);
}
.modal__footer a{
  color: var(--accent-mint);
  text-decoration:none;
  font-weight:600;
}
.modal__footer a:hover{ text-decoration:underline; }

/* ================= پنل مدیریت (فول‌اسکرین) ================= */
.scene--plain{
  background:
    radial-gradient(120% 90% at 12% 8%, rgba(139,144,214,0.14) 0%, transparent 55%),
    radial-gradient(90% 70% at 88% 12%, rgba(69,230,165,0.12) 0%, transparent 50%),
    linear-gradient(160deg, var(--bg-night) 0%, var(--bg-night-2) 100%);
}

.scene--admin{ align-items: flex-start; }
.stage--admin{
  padding: 0;
  min-height: 100vh;
  align-items: flex-start;
}

.admin-shell{
  width:100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 44px 44px 60px;
  animation: card-in .55s cubic-bezier(.2,.8,.2,1) both;
}
/* ⭐ برنامه‌ی مطالعاتی به عرضِ بیشتری نیاز داره تا چند روز/چند کارت هم‌زمان
   بدونِ اسکرولِ افقیِ زیاد دیده بشن - این نسخه تقریباً کلِ صفحه رو می‌گیره */
.admin-shell--wide{
  max-width: none;
  padding: 36px clamp(16px, 3vw, 56px) 60px;
}

.admin-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 30px;
}
.admin-title{ font-size: 26px; margin-bottom:0; }

.btn-logout{
  flex-shrink:0;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(var(--ink),0.04);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  cursor:pointer;
  transition: color .2s ease, border-color .2s ease;
}
.btn-logout:hover{ color: var(--text-paper); border-color: rgba(var(--ink),0.22); }

/* ---------- دکمه‌ی «بازگشت» (بالایِ صفحاتِ داخلی) ----------
   قبلاً یک لینکِ ساده با یک فلشِ متنی بود که جهتش تویِ چیدمانِ
   راست‌به‌چپ برعکس دیده می‌شد؛ الان یک دکمه‌ی کپسولی با آیکنِ
   SVG (که جهتش هیچ‌وقت اشتباه رندر نمی‌شه) و انیمیشنِ هاور داره. */
.btn-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 16px 7px 8px;
  margin:0 0 10px;
  font-family:inherit;
  font-size:12.5px;
  font-weight:700;
  color: var(--accent-lav);
  background: rgba(108,99,255,0.08);
  border:1px solid rgba(108,99,255,0.22);
  border-radius:999px;
  text-decoration:none;
  cursor:pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-back:hover{
  background: rgba(108,99,255,0.16);
  border-color: rgba(108,99,255,0.4);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -12px rgba(108,99,255,0.55);
}
.btn-back:active{ transform: translateY(0) scale(.98); }
.btn-back__icon{
  display:flex;
  flex-shrink:0;
  align-items:center;
  justify-content:center;
  width:20px; height:20px;
  border-radius:50%;
  background: rgba(108,99,255,0.16);
  transition: transform .2s ease, background .2s ease;
}
.btn-back__icon svg{ width:11px; height:11px; }
.btn-back:hover .btn-back__icon{ background: rgba(108,99,255,0.26); transform: translateX(3px); }
body .btn-back{ background: rgba(108,99,255,0.07); }
body .btn-back:hover{ background: rgba(108,99,255,0.14); }

.select-role{
  width:100%;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 15px;
  color: var(--text-paper);
  background: rgba(var(--ink),0.035);
  border: 1px solid rgba(var(--ink),0.09);
  border-radius: var(--radius-field);
  outline:none;
  cursor:pointer;
}
.select-role:focus{
  border-color: var(--accent-mint);
  box-shadow: 0 0 0 4px rgba(69,230,165,0.14);
}
.select-role option{ background: var(--bg-night-2); color: var(--text-paper); }

.form__success{
  margin: -4px 0 0;
  font-size: 13px;
  font-weight:600;
  color: #047857;
  background: rgba(5,150,105,0.12);
  border: 1px solid rgba(5,150,105,0.3);
  border-radius: 10px;
  padding: 10px 12px;
}

.users-table-title{
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  margin: 0 0 14px;
  display:flex;
  align-items:center;
  gap:7px;
}
.users-table-title::before{
  content:"";
  width:7px; height:7px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--accent-amber), var(--accent-mint));
  flex-shrink:0;
}
.msx-count-badge{
  display:inline-flex;
  align-items:center;
  margin-inline-start:6px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(124,108,255,0.1);
  color: var(--accent-lav);
  font-size: 11.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  /* ⭐ اعدادِ جذاب‌تر: همون فونتِ Orbitron که تویِ سایت برایِ اعدادِ دیگه هم استفاده شده */
  font-family: "Orbitron", "Vazirmatn", Tahoma, sans-serif;
}
.users-table{
  width:100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.users-table th{
  text-align: right;
  color: var(--text-paper);
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: .1px;
  padding: 13px 6px;
  border-bottom: 2px solid rgba(var(--ink),0.16);
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--table-header-bg, #F7F7FA);
}
.users-table td{
  padding: 10px 4px;
  border-bottom: 1px solid rgba(var(--ink),0.05);
  color: var(--text-paper);
}
.users-table tbody tr:last-child td{ border-bottom:none; }
.users-table tbody tr{ transition: background .15s ease; }
.users-table tbody tr:hover{ background: rgba(108,99,255,.05); }

.table-scroll{ max-height: 420px; overflow-y:auto; overflow-x:auto; }
.table-scroll--tall{ max-height: 560px; }

/* ---------- جدولِ «لیستِ دانش‌آموزانِ انتخاب رشته» - نسخه‌یِ مرتب‌تر و وسط‌چین ---------- */
.msx-students-panel{
  border-radius: 18px;
  overflow: hidden;
}
.msx-students-panel .table-scroll{
  border-radius: 14px;
  border: 1px solid rgba(108,99,255,0.12);
}
.msx-students-table{
  text-align: center;
}
.msx-students-table th,
.msx-students-table td{
  text-align: center;
  vertical-align: middle;
}
.msx-students-table th{
  padding: 11px 6px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--text-paper);
  background: var(--table-header-bg, #F7F7FA);
}
.msx-students-table td{
  padding: 9px 6px;
}
.msx-students-table tbody tr:nth-child(odd){
  background: rgba(255,255,255,0.5);
}
.msx-students-table tbody tr:nth-child(even){
  background: linear-gradient(90deg, rgba(217,119,6,0.075), rgba(217,119,6,0.03));
}
.msx-students-table tbody tr:hover{
  background: rgba(108,99,255,.07);
}

/* ⭐ هایلایتِ گرمِ ردیفِ تازه‌اضافه‌شده — بعدِ افزودنِ دانش‌آموزِ جدید، جدول به این ردیف اسکرول می‌کنه و چندثانیه می‌درخشه */
@keyframes msxRowFlash{
  0%   { background: rgba(255,180,84,0.55); box-shadow: inset 0 0 0 2px rgba(217,119,6,0.55); }
  70%  { background: rgba(255,180,84,0.32); box-shadow: inset 0 0 0 2px rgba(217,119,6,0.35); }
  100% { background: transparent; box-shadow: inset 0 0 0 2px rgba(217,119,6,0); }
}
.msx-students-table tbody tr.msx-row-highlight td{
  animation: msxRowFlash 2.4s ease-out;
}
.msx-students-table .msx-credential-cell{ justify-content:center; }
.msx-staff-users-table .msx-credential-cell{ justify-content:center; }
.msx-students-table .field-badge{ font-size: 12.5px; }

/* ⭐ وقتی رویِ «⋮ عملیات» یا «دسترسی‌ها»یِ یه ردیف کلیک می‌شه، همون ردیف
   هایلایت می‌شه و بقیه‌ی ردیف‌ها کمی تار/کم‌رنگ می‌شن — تا معلوم باشه
   داریم رویِ کدوم دانش‌آموز/کاربر تغییر می‌دیم (msxSetEditingRow تویِ majors.js).
   همینِ افکت روی جدولِ کاربرانِ زیرمجموعه (تبِ «کاربران») هم اعمال می‌شه، چون
   دکمه‌ی «ویرایش کاربر» هم از همون تابع استفاده می‌کنه و می‌خوایم تا وقتی مودالِ
   ویرایش بازه، ردیف انتخاب‌شده هایلایت و بقیه تار بمونن. */
.msx-students-table tbody tr td,
.msx-staff-users-table tbody tr td{
  transition: filter .18s ease, opacity .18s ease;
}
#msxStudentsTableBody.msx-table-dimmed tr:not(.msx-row-editing) td,
#msxStaffUsersTableBody.msx-table-dimmed tr:not(.msx-row-editing) td{
  filter: blur(2.5px);
  opacity: .45;
}
.msx-students-table tbody tr.msx-row-editing td,
.msx-staff-users-table tbody tr.msx-row-editing td{
  position: relative;
  background: rgba(108,99,255,0.07);
  box-shadow: inset 0 0 0 1.5px rgba(108,99,255,0.4);
}
.msx-students-table tbody tr.msx-row-editing:hover td,
.msx-staff-users-table tbody tr.msx-row-editing:hover td{ background: rgba(108,99,255,0.09); }
/* روی ردیفِ فعال، خودِ پنل‌های شناور نباید تار بشن (هرچند از نظرِ z-index
   بالاترن، این تضمین می‌کنه حتی اگه ردیف هم جزوِ تارشونده باشه، پنل واضح بمونه) */
#msxStudentsTableBody.msx-table-dimmed tr.msx-row-editing .msx-floating-menu-panel,
#msxStaffUsersTableBody.msx-table-dimmed tr.msx-row-editing .msx-floating-menu-panel{
  filter: none;
  opacity: 1;
}

/* ⭐ اسمِ ادمین/مدیر/سرمشاور/مشاور: همیشه تک‌خطی — اگه بیشتر از حدِ مجاز
   بود، با «…» بریده می‌شه و اسمِ کامل به‌صورتِ هینتِ هاوری (title) نشون
   داده می‌شه (نگاه کن به msxTruncatedNameCell تویِ majors.js). */
.msx-truncate-name{
  display: inline-block;
  max-width: 88px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  cursor: default;
}

/* ---------- پنلِ شناورِ «⋮ عملیات» (به‌جایِ سه دکمه‌یِ همیشه‌نمایانِ قبلی) ---------- */
.msx-row-menu-cell{ position:relative; }
.msx-row-menu-btn{ margin: 0 auto; }
.msx-row-menu-panel{
  min-width: 168px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.msx-row-menu-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-paper);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  text-align: right;
  white-space: nowrap;
}
.msx-row-menu-item svg{ width:15px; height:15px; flex-shrink:0; }
.msx-row-menu-item:hover{ background: rgba(108,99,255,0.1); }
.msx-row-menu-item--danger{ color:#dc2626; }
.msx-row-menu-item--danger:hover{ background: rgba(220,38,38,0.1); }

/* ---------- جدولِ «کاربرانِ زیرمجموعه» - همه‌چی وسط‌چین، هم‌استایلِ جدولِ دانش‌آموزان ---------- */
.msx-staff-panel{
  border-radius: 18px;
  overflow: hidden;
}
.msx-staff-panel .table-scroll{
  border-radius: 14px;
  border: 1px solid rgba(108,99,255,0.12);
}
.msx-staff-users-table{ text-align:center; font-size: 12.5px; }
.msx-staff-users-table th,
.msx-staff-users-table td{
  text-align:center;
  vertical-align:middle;
  padding: 9px 6px;
  white-space: nowrap;
}
.msx-staff-users-table th{
  padding: 11px 6px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--text-paper);
  background: var(--table-header-bg, #F7F7FA);
}
/* ⭐ راه‌راهِ رنگیِ ردیف‌ها + هاورِ لطیف، دقیقاً هم‌خانواده‌یِ جدولِ دانش‌آموزان
   (فقط با تِینتِ بنفش به‌جایِ کهربایی، تا دو جدول از هم قابلِ‌تشخیص بمونن). */
.msx-staff-users-table tbody tr:nth-child(odd){
  background: rgba(255,255,255,0.5);
}
.msx-staff-users-table tbody tr:nth-child(even){
  background: linear-gradient(90deg, rgba(99,102,241,0.07), rgba(99,102,241,0.03));
}
.msx-staff-users-table tbody tr:hover{
  background: rgba(108,99,255,.07);
}
.msx-staff-users-table .msx-login-copy-btn{
  padding: 6px 10px;
  font-size: 11px;
}
.msx-staff-users-table .msx-login-copy-btn__label{ display:none; }

/* ⭐ برچسبِ «خودش» — وقتی ستونِ ادمین/مدیر/سرمشاورِ یه ردیف، طبقِ
   سلسله‌مراتب، به‌جایِ کاربرِ دیگه‌ای به خودِ همون ردیف اشاره داره. */
.msx-self-badge{
  display:inline-flex;
  align-items:center;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(5,150,105,0.1);
  color: #059669;
  font-size: 11px;
  font-weight: 800;
}

/* ---------- دکمه‌یِ بولد و رنگیِ «کپیِ اطلاعاتِ ورود» ---------- */
.msx-login-copy-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  color:#fff;
  background: linear-gradient(135deg, var(--accent-lav, #6c63ff), #9d5cff);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(108,99,255,0.35);
  transition: transform .15s ease, box-shadow .2s ease, filter .15s ease;
}
.msx-login-copy-btn:hover{
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 6px 18px rgba(108,99,255,0.45);
  filter: brightness(1.06);
}
.msx-login-copy-btn:active{ transform: translateY(0) scale(.96); }
.msx-login-copy-btn__icon{ display:inline-flex; }
.msx-login-copy-btn__icon svg{ width:17px; height:17px; }

/* ---------- دکمه‌یِ «افزودن/دیدنِ کارنامه» (پیل رنگی، سمتِ چپِ جدول) ---------- */
.msx-karnameh-cell{ white-space: nowrap; }
.msx-karnameh-btn{
  display:inline-flex; align-items:center; gap:5px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .18s ease, filter .15s ease;
  white-space: nowrap;
}
.msx-karnameh-btn:hover{ transform: translateY(-1px); filter: brightness(1.04); }
.msx-karnameh-btn:active{ transform: translateY(0) scale(.97); }
.msx-karnameh-btn--add{
  color: var(--day-4);
  background: rgba(219,39,119,0.1);
  border-color: rgba(219,39,119,0.28);
  box-shadow: 0 0 0 0 rgba(219,39,119,0);
}
.msx-karnameh-btn--add:hover{ box-shadow: 0 4px 14px rgba(219,39,119,0.22); }
.msx-karnameh-btn--view{
  color: var(--accent-mint);
  background: rgba(5,150,105,0.12);
  border-color: rgba(5,150,105,0.3);
}
.msx-karnameh-btn--view:hover{ box-shadow: 0 4px 14px rgba(5,150,105,0.2); }

/* ---------- ردیفِ عملیات (کپی/ویرایش/حذف) - سه دکمه‌یِ آیکونیِ فشرده، همیشه تویِ یک خط ---------- */
.msx-actions-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex-wrap:nowrap;
}
.msx-icon-btn--edit{
  color:#fff;
  background: linear-gradient(135deg, var(--accent-lav, #6c63ff), #9d5cff);
  box-shadow: 0 2px 8px rgba(108,99,255,0.35);
  transition: transform .15s ease, box-shadow .2s ease, filter .15s ease;
}
.msx-icon-btn--edit:hover{
  color:#fff;
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(108,99,255,0.45);
}
.msx-icon-btn--edit:active{ transform: translateY(0) scale(.94); }
.msx-icon-btn--danger{
  color:#fff;
  background: linear-gradient(135deg, #f87171, #dc2626);
  box-shadow: 0 2px 8px rgba(220,38,38,0.35);
  transition: transform .15s ease, box-shadow .2s ease, filter .15s ease;
}
.msx-icon-btn--danger:hover{
  color:#fff;
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220,38,38,0.45);
}
.msx-icon-btn--danger:active{ transform: translateY(0) scale(.94); }
.msx-icon-btn--login{
  color:#fff;
  background: linear-gradient(135deg, #06b6d4, #0891b2);
  box-shadow: 0 2px 8px rgba(8,145,178,0.35);
  transition: transform .15s ease, box-shadow .2s ease, filter .15s ease;
}
.msx-icon-btn--login:hover{
  color:#fff;
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(8,145,178,0.45);
}
.msx-icon-btn--login:active{ transform: translateY(0) scale(.94); }

/* ---------- دسترسی‌هایِ محیطِ «انتخاب رشته» (سراسری/فرهنگیان/آزاد + فعال‌سازیِ کلِ حساب) - همیشه تویِ یک خط ---------- */
.msx-access-cell{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.msx-access-group{
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: nowrap;
}
.msx-access-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.3px solid rgba(var(--ink), 0.16);
  background: rgba(255,255,255,0.55);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: transform .12s ease, box-shadow .18s ease, filter .15s ease, opacity .15s ease, border-color .15s ease, background .15s ease;
}
.msx-access-btn:hover{ transform: translateY(-1px); }
.msx-access-btn:active{ transform: translateY(0) scale(.93); }
.msx-access-btn__mark{
  position: absolute;
  bottom: -2px;
  left: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6.5px;
  font-weight: 900;
  border: 1.2px solid var(--card-bg);
  background: var(--text-faint);
  color: #fff;
}
.msx-access-btn--sarasari.is-on{ border-color: var(--accent-lav); background: rgba(124,108,255,0.16); box-shadow: 0 3px 10px rgba(124,108,255,0.22); }
.msx-access-btn--sarasari.is-on .msx-access-btn__mark{ background: var(--accent-lav); }
.msx-access-btn--farhangian.is-on{ border-color: var(--accent-mint); background: rgba(5,150,105,0.16); box-shadow: 0 3px 10px rgba(5,150,105,0.22); }
.msx-access-btn--farhangian.is-on .msx-access-btn__mark{ background: var(--accent-mint); }
.msx-access-btn--azad.is-on{ border-color: var(--accent-amber); background: rgba(217,119,6,0.16); box-shadow: 0 3px 10px rgba(217,119,6,0.22); }
.msx-access-btn--azad.is-on .msx-access-btn__mark{ background: var(--accent-amber); }
.msx-access-btn.is-off{ opacity: .45; filter: grayscale(.55); }
.msx-access-btn.is-loading{ opacity: .55; pointer-events: none; }

.msx-access-divider{
  width: 1px;
  height: 15px;
  flex-shrink: 0;
  background: rgba(var(--ink), 0.16);
}

/* سوئیچِ کوچیکِ فعال/غیرفعالِ کلِ حساب - جدا و متمایز از سه‌تایِ بالا */
.msx-account-switch{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
  direction: ltr;
}
.msx-account-switch__input{ position: absolute; opacity: 0; width: 0; height: 0; }
.msx-account-switch__track{
  position: relative;
  width: 32px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 999px;
  background: rgba(225,29,72,0.16);
  border: 1.5px solid rgba(225,29,72,0.32);
  transition: background .18s ease, border-color .18s ease;
}
.msx-account-switch__track::after{
  content: '';
  position: absolute;
  top: 1.5px;
  left: 1.5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .18s var(--ease-pop);
}
.msx-account-switch__input:checked + .msx-account-switch__track{
  background: rgba(5,150,105,0.18);
  border-color: rgba(5,150,105,0.4);
}
.msx-account-switch__input:checked + .msx-account-switch__track::after{
  transform: translateX(14px);
}
.msx-account-switch__input:focus-visible + .msx-account-switch__track{
  outline: 2px solid var(--accent-lav);
  outline-offset: 2px;
}
.msx-account-switch__label{
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  color: var(--accent-warn-red);
}
.msx-account-switch__input:checked ~ .msx-account-switch__label{
  color: var(--accent-mint);
}

/* ردیفِ دانش‌آموزهایِ غیرفعال، کمی کم‌رنگ می‌شه تا تویِ لیست جلبِ توجه کنه؛
   خودِ سوئیچِ دسترسی‌ها روشن می‌مونه تا ادمین راحت بتونه دوباره فعالش کنه */
.msx-students-table tbody tr.msx-row-inactive td{
  opacity: .55;
  filter: grayscale(.3);
}
.msx-students-table tbody tr.msx-row-inactive td.msx-access-td{
  opacity: 1;
  filter: none;
}
.msx-access-td{ position: relative; }

/* ---------- پایه‌یِ مشترکِ همه‌یِ پنل‌هایِ شناور (⋮ عملیات، دسترسی‌ها، ...) —
   ⭐ این کلاس قبلاً فقط یه مارکر بود و هیچ استایلی نداشت؛ برایِ همینم پنلِ
   «دسترسی‌ها» (که فقط با همین کلاس + یه کلاسِ اختصاصیِ کم‌جزئیات ساخته شده
   بود) اصلاً position:fixed/بک‌گراند/شادو نمی‌گرفت و به‌جایِ شناور شدن، همون
   تویِ سلولِ جدول به‌صورتِ معمولی رندر می‌شد — همون چیزی که باعث می‌شد
   ردیف‌هاش رویِ هم بریزن و به ستون‌هایِ کناری سرک بکشن. ---------- */
.msx-floating-menu-panel{
  position: fixed;
  z-index: 400;
  background: #fff;
  border: 1px solid rgba(15,23,42,0.06);
  border-radius: 18px;
  box-shadow: 0 20px 46px rgba(15,23,42,0.15);
}

/* ---------- دکمه‌ی «فعال‌سازی» — جایگزینِ پنلِ دسترسی‌ها برایِ دانش‌آموزهایی
   که هنوز هیچ‌وقت فعال نشدن (quota_charged=0)؛ کلیک روش یک واحد از سهمیه
   می‌گیره، پس عمداً چشم‌گیرتر از یک سوییچِ معمولیه. ---------- */
.msx-activate-student-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  color: #fff;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  background: linear-gradient(120deg, #f59e0b 0%, #ec4899 100%);
  box-shadow: 0 4px 12px -3px rgba(245,158,11,.55);
  transition: transform .15s ease, box-shadow .2s ease, opacity .15s ease;
}
.msx-activate-student-btn:hover{ transform: translateY(-1px) scale(1.03); box-shadow: 0 8px 18px -4px rgba(236,72,153,.55); }
.msx-activate-student-btn:active{ transform: translateY(0) scale(.96); }
.msx-activate-student-btn:disabled,
.msx-activate-student-btn.is-loading{ opacity: .6; cursor: default; transform: none; }
.msx-activate-student-btn__icon{ font-size: 13px; }

/* ---------- دکمه‌یِ شناورِ «دسترسی‌ها» — سه نقطه‌ی رنگی که هرکدوم متناظر با
   یکی از مسیرهاست، برای خوانایی در یک نگاه ---------- */
.msx-access-menu-btn{
  position: relative;
  width: 38px; height: 30px;
  border-radius: 999px;
  background: rgba(255,255,255,0.7);
  border: 1.3px solid rgba(var(--ink), 0.12);
  box-shadow: 0 2px 6px rgba(15,23,42,0.06);
}
.msx-access-menu-btn:hover{ border-color: var(--accent-lav); box-shadow: 0 4px 10px rgba(124,108,255,0.18); }
.msx-access-menu-btn__dots{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.msx-access-dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.msx-access-dot.is-off{ background: rgba(var(--ink), 0.18); }
.msx-access-dot--sarasari.is-on{ background: var(--accent-lav); box-shadow: 0 0 0 3px rgba(124,108,255,0.2); }
.msx-access-dot--farhangian.is-on{ background: var(--accent-mint); box-shadow: 0 0 0 3px rgba(5,150,105,0.2); }
.msx-access-dot--azad.is-on{ background: var(--accent-amber); box-shadow: 0 0 0 3px rgba(217,119,6,0.2); }
.msx-access-menu-btn.is-account-off{
  background: rgba(225,29,72,0.08);
  border-color: rgba(225,29,72,0.3);
}
.msx-access-menu-btn.is-account-off .msx-access-dot.is-on{ filter: grayscale(.5); opacity: .6; }

/* ---------- پنلِ بازشوِ «دسترسی‌ها» — به‌جایِ سه «کارتِ» جدا و چسبیده‌به‌هم،
   یک ردیفِ افقیِ نرم از آیکون‌هایِ گردِ قابلِ‌لمس (بدون قاب/بوردرِ اضافه)،
   به‌همراه یک سوئیچِ حساب زیرش. ---------- */
.msx-access-menu-panel{
  min-width: 224px;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* هدر/فوتر تا لبه‌ی گردِ کارت کشیده می‌شن */
}
.msx-access-menu-header{
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: linear-gradient(120deg, rgba(124,108,255,0.16), rgba(5,150,105,0.10) 52%, rgba(217,119,6,0.14));
  border-bottom: 1px solid rgba(var(--ink), 0.07);
}
.msx-access-menu-header__icon{ font-size: 12px; flex-shrink: 0; }
.msx-access-menu-header__title{
  font-size: 12px;
  font-weight: 800;
  color: var(--text-paper);
}
.msx-access-menu-body{ padding: 14px 12px 12px; }
.msx-access-menu-group{
  display:flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
}
.msx-access-menu-row{
  display:flex;
  flex-direction: column;
  align-items:center;
  gap:7px;
  flex: 1 1 0;
  padding: 7px 2px 4px;
  border: none;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  border-radius: 14px;
  transition: transform .12s ease, background .15s ease;
}
.msx-access-menu-row:hover{ transform: translateY(-1px); background: rgba(var(--ink), 0.035); }
.msx-access-menu-row:active{ transform: translateY(0) scale(.96); }
.msx-access-menu-row__avatar{
  display:flex; align-items:center; justify-content:center;
  width: 40px; height: 40px;
  border-radius: 50%;
  font-size: 17px;
  flex-shrink: 0;
  background: rgba(var(--ink), 0.07);
  box-shadow: inset 0 0 0 1.3px rgba(var(--ink), 0.06);
  transition: background .18s ease, box-shadow .18s ease, transform .15s ease;
}
.msx-access-menu-row__avatar--power{ width: 26px; height: 26px; font-size: 12px; }
.msx-access-menu-row__label{ text-align:center; font-size: 10.5px; font-weight:700; color: var(--text-faint); white-space: nowrap; transition: color .15s ease; }
.msx-access-btn--sarasari.is-on .msx-access-menu-row__avatar{ background: linear-gradient(150deg, #9285FF, var(--accent-lav)); box-shadow: 0 6px 14px rgba(124,108,255,0.4); transform: scale(1.05); }
.msx-access-btn--sarasari.is-on .msx-access-menu-row__label{ color: var(--accent-lav); }
.msx-access-btn--farhangian.is-on .msx-access-menu-row__avatar{ background: linear-gradient(150deg, #10B981, var(--accent-mint)); box-shadow: 0 6px 14px rgba(5,150,105,0.4); transform: scale(1.05); }
.msx-access-btn--farhangian.is-on .msx-access-menu-row__label{ color: var(--accent-mint); }
.msx-access-btn--azad.is-on .msx-access-menu-row__avatar{ background: linear-gradient(150deg, #F59E0B, var(--accent-amber)); box-shadow: 0 6px 14px rgba(217,119,6,0.4); transform: scale(1.05); }
.msx-access-btn--azad.is-on .msx-access-menu-row__label{ color: var(--accent-amber); }
.msx-access-menu-row.is-off .msx-access-menu-row__avatar{ filter: grayscale(.3); }
.msx-access-menu-row.is-loading{ opacity: .55; pointer-events: none; }
.msx-access-menu-account{
  justify-content: flex-start;
  padding: 10px 14px;
  background: rgba(var(--ink), 0.035);
  border-top: 1px solid rgba(var(--ink), 0.06);
}
.msx-access-menu-account .msx-account-switch__label--main{ flex:1; text-align:right; font-size: 12px; font-weight:800; }

/* ---------- جدولِ «انتخاب رشته» (نمایِ کارتِ کناری) - دکمه‌یِ آیکونیِ ورود به هر مسیر ---------- */
.msx-major-table td{ font-size: 14px; }
.msx-major-table th{ white-space:nowrap; }
/* ستون‌هایِ مدرسه/ادمین/سرمشاور/مشاور: مقدارِ کوتاه و مینیمال، بدونِ شلوغیِ جدول */
.msx-mini-tag{
  display:inline-block;
  max-width: 130px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  background: rgba(124,108,255,0.12);
  color: var(--accent-lav, #7C6CFF);
  border: 1px solid rgba(124,108,255,0.24);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
/* ⭐ نشانِ «مجاز/غیرمجاز»یِ کارنامه، کنارِ اسمِ دانش‌آموز تویِ همین جدول —
   تیکِ سبز یعنی طبقِ کارنامه برایِ همه‌ی دوره‌ها مجازه، علامتِ زرد یعنی
   حداقل یکی از دوره‌ها/نحوه‌هایِ پذیرش براش غیرمجازه (جزئیات تویِ هینت).
   ر.ک. msxStudentEligibilitySummary تویِ majors.js. */
.msx-name-cell{ display:inline-flex; align-items:center; gap:5px; max-width:100%; }
.msx-name-cell__text{ overflow:hidden; text-overflow:ellipsis; }
.msx-elig-status-badge{
  display:inline-flex;
  flex:none;
  font-size: 13px;
  line-height:1;
  cursor: help;
}
.msx-elig-status-badge--ok{ color: var(--accent-mint); }
.msx-elig-status-badge--warn{ filter: saturate(1.05); }

/* ⭐ نشانِ «وضعیتِ کارنامه» کنارِ اسمِ دانش‌آموز تویِ لیستِ انتخاب رشته
   (ر.ک. msxKarnamehStatusBadgeHtml تویِ majors.js) */
.msx-kn-status{
  display:inline-flex; align-items:center; flex:none; gap:3px;
  padding:2px 8px; font-size:10.5px; font-weight:700; line-height:1.5;
  border-radius:999px; white-space:nowrap; cursor:help;
}
.msx-kn-status--done{
  color:#047857; background:rgba(16,185,129,.13); border:1px solid rgba(16,185,129,.35);
}
.msx-kn-status--none{
  color:#B45309; background:rgba(245,158,11,.13); border:1px dashed rgba(245,158,11,.55);
}
/* آیتمِ «ویرایش اطلاعات» برایِ دانش‌آموزِ قفل‌شده (کارنامه‌دار) */
.msx-row-menu-item.is-locked{ opacity:.55; cursor:not-allowed; }

.msx-mini-meta{
  display:inline-block;
  max-width: 110px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.msx-mini-dash{ color: var(--text-faint); font-size: 12.5px; }

.msx-major-type-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  cursor: pointer;
  padding: 0;
  font-size: 16px;
  transition: transform .12s ease, box-shadow .18s ease, filter .15s ease;
}
.msx-major-type-btn:hover{ transform: translateY(-1px) scale(1.05); }
.msx-major-type-btn:active{ transform: translateY(0) scale(.95); }
.msx-major-type-btn--sarasari{ background: rgba(124,108,255,0.15); border-color: rgba(124,108,255,0.32); box-shadow: 0 3px 10px rgba(124,108,255,0.2); }
.msx-major-type-btn--sarasari:hover{ box-shadow: 0 5px 14px rgba(124,108,255,0.3); }
.msx-major-type-btn--farhangian{ background: rgba(5,150,105,0.15); border-color: rgba(5,150,105,0.32); box-shadow: 0 3px 10px rgba(5,150,105,0.2); }
.msx-major-type-btn--farhangian:hover{ box-shadow: 0 5px 14px rgba(5,150,105,0.3); }
.msx-major-type-btn--azad{ background: rgba(217,119,6,0.15); border-color: rgba(217,119,6,0.32); box-shadow: 0 3px 10px rgba(217,119,6,0.2); }
.msx-major-type-btn--azad:hover{ box-shadow: 0 5px 14px rgba(217,119,6,0.3); }

/* ---------- دکمه‌یِ «جلسه‌یِ ۱/۲/۳» تویِ جدولِ انتخاب رشته ---------- */
.msx-session-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--ink),0.14);
  background: rgba(var(--ink),0.04);
  color: var(--text-faint);
  cursor: pointer;
  padding: 0;
  font-size: 15px;
  transition: transform .12s ease, box-shadow .18s ease, filter .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.msx-session-btn:hover{ transform: translateY(-1px) scale(1.05); }
.msx-session-btn:active{ transform: translateY(0) scale(.95); }
/* هنوز تاریخ/ساعتی برایِ این جلسه تعیین نشده — آیکون کمرنگ */
.msx-session-btn.is-unset{ opacity:.5; filter: grayscale(.4); }
/* جلسه تعیین شده — آیکون رنگی و پررنگ */
.msx-session-btn.is-set{
  opacity: 1;
  filter: none;
  color: #047857;
  background: rgba(5,150,105,0.15);
  border-color: rgba(5,150,105,0.32);
  box-shadow: 0 3px 10px rgba(5,150,105,0.2);
}
.msx-session-btn.is-set:hover{ box-shadow: 0 5px 14px rgba(5,150,105,0.3); }

/* ---------- مودالِ تنظیمِ تاریخ/ساعتِ جلسه ---------- */
.msx-session-box{ max-width: 420px; }
.msx-session-date-field{ margin-bottom: 16px; }
.msx-session-time-field{ margin-bottom: 4px; }
.msx-session-time-picker{ margin-top: 6px; }
.msx-session-time-picker .sp-duration-picker__unit select{ font-size: 17px; }
.msx-session-current{
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(5,150,105,0.1);
  border: 1px solid rgba(5,150,105,0.24);
  color: #047857;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.msx-session-actions{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 20px;
}
.msx-session-actions .msx-session-save-btn{ flex:1; }

.msx-major-table tbody tr.msx-row-inactive td{
  opacity: .55;
  filter: grayscale(.3);
}

/* ---------- مودالِ ویرایشِ دانش‌آموز ---------- */
.msx-edit-locked-hint{ font-size:11px; font-weight:500; color: var(--text-faint); }
.msx-edit-password-row{ display:flex; gap:8px; }
.msx-edit-password-row input{ flex:1; min-width:0; }
.msx-edit-random-pass-btn{ white-space:nowrap; flex-shrink:0; }

.role-badge{
  display:inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border:1px solid transparent;
}
.role-badge--admin{ background: rgba(217,119,6,0.14); color: var(--accent-amber); border-color: rgba(217,119,6,0.28); }
.role-badge--student{ background: rgba(5,150,105,0.13); color: var(--accent-mint); border-color: rgba(5,150,105,0.28); }

/* ---------- تب‌های پنل مدیریت ---------- */
.admin-tabs{
  display:flex;
  gap:6px;
  margin-bottom: 30px;
  padding:6px;
  border-bottom: none;
  background: rgba(var(--ink),.045);
  border-radius: 999px;
  overflow-x:auto;
}
.admin-tab{
  position:relative;
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:6px;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  background:transparent;
  border:none;
  border-radius:999px;
  cursor:pointer;
  transition: color .2s ease, background .25s ease, box-shadow .25s ease;
}
.admin-tab::after{ content:none; }
.admin-tab:hover{ color: var(--text-paper); background: rgba(var(--ink),.06); }
.admin-tab.is-active{
  color:#fff;
  background: linear-gradient(120deg, var(--accent-lav), #8f7bff 55%, var(--accent-mint));
  box-shadow: 0 10px 22px -10px rgba(108,99,255,.6);
}
.admin-tab.is-active:hover{ color:#fff; background: linear-gradient(120deg, var(--accent-lav), #8f7bff 55%, var(--accent-mint)); }

.tab-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding: 0 5px;
  font-size: 11px;
  font-weight:700;
  color:#0F1130;
  background: var(--accent-amber);
  border-radius:999px;
}

/* ---------- چراغِ چشمک‌زنِ «پیامِ جدید» ----------
   رویِ هر جایی که باید بگه «یه پیامِ خوانده‌نشده داری» - هم رویِ
   شماره‌ی tab-badge خودش (سایه‌ی نبض‌دار)، هم به‌صورتِ یک نقطه‌ی
   مستقل (msg-blink-dot) کنارِ دکمه‌هایی مثلِ «پیام به ادمین»/«پیام
   به دانش‌آموز» که خودشون badge عددی ندارن. */
@keyframes msg-blink-pulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(255,180,84,.55); }
  50%{ box-shadow: 0 0 0 6px rgba(255,180,84,0); }
}
.tab-badge.is-blinking{ animation: msg-blink-pulse 1.4s ease-in-out infinite; }

.msg-blink-dot{
  display:inline-block;
  width:9px; height:9px;
  border-radius:50%;
  background: var(--accent-amber);
  margin-inline-start:6px;
  vertical-align:middle;
  animation: msg-blink-pulse 1.4s ease-in-out infinite;
}
.msg-blink-dot[hidden]{ display:none; }

.admin-tab-panel{ animation: card-in .35s ease both; }

.panel-grid{
  display:flex;
  gap: 28px;
  align-items:flex-start;
  flex-wrap:wrap;
}

.panel-card{
  position:relative;
  background: #FFFFFF;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  padding: 30px 28px;
  box-shadow: var(--shadow-card);
  overflow:hidden;
}
.panel-card::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:2px;
  background: rgba(var(--ink),0.1);
  opacity:1;
}
.panel-card--form{ flex: 0 0 360px; max-width:100%; }
.panel-card--list{ flex: 1 1 480px; min-width: 320px; }
.panel-card--full{ width:100%; }

/* ⭐ تا وقتی یه منویِ شناورِ «⋮ عملیات»یِ داخلِ یه ردیف بازه، overflow:hidden
   رو موقتاً خاموش می‌کنیم (نگاه کن به msxOpenRowMenu تویِ majors.js).
   چون این کارت backdrop-filter داره، طبقِ استانداردِ CSS خودش
   containing-blockِ پنل‌هایِ position:fixedِ داخلش می‌شه؛ بدونِ این کلاس،
   overflow:hidden همون پنل رو هر وقت بخواد از مرزِ کارت بیرون بزنه
   (مثلاً برایِ ردیف‌هایِ پایینیِ جدول) می‌بره/نامرئی می‌کنه. */
.msx-menu-clip-off{ overflow:visible !important; }

.panel-card__title{
  margin: 0 0 20px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-paper);
  display:flex;
  align-items:center;
  gap:8px;
}
.panel-card__title::before{
  content:"";
  width:8px; height:8px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--accent-lav), var(--accent-mint));
  box-shadow: 0 0 0 4px rgba(108,99,255,.14);
  flex-shrink:0;
}

.empty-hint{
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--text-faint);
  text-align:center;
}
/* ⭐ وقتی «موردی پیدا نشد» به‌خاطرِ غیرمجاز بودنِ ترکیبِ فیلترهاست (طبقِ
   کارنامه‌ی دانش‌آموز) نه صرفاً نبودنِ دیتا — ر.ک. mxbSelectionFullyBlockedByEligibility
   تویِ majors.js. */
.mxb-empty-warn-icon{ margin-inline-end:4px; }

/* ---------- فیلترهای دوره‌ها ---------- */
.courses-filter-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom: 12px;
}
.courses-filter-row .users-table-title{ margin:0; }
.courses-filters{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
/* ⭐ فیلترهای select داخل ردیف فیلترها دیگه عرض ۱۰۰٪ نگیرن — همه تو یه خط کنارِ هم بشینن */
.courses-filters .select-role{
  width:auto;
  min-width:150px;
  flex:0 1 170px;
  padding: 9px 14px;
  font-size: 12.5px;
}
/* ⭐ سلکت‌های فیلتر بعدِ فعال‌شدنِ mxb-single-select.js دیگه خودِ <select>
   نیستن؛ یه <div class="mxb-ssel"> جایگزینِ بصری‌شون می‌شه (که پیش‌فرض
   width:100% داره) و قاعده‌ی بالا رو نمی‌بینه. بدونِ این‌جا، هر فیلتر
   کلِ عرضِ ردیف رو می‌گیره و بقیه به خطِ بعد پرت می‌شن. همین باعثِ
   پشتِ‌سرهم‌افتادنِ فیلترهای پنلِ «دانش‌آموزان» می‌شد. */
.courses-filters .mxb-ssel{
  width:auto;
  min-width:150px;
  flex:0 1 170px;
}
.courses-filters .mxb-ssel.mxb-mini{
  min-width:128px;
  flex:0 1 148px;
}
/* ⭐ دکمه‌ی «افزودن کاربر» قبلاً استایلِ پیش‌فرضِ .btn-submit (بزرگ، مخصوصِ
   دکمه‌یِ ته‌فرم) رو داشت — پدینگ/فونتِ درشتش باعث می‌شد کلِ محتوایِ ردیفِ
   فیلترها جا نشه و دکمه تنها تو یه خطِ جدا (زیرِ فیلترها) بیفته و فضایِ
   اضافه بگیره. این‌جا یه سایزِ جمع‌وجورِ هم‌قدِ فیلترها/سرچ‌باکس براش تعریف
   می‌کنیم تا همیشه تویِ همون ردیفِ فیلترها جا بشه. */
.msx-add-user-btn{
  margin-top:0;
  padding:9px 16px;
  font-size:12.5px;
  border-radius:10px;
  white-space:nowrap;
  flex:0 0 auto;
  box-shadow: 0 8px 18px -10px rgba(69,230,165,0.5);
}
/* ⭐ فقط تویِ تولبارِ «کاربران زیرمجموعه»، سرچ‌باکس و فیلترها رو کمی
   جمع‌وجورتر می‌کنیم تا کنارِ دکمه‌ی «افزودن کاربر» تویِ یه خط جا بشن
   و فضایِ خالیِ اضافه هدر نره. */
.msx-staff-panel .courses-filters .select-role{
  min-width:128px;
  flex:0 1 140px;
}
.msx-staff-panel .msx-search-box__input{
  width:150px;
}
/* ⭐ قبلاً .courses-filters خودش flex-wrap:wrap داشت، پس وقتی کنارِ
   عنوانِ «کاربران زیرمجموعه» تویِ همون ردیف جا نمی‌شد، به‌جایِ اینکه
   خودش به‌عنوانِ یه بلوکِ یکپارچه بره خطِ بعد، فرزندهاش (سلکت‌ها/سرچ/دکمه)
   از هم جدا می‌شدن و دکمه‌ی «افزودن کاربر» تنها می‌افتاد وسطِ یه خطِ دیگه.
   با nowrap روی خودِ فیلترها، دیگه از هم جدا نمی‌شن. ولی چون
   .courses-filter-row (والدِ مشترکِ عنوان و فیلترها) هم wrap داشت، بازم
   کلِ بلوکِ فیلترها+دکمه می‌رفت زیرِ عنوان. برای اینکه واقعاً همه —
   عنوان، فیلترها، سرچ، دکمه — تویِ یه خط بمونن، خودِ ردیف رو هم nowrap
   می‌کنیم و عنوان رو flex-shrink:0 می‌ذاریم که جمع نشه. */
.msx-staff-panel .courses-filters{
  flex-wrap: nowrap;
  flex-shrink: 0;
}
.msx-staff-panel .courses-filter-row{
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
}
.msx-staff-panel .courses-filter-row .users-table-title{
  flex-shrink: 0;
  white-space: nowrap;
}
@media (max-width: 860px){
  .msx-staff-panel .courses-filter-row{ flex-direction:column; align-items:flex-start; flex-wrap:wrap; overflow-x:visible; }
  .msx-staff-panel .courses-filter-row .users-table-title{ white-space:normal; }
  .msx-staff-panel .courses-filters{
    flex-wrap: wrap;
    flex-shrink: 1;
    width:100%;
  }
}
.btn-connect-all{
  padding:8px 16px;
  border:none;
  border-radius:10px;
  font-size:12.5px;
  font-weight:800;
  color:#0F1130;
  background: linear-gradient(135deg, var(--accent-amber), var(--accent-mint));
  box-shadow: 0 6px 16px -6px rgba(255,180,84,.5);
  cursor:pointer;
  transition: filter .15s ease, transform .15s ease;
  white-space:nowrap;
}
.btn-connect-all:hover{ filter: brightness(1.08); transform: translateY(-1px); }
.btn-connect-all:disabled{ opacity:.6; cursor:default; transform:none; }
.select-filter{
  width:auto;
  padding: 8px 12px;
  font-size: 12.5px;
  border-radius: 10px;
}

/* ---------- فیلترهای پنلِ «انتخاب رشته» (مدرسه/ادمین/سرمشاور/مشاور) + نشانِ تعدادِ کل ---------- */
.msx-major-filters{ row-gap:8px; }
.msx-mini-select{
  width:auto;
  min-width: 128px;
  padding: 7px 12px;
  font-size: 12.5px;
  border-radius: 10px;
}
.msx-total-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 7px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight:800;
  color:#0F1130;
  background: linear-gradient(135deg, var(--accent-amber), var(--accent-mint));
  white-space:nowrap;
  box-shadow: 0 6px 16px -8px rgba(255,180,84,.5);
}

/* ---------- جعبه‌یِ جستجو با نام (دانش‌آموزان / انتخاب رشته) ---------- */
.msx-search-box{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid rgba(var(--ink),0.12);
  background: rgba(var(--ink),0.03);
  transition: border-color .15s ease, background .15s ease;
}
.msx-search-box:focus-within{
  border-color: var(--accent-mint);
  background: rgba(var(--ink),0.02);
}
.msx-search-box__icon{
  width:15px; height:15px;
  flex-shrink:0;
  color: var(--text-faint);
}
.msx-search-box__input{
  border:none;
  outline:none;
  background:transparent;
  font: inherit;
  font-size: 12.5px;
  color: var(--text-paper, inherit);
  width: 190px;
  max-width: 100%;
}
.msx-search-box__input::placeholder{ color: var(--text-faint); }

/* ⭐ ردیفِ فیلترهایِ پنلِ «لیستِ دانش‌آموزان»: باکسِ سرچ کنارِ همون ۳ تا
   فیلتر (ادمین/سرمشاور/مشاور) میاد، تو یه خط، و فضایِ خالیِ باقی‌مونده رو
   پُر می‌کنه به‌جایِ اینکه با عرضِ ثابت و کوچیک، تنها و ولو تو یه خطِ
   جدا بیفته. */
.msx-students-head{ margin-bottom:10px; }
.msx-students-head .users-table-title{ margin:0; }
.msx-students-filters{ width:100%; margin-bottom:12px; }
.msx-students-filters .msx-mini-select{ flex:0 0 auto; }
.msx-students-search{
  flex:1 1 220px;
  min-width:180px;
}
.msx-students-search .msx-search-box__input{ width:100%; }
@media (max-width:640px){
  .msx-students-search{ flex-basis:100%; }
}

.grade-badge{
  display:inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border:1px solid transparent;
}
.grade-badge--10{ background: rgba(108,99,255,0.13); color: var(--accent-lav); border-color: rgba(108,99,255,0.28); }
.grade-badge--11{ background: rgba(217,119,6,0.14); color: var(--accent-amber); border-color: rgba(217,119,6,0.28); }
.grade-badge--12{ background: rgba(5,150,105,0.13); color: var(--accent-mint); border-color: rgba(5,150,105,0.28); }

.field-badge{
  display:inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(219,39,119,0.1);
  color: var(--day-4);
  border:1px solid rgba(219,39,119,0.22);
}

/* ---------- انتخابگرِ جنسیت (دو دکمه‌یِ سوییچی به‌جایِ سلکتِ خشک) ---------- */
.msx-gender-picker{ display:flex; gap:10px; }
.msx-gender-opt{
  flex:1;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding: 12px 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
  background: rgba(var(--ink),0.035);
  border: 1.5px solid rgba(var(--ink),0.09);
  border-radius: var(--radius-field);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .12s ease;
}
.msx-gender-opt__icon{ font-size:17px; line-height:1; }
.msx-gender-opt:hover{ border-color: rgba(var(--ink),0.2); }
.msx-gender-opt:active{ transform: scale(.97); }
.msx-gender-opt.is-active{
  color: var(--accent-mint);
  border-color: var(--accent-mint);
  background: rgba(69,230,165,0.1);
  box-shadow: 0 0 0 4px rgba(69,230,165,0.14);
}

/* ---------- کمبوباکسِ «تایپ کن یا از لیست انتخاب کن» (مدرسه / سهمیه) ---------- */
.msx-combo{ position:relative; }
.msx-combo__panel{
  position:absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left:0; right:0;
  max-height: 220px;
  overflow-y:auto;
  background: var(--bg-night-2, #fff);
  border: 1px solid rgba(var(--ink),0.12);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.16);
  padding: 6px;
}
.msx-combo__item{
  display:flex; align-items:center; gap:8px;
  width:100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13.5px;
  text-align: right;
  color: var(--text-paper);
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s ease;
}
.msx-combo__item:hover, .msx-combo__item.is-highlighted{ background: rgba(108,99,255,0.1); }
.msx-combo__item--add{ color: var(--accent-mint); font-weight:700; }
.msx-combo__empty{ padding:10px 12px; font-size:12.5px; color: var(--text-faint); }

/* ---------- رمزِ عبورِ ماسک‌شده تویِ جدول (نقطه‌ها + چشم + کپی) ---------- */
.msx-credential-cell{ display:flex; align-items:center; gap:6px; direction:ltr; justify-content:flex-end; }
.msx-credential-value{
  /* ⭐ اعدادِ جذاب‌تر: فونتِ Orbitron (که تویِ سایت برایِ اعدادِ دیگه هم
     استفاده شده) + پیلِ ملایم به‌جایِ متنِ ساده‌ی قبلی — سایزِ جمع‌وجور */
  font-family: "Orbitron", "Vazirmatn", Tahoma, sans-serif;
  font-weight: 600;
  letter-spacing: .3px;
  font-size: 11px;
  color: #4338CA;
  background: rgba(67,56,202,0.08);
  padding: 3px 7px;
  border-radius: 7px;
  min-width: 38px;
  text-align:center;
  font-variant-numeric: tabular-nums;
}
.msx-icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width: 28px; height: 28px;
  border-radius: 8px;
  border: none;
  background: rgba(var(--ink),0.05);
  color: var(--text-muted);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
  flex-shrink:0;
}
.msx-icon-btn:hover{ background: rgba(108,99,255,0.12); color: var(--text-paper); }
.msx-icon-btn svg{ width:15px; height:15px; }

/* ---------- تُستِ کوچیکِ «کپی شد» ---------- */
.msx-toast{
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15,23,42,0.92);
  color:#fff;
  font-size: 13.5px;
  font-weight:700;
  padding: 10px 20px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  z-index: 999;
  animation: msxToastPop .18s ease;
}
@keyframes msxToastPop{
  from{ opacity:0; transform: translateX(-50%) translateY(8px); }
  to{ opacity:1; transform: translateX(-50%) translateY(0); }
}

/* ---------- فیلدهای هم‌ردیف (پایه + رشته) ---------- */
.field-row{
  display:flex;
  gap:12px;
}
.field-row .field{ flex:1; min-width:0; }

/* ---------- بخش‌بندیِ فرمِ ثبتِ برنامه (برایِ اینکه یه فرمِ طولانیِ گیج‌کننده نباشه) ---------- */
.sp-form-section{
  padding:16px;
  margin-bottom:16px;
  border:1px solid var(--card-border);
  border-radius:16px;
  background: rgba(var(--ink),.02);
}
.sp-form-section .field:last-child,
.sp-form-section .field-row:last-child{ margin-bottom:0; }
.sp-form-section__title{
  margin:0 0 14px;
  font-size:13px;
  font-weight:800;
  color: var(--text-paper);
}
.sp-form-section--dynamic{
  border-color: rgba(139,144,214,.35);
  background: rgba(139,144,214,.04);
}
.sp-form-section--dynamic:empty,
.sp-form-section--dynamic[hidden]{ display:none; }

/* بخشِ «توضیحات/برچسب» به‌صورتِ collapsible - پیش‌فرض بسته تا فرم شلوغ نباشه */
.sp-form-section--collapsible{ padding:0; overflow:hidden; }
.sp-form-section--collapsible > .sp-form-section__title{
  margin:0;
  padding:14px 16px;
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  user-select:none;
}
.sp-form-section--collapsible > .sp-form-section__title::-webkit-details-marker{ display:none; }
.sp-form-section--collapsible > .sp-form-section__title::after{
  content:"▾";
  color: var(--text-muted);
  transition: transform .15s ease;
}
.sp-form-section--collapsible[open] > .sp-form-section__title::after{ transform: rotate(180deg); }
.sp-form-section--collapsible > .field{ padding:0 16px 16px; }
.sp-form-section--collapsible > .field:first-of-type{ margin-top:2px; }

/* ---------- ویزارد برنامه مطالعاتی ---------- */
.wizard-steps{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 26px;
  flex-wrap:wrap;
}
.wizard-step-dot{
  display:flex;
  align-items:center;
  gap:8px;
  font-size: 13px;
  font-weight:600;
  color: var(--text-faint);
  padding: 6px 14px 6px 8px;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: rgba(var(--ink),0.02);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.wizard-step-dot span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:22px; height:22px;
  border-radius:50%;
  font-size:12px;
  font-weight:700;
  background: rgba(var(--ink),0.06);
  color: var(--text-faint);
  transition: background .2s ease, color .2s ease;
}
.wizard-step-dot.is-active{
  color: var(--text-paper);
  border-color: rgba(69,230,165,0.4);
  background: rgba(69,230,165,0.06);
}
.wizard-step-dot.is-active span{
  background: linear-gradient(135deg, var(--accent-mint), var(--accent-amber));
  color:#0F1130;
}
.wizard-step-dot.is-done{ color: var(--accent-mint); }
.wizard-step-dot.is-done span{ background: rgba(69,230,165,0.18); color: var(--accent-mint); }

.plan-step__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 16px;
}
.plan-step__actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top: 4px;
}

.btn-ghost{
  padding: 13px 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(var(--ink),0.03);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-field);
  cursor:pointer;
  transition: color .2s ease, border-color .2s ease;
}
.btn-ghost:hover{ color: var(--text-paper); border-color: rgba(var(--ink),0.22); }

/* ---------- دکمه‌ی «منابع» تویِ جدولِ کاربرها - نسخه‌ی رنگی ---------- */
.user-resources-btn{
  padding:6px 14px;
  font-size:12px;
  font-weight:700;
  color: var(--accent-lav);
  background: rgba(108,99,255,.1);
  border-color: rgba(108,99,255,.26);
  border-radius:999px;
}
.user-resources-btn:hover{
  color:#fff;
  background: linear-gradient(120deg, var(--accent-lav), #8f7bff);
  border-color: transparent;
}

.btn-submit--auto{ margin-top:0; flex:1; }

/* ---------- لیست تیک‌خور دانش‌آموزها ---------- */
.checkbox-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height: 360px;
  overflow-y:auto;
  padding-left: 4px;
}
.checkbox-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px 14px;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  background: rgba(var(--ink),0.025);
  font-size: 14px;
  color: var(--text-paper);
  cursor:pointer;
  transition: border-color .2s ease, background .2s ease;
}
.checkbox-item:hover{ border-color: rgba(var(--ink),0.18); }
.checkbox-item input[type="checkbox"]{
  width:18px; height:18px;
  accent-color: var(--accent-mint);
  cursor:pointer;
  flex-shrink:0;
}
.checkbox-item:has(input:checked){
  border-color: rgba(69,230,165,0.4);
  background: rgba(69,230,165,0.06);
}

/* ---------- کارت جذاب ثبت برنامه (گام ۳) ---------- */
.plan-card{
  position:relative;
  flex: 1 1 480px;
  min-width: 320px;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(var(--ink),0.06), rgba(var(--ink),0.02));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(69,230,165,0.28);
  border-radius: var(--radius-card);
  padding: 32px 30px;
  box-shadow: var(--shadow-card), 0 0 0 1px rgba(69,230,165,0.06) inset;
  animation: card-in .4s cubic-bezier(.2,.8,.2,1) both;
}
.plan-card__glow{
  position:absolute;
  inset: -40% -20% auto auto;
  width: 320px; height: 320px;
  background: radial-gradient(closest-side, rgba(69,230,165,0.22), transparent 70%);
  pointer-events:none;
}
.plan-card__eyebrow{
  position:relative;
  margin:0 0 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--accent-mint);
}
.plan-card__title{
  position:relative;
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 900;
  color: var(--text-paper);
}
.plan-card__summary{
  position:relative;
  margin: 0 0 22px;
  font-size: 13px;
  color: var(--text-muted);
}

.plan-history{ margin-top: 28px; }

/* ---------- صندوق پیام: نمایِ دوستونه (لیستِ گفتگوها + خودِ گفتگو) ---------- */
.msg-inbox{
  display:flex;
  gap:20px;
  align-items:flex-start;
  width:100%;
}
.msg-inbox__threads{
  flex: 0 0 300px;
  max-height: 640px;
  overflow-y:auto;
}
.msg-inbox__chat{
  flex: 1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  height: 640px;
}
.msg-inbox__chat-title{
  margin:0 0 10px;
  font-size:13px;
  font-weight:800;
  color: var(--text-paper);
}
@media (max-width: 860px){
  .msg-inbox{ flex-direction:column; }
  .msg-inbox__threads{ flex-basis:auto; width:100%; max-height:280px; }
  .msg-inbox__chat{ width:100%; height:480px; }
}

.msg-thread-list{ display:flex; flex-direction:column; gap:8px; }
.msg-thread-item{
  display:flex;
  flex-direction:column;
  gap:4px;
  width:100%;
  text-align:right;
  padding: 10px 12px;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  background: rgba(var(--ink),0.025);
  cursor:pointer;
  font-family:inherit;
  transition: background .2s ease, border-color .2s ease;
}
.msg-thread-item:hover{ background: rgba(var(--ink),0.05); }
.msg-thread-item.is-active{
  border-color: rgba(139,144,214,.45);
  background: rgba(139,144,214,.1);
}
.msg-thread-item.has-unread{
  border-color: rgba(69,230,165,0.35);
  background: rgba(69,230,165,0.05);
}
.msg-thread-item__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.msg-thread-item__name{
  font-size: 13px;
  font-weight: 700;
  color: var(--text-paper);
  display:flex;
  align-items:center;
}
.msg-thread-item__date{
  font-size: 11px;
  color: var(--text-faint);
  white-space:nowrap;
}
.msg-thread-item__preview{
  margin:0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.msg-thread-item__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 5px;
  font-size:11px;
  font-weight:700;
  color:#0F1130;
  background: var(--accent-mint);
  border-radius:999px;
}

.admin-guard-msg{
  color: var(--text-muted);
  font-size: 14px;
  text-align:center;
}

/* ---------- ریسپانسیو ---------- */
@media (max-width: 420px){
  .modal{ padding: 32px 22px 26px; border-radius: 20px; }
  .modal__title{ font-size: 23px; }
}

@media (max-width: 900px){
  .admin-shell{ padding: 30px 20px 44px; }
  .panel-card{ padding: 24px 20px; }
  .panel-card--form{ flex-basis: 100%; }
}

@media (max-width: 560px){
  .admin-header{ flex-direction:column; }
  .admin-title{ font-size: 22px; }
  .courses-filter-row{ flex-direction:column; align-items:flex-start; }
  .courses-filters{ width:100%; }
  .select-filter{ flex:1; }
  .field-row{ flex-direction:column; gap:16px; }
  .wizard-step-dot{ font-size:12px; padding:5px 10px 5px 6px; }
  .wizard-step-dot span{ width:19px; height:19px; }
}

/* ---------- دسترسی‌پذیری ---------- */
input:focus-visible, .toggle-pass:focus-visible, .btn-submit:focus-visible, .modal__footer a:focus-visible{
  outline: 2px solid var(--accent-mint);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  .modal, .form__error, .node circle:nth-child(1), .study-path, .study-path-glow, .sparkle, .scene, .msx-quota-buy-btn, .msx-quota-buy-btn__shine, .msx-quota-buy-btn__icon{ animation: none !important; }
}

/* ===========================================================
   اتصال به پرسش‌لند — کنترلِ مپ‌کردنِ دوره در جدولِ ادمین
   =========================================================== */
.course-link-cell{ display:flex; align-items:center; gap:8px; }

.psl-connected-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:700;
  padding:5px 10px;
  border-radius:999px;
  white-space:nowrap;
}
.psl-connected-badge--on{
  background: rgba(69,230,165,.14);
  color: var(--accent-mint);
  border:1px solid rgba(69,230,165,.35);
}
.psl-connected-badge--on .psl-connected-badge__dot{
  width:7px; height:7px; border-radius:50%;
  background: var(--accent-mint);
  box-shadow: 0 0 0 0 rgba(69,230,165,.6);
  animation: psl-pulse 1.8s infinite;
}
.psl-connected-badge--off{
  background: rgba(var(--ink),.05);
  color: var(--text-muted);
  border:1px solid var(--card-border);
}
@keyframes psl-pulse{
  0%   { box-shadow: 0 0 0 0 rgba(69,230,165,.55); }
  70%  { box-shadow: 0 0 0 6px rgba(69,230,165,0); }
  100% { box-shadow: 0 0 0 0 rgba(69,230,165,0); }
}

/* ===========================================================
   دوره‌ها — گروه‌بندی‌شده بر اساسِ پایه/رشته، به‌شکلِ کارتِ کاوردار
   =========================================================== */
.course-groups{ display:flex; flex-direction:column; gap:26px; max-height:660px; overflow-y:auto; padding:4px; }
.course-group__title{
  display:flex; align-items:center; gap:8px;
  margin:0 0 14px;
  padding-bottom:9px;
  border-bottom:1px solid var(--card-border);
}
.course-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:16px; }
.course-card{
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background: var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:18px;
  box-shadow: 0 8px 20px -12px rgba(0,0,0,.6);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .25s ease;
}
.course-card:hover{
  transform: translateY(-4px);
  border-color: rgba(var(--ink),.2);
  box-shadow: 0 16px 30px -14px rgba(0,0,0,.7);
}
.course-card.is-removing{
  transform: scale(.85);
  opacity:0;
}

/* تأییدِ حذف - به‌جایِ confirm()ِ خامِ مرورگر، یه لایه‌ی داخلِ خودِ کارت */
.course-card__confirm-overlay{
  position:absolute; inset:0;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:18px;
  text-align:center;
  background: rgba(15,17,48,.94);
  backdrop-filter: blur(2px);
  animation: course-confirm-in .18s ease;
}
@keyframes course-confirm-in{ from{ opacity:0; transform:scale(.92); } to{ opacity:1; transform:scale(1); } }
.course-card__confirm-text{ margin:0; font-size:13px; font-weight:700; color: var(--text-paper); line-height:1.6; }
.course-card__confirm-actions{ display:flex; gap:8px; width:100%; }
.course-card__confirm-yes,
.course-card__confirm-no{
  flex:1;
  padding:8px 10px;
  border-radius:10px;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  border:none;
  transition: filter .15s ease, transform .15s ease;
}
.course-card__confirm-yes{
  color:#fff;
  background: linear-gradient(135deg, #e35d5d, #c23f3f);
  box-shadow: 0 6px 16px -6px rgba(227,93,93,.55);
}
.course-card__confirm-yes:hover{ filter: brightness(1.1); transform: translateY(-1px); }
.course-card__confirm-no{
  color: var(--text-paper);
  background: rgba(var(--ink),.08);
  border:1px solid var(--card-border);
}
.course-card__confirm-no:hover{ background: rgba(var(--ink),.14); }

/* «کاورِ» رنگیِ بالایِ کارت - گرادیانِ متناسب با موضوعِ درس + آیکونِ بزرگ */
.course-card__cover{
  position:relative;
  height:74px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.course-card__cover::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 25% 20%, rgba(255,255,255,.28), transparent 55%);
  pointer-events:none; /* وگرنه همین لایه‌ی تزئینی جلویِ کلیک‌روییِ دکمه‌ی ✕ رو می‌گیره */
}
.course-card__cover-icon{
  position:relative;
  font-size:30px;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.35));
  transition: transform .25s ease;
}
.course-card:hover .course-card__cover-icon{ transform: scale(1.12) rotate(-4deg); }

/* عکسِ اختصاصیِ درس که ادمین آپلود کرده - جایِ همون ایموجیِ عمومی می‌شینه */
.course-card__cover-img{
  position:relative;
  width:100%; height:100%;
  box-sizing:border-box;
  padding:12px;
  object-fit:contain;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.35));
  transition: transform .25s ease;
}
.course-card:hover .course-card__cover-img{ transform: scale(1.08); }

.course-card__delete-btn{
  position:absolute;
  top:6px; left:6px;
  width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
  border:none;
  border-radius:50%;
  background: rgba(0,0,0,.28);
  color: rgba(255,255,255,.85);
  font-size:11px;
  cursor:pointer;
  opacity:0;
  transition: opacity .15s ease, background .15s ease;
}
.course-card:hover .course-card__delete-btn{ opacity:1; }
.course-card__delete-btn:hover{ background: rgba(227,93,93,.75); color:#fff; }

/* آپلود/بازنشانیِ آیکونِ درس - گوشه‌ی راستِ کاور، مثلِ دکمه‌ی حذف فقط
   موقعِ هاور دیده می‌شه (به‌جز وقتی در حالِ آپلوده که همیشه دیده بشه). */
.course-card__icon-actions{
  position:absolute;
  top:6px; right:6px;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:5px;
  opacity:0;
  transition: opacity .15s ease;
}
.course-card:hover .course-card__icon-actions{ opacity:1; }
.course-card__icon-upload-btn,
.course-card__icon-reset-btn{
  width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
  border:none;
  border-radius:50%;
  background: rgba(0,0,0,.28);
  color: rgba(255,255,255,.85);
  font-size:11px;
  cursor:pointer;
  transition: background .15s ease, transform .15s ease;
}
.course-card__icon-upload-btn:hover{ background: rgba(108,99,255,.75); color:#fff; }
.course-card__icon-reset-btn:hover{ background: rgba(227,93,93,.75); color:#fff; }
.course-card__icon-upload-btn.is-loading{ opacity:1; pointer-events:none; }
.course-card__icon-upload-btn .spinner-dot{
  width:10px; height:10px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;
  animation: spin .7s linear infinite;
}

.course-card__body{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:9px;
  padding:14px;
}
.course-card__title{ margin:0; font-weight:800; font-size:13.5px; color: var(--text-paper); text-align:center; }

/* دکمه‌ی اتصال - جذاب‌تر، با گرادیان و سایه‌ی درخشان */
.course-card__connect-btn{
  position:relative;
  width:100%;
  padding:9px 10px;
  font-size:12px;
  font-weight:800;
  border:none;
  border-radius:10px;
  color:#0F1130;
  background: linear-gradient(135deg, var(--accent-mint), var(--accent-lav));
  box-shadow: 0 6px 16px -6px rgba(69,230,165,.5);
  cursor:pointer;
  transition: filter .15s ease, transform .15s ease;
}
.course-card__connect-btn:hover{ filter: brightness(1.08); transform: translateY(-1px); }
.course-card__connect-btn:disabled{ opacity:.7; cursor:default; transform:none; }
.course-card__connect-btn.is-loading .btn-submit__label{ visibility:hidden; }
.course-card__connect-btn.is-loading .btn-submit__spinner{ display:block; }
.course-card__connect-btn .btn-submit__spinner{
  display:none;
  position:absolute; inset:0;
  margin:auto;
  width:16px; height:16px;
  border-radius:50%;
  border:2px solid rgba(15,17,48,.35);
  border-top-color:#0F1130;
  animation: spin .7s linear infinite;
}

.course-card__disconnect-btn{
  width:100%;
  padding:7px 10px;
  font-size:11px;
  font-weight:700;
  border:1px solid var(--card-border);
  border-radius:10px;
  background: transparent;
  color: var(--text-muted);
  cursor:pointer;
  transition: color .15s ease, border-color .15s ease;
}
.course-card__disconnect-btn:hover{ color:#e35d5d; border-color: rgba(227,93,93,.4); }

.course-card__hint{ margin:0; font-size:11px; color: var(--text-muted); text-align:center; }
.course-card__connect-editor{ display:flex; flex-direction:column; gap:8px; width:100%; }
.course-card__connect-editor .course-category-select{ width:100%; }
.course-card__connect-editor .btn-mini-save{ width:100%; }

/* نشونه‌یِ ظریفِ «قابلِ ویرایشه» - فقط موقعِ هاور دیده می‌شه؛ خودِ کلیک
   رویِ هرجایِ کارت (به‌جز دکمه‌ها/ادیتورِ اتصال) پنلِ ویرایش رو باز می‌کنه. */
.course-card{ cursor:pointer; }
.course-card__edit-hint{
  position:absolute;
  top:80px; right:10px;
  font-size:11px;
  color: var(--text-faint);
  opacity:0;
  transition: opacity .15s ease;
  pointer-events:none;
  z-index:1;
}
.course-card:hover .course-card__edit-hint{ opacity:1; }

/* ---------- پنلِ کشویی (از سمتِ راستِ صفحه) برایِ ویرایشِ یک دوره ---------- */
.course-edit-overlay{
  position:fixed; inset:0;
  background: rgba(5,6,20,.55);
  backdrop-filter: blur(2px);
  z-index:220;
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease;
}
.course-edit-overlay.is-open{ opacity:1; pointer-events:auto; }
.course-edit-drawer{
  position:fixed; top:0; right:0; bottom:0;
  width:100%; max-width:380px;
  background: var(--bg-night-2);
  border-left:1px solid var(--card-border);
  box-shadow: var(--shadow-card);
  padding:26px 22px 24px;
  overflow-y:auto;
  transform: translateX(100%);
  transition: transform .25s ease;
}
.course-edit-overlay.is-open .course-edit-drawer{ transform: translateX(0); }
@media (max-width: 480px){ .course-edit-drawer{ max-width:100%; } }

.course-edit-icon-row{ display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.course-edit-icon-preview{
  flex:none;
  width:56px; height:56px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  font-size:26px;
  background: rgba(var(--ink),.05);
  border:1px solid var(--card-border);
}
.course-edit-icon-preview img{ width:100%; height:100%; object-fit:contain; padding:6px; box-sizing:border-box; }

/* ===========================================================
   منابع (کتاب‌ها) — هم برایِ ادمین (مدیریت) هم برایِ دانش‌آموز (تیک‌زدن)
   =========================================================== */
.resource-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:16px; }
.resource-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
  padding:20px 16px 16px;
  background: var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:18px;
  box-shadow: 0 8px 20px -14px rgba(0,0,0,.6);
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.resource-card::before{
  content:"";
  position:absolute; top:0; right:0; left:0;
  height:4px;
  background: linear-gradient(90deg, var(--accent-lav), var(--accent-amber), var(--accent-mint));
}
.resource-card:hover{
  transform: translateY(-4px);
  border-color: rgba(var(--ink),.2);
  box-shadow: 0 16px 28px -14px rgba(0,0,0,.7);
}
.resource-card__title{ margin:0; font-weight:800; font-size:14px; color: var(--text-paper); text-align:center; }
.resource-card__icon{
  width:52px; height:52px;
  display:flex; align-items:center; justify-content:center;
  font-size:24px;
  border-radius:50%;
  background: linear-gradient(135deg, rgba(139,144,214,.3), rgba(255,180,84,.22));
  box-shadow: 0 0 0 1px rgba(var(--ink),.08), 0 8px 16px -6px rgba(139,144,214,.5);
  transition: transform .2s ease;
}
.resource-card:hover .resource-card__icon{ transform: scale(1.08) rotate(-3deg); }
.resource-card__scope{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:center; }
.resource-card__year{ font-size:11px; font-weight:600; color: var(--text-muted); }
.resource-card__stats{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.resource-card__actions{ display:flex; gap:8px; margin-top:auto; width:100%; }
.resource-card__manage-btn{ flex:1; padding:7px 10px; font-size:11.5px; }
.resource-card__delete-btn{
  width:30px; height:30px; flex-shrink:0;
  border:none; border-radius:50%;
  background: rgba(var(--ink),.06);
  color: var(--text-muted);
  cursor:pointer;
  font-size:12px;
  transition: background .15s ease, color .15s ease;
}
.resource-card__delete-btn:hover{ background: rgba(227,93,93,.2); color:#e35d5d; }

/* حالتِ «تیک‌زدنِ دانش‌آموز» - کلِ کارت یه لیبلِ چک‌باکسه */
.resource-card--pickable{ position:relative; cursor:pointer; padding-top:44px; }
.resource-card--pickable .resource-card__owned-check{
  position:absolute; top:12px; left:12px;
  width:20px; height:20px;
  accent-color: var(--accent-mint);
  cursor:pointer;
}
.resource-card--pickable.is-owned{
  border-color: var(--accent-mint);
  box-shadow: 0 0 0 1.5px var(--accent-mint), 0 12px 24px -14px rgba(69,230,165,.45);
  background: rgba(69,230,165,.05);
}

/* ---------- مودالِ مدیریتِ یک منبع ---------- */
.resource-node-picker{ display:flex; flex-direction:column; gap:14px; }
.resource-node-list{ display:flex; flex-direction:column; gap:8px; max-height:260px; overflow-y:auto; }
.resource-node-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border:1px solid var(--card-border);
  border-radius:12px;
  background: rgba(var(--ink),.025);
}
.resource-node-item__title{ flex:1; font-size:13px; color: var(--text-paper); }
.resource-node-item__count{
  font-size:11.5px; font-weight:800; color: var(--accent-amber);
  background: rgba(255,180,84,.12);
  border-radius:999px; padding:3px 10px;
  flex-shrink:0;
}
.resource-node-item__delete{
  width:26px; height:26px; flex-shrink:0;
  border:none; border-radius:50%;
  background: rgba(var(--ink),.06);
  color: var(--text-muted);
  cursor:pointer;
  font-size:11px;
}
.resource-node-item__delete:hover{ background: rgba(227,93,93,.2); color:#e35d5d; }

.res-grade-checks{ display:flex; gap:8px; flex-wrap:wrap; }
.sp-course-filter-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.sp-course-filter-row:empty{ display:none; margin:0; }
.sp-course-search{
  width:100%;
  margin-bottom:8px;
  padding:9px 12px;
  border:1px solid var(--card-border);
  border-radius:10px;
  background: rgba(var(--ink),.04);
  color: var(--text-paper);
  font-family:inherit;
  font-size:13px;
}
.sp-course-search:focus{ outline:none; border-color: var(--accent-mint); }
.sp-course-search::placeholder{ color: var(--text-faint); }

/* select واقعیِ دوره فقط برایِ نگه‌داشتنِ مقدار/منطق زنده می‌مونه؛ چیزی که
   کاربر می‌بینه، دراپ‌داونِ سفارشیِ زیرِ کادرِ جست‌وجوئه. */
.sp-course-select-hidden{ display:none; }

.sp-course-combo{ position:relative; }
.sp-course-combo .sp-course-search{
  margin-bottom:0;
  padding: 13px 16px;
  border-radius: 14px;
  font-family: "Vazirmatn", Tahoma, sans-serif;
  font-size: 14.5px;
  text-align: center;
  background: rgba(var(--ink),0.045);
  border: 1px solid rgba(var(--ink),0.1);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.sp-course-combo .sp-course-search:focus{
  border-color: var(--accent-mint);
  background: rgba(69,230,165,0.05);
  box-shadow: 0 0 0 4px rgba(69,230,165,0.14);
}

.sp-course-dropdown{
  position:absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0; left: 0;
  max-height: 260px;
  overflow-y: auto;
  padding: 8px;
  display:flex;
  flex-direction:column;
  gap: 4px;
  background: var(--bg-night-2);
  border: 1px solid rgba(var(--ink),0.1);
  border-radius: 16px;
  box-shadow: 0 20px 44px -12px rgba(0,0,0,0.55);
  animation: sp-dropdown-in .16s ease;
}
@keyframes sp-dropdown-in{
  from{ opacity:0; transform: translateY(-6px); }
  to{ opacity:1; transform: translateY(0); }
}
.sp-course-dropdown__item{
  display:block;
  width:100%;
  padding: 11px 14px;
  border: none;
  border-radius: 11px;
  background: transparent;
  color: var(--text-paper);
  font-family: "Vazirmatn", Tahoma, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .1s ease;
}
.sp-course-dropdown__item:hover,
.sp-course-dropdown__item:focus-visible{
  background: linear-gradient(95deg, rgba(69,230,165,0.16), rgba(255,180,84,0.12));
  color: var(--accent-mint);
  transform: translateY(-1px);
}
.sp-course-dropdown__item.is-selected{
  background: linear-gradient(95deg, rgba(69,230,165,0.22), rgba(123,232,194,0.14));
  color: var(--accent-mint);
  font-weight: 800;
}
.sp-course-dropdown__empty{
  padding: 14px;
  text-align:center;
  font-family: "Vazirmatn", Tahoma, sans-serif;
  font-size: 13px;
  color: var(--text-faint);
}

.checkbox-chip{
  display:flex; align-items:center; gap:6px;
  padding:8px 14px;
  border:1px solid var(--card-border);
  border-radius:10px;
  background: rgba(var(--ink),.03);
  color: var(--text-paper);
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
  transition: border-color .15s ease, background .15s ease;
}
.checkbox-chip input{ accent-color: var(--accent-mint); width:15px; height:15px; }
.checkbox-chip:has(input:checked){ border-color: var(--accent-mint); background: rgba(69,230,165,.08); }

/* ---------- پیشنهادِ همین درس رویِ پایه‌هایِ دیگه (مودالِ ثبتِ برنامه) ----------
   وقتی یه درس مثلِ «فیزیک ۲» انتخاب می‌شه و همین درس (بدونِ توجه به عددِ
   آخرش) تویِ پایه‌هایِ دیگه‌ای هم که دانش‌آموز بهشون دسترسی داره باشه،
   این جعبه‌ی رنگی‌یِ کوچیک با یه دکمه به‌ازایِ هر پایه نشون داده می‌شه. */
.sp-course-siblings{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px dashed rgba(255,180,84,.4);
  background: linear-gradient(95deg, rgba(255,180,84,.1), rgba(69,230,165,.06));
}
.sp-course-siblings:empty{ display:none; }
.sp-course-siblings__label{
  font-size:12px;
  font-weight:700;
  color: var(--text-muted);
  flex-basis:100%;
}
.sp-course-siblings__chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:7px 14px;
  border-radius:999px;
  border:1.5px solid transparent;
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.sp-course-siblings__chip:hover{ transform: translateY(-1px); }
.sp-course-siblings__chip--10{ background: rgba(108,99,255,0.13); color: var(--accent-lav); }
.sp-course-siblings__chip--11{ background: rgba(217,119,6,0.14); color: var(--accent-amber); }
.sp-course-siblings__chip--12{ background: rgba(5,150,105,0.13); color: var(--accent-mint); }
.sp-course-siblings__chip.is-active{
  border-color: currentColor;
  box-shadow: 0 4px 14px -4px rgba(0,0,0,.35);
}

/* ---------- لیستِ درس‌هایِ اضافه‌شده به یک برنامه‌یِ چند-درسی (ثبتِ برنامه) ---------- */
.sp-queued-courses{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px dashed rgba(69,230,165,.4);
  background: rgba(69,230,165,.06);
}
.sp-queued-course-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px 6px 8px;
  border-radius:999px;
  background: rgba(255,255,255,.85);
  border:1.5px solid rgba(69,230,165,.5);
  font-size:12.5px;
  font-weight:700;
  color: var(--text-strong, inherit);
}
.sp-queued-course-chip__remove{
  border:none;
  background: rgba(255,90,90,.14);
  color:#d64545;
  width:18px;
  height:18px;
  border-radius:50%;
  font-size:11px;
  line-height:1;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.sp-queued-course-chip__remove:hover{ background: rgba(255,90,90,.28); }

/* ---------- افزودنِ هم‌زمانِ چند نوع‌فعالیت برایِ همین درس (مودالِ ثبتِ برنامه) ----------
   ردیفِ چک‌باکسی (مطالعه/حلِ تست/ویدئو - هرکدوم که نوعِ اصلی نباشه) +
   به‌ازایِ هرکدوم که تیک بخوره، یک جعبه‌یِ کوچیکِ جدا با مبحث و
   مدت‌زمانِ خودش. */
.sp-quick-types{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:8px 0 0;
}
.sp-quick-type-blocks{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}
.sp-quick-type-block{
  border:1.5px dashed rgba(108,99,255,.35);
  background: rgba(108,99,255,.05);
  border-radius:14px;
  padding:12px;
}
.sp-quick-type-block__head{
  display:flex;
  align-items:center;
  margin-bottom:8px;
}
.sp-quick-type-block__title{
  font-size:13px;
  font-weight:800;
  color: var(--accent-lav, inherit);
}

/* ---------- باکس‌هایِ یک فعالیت (تعداد + تاریخِ اجرایِ هر باکس) ---------- */
/* «باکس» یعنی یک ردیفِ جدا تویِ برنامه‌ی دانش‌آموز. تعدادش رو با ➕/➖
   مشخص می‌کنی؛ باکسِ ۱ رویِ همون روزیه که مودال براش باز شده و باکس‌هایِ
   بعدی پیش‌فرض روزهایِ بعدن - ولی هر تاریخ جدا قابلِ تغییره. همین بلوک
   هم تویِ فرمِ اصلی استفاده می‌شه هم تویِ جعبه‌هایِ «نوع‌فعالیتِ اضافه». */
.sp-boxes{
  border:1px solid rgba(var(--ink),0.10);
  border-radius:14px;
  padding:10px;
  background: rgba(var(--ink),0.03);
}
.sp-boxes__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
}
.sp-boxes__count{
  font-size:13px;
  font-weight:800;
}
.sp-boxes__btns{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.sp-boxes__btn{
  padding:6px 10px;
  font-size:12px;
  border-radius:10px;
}
.sp-boxes__hint{
  margin:6px 0 0;
}
.sp-boxes__list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:8px;
}
.sp-box-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border:1px solid rgba(var(--ink),0.08);
  border-radius:12px;
  background: rgba(var(--ink),0.02);
}
.sp-box-row__label{
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  opacity:.9;
}
.sp-box-row__date{
  flex:1 1 auto;
  min-width:0;
}
.sp-box-row__date .jdate{ width:100%; }
.sp-box-row__date .jdate__trigger{ width:100%; }

@media (max-width: 520px){
  .sp-box-row{
    flex-direction:column;
    align-items:stretch;
    gap:6px;
  }
  .sp-boxes__btn{ flex:1 1 auto; }
}

/* ---------- گروه‌بندیِ درس‌ها بر اساسِ پایه (کشویِ «درس‌هایِ این گزارش») ---------- */
/* هر پایه یه کارتِ کشویی/آکاردئونیه: یه نوارِ رنگیِ بالا + یه مدالِ شماره‌یِ
   پایه که رنگش از همون پالتِ رنگیِ سایت (لاواندر/کهربایی/نعنایی = ده/
   یازده/دوازده) میاد، تا هم زیباتر باشه هم پایه‌ها با یه نگاه از هم
   تفکیک بشن. زیرش لیستِ درس‌هاست که خودش یه اسکرولِ داخلیِ مستقل داره،
   جدا از اسکرولِ بیرونیِ کلِ کشو. */
.rp-course-group{
  --grade-accent: var(--accent-amber);
  display:flex;
  flex-direction:column;
  margin-bottom:14px;
  border: 1px solid rgba(var(--ink),.14);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255,255,255,.55), rgba(var(--ink),.03));
  box-shadow: 0 10px 26px -18px rgba(55,62,75,.30);
  overflow:hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.rp-course-group::before{
  content:"";
  display:block;
  height:4px;
  background: linear-gradient(90deg, var(--grade-accent), transparent 130%);
  opacity:.8;
}
.rp-course-group[data-grade="10"]{ --grade-accent: var(--accent-lav); }
.rp-course-group[data-grade="11"]{ --grade-accent: var(--accent-amber); }
.rp-course-group[data-grade="12"]{ --grade-accent: var(--accent-mint); }

.rp-course-group:hover{ border-color: rgba(var(--ink),.24); box-shadow: 0 14px 30px -16px rgba(55,62,75,.34); }
.rp-course-group:has(.rpGradeVis:checked){
  border-color: color-mix(in srgb, var(--grade-accent) 45%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--grade-accent) 14%, transparent), rgba(255,255,255,.45));
}

.rp-course-group__head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  cursor:pointer;
}
.rp-course-group__toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px; height:28px;
  flex:none;
  border:none;
  border-radius:50%;
  background: rgba(var(--ink),.08);
  color: var(--text-muted);
  cursor:pointer;
  transition: background .2s ease, color .2s ease, transform .3s ease;
}
.rp-course-group__head:hover .rp-course-group__toggle{ background: color-mix(in srgb, var(--grade-accent) 18%, transparent); color: var(--grade-accent); }
.rp-course-group__chevron{ transition: transform .3s var(--ease-pop); }
.rp-course-group.is-collapsed .rp-course-group__chevron{ transform: rotate(90deg); }

.rp-course-group__badge{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px; height:32px;
  border-radius:50%;
  font-size:12.5px;
  font-weight:800;
  color:#fff;
  background: linear-gradient(150deg, var(--grade-accent), color-mix(in srgb, var(--grade-accent) 65%, #000 12%));
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--grade-accent) 70%, transparent);
}

.rp-course-group__label{
  flex:1;
  font-weight:800;
  background: transparent;
  border:none;
  padding:6px 10px;
  cursor:pointer;
}
.rp-course-group__label:has(input:checked){ color: color-mix(in srgb, var(--grade-accent) 75%, #000 20%); }
.rp-course-group__count{
  flex:none;
  font-size:11.5px;
  font-weight:700;
  color: var(--text-muted);
  background: rgba(var(--ink),.07);
  border-radius:999px;
  padding:4px 10px;
  white-space:nowrap;
}
.rp-course-group:has(.rpGradeVis:checked) .rp-course-group__count{
  color: color-mix(in srgb, var(--grade-accent) 75%, #000 20%);
  background: color-mix(in srgb, var(--grade-accent) 16%, transparent);
}

.rp-course-group__body{
  display:grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .32s var(--ease-pop);
  border-top: 1px solid transparent;
}
.rp-course-group:not(.is-collapsed) .rp-course-group__body{ border-top-color: rgba(var(--ink),.1); }
.rp-course-group.is-collapsed .rp-course-group__body{ grid-template-rows: 0fr; border-top-color: transparent; }
.rp-course-group__body > .rp-course-group__items{ min-height:0; }

/* اسکرولِ داخلیِ مستقل: وقتی یه پایه باز می‌شه و درس‌هاش زیادن، خودِ همین
   جعبه اسکرول می‌خوره - نه کلِ کشو یا کلِ صفحه. */
.rp-course-group__items{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding: 10px 8px 12px 4px;
  max-height: 264px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.rp-course-group__items .checkbox-chip{
  margin-right:8px;
  background: rgba(255,255,255,.45);
}
.rp-course-group__items::-webkit-scrollbar{ width:6px; }
.rp-course-group__items::-webkit-scrollbar-track{ background: transparent; }
.rp-course-group__items::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--grade-accent) 55%, transparent);
  border-radius: 999px;
}
.rp-course-group__items::-webkit-scrollbar-thumb:hover{ background: var(--grade-accent); }
.course-category-select{ max-width:220px; }
.btn-mini-save{
  background: var(--accent-mint);
  color:#0F1130;
  border:none;
  border-radius:8px;
  padding:6px 12px;
  font-family:"Vazirmatn", Tahoma, sans-serif;
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
}
.btn-mini-save:disabled{ opacity:.6; cursor:default; }

/* ===========================================================
   رندرِ فرمول‌هایِ ریاضیِ سؤال‌هایِ پرسش‌لند (توان/اندیس/کسر/رادیکال/
   چپ‌چینِ فرمول) — دقیقاً همون کلاس‌هایی که پرسش‌لند تویِ خروجیِ HTMLِ
   سؤال/پاسخ می‌ذاره؛ بدونِ این استایل‌ها، فرمول‌ها فقط متنِ خامِ بی‌ریخت
   دیده می‌شن (بدونِ خطِ کسر، بدونِ بالا/پایین‌رفتنِ توان و اندیس).
   =========================================================== */
.psl-math{ line-height:1.9; }
.psl-math .fline{ min-height:1em; }
.psl-math .fline-ltr{ text-align:left; }
.psl-math sup{ font-size:78%; line-height:0; position:relative; top:-0.5em; font-weight:600; }
.psl-math sub{ font-size:78%; line-height:0; position:relative; top:0.2em; }
.psl-math .frac{ display:inline-flex; flex-direction:column; align-items:center; vertical-align:middle; margin:0 4px; line-height:1.5; font-size:0.82em; position:relative; top:0.08em; }
.psl-math .frac .frac-num{ padding:0.05em 4px 0.32em; border-bottom:1.4px solid currentColor; }
.psl-math .frac .frac-den{ padding:0.32em 4px 0.05em; }
.psl-math .eq-radical{ display:inline-flex; align-items:flex-end; margin:0 2px; }
.psl-math .eq-radical .eq-radical-index{ font-size:0.55em; align-self:flex-start; margin-left:-2px; margin-right:1px; min-width:8px; line-height:1; }
.psl-math .eq-radical .eq-radical-sign{ display:inline-block; width:0.55em; font-size:1.05em; line-height:1; }
.psl-math .eq-radical .eq-radical-sign svg{ display:block; width:100%; height:100%; }
.psl-math .eq-radical .eq-radical-content{ border-top:1.4px solid currentColor; padding:0 3px 0 1px; margin-right:-1px; line-height:1.05; }
.psl-math bdi[dir="ltr"]{ white-space:nowrap; }
.psl-math svg{ display:block; max-width:100%; height:auto; margin:10px auto; }

/* ===========================================================
   صفحه‌ی تمرین (dashboard.html)
   =========================================================== */
.practice-shell{ max-width:1280px; width:100%; margin:0 auto; padding:32px 40px 60px; }
@media (max-width: 768px){ .practice-shell{ padding:24px 16px 48px; } }
/* ⭐ عرضِ داشبوردِ دانش‌آموز رو - دقیقاً مثلِ پنلِ ادمین (admin-shell--wide) -
   به کلِ صفحه می‌رسونیم؛ چون کارت‌هایِ برنامه‌یِ هفتگی (چند روز/چند درسِ
   هم‌زمان) با max-width:1280px خیلی جمع و کوچیک دیده می‌شدن. */
.practice-shell--wide{
  max-width: none;
  padding: 32px clamp(16px, 3vw, 56px) 60px;
}
@media (max-width: 768px){ .practice-shell--wide{ padding:24px 16px 48px; } }
.practice-topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.practice-topbar__actions{ display:flex; align-items:center; gap:10px; }
.practice-course-picker{
  max-width:760px;
  margin:0 auto 20px;
  background: var(--card-bg);
  border:1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding:22px;
}
.practice-course-picker select{
  width:100%;
  padding:12px 14px;
  border-radius: var(--radius-field);
  border:1px solid var(--card-border);
  background: rgba(var(--ink),.04);
  color: #FFFFFF;
  font-weight:700;
  font-family:"Vazirmatn", Tahoma, sans-serif;
  font-size:15px;
  margin-top:10px;
}
.practice-course-picker select option{
  background: var(--bg-night-2);
  color: #FFFFFF;
}
.practice-card{
  max-width:760px;
  margin:0 auto;
  background: var(--card-bg);
  border:1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding:26px;
  color: var(--text-paper);
}
.practice-progress{ color:var(--text-muted); font-size:13px; margin-bottom:14px; }
.practice-stem{ font-size:16px; margin-bottom:16px; }
.practice-choices{ list-style:none; padding:0; margin:0 0 16px; display:grid; gap:10px; }
.practice-choice{
  border:1px solid var(--card-border);
  border-radius: var(--radius-field);
  padding:12px 14px;
  cursor:pointer;
  transition: border-color .15s, background .15s;
}
.practice-choice:hover{ border-color: var(--accent-lav); }
.practice-choice.is-selected{ border-color: var(--accent-amber); background: rgba(255,180,84,.08); }
.practice-choice.is-correct{ border-color: var(--accent-mint); background: rgba(69,230,165,.1); }
.practice-choice.is-wrong{ border-color:#e35d5d; background: rgba(227,93,93,.1); }
.practice-answer-box{
  background: rgba(var(--ink),.03);
  border:1px solid var(--card-border);
  border-radius: var(--radius-field);
  padding:16px 18px;
  margin-top:12px;
}
.practice-nav{ display:flex; justify-content:space-between; margin-top:20px; gap:10px; }
.practice-nav button{
  flex:1;
  padding:12px;
  border-radius: var(--radius-field);
  border:none;
  font-family:"Vazirmatn", Tahoma, sans-serif;
  font-weight:700;
  cursor:pointer;
  background: var(--accent-lav);
  color:#0F1130;
}
.practice-nav button:disabled{ opacity:.4; cursor:default; }

.plan-score-banner{
  text-align:center;
  font-weight:800;
  font-size:15px;
  color: var(--accent-mint);
  background: rgba(69,230,165,.08);
  border: 1px solid rgba(69,230,165,.3);
  border-radius: 12px;
  padding:10px;
  margin-bottom:14px;
}
.practice-plan-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:1px solid var(--card-border);
}
.practice-plan-header__title{ font-weight:800; font-size:14px; color: var(--text-paper); }
.practice-plan-header .btn-ghost{ padding:6px 12px; font-size:12px; }
.practice-empty{ color:var(--text-muted); text-align:center; padding:30px 10px; }

/* ===========================================================
   شکلِ سؤال/پاسخ (SVG) - این شکل‌ها با فرضِ زمینه‌ی روشن (مثلِ خودِ
   پرسش‌لند) رنگ‌آمیزی شدن؛ رویِ پس‌زمینه‌ی تیره‌ی رهیار، متنِ داخلِ شکل
   (مثلِ q۱، cm ۶۰) عملاً نامرئی می‌شه. برایِ همین دقیقاً مثلِ خودِ
   پرسش‌لند (qm-question-body__diagram: 220px، float:left، زمینه‌ی روشن)
   یه جعبه‌ی روشنِ کوچیک برایِ خودِ شکل می‌سازیم و کنارِ متن شناور می‌کنیم. */
.psl-diagram-float{
  float:left;
  width:220px;
  max-width:42%;
  margin:0 16px 10px 0;
  background:#F1EADA;
  border-radius:12px;
  padding:8px;
}
.psl-diagram-float svg{ display:block; width:100% !important; height:auto !important; max-width:100% !important; }
.psl-clearfix::after{ content:""; display:table; clear:both; }
.psl-question-card{
  background:#FBF8F0;
  border:1.5px solid #E4DAC3;
  border-radius:14px;
  padding:16px 18px;
  color:#221528;
}
.psl-question-card .psl-math{ color:#221528; }

/* ===========================================================
   پیش‌نمایشِ فایلِ PDF (dashboard.html)
   =========================================================== */
.pdf-preview-overlay{
  position:fixed; inset:0;
  background: var(--bg-night-2);
  display:flex; align-items:stretch; justify-content:stretch;
  padding:0;
  z-index:300;
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease;
}
.pdf-preview-overlay.is-open{ opacity:1; pointer-events:auto; }
.pdf-preview-box{
  width:100%; height:100%;
  background: var(--bg-night-2);
  border:none;
  border-radius:0;
  display:flex; flex-direction:column;
  overflow:hidden;
  box-shadow:none;
}
.pdf-preview-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px;
  border-bottom:1px solid var(--card-border);
  background: rgba(var(--ink),.03);
  flex-wrap:wrap; gap:10px;
}
.pdf-preview-toolbar__title{ font-weight:800; font-size:14.5px; color: var(--text-paper); }
.pdf-preview-toolbar__left{ display:flex; align-items:center; gap:10px; }
.pdf-preview-close{
  width:30px; height:30px;
  border-radius:50%;
  border:1px solid var(--card-border);
  background: rgba(var(--ink),.04);
  color: var(--text-paper);
  cursor:pointer;
  font-size:13px;
}

/* ---------- نوارِ تنظیماتِ ظاهرِ فایل ---------- */
.pdf-ctl-bar{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  padding:12px 20px;
  border-bottom:1px solid var(--card-border);
  background: rgba(var(--ink),.02);
}
.pdf-ctl{
  display:flex;
  align-items:center;
  gap:6px;
  padding:5px 6px 5px 12px;
  border-radius:999px;
  border:1px solid var(--card-border);
  background: rgba(var(--ink),.04);
  font-size:11.5px;
  color: var(--text-muted);
  white-space:nowrap;
}
.pdf-ctl__btn{
  width:20px; height:20px;
  border:none;
  border-radius:50%;
  background: rgba(var(--ink),.08);
  color: var(--text-paper);
  font-size:12px;
  line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.pdf-ctl__btn:hover{ background: var(--accent-lav); color:#0F1130; }
.pdf-ctl__val{ font-weight:800; color: var(--text-paper); min-width:34px; text-align:center; font-size:11.5px; }
.pdf-ctl__label{ font-weight:700; }
.pdf-ctl--toggle{ cursor:pointer; gap:8px; padding:5px 14px; }
.pdf-ctl--toggle input{ width:15px; height:15px; accent-color: var(--accent-mint); cursor:pointer; }
.pdf-ctl--toggle:has(input:checked){ border-color: var(--accent-mint); color: var(--accent-mint); }

.pdf-preview-scroll{
  flex:1;
  overflow-y:auto;
  background:
    radial-gradient(circle at 15% 10%, rgba(139,144,214,.16), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(69,230,165,.14), transparent 45%),
    var(--bg-night);
  padding:36px 24px;
}
.pdf-paper{
  max-width:1040px;
  margin:0 auto;
  background:#fff;
  color:#221528;
  border-radius:16px;
  padding:48px 56px;
  direction:rtl;
  font-family:"Vazirmatn", Tahoma, sans-serif;
  font-size:15px;
  line-height:1.9;
  box-shadow: 0 16px 44px rgba(0,0,0,.4);
}
/* ⭐ قبلاً خط جداکننده رو با border-bottom رویِ خودِ .pdf-question می‌ذاشتیم؛
   یعنی ترتیبِ بصری می‌شد: [محتوا] → [خط] → [فاصله] → [سؤالِ بعدی]. کاربر
   می‌خواست برعکس: [محتوا] → [فاصله] → [خط] → [سؤالِ بعدی]. برایِ همین به‌جایِ
   بردر رویِ خودِ سؤال، رویِ سؤالِ *بعدی* (به‌جز اولی) border-top می‌ذاریم؛
   این‌جوری خط دقیقاً بعدِ از تمومِ فاصله (margin-bottomِ سؤالِ قبلی) میاد. */
.pdf-paper--separators .pdf-question + .pdf-question{
  border-top:1px dashed #E4DAC3;
  padding-top:20px;
}
.pdf-paper__header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:26px;
  padding-bottom:16px;
  border-bottom:3px solid var(--accent-lav);
}
.pdf-paper__badge{
  width:42px; height:42px;
  flex-shrink:0;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--accent-lav), var(--accent-mint));
  font-size:20px;
}
.pdf-paper__header h1{ margin:0; font-size:23px; font-weight:900; }
.pdf-question{ margin-bottom:28px; }
.pdf-question__title{
  display:inline-block;
  margin:0 0 10px;
  font-weight:800;
  font-size:14px;
  color:#7A4B00;
  background: rgba(255,178,56,.16);
  border-radius:999px;
  padding:5px 15px;
}
.pdf-choices{ list-style:none; margin:16px 0 0; padding:0; display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; }
@media (min-width: 640px){
  .pdf-choices{ grid-template-columns: repeat(4, 1fr); }
}
.pdf-choices__item{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border:1.5px solid #E4DAC3;
  border-radius:13px;
  background: linear-gradient(160deg, #FCFCFD, #EDEFF2);
  box-shadow: 0 2px 7px rgba(122,75,0,.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  overflow:hidden;
}
.pdf-choices__item::before{
  content:"";
  position:absolute; inset:0 0 auto 0;
  height:3px;
  background: linear-gradient(90deg, var(--accent-lav), var(--accent-mint));
  opacity:0;
  transition: opacity .15s ease;
}
.pdf-choices__item:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 20px -6px rgba(139,144,214,.35);
  border-color: var(--accent-lav);
}
.pdf-choices__item:hover::before{ opacity:1; }
.pdf-choices__num{
  width:25px; height:25px;
  flex-shrink:0;
  border-radius:50%;
  background: linear-gradient(135deg, var(--accent-lav), #6d72c4);
  color:#fff;
  font-size:12px;
  font-weight:800;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 3px 8px rgba(139,144,214,.45);
  order:1;
}
.pdf-choices__item .psl-math{ order:2; font-weight:600; }
.pdf-answerkey{ margin-top:32px; padding-top:22px; border-top:3px dashed #E4DAC3; }
.pdf-answerkey__title{ font-size:18px; font-weight:900; margin:0 0 18px; color:#166534; }

/* ===========================================================
   برنامه‌ی مطالعاتیِ هفتگی (study-plan.html)
   =========================================================== */
.sp-topbar{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:22px;
  padding:18px 22px;
  background:
    linear-gradient(160deg, rgba(var(--ink),.07), rgba(var(--ink),.02)),
    var(--card-bg);
  border:1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: 0 24px 60px -30px rgba(5,6,20,.8), inset 0 1px 0 rgba(var(--ink),.05);
  overflow:hidden;
}
.sp-topbar::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:2px;
  background: linear-gradient(90deg, var(--accent-lav), var(--accent-mint), var(--accent-amber), var(--accent-lav));
  background-size:300% 100%;
  animation: sp-topbar-sheen 8s linear infinite;
  opacity:.8;
}
@keyframes sp-topbar-sheen{ to{ background-position:300% 0; } }

.sp-student-picker{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.sp-student-picker__avatar{
  width:42px; height:42px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--accent-lav), var(--accent-amber));
  color:#0F1130;
  font-weight:900;
  font-size:16px;
  flex-shrink:0;
  box-shadow: 0 0 0 3px rgba(255,255,255,.06), 0 0 22px -4px rgba(139,144,214,.7);
  transition: transform .25s var(--ease-pop);
}
.sp-student-picker:hover .sp-student-picker__avatar{ transform: scale(1.08) rotate(-4deg); }
.sp-student-picker select{
  padding:11px 16px;
  border-radius: var(--radius-field);
  border:1px solid var(--card-border);
  background: rgba(var(--ink),.06);
  color: #FFFFFF;
  font-weight:700;
  font-family:"Vazirmatn", Tahoma, sans-serif;
  font-size:14.5px;
  min-width:220px;
  cursor:pointer;
  transition: border-color .2s, background .2s;
}
.sp-student-picker select:hover,
.sp-student-picker select:focus{ border-color: var(--accent-lav); background: rgba(139,144,214,.1); outline:none; }
.sp-student-picker select option{
  background: var(--bg-night-2);
  color: #FFFFFF;
}
.sp-week-nav{ display:flex; align-items:center; gap:10px; }
.sp-week-nav .btn-ghost{
  border-radius:999px;
  padding:9px 16px;
  font-size:13px;
  transition: all .2s var(--ease-pop);
}
.sp-week-nav .btn-ghost:hover{ transform: translateY(-2px); border-color: var(--accent-lav); background: rgba(139,144,214,.14); }
.sp-week-label{
  font-weight:800;
  color: var(--text-paper);
  font-size:14px;
  white-space:nowrap;
  padding:8px 16px;
  border-radius:999px;
  background: rgba(var(--ink),.05);
  border:1px solid var(--card-border);
}

/* ---------- نوارِ آمارِ هفته ---------- */
.sp-week-stats{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:18px;
  padding:14px 18px;
  background: var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:18px;
}
.sp-week-stat{
  display:flex;
  align-items:baseline;
  gap:6px;
  padding:6px 14px;
  border-radius:999px;
  background: rgba(var(--ink),.04);
  border:1px solid var(--card-border);
}
.sp-week-stat__icon{ font-size:13px; }
.sp-week-stat__num{ font-weight:900; font-size:16px; color: var(--text-paper); }
.sp-week-stat__label{ font-size:11.5px; color: var(--text-muted); font-weight:600; }
.sp-week-stat--done{ border-color: rgba(69,230,165,.3); background: rgba(69,230,165,.08); }
.sp-week-stat--done .sp-week-stat__num{ color: var(--accent-mint); }
.sp-week-progress{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  min-width:140px;
}
.sp-week-progress__track{
  flex:1;
  height:8px;
  border-radius:999px;
  background: rgba(var(--ink),.07);
  overflow:hidden;
}
.sp-week-progress__bar{
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, var(--accent-lav), var(--accent-mint));
  transition: width .6s var(--ease-pop);
}
.sp-week-progress__pct{ font-size:12px; font-weight:800; color: var(--accent-mint); white-space:nowrap; }

#spNoStudentHint{
  text-align:center;
  color: var(--text-muted);
  padding:40px 10px;
  background: var(--card-bg);
  border:1px dashed var(--card-border);
  border-radius: var(--radius-card);
}

/* ---------- ردیف‌هایِ روزهایِ هفته (افقی، زیرِ هم) ---------- */
.sp-week-grid{
  display:flex;
  flex-direction:column;
  gap:14px;
}

@keyframes sp-row-in{
  from{ opacity:0; transform: translateY(14px); }
  to{ opacity:1; transform: translateY(0); }
}

.sp-day-row{
  position:relative;
  display:flex;
  align-items:stretch;
  gap:16px;
  background: var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:20px;
  padding:14px 16px;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
  animation: sp-row-in .5s var(--ease-pop) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}
.sp-day-row::before{
  content:"";
  position:absolute; top:10px; bottom:10px; right:0;
  width:3px;
  border-radius:3px;
  background: var(--day-accent, var(--accent-lav));
  opacity:.85;
}
.sp-day-row:hover{ border-color: rgba(var(--ink),.18); box-shadow: 0 18px 40px -26px rgba(5,6,20,.9); }
.sp-day-row--today{
  border-color: var(--accent-mint);
  background: linear-gradient(160deg, rgba(69,230,165,.07), rgba(69,230,165,.015));
  box-shadow: 0 0 0 1px rgba(69,230,165,.3), 0 20px 44px -26px rgba(69,230,165,.35);
}

/* هر روزِ هفته رنگِ شناسنامه‌ایِ خودش رو داره */
.sp-day-row:nth-child(1){ --day-accent: var(--day-1); }
.sp-day-row:nth-child(2){ --day-accent: var(--day-2); }
.sp-day-row:nth-child(3){ --day-accent: var(--day-3); }
.sp-day-row:nth-child(4){ --day-accent: var(--day-4); }
.sp-day-row:nth-child(5){ --day-accent: var(--day-5); }
.sp-day-row:nth-child(6){ --day-accent: var(--day-6); }
.sp-day-row:nth-child(7){ --day-accent: var(--day-7); }
.sp-day-row--today::before{ background: var(--accent-mint); box-shadow: 0 0 14px 1px rgba(69,230,165,.6); }

/* منطقه‌ی روز/تاریخ: یه زیرپنلِ مستقل و خودش وسط‌چین (افقی+عمودی) */
.sp-day-row__label{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:2px;
  flex-shrink:0;
  min-width:132px;
  padding:14px 12px;
  border-radius:16px;
  background: linear-gradient(160deg, rgba(var(--ink),.06), rgba(var(--ink),.015));
  border:1px solid var(--card-border);
}
.sp-day-row--today .sp-day-row__label{
  border-color: rgba(69,230,165,.4);
  background: linear-gradient(160deg, rgba(69,230,165,.14), rgba(69,230,165,.02));
}
.sp-day-row__badge{
  width:36px; height:36px;
  margin-bottom:6px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:14px;
  color:#0F1130;
  background: linear-gradient(135deg, var(--day-accent, var(--accent-lav)), var(--accent-amber));
  box-shadow: 0 0 16px -2px var(--day-accent, rgba(139,144,214,.6));
  transition: transform .25s var(--ease-pop);
}
.sp-day-row:hover .sp-day-row__badge{ transform: scale(1.1) rotate(-6deg); }
.sp-day-row--today .sp-day-row__badge{
  background: linear-gradient(135deg, var(--accent-mint), var(--accent-lav));
  box-shadow: 0 0 16px -2px rgba(69,230,165,.7);
  animation: sp-badge-pulse 2.2s ease-in-out infinite;
}
@keyframes sp-badge-pulse{
  0%,100%{ box-shadow: 0 0 14px -2px rgba(69,230,165,.6); }
  50%{ box-shadow: 0 0 22px 2px rgba(69,230,165,.85); }
}
.sp-day-row__name{ margin:0; font-weight:900; font-size:16px; color: var(--text-paper); font-family:"Vazirmatn", Tahoma, sans-serif; letter-spacing:.2px; }
.sp-day-row--today .sp-day-row__name{
  background: linear-gradient(135deg, var(--accent-lav), var(--accent-mint));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sp-day-row__date{ margin:3px 0 0; font-size:12px; color: var(--text-muted); font-weight:600; }
.sp-day-row__total{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin:9px 0 0;
  font-size:11.5px;
  font-weight:800;
  color: var(--accent-amber);
  background: rgba(255,180,84,.14);
  border:1px solid rgba(255,180,84,.2);
  border-radius:999px;
  padding:4px 11px;
}

/* ---------- توانِ مطالعاتیِ هفتگی (کنارِ هر روز، تویِ برنامه‌ی ثابتِ هفتگی) ---------- */
.wp-potential{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin:9px 0 0;
  padding:4px 10px 4px 6px;
  border-radius:999px;
  background: rgba(69,230,165,.12);
  border:1px solid rgba(69,230,165,.28);
  cursor:text;
}
.wp-potential__icon{ font-size:12px; line-height:1; }
.wp-potential__input{
  width:34px;
  border:none;
  background:transparent;
  outline:none;
  text-align:center;
  font-family:"Vazirmatn", Tahoma, sans-serif;
  font-weight:800;
  font-size:12px;
  color: var(--accent-mint, #45E6A5);
  padding:0;
}
.wp-potential__unit{ font-size:11px; font-weight:700; color: var(--text-muted); }

/* ---------- باقی‌مانده‌یِ توانِ مطالعاتی (کنارِ هر روز، تویِ برنامه‌ی مطالعاتی) ---------- */
.sp-day-row__potential{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin:9px 0 0;
  font-size:11.5px;
  font-weight:800;
  color: var(--accent-mint, #45E6A5);
  background: rgba(69,230,165,.12);
  border:1px solid rgba(69,230,165,.28);
  border-radius:999px;
  padding:4px 11px;
}
.sp-day-row__potential--over{
  color:#FF6B81;
  background: rgba(255,107,129,.14);
  border-color: rgba(255,107,129,.32);
}

/* ---------- هشدارِ اضافه‌بودنِ برنامه از توانِ مطالعاتی، تویِ مودالِ ثبتِ برنامه ---------- */
.sp-modal-head__potential{
  margin:8px 0 0;
  font-size:12.5px;
  font-weight:700;
  color: var(--accent-mint, #45E6A5);
  background: rgba(69,230,165,.1);
  border:1px solid rgba(69,230,165,.25);
  border-radius:12px;
  padding:8px 12px;
  text-align:center;
}
.sp-modal-head__potential--over{
  color:#FF6B81;
  background: rgba(255,107,129,.12);
  border-color: rgba(255,107,129,.3);
}

/* ---------- جابه‌جاییِ روزِ برنامه، تویِ مودالِ ویرایش ---------- */
.sp-edit-day-switch{
  margin:10px 0 0;
  padding:10px 10px 8px;
  border-radius:14px;
  background: rgba(139,144,214,.08);
  border:1px solid rgba(139,144,214,.22);
}
.sp-edit-day-switch__label{
  margin:0 0 8px;
  font-size:12px;
  font-weight:700;
  color: var(--text-muted);
  text-align:center;
}
.sp-edit-day-switch__days{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:5px;
}
.sp-edit-day-switch__day{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:7px 2px;
  border-radius:10px;
  border:1.5px solid rgba(var(--ink),.1);
  background: var(--bg-night-2, #fff);
  color: var(--text-muted);
  cursor:pointer;
  font-family:inherit;
  transition: all .16s var(--ease-pop);
}
.sp-edit-day-switch__day:hover{
  border-color: var(--accent-lav);
  color: var(--accent-lav);
  transform: translateY(-1px);
}
.sp-edit-day-switch__day-name{ font-size:10.5px; font-weight:700; }
.sp-edit-day-switch__day-num{ font-size:12.5px; font-weight:800; }
.sp-edit-day-switch__day.is-selected{
  background: var(--accent-lav);
  border-color: var(--accent-lav);
  color:#fff;
  box-shadow: 0 4px 12px -4px rgba(139,144,214,.6);
}
.sp-edit-day-switch__calendar-row{
  margin-top:10px;
  padding-top:10px;
  border-top:1px dashed rgba(139,144,214,.25);
}
.sp-edit-day-switch__calendar-hint{
  display:block;
  margin-bottom:6px;
  font-size:11px;
  color: var(--text-muted);
}
@media (max-width: 420px){
  .sp-edit-day-switch__day-name{ font-size:9.5px; }
  .sp-edit-day-switch__day{ padding:6px 1px; }
}

/* ---------- نوارِ پیشرفتِ مینیمالِ هر روز ---------- */
.sp-day-row__progress{
  display:flex;
  align-items:center;
  gap:6px;
  width:100%;
  margin-top:9px;
}
.sp-day-row__progress-track{
  flex:1;
  height:4px;
  border-radius:999px;
  background: rgba(var(--ink),.08);
  overflow:hidden;
}
.sp-day-row__progress-bar{
  height:100%;
  border-radius:999px;
  background: linear-gradient(90deg, var(--day-accent, var(--accent-lav)), var(--accent-mint));
  transition: width .5s var(--ease-pop);
}
.sp-day-row__progress-pct{
  font-size:9.5px;
  font-weight:800;
  color: var(--text-muted);
  flex-shrink:0;
}
.sp-day-row--today .sp-day-row__progress-pct{ color: var(--accent-mint); }

/* کاشیِ «افزودنِ برنامه»: یه دکمه‌ی کارت‌مانندِ دعوت‌کننده، هم‌قدِ کارت‌ها */
.sp-day-col__add{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:84px;
  flex-shrink:0;
  border-radius:18px;
  border:1.5px dashed rgba(var(--ink),.18);
  background: rgba(var(--ink),.025);
  color: var(--text-muted);
  font-size:15px;
  line-height:1;
  cursor:pointer;
  transition: all .2s var(--ease-pop);
}
.sp-day-col__add::before{
  content:"+";
  font-size:22px;
  font-weight:300;
  color: var(--day-accent, var(--accent-lav));
  transition: transform .2s var(--ease-pop);
}
.sp-day-col__add::after{
  content:"افزودن";
  font-size:10.5px;
  font-weight:700;
  color: var(--text-faint);
}
.sp-day-col__add:hover{
  border-color: var(--day-accent, var(--accent-lav));
  border-style:solid;
  background: linear-gradient(160deg, color-mix(in srgb, var(--day-accent, var(--accent-lav)) 16%, transparent), transparent);
  transform: translateY(-3px);
}
.sp-day-col__add:hover::before{ transform: scale(1.25) rotate(90deg); }
/* ⭐ محفظه‌ی سمتِ راستِ ردیفِ روز - ستونی: اول (در صورتِ وجود) ردیفِ باریکِ
   زنگ‌هایِ ثابتِ هفتگی، بعد ردیفِ کارت‌هایِ برنامه‌ی مطالعاتی. با flex:1
   فضایِ افقیِ باقی‌مونده‌یِ کنارِ برچسبِ روز رو می‌گیره. */
.sp-day-row__body{
  display:flex;
  flex-direction:column;
  flex:1;
  min-width:0;
  gap:2px;
}
.sp-day-row__cards{
  display:flex;
  align-items:stretch;
  gap:12px;
  overflow-x:auto;
  /* ⭐ نکته‌یِ مهم: وقتی overflow-x مقداری غیرِ visible داره (auto)، طبقِ
     مشخصاتِ CSS، overflow-y هم به‌جایِ visible عملاً auto حساب می‌شه -
     یعنی همین overflow-y:visible قبلی در عمل کاری نمی‌کرد و نیمه‌یِ
     بالاییِ آیکونِ درس (که از لبه‌یِ بالایِ کارت بیرون می‌زنه) بریده
     می‌شد. راه‌حل: به‌جایِ تکیه به overflow-y:visible، یک padding-top
     به‌اندازه‌یِ کافی می‌ذاریم تا آیکون همیشه داخلِ محدوده‌یِ همین
     کانتینرِ اسکرول‌شونده بمونه و هیچ‌وقت بریده نشه.
     ⭐ عکسِ اختصاصیِ درس (icon-badge--img) با top:-38px تا ۳۸px بالایِ
     لبه‌یِ کارت می‌زنه بیرون؛ ۳۰px قبلی کافی نبود و همون چند پیکسلِ
     بالاییِ آیکون محو/بریده می‌شد - حالا با کمی حاشیه‌یِ اضافه (برایِ
     هاله‌یِ نورانیِ دورِ آیکون هم) کاملاً داخلِ محدوده جا می‌شه. */
  overflow-y:auto;
  flex:1;
  min-height:64px;
  padding:48px 3px 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--ink),.16) transparent;
}
.sp-day-row__cards::-webkit-scrollbar{ height:6px; }
.sp-day-row__cards::-webkit-scrollbar-thumb{ background: rgba(var(--ink),.14); border-radius:999px; }
.sp-day-row__cards::-webkit-scrollbar-thumb:hover{ background: rgba(var(--ink),.26); }

/* ---------- ردیفِ باریکِ زنگ‌هایِ ثابتِ هفتگی (مدرسه/کلاس/باشگاه...)
   بالایِ کارت‌هایِ برنامه‌یِ همون روز - فقط نمایشی، مینیمال، بدونِ اینکه
   ارتفاعِ کارت‌هایِ زیرش رو تحتِ تأثیر بذاره (چون تویِ فلکس‌ستونِ خودش
   جداست، نه هم‌ردیفِ کارت‌ها). ---------- */
.sp-day-row__fixed{
  display:flex;
  align-items:stretch;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  /* پدینگِ بالا عمداً بزرگه: دقیقاً مثلِ کارت‌هایِ برنامه، آیکونِ هر زنگ
     دیگه تویِ جریانِ عادیِ کارت نیست (absolute و از لبه‌ی بالا زده بیرون)،
     این فضا همون جاییه که نیمه‌ی بیرون‌زده‌ی آیکون روش می‌شینه. */
  padding:20px 3px 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--ink),.16) transparent;
}
.sp-day-row__fixed::-webkit-scrollbar{ height:5px; }
.sp-day-row__fixed::-webkit-scrollbar-thumb{ background: rgba(var(--ink),.14); border-radius:999px; }
.sp-day-row__fixed::-webkit-scrollbar-thumb:hover{ background: rgba(var(--ink),.26); }

.sp-fixed-chip{
  --chip-accent: var(--accent-lav);
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  flex-shrink:0;
  width:108px;
  padding:18px 8px 10px;
  border-radius:16px;
  text-align:center;
  overflow:visible;
  /* همون زبانِ بصریِ کارت‌هایِ برنامه‌ی مطالعاتی: هاله‌یِ رنگیِ بالا +
     یک لایه‌ی شیشه‌ایِ ظریف - فقط جمع‌وجورتر، چون این‌جا یک ردیفِ
     افقیِ چندتاییه، نه یک کارتِ تنها. */
  background:
    radial-gradient(64px 50px at 50% -8%, color-mix(in srgb, var(--chip-accent) 42%, transparent), transparent 72%),
    linear-gradient(165deg, rgba(var(--ink),.06), rgba(var(--ink),.015)),
    color-mix(in srgb, var(--chip-accent) 7%, var(--card-bg));
  border:1px solid color-mix(in srgb, var(--chip-accent) 28%, var(--card-border));
  box-shadow: 0 10px 18px -14px rgba(0,0,0,.6);
  cursor:default;
  transition: transform .18s var(--ease-pop), box-shadow .18s ease, border-color .18s ease;
}
.sp-fixed-chip:hover{
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--chip-accent) 55%, var(--card-border));
  box-shadow: 0 14px 22px -14px color-mix(in srgb, var(--chip-accent) 55%, transparent);
}
.sp-fixed-chip__icon{
  position:absolute;
  top:-16px;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  width:38px; height:38px;
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  font-size:17px;
  line-height:1;
  /* دقیقاً مثلِ آیکونِ شناورِ کارتِ درس: گرادیانِ شعاعی + سایه‌یِ نورانی،
     تا حسِ «برجسته و جذاب» بگیره، نه یک دایره‌یِ تخت. */
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--chip-accent) 50%, transparent), color-mix(in srgb, var(--chip-accent) 18%, transparent));
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.1), 0 6px 12px -4px rgba(0,0,0,.5), 0 0 16px -2px var(--chip-accent);
  transition: transform .2s var(--ease-pop);
}
.sp-fixed-chip:hover .sp-fixed-chip__icon{ transform: translateX(-50%) scale(1.12) rotate(-4deg); }
/* ⭐ وقتی زنگ به یک درس (از درختِ دانش) وصله و اون درس آیکونِ اختصاصیِ
   خودش رو داره: به‌جایِ ایموجیِ عمومیِ نوع‌زنگ، همون آیکونِ درس نشون داده
   می‌شه - اما دقیقاً تویِ همون سایزِ ۳۸پیکسلیِ فعلی (بزرگ‌تر نمی‌شه)، فقط
   بدونِ پس‌زمینه‌ی دایره‌ای، چون خودِ عکس شفافه. */
.sp-fixed-chip__icon--img{
  background:none;
  box-shadow: drop-shadow(0 4px 6px rgba(0,0,0,.35));
  filter:
    drop-shadow(0 3px 5px rgba(0,0,0,.35))
    drop-shadow(0 0 10px color-mix(in srgb, var(--chip-accent) 60%, transparent));
}
.sp-fixed-chip__icon--img img{
  width:100%; height:100%;
  object-fit:contain;
  display:block;
}
/* نشانِ کوچیکِ «مدرسه»یِ گوشه‌یِ آیکون - وقتی آیکونِ اصلی دیگه عکسِ درسه
   (نه ایموجیِ 🏫)، همین نشانِ کوچیک باعث می‌شه بازم سرِ اولین نگاه معلوم
   باشه این زنگ از نوعِ «مدرسه»‌ست. */
.sp-fixed-chip__school-flag{
  position:absolute;
  bottom:-3px;
  inset-inline-start:-4px;
  z-index:3;
  width:16px; height:16px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:9px;
  line-height:1;
  background: var(--bg-night-2);
  border:1px solid var(--card-border);
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.sp-fixed-chip__name{
  margin:14px 0 0;
  font-size:13px;
  font-weight:900;
  letter-spacing:.1px;
  color: var(--text-paper);
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* ⭐ وقتی آیکون دیگه عکسِ خودِ درسه (نه ایموجیِ 🏫)، نوشته‌یِ «مدرسه» رو
   واضح‌تر و جذاب‌تر می‌کنیم (رنگیِ هم‌رنگ با هاله‌ی زنگ + کمی بزرگ‌تر) تا
   «مدرسه‌بودنِ» زنگ هم‌چنان از رویِ متن، سرِ اولین نگاه معلوم باشه. */
.sp-fixed-chip__name--school{
  color: color-mix(in srgb, var(--chip-accent) 78%, var(--text-paper));
  font-size:13.5px;
}
.sp-fixed-chip__note{
  margin-top:1px;
  font-size:9.5px;
  font-weight:600;
  color: var(--text-muted);
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* وقتی این نوشته اسمِ خودِ درسه (نه یادداشتِ دستی)، کمی واضح‌تره چون
   اطلاعاتِ مهم‌تریه (این‌که این زنگِ مدرسه دقیقاً برایِ کدوم درسه). */
.sp-fixed-chip__note--course{
  font-size:10.5px;
  font-weight:800;
  color: var(--text-muted-2, var(--text-muted));
}
.sp-fixed-chip__time{
  flex-shrink:0;
  margin-top:6px;
  font-size:10px;
  font-weight:800;
  color: var(--text-faint);
  padding:2px 9px;
  border-radius:999px;
  background: color-mix(in srgb, var(--chip-accent) 15%, transparent);
}

/* ---------- زنگ‌هایِ ثابتِ قابل‌کلیک تویِ داشبوردِ دانش‌آموز: چشمک‌زدن تا گزارش ثبت بشه ---------- */
.wp-fixed-chip{
  font-family:inherit;
  direction:rtl;
  text-align:center;
  position:relative;
  appearance:none;
  -webkit-appearance:none;
  outline:none;
}
.wp-fixed-chip:disabled{
  cursor:default;
  opacity:.82;
}
.wp-fixed-chip:not(:disabled){ cursor:pointer; }
.wp-fixed-chip__flag{
  position:absolute;
  top:-8px;
  inset-inline-end:-6px;
  width:18px; height:18px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:10px;
  background: var(--bg-night-2);
  border:1px solid var(--card-border);
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.wp-fixed-chip__flag--ok{
  background: color-mix(in srgb, #35D07F 30%, var(--bg-night-2));
  animation: wp-flag-pop .45s var(--ease-pop);
}
.wp-fixed-chip__flag--waiting{
  background: color-mix(in srgb, var(--accent-amber) 32%, var(--bg-night-2));
  font-size:9px;
}
@keyframes wp-flag-pop{
  0%{ transform: scale(.4); opacity:0; }
  60%{ transform: scale(1.18); opacity:1; }
  100%{ transform: scale(1); }
}

@keyframes wp-fixed-chip-blink{
  0%, 100%{
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--chip-accent) 55%, transparent);
    border-color: color-mix(in srgb, var(--chip-accent) 60%, var(--card-border));
  }
  50%{
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--chip-accent) 0%, transparent);
    border-color: color-mix(in srgb, var(--chip-accent) 90%, var(--card-border));
  }
}
.wp-fixed-chip--pending{
  animation: wp-fixed-chip-blink 1.4s ease-in-out infinite;
  background:
    radial-gradient(64px 50px at 50% -8%, color-mix(in srgb, var(--chip-accent) 55%, transparent), transparent 72%),
    linear-gradient(165deg, rgba(var(--ink),.06), rgba(var(--ink),.015)),
    color-mix(in srgb, var(--chip-accent) 16%, var(--card-bg));
}
/* ⭐ گزارش ثبت شده ولی هنوز مشاور تخصیصش نداده - نه چشمک‌زن (کاری از دستِ
   دانش‌آموز ساخته نیست)، فقط یک رنگ‌بندیِ متفاوت که بگه «هنوز کاملاً تموم نشده» */
.wp-fixed-chip--waiting{
  border-color: color-mix(in srgb, var(--accent-amber) 45%, var(--card-border));
  background:
    radial-gradient(64px 50px at 50% -8%, color-mix(in srgb, var(--accent-amber) 40%, transparent), transparent 72%),
    linear-gradient(165deg, rgba(var(--ink),.06), rgba(var(--ink),.015)),
    color-mix(in srgb, var(--accent-amber) 10%, var(--card-bg));
}
.wp-fixed-chip--filled{
  opacity:.86;
}
.wp-fixed-chip__flag--holiday{
  background: color-mix(in srgb, #8B90D6 38%, var(--bg-night-2));
  font-size:11px;
}
body .wp-fixed-chip__flag{ background: #fff; }

/* ---------- روزِ تعطیلِ رسمی: زنگِ «مدرسه» به‌جایِ حالتِ عادی/در انتظار،
   یک نوارِ کوچیکِ «تعطیل» رویِ خودش نشون می‌ده و کم‌رنگ‌تر می‌شه - چون
   اون روز نیازی به گزارش‌دادن نیست. فقط رویِ زنگ‌هایِ نوعِ مدرسه اعمال
   می‌شه، نه فعالیت‌هایِ دیگه (باشگاه/موسیقی/...). ---------- */
.sp-fixed-chip--holiday,
.wp-fixed-chip--holiday{
  opacity:.78;
  filter: saturate(.75);
  border-color: color-mix(in srgb, var(--chip-accent) 20%, var(--card-border)) !important;
  background:
    repeating-linear-gradient(135deg, rgba(var(--ink),.05) 0 8px, transparent 8px 16px),
    linear-gradient(165deg, rgba(var(--ink),.05), rgba(var(--ink),.01)),
    color-mix(in srgb, var(--chip-accent) 4%, var(--card-bg)) !important;
}
.wp-fixed-chip--holiday:disabled{ opacity:.78; }
.sp-fixed-chip__holiday-ribbon{
  position:absolute;
  top:8px;
  inset-inline-start:-26px;
  z-index:3;
  width:96px;
  padding:2px 0;
  text-align:center;
  font-size:9.5px;
  font-weight:900;
  letter-spacing:.5px;
  color:#fff;
  background: linear-gradient(90deg, #E85D75, #FF8FA8);
  box-shadow: 0 3px 8px -2px rgba(0,0,0,.45);
  transform: rotate(-38deg);
  pointer-events:none;
}

/* ---------- تیکِ تعطیل/غیرتعطیلِ دستیِ هر روز - فقط وقتی حداقل یک
   زنگِ «مدرسه» تویِ همون روز باشه نشون داده می‌شه؛ اول‌ترینِ آیتمِ ردیفِ
   زنگ‌هایِ ثابته. ---------- */
.sp-holiday-toggle{
  display:flex;
  align-items:center;
  gap:5px;
  flex-shrink:0;
  align-self:center;
  padding:6px 12px;
  border-radius:999px;
  cursor:pointer;
  user-select:none;
  font-size:11px;
  font-weight:800;
  color: var(--text-muted);
  border:1.5px dashed rgba(var(--ink),.2);
  background: rgba(var(--ink),.03);
  transition: all .18s var(--ease-pop);
}
.sp-holiday-toggle:hover{
  border-color: color-mix(in srgb, #FF8FA8 55%, rgba(var(--ink),.2));
  color: var(--text-paper);
}
.sp-holiday-toggle__input{
  width:14px; height:14px;
  accent-color:#E85D75;
  cursor:pointer;
}
.sp-holiday-toggle__icon{ font-size:12px; line-height:1; }
.sp-holiday-toggle--on{
  border-style:solid;
  border-color: color-mix(in srgb, #E85D75 55%, var(--card-border));
  background: color-mix(in srgb, #E85D75 16%, transparent);
  color:#fff;
}

.sp-day-col__empty{
  display:flex;
  align-items:center;
  color: var(--text-faint);
  font-size:12.5px;
  padding:0 6px;
}

/* ---------- کارتِ برنامه (افقی، جذاب‌تر، وسط‌چین، عرضِ ثابت + هم‌ترازِ محتوا) ---------- */
.sp-plan-card{
  --card-accent: var(--accent-lav);
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  flex-shrink:0;
  width:226px;
  /* ⭐ هاله‌یِ رنگیِ بالایِ کارت، حالا قوی‌تر و با دو لایه (یکی بزرگ و
     پخش، یکی نزدیک‌تر و پررنگ‌تر) - انگار خودِ آیکون نورِ رنگیِ خودش رو
     مستقیم رویِ بک‌گراندِ کارت انداخته، دقیقاً مثلِ کارت‌هایِ نمونه. */
  background:
    radial-gradient(230px 190px at 50% -14%, color-mix(in srgb, var(--card-accent) 46%, transparent), transparent 70%),
    radial-gradient(120px 90px at 50% 4%, color-mix(in srgb, var(--card-accent) 55%, transparent), transparent 75%),
    linear-gradient(180deg, color-mix(in srgb, var(--card-accent) 12%, transparent) 0%, transparent 46%),
    linear-gradient(165deg, rgba(var(--ink),.07), rgba(var(--ink),.018));
  border:1px solid var(--card-border);
  border-radius:20px;
  /* پدینگِ بالا فقط به‌اندازه‌ی لازمه: آیکونِ درس دیگه تویِ جریانِ عادیِ
     کارت نیست (absolute و زده‌ بیرون از لبه‌ی بالایِ کارت)، این فضا همون
     جاییه که بخشِ داخلیِ آیکون روش می‌شینه - قبلاً بیش‌ازحد بزرگ بود (۸۴px)
     و یک فاصله‌ی خالیِ بی‌دلیل قبل از اسمِ درس می‌ساخت؛ حالا جمع‌وجورتره.
     ⭐ این مقدار فقط برایِ آیکونِ ایموجیِ ساده (۵۴px) کافیه؛ وقتی درس
     عکسِ اختصاصی داره (icon-badge--img، خیلی بزرگ‌تره)، کلاسِ
     sp-plan-card--icon-img پایین‌تر این مقدار رو خودش بیشتر می‌کنه. */
  padding:46px 14px 18px;
  font-size:12.5px;
  text-align:center;
  overflow:visible;
  box-shadow: 0 10px 22px -14px rgba(0,0,0,.6);
  transition: transform .25s var(--ease-pop), box-shadow .25s ease, border-color .25s ease;
}
.sp-plan-card:hover{
  transform: translateY(-6px) scale(1.015);
  border-color: color-mix(in srgb, var(--card-accent) 55%, var(--card-border));
  box-shadow: 0 16px 26px -16px rgba(0,0,0,.45), 0 0 0 1px color-mix(in srgb, var(--card-accent) 35%, transparent), 0 0 30px -10px color-mix(in srgb, var(--card-accent) 60%, transparent);
}
.sp-plan-card::before{
  content:"";
  position:absolute; top:0; right:0; left:0;
  height:4px;
  border-radius:20px 20px 0 0;
  background: linear-gradient(90deg, transparent, var(--card-accent), transparent);
  opacity:.9;
}
/* ⭐ رنگِ کارت (--card-accent) دیگه اینجا بر اساسِ نوعِ فعالیت ثابت نمی‌شه؛
   حالا مستقیماً به‌صورتِ inline-style و بر اساسِ خودِ درس ست می‌شه (تویِ
   dashboard.js / study-plan.js) تا هر درس رنگِ ثابتِ خودش رو داشته باشه. */
/* ⭐ دیگه قابِ دورِ کارت سبز نمی‌شه وقتی انجام شد - همون نشانِ گردِ
   کوچیکِ پایینِ کارت (done-badge/done-toggle) کافیه تا وضعیت رو نشون بده. */
.sp-plan-card--done .sp-plan-card__course{ text-decoration: line-through; opacity:.7; }

/* ⭐ کارتی که همین الان (بعدِ ثبت یا ویرایش) رویِ صفحه اومده - چند ثانیه
   یک هاله‌یِ طلایی می‌گیره تا مشاور سرِ اولین نگاه پیداش کنه، بعد خودش
   به‌آرومی محو می‌شه. اگه چند کارتِ هم‌زمان ثبت بشن، همه‌شون همین کلاس
   رو می‌گیرن؛ فقط اسکرول/فوکسِ صفحه رویِ اولی (به‌لحاظِ تاریخ) می‌ره. */
.sp-plan-card--just-saved{
  animation: sp-just-saved-glow 2.6s ease-out;
}
@keyframes sp-just-saved-glow{
  0%{
    box-shadow: 0 0 0 3px rgba(250,204,21,.9), 0 0 34px 6px rgba(250,204,21,.65);
    border-color: rgba(250,204,21,.95);
  }
  70%{
    box-shadow: 0 0 0 2px rgba(250,204,21,.5), 0 0 22px 4px rgba(250,204,21,.3);
    border-color: rgba(250,204,21,.6);
  }
  100%{
    box-shadow: 0 10px 22px -14px rgba(0,0,0,.6);
    border-color: var(--card-border);
  }
}

/* ⭐ وقتی درس عکسِ اختصاصیِ خودش رو داره، آیکون (icon-badge--img) خیلی
   بزرگ‌تر و پایین‌ترِ از ایموجیِ معمولیه (تا لبه‌ی ۶۶px زیرِ لبه‌ی بالایِ
   کارت می‌رسه) - پدینگِ بالایِ عادیِ کارت (۴۶px) براش کافی نبود و باعث
   می‌شد اسمِ درس زیرِ آیکون بره؛ این حالت پدینگِ بالا رو به‌اندازه‌یِ
   کافی زیاد می‌کنه تا هم آیکون جا بشه و هم زیرِ اسمِ درس نره. */
.sp-plan-card--icon-img{ padding-top:76px; }

/* ⭐ برچسبِ نوعِ فعالیت (type-pill) عمداً رویِ لبه‌ی پایینِ کارت می‌شینه
   (position:absolute، bottom:-8px) - این خوبه وقتی کارت دکمه‌ای پایینش
   نداره. ولی وقتی دکمه‌ی «شروعِ آزمون/دانلودِ PDF» هم هست، همون دکمه
   دقیقاً همون‌جا (ته‌ِ کارت) می‌شینه و متنِ دکمه زیرِ همین برچسب پنهان
   می‌شد. اینجا فقط برایِ کارت‌هایی که دکمه دارن، پدینگِ پایین رو بیشتر
   می‌کنیم تا دکمه از محدوده‌یِ برچسب فاصله بگیره. */
.sp-plan-card--has-action{ padding-bottom:40px; }

/* بدنه‌ی متغیر (چیپ‌ها/برچسب/یادداشت): با flex:1 فضایِ باقی‌مونده رو
   می‌گیره و همین باعث می‌شه دکمه‌ی پایینِ کارت (شروعِ آزمون/دانلودِ PDF)
   تویِ همه‌ی کارت‌هایِ یک ردیف، سرِ یک خط بیفته - چون sp-day-row__cards
   با align-items:stretch همه‌ی کارت‌ها رو هم‌ارتفاع می‌کنه. */
.sp-plan-card__body{
  width:100%;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}

.sp-plan-card__top{
  position:absolute;
  top:10px; right:10px; left:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  z-index:2;
}
/* ⭐ فقط گفتگو و حذف تویِ همین ردیفِ بالا (دو گوشه‌ی مخالفِ کارت) می‌مونن؛
   دکمه‌ی ویرایش دیگه این‌جا نیست - چون هر سه‌تا با justify-content:
   space-between رویِ عرضِ کارت پخش می‌شدن، دکمه‌ی وسطی (ویرایش) درست
   زیرِ آیکونِ بزرگِ درس (icon-badge--img، ۱۰۴px، وسطِ کارت) می‌افتاد و
   هم پنهان می‌شد هم با خودِ تصویر قاطی/شلوغ به‌نظر می‌رسید. حالا ویرایش
   به‌صورتِ یک نشانِ مجزا، گوشه‌ی خودِ آیکون/عکسِ درس می‌شینه (پایین‌تر،
   جدا از این ردیف) - نگاه کن به .sp-plan-card__edit. */
.sp-plan-card__delete{
  width:24px; height:24px;
  border:none;
  border-radius:50%;
  background: rgba(var(--ink),.07);
  color: var(--text-muted);
  font-size:11px;
  cursor:pointer;
  line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition: all .18s var(--ease-pop);
}
/* ⭐ دکمه‌ی ویرایش قبلاً تویِ همون ردیفِ بالایِ کارت (کنارِ گفتگو) بود و
   دقیقاً رویِ آیکون/عکسِ بزرگِ درس می‌افتاد - چون آیکون از لبه‌ی بالایِ
   کارت می‌زنه بیرون و هم‌زمان با همون ناحیه هم‌پوشانی داشت (به‌خصوص
   وقتی درس عکسِ اختصاصی داره)، کلیک‌کردنش سخت بود و بصری هم شلوغ/بی‌نظم
   به‌نظر می‌رسید. حالا مثلِ نشانِ رایجِ «ویرایشِ عکسِ پروفایل»، یک دایره‌ی
   کوچیکِ مجزا گوشه‌یِ پایین-راستِ خودِ آیکونِ درس می‌شینه - یک حلقه‌یِ
   هم‌رنگِ پس‌زمینه دورش داره (مثلِ نشانِ «انجام شد» پایینِ کارت) تا انگار
   دقیقاً همون‌جا برایِ کارت "بریده" شده و طبیعی/جذاب به‌نظر برسه، و دیگه
   با گفتگو/حذف یا خودِ تصویر قاطی نمی‌شه. */
.sp-plan-card__edit{
  position:absolute;
  top:24px;
  left:calc(50% + 12px);
  z-index:4;
  width:26px; height:26px;
  border:2.5px solid var(--bg-night-2);
  border-radius:50%;
  background: linear-gradient(145deg, rgba(139,144,214,.95), rgba(108,99,255,.98));
  color:#fff;
  font-size:11px;
  cursor:pointer;
  line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 10px -3px rgba(108,99,255,.7);
  transition: all .18s var(--ease-pop);
}
.sp-plan-card__edit:hover{
  background: linear-gradient(145deg, var(--accent-lav), #7b80d0);
  border-color: var(--bg-night-2);
  color:#fff;
  transform: scale(1.15) rotate(-8deg);
  box-shadow: 0 6px 14px -4px rgba(139,144,214,.75);
}
/* وقتی درس عکسِ اختصاصیِ بزرگ‌تری داره (۱۰۴px به‌جایِ ۵۴px)، نشانِ ویرایش
   هم باید کمی پایین‌تر و به‌سمتِ بیرون‌تر بره تا دقیقاً رویِ گوشه‌ی همون
   عکسِ بزرگ‌تر بشینه، نه وسطِ خالیِ کارت. */
.sp-plan-card--icon-img .sp-plan-card__edit{
  top:50px;
  left:calc(50% + 28px);
}
.sp-plan-card--expanded .sp-plan-card__edit{
  top:28px;
  left:calc(50% + 16px);
}
.sp-plan-card--expanded.sp-plan-card--icon-img .sp-plan-card__edit{
  top:56px;
  left:calc(50% + 32px);
}
.sp-plan-card__delete{ position:static; }
.sp-plan-card__delete:hover{ background: rgba(227,93,93,.22); color:#e35d5d; transform: scale(1.12) rotate(8deg); }

/* ⭐ حالا وضعیتِ «انجام شد یا نه» دیگه نواری بالایِ کارت نیست؛ یک نشانِ
   گردِ کوچیک شده که رویِ لبه‌ی دایره‌ی مدت‌زمان (پایینِ کارت) می‌شینه -
   برایِ آزمونِ آنلاینِ ثبت‌شده. تولتیپ (title) متنِ کامل رو نشون می‌ده. */
.sp-plan-card__done-badge{
  position:absolute;
  bottom:-8px;
  left:50%;
  transform:translateX(-50%);
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px; height:24px;
  font-size:12px;
  font-weight:900;
  color:#0F1130;
  background: var(--accent-mint);
  border:2px solid var(--bg-night-2);
  border-radius:50%;
  box-shadow: 0 4px 10px -3px rgba(0,0,0,.55);
}
/* ⭐ همون چهار حالتِ عملکرد (فقط‌نمایشی، برایِ نمایِ مشاور): دقیقاً
   به‌اندازه (پیش‌فرض، سبز) - بیشتر از برنامه (--extra، آبی) - کمتر ولی
   نه صفر (--warn، کهربایی) - اصلاً انجام‌نشده (--zero، قرمز). */
.sp-plan-card__done-badge--extra{
  color:#0ea5e9;
  background: var(--bg-night-2);
  border-color:#0ea5e9;
}
.sp-plan-card__done-badge--warn{
  color: var(--accent-warn-amber);
  background: var(--bg-night-2);
  border-color: var(--accent-warn-amber);
}
.sp-plan-card__done-badge--zero{
  color: var(--accent-warn-red);
  background: var(--bg-night-2);
  border-color: var(--accent-warn-red);
}

/* ---------- دکمه‌ی چت (مشاور) و علامتِ نامه‌ای (پیامِ نخوانده) ---------- */
.sp-plan-card__chat{
  width:24px; height:24px;
  border:none;
  border-radius:50%;
  background: rgba(var(--ink),.07);
  color: var(--text-muted);
  font-size:12px;
  cursor:pointer;
  line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition: all .18s var(--ease-pop);
}
.sp-plan-card__chat:hover{ background: rgba(87,199,227,.26); color:#57c7e3; transform: scale(1.12); }

.sp-plan-card__mail{
  position:absolute;
  top:-10px; left:-8px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:3px;
  font-size:10.5px;
  font-weight:800;
  color:#0F1130;
  background: linear-gradient(120deg, #FFD86B, #FFB454);
  border-radius:999px;
  padding:3px 8px;
  box-shadow: 0 6px 14px -6px rgba(255,180,84,.7), 0 0 0 2px var(--bg-night);
  animation: sp-mail-pop .4s var(--ease-pop);
}
@keyframes sp-mail-pop{
  from{ transform: scale(.5); opacity:0; }
  to{ transform: scale(1); opacity:1; }
}

/* ---------- کارتِ «خودجوش»: فعالیتی که خودِ دانش‌آموز (بدونِ مشاور) از
   داشبوردش اضافه کرده - نه فقط تویِ داشبوردِ خودش، تویِ پنلِ مشاور هم با
   همین رنگ‌بندیِ متفاوت (سبزِ خط‌چین‌دار، به‌جایِ رنگِ ثابتِ درس) دیده
   می‌شه تا سرِ اولین نگاه از برنامه‌هایِ رسمی جدا باشه. ---------- */
.sp-plan-card--self{
  /* ⭐ مهم: رنگِ ثابتِ درس (courseAccentColor) به‌شکلِ inline style رویِ
     خودِ کارت ست می‌شه؛ برایِ اینکه رنگِ «خودجوش» واقعاً رویِ اون غالب
     بشه، این‌جا با !important بازنویسی‌ش می‌کنیم - وگرنه inline style
     همیشه رویِ این کلاس اولویت داشت. */
  --card-accent: #45E6A5 !important;
  border-style: dashed;
  border-width: 1.5px;
}
.sp-plan-card__self-badge{
  position:absolute;
  top:-10px; right:-8px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:3px;
  font-size:10px;
  font-weight:900;
  color:#0F1130;
  background: linear-gradient(120deg, #7EE787, #45E6A5);
  border-radius:999px;
  padding:3px 9px;
  white-space:nowrap;
  box-shadow: 0 6px 14px -6px rgba(69,230,165,.65), 0 0 0 2px var(--bg-night);
  animation: sp-mail-pop .4s var(--ease-pop);
}
.sp-plan-card__self-delete{
  position:absolute;
  top:-10px; left:-8px;
  z-index:3;
  width:22px; height:22px;
  border-radius:50%;
  border:none;
  display:flex; align-items:center; justify-content:center;
  font-size:11px;
  font-weight:900;
  color:#fff;
  background: rgba(232,93,117,.85);
  box-shadow: 0 6px 14px -6px rgba(232,93,117,.7), 0 0 0 2px var(--bg-night);
  cursor:pointer;
  transition: transform .15s var(--ease-pop), background .15s ease;
}
.sp-plan-card__self-delete:hover{ background:#E85D75; transform: scale(1.12); }

/* ---------- دکمه‌ی «+» جلویِ هر روز، برایِ ثبتِ فعالیتِ خودجوشِ دانش‌آموز -
   مثلِ یه کارتِ خالیِ کِشیده، هم‌ردیفِ بقیه‌ی کارت‌هایِ همون روز. ---------- */
.sp-day-row__add-btn{
  flex-shrink:0;
  width:86px;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1.5px dashed rgba(69,230,165,.4);
  border-radius:18px;
  background: rgba(69,230,165,.05);
  color: var(--text-muted);
  font-family:inherit;
  cursor:pointer;
  padding:10px 6px;
  transition: all .18s var(--ease-pop);
}
.sp-day-row__add-btn:hover{
  border-color: rgba(69,230,165,.85);
  background: rgba(69,230,165,.12);
  color: var(--text-paper);
  transform: translateY(-4px);
}
.sp-day-row__add-btn-icon{
  width:30px; height:30px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
  font-weight:900;
  line-height:1;
  color:#0F1130;
  background: linear-gradient(120deg, #7EE787, #45E6A5);
  box-shadow: 0 6px 14px -6px rgba(69,230,165,.6);
  transition: transform .18s var(--ease-pop);
}
.sp-day-row__add-btn:hover .sp-day-row__add-btn-icon{ transform: scale(1.14) rotate(90deg); }
.sp-day-row__add-btn-label{
  font-size:10.5px;
  font-weight:800;
  text-align:center;
  line-height:1.3;
}

/* ---------- دکمه‌ی «انجام دادم؟» (دانش‌آموز) - حالا یک نشانِ گردِ کوچیکِ
   کلیک‌پذیر رویِ لبه‌ی دایره‌ی مدت‌زمانه، نه یک نوارِ کاملِ عرضِ کارت. */
.sp-plan-card__done-toggle{
  position:absolute;
  bottom:-8px;
  left:50%;
  transform:translateX(-50%);
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px; height:24px;
  border-radius:50%;
  /* ⭐ تا وقتی ثبت نشده: یک حلقه‌یِ توخالیِ خط‌چین (نه یک دایره‌ی پُر) -
     تا واضح باشه که هنوز کاری ثبت نشده و منتظرِ کلیکه. */
  border:2px dashed var(--text-faint);
  background: var(--bg-night-2);
  box-shadow: 0 4px 10px -3px rgba(0,0,0,.55);
  cursor:pointer;
  transition: all .2s ease;
}
.sp-plan-card__done-toggle input{ display:none; }
.sp-plan-card__done-toggle-icon{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
/* ⭐ تا وقتی ثبت نشده: به‌جایِ یک حلقه‌یِ خنثی، یک ساعتِ شنی (⏳) - تا
   دانش‌آموز بفهمه این مورد هنوز روی زمینِ منتظرِ انجام‌شدنه. فونتِ
   ایموجی رو صریح می‌ذاریم چون فونتِ اصلیِ سایت (Vazirmatn/Tahoma)
   گلیفِ ایموجی نداره و ممکنه بدونِ این، به‌جاش یک باکسِ خالی دیده بشه. */
.sp-plan-card__done-toggle-icon::after{
  content:"⏳";
  font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji","Segoe UI Symbol",sans-serif;
  font-size:11px;
  line-height:1;
  opacity:.85;
}
.sp-plan-card__done-toggle:hover{ border-color: var(--accent-mint); box-shadow: 0 4px 10px -3px rgba(0,0,0,.55); }
.sp-plan-card__done-toggle:has(input:checked){
  border-style: solid;
  border-color: var(--accent-mint);
  background: var(--accent-mint);
  box-shadow: 0 4px 10px -3px rgba(0,0,0,.55), 0 0 14px -3px var(--accent-mint);
}
.sp-plan-card__done-toggle:has(input:checked) .sp-plan-card__done-toggle-icon::after{
  content:"✓";
  font-size:13px; color:#0F1130; font-weight:900;
  opacity:1;
}
/* ⭐ همون چهار حالتِ عملکرد، برایِ نشانِ کلیک‌پذیرِ دانش‌آموز - وقتی تیک
   خورده (ثبت شده)، رنگِ حلقه/آیکون بر اساسِ مقایسه با مدت‌زمانِ برنامه
   تغییر می‌کنه: بیشتر از برنامه (--extra) آبی با ستاره، کمتر ولی نه صفر
   (--warn) کهربایی با علامتِ تعجب، اصلاً انجام‌نشده (--zero) قرمز با ضربدر. */
.sp-plan-card__done-toggle--extra:has(input:checked){
  border-style: solid;
  border-color:#0ea5e9;
  background: var(--bg-night-2);
  box-shadow: 0 4px 10px -3px rgba(0,0,0,.55), 0 0 14px -3px #0ea5e9;
}
.sp-plan-card__done-toggle--extra:has(input:checked) .sp-plan-card__done-toggle-icon::after{
  content:"★";
  font-size:11px; color:#0ea5e9; font-weight:900;
  opacity:1;
}
.sp-plan-card__done-toggle--warn:has(input:checked){
  border-style: solid;
  border-color: var(--accent-warn-amber);
  background: var(--bg-night-2);
  box-shadow: 0 4px 10px -3px rgba(0,0,0,.55), 0 0 14px -3px var(--accent-warn-amber);
}
.sp-plan-card__done-toggle--warn:has(input:checked) .sp-plan-card__done-toggle-icon::after{
  content:"!";
  font-size:13px; color: var(--accent-warn-amber); font-weight:900;
  opacity:1;
}
.sp-plan-card__done-toggle--zero:has(input:checked){
  border-style: solid;
  border-color: var(--accent-warn-red);
  background: var(--bg-night-2);
  box-shadow: 0 4px 10px -3px rgba(0,0,0,.55), 0 0 14px -3px var(--accent-warn-red);
}
.sp-plan-card__done-toggle--zero:has(input:checked) .sp-plan-card__done-toggle-icon::after{
  content:"✕";
  font-size:12px; color: var(--accent-warn-red); font-weight:900;
  opacity:1;
}

/* ⭐⭐⭐ دکمه‌ی «انجامش دادم» - نسخه‌ی مینیمال. نسخه‌های قبلی خیلی
   پُررنگ/براق بودن (گرادیانِ توپُر + شینِ سراسری + سایه‌ی سنگین) و چون
   دقیقاً رویِ لبه‌ی پایینِ کارت می‌نشستن، همراهِ اورلپِ چیپِ نوعِ فعالیت
   (type-pill، که حالا اصلاح شد)، حسِ «داره از کادر می‌زنه بیرون» می‌داد.
   این نسخه یک دکمه‌ی تخت و کم‌حجم‌تره: پیش از ثبت یک قابِ سبکِ سبز با
   حاشیه (نه پُررنگ)، بعدِ ثبت یک پُرِ سبزِ ملایم - بدونِ شینِ متحرک،
   با سایه‌ی خیلی سبک‌تر، کاملاً داخلِ محدوده‌ی کارت. */
.sp-plan-card__done-toggle.sp-plan-card__done-toggle--btn{
  position: relative;
  /* ⭐ فیکس: کلاسِ پایه (.sp-plan-card__done-toggle) برایِ حالتِ قدیمیِ
     absolute مقادیرِ left:50% و bottom:-8px رو ست کرده بود؛ چون این
     دو‌تا اینجا override نمی‌شدن، حتی بعدِ تغییرِ position به relative
     هنوز اعمال می‌شدن و دکمه رو ۵۰٪ از عرضِ کارت به راست + ۸px به پایین
     می‌کشیدن - همون چیزی که باعث می‌شد دکمه از لبه‌ی کارت بزنه بیرون. */
  left: auto;
  bottom: auto;
  transform: none;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  border: 1.5px solid color-mix(in srgb, var(--accent-mint) 55%, transparent);
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  margin-top: 10px;
  padding: 7px 10px;
  background: color-mix(in srgb, var(--accent-mint) 10%, transparent);
  box-shadow: none;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .15s var(--ease-pop);
}
.sp-plan-card__done-toggle.sp-plan-card__done-toggle--btn:hover{
  background: color-mix(in srgb, var(--accent-mint) 18%, transparent);
  border-color: var(--accent-mint);
}
.sp-plan-card__done-toggle.sp-plan-card__done-toggle--btn:active{ transform: scale(.97); }

/* آیکونِ دایره‌ایِ کوچیک، گوشه‌ی متن - قبل از ثبت یک حلقه‌ی توخالیِ
   هم‌رنگِ متن، بعدِ ثبت یک دایره‌ی توپُرِ سفید با تیکِ سبز. */
.sp-plan-card__done-toggle.sp-plan-card__done-toggle--btn .sp-plan-card__done-btn-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  color: var(--accent-mint);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  background: transparent;
  transition: all .2s var(--ease-pop);
}
.sp-plan-card__done-toggle.sp-plan-card__done-toggle--btn .sp-plan-card__done-btn-text{
  font-weight: 800;
  font-size: 12px;
  color: var(--accent-mint);
  letter-spacing: .2px;
}

/* ⭐ حالتِ «ثبت‌شده»: پُرِ ملایمِ سبز، آیکون سفید با تیکِ رنگی، و یک
   پاپِ کوچیکِ آیکون (نه یک حلقه‌ی نوریِ سراسری) - جشنِ کوچیک، بدونِ شلوغی. */
.sp-plan-card__done-toggle.sp-plan-card__done-toggle--btn.sp-plan-card__done-toggle--checked{
  background: var(--accent-mint);
  border-color: var(--accent-mint);
}
.sp-plan-card__done-toggle.sp-plan-card__done-toggle--btn.sp-plan-card__done-toggle--checked .sp-plan-card__done-btn-icon,
.sp-plan-card__done-toggle.sp-plan-card__done-toggle--btn.sp-plan-card__done-toggle--checked .sp-plan-card__done-btn-text{
  color: #0F1130;
}
.sp-plan-card__done-toggle.sp-plan-card__done-toggle--btn.sp-plan-card__done-toggle--checked .sp-plan-card__done-btn-icon{
  animation: spDoneIconPop .4s var(--ease-pop);
  background: #ffffff;
  border-color: #ffffff;
  color: #059669;
}
@keyframes spDoneIconPop{
  0%   { transform: scale(.4) rotate(-25deg); opacity: 0; }
  55%  { transform: scale(1.25) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* سه حالتِ عملکردِ دیگه (کمتر/بیشتر/اصلاً انجام‌نشده) - همون خانواده‌رنگیِ
   قبلی، حالا رویِ گرادیانِ کاملِ دکمه + حلقه‌ی نوریِ هم‌رنگ */
.sp-plan-card__done-toggle.sp-plan-card__done-toggle--btn.sp-plan-card__done-toggle--extra{
  background: #0ea5e9;
  border-color: #0ea5e9;
}
.sp-plan-card__done-toggle.sp-plan-card__done-toggle--btn.sp-plan-card__done-toggle--extra .sp-plan-card__done-btn-icon{ color: #0ea5e9; }

.sp-plan-card__done-toggle.sp-plan-card__done-toggle--btn.sp-plan-card__done-toggle--warn{
  background: var(--accent-warn-amber);
  border-color: var(--accent-warn-amber);
}
.sp-plan-card__done-toggle.sp-plan-card__done-toggle--btn.sp-plan-card__done-toggle--warn .sp-plan-card__done-btn-icon{ color: var(--accent-warn-amber); }

.sp-plan-card__done-toggle.sp-plan-card__done-toggle--btn.sp-plan-card__done-toggle--zero{
  background: var(--accent-warn-red);
  border-color: var(--accent-warn-red);
}
.sp-plan-card__done-toggle.sp-plan-card__done-toggle--btn.sp-plan-card__done-toggle--zero .sp-plan-card__done-btn-icon{ color: var(--accent-warn-red); }

/* ⭐ آیکونِ درس دیگه تویِ جریانِ کارت نیست: دقیقاً رویِ لبه‌ی بالایِ کارت
   می‌شینه و نصفش می‌زنه بیرون (مثلِ کارت‌هایِ معرفیِ سیاره) - بزرگ، جذاب،
   وسط‌چین با translateX. کارتِ خودش padding-top بزرگی داره (بالا) که
   دقیقاً جایِ نیمه‌یِ داخلیِ همین آیکون رو رزرو می‌کنه. */
.sp-plan-card__icon-badge{
  position:absolute;
  top:-20px;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  width:54px; height:54px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:23px;
  flex-shrink:0;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--card-accent) 45%, transparent), color-mix(in srgb, var(--card-accent) 16%, transparent));
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.09), 0 14px 24px -8px rgba(0,0,0,.5), 0 0 24px -2px var(--card-accent), 0 0 55px 6px color-mix(in srgb, var(--card-accent) 40%, transparent);
  transition: transform .25s var(--ease-pop);
}
.sp-plan-card:hover .sp-plan-card__icon-badge{ transform: translateX(-50%) scale(1.1) rotate(-4deg); }

/* ⭐ نسخه‌ی «آیکونِ درس» برایِ صفحه‌ی تعریفِ برنامه‌ی ثابتِ هفتگی: دقیقاً
   تویِ همون سایزِ ۵۴پیکسلیِ فعلیِ این کارت‌ها (بزرگ‌تر نمی‌شه، برخلافِ
   نسخه‌ی ۱۰۴پیکسلیِ کارت‌هایِ برنامه‌ی مطالعاتی)، فقط بدونِ پس‌زمینه‌ی
   دایره‌ای چون خودِ عکس شفافه. */
.sp-plan-card__icon-badge--course-img{
  background:none;
  box-shadow:none;
  filter:
    drop-shadow(0 4px 6px rgba(0,0,0,.35))
    drop-shadow(0 0 14px color-mix(in srgb, var(--card-accent) 55%, transparent));
}
.sp-plan-card__icon-badge--course-img img{
  width:100%; height:100%;
  object-fit:contain;
  display:block;
}

/* وقتی درس عکسِ اختصاصیِ خودش رو داره (به‌جایِ ایموجیِ عمومی): دیگه هیچ
   جعبه/پس‌زمینه‌ی رنگی دورش نیست - خودِ تصویر (که پس‌زمینه‌اش شفافه)
   آزادانه شناوره، بزرگ، و واقعاً از لبه‌ی بالایِ کارت می‌زنه بیرون (بخشِ
   زیادی‌ش روی پس‌زمینه‌ی بیرونِ کارت) - دقیقاً شبیهِ کارت‌هایِ تصویریِ
   معرفیِ سیاره که نمونه‌اش داده شد؛ فقط یک سایه‌ی نرم زیرش برایِ عمق. */
.sp-plan-card__icon-badge--img{
  width:104px; height:104px;
  top:-38px;
  border-radius:0;
  background:none;
  padding:0;
  overflow:visible;
  box-shadow:none;
  filter:
    drop-shadow(0 8px 8px rgba(0,0,0,.2))
    drop-shadow(0 0 30px color-mix(in srgb, var(--card-accent) 75%, transparent))
    drop-shadow(0 0 60px color-mix(in srgb, var(--card-accent) 45%, transparent));
  transition: transform .25s var(--ease-pop), filter .25s ease;
}
.sp-plan-card__icon-badge--img img{
  width:100%; height:100%;
  object-fit:contain;
  display:block;
}
.sp-plan-card:hover .sp-plan-card__icon-badge--img{
  transform: translateX(-50%) scale(1.06) rotate(0deg);
  filter:
    drop-shadow(0 10px 10px rgba(0,0,0,.22))
    drop-shadow(0 0 38px color-mix(in srgb, var(--card-accent) 90%, transparent))
    drop-shadow(0 0 72px color-mix(in srgb, var(--card-accent) 55%, transparent));
}



/* ارتفاعِ عنوانِ درس همیشه فضایِ ۲ خط رو رزرو می‌کنه (حتی وقتی عنوان
   کوتاهه) تا مدت‌زمان/نوعِ فعالیتِ زیرش، بینِ کارت‌هایِ مختلف هم‌تراز بمونه. */
.sp-plan-card__course{
  margin:0 0 4px;
  min-height:2.2em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-weight:900;
  font-size:14px;
  line-height:1.2;
  color: var(--text-paper);
  letter-spacing:.1px;
}
/* ⭐ قبلاً این چیپ با position:absolute رویِ مرزِ پایینِ کارت می‌شینت -
   ولی از وقتی دکمه‌یِ تمام‌عرضِ «انجامش دادم»/«شروعِ آزمون» هم به
   انتهایِ کارت اضافه شد، این دو تا رویِ هم می‌افتادن و چیپ همیشه
   نصفه‌بیرونِ کادر، زیرِ دکمه، شناور به‌نظر می‌رسید. حالا یک چیپِ
   معمولی و داخلِ جریانِ کارته، درست کنارِ بقیه‌ی چیپ‌ها. */
.sp-plan-card__type-pill{
  display:inline-block;
  flex-shrink:0;
  white-space:nowrap;
  padding:4px 14px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  box-shadow: 0 4px 10px -6px rgba(0,0,0,.5);
}
.sp-plan-card__type-pill{
  background: color-mix(in srgb, var(--card-accent) 88%, var(--bg-night-2));
  color: var(--bg-night-2);
  border:2px solid var(--bg-night-2);
}
.sp-plan-card--other .sp-plan-card__type-pill{ color: var(--bg-night-2); }

/* ---------- بجِ مدت‌زمان («خفن»، بزرگ و درخشان) ----------
   ⭐ حالا یک wrap دورشه (duration-wrap) که نشانِ گردِ «انجام شد/نشد»
   (done-toggle یا done-badge) رویِ لبه‌ش می‌شینه؛ خودِ دایره بدونِ
   تغییر همون مدت‌زمان رو نشون می‌ده، ولی وقتی کار انجام شده باشه
   (--done)، رنگش به‌جایِ رنگِ نوعِ فعالیت، سبزِ «انجام‌شده» می‌شه. */
.sp-plan-card__duration-wrap{
  position:relative;
  flex-shrink:0;
  width:64px; height:64px;
  margin:0 auto 8px;
}
.sp-plan-card__duration{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%; height:100%;
  border-radius:50%;
  background: conic-gradient(from 180deg, var(--card-accent), color-mix(in srgb, var(--card-accent) 30%, transparent) 60%, var(--card-accent));
  padding:3px;
  box-shadow: 0 0 22px -4px var(--card-accent);
  transition: transform .6s var(--ease-pop), background .3s ease, box-shadow .3s ease;
}
.sp-plan-card__duration--done{
  background: conic-gradient(from 180deg, var(--accent-mint), color-mix(in srgb, var(--accent-mint) 30%, transparent) 60%, var(--accent-mint));
  box-shadow: 0 0 22px -4px var(--accent-mint);
}
/* ⭐ وقتی مدت‌زمانِ واقعیِ ثبت‌شده معلومه: به‌جایِ رنگِ ثابتِ سبز، بر
   اساسِ مقایسه با مدت‌زمانِ برنامه‌ریزی‌شده رنگ عوض می‌شه - چهار حالت:
   دقیقاً به‌اندازه (--good) سبز، بیشتر از برنامه (--extra) آبی، کمتر
   ولی نه صفر (--warn) کهربایی/نارنجی، اصلاً انجام‌نشده (--zero) قرمز
   با عددِ صفر. همینِ منطق دقیقاً با «گزارشِ هفتگی» هماهنگه. */
.sp-plan-card__duration--good{
  background: conic-gradient(from 180deg, var(--accent-mint), color-mix(in srgb, var(--accent-mint) 30%, transparent) 60%, var(--accent-mint));
  box-shadow: 0 0 22px -4px var(--accent-mint);
}
.sp-plan-card__duration--good .sp-plan-card__duration-num{ color: var(--accent-mint); }
.sp-plan-card__duration--extra{
  background: conic-gradient(from 180deg, #0ea5e9, color-mix(in srgb, #0ea5e9 30%, transparent) 60%, #0ea5e9);
  box-shadow: 0 0 22px -4px #0ea5e9;
}
.sp-plan-card__duration--extra .sp-plan-card__duration-num{ color:#0ea5e9; }
.sp-plan-card__duration--warn{
  background: conic-gradient(from 180deg, var(--accent-warn-amber), color-mix(in srgb, var(--accent-warn-amber) 30%, transparent) 60%, var(--accent-warn-amber));
  box-shadow: 0 0 22px -4px var(--accent-warn-amber);
}
.sp-plan-card__duration--warn .sp-plan-card__duration-num{ color: var(--accent-warn-amber); }
.sp-plan-card__duration--zero{
  background: conic-gradient(from 180deg, var(--accent-warn-red), color-mix(in srgb, var(--accent-warn-red) 30%, transparent) 60%, var(--accent-warn-red));
  box-shadow: 0 0 22px -4px var(--accent-warn-red);
}
.sp-plan-card__duration--zero .sp-plan-card__duration-num{ color: var(--accent-warn-red); }
.sp-plan-card:hover .sp-plan-card__duration{ transform: rotate(180deg); }
.sp-plan-card__duration-inner{
  width:100%; height:100%;
  border-radius:50%;
  background: var(--bg-night-2);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transition: transform .6s var(--ease-pop);
}
.sp-plan-card:hover .sp-plan-card__duration-inner{ transform: rotate(-180deg); }
.sp-plan-card__duration-num{ font-size:18px; font-weight:900; color: var(--text-paper); line-height:1; }
/* ⭐ وقتی هنوز انجام نشده و عددی برایِ نشون‌دادن نیست، به‌جایِ صفر یک
   ایموجیِ ساعتِ شنی (در انتظار) نشون داده می‌شه - کمی بزرگ‌تر از عدد. */
.sp-plan-card__duration-num--icon{ font-size:22px; }
.sp-plan-card__duration-unit{ font-size:8.5px; color: var(--text-muted); margin-top:1px; }

/* ⭐ متن‌هایِ آزادِ داخلِ کارت (توضیح/چیپ‌ها/برچسب) طولشون دستِ مشاوره و
   می‌تونه خیلی بلند بشه؛ برایِ اینکه اندازه‌ی کارت‌ها همیشه یکسان و
   هم‌تراز بمونه، یه عرضِ نمایشیِ ثابت براشون می‌ذاریم و باقی‌مونده رو با
   «…» می‌بریم - با نگه‌داشتنِ ماوس رویِ متن (title)، کلِ متن دیده می‌شه. */
.sp-plan-card__meta{
  margin:0;
  color: var(--text-muted);
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sp-plan-card__chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; max-width:100%; }
/* هر «ردیف» از بدنه (توضیح/چیپ‌ها/منبع/فصل/برچسب) یه فضایِ ثابت رزرو
   می‌کنه، حتی اگه اون کارتِ خاص چیزی برایِ اون ردیف نداشته باشه - این‌طوری
   همون ردیف تویِ کارت‌هایِ کناری هم دقیقاً همون ارتفاع رو می‌گیره و همه‌چی
   (چیپ‌ها، دکمه‌ها) بینِ کارت‌هایِ یک روز، سرِ یک خط می‌مونه. */
.sp-plan-card__slot{ min-height:16px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; width:100%; }
p.sp-plan-card__slot{ min-height:11px; }
/* ⭐ min-height بالا برایِ هم‌تراز موندنِ ردیف‌هایِ چیپ بینِ کارت‌هاست؛
   ولی وقتی یک اسلات کاملاً خالیه (هیچ چیپی توش نیست)، همین
   min-height یک فاصله‌ی خالیِ بی‌دلیل می‌سازه - این حالت اون فاصله رو
   برایِ اسلات‌هایِ کاملاً خالی جمع می‌کنه. */
.sp-plan-card__slot:empty{ min-height:0; }
.sp-plan-card__chip{
  display:inline-block;
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  vertical-align:top;
  font-size:11px;
  font-weight:600;
  color: var(--text-paper);
  background: rgba(var(--ink),.07);
  border:1px solid rgba(var(--ink),.08);
  border-radius:999px;
  padding:3px 9px;
  transition: border-color .15s;
}
.sp-plan-card:hover .sp-plan-card__chip{ border-color: color-mix(in srgb, var(--card-accent) 40%, transparent); }
.sp-plan-card__psl{
  display:inline-block;
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  vertical-align:top;
  font-size:11px;
  font-weight:600;
  color: var(--accent-mint);
  background: rgba(69,230,165,.12);
  border:1px solid rgba(69,230,165,.2);
  border-radius:999px;
  padding:3px 9px;
}
.sp-plan-card__tag{
  display:inline-block;
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  vertical-align:top;
  font-size:11px;
  font-weight:600;
  color: var(--accent-amber);
  background: rgba(255,180,84,.12);
  border:1px solid rgba(255,180,84,.2);
  border-radius:999px;
  padding:3px 9px;
}
.sp-plan-card__action{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex-shrink:0;
  width:100%;
  margin-top:9px;
  padding:8px 10px;
  border:none;
  border-radius:12px;
  background: linear-gradient(135deg, var(--card-accent), color-mix(in srgb, var(--card-accent) 55%, var(--accent-amber)));
  color:#0F1130;
  font-weight:900;
  font-size:12px;
  letter-spacing:.2px;
  cursor:pointer;
  transition: all .2s var(--ease-pop);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 16px -8px var(--card-accent);
}
/* ⭐ یک خطِ نورِ براق که با هاور از روی دکمه سر می‌خوره - همون حسِ «دکمه‌ی
   جذاب و قابلِ‌کلیک» که برایِ دعوت‌به‌عمل مهمه. */
.sp-plan-card__action::after{
  content:"";
  position:absolute;
  top:0; bottom:0; left:-60%;
  width:40%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  transition: left .55s ease;
}
.sp-plan-card__action:hover::after{ left:130%; }
.sp-plan-card__action:hover{ filter: brightness(1.08); transform: translateY(-2px) scale(1.015); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 22px -8px var(--card-accent); }
.sp-plan-card__action:active{ transform: translateY(0) scale(.98); }
.sp-plan-card__action:disabled{ opacity:.6; cursor:default; transform:none; }
.sp-plan-card__action:disabled::after{ display:none; }

.sp-hint{ font-size:12px; color: var(--text-muted); margin:4px 0; }

.sp-delivery-toggle{ display:flex; gap:10px; }
.sp-delivery-option{
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 14px;
  border:1px solid var(--card-border);
  border-radius: var(--radius-field);
  background: rgba(var(--ink),.025);
  cursor:pointer;
  font-size:13px;
  color: var(--text-paper);
  transition: border-color .15s, background .15s;
}
.sp-delivery-option:has(input:checked){
  border-color: var(--accent-mint);
  background: rgba(69,230,165,.07);
}
.sp-delivery-option input{ width:16px; height:16px; accent-color: var(--accent-mint); flex-shrink:0; }
.sp-delivery-option small{ display:block; color: var(--text-muted); font-size:10.5px; font-weight:400; margin-top:2px; }

/* ---------- انتخابِ تعدادِ باکس با دکمه‌هایِ کنارِهم (به‌جایِ تایپِ عدد) ---------- */
.sp-count-pills{ display:flex; gap:8px; flex-wrap:wrap; }
.sp-count-pill{
  appearance:none;
  -webkit-appearance:none;
  flex:1;
  min-width:44px;
  padding:11px 6px;
  border:1px solid var(--card-border);
  border-radius: var(--radius-field);
  background: rgba(var(--ink),.025);
  color: var(--text-paper);
  font-family:"Vazirmatn", Tahoma, sans-serif;
  font-size:15px;
  font-weight:800;
  cursor:pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s var(--ease-pop), color .15s ease;
}
.sp-count-pill:hover{ border-color: color-mix(in srgb, var(--accent-mint) 45%, var(--card-border)); }
.sp-count-pill.is-selected{
  border-color: var(--accent-mint);
  background: linear-gradient(135deg, rgba(69,230,165,.24), rgba(139,144,214,.14));
  color: var(--accent-mint);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px -8px rgba(69,230,165,.5);
}
body .sp-count-pill{ background: rgba(var(--ink),.035); }

/* ---------- انتخابِ مدت‌زمان با ساعت/دقیقه (به‌جایِ تایپِ دقیقه‌یِ خام) ---------- */
.sp-duration-picker{ display:flex; gap:10px; }
.sp-duration-picker__unit{
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 12px;
  border:1px solid var(--card-border);
  border-radius: var(--radius-field);
  background: rgba(var(--ink),.025);
}
.sp-duration-picker__unit select{
  flex:1;
  border:none;
  background:transparent;
  color: var(--text-paper);
  font-family:"Vazirmatn", Tahoma, sans-serif;
  font-size:15px;
  font-weight:800;
  padding:10px 0;
  text-align:center;
  cursor:pointer;
}
.sp-duration-picker__unit select:focus{ outline:none; color: var(--accent-mint); }
.sp-duration-picker__unit select option{ background: var(--bg-night-2); color: var(--text-paper); }
.sp-duration-picker__unit span{ color: var(--text-muted); font-size:11.5px; font-weight:700; flex-shrink:0; }
body .sp-duration-picker__unit{ background: rgba(var(--ink),.035); }

/* ---------- تعدادِ سؤال به‌تفکیکِ سطحِ سختی (بانکِ پرسش‌لند) ---------- */
.sp-bank-counts{ display:flex; gap:10px; }
.sp-bank-count{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:12px 8px;
  border:1px solid var(--card-border);
  border-radius: var(--radius-field);
  background: rgba(var(--ink),.025);
}
.sp-bank-count__label{ font-size:13px; font-weight:700; color: var(--text-paper); }
.sp-bank-count__avail{ font-size:10.5px; color: var(--text-muted); }
.sp-bank-count input[type="number"]{
  width:100%;
  text-align:center;
  background: rgba(var(--ink),.04);
  border:1px solid var(--card-border);
  border-radius:10px;
  color: var(--text-paper);
  font-size:15px;
  font-weight:700;
  padding:6px 4px;
}
.sp-bank-count input[type="number"]:focus{ outline:none; border-color: var(--accent-mint); }

/* ---------- آمارِ «چند تا از این بخشِ کتاب قبلاً استفاده شده / چقدر می‌مونه» ---------- */
.sp-book-stats{ display:flex; gap:10px; margin-top:10px; }
.sp-book-stat{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:12px 8px;
  border-radius: var(--radius-field);
  border:1px solid var(--card-border);
  background: rgba(var(--ink),.025);
}
.sp-book-stat__num{ font-size:19px; font-weight:900; color: var(--text-paper); line-height:1; }
.sp-book-stat__label{ font-size:10.5px; color: var(--text-muted); text-align:center; }
.sp-book-stat--used{ border-color: rgba(255,180,84,.3); background: rgba(255,180,84,.06); }
.sp-book-stat--used .sp-book-stat__num{ color: var(--accent-amber); }
.sp-book-stat--remaining{ border-color: rgba(69,230,165,.3); background: rgba(69,230,165,.06); }
.sp-book-stat--remaining .sp-book-stat__num{ color: var(--accent-mint); }
.sp-book-stat--remaining.sp-book-stat--negative{ border-color: rgba(227,93,93,.4); background: rgba(227,93,93,.08); }
.sp-book-stat--remaining.sp-book-stat--negative .sp-book-stat__num{ color:#e35d5d; }

.sp-section-title{ font-size:15px; font-weight:800; color: var(--text-paper); margin:0 0 12px; }
.sp-topbar--student{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:14px;
}
.sp-topbar--student .sp-section-title{ margin:0; }
.sp-course-connection{
  display:inline-block;
  margin-top:6px;
  font-size:12px;
  color: var(--accent-mint);
  background: rgba(69,230,165,.1);
  border-radius:999px;
  padding:4px 10px;
}

/* ---------- مودالِ ثبتِ برنامه ---------- */
.sp-modal-overlay{
  position:fixed; inset:0;
  background: rgba(5,6,20,.65);
  backdrop-filter: blur(3px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:200;
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
}
.sp-modal-overlay.is-open{ opacity:1; pointer-events:auto; }
/* ⭐ مودالِ «تمام‌صفحه» (گزارشِ هفتگی) دیگه هیچ حاشیه‌ای از صفحه نمی‌گیره -
   کاملاً رویِ کلِ صفحه می‌شینه (نه رویِ یه چیزِ دیگه) تا پشتش هیچی دیده/
   اسکرول نشه. */
.sp-modal-overlay:has(.sp-modal-box--full){ padding:0; }
.sp-modal-box{
  position:relative;
  width:100%;
  max-width:520px;
  max-height:88vh;
  overflow-y:auto;
  background: var(--bg-night-2);
  border:1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding:26px 24px 24px;
}
/* مرورِ آزمون به فضایِ بیشتری نیاز داره: متنِ سؤال، شکل، گزینه‌ها... */
.sp-modal-box--wide{
  max-width:980px;
  max-height:92vh;
  padding:30px 34px 30px;
}
@media (max-width: 1040px){ .sp-modal-box--wide{ max-width:94vw; padding:24px 20px; } }
/* ⭐ «گزارشِ هفتگی» می‌تونه با اسمِ همه‌ی درس‌ها + همه‌ی ردیف‌هایِ نوعِ
   فعالیت خیلی بلند بشه؛ برایِ همین تقریباً تمامِ صفحه رو می‌گیره - سر و
   نوارِ فیلتر ثابت می‌مونن، فقط خودِ جدول اسکرول می‌خوره. حداکثرِ ابعادِ
   ممکن رو می‌گیره و سربرگ خیلی جمع‌وجوره تا فضایِ خالیِ بالا هدر نره. */
.sp-modal-box--full{
  width:100vw;
  max-width:100vw;
  height:100vh;
  max-height:100vh;
  /* dvh رو هم می‌دیم تا رویِ موبایل، با ظاهر/پنهان‌شدنِ نوارهایِ آدرس/
     کیبوردِ مرورگر، ارتفاعِ واقعیِ دیدِ صفحه رو بگیره، نه ارتفاعِ اسمیِ
     100vh که باعثِ می‌شد پایینِ صفحه بریزه بیرون. */
  height:100dvh;
  max-height:100dvh;
  border-radius:0;
  margin:0;
  padding:14px 22px 16px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.sp-modal-box--full .sp-modal-head{ flex:0 0 auto; padding-top:4px; margin-bottom:8px; }
.sp-modal-box--full .sp-modal-head__title{ font-size:18px; }
.sp-modal-box--full .sp-modal-head__kicker{ font-size:11.5px; }
.sp-modal-box--full .sp-wr-filters{ flex:0 0 auto; margin:8px 0 10px; }
/* ⭐ فقط خودِ جدول (.sp-wr-tablewrap) اسکرول می‌خوره، نه کلِ بدنه‌ی مودال؛
   وگرنه چون .sp-wr-tablewrap خودش یه لایه‌ی overflow-x جدا داشت،
   position:sticky (سرستون‌ها و ستون‌هایِ راستِ جدول) نسبت به همون لایه
   محاسبه می‌شد و موقعِ اسکرولِ عمودیِ بیرونی اصلاً چسبیده نمی‌موند. */
.sp-modal-box--full #spWeeklyReportBody{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  /* ⭐ هر بار جدول (مثلاً با فوکوسِ روز) دوباره ساخته می‌شه، به‌جایِ یه
     تعویضِ خشکِ ناگهانی (که حسِ «رفرش‌شدنِ صفحه» می‌ده)، یه محوشدنِ خیلی
     کوتاه انجام می‌شه - ر.ک. renderWeeklyReportTable که کلاسِ
     «sp-wr-body--fading» رو موقعِ بازسازی موقتاً اضافه می‌کنه. */
  transition: opacity .14s ease;
}
.sp-modal-box--full #spWeeklyReportBody.sp-wr-body--fading{ opacity:.35; }
@media (max-width: 780px){
  .sp-modal-box--full{ padding:14px 12px 14px; }
}
/* ---------- مودالِ گفتگو (بدونِ سرِ ثابتِ کارت) - برایِ «پیام به
   ادمین» تویِ داشبوردِ دانش‌آموز و «پیام به دانش‌آموز» تویِ صفحه‌ی
   برنامه؛ خودِ .plan-chat با flex:1 تمامِ ارتفاعِ باقی‌مانده رو پر
   می‌کنه و فقط لیستِ پیام‌ها اسکرول می‌شه. ---------- */
.sp-modal-box--chat{
  display:flex;
  flex-direction:column;
  height:74vh;
  max-height:640px;
  overflow:hidden;
}
.sp-modal-box--chat .plan-chat{ margin-top:8px; }
/* تویِ مرورِ آزمون، کارتِ هر سؤال از تمامِ عرضِ مودالِ بزرگ استفاده کنه، نه عرضِ محدودِ حالتِ تمرین */
.sp-modal-box--wide .practice-card{ max-width:none; margin:0 0 16px; padding:22px 24px; }
.sp-modal-box--wide .practice-choices{ display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; }
@media (max-width: 640px){ .sp-modal-box--wide .practice-choices{ grid-template-columns:1fr; } }

/* ---------- بزرگ‌نماییِ کارتِ برنامه، وسطِ صفحه (کلیک رویِ خودِ کارت) ----------
   ⭐ این مودال قبلاً عرضِ خودش (max-width:360px) رو داشت که باعث می‌شد
   باریک‌تر از بقیه‌ی مودال‌ها (مثلِ «ثبتِ انجام‌شدن») به نظر برسه؛ الان
   همون عرضِ پیش‌فرضِ استانداردِ .sp-modal-box (۵۲۰px) رو داره تا با
   بقیه‌ی مودال‌ها یکسان بمونه. */
.sp-card-expand-box{
  padding:34px 22px 26px;
  display:flex;
  flex-direction:column;
  align-items:center;
  animation: sp-card-expand-in .28s var(--ease-pop);
  /* ⭐ عکس/کارتِ برنامه بالایِ مودال ثابت بمونه و فقط بخشِ گفتگو زیرش
     اسکرول بشه - به‌جایِ اینکه کلِ مودال (عکس + پیام‌ها) با هم اسکرول
     بخوره. برایِ همین دیگه خودِ این جعبه اسکرول نمی‌شه (overflow:hidden)
     و ارتفاعش رو تویِ فلکس بین سرِ ثابت و ناحیه‌ی گفتگو تقسیم می‌کنه. */
  max-height:88vh;
  overflow:hidden;
}
@keyframes sp-card-expand-in{
  from{ opacity:0; transform: scale(.88); }
  to{ opacity:1; transform: scale(1); }
}
/* سرِ ثابتِ مودال (عکس/کارتِ برنامه): هیچ‌وقت اسکرول نمی‌شه و همیشه
   بالایِ گفتگو پیداست. */
.sp-card-expand-head{
  width:100%;
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.sp-card-expand-inner{ width:100%; display:flex; justify-content:center; }
/* تویِ حالتِ بزرگ‌شده، کارت باید کاملِ کامل خونده بشه - نه بریده‌شده با «…» */
.sp-plan-card--expanded{
  width:100%;
  max-width:280px;
  cursor:default;
  font-size:14px;
}
.sp-plan-card--expanded:hover{ transform:none; }
.sp-plan-card--expanded .sp-plan-card__course{
  -webkit-line-clamp:unset;
  min-height:0;
  font-size:17px;
}
.sp-plan-card--expanded .sp-plan-card__meta{
  white-space:normal;
  text-overflow:clip;
  line-height:1.6;
}
.sp-plan-card--expanded .sp-plan-card__chip,
.sp-plan-card--expanded .sp-plan-card__psl,
.sp-plan-card--expanded .sp-plan-card__tag{
  max-width:none;
  white-space:normal;
  text-overflow:clip;
}

/* ---------- خلاصه‌ی وضعیتِ ثبتِ قبلی (کارتِ بزرگ‌شده، دانش‌آموز) ---------- */
.plan-done-summary{
  width:100%;
  margin-top:16px;
  padding:14px 16px;
  border-radius:16px;
  background: rgba(69,230,165,.06);
  border:1px solid rgba(69,230,165,.22);
}
.plan-done-summary__title{
  margin:0 0 8px;
  font-size:13px;
  font-weight:800;
  color: var(--accent-mint);
}
.plan-done-summary__rows{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}
.plan-done-summary__row{
  font-size:12px;
  color: var(--text-muted);
  background: rgba(var(--ink),.05);
  border-radius:999px;
  padding:4px 10px;
}
.plan-done-summary__actions{
  display:flex;
  gap:8px;
}
.plan-done-summary__actions .btn-ghost{
  flex:1;
  font-size:12px;
  padding:8px 10px;
}
.plan-done-summary__undo:hover{ border-color:#e35d5d; color:#e35d5d; background: rgba(227,93,93,.1); }

/* ---------- گفتگویِ نامحدودِ دانش‌آموز/مشاور، متصل به یک برنامه ----------
   ⭐ این بخش، زیرِ سرِ ثابتِ مودال (.sp-card-expand-head)، تمامِ فضایِ
   باقی‌مانده رو پر می‌کنه (flex:1) و خودش تنها بخشیه که اسکرول می‌شه؛
   دکمه‌یِ ارسال همیشه پایینِ همین بخش، بدونِ اسکرول، ثابت می‌مونه. */
.plan-chat{
  width:100%;
  margin-top:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1 1 auto;
  min-height:0; /* برایِ اینکه فرزندِ flex بتونه واقعاً جمع بشه و اسکرول‌بارِ داخلی کار کنه */
}
.plan-chat__title{
  margin:0;
  font-size:13px;
  font-weight:800;
  color: var(--text-paper);
  flex:0 0 auto;
}
.plan-chat__list{
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1 1 auto;
  min-height:120px;
  overflow-y:auto;
  padding-left:4px;
}
.plan-chat__empty{
  margin:0;
  font-size:12.5px;
  color: var(--text-faint);
  text-align:center;
  padding:10px 0;
}
.plan-chat__msg{
  max-width:88%;
  padding:9px 12px;
  border-radius:14px;
  font-size:12.5px;
  line-height:1.7;
  border:1px solid var(--card-border);
  background: rgba(var(--ink),.035);
}
.plan-chat__msg--mine{
  align-self:flex-end;
  background: rgba(139,144,214,.14);
  border-color: rgba(139,144,214,.3);
  border-bottom-left-radius:4px;
}
.plan-chat__msg--theirs{
  align-self:flex-start;
  background: rgba(69,230,165,.08);
  border-color: rgba(69,230,165,.24);
  border-bottom-right-radius:4px;
}
.plan-chat__msg-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:4px;
}
.plan-chat__msg-sender{ font-size:11px; font-weight:800; color: var(--text-paper); }
.plan-chat__msg-date{ font-size:10px; color: var(--text-faint); }
.plan-chat__msg-body{ margin:0; color: var(--text-muted); white-space:pre-wrap; word-break:break-word; }
.plan-chat__msg-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:4px;
}
.plan-chat__edited{ font-size:10px; color: var(--text-faint); }
.plan-chat__msg-actions{ display:flex; gap:6px; margin-right:auto; }
.plan-chat__msg-edit,
.plan-chat__msg-delete{
  border:none;
  background:transparent;
  color: var(--text-faint);
  cursor:pointer;
  font-size:11px;
  padding:0;
  line-height:1;
}
.plan-chat__msg-edit:hover{ color: var(--accent-lav); }
.plan-chat__msg-delete:hover{ color:#e35d5d; }
.plan-chat__compose{
  display:flex;
  gap:8px;
  align-items:flex-end;
  flex:0 0 auto;
}
.plan-chat__compose textarea{
  flex:1;
  resize:none;
  border-radius:12px;
  border:1px solid var(--card-border);
  background: rgba(var(--ink),.04);
  color: var(--text-paper);
  font-family:inherit;
  font-size:12.5px;
  padding:9px 12px;
}
.plan-chat__compose textarea:focus{ outline:none; border-color: var(--accent-lav); }
.plan-chat__send{
  white-space:nowrap;
  font-size:12px;
  padding:9px 14px;
}

/* ---------- تولتیپِ سریع و سفارشی (data-tip) ---------- */
.fast-tip{
  position:fixed;
  z-index:900;
  max-width:260px;
  padding:8px 12px;
  border-radius:10px;
  background: var(--bg-night-2);
  color: var(--text-paper);
  border:1px solid var(--card-border);
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.6);
  font-size:12.5px;
  line-height:1.5;
  font-weight:600;
  pointer-events:none;
  opacity:0;
  transform: translateY(3px);
  transition: opacity .1s ease, transform .1s ease;
}
.fast-tip.is-visible{ opacity:1; transform: translateY(0); }
body .fast-tip{ background:#20244f; color:#fff; }

/* ---------- اسکرول‌بارِ نازک و هم‌رنگِ سایت، به‌جایِ اسکرول‌بارِ خامِ مرورگر ---------- */
/* همینِ استایل رویِ خودِ صفحه هم (اسکرولِ کلیِ مرورگر، نه فقط باکس‌های
   داخلی) اعمال می‌شه - همون نوارِ عجیبی که بالا-چپِ صفحه‌یِ ادمین دیده
   می‌شد، دقیقاً همین اسکرول‌بارِ خامِ مرورگر بود. */
html{
  scrollbar-width: thin;
  scrollbar-color: var(--accent-amber) rgba(var(--ink),.06);
}
html::-webkit-scrollbar{ width:8px; }
html::-webkit-scrollbar-track{ background: rgba(var(--ink),.06); }
html::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--accent-amber), var(--accent-mint));
  border-radius:8px;
}
html::-webkit-scrollbar-thumb:hover{ background: var(--accent-mint); }
/* دکمه‌هایِ ▲/▼ بالا-پایینِ اسکرول‌بار رو مخفی می‌کنیم - همون چیزی که یه
   جعبه‌ی عجیبِ شناور بالا-چپِ صفحه به‌نظر می‌رسید. */
html::-webkit-scrollbar-button{ display:none; height:0; width:0; }

.sp-modal-box,
.checkbox-list,
.course-groups,
.resource-node-list,
.table-scroll,
.pdf-preview-scroll,
.plan-chat__list{
  scrollbar-width: thin;
  scrollbar-color: var(--accent-amber) rgba(var(--ink),.05);
}
.sp-modal-box::-webkit-scrollbar,
.checkbox-list::-webkit-scrollbar,
.course-groups::-webkit-scrollbar,
.resource-node-list::-webkit-scrollbar,
.table-scroll::-webkit-scrollbar,
.pdf-preview-scroll::-webkit-scrollbar,
.plan-chat__list::-webkit-scrollbar{
  width:6px;
  height:6px;
}
.sp-modal-box::-webkit-scrollbar-track,
.checkbox-list::-webkit-scrollbar-track,
.course-groups::-webkit-scrollbar-track,
.resource-node-list::-webkit-scrollbar-track,
.table-scroll::-webkit-scrollbar-track,
.pdf-preview-scroll::-webkit-scrollbar-track,
.plan-chat__list::-webkit-scrollbar-track{
  background: rgba(var(--ink),.05);
  border-radius:8px;
}
.sp-modal-box::-webkit-scrollbar-thumb,
.checkbox-list::-webkit-scrollbar-thumb,
.course-groups::-webkit-scrollbar-thumb,
.resource-node-list::-webkit-scrollbar-thumb,
.table-scroll::-webkit-scrollbar-thumb,
.pdf-preview-scroll::-webkit-scrollbar-thumb,
.plan-chat__list::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--accent-amber), var(--accent-mint));
  border-radius:8px;
}
.sp-modal-box::-webkit-scrollbar-thumb:hover,
.checkbox-list::-webkit-scrollbar-thumb:hover,
.course-groups::-webkit-scrollbar-thumb:hover,
.resource-node-list::-webkit-scrollbar-thumb:hover,
.table-scroll::-webkit-scrollbar-thumb:hover,
.pdf-preview-scroll::-webkit-scrollbar-thumb:hover,
.plan-chat__list::-webkit-scrollbar-thumb:hover{
  background: var(--accent-mint);
}
.sp-modal-box::-webkit-scrollbar-button,
.checkbox-list::-webkit-scrollbar-button,
.course-groups::-webkit-scrollbar-button,
.resource-node-list::-webkit-scrollbar-button,
.table-scroll::-webkit-scrollbar-button,
.pdf-preview-scroll::-webkit-scrollbar-button,
.plan-chat__list::-webkit-scrollbar-button{
  display:none; height:0; width:0;
}

.sp-modal-close{
  position:absolute;
  top:16px; left:16px;
  width:30px; height:30px;
  border-radius:50%;
  border:1px solid var(--card-border);
  background: rgba(var(--ink),.04);
  color: var(--text-paper);
  cursor:pointer;
  font-size:14px;
  z-index:5; /* بالاترِ اسکرول‌بار، چون تویِ سندِ RTL اسکرول‌بارِ overflow دقیقاً همین گوشه رو اشغال می‌کرد و کلیک رو قاپ می‌زد */
}
.sp-modal-head{ margin-bottom:18px; padding-top:30px; text-align:center; position:relative; }
.sp-modal-head__chip{
  position:absolute;
  top:0; right:0;
  display:inline-flex;
  align-items:center;
  gap:4px;
  background: linear-gradient(135deg, var(--accent-amber), var(--accent-lav));
  color:#0F1130;
  font-weight:800;
  font-size:12px;
  padding:6px 14px;
  border-radius:999px;
  box-shadow: 0 4px 14px rgba(255,180,84,.3);
}
.sp-modal-head__title{ margin:0 0 4px; font-size:21px; color: var(--text-paper); text-align:center; }
.sp-modal-head__kicker{ margin:0; font-size:12.5px; color: var(--text-muted); text-align:center; }

@media (max-width: 860px){
  .sp-day-row{ flex-direction:column; align-items:stretch; gap:10px; }
  .sp-day-row__label{ flex-direction:row; justify-content:center; gap:10px; width:100%; padding:10px 12px; }
  .sp-day-row__badge{ margin-bottom:0; }
  .sp-day-row__name, .sp-day-row__date, .sp-day-row__total{ margin:0; }
  .sp-day-row__body{ width:100%; }
  .sp-day-row__cards{ width:100%; }
  .sp-day-col__add{ width:64px; }
  .sp-week-stats{ padding:12px 14px; }
  .sp-week-progress{ order:10; width:100%; flex-basis:100%; }
}

/* ---------- مودالِ تاییدِ خروج ----------
   قبلاً کلیکِ روی «خروج» بی‌درنگ خارج می‌کرد؛ الان اول یک
   مودالِ کوچیکِ تاییدیه نشون می‌ده (همون قالبِ sp-modal-overlay/
   sp-modal-box که تویِ بقیه‌ی صفحات هست). */
.logout-confirm-box{
  max-width:360px;
  text-align:center;
  padding:38px 26px 26px;
}
.logout-confirm__icon{
  width:56px; height:56px;
  margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center;
  font-size:24px;
  border-radius:50%;
  background: linear-gradient(135deg, rgba(225,29,72,.16), rgba(217,119,6,.16));
  box-shadow: 0 12px 26px -12px rgba(225,29,72,.45);
}
.logout-confirm__title{
  margin:0 0 8px;
  font-size:18.5px;
  font-weight:800;
  color: var(--text-paper);
}
.logout-confirm__text{
  margin:0 0 24px;
  font-size:13px;
  line-height:1.9;
  color: var(--text-muted);
}
.logout-confirm__actions{ display:flex; gap:10px; }
.logout-confirm__actions .btn-ghost{ flex:1; }
.btn-logout-confirm{
  flex:1;
  padding:12px 14px;
  font-family:inherit;
  font-size:13.5px;
  font-weight:700;
  color:#fff;
  background: linear-gradient(95deg, var(--accent-warn-red), #fb7185 55%, #f43f5e);
  background-size:170% 100%;
  background-position:0% 0%;
  border:none;
  border-radius: var(--radius-field);
  cursor:pointer;
  transition: background-position .45s ease, transform .15s ease, box-shadow .3s ease;
  box-shadow: 0 14px 28px -12px rgba(225,29,72,.55);
}
.btn-logout-confirm:hover{ background-position:100% 0%; transform: translateY(-1px); }
.btn-logout-confirm:active{ transform: scale(.98); }
.btn-logout-confirm:disabled{ cursor:default; opacity:.75; transform:none; }

/* ===========================================================
   ⭐ ریزتنظیماتِ تکمیلیِ تمِ روشن (اول برایِ صفحه‌ی «برنامه‌ی
   مطالعاتی» نوشته شده بود، حالا سراسریه و رویِ کلِ سایت اعمال
   می‌شه، چون :root دیگه خودش روشنه). رنگ‌هایِ پایه از :root میان؛
   این‌جا فقط دقتِ بصریِ کامپوننت‌هایِ خاص تنظیم می‌شه.
   =========================================================== */

/* --- وینیتِ پس‌زمینه: به‌جایِ تیره‌کردنِ لبه‌ها، یه سایه‌ی نرمِ بنفش --- */
body .scene__vignette{
  background: radial-gradient(60% 55% at 50% 48%, transparent 0%, rgba(120,120,220,.10) 78%, rgba(120,120,220,.16) 100%);
}

/* --- عنوانِ صفحه: گرادیانِ متنیِ تیره به‌جایِ سفید (رویِ زمینه‌ی روشن دیده نمی‌شد) --- */
body .modal__title{
  background: linear-gradient(180deg, #2A2C6B 0%, #4B46B8 55%, #6C63FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 20px rgba(108,99,255,.18);
}

/* --- دکمه‌ی خروج / دکمه‌های ghost --- */
body .btn-logout{ background: rgba(var(--ink),.05); }
body .btn-logout:hover{ border-color: rgba(var(--ink),.3); }
body .btn-ghost{ background: rgba(var(--ink),.05); }
body .btn-ghost:hover{ border-color: rgba(var(--ink),.3); }

/* --- نوارِ بالا: انتخابِ دانش‌آموز + ناوبریِ هفته --- */
body .sp-student-picker select{
  background: rgba(var(--ink),.07);
  color: var(--text-paper);
}
body .sp-student-picker select:hover,
body .sp-student-picker select:focus{ background: rgba(108,99,255,.12); }
body .sp-student-picker select option{
  background: var(--bg-night-2);
  color: var(--text-paper);
}
body .sp-week-nav .btn-ghost:hover{ background: rgba(108,99,255,.12); }
body .sp-week-label{ background: rgba(var(--ink),.06); }

/* --- نوارِ آمارِ هفته --- */
body .sp-week-stat{ background: rgba(var(--ink),.05); }
body .sp-week-stat--done{ background: rgba(5,150,105,.08); border-color: rgba(5,150,105,.3); }
body .sp-week-progress__track{ background: rgba(var(--ink),.12); }
body #spNoStudentHint{ border-color: rgba(var(--ink),.25); }

/* --- ردیف‌هایِ روزهایِ هفته --- */
body .sp-day-row:hover{
  border-color: rgba(var(--ink),.3);
  box-shadow: 0 18px 36px -26px rgba(76,70,190,.35);
}
body .sp-day-row__label{
  background: linear-gradient(160deg, rgba(var(--ink),.06), rgba(var(--ink),.015));
}
body .sp-day-row--today{
  background: linear-gradient(160deg, rgba(5,150,105,.09), rgba(5,150,105,.02));
  box-shadow: 0 0 0 1px rgba(5,150,105,.35), 0 20px 44px -26px rgba(5,150,105,.25);
}
body .sp-day-row--today .sp-day-row__label{
  background: linear-gradient(160deg, rgba(5,150,105,.16), rgba(5,150,105,.03));
  border-color: rgba(5,150,105,.4);
}
body .sp-day-row--today::before{ box-shadow: 0 0 14px 1px rgba(5,150,105,.55); }
body .sp-day-row--today .sp-day-row__badge{ box-shadow: 0 0 16px -2px rgba(5,150,105,.6); }
body .sp-day-row__progress-track{ background: rgba(var(--ink),.12); }
body .sp-day-col__add{
  border-color: rgba(var(--ink),.25);
  background: rgba(var(--ink),.03);
}
body .sp-day-row__cards{ scrollbar-color: rgba(var(--ink),.25) transparent; }
body .sp-day-row__cards::-webkit-scrollbar-thumb{ background: rgba(var(--ink),.22); }
body .sp-day-row__cards::-webkit-scrollbar-thumb:hover{ background: rgba(var(--ink),.38); }
body .sp-day-row__fixed{ scrollbar-color: rgba(var(--ink),.25) transparent; }
body .sp-day-row__fixed::-webkit-scrollbar-thumb{ background: rgba(var(--ink),.22); }
body .sp-day-row__fixed::-webkit-scrollbar-thumb:hover{ background: rgba(var(--ink),.38); }
body .sp-day-row__total{ background: rgba(217,119,6,.12); border-color: rgba(217,119,6,.24); }

/* --- کارتِ برنامه --- */
body .sp-plan-card{
  /* ⭐ دیگه سفیدِ خالص نیست - یک تُنِ ملایمِ کمی تیره‌تر + هاله‌یِ رنگیِ
     قوی‌ترِ آیکون که تا پایینِ کارت هم کمی کشیده می‌شه. */
  background:
    radial-gradient(230px 190px at 50% -12%, color-mix(in srgb, var(--card-accent) 38%, transparent), transparent 70%),
    radial-gradient(120px 90px at 50% 4%, color-mix(in srgb, var(--card-accent) 46%, transparent), transparent 75%),
    linear-gradient(180deg, color-mix(in srgb, var(--card-accent) 10%, transparent) 0%, transparent 46%),
    linear-gradient(165deg, #F2EFFB 0%, #E7E2F5 100%);
  border: 2px solid color-mix(in srgb, var(--card-accent) 45%, transparent);
  box-shadow:
    0 10px 20px -16px rgba(60,55,150,.18),
    0 0 0 3px color-mix(in srgb, var(--card-accent) 12%, transparent),
    0 0 18px -10px color-mix(in srgb, var(--card-accent) 45%, transparent);
}
body .sp-plan-card:hover{
  border-color: color-mix(in srgb, var(--card-accent) 70%, transparent);
  box-shadow:
    0 14px 24px -16px rgba(60,55,150,.22),
    0 0 0 4px color-mix(in srgb, var(--card-accent) 16%, transparent),
    0 0 28px -8px color-mix(in srgb, var(--card-accent) 55%, transparent);
}
body .sp-plan-card__delete{ background: rgba(var(--ink),.07); }
body .sp-plan-card__edit{ background: linear-gradient(145deg, rgba(108,99,255,.9), rgba(108,99,255,.98)); border-color:#ffffff; color:#fff; }
body .sp-plan-card__edit:hover{ background: linear-gradient(145deg, #6C63FF, #8b7bff); border-color:#ffffff; color:#fff; }
body .sp-plan-card__chat{ background: rgba(var(--ink),.07); }
body .sp-plan-card__chat:hover{ background: rgba(2,132,199,.18); color:#0284C7; }
body .sp-plan-card__mail{ color:#fff; box-shadow: 0 6px 14px -6px rgba(217,119,6,.5), 0 0 0 2px var(--bg-night); }
body .sp-plan-card__icon-badge--img{
  filter:
    drop-shadow(0 6px 8px rgba(60,55,150,.16))
    drop-shadow(0 0 28px color-mix(in srgb, var(--card-accent) 70%, transparent))
    drop-shadow(0 0 56px color-mix(in srgb, var(--card-accent) 42%, transparent));
}
body .sp-plan-card__type-pill{
  border-color:#ffffff;
  box-shadow: 0 6px 14px -6px rgba(60,55,150,.25);
}
body .sp-plan-card__duration-ring-badge{ box-shadow: 0 4px 10px -4px rgba(60,55,150,.3), 0 0 0 3px #ffffff; }
body .plan-done-summary{ background: rgba(5,150,105,.07); border-color: rgba(5,150,105,.22); }
body .plan-chat__msg{ background: rgba(var(--ink),.035); }
body .plan-chat__msg--mine{ background: rgba(108,99,255,.1); border-color: rgba(108,99,255,.25); }
body .plan-chat__msg--theirs{ background: rgba(5,150,105,.07); border-color: rgba(5,150,105,.22); }
body .plan-chat__compose textarea{ background: rgba(var(--ink),.04); border-color: rgba(var(--ink),.14); color: var(--text-paper); }
body .sp-plan-card__done-badge{ border-color:#ffffff; }
body .sp-plan-card__done-badge--extra{ border-color:#0ea5e9; background:#ffffff; }
body .sp-plan-card__done-badge--warn{ border-color: var(--accent-warn-amber); background:#ffffff; }
body .sp-plan-card__done-badge--zero{ border-color: var(--accent-warn-red); background:#ffffff; }
body .sp-plan-card__done-toggle{ background:#ffffff; border-color: rgba(var(--ink),.28); }
body .sp-plan-card__done-toggle:has(input:checked){ background: var(--accent-mint); border-color: var(--accent-mint); }
body .sp-plan-card__done-toggle--extra:has(input:checked){ background:#ffffff; border-color:#0ea5e9; }
body .sp-plan-card__done-toggle--warn:has(input:checked){ background:#ffffff; border-color: var(--accent-warn-amber); }
body .sp-plan-card__done-toggle--zero:has(input:checked){ background:#ffffff; border-color: var(--accent-warn-red); }
body .sp-plan-card__chip{
  background: rgba(var(--ink),.06);
  border-color: rgba(var(--ink),.1);
}
body .sp-plan-card__psl{
  background: rgba(5,150,105,.1);
  border-color: rgba(5,150,105,.22);
}
body .sp-plan-card__tag{
  background: rgba(217,119,6,.1);
  border-color: rgba(217,119,6,.24);
}

/* --- بخش‌بندیِ فرم / لیست‌هایِ تیک‌خور (تویِ مودالِ ثبتِ برنامه) --- */
body .sp-form-section{ background: rgba(var(--ink),.035); }
body .sp-form-section--dynamic{ background: rgba(108,99,255,.06); }
body .checkbox-item{ background: rgba(var(--ink),.035); }
body .checkbox-item:hover{ border-color: rgba(var(--ink),.28); }
body .checkbox-item:has(input:checked){ background: rgba(5,150,105,.08); }
body .checkbox-chip{ background: rgba(var(--ink),.045); }
body .checkbox-chip:has(input:checked){ background: rgba(5,150,105,.1); }

body .field input,
body .field select,
body .field textarea{
  background: rgba(var(--ink),.045);
  border-color: rgba(var(--ink),.14);
}
body .field input:hover,
body .field select:hover,
body .field textarea:hover{ border-color: rgba(var(--ink),.24); }
body .field select option{ background: var(--bg-night-2); color: var(--text-paper); }

body .sp-course-search{ background: rgba(var(--ink),.05); }
body .sp-course-combo .sp-course-search{ border-color: rgba(var(--ink),.14); background: rgba(var(--ink),.04); }
body .sp-course-dropdown{ border-color: rgba(var(--ink),.12); box-shadow: 0 20px 44px -12px rgba(60,55,150,.28); }
body .sp-course-dropdown__item{ color: var(--text-paper); }
body .sp-course-dropdown__item:hover,
body .sp-course-dropdown__item:focus-visible{
  background: linear-gradient(95deg, rgba(5,150,105,.14), rgba(217,119,6,.1));
}
body .sp-course-dropdown__item.is-selected{
  background: linear-gradient(95deg, rgba(5,150,105,.2), rgba(5,150,105,.1));
}

body .sp-delivery-option{ background: rgba(var(--ink),.035); }
body .sp-delivery-option:has(input:checked){ background: rgba(5,150,105,.08); }

body .sp-bank-count,
body .sp-book-stat{ background: rgba(var(--ink),.035); }
body .sp-bank-count input[type="number"]{ background: rgba(var(--ink),.05); }
body .sp-book-stat--used{ background: rgba(217,119,6,.08); border-color: rgba(217,119,6,.28); }
body .sp-book-stat--remaining{ background: rgba(5,150,105,.08); border-color: rgba(5,150,105,.28); }

body .sp-course-connection{ background: rgba(5,150,105,.1); }

/* --- مودال‌ها (ثبتِ برنامه / مرورِ آزمون) --- */
body .sp-modal-overlay{ background: rgba(40,38,90,.38); }
body .sp-modal-close{ background: rgba(var(--ink),.06); }
body .sp-modal-head__chip{ box-shadow: 0 4px 14px rgba(217,119,6,.25); }

body .sp-modal-box::-webkit-scrollbar-track,
body .checkbox-list::-webkit-scrollbar-track{ background: rgba(var(--ink),.06); }
body .sp-modal-box::-webkit-scrollbar-thumb,
body .checkbox-list::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, var(--accent-amber), var(--accent-mint)); }

/* --- مرورِ آزمون (کارتِ سؤال/گزینه‌ها داخلِ مودالِ مرور) --- */
body .practice-answer-box{ background: rgba(var(--ink),.04); }
body .practice-choice.is-selected{ background: rgba(217,119,6,.08); }
body .practice-choice.is-correct{ background: rgba(5,150,105,.1); }
body .plan-score-banner{ background: rgba(5,150,105,.08); border-color: rgba(5,150,105,.28); }

/* --- اسکرول‌بارِ کلیِ صفحه، هماهنگ با تمِ روشن --- */
html{ scrollbar-color: var(--accent-amber) rgba(var(--ink),.08); }
html::-webkit-scrollbar-track{ background: rgba(var(--ink),.06); }
/* ===========================================================
   ⭐ برنامه‌ی هفتگیِ زنگ‌ها (weekly-schedule.html)
   نوارِ پیش‌نمایشِ جذاب و مینیمال - دقیقاً بالایِ جایی که هر روز
   ثبت می‌شه؛ روزهایِ خالی (مثلاً پنج‌شنبه/جمعه) با یک ضربدرِ ظریف.
   =========================================================== */
.wp-preview-row{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:10px;
  margin: 4px 0 22px;
}
.wp-preview-day{
  --day-accent: var(--day-1);
  background: var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:18px;
  padding:14px 8px 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
  transition: transform .25s var(--ease-pop), box-shadow .25s ease, border-color .25s ease;
  animation: wp-day-in .5s var(--ease-pop) backwards;
  animation-delay: calc(var(--i) * 55ms);
}
.wp-preview-day:nth-child(1){ --day-accent: var(--day-1); }
.wp-preview-day:nth-child(2){ --day-accent: var(--day-2); }
.wp-preview-day:nth-child(3){ --day-accent: var(--day-3); }
.wp-preview-day:nth-child(4){ --day-accent: var(--day-4); }
.wp-preview-day:nth-child(5){ --day-accent: var(--day-5); }
.wp-preview-day:nth-child(6){ --day-accent: var(--day-6); }
.wp-preview-day:nth-child(7){ --day-accent: var(--day-7); }
@keyframes wp-day-in{ from{ opacity:0; transform: translateY(8px) scale(.96); } to{ opacity:1; transform:none; } }
.wp-preview-day:hover{
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--day-accent) 45%, transparent);
  box-shadow: 0 16px 30px -18px color-mix(in srgb, var(--day-accent) 60%, transparent);
}
.wp-preview-day__name{
  margin:0;
  width:26px; height:26px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:900;
  color:#fff;
  background: var(--day-accent);
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--day-accent) 70%, transparent);
}
.wp-preview-day__dots{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:3px;
  min-height:24px;
}
.wp-preview-dot{
  font-size:14px;
  line-height:1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.12));
  cursor:default;
}
.wp-preview-day__sub{
  margin:0;
  font-size:10.5px;
  font-weight:700;
  color: var(--text-muted);
}
.wp-preview-day__x{
  width:26px; height:26px;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:900;
  color: var(--text-faint);
  border:1.5px dashed var(--card-border);
  border-radius:50%;
  animation: wp-x-pulse 3.2s ease-in-out infinite;
}
@keyframes wp-x-pulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
.wp-preview-day--empty{ opacity:.85; }
.wp-preview-day--empty:hover{ opacity:1; }

@media (max-width: 720px){
  .wp-preview-row{ grid-template-columns: repeat(7, minmax(0,1fr)); gap:6px; }
  .wp-preview-day{ padding:10px 4px 8px; border-radius:14px; }
  .wp-preview-day__sub{ font-size:9px; }
}

/* --- کارتِ زنگ (چیپِ کوچیک، شبیهِ sp-plan-card ولی ساده‌تر) --- */
.wp-chip.sp-plan-card{ padding-top:34px; padding-bottom:14px; }
.wp-chip .sp-plan-card__meta{ margin-top:6px; }

/* --- ردیفِ افزودنِ نوعِ زنگِ جدید داخلِ مودال --- */
.wp-add-type-row{ margin-top:10px; }
.wp-add-type-box{
  display:flex;
  gap:8px;
  margin-top:10px;
  flex-wrap:wrap;
}
.wp-add-type-box input[type="text"]{
  flex:1;
  min-width:100px;
  background: var(--card-bg);
  border:1px solid var(--card-border);
  border-radius: var(--radius-field);
  padding:10px 12px;
  color: var(--text-paper);
  font-family:"Vazirmatn", Tahoma, sans-serif;
  font-size:14px;
}
.wp-add-type-box input#wpNewTypeIcon{ flex:0 0 64px; text-align:center; }

/* ===========================================================
   ⭐ انتخاب‌گرِ ساعتِ فارسی (به‌جایِ input[type=time] بومی) +
   نمایشِ زمانِ زنگ همیشه چپ‌به‌راست (بدونِ جابه‌جاییِ بی‌دلیلِ اعداد
   به‌خاطرِ جهتِ RTL) + چیدمانِ کارتِ زنگ با ساعت پایینِ کارت.
   =========================================================== */
.wp-time-select{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  background: var(--card-bg);
  border:1px solid var(--card-border);
  border-radius: var(--radius-field);
  padding:4px 8px;
  direction: ltr;
}
.field .wp-time-select select,
.field .wp-time-select select:hover,
.field .wp-time-select select:focus{
  width:auto;
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  color: var(--text-paper);
  font-family:"Vazirmatn", Tahoma, sans-serif;
  font-size:16px;
  font-weight:800;
  text-align:center;
  padding:8px 2px;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}
.field .wp-time-select select:focus{ color: var(--accent-mint); }
.wp-time-select select option{ background: var(--bg-night-2); color: var(--text-paper); direction:ltr; }
.wp-time-select__colon{ font-weight:900; color: var(--text-faint); }

/* ---------- دراپ‌داونِ سفارشیِ ساعت/دقیقه (به‌جایِ لیستِ بلند و خامِ
   دراپ‌داونِ بومیِ مرورگر) - پنلی با ارتفاعِ ثابت و معقول که خودش
   اسکرول می‌خوره، دقیقاً زیرِ فیلد باز می‌شه، و با تمِ سایت هماهنگه. ---------- */
.wp-cselect{ position:relative; display:inline-flex; }
.wp-cselect__native{
  /* سلکتِ اصلی فقط برایِ نگه‌داشتنِ مقدار زنده می‌مونه؛ دیده نمی‌شه */
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:0; border:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  pointer-events:none;
}
.wp-cselect__trigger{
  appearance:none;
  -webkit-appearance:none;
  border:none;
  background:transparent;
  color: var(--text-paper);
  font-family:"Vazirmatn", Tahoma, sans-serif;
  font-size:16px;
  font-weight:800;
  text-align:center;
  min-width:34px;
  padding:8px 6px;
  border-radius:10px;
  cursor:pointer;
  direction:ltr;
  transition: background .15s ease, color .15s ease;
}
.wp-cselect__trigger:hover{ background: rgba(var(--ink),.06); }
.wp-cselect__trigger:focus-visible{ outline:2px solid var(--accent-mint); outline-offset:2px; }
.wp-cselect__trigger.is-open{ background: rgba(69,230,165,.12); color: var(--accent-mint); }

.wp-cselect__panel{
  position:fixed;
  z-index:400; /* بالاترِ مودال (z-index:200) تا هیچ‌وقت زیرش گم نشه */
  min-width:88px;
  max-height:224px; /* ⭐ ارتفاعِ ثابت و معقول - دیگه سیخ نمی‌شه */
  overflow-y:auto;
  overscroll-behavior: contain;
  background: var(--bg-night-2);
  border:1px solid var(--card-border);
  border-radius:14px;
  box-shadow: 0 20px 50px -12px rgba(5,6,20,.7), 0 0 0 1px rgba(var(--ink),.03) inset;
  padding:6px;
  opacity:0;
  transform: translateY(-6px) scale(.97);
  pointer-events:none;
  transition: opacity .14s ease, transform .14s ease;
  direction:ltr;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-lav) rgba(var(--ink),.04);
}
.wp-cselect__panel.is-open{
  opacity:1;
  transform: translateY(0) scale(1);
  pointer-events:auto;
}
.wp-cselect__panel::-webkit-scrollbar{ width:6px; }
.wp-cselect__panel::-webkit-scrollbar-track{ background: rgba(var(--ink),.03); border-radius:8px; }
.wp-cselect__panel::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--accent-lav), var(--accent-mint));
  border-radius:8px;
}
.wp-cselect__panel::-webkit-scrollbar-button{ display:none; height:0; width:0; }

.wp-cselect__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.wp-cselect__option{
  padding:8px 10px;
  border-radius:9px;
  text-align:center;
  font-family:"Vazirmatn", Tahoma, sans-serif;
  font-size:15px;
  font-weight:700;
  color: var(--text-muted);
  cursor:pointer;
  transition: background .12s ease, color .12s ease;
}
.wp-cselect__option:hover{ background: rgba(var(--ink),.07); color: var(--text-paper); }
.wp-cselect__option.is-selected{
  background: linear-gradient(135deg, rgba(69,230,165,.22), rgba(139,144,214,.16));
  color: var(--accent-mint);
  font-weight:900;
}

/* ---------- تقویمِ شمسیِ سفارشی (jdate) - برایِ «تاریخِ تحویل/پرسش‌وامتحان» تویِ گزارشِ روزانه ---------- */
.jdate{ position:relative; display:block; }
.jdate__trigger{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  background: rgba(var(--ink),0.03);
  border:1px solid rgba(var(--ink),0.12);
  color: var(--text-faint);
  font-family:"Vazirmatn", Tahoma, sans-serif;
  font-size:14.5px;
  font-weight:700;
  text-align:right;
  padding:12px 14px;
  border-radius:12px;
  cursor:pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.jdate__trigger:hover{ border-color: rgba(var(--ink),0.22); }
.jdate__trigger.has-value{ color: var(--text-paper); }
.jdate__trigger.is-open{ border-color: var(--accent-mint); box-shadow: 0 0 0 4px rgba(69,230,165,0.14); }
.jdate__trigger-icon{ flex-shrink:0; font-size:15px; opacity:.85; }

.jdate__panel{
  position:fixed;
  z-index:400;
  width:272px;
  background: var(--bg-night-2);
  border:1px solid var(--card-border);
  border-radius:16px;
  box-shadow: 0 24px 56px -14px rgba(5,6,20,.75), 0 0 0 1px rgba(var(--ink),.03) inset;
  padding:12px;
  opacity:0;
  transform: translateY(-6px) scale(.97);
  pointer-events:none;
  transition: opacity .16s ease, transform .16s ease;
}
.jdate__panel.is-open{ opacity:1; transform: translateY(0) scale(1); pointer-events:auto; }

.jdate__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}
.jdate__header-label{
  display:flex;
  align-items:baseline;
  gap:6px;
  font-weight:900;
  color: var(--text-paper);
  font-size:15px;
}
.jdate__header-year{ color: var(--text-muted); font-size:13px; font-weight:700; }
.jdate__nav{
  appearance:none; -webkit-appearance:none; border:none;
  width:30px; height:30px;
  border-radius:50%;
  background: rgba(var(--ink),0.05);
  color: var(--text-paper);
  font-size:13px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background .12s ease, transform .12s ease;
}
.jdate__nav:hover{ background: rgba(69,230,165,.18); transform: scale(1.06); }

.jdate__weekdays{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:2px;
  margin-bottom:4px;
}
.jdate__weekdays span{
  text-align:center;
  font-size:11px;
  font-weight:800;
  color: var(--text-faint);
  padding:4px 0;
}
.jdate__weekdays span.jdate__weekday--holiday{ color: #FF7A8A; }

.jdate__grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:3px;
}
.jdate__cell{ aspect-ratio:1/1; }
.jdate__cell--pad{ visibility:hidden; }
.jdate__cell--day{
  position:relative;
  appearance:none; -webkit-appearance:none; border:none;
  width:100%;
  border-radius:10px;
  background:transparent;
  color: var(--text-paper);
  font-family:"Vazirmatn", Tahoma, sans-serif;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background .12s ease, color .12s ease, transform .12s var(--ease-pop);
}
.jdate__cell--day:hover{ background: rgba(var(--ink),0.08); transform: translateY(-1px); }
.jdate__cell--holiday{ color: #FF8FA8; }
.jdate__cell--today{ box-shadow: inset 0 0 0 1.5px var(--accent-lav); }
.jdate__cell--suggested{
  background: linear-gradient(135deg, rgba(255,180,84,.22), rgba(255,180,84,.08));
  color: var(--accent-amber);
}
.jdate__cell--suggested:hover{ background: linear-gradient(135deg, rgba(255,180,84,.32), rgba(255,180,84,.14)); }
.jdate__dot{
  position:absolute;
  bottom:3px; left:50%;
  transform: translateX(-50%);
  width:4px; height:4px;
  border-radius:50%;
  background: var(--accent-amber);
}
.jdate__cell--selected{
  background: linear-gradient(135deg, var(--accent-mint), #2fbf8a) !important;
  color:#06231a !important;
  font-weight:900;
  box-shadow: 0 6px 14px -4px rgba(69,230,165,.55);
}
.jdate__cell--selected .jdate__dot{ background:#06231a; }

.jdate__footer{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(var(--ink),0.08);
}
.jdate__quick{
  appearance:none; -webkit-appearance:none; border:none;
  flex:1;
  padding:8px 6px;
  border-radius:9px;
  background: rgba(var(--ink),0.05);
  color: var(--text-muted);
  font-family:"Vazirmatn", Tahoma, sans-serif;
  font-size:11.5px;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
  transition: background .12s ease, color .12s ease;
}
.jdate__quick:hover{ background: rgba(var(--ink),0.1); color: var(--text-paper); }
.jdate__quick--suggested{ background: rgba(255,180,84,.14); color: var(--accent-amber); }
.jdate__quick--suggested:hover{ background: rgba(255,180,84,.24); }
.jdate__quick--clear{ flex:0 0 auto; padding-inline:10px; }


.wp-chip__note{
  margin:2px 0 0;
  font-size:12px;
  font-weight:700;
  color: var(--text-muted);
}
.wp-chip__time{
  margin-top:auto;
  padding-top:10px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  font-size:12.5px;
  font-weight:900;
  letter-spacing:.2px;
  color: var(--card-accent);
  border-top:1px dashed var(--card-border);
}
/* ---------------------------------------------------------------
   دکمه‌ی «گزارشِ هفتگی» — کنارِ دکمه‌ی «پیام به دانش‌آموز»، تویِ
   نوارِ بالایِ صفحه‌ی برنامه‌ی مطالعاتی
   --------------------------------------------------------------- */
.btn-ghost--report{
  display:flex;
  align-items:center;
  gap:6px;
  color: var(--accent-lav);
  border-color: rgba(139,144,214,.35);
  background: rgba(139,144,214,.08);
}
.btn-ghost--report:hover{
  color: var(--accent-lav);
  border-color: var(--accent-lav);
  background: rgba(139,144,214,.16);
}
body .btn-ghost--report{ background: rgba(108,99,255,.08); border-color: rgba(108,99,255,.3); }
body .btn-ghost--report:hover{ background: rgba(108,99,255,.14); border-color: var(--accent-lav); }

/* ---------------------------------------------------------------
   گزارشِ هفتگی — متغیرهایِ محلیِ رنگ: هر نوعِ فعالیت یک رنگِ ثابتِ
   خودش رو داره (برایِ چیپِ فیلتر و آیکونِ ردیف)، مستقل از رنگِ
   اختصاصیِ هر درس (courseAccentColor سمتِ جی‌اس).
   --------------------------------------------------------------- */
.sp-modal-box--full{
  --wr-type-study: #0EA5E9;
  --wr-type-test:  #F97316;
  --wr-type-video: #A855F7;
  --wr-type-other: #64748B;
}
#spWeeklyReportModal .sp-modal-head__title{
  background: linear-gradient(90deg, var(--accent-lav), var(--accent-mint) 55%, var(--accent-amber));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight:900;
  letter-spacing:.2px;
}
#spWeeklyReportModal .sp-modal-head__kicker{ font-weight:700; }
.sp-wr-weeknav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:6px;
}
.sp-wr-weeknav .sp-modal-head__kicker{ margin:0; }
.sp-wr-weeknav .btn-ghost{
  border-radius:999px;
  padding:6px 14px;
  font-size:12px;
  white-space:nowrap;
  transition: all .2s var(--ease-pop);
}
.sp-wr-weeknav .btn-ghost:hover{ transform: translateY(-2px); border-color: var(--accent-lav); background: rgba(139,144,214,.14); }
@media (max-width: 640px){
  .sp-wr-weeknav{ flex-wrap:wrap; }
}

/* ---------------------------------------------------------------
   نوارِ فیلترها (درس‌ها + نوعِ فعالیت) — دو کارتِ کرکره‌ایِ کنارِ هم،
   بالایِ جدولِ گزارش. بسته که باشن فقط یک خط باریکن (فضا نمی‌گیرن)،
   با کلیک رویِ سرشون با یه انیمیشنِ نرم باز می‌شن.
   --------------------------------------------------------------- */
.sp-wr-filters{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:10px;
  margin:14px 0 16px;
}
.sp-wr-filterbar{
  --fb-accent: var(--accent-lav);
  flex:1 1 320px;
  min-width:260px;
  border-radius:16px;
  border:1px solid color-mix(in srgb, var(--fb-accent) 22%, var(--card-border));
  background: linear-gradient(165deg, color-mix(in srgb, var(--fb-accent) 7%, transparent), rgba(255,255,255,.5) 55%);
  box-shadow: 0 10px 24px -18px color-mix(in srgb, var(--fb-accent) 50%, transparent);
  overflow:hidden;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.sp-wr-filterbar--type{ --fb-accent: var(--accent-mint); }
.sp-wr-filterbar.is-open{
  box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--fb-accent) 55%, transparent);
}

/* سرِ نوار: همیشه دیده می‌شه، خودش دکمه‌یِ باز/بسته‌کردنه */
.sp-wr-filterbar__top{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:10px 14px;
  margin:0;
  border:none;
  background:none;
  font:inherit;
  color:inherit;
  text-align:inherit;
  cursor:pointer;
  transition: background .15s ease;
}
.sp-wr-filterbar__top:hover{ background: color-mix(in srgb, var(--fb-accent) 6%, transparent); }
.sp-wr-filterbar__top:focus-visible{ outline:2px solid var(--fb-accent); outline-offset:-2px; }
.sp-wr-filterbar__label{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12.5px;
  font-weight:900;
  color: var(--text-paper);
  white-space:nowrap;
}
.sp-wr-filterbar__labelicon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:8px;
  font-size:13px;
  background: color-mix(in srgb, var(--fb-accent) 16%, transparent);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.08));
}
.sp-wr-filterbar__summary{
  margin-inline-start:auto;
  padding:3px 11px;
  border-radius:999px;
  font-size:10.5px;
  font-weight:800;
  color: color-mix(in srgb, var(--fb-accent) 80%, var(--text-paper));
  background: color-mix(in srgb, var(--fb-accent) 15%, rgba(255,255,255,.6));
  border:1px solid color-mix(in srgb, var(--fb-accent) 30%, transparent);
  white-space:nowrap;
}
.sp-wr-filterbar__chevron{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:50%;
  color: var(--fb-accent);
  background: color-mix(in srgb, var(--fb-accent) 12%, transparent);
  font-size:12px;
  line-height:1;
  transition: transform .25s var(--ease-pop);
}
.sp-wr-filterbar.is-open .sp-wr-filterbar__chevron{ transform: rotate(180deg); }

/* بدنه‌یِ کرکره‌ای: بسته = ارتفاعِ صفر (فضا نمی‌گیره)، با گرید-ردیفِ
   0fr→1fr به‌صورتِ نرم باز/بسته می‌شه؛ نیازی به اندازه‌گیریِ ارتفاع با JS نیست */
.sp-wr-filterbar__panel{
  display:grid;
  grid-template-rows: 0fr;
  opacity:0;
  transition: grid-template-rows .3s cubic-bezier(.4,0,.2,1), opacity .22s ease;
}
.sp-wr-filterbar.is-open .sp-wr-filterbar__panel{
  grid-template-rows: 1fr;
  opacity:1;
}
.sp-wr-filterbar__panelinner{
  overflow:hidden;
  min-height:0;
  padding:10px 14px 13px;
  border-top:1px solid color-mix(in srgb, var(--fb-accent) 16%, var(--card-border));
  /* ⭐ خودِ نوار (سرش) پس‌زمینه‌یِ شیشه‌ای/نیمه‌شفاف داره تا شبیهِ کارتِ
     شیشه‌ایِ بقیه‌یِ صفحه بشه؛ ولی بدنه‌ی بازشونده باید کاملاً کدر باشه،
     وگرنه از زیرش (ردیف‌هایِ جدول) دیده می‌شه. برایِ همین این‌جا رنگِ
     پس‌زمینه‌ی خودِ صفحه رو صریح می‌ذاریم، نه این‌که رنگِ نیمه‌شفافِ
     والد (.sp-wr-filterbar) رو به ارث ببره. */
  background: var(--bg-night-2);
}
.sp-wr-filterbar__actions{ display:flex; gap:6px; margin-bottom:9px; }
.sp-wr-filterbar__search{
  flex:1 1 auto;
  min-width:0;
  border:1px solid var(--card-border);
  background: rgba(255,255,255,.7);
  border-radius:999px;
  padding:5px 12px;
  font-size:11px;
  font-family:inherit;
  color: var(--text-paper);
}
.sp-wr-filterbar__search:focus-visible{ outline:2px solid var(--fb-accent); outline-offset:1px; }
.sp-wr-filterbar__btn{
  flex:0 0 auto;
  border:1px solid var(--card-border);
  background: rgba(255,255,255,.6);
  color: var(--text-muted);
  font-size:10.5px;
  font-weight:800;
  padding:4px 10px;
  border-radius:999px;
  cursor:pointer;
  transition: all .15s ease;
}
.sp-wr-filterbar__btn:hover{
  color: var(--fb-accent);
  border-color: var(--fb-accent);
  background: color-mix(in srgb, var(--fb-accent) 10%, transparent);
  transform: translateY(-1px);
}
.sp-wr-filterbar__chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  max-height:190px;
  overflow-y:auto;
  padding-inline-end:2px;
}
.sp-wr-filterbar__chips::-webkit-scrollbar{ width:5px; }
.sp-wr-filterbar__chips::-webkit-scrollbar-thumb{ background: color-mix(in srgb, var(--fb-accent) 35%, transparent); border-radius:999px; }

/* گروهِ چیپ‌هایِ درس، زیرِ سربرگِ پایه‌شون (رنگِ خودِ همون پایه) */
.sp-wr-chipgroup{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; width:100%; }
.sp-wr-chipgroup + .sp-wr-chipgroup{ margin-top:2px; padding-top:6px; border-top:1px dashed var(--card-border); }
.sp-wr-chipgroup__label{
  flex:0 0 auto;
  font-size:10px;
  font-weight:900;
  color: color-mix(in srgb, var(--grade-accent, var(--text-muted)) 75%, var(--text-paper));
  padding:2px 9px;
  border-radius:999px;
  background: color-mix(in srgb, var(--grade-accent, var(--text-muted)) 14%, transparent);
}
.sp-wr-chipgroup__chips{ display:flex; flex-wrap:wrap; gap:6px; }

/* چیپِ تیک‌دارِ فیلتر — هم برایِ درس‌ها هم برایِ نوعِ فعالیت */
.sp-wr-chip{
  --chip-accent: var(--accent-lav);
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:5px 12px;
  border-radius:999px;
  border:1.5px solid color-mix(in srgb, var(--chip-accent) 45%, transparent);
  background: color-mix(in srgb, var(--chip-accent) 14%, rgba(255,255,255,.55));
  color: color-mix(in srgb, var(--chip-accent) 78%, var(--text-paper));
  font-size:11.5px;
  font-weight:800;
  cursor:pointer;
  transition: transform .15s var(--ease-pop), box-shadow .15s ease, opacity .15s ease, background .15s ease;
  white-space:nowrap;
}
.sp-wr-chip:hover{ transform: translateY(-1px) scale(1.02); }
.sp-wr-chip.is-active{
  background: linear-gradient(135deg, var(--chip-accent), color-mix(in srgb, var(--chip-accent) 60%, #fff));
  color:#fff;
  box-shadow: 0 8px 16px -8px color-mix(in srgb, var(--chip-accent) 80%, transparent);
  border-color: transparent;
}
.sp-wr-chip:not(.is-active){
  opacity:.5;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.sp-wr-chip__icon{ font-size:12.5px; }

/* ---------------------------------------------------------------
   جدولِ «گزارشِ هفتگی» — درس × روزهایِ هفته، برنامه در برابرِ انجام‌شده
   --------------------------------------------------------------- */
.sp-wr-tablewrap{
  overflow:auto;
  flex:1 1 auto;
  min-height:0;
  border:1px solid var(--card-border);
  border-radius:18px;
  box-shadow: 0 20px 46px -30px rgba(120,80,30,.4);
  background: rgba(255,255,255,.35);
}
.sp-wr-table{
  width:100%;
  min-width:900px;
  border-collapse:separate;
  border-spacing:0;
  font-size:12.5px;
}
.sp-wr-table thead th{
  position:sticky;
  top:0;
  z-index:2;
  background: linear-gradient(180deg, #F4F5F7, #E9EBEF);
  color: var(--text-muted);
  font-weight:800;
  padding:9px 6px;
  text-align:center;
  border-bottom:1.5px solid var(--card-border);
  border-inline-start:1px solid var(--card-border);
  white-space:nowrap;
}
/* ⭐ ردیفِ اولِ سربرگ (اسمِ روزها) روی top:0 می‌چسبه؛ ردیفِ دوم
   (برنامه/دانش‌آموز) باید درست زیرِ همون بچسبه، نه رویِ همون top:0 -
   وگرنه دو ردیف رویِ هم می‌افتن. ارتفاعِ ردیفِ اول با جاوااسکریپت
   اندازه‌گیری و به‌عنوانِ --sp-wr-headrow1-h به جدول داده می‌شه. */
.sp-wr-table thead tr:nth-child(2) th{
  top: var(--sp-wr-headrow1-h, 46px);
  z-index:1;
}
.sp-wr-daycol{
  font-size:12.5px;
  color: var(--day-accent, var(--text-muted));
  font-weight:900;
  border-top:3px solid var(--day-accent, transparent);
  cursor:pointer;
  transition: background .15s ease;
}
.sp-wr-daycol:hover{ background: color-mix(in srgb, var(--day-accent, var(--accent-lav)) 12%, transparent); }
.sp-wr-daycol.is-focus{
  background: color-mix(in srgb, var(--day-accent, var(--accent-lav)) 20%, transparent);
  box-shadow: inset 0 -3px 0 var(--day-accent, var(--accent-lav));
}
.sp-wr-daycol__date{
  display:block;
  margin-top:2px;
  font-size:10.5px;
  font-weight:600;
  color: var(--text-muted);
  opacity:.8;
}
/* رنگِ هر روزِ هفته - همون طیفِ رنگیِ روزهایِ برنامه‌ی هفتگی */
.sp-wr-table thead tr:first-child th:nth-child(2){ --day-accent: var(--day-1); }
.sp-wr-table thead tr:first-child th:nth-child(3){ --day-accent: var(--day-2); }
.sp-wr-table thead tr:first-child th:nth-child(4){ --day-accent: var(--day-3); }
.sp-wr-table thead tr:first-child th:nth-child(5){ --day-accent: var(--day-4); }
.sp-wr-table thead tr:first-child th:nth-child(6){ --day-accent: var(--day-5); }
.sp-wr-table thead tr:first-child th:nth-child(7){ --day-accent: var(--day-6); }
.sp-wr-table thead tr:first-child th:nth-child(8){ --day-accent: var(--day-7); }
.sp-wr-subcol{ font-size:10.5px; font-weight:700; opacity:.85; }

/* ⭐ ستونِ «جمعِ هفته» - همیشه آخرین ستونِ جدوله (سمتِ چپ‌ترین)؛ با یه
   خطِ جداکننده‌یِ پررنگ‌تر و رنگِ اکسنت از بقیه‌ی روزها جدا می‌شه. */
.sp-wr-weeksum-head{
  color: var(--accent-lav);
  border-inline-start:2px solid var(--card-border) !important;
  background: color-mix(in srgb, var(--accent-lav) 12%, transparent);
}
.sp-wr-subcol--weeksum{
  color: var(--accent-lav);
  border-inline-start:2px solid var(--card-border);
  background: color-mix(in srgb, var(--accent-lav) 8%, transparent);
}
.sp-wr-weeksum-cell{ border-inline-start:2px solid var(--card-border); }
.sp-wr-table tbody td:nth-last-child(2),
.sp-wr-table tbody td:last-child{ border-inline-start-width:2px; }

.sp-wr-course{
  padding:9px 12px;
  font-weight:900;
  color: var(--text-paper);
  background: color-mix(in srgb, var(--wr-course-accent, var(--accent-lav)) 8%, #FBFCFD);
  border-inline-start:3px solid var(--wr-course-accent, var(--accent-lav));
  border-bottom:1px solid var(--card-border);
  vertical-align:middle;
  white-space:nowrap;
}
.sp-wr-course--head{
  background: rgba(var(--ink),0.05);
  color: var(--text-muted);
  text-align:center;
  border-inline-start:none;
}

/* ⭐ ستونِ «دوره» (و سرستونش) همیشه چسبیده به سمتِ راستِ جدول می‌مونه،
   حتی موقعِ اسکرولِ افقیِ روزها. عرضِ دقیقش با جاوااسکریپت
   (applyWeeklyReportStickyOffsets) اندازه‌گیری می‌شه - چون به طولِ
   اسمِ درس‌ها بستگی داره - و به‌عنوانِ فاصله‌ی چسبیدنِ ستونِ بعدی
   («نوعِ فعالیت») به جدول داده می‌شه. */
.sp-wr-table td.sp-wr-course,
.sp-wr-table th.sp-wr-course--head{
  position:sticky;
  right:0;
  z-index:3;
  width:1%;
}
.sp-wr-table thead th.sp-wr-course--head{ z-index:5; }
.sp-wr-table td.sp-wr-type{
  position:sticky;
  right: var(--sp-wr-course-w, 92px);
  z-index:2;
  background: rgba(244,245,247,.96);
}
.sp-wr-row--alt td.sp-wr-type{ background: rgba(234,236,240,.96); }
/* ⭐ سلولِ خالیِ ستونِ «نوعِ فعالیت» تویِ ردیفِ خلاصه‌یِ درس (کنارِ سلولِ
   rowspan‌دارِ اسمِ درس) - رنگش با همون تمِ اکسنتِ درس هماهنگ می‌شه تا با
   سلولِ کناریش یکپارچه دیده بشه، نه یه خانه‌ی سفیدِ جدا. */
.sp-wr-row--coursehead td.sp-wr-type{
  background: color-mix(in srgb, var(--wr-course-accent, var(--accent-lav)) 8%, #FBFCFD);
}
.sp-wr-row--total td.sp-wr-type{
  background: color-mix(in srgb, rgba(124,108,255,.14) 40%, rgba(244,245,247,.96));
}

/* ---------------------------------------------------------------
   ردیفِ سرِ درس (خلاصه) — همیشه دیده می‌شه، با کلیک باز/بسته می‌شه و
   ردیف‌هایِ ریزِ نوعِ فعالیت رو زیرِ خودش نشون/پنهان می‌کنه. برایِ اینکه
   جدول با دوجین درس شلوغ نشه، پیش‌فرض همه بسته‌ان.
   --------------------------------------------------------------- */
.sp-wr-row--coursehead{ cursor:pointer; }
.sp-wr-row--coursehead:hover .sp-wr-course--head-cell,
.sp-wr-row--coursehead:hover td.sp-wr-type{
  background: color-mix(in srgb, var(--wr-course-accent, var(--accent-lav)) 15%, rgba(255,255,255,.55));
}
.sp-wr-course--head-cell{
  font-weight:900;
}
.sp-wr-course-chevron{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  margin-inline-end:5px;
  border-radius:50%;
  background: color-mix(in srgb, var(--wr-course-accent, var(--accent-lav)) 18%, transparent);
  color: var(--wr-course-accent, var(--accent-lav));
  font-size:10px;
  transition: transform .22s var(--ease-pop);
  vertical-align:middle;
}
.sp-wr-row--coursehead.is-open .sp-wr-course-chevron{ transform: rotate(180deg); }

/* ---------------------------------------------------------------
   ردیفِ «جمعِ همه‌یِ دروس» - همیشه اولین ردیفِ جدوله. تا وقتی بسته/
   خلاصه‌ست (کلاسِ is-open نداره)، درست زیرِ سربرگِ جدول ثابت می‌مونه و
   با اسکرولِ عمودیِ درس‌ها جابه‌جا نمی‌شه؛ به‌محضِ باز شدن (نمایشِ
   ردیف‌هایِ نوعِ فعالیت)، برایِ جلوگیری از تداخلِ sticky+rowspan،
   چسبندگیِ عمودی برداشته می‌شه و مثلِ بقیه‌ی ردیف‌ها با اسکرول می‌ره.
   --------------------------------------------------------------- */
.sp-wr-row--grandtotal.sp-wr-row--coursehead:not(.is-open) > td{
  position:sticky;
  top: var(--sp-wr-grandtotal-top, 84px);
  z-index:4;
}
.sp-wr-row--grandtotal.sp-wr-row--coursehead:not(.is-open) td.sp-wr-course,
.sp-wr-row--grandtotal.sp-wr-row--coursehead:not(.is-open) td.sp-wr-type{
  z-index:6;
}
.sp-wr-row--grandtotal.sp-wr-row--coursehead > td{
  border-bottom:2px solid var(--wr-course-accent, var(--accent-lav));
  font-weight:900;
}
.sp-wr-row--grandtotal .sp-wr-course-chevron{ font-weight:900; }
/* ⭐ خانه‌هایِ خلاصه‌یِ روزانه (بجِ رنگی) تویِ همین ردیف، برخلافِ حالتِ
   معمولی‌شون (پس‌زمینه‌یِ رنگیِ خیلی کم‌رنگ/نیمه‌شفاف رو ردیف‌هایِ عادی)،
   این‌جا چون ردیف روی بقیه‌یِ جدول می‌چسبه (sticky) باید کاملاً کدر و
   مات باشن - وگرنه پشتِ نیمه‌شفافش، ردیف‌ها/سربرگِ زیرش هنگامِ اسکرول
   دیده می‌شه و ظاهرش «شیشه‌ای» می‌شه. */
.sp-wr-row--grandtotal .sp-wr-daysummary{ background-color:#F4F5F7; }
.sp-wr-row--grandtotal .sp-wr-daysummary--zero{  background-color:#F7DBDA; }
.sp-wr-row--grandtotal .sp-wr-daysummary--warn{  background-color:#F5E4C4; }
.sp-wr-row--grandtotal .sp-wr-daysummary--good{  background-color:#D9EEE3; }
.sp-wr-row--grandtotal .sp-wr-daysummary--extra{ background-color:#D6ECFB; }
.sp-wr-row--grandtotal .sp-wr-daysummary--pending{ background-color:#E4E7F0; }

/* بجِ خلاصه‌یِ روز، تویِ ردیفِ سرِ درس - رنگش دقیقاً همون منطقِ رنگیِ
   خانه‌یِ «دانش‌آموز»ه (قرمز/زرد/سبز/آبی) که بالاترین اولویتِ روز رو
   نشون می‌ده، برایِ اینکه با یه نگاه بشه فهمید کدوم درس/روز مشکل داره. */
.sp-wr-daysummary{
  text-align:center;
  vertical-align:middle;
  border-inline-start:1px solid var(--card-border);
  border-bottom:1px solid var(--card-border);
  transition: box-shadow .15s ease;
  padding:7px 5px;
}
.sp-wr-daysummary__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  max-width:100%;
  padding:4px 9px;
  border-radius:8px;
  font-size:10.5px;
  font-weight:700;
  line-height:1.4;
  white-space:normal;
  color:#fff;
  letter-spacing:-.1px;
}
.sp-wr-daysummary__badge-icon{ font-style:normal; font-size:10px; line-height:1; flex:none; }
.sp-wr-daysummary__badge--empty{
  background:none;
  color: var(--text-muted);
  opacity:.45;
  font-weight:500;
  padding:4px 2px;
}
.sp-wr-daysummary--empty .sp-wr-daysummary__badge--empty{ opacity:.35; }
.sp-wr-daysummary--zero{  background: rgba(224,85,90,.10); }
.sp-wr-daysummary--zero .sp-wr-daysummary__badge{ background:#e0555a; box-shadow: 0 1px 4px rgba(224,85,90,.4); }
.sp-wr-daysummary--warn{  background: rgba(201,138,26,.10); }
.sp-wr-daysummary--warn .sp-wr-daysummary__badge{ background:#c98a1a; box-shadow: 0 1px 4px rgba(201,138,26,.4); }
.sp-wr-daysummary--good{  background: rgba(31,157,99,.08); }
.sp-wr-daysummary--good .sp-wr-daysummary__badge{ background:#1f9d63; box-shadow: 0 1px 4px rgba(31,157,99,.4); }
.sp-wr-daysummary--extra{ background: rgba(14,165,233,.10); }
.sp-wr-daysummary--extra .sp-wr-daysummary__badge{ background:#0ea5e9; box-shadow: 0 1px 4px rgba(14,165,233,.4); }
/* ⭐ روزِ نرسیده («به‌زودی») - عمداً خنثی/خاکستری-آبیه، نه قرمز/زرد/سبز/
   آبیِ بقیه‌ی وضعیت‌ها - چون این‌جا هنوز قضاوتی دربارهٔ انجام‌شدن یا
   نشدن معنی نداره، فقط داره می‌گه «هنوز وقتش نرسیده». */
.sp-wr-daysummary--pending{ background: rgba(100,110,140,.10); }
.sp-wr-daysummary--pending .sp-wr-daysummary__badge{ background:#6b7492; box-shadow: 0 1px 4px rgba(107,116,146,.35); }
.sp-wr-daysummary--pending .sp-wr-daysummary__badge-icon{ font-size:11px; }
.sp-wr-daysummary--focus{ box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fb-accent, var(--accent-lav)) 60%, transparent); }

/* نوارِ کوچیکِ بالایِ جدول وقتی یه روز فوکوس شده */
.sp-wr-dayfocus-hint{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
  padding:6px 12px;
  border-radius:999px;
  background: color-mix(in srgb, var(--accent-lav) 10%, rgba(255,255,255,.5));
  border:1px solid color-mix(in srgb, var(--accent-lav) 25%, var(--card-border));
  font-size:11.5px;
  font-weight:700;
  color: var(--text-paper);
  width:fit-content;
}
.sp-wr-dayfocus-clear{
  border:none;
  background: rgba(255,255,255,.7);
  color: var(--text-muted);
  width:18px;
  height:18px;
  border-radius:50%;
  cursor:pointer;
  font-size:11px;
  line-height:1;
}
.sp-wr-dayfocus-clear:hover{ color:#c8323a; }

.sp-wr-row--alt .sp-wr-type,
.sp-wr-row--alt .sp-wr-cell{ background: rgba(var(--ink),.02); }

.sp-wr-type{
  width:1%;
  padding:6px 10px;
  font-weight:700;
  color: var(--text-muted);
  white-space:nowrap;
  border-inline-start:1px solid var(--card-border);
  border-bottom:1px solid var(--card-border);
  transition: background .15s ease;
}
.sp-wr-row--type:hover .sp-wr-type,
.sp-wr-row--type:hover .sp-wr-cell{
  background: color-mix(in srgb, var(--wr-course-accent, var(--accent-lav)) 7%, transparent);
}
.sp-wr-type__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  margin-inline-end:5px;
  border-radius:7px;
  font-size:11px;
  vertical-align:middle;
}
.sp-wr-type__icon--study{ background: color-mix(in srgb, var(--wr-type-study) 18%, transparent); }
.sp-wr-type__icon--test{  background: color-mix(in srgb, var(--wr-type-test) 18%, transparent); }
.sp-wr-type__icon--video{ background: color-mix(in srgb, var(--wr-type-video) 18%, transparent); }
.sp-wr-type__icon--other{ background: color-mix(in srgb, var(--wr-type-other) 18%, transparent); }

.sp-wr-type--total{ color: var(--accent-lav); font-weight:900; }
.sp-wr-row--total{
  background: linear-gradient(90deg, rgba(124,108,255,.09), rgba(5,150,105,.07));
}
.sp-wr-row--total .sp-wr-type,
.sp-wr-row--total .sp-wr-cell{ border-top:1.5px solid var(--card-border); }
.sp-wr-row--lasttype .sp-wr-type,
.sp-wr-row--lasttype .sp-wr-cell{ border-bottom:1px dashed var(--card-border); }

/* ⭐ وقتی یه درس بازه، برایِ اینکه بلوکِ بازشده یه‌دست و جذاب دیده بشه،
   همه‌ی سلول‌های ردیف‌هایِ نمایانِ همون درس (نوعِ فعالیت‌ها + جمعِ زمان) با
   رنگِ اکسنتِ خودِ همون درس رنگ‌آمیزیِ کم‌رنگ می‌شن؛ و یه خطِ رنگیِ باریک
   رویِ لبه‌ی ستونِ «نوعِ فعالیت» می‌کشیم که انگار ادامه‌ی همون نوارِ
   رنگیِ کنارِ اسمِ درسه - یه‌جور «ریلِ رنگی» که کل بلوک رو به هم وصل می‌کنه.
   چون ردیف‌هایِ hidden با :not([hidden]) کنار گذاشته می‌شن، این استایل
   فقط رویِ درس‌هایی که واقعاً بازن اعمال می‌شه.
   ⭐ نکته: قبلاً این پس‌زمینه با «transparent» میکس می‌شد (یعنی فقط ۷٪
   کدر بود) و از زیرش الگویِ راه‌راهِ جدول رد می‌شد - همون حالتِ «شیشه‌ای»
   که نباید باشه. حالا با یه رنگِ کاملاً کدر (#FBFCFD) میکس می‌شه تا خودِ
   رنگ همون‌قدر کم‌رنگ بمونه ولی پس‌زمینه ۱۰۰٪ کدر باشه. */
.sp-wr-table tbody tr.sp-wr-row--detail:not([hidden]) td.sp-wr-cell,
.sp-wr-table tbody tr.sp-wr-row--detail:not([hidden]) td.sp-wr-type{
  background: color-mix(in srgb, var(--wr-course-accent, var(--accent-lav)) 7%, #FBFCFD);
}
.sp-wr-table tbody tr.sp-wr-row--detail:not([hidden]) td.sp-wr-type{
  border-inline-start:3px solid var(--wr-course-accent, var(--accent-lav));
}
.sp-wr-table tbody tr.sp-wr-row--coursehead.is-open td.sp-wr-type{
  border-inline-start:3px solid var(--wr-course-accent, var(--accent-lav));
}

.sp-wr-cell{
  padding:5px 6px;
  text-align:center;
  border-inline-start:1px solid var(--card-border);
  border-bottom:1px solid var(--card-border);
  vertical-align:middle;
  transition: background .15s ease;
}
.sp-wr-cell--plan{
  color: var(--text-muted);
  font-weight:700;
  opacity:.8;
  font-size:11.5px;
}
.sp-wr-cell--done{
  font-weight:900;
}
.sp-wr-cell--done:not(.sp-wr-cell__done--empty){
  border-radius:8px;
}
.sp-wr-cell__done--good{ color:#0b7a49; background: rgba(31,157,99,.14); }
.sp-wr-cell__done--warn{ color:#a16207; background: rgba(201,138,26,.16); }
.sp-wr-cell__done--zero{ color:#c8323a; background: rgba(224,85,90,.14); }
.sp-wr-cell__done--extra{ color:#0f6fb8; background: rgba(14,165,233,.16); }
.sp-wr-cell__done--empty{ color: var(--text-muted); opacity:.5; background:none; }

/* راهنمایِ زیرِ جدول */
.sp-wr-legend{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  margin-top:12px !important;
  font-size:11px !important;
}
.sp-wr-legend__label{ color: var(--text-muted); font-weight:600; }
.sp-wr-legend__badge{
  display:inline-flex;
  align-items:center;
  padding:3px 10px;
  border-radius:8px;
  font-size:10.5px;
  font-weight:700;
  color:#fff;
  letter-spacing:-.1px;
}
.sp-wr-legend__badge--zero{  background:#e0555a; }
.sp-wr-legend__badge--warn{  background:#c98a1a; }
.sp-wr-legend__badge--good{  background:#1f9d63; }
.sp-wr-legend__badge--extra{ background:#0ea5e9; }
.sp-wr-legend__badge--pending{ background:#6b7492; }
.sp-wr-legend__badge--empty{
  color: var(--text-muted);
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
  font-weight:600;
}

@media (max-width: 640px){
  .sp-wr-filters{ flex-direction:column; }
}
/* ===========================================================
   مودالِ «ثبتِ اطلاعاتِ کارنامه» (محیطِ انتخاب رشته) — نسخه‌یِ تکمیلی
   =========================================================== */
.msx-kn-box{ --kn-accent: var(--accent-amber); }
.msx-kn-form{ display:flex; flex-direction:column; gap:22px; }

/* ---------- بنرِ «چرا اینجام» — فقط وقتی مودال از انتخابِ رشته باز شده ---------- */
@keyframes msxKnHintPop{
  0%   { opacity:0; transform: translateY(-8px) scale(.97); }
  60%  { opacity:1; transform: translateY(1px) scale(1.01); }
  100% { opacity:1; transform: translateY(0) scale(1); }
}
@keyframes msxKnHintGlow{
  0%, 100% { box-shadow: 0 0 0 0 rgba(217,119,6,0.28); }
  50%      { box-shadow: 0 0 0 7px rgba(217,119,6,0); }
}
.msx-kn-linked-hint{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin: -6px 0 4px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(217,119,6,0.35);
  background: linear-gradient(135deg, rgba(217,119,6,0.14), rgba(5,150,105,0.08));
  animation: msxKnHintPop .38s cubic-bezier(.2,.9,.3,1.3), msxKnHintGlow 2.2s ease-in-out .38s 2;
}
.msx-kn-linked-hint__icon{
  flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  border-radius:50%;
  background: rgba(217,119,6,0.18);
  font-size:17px;
}
.msx-kn-linked-hint__text{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.msx-kn-linked-hint__text strong{ font-size:13.5px; font-weight:800; color:#92400e; }
.msx-kn-linked-hint__text span{ font-size:12.5px; font-weight:600; color: var(--text-muted); line-height:1.7; }

/* ---------- کارتِ اطلاعاتِ دانش‌آموز (فقط‌خواندنی) ---------- */
.msx-kn-info{
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-lav) 10%, transparent), color-mix(in srgb, var(--accent-mint) 8%, transparent));
  border:1px solid var(--card-border);
  border-radius:18px;
  padding:16px 18px;
}
.msx-kn-section__title{
  display:flex; align-items:center; gap:8px;
  margin:0 0 12px;
  font-size:14.5px; font-weight:800;
  color: var(--text-paper);
}
.msx-kn-section__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:9px;
  background: rgba(var(--ink),.1);
  font-size:14px;
}
.msx-kn-info__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
@media (max-width: 640px){ .msx-kn-info__grid{ grid-template-columns:1fr; } }
.msx-kn-info__item{
  display:flex; flex-direction:column; gap:4px;
  background: var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:12px;
  padding:10px 12px;
}
.msx-kn-info__label{ font-size:11.5px; color: var(--text-muted); font-weight:600; }
.msx-kn-info__value{ font-size:14.5px; color: var(--text-paper); font-weight:800; }

/* ---------- سکشنِ اطلاعاتِ کارنامه ---------- */
.msx-kn-section{
  background: var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:20px;
  padding:18px 18px 20px;
}

/* ---------- ماتریسِ وضعیتِ مجاز/غیرمجاز ---------- */
.msx-kn-elig{ margin-top:18px; }
.msx-kn-elig__title{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:0 0 12px;
  font-size:13.5px; font-weight:800;
  color: var(--text-paper);
}
.msx-kn-elig__title span#msxKarnamehGroupLabel{ color: var(--accent-amber); }
.msx-elig-group{
  border:1px dashed var(--card-border);
  border-radius:16px;
  padding:12px 14px 14px;
  margin-bottom:12px;
  background: color-mix(in srgb, var(--bg-night) 55%, transparent);
}
.msx-elig-group:last-child{ margin-bottom:0; }
.msx-elig-group__head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-bottom:10px;
}
.msx-elig-group__label{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:800; color: var(--text-muted);
}
.msx-elig-group__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:8px;
  background: color-mix(in srgb, var(--accent-lav) 16%, transparent);
  font-size:12px;
}
.msx-elig-row-chip{
  font-size:11px; font-weight:700;
  padding:3px 10px; border-radius:999px;
  background: rgba(var(--ink),.12);
  color: var(--text-paper);
}
.msx-elig-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}
@media (max-width: 780px){ .msx-elig-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .msx-elig-grid{ grid-template-columns: 1fr; } }

/* ---------- کارتِ هر کانال (روزانه/مجازی/پیام‌نور) — نسخه‌یِ بازطراحی‌شده ---------- */
.msx-elig-cell{
  position:relative;
  display:flex; flex-direction:column; gap:10px;
  background: var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:14px;
  padding:11px 11px 12px;
  overflow:hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
  box-shadow: 0 1px 0 0 rgba(255,255,255,.02) inset;
}
/* نوارِ رنگیِ باریکِ سمتِ راست که وضعیتِ فعلی رو حتی از دور هم نشون می‌ده */
.msx-elig-cell::before{
  content:'';
  position:absolute; inset-inline-start:0; top:0; bottom:0;
  width:4px;
  background: var(--accent-mint);
  transition: background .2s ease;
}
.msx-elig-cell--blocked::before{ background: var(--accent-warn-red); }
.msx-elig-cell--blocked{
  border-color: color-mix(in srgb, var(--accent-warn-red) 30%, var(--card-border));
}
.msx-elig-cell:not(.msx-elig-cell--blocked){
  border-color: color-mix(in srgb, var(--accent-mint) 22%, var(--card-border));
}
.msx-elig-cell__label{
  display:flex; align-items:center; gap:7px;
  font-size:11.5px; font-weight:700;
  color: var(--text-muted);
  line-height:1.5;
  min-height:20px;
  padding-inline-start:4px;
}
.msx-elig-cell__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; flex:none;
  font-size:12px;
}

/* ---------- کلیدِ لغزنده‌ی مجاز/غیرمجاز — نسخه‌یِ جدید با پسِ‌زمینه‌یِ متحرک ---------- */
.msx-elig-toggle{
  position:relative;
  display:flex; gap:2px;
  background: rgba(var(--ink),.07);
  border-radius:11px;
  padding:3px;
  isolation:isolate;
}
.msx-elig-toggle::before{
  content:'';
  position:absolute;
  top:3px; bottom:3px;
  width:calc(50% - 3px);
  border-radius:8px;
  z-index:0;
  transition: right .22s var(--ease-pop, cubic-bezier(.34,1.56,.64,1)), left .22s var(--ease-pop, cubic-bezier(.34,1.56,.64,1)), background .2s ease;
  box-shadow: 0 3px 8px -3px rgba(0,0,0,.35);
}
.msx-elig-toggle[data-value="allowed"]::before{
  right:3px; left:calc(50% + 0px);
  background: linear-gradient(135deg, var(--accent-mint), color-mix(in srgb, var(--accent-mint) 70%, #0ea5e9));
}
.msx-elig-toggle[data-value="blocked"]::before{
  left:3px; right:calc(50% + 0px);
  background: linear-gradient(135deg, var(--accent-warn-red), color-mix(in srgb, var(--accent-warn-red) 70%, #b91c1c));
}
.msx-elig-btn{
  position:relative; z-index:1;
  flex:1;
  display:flex; align-items:center; justify-content:center; gap:5px;
  border:none; cursor:pointer;
  padding:7px 6px;
  border-radius:8px;
  font-size:12px; font-weight:800;
  font-family:inherit;
  background:transparent;
  color: var(--text-muted);
  transition: color .18s ease, transform .12s ease;
}
.msx-elig-btn:hover{ color: var(--text-paper); }
.msx-elig-btn:active{ transform: scale(.95); }
.msx-elig-btn__dot{
  width:6px; height:6px; border-radius:50%;
  background: currentColor;
  opacity:.45;
  transition: opacity .18s ease, background .18s ease;
}
.msx-elig-btn.is-active{ color:#fff; }
.msx-elig-btn.is-active .msx-elig-btn__dot{ opacity:1; background:#fff; box-shadow: 0 0 0 3px rgba(255,255,255,.25); }

/* ---------- سکشنِ قابلِ‌تاگلِ کنکورِ زبان/هنر ---------- */
.msx-kn-toggle-section{
  border:1px solid var(--card-border);
  border-radius:20px;
  padding:16px 18px;
  background: var(--card-bg);
  transition: border-color .15s ease, background .15s ease;
}
.msx-kn-toggle-section:has(.msx-switch input:checked){
  border-color: color-mix(in srgb, var(--accent-amber) 45%, var(--card-border));
  background: color-mix(in srgb, var(--accent-amber) 6%, var(--card-bg));
}
.msx-switch-row{
  display:flex; align-items:center; justify-content:space-between;
  cursor:pointer;
  user-select:none;
}
.msx-switch-row__label{ font-size:14.5px; font-weight:800; color: var(--text-paper); }
.msx-switch{ position:relative; display:inline-flex; }
.msx-switch input{
  position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; z-index:1;
}
.msx-switch__track{
  display:block;
  width:46px; height:26px;
  border-radius:999px;
  background: rgba(var(--ink),.18);
  position:relative;
  transition: background .18s ease;
}
.msx-switch__thumb{
  position:absolute; top:3px; right:3px;
  width:20px; height:20px;
  border-radius:50%;
  background:#fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  transition: transform .18s var(--ease-pop);
}
.msx-switch input:checked ~ .msx-switch__track{ background: var(--accent-amber); }
.msx-switch input:checked ~ .msx-switch__track .msx-switch__thumb{ transform: translateX(-20px); }
.msx-switch input:focus-visible ~ .msx-switch__track{ outline:2px solid var(--accent-amber); outline-offset:2px; }

.msx-kn-subblock{
  margin-top:16px;
  padding-top:16px;
  border-top:1px dashed var(--card-border);
  animation: msxKnSubblockIn .18s var(--ease-pop);
}
@keyframes msxKnSubblockIn{
  from{ opacity:0; transform: translateY(-6px); }
  to{ opacity:1; transform: translateY(0); }
}

/* ⭐ تیکِ «کدها به دفترچه اضافه شده» — زیرِ وضعیتِ مجاز/غیرمجازِ هر کدوم
   از زیربخش‌هایِ کنکورِ زبان/هنر. همینِ مقدار از پاپ‌آورِ چیپِ بالایِ
   صفحه‌ی جست‌وجویِ رشته‌محل هم قابلِ تغییره (ر.ک. mxbOpenKnChipPop). */
.msx-kn-codes-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
  padding:9px 12px;
  border-radius:12px;
  background: rgba(var(--ink),.04);
  font-size:13px;
  font-weight:700;
  color: var(--text-paper);
  cursor:pointer;
  user-select:none;
}
.msx-kn-codes-row input{ width:16px; height:16px; margin:0; accent-color: var(--accent-amber); cursor:pointer; }

@media (max-width: 640px){
  .msx-kn-section, .msx-kn-toggle-section{ padding:14px; border-radius:16px; }
}

/* ===========================================================
   انتخاب رشته — جست‌وجویِ رشته‌محل (سراسری/فرهنگیان/آزاد)
   صفحه‌ای که بعدِ کلیک رویِ آیکونِ مسیر، جلویِ نامِ دانش‌آموز باز می‌شه
   =========================================================== */
/* ⭐ نسخه‌یِ مینیمال/کم‌ارتفاعِ باکسِ مشخصاتِ دانش‌آموز:
   بدونِ باکسِ تودرتو، پدینگِ کم، فقط دو ردیف (ر.ک. majors.html → .mxb-head__student) */
.mxb-head{
  position:relative;
  display:grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  padding:8px 14px;
  border-radius:16px;
  background: linear-gradient(120deg, rgba(124,108,255,.07), rgba(255,255,255,.55) 45%, rgba(104,111,124,.07));
  border:1px solid var(--card-border);
  box-shadow: var(--shadow-card);
  overflow:hidden;
  container: mxbhead / inline-size; /* ⭐ برایِ فشرده‌شدنِ خودکار بر اساسِ «عرضِ خودِ کارت» (نه عرضِ پنجره) — پایینِ همین بخش */
}
.mxb-head::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:2px;
  background: linear-gradient(90deg, var(--accent-lav), var(--accent-mint), var(--accent-amber), var(--day-4), var(--accent-lav));
  background-size:300% 100%;
  animation: sp-topbar-sheen 9s linear infinite;
  opacity:.85;
}
.mxb-back{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid rgba(var(--ink),0.16);
  background: rgba(255,255,255,0.6);
  color: var(--text-paper);
  font: inherit;
  font-size:12.5px;
  font-weight:700;
  padding:6px 12px;
  border-radius:10px;
  cursor:pointer;
  white-space:nowrap;
  justify-self:start;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.mxb-back:hover{ background: #fff; transform: translateX(3px); box-shadow: 0 6px 16px -8px rgba(var(--ink),0.28); }
.mxb-back__icon{ display:inline-block; transition: transform .15s ease; }
.mxb-back:hover .mxb-back__icon{ transform: translateX(3px); }

/* باکسِ اسم/مشخصات — بدونِ کادرِ جدا؛ تمامِ عرضِ ستونِ وسط رو می‌گیره */
.mxb-head__student{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0;
  background:none;
  border:0;
  box-shadow:none;
  justify-self:stretch;
  min-width:0;
  max-width:100%;
}
.mxb-head__avatar{
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px;
  font-size:16px;
  background: rgba(255,255,255,.8);
  box-shadow: 0 0 0 1px rgba(124,108,255,.16);
  flex-shrink:0;
}
@keyframes mxbHeadAvatarFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-2px); }
}
.mxb-head__meta{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1 1 auto; }
/* ⭐ ردیفِ ۱: اسم + نشانِ مجاز/غیرمجاز (ر.ک. mxbUpdateStudentEligBadge) + مسیر (کم‌رنگ، سه‌نقطه‌شونده) + شمارنده‌یِ کدها (ته‌ِ ردیف) */
.mxb-head__name-row{ display:flex; align-items:center; flex-wrap:wrap; gap:2px 8px; min-width:0; }
.mxb-head__name{ font-size:14px; font-weight:800; color:var(--text-paper); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; flex-shrink:0; }
.mxb-head__path{ font-size:11.5px; color:var(--text-muted); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:default; flex:1 1 140px; min-width:0; }

/* ⭐ شمارنده‌یِ «کدهایِ قابلِ‌انتخاب» (دفترچه‌یِ اصلی + زبان/هنر) — ر.ک.
   mxbRenderHeadCodes تویِ majors.js. با تغییرِ تعداد (زدن/برداشتنِ تیکِ زبان/هنر)
   عدد می‌شمره، باکس یه درخششِ سبز/قرمز می‌گیره و «+۱۷۵»/«−۱۷۵» بالا می‌پره. */
.mxb-head__codes{
  position:relative;
  display:inline-flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:4px 6px;
  margin:0;
  margin-inline-start:auto;
  padding:1px 8px;
  border-radius:9px;
  background: rgba(248,250,252,.75);
  border:1px solid rgba(15,23,42,.07);
  font-size:11px;
  color: var(--text-paper);
  cursor:default;
  max-width:100%;
  flex-shrink:0;
  overflow:visible;
}
.mxb-head__codes[hidden]{ display:none; }
.mxb-codes__icon{ font-size:13px; line-height:1; flex-shrink:0; }
.mxb-codes__label{ font-weight:700; font-size:10.5px; color: var(--text-muted); white-space:nowrap; flex-shrink:0; }
/* ⭐ نوارِ داخلیِ اسکرول‌شونده — فقط عدد و تکه‌ها اگه جا نشدن افقی اسکرول
   می‌خورن؛ خودِ باکس overflow:visible می‌مونه تا برچسبِ «+۱۷۵» (که بالای
   باکس می‌پره) هیچ‌وقت زیرِ باکس بریده نشه. */
.mxb-codes__scroll{
  display:flex;
  align-items:center;
  gap:4px 7px;
  min-width:0;
  overflow-x:auto;
  scrollbar-width:none;
}
.mxb-codes__scroll::-webkit-scrollbar{ display:none; }
.mxb-codes__total{
  font-size:14px;
  font-weight:900;
  letter-spacing:.2px;
  white-space:nowrap;
  flex-shrink:0;
  background: linear-gradient(90deg, #6D5DFC, #0EA5E9);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-variant-numeric: tabular-nums;
}
.mxb-codes__total.is-loading{ color: var(--text-muted); background:none; -webkit-text-fill-color: currentColor; }
.mxb-codes__parts{ display:inline-flex; align-items:center; flex-wrap:nowrap; gap:3px; white-space:nowrap; }
.mxb-codes__plus{ color: var(--text-muted); font-weight:800; font-size:10px; flex-shrink:0; }
.mxb-codes__part{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:0 6px;
  border-radius:999px;
  font-size:10.5px;
  font-weight:800;
  white-space:nowrap;
  flex-shrink:0;
  border:1px solid transparent;
}
.mxb-codes__part--main{     background: rgba(104,111,124,.12); color:#475569; }
.mxb-codes__part--language{ background: rgba(37,99,235,.14);  color:#1d4ed8; border-color: rgba(37,99,235,.25); }
.mxb-codes__part--art{      background: rgba(219,39,119,.14); color:#9d174d; border-color: rgba(219,39,119,.25); }
.mxb-codes__part--warn{
  background: rgba(245,158,11,.16);
  color:#b45309;
  border:1px solid rgba(245,158,11,.45);
  cursor:help;
}
.mxb-codes__part--ghost{
  background: rgba(249,115,22,.08);
  color:#c2410c;
  border:1px dashed rgba(249,115,22,.55);
  animation: mxbGhostPulse 2s ease-in-out infinite;
}
@keyframes mxbGhostPulse{
  0%,100%{ background: rgba(249,115,22,.06); border-color: rgba(249,115,22,.4); transform: scale(1); }
  50%    { background: rgba(249,115,22,.20); border-color: rgba(249,115,22,.95); transform: scale(1.06); }
}
.mxb-codes__delta{
  position:absolute;
  top:-8px;
  inset-inline-end:8px;
  z-index:5;
  padding:1px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  color:#fff;
  pointer-events:none;
  animation: mxbCodesDelta 2.4s ease-out forwards;
}
.mxb-codes__delta.is-up{   background: linear-gradient(135deg, #34D399, #059669); box-shadow: 0 6px 14px -6px rgba(5,150,105,.7); }
.mxb-codes__delta.is-down{ background: linear-gradient(135deg, #F87171, #DC2626); box-shadow: 0 6px 14px -6px rgba(220,38,38,.7); }
@keyframes mxbCodesDelta{
  0%   { opacity:0; transform: translateY(8px) scale(.7); }
  12%  { opacity:1; transform: translateY(0) scale(1.12); }
  22%  { transform: translateY(0) scale(1); }
  75%  { opacity:1; transform: translateY(-2px); }
  100% { opacity:0; transform: translateY(-10px); }
}
.mxb-head__codes.is-changed.is-up{   animation: mxbCodesGlowUp 1.4s ease-out; }
.mxb-head__codes.is-changed.is-down{ animation: mxbCodesGlowDown 1.4s ease-out; }
@keyframes mxbCodesGlowUp{
  0%   { box-shadow: 0 0 0 0 rgba(5,150,105,.55); border-color: rgba(5,150,105,.7); }
  100% { box-shadow: 0 0 0 10px rgba(5,150,105,0); border-color: rgba(124,108,255,.22); }
}
@keyframes mxbCodesGlowDown{
  0%   { box-shadow: 0 0 0 0 rgba(220,38,38,.5); border-color: rgba(220,38,38,.7); }
  100% { box-shadow: 0 0 0 10px rgba(220,38,38,0); border-color: rgba(124,108,255,.22); }
}

/* ⭐ ردیفِ چیپ‌هایِ «رتبه / سهمیه / استانِ بومی» کنارِ اسمِ دانش‌آموز —
   ر.ک. mxbUpdateStudentInfoChips تویِ majors.js. هرکدوم فقط وقتی دیتا داره
   نمایش داده می‌شه (مثلاً اگه کارنامه ثبت نشده، رتبه اصلاً نمی‌آد). */
.mxb-head__chips{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:3px 5px;
  margin:0;
}
.mxb-head__chips[hidden]{ display:none; }
/* ⭐ زبان و هنر همیشه «کنارِ هم» — یک گروهِ جدا با خطِ جداکننده؛ اگه جا کم باشه
   کلِ گروه با هم می‌ره ردیفِ بعد، نه اینکه یکیشون تنها بمونه. */
.mxb-head__kn-group{
  display:inline-flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:5px;
  margin-inline-start:3px;
  padding-inline-start:8px;
  border-inline-start:1px solid rgba(var(--ink),.22);
}
.mxb-head__chip{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:1px 8px 1px 7px;
  border-radius:999px;
  font-size:10.5px;
  font-weight:800;
  line-height:1.7;
  white-space:nowrap;
  border:1px solid transparent;
  letter-spacing:.1px;
}
.mxb-head__chip__icon{ font-size:11px; line-height:1; filter: saturate(1.15); }
.mxb-head__chip__label{ opacity:.72; font-weight:700; }
.mxb-head__chip__value{ font-weight:800; }
.mxb-head__chip--rank{
  color:#92400e;
  background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.24);
}
.mxb-head__chip--quota{
  color:#5b21b6;
  background: rgba(124,108,255,.12);
  border-color: rgba(124,108,255,.24);
}
.mxb-head__chip--province{
  color:#065f46;
  background: rgba(5,150,105,.12);
  border-color: rgba(5,150,105,.22);
}

/* ⭐ چیپ‌هایِ کنکورِ زبان/هنر — ر.ک. mxbBuildKnChipHtml تویِ majors.js.
   اگه اون کنکور برایِ دانش‌آموز فعال نشده باشه (تیکِ کارنامه نخورده)،
   چیپ به‌صورتِ «خاموش» (کم‌رنگ و غیرِقابل‌کلیک) نشون داده می‌شه؛ وگرنه
   دکمه‌ست و با کلیک، پاپ‌آورِ نمره/رتبه + تیکِ «کدها به دفترچه» باز می‌شه. */
.mxb-head__chip--off{
  color: var(--text-muted);
  background: rgba(var(--ink),.05);
  border-color: rgba(var(--ink),.08);
  opacity:.65;
  cursor:default;
}
button.mxb-head__chip--kn{
  font-family:inherit;
  font-size:10.5px; /* ⭐ قبلاً «font:inherit» اندازه رو هم ریست می‌کرد و چیپ‌هایِ زبان/هنر از بقیه درشت‌تر بودن */
  font-weight:800;
  line-height:1.7;
  cursor:pointer;
  position:relative;
  transition: transform .12s ease, box-shadow .12s ease;
}
button.mxb-head__chip--kn:hover{ transform: translateY(-1px); }
.mxb-head__chip--language{
  color:#1e40af;
  background: rgba(37,99,235,.12);
  border-color: rgba(37,99,235,.24);
}
.mxb-head__chip--art{
  color:#9d174d;
  background: rgba(219,39,119,.12);
  border-color: rgba(219,39,119,.24);
}
/* ⭐ نشانِ «تیکِ کدها به دفترچه» — یک جایِ ثابت، بلافاصله بعدِ برچسب و
   قبل از رتبه/تعدادِ کد (ر.ک. mxbBuildKnChipHtml تویِ majors.js)، تا
   هیچ‌وقت وسطِ عددها یا رویِ‌شان قرار نگیرد. */
.mxb-head__chip__codes-dot{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:13px; height:13px;
  border-radius:50%;
  background:#059669;
  color:#fff;
  font-size:8.5px;
  font-weight:900;
  line-height:1;
  flex-shrink:0;
}
/* ⭐ تعدادِ کدهایِ اضافه‌شده‌یِ زبان/هنر، کنارِ تیکِ سبزِ چیپ */
.mxb-head__chip__codes-count{
  display:inline-flex;
  align-items:center;
  padding:1px 7px;
  border-radius:999px;
  background: rgba(5,150,105,.14);
  color:#047857;
  font-size:10.5px;
  font-weight:800;
  white-space:nowrap;
}
/* ⭐⭐ هشدارِ «یادت نره اضافه کنی»: آزمونِ زبان/هنر فعاله و کد دارد ولی تیکِ
   «کدها به لیست اضافه شود» هنوز نخورده (ر.ک. mxbKnPendingCount تویِ majors.js).
   ─ چیپ: حاشیه‌یِ خط‌چین + حلقه‌یِ پالسِ هم‌رنگِ خودش
   ─ آیکون: هر چند ثانیه یه بارِ «زنگ‌زدن» (تکون‌خوردن)
   ─ نشانِ نارنجیِ «＋۱۶۶ کد»: بالا-پایین می‌پره + برقِ عبوری
   با زدنِ تیک، کلاسِ --attn برداشته می‌شه و همه‌ی این‌ها خودبه‌خود محو می‌شن. */
.mxb-head__chip--attn{
  --attn-rgb: 249,115,22;
  border-style:dashed;
  border-color: rgba(var(--attn-rgb),.75);
  animation: mxbKnAttnRing 2.2s ease-out infinite;
}
.mxb-head__chip--language.mxb-head__chip--attn{ --attn-rgb: 37,99,235; }
.mxb-head__chip--art.mxb-head__chip--attn{      --attn-rgb: 219,39,119; }
@keyframes mxbKnAttnRing{
  0%       { box-shadow: 0 0 0 0 rgba(var(--attn-rgb),.55); }
  70%,100% { box-shadow: 0 0 0 8px rgba(var(--attn-rgb),0); }
}
.mxb-head__chip--attn .mxb-head__chip__icon{
  display:inline-block;
  transform-origin:50% 65%;
  animation: mxbKnAttnWiggle 3.4s ease-in-out infinite;
}
@keyframes mxbKnAttnWiggle{
  0%,58%,100%{ transform: rotate(0) scale(1); }
  62%{ transform: rotate(-18deg) scale(1.2); }
  67%{ transform: rotate(16deg)  scale(1.2); }
  72%{ transform: rotate(-12deg) scale(1.12); }
  77%{ transform: rotate(8deg)   scale(1.05); }
  82%{ transform: rotate(-4deg)  scale(1); }
}
.mxb-head__chip__add{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:0 7px 0 6px;
  border-radius:999px;
  background: linear-gradient(135deg, #F97316, #EA580C);
  color:#fff;
  font-size:10.5px;
  font-weight:900;
  line-height:1.7;
  white-space:nowrap;
  overflow:hidden;
  box-shadow: 0 3px 8px -3px rgba(234,88,12,.85);
  text-shadow: 0 1px 1px rgba(124,45,18,.35);
  animation: mxbKnAddBounce 1.5s var(--ease-pop, ease) infinite;
}
.mxb-head__chip__add-plus{ font-weight:900; }
.mxb-head__chip__add::after{
  content:"";
  position:absolute;
  top:0; bottom:0; left:-60%;
  width:45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent);
  animation: mxbKnAddShine 2.4s ease-in-out infinite;
}
@keyframes mxbKnAddBounce{
  0%,100%{ transform: translateY(0); }
  45%    { transform: translateY(-2px); }
}
@keyframes mxbKnAddShine{
  0%      { left:-60%; }
  60%,100%{ left:130%; }
}
@media (prefers-reduced-motion: reduce){
  .mxb-head__chip--attn,
  .mxb-head__chip--attn .mxb-head__chip__icon,
  .mxb-head__chip__add,
  .mxb-head__chip__add::after,
  .mxb-codes__part--ghost,
  .mxb-head__mini-bit--attn{ animation:none !important; }
}

.mxb-kn-chippop__note{
  font-size:11px;
  line-height:1.8;
  color: var(--text-muted);
  margin:8px 2px 0;
}

/* ⭐ پاپ‌آورِ اطلاعاتِ کنکورِ زبان/هنر (کلیکِ رویِ چیپ) — ر.ک.
   mxbOpenKnChipPop تویِ majors.js. */
.mxb-kn-chippop{
  position:fixed;
  z-index:1200;
  min-width:230px;
  max-width:290px;
  background: var(--surface, #fff);
  border:1px solid var(--card-border);
  border-radius:14px;
  box-shadow: 0 14px 36px rgba(20,20,40,0.22);
  padding:12px;
}
.mxb-kn-chippop__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:9px;
}
.mxb-kn-chippop__title{ font-size:13px; font-weight:800; color: var(--text-paper); }
.mxb-kn-chippop__close{
  border:none;
  background: rgba(var(--ink),0.06);
  width:22px; height:22px;
  border-radius:50%;
  cursor:pointer;
  font-size:11px;
  line-height:1;
  color: var(--text-muted);
}
.mxb-kn-chippop__rows{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.mxb-kn-chippop__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
}
.mxb-kn-chippop__row-label{ color: var(--text-muted); font-weight:600; }
.mxb-kn-chippop__row-value{ color: var(--text-paper); font-weight:800; }
.mxb-kn-chippop__codes{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1.5px solid var(--card-border);
  background: rgba(var(--ink),.035);
  font-size:12.5px;
  font-weight:700;
  color: var(--text-paper);
  cursor:pointer;
  user-select:none;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.mxb-kn-chippop__codes:hover{ background: rgba(var(--ink),.065); }
.mxb-kn-chippop__codes:has(input:checked){
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-amber) 16%, transparent), color-mix(in srgb, var(--accent-amber) 7%, transparent));
  border-color: color-mix(in srgb, var(--accent-amber) 55%, var(--card-border));
  box-shadow: 0 3px 12px -5px color-mix(in srgb, var(--accent-amber) 55%, transparent);
}
.mxb-kn-chippop__codes:has(input:disabled){ opacity:.6; cursor:wait; }
.mxb-kn-chippop__codes input{
  position:absolute; opacity:0; width:0; height:0; margin:0; pointer-events:none;
}
/* جعبه‌یِ سفارشیِ چک‌باکس — بزرگ‌تر، با تیکِ متحرک و افکتِ حلقه‌ایِ لحظه‌یِ تیک‌خوردن */
.mxb-kn-chippop__codes-box{
  position:relative;
  flex:none;
  width:21px; height:21px;
  border-radius:7px;
  border:2px solid color-mix(in srgb, var(--accent-amber) 55%, var(--card-border));
  background: var(--card-bg);
  display:flex; align-items:center; justify-content:center;
  transition: background .2s ease, border-color .2s ease;
}
.mxb-kn-chippop__codes-box::after{
  content:'✓';
  font-size:13px;
  font-weight:900;
  color:#fff;
  line-height:1;
  transform: scale(0) rotate(-20deg);
  transition: transform .28s var(--ease-pop);
}
.mxb-kn-chippop__codes input:checked ~ .mxb-kn-chippop__codes-box{
  background: linear-gradient(135deg, var(--accent-amber), color-mix(in srgb, var(--accent-amber) 60%, #f59e0b));
  border-color: transparent;
  animation: mxbCodesRing .5s ease-out;
}
.mxb-kn-chippop__codes input:checked ~ .mxb-kn-chippop__codes-box::after{ transform: scale(1) rotate(0deg); }
.mxb-kn-chippop__codes-text{ transition: color .2s ease; }
.mxb-kn-chippop__codes input:checked ~ .mxb-kn-chippop__codes-text{
  color: color-mix(in srgb, var(--accent-amber) 80%, var(--text-paper));
  font-weight:800;
}
/* حلقه‌یِ محوشونده‌ی دورِ جعبه، لحظه‌یِ تیک‌خوردن (یه بارِ کوتاه) */
@keyframes mxbCodesRing{
  0%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-amber) 55%, transparent); }
  70%{ box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent-amber) 0%, transparent); }
  100%{ box-shadow: 0 0 0 0 transparent; }
}
.mxb-kn-chippop__hint{ font-size:11px; color: var(--text-muted); margin:8px 2px 0; line-height:1.7; }
.mxb-kn-chippop__hint[hidden]{ display:none; }

/* دکمه‌ی جابه‌جاییِ حالتِ «مشاهده / ویرایش» — فقط برای سرشاخه‌ها (ادمین کل/ادمین/سرمشاور) نشون داده می‌شه */
.mxb-mode-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid rgba(217,119,6,0.35);
  background: rgba(217,119,6,0.12);
  color:#92400e;
  font:inherit;
  font-size:12.5px;
  font-weight:800;
  padding:7px 14px;
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
  flex-shrink:0;
  margin-inline-start:6px;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.mxb-mode-toggle:hover{ background: rgba(217,119,6,0.2); transform: translateY(-1px); }
.mxb-mode-toggle.is-editing{
  border-color: rgba(16,185,129,0.4);
  background: rgba(16,185,129,0.14);
  color:#065f46;
}
.mxb-mode-toggle.is-editing:hover{ background: rgba(16,185,129,0.22); }

/* ⭐ تلنگرِ بصری: وقتی تویِ حالتِ «فقط‌مشاهده» رویِ چیزیِ قفل/غیرفعال کلیک بشه،
   این کلاس یه لحظه به دکمه‌ی مود اضافه می‌شه — بولد + یه پالسِ رنگی/بزرگ‌نمایی
   جذاب، تا چشمِ کاربر رو بکِشه سمتِ دکمه و بفهمه باید وارد حالتِ ویرایش بشه. */
@keyframes mxbNudgePulse{
  0%   { transform: scale(1);     box-shadow: 0 0 0 0   rgba(217,119,6,0.55); }
  25%  { transform: scale(1.14);  box-shadow: 0 0 0 9px rgba(217,119,6,0.22); }
  55%  { transform: scale(0.97);  box-shadow: 0 0 0 3px rgba(217,119,6,0.35); }
  100% { transform: scale(1);     box-shadow: 0 0 0 0   rgba(217,119,6,0); }
}
.mxb-mode-toggle.mxb-nudge{
  font-weight: 900;
  border-color: rgba(217,119,6,0.75);
  animation: mxbNudgePulse .7s ease;
}
.mxb-mode-toggle.is-editing.mxb-nudge{
  border-color: rgba(16,185,129,0.75);
  animation-name: mxbNudgePulseGreen;
}
@keyframes mxbNudgePulseGreen{
  0%   { transform: scale(1);     box-shadow: 0 0 0 0   rgba(16,185,129,0.55); }
  25%  { transform: scale(1.14);  box-shadow: 0 0 0 9px rgba(16,185,129,0.22); }
  55%  { transform: scale(0.97);  box-shadow: 0 0 0 3px rgba(16,185,129,0.35); }
  100% { transform: scale(1);     box-shadow: 0 0 0 0   rgba(16,185,129,0); }
}

/* حالتِ «مشاهده» (فقط دیدن): دستگیره‌ی درگ/حذف/بازگردانی/نشان‌کردن غیرفعال و کم‌رنگ می‌شن،
   و کلیک روی ردیف‌ها هم دیگه چیزی رو انتخاب/لغو نمی‌کنه (نشونه‌ی cursor هم عوض می‌شه). */
#msxViewMajorBrowse.mxb-viewonly .mxb-row-drag,
#msxViewMajorBrowse.mxb-viewonly .mxb-row-remove,
#msxViewMajorBrowse.mxb-viewonly .mxb-row-restore,
#msxViewMajorBrowse.mxb-viewonly .mxb-row-delete-forever,
#msxViewMajorBrowse.mxb-viewonly .mxb-row-check{
  opacity:.35;
  pointer-events:none;
  cursor:not-allowed;
}
#msxViewMajorBrowse.mxb-viewonly tr.mxb-row{ cursor:default; }
#msxViewMajorBrowse.mxb-viewonly #mxbFinalizeBtn{ opacity:.45; pointer-events:none; cursor:not-allowed; }
#msxViewMajorBrowse.mxb-viewonly #mxbClearSelectionsBtn,
#msxViewMajorBrowse.mxb-viewonly #mxbUnmarkAllBtn,
#msxViewMajorBrowse.mxb-viewonly #mxbDeleteMarkedBtn,
#msxViewMajorBrowse.mxb-viewonly #mxbEmptyTrashBtn,
#msxViewMajorBrowse.mxb-viewonly #mxbRestoreAllBtn,
#msxViewMajorBrowse.mxb-viewonly #mxbSelectAllCheckbox{
  opacity:.4;
  pointer-events:none;
  cursor:not-allowed;
}

/* ⭐ فشرده‌سازیِ خودکار وقتی کارت باریک می‌شه (مثلاً لپ‌تاپِ کوچک + سایدبارِ باز) */
@container mxbhead (max-width: 1150px){
  .mxb-codes__label{ display:none; }          /* «کدهایِ قابل انتخاب» → فقط 📚 + عدد (توضیحش تویِ tooltip هست) */
  .mxb-back__more{ display:none; }            /* «بازگشت به لیست انتخاب رشته» → «بازگشت» */
}
@container mxbhead (max-width: 900px){
  /* دکمه‌یِ بازگشت و شمارنده‌یِ نتایج می‌رن ردیفِ بالا؛ مشخصاتِ دانش‌آموز تمام‌عرض زیرشون */
  .mxb-head{ grid-template-columns: auto minmax(0,1fr); }
  .mxb-head__student{ grid-column:1 / -1; grid-row:2; }
  .mxb-results-head{ justify-self:end; }
  .mxb-head__kn-group{ margin-inline-start:0; padding-inline-start:0; border-inline-start:0; }
}

@media (max-width: 720px){
  .mxb-head{ grid-template-columns: 1fr; justify-items:center; text-align:center; }
  .mxb-back{ justify-self:center; }
  .mxb-head__student{ justify-self:stretch; width:100%; text-align:start; }
  .mxb-head__chips{ justify-content:flex-start; }
  .mxb-results-head{ justify-self:center; }
}

.mxb-filters{
  position:relative;
  background:
    linear-gradient(160deg, rgba(124,108,255,.09), rgba(104,111,124,.06) 55%, rgba(5,150,105,.06));
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  padding: 14px 16px 16px;
  box-shadow: var(--shadow-card);
  margin-bottom:12px;
  overflow:hidden;
}
.mxb-filters::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:3px;
  background: linear-gradient(90deg, var(--accent-lav), var(--accent-mint), var(--accent-amber), var(--day-4), var(--accent-lav));
  background-size:300% 100%;
  animation: sp-topbar-sheen 9s linear infinite;
  opacity:.85;
}
.mxb-filters__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
  flex-wrap:wrap;
}
.mxb-filters__title{
  margin:0;
  font-size:13px;
  font-weight:800;
  color:#fff;
}
.mxb-filters__toggle{
  display:flex;
  align-items:center;
  gap:7px;
  border:none;
  background: linear-gradient(135deg, var(--accent-lav), var(--accent-mint));
  padding:7px 16px 7px 13px;
  margin:0;
  cursor:pointer;
  font:inherit;
  font-size:12.5px;
  color:#fff;
  border-radius:999px;
  box-shadow: 0 8px 20px -8px rgba(124,108,255,.55);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  animation: mxbFiltersTogglePulse 2.6s ease-in-out infinite;
}
.mxb-filters__toggle:hover{
  transform: translateY(-1px) scale(1.02);
  filter: brightness(1.08);
  box-shadow: 0 10px 24px -8px rgba(124,108,255,.7);
}
.mxb-filters__toggle:active{ transform: translateY(0) scale(0.99); }
@keyframes mxbFiltersTogglePulse{
  0%,100%{ box-shadow: 0 8px 20px -8px rgba(124,108,255,.55), 0 0 0 0 rgba(124,108,255,.4); }
  50%{ box-shadow: 0 8px 20px -8px rgba(124,108,255,.55), 0 0 0 7px rgba(124,108,255,0); }
}
.mxb-filters__chevron{
  width:15px; height:15px; flex-shrink:0;
  color:#fff;
  transition: transform .25s ease;
}
.mxb-filters.is-collapsed .mxb-filters__chevron{ transform: rotate(-90deg); }
.mxb-filters__body{
  display:block;
  overflow:hidden;
  max-height:1400px;
  opacity:1;
  transition: max-height .32s ease, opacity .22s ease, margin-top .32s ease;
}
.mxb-filters.is-collapsed .mxb-filters__body{
  max-height:0;
  opacity:0;
  pointer-events:none;
}
.mxb-filters.is-collapsed .mxb-filters__head{ margin-bottom:0; }
.mxb-clear-btn{
  border:1px solid rgba(225,29,72,0.28);
  background: rgba(225,29,72,0.08);
  color:#B4123A;
  font: inherit;
  font-size:11.5px;
  font-weight:700;
  padding:6px 12px;
  border-radius:9px;
  cursor:pointer;
  transition: background .15s ease, transform .15s ease;
}
.mxb-clear-btn:hover{ background: rgba(225,29,72,0.15); transform: translateY(-1px); }

.mxb-filter-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:9px;
}
/* ⭐ نسخه‌یِ ثابتِ ۶ ستونه — تا فیلدها همیشه دقیقاً ۶تا-۶تا (یه ردیفِ بالا،
   یه ردیفِ پایین) بچینن، نه هرچقدر که auto-fill جا کرد. تویِ گوشی
   (رجوع کن به مدیاکوئریِ max-width:720 پایین‌تر) دوباره auto-fill می‌شه. */
.mxb-filter-grid--fixed6{
  grid-template-columns: repeat(6, minmax(140px, 1fr));
}
/* ⭐ رفعِ اسکرول افقیِ الکی رویِ صفحه‌هایِ تبلتی/سرفیس: بینِ موبایل (۷۲۰px)
   و دسکتاپِ بزرگ، ۶ ستونِ ثابت با حداقلِ ۱۴۰px کنارِ سایدبار جا نمی‌شه و
   کلِ محتوا مجبور به اسکرولِ افقی می‌شد. این‌جا با auto-fit، خودِ گرید
   تصمیم می‌گیره چندتا فیلد کنارِ هم جا بشه، بدونِ اینکه کمینه‌عرضش از
   عرضِ واقعیِ ستونِ محتوا بیشتر بشه. */
@media (max-width: 1300px) and (min-width: 721px){
  .mxb-filter-grid--fixed6{
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

.mxb-filters__apply-row{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(var(--ink),0.1);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

/* دکمه‌یِ «جمع‌کردنِ فیلترها» — پایینِ باکسِ فیلترها، هم‌شکل و هم‌جذابیتِ
   دکمه‌یِ بالا (.mxb-filters__toggle)؛ کلیک روش دقیقاً همون کاریِ که
   دکمه‌یِ بالا می‌کنه رو انجام می‌ده: بازوبسته‌کردنِ بدنه‌یِ فیلترها. */
.mxb-collapse-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:none;
  margin:0;
  cursor:pointer;
  font:inherit;
  font-size:11.5px;
  font-weight:800;
  color:#fff;
  padding:7px 14px 7px 12px;
  border-radius:999px;
  background: linear-gradient(135deg, var(--accent-mint), var(--accent-lav));
  box-shadow: 0 8px 20px -8px rgba(5,150,105,.5);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  animation: mxbFiltersTogglePulse 2.6s ease-in-out infinite;
  white-space:nowrap;
}
.mxb-collapse-btn:hover{
  transform: translateY(-1px) scale(1.02);
  filter: brightness(1.08);
  box-shadow: 0 10px 24px -8px rgba(5,150,105,.7);
}
.mxb-collapse-btn:active{ transform: translateY(0) scale(0.99); }
.mxb-collapse-btn__chevron{
  width:14px; height:14px; flex-shrink:0;
  color:#fff;
  transition: transform .25s ease;
}
.mxb-filters.is-collapsed .mxb-collapse-btn__chevron{ transform: rotate(180deg); }
.mxb-field{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.mxb-field label{
  font-size:10.5px;
  font-weight:700;
  color: var(--text-muted);
  padding-inline-start:2px;
}
.mxb-field input,
.mxb-field select{
  width:100%;
  padding: 7px 10px;
  border-radius: var(--radius-field);
  border: 1px solid rgba(var(--ink),0.14);
  background: rgba(255,255,255,0.6);
  color: var(--text-paper);
  font: inherit;
  font-size: 12px;
  outline:none;
  transition: border-color .15s ease, background .15s ease;
}
.mxb-field input:focus,
.mxb-field select:focus{ border-color: var(--accent-lav); background: rgba(255,255,255,0.85); }
.mxb-field select:disabled{ opacity:0.55; cursor:not-allowed; }

/* ⭐ علامتِ ⚠️ کنارِ لیبلِ یک فیلتر — وقتی طبقِ کارنامه‌یِ دانش‌آموزِ فعلی،
   حداقل یکی از گزینه‌هاش کاملاً غیرمجاز باشه (مثلاً «روزانه» تویِ «نوع
   دانشگاه - دوره»؛ ر.ک. mxbUpdatePeriodEligibilityWarning تویِ majors.js). */
.mxb-field__warn-badge{
  display:inline-block;
  margin-inline-start:4px;
  font-size:11.5px;
  line-height:1;
  cursor:help;
  opacity:.6; /* ⭐ کم‌رنگ، چون فقط هشدارِ راهنماست نه خطای مسدودکننده */
}
.mxb-field__warn-badge[hidden]{ display:none; }

/* فیلتر هوشمند — دکمه‌یِ رنگی و پراِفکت، فعلاً بدون کارکرد (بعداً مشخص می‌شه چیکار کنه) */
.mxb-field--smart .mxb-field label{ color: transparent; user-select:none; }

/* ⭐ فیلدِ «نمایش روی نقشه» — همون قدِ بقیه‌یِ فیلدها (لیبلِ نامرئی فقط
   جای لیبل رو نگه می‌داره تا دکمه هم‌ردیفِ بقیه بشینه)؛ خودِ دکمه تویِ
   style/mxb-iran-map.css پررنگ و متمایز استایل شده تا چشم‌گیر باشه. */
.mxb-field--maptoggle label{ color: transparent; user-select:none; }
.mxb-smart-btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:100%;
  border:none;
  cursor:pointer;
  font:inherit;
  font-size:13px;
  font-weight:800;
  color:#fff;
  padding:9px 14px;
  border-radius: var(--radius-field);
  background: linear-gradient(120deg, #FF3CAC, #784BA0 45%, #2B86C5);
  background-size:220% 220%;
  box-shadow: 0 8px 20px -7px rgba(120,75,160,.65), 0 0 0 1px rgba(255,255,255,.18) inset;
  overflow:hidden;
  isolation:isolate;
  animation: mxbSmartBtnGradient 5s ease infinite, mxbSmartBtnGlow 2.4s ease-in-out infinite;
  transition: transform .18s ease, filter .18s ease;
}
.mxb-smart-btn:hover{ transform: translateY(-1px) scale(1.015); filter: brightness(1.1); }
.mxb-smart-btn:active{ transform: translateY(0) scale(0.98); }
.mxb-smart-btn__icon{ font-size:14px; filter: drop-shadow(0 0 4px rgba(255,255,255,.85)); }
.mxb-smart-btn__text{ white-space:nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.2); }
.mxb-smart-btn__shine{
  content:"";
  position:absolute;
  top:0; bottom:0; left:-60%;
  width:40%;
  background: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-18deg);
  animation: mxbSmartBtnShine 3.2s ease-in-out infinite;
  pointer-events:none;
}
@keyframes mxbSmartBtnGradient{
  0%,100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}
@keyframes mxbSmartBtnGlow{
  0%,100%{ box-shadow: 0 8px 20px -7px rgba(120,75,160,.65), 0 0 0 1px rgba(255,255,255,.18) inset, 0 0 0 0 rgba(255,60,172,.45); }
  50%{ box-shadow: 0 8px 22px -6px rgba(43,134,197,.7), 0 0 0 1px rgba(255,255,255,.22) inset, 0 0 0 6px rgba(255,60,172,0); }
}
@keyframes mxbSmartBtnShine{
  0%{ left:-60%; }
  100%{ left:130%; }
}

/* اعلامِ نتایج («X رشته‌محل پیدا شد» + بجِ «هنوز انتخاب نکردی») — ته‌ِ
   ردیفِ بالا (سمتِ چپ)، توی یه کارتِ کوچیکِ جدا تا از بقیه‌یِ ردیف چشم‌گیرتر باشه. */
.mxb-results-head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin:0;
  justify-self:end;
  max-width:100%;
}
.mxb-results-count{
  margin:0;
  padding:5px 11px;
  border-radius:12px;
  background: rgba(255,255,255,.55);
  border:1px solid rgba(var(--ink),0.1);
  font-size:12.5px;
  font-weight:700;
  color: var(--text-muted);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  text-align:center;
}

/* بج جذابِ «چندتاشو هنوز انتخاب نکردی» — کنارِ متنِ تعدادِ کلِ نتایج،
   بعدِ جست‌وجو/اعمالِ فیلترها میاد تا با یه نگاه معلوم شه چقدر کار مونده. */
.mxb-results-pending{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 11px 3px 9px;
  border-radius:999px;
  font-size:12.5px;
  font-weight:800;
  color:#7C2D12;
  background: linear-gradient(120deg, #FDE68A, #FCA5A5 65%, #FDBA74);
  background-size:180% 180%;
  border:1px solid rgba(217,119,6,0.35);
  box-shadow: 0 2px 8px rgba(217,119,6,0.22);
  animation: mxbPendingSheen 3.2s ease-in-out infinite, mxbPendingPop .35s ease;
  white-space:nowrap;
}
.mxb-results-pending__num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:#fff;
  color:#C2410C;
  font-size:11.5px;
  font-weight:900;
}
.mxb-results-pending--done{
  color:#065F46;
  background: linear-gradient(120deg, #A7F3D0, #6EE7B7 65%, #99F6E4);
  border-color: rgba(5,150,105,0.35);
  box-shadow: 0 2px 8px rgba(5,150,105,0.2);
  animation: mxbPendingPop .35s ease;
}
.mxb-results-pending--done .mxb-results-pending__num{ color:#047857; }
@keyframes mxbPendingSheen{
  0%,100%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
}
@keyframes mxbPendingPop{
  0%{ transform: scale(.85); opacity:0; }
  60%{ transform: scale(1.05); opacity:1; }
  100%{ transform: scale(1); }
}

/* یه سطرِ مینیمالِ «نمایشِ همه‌یِ توضیحات» با یه سوییچِ کوچیک جلوش —
   جایگزینِ دو دکمه‌یِ قبلی؛ کنترلِ سراسریِ نوارهایِ 📝 زیرِ ردیف‌ها
   (ر.ک. .mxb-note پایین‌تر). */
.mxb-notes-toggle-group{
  display:flex;
  align-items:center;
}
.mxb-notes-switch-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  padding:8px 12px;
  border-radius:11px;
  border:1px solid rgba(var(--ink),0.12);
  background: rgba(255,255,255,0.45);
  cursor:pointer;
  user-select:none;
  transition: background .15s ease, border-color .15s ease;
}
.mxb-notes-switch-row:hover{ border-color: rgba(124,108,255,.35); }
.mxb-notes-switch-row__label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:700;
  color: var(--text-muted);
  transition: color .15s ease;
}
.mxb-notes-switch-row__icon{ font-size:13px; }
.mxb-notes-switch{ position:relative; display:inline-flex; flex:0 0 auto; }
.mxb-notes-switch input{
  position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; z-index:1;
}
.mxb-notes-switch__track{
  display:block;
  width:34px; height:19px;
  border-radius:999px;
  background: rgba(var(--ink),.18);
  position:relative;
  transition: background .18s ease;
}
.mxb-notes-switch__thumb{
  position:absolute; top:2px; right:2px;
  width:15px; height:15px;
  border-radius:50%;
  background:#fff;
  box-shadow: 0 2px 5px rgba(0,0,0,.2);
  transition: transform .18s var(--ease-pop, ease);
}
.mxb-notes-switch input:checked ~ .mxb-notes-switch__track{
  background: linear-gradient(135deg, var(--accent-lav), var(--accent-mint));
}
.mxb-notes-switch input:checked ~ .mxb-notes-switch__track .mxb-notes-switch__thumb{ transform: translateX(-15px); }
.mxb-notes-switch input:focus-visible ~ .mxb-notes-switch__track{ outline:2px solid var(--accent-lav); outline-offset:2px; }
.mxb-notes-switch-row:has(input:checked) .mxb-notes-switch-row__label{ color: var(--text-paper); }
.mxb-notes-switch-row:has(input:checked){ border-color: transparent; background: rgba(124,108,255,0.08); }

/* ---------- ردیفِ دکمه‌هایِ «اعمالِ فیلترها» / «لیستِ انتخاب‌ها» ---------- */
.mxb-actions-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:16px;
}

/* جعبه‌یِ جست‌وجویِ مینیمالِ هم‌ردیف با دکمه‌ها — دقیقاً زیرِ باکسِ فیلترها و
   بالایِ جدولِ نتایج؛ کنارِ بقیه‌یِ دکمه‌هایِ همین ردیف قرار می‌گیره. */
.mxb-inline-search{
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 1 200px;
  min-width:130px;
  padding:6px 12px;
  border-radius:11px;
  border:1px solid rgba(var(--ink),0.14);
  background: rgba(255,255,255,0.45);
  transition: border-color .15s ease, background .15s ease;
}
.mxb-inline-search:focus-within{
  border-color: var(--accent-lav);
  background: rgba(255,255,255,0.8);
}
.mxb-inline-search__icon{ width:14px; height:14px; flex-shrink:0; color: var(--text-faint); }
.mxb-inline-search__input{
  flex:1;
  min-width:0;
  border:none; outline:none; background:transparent;
  font: inherit; font-size:12px; font-weight:600; color: var(--text-paper);
}
.mxb-inline-search__input::placeholder{ color: var(--text-faint); }

.mxb-apply-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:none;
  padding:9px 18px;
  border-radius:11px;
  font: inherit;
  font-size:12.5px;
  font-weight:800;
  color:#fff;
  cursor:pointer;
  white-space:nowrap;
  background: linear-gradient(135deg, var(--accent-lav), var(--accent-mint));
  box-shadow: 0 6px 14px -8px rgba(124,108,255,.5);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.mxb-apply-btn:hover{ transform: translateY(-1px); filter:brightness(1.08); }
.mxb-apply-btn:active{ transform: translateY(0); filter:brightness(0.96); }
.mxb-apply-btn__icon{ font-size:12.5px; }

.mxb-filters__apply-row .mxb-apply-btn{
  padding:10px 22px;
  font-size:13px;
}

.mxb-selections-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid rgba(var(--ink),0.14);
  padding:8px 14px;
  border-radius:11px;
  font: inherit;
  font-size:12px;
  font-weight:700;
  color: var(--text-paper);
  cursor:pointer;
  white-space:nowrap;
  background: rgba(255,255,255,0.45);
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
.mxb-selections-btn:hover{ background: rgba(255,255,255,0.8); transform: translateY(-1px); border-color: var(--accent-lav); }
.mxb-selections-btn:active{ transform: translateY(0); }
.mxb-selections-btn__icon{ font-size:12.5px; }
.mxb-selections-btn.is-active{
  background: linear-gradient(135deg, var(--accent-lav), var(--accent-mint));
  border-color: transparent;
  color:#fff;
}
.mxb-selections-badge{
  min-width:18px;
  height:18px;
  padding:0 4px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-size:10.5px;
  font-weight:800;
  color:#fff;
  background: linear-gradient(135deg, var(--accent-amber), var(--accent-mint));
}
.mxb-selections-btn.is-active .mxb-selections-badge{
  background: rgba(255,255,255,0.3);
}

/* ---------- دکمه‌هایِ گردِ «واگرد/ازنو» — یه گروهِ جدا، همیشه کنارِ تب‌هایِ
   نتایج/لیستِ انتخاب‌ها/سطلِ‌آشغال (رشته‌ها) و بالایِ ستون‌هایِ ویزاردِ
   «انتخابِ هوشمند» (رشته‌ها + شهرها/استان‌ها) — طراحیِ مشترک، دایره‌ای و
   گرادیانتی، با فلش‌هایِ ↶/↷ که رفتارِ آشنایِ Ctrl+Z/Ctrl+Y رو تویِ خودِ
   صفحه هم می‌دن. ---------- */
.msx-sidebar-mxb__group--undo.msx-sidebar-mxb__group--undo{
  display:flex;
  flex-direction:row; /* ⭐ .msx-sidebar-mxb__group پایه‌ستونیه و چون بعداً
                          تویِ فایل میاد رویِ همین قانون (با تکرارِ کلاس)
                          غلبه می‌کنه؛ باید کنارِ‌هم (ردیفی) بمونن، نه زیرِ هم */
  align-items:center;
  justify-content:center;
  gap:10px;
}
.mxb-round-undo-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:38px;
  height:38px;
  border:none;
  border-radius:50%;
  padding:0;
  cursor:pointer;
  color:#fff;
  background: linear-gradient(135deg, var(--accent-lav, #7C6CFF), var(--accent-mint, #34D399));
  box-shadow: 0 3px 10px -3px rgba(124,108,255,0.55);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.mxb-round-undo-btn__icon{
  font-size:17px;
  font-weight:900;
  line-height:1;
  transform: translateY(-1px);
}
.mxb-round-redo-btn{
  background: linear-gradient(135deg, var(--accent-mint, #34D399), var(--accent-lav, #7C6CFF));
}
.mxb-round-undo-btn:hover:not(:disabled){
  transform: translateY(-2px) scale(1.06);
  filter:brightness(1.08);
  box-shadow: 0 6px 16px -4px rgba(124,108,255,0.6);
}
.mxb-round-undo-btn:active:not(:disabled){ transform: translateY(0) scale(0.94); }
.mxb-round-undo-btn:disabled{
  opacity:.35;
  cursor:default;
  pointer-events:none;
  box-shadow:none;
  filter:grayscale(0.4);
}

/* دکمه‌یِ «پاک‌کردنِ همه» — فقط تویِ حالتِ «لیستِ انتخاب‌ها» و وقتی چیزی انتخاب شده، نشون داده می‌شه */
.mxb-clear-selections-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  border:none;
  background: rgba(225,29,72,0.1);
  color:#B4123A;
  padding:6px 12px;
  border-radius:999px;
  font: inherit;
  font-size:11.5px;
  font-weight:700;
  cursor:pointer;
  transition: background .15s ease, transform .1s ease;
}
.mxb-clear-selections-btn:hover{ background: rgba(225,29,72,0.18); transform: translateY(-1px); }

/* دکمه‌یِ «لغوِ نشانِ همه» — برخلافِ حذف، مخرب نیست، پس رنگش هم‌رنگِ خودِ
   نشانِ ⭐ (کهربایی) و جدا از قرمزِ عملیاتِ حذفه. */
.mxb-unmark-all-btn{
  background: rgba(217,119,6,0.12);
  color:#B45309;
}
.mxb-unmark-all-btn:hover{ background: rgba(217,119,6,0.2); }

/* دکمه‌یِ «بازگردانیِ همه» — هم‌رنگِ آیکونِ ↩️ بازگردانیِ تکی (سبز)، تا از
   رنگِ قرمزِ عملیاتِ حذف/تخلیه واضح جدا باشه. */
.mxb-restore-all-btn{
  background: rgba(16,163,116,0.14);
  color:#0D8A63;
}
.mxb-restore-all-btn:hover{ background: rgba(16,163,116,0.24); }

/* ---------- راهنمایِ حالتِ اولیه، پیش از زدنِ «اعمالِ فیلترها» ---------- */
.mxb-initial-hint{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
  padding:36px 20px;
  border-radius:16px;
  border:1.5px dashed rgba(var(--ink),0.16);
  background: rgba(255,255,255,0.35);
}
.mxb-initial-hint__icon{ font-size:26px; }
.mxb-initial-hint p{
  margin:0;
  max-width:420px;
  font-size:13px;
  font-weight:600;
  color: var(--text-muted);
  line-height:1.9;
}

@media (max-width: 560px){
  .mxb-actions-row{ flex-wrap:wrap; }
}

/* ---------- جدولِ جذابِ نتایجِ رشته‌محل ----------
   نسخه‌یِ مینیمال: کمتر ستون (استان تویِ شهر ادغام شد، نیم‌سال فقط وقتی
   غیرِ«اول»ه نشون داده می‌شه، پذیرش+جنسیت یه ستونِ «ویژگی‌ها» شدن)، عرضِ
   هر ستون درصدیِ ثابته (table-layout:fixed) تا کلِ جدول همیشه دقیقاً
   توی همون فضایی که داره جا بشه — بدونِ اسکرولِ افقی، رویِ هر عرضِ صفحه‌ای. */
.mxb-table-wrap{
  overflow-x:hidden;
  overflow-y:auto;
  padding-bottom:4px;
  scrollbar-width:thin;
}
.mxb-table{
  width:100%;
  table-layout:fixed;
  border-collapse: separate;
  border-spacing: 0 2px;
}

/* هدرِ جدول: مینیمال و تک‌رنگ (آبیِ ملایم)، هر ستون یه مستطیلِ جداگانه‌ی
   گردگوشه با یه فاصله‌ی کوچیک از ستونِ بغلی. فاصله از رویِ padding خودِ
   th میاد، نه border-spacing، تا فقط رویِ هدر اثر بذاره و ردیف‌هایِ جدول
   (که پشتِ‌سرهم چسبیده‌ان) دست‌نخورده بمونن. */
.mxb-table thead th{
  position:sticky;
  top:0;
  z-index:1;
  padding:0 1.5px;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
  text-align:center;
}
/* عرضِ درصدیِ هر ستون — جمعش با عرضِ ثابتِ ستونِ چک‌باکس (پایین‌تر، ۳۴px)
   تقریباً برابرِ کلِ عرضِ جدوله؛ همین‌جوری کل جدول همیشه دقیقاً توی همون
   فضایی که داره جا می‌شه، مستقل از پهنایِ صفحه. */
.mxb-th--num{    width:3.5%; }
.mxb-th--code{   width:7%; }
.mxb-th--field{  width:13%; }
.mxb-th--uni{    width:19%; }
.mxb-th--city{   width:9%; }
.mxb-th--period{ width:11%; }
.mxb-th--feat{   width:11%; }
.mxb-th--commit{ width:8%; }
.mxb-th--cap{    width:6%; }
.mxb-th--chance{ width:9.5%; }
.mxb-th-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:6.5px 5px;
  color:#3A414E;
  background:#D3D7DE;
  border:1px solid rgba(90,100,118,0.32);
  border-radius:8px;
  letter-spacing:.2px;
  box-shadow: 0 2px 8px rgba(90,100,118,0.18);
  transition: filter .15s ease, box-shadow .15s ease, transform .15s ease;
}
.mxb-table thead th.mxb-th--sortable{
  cursor:pointer;
  user-select:none;
}
.mxb-table thead th.mxb-th--sortable:hover .mxb-th-inner{ filter: brightness(1.14); transform: translateY(-1px); }
.mxb-table thead th.mxb-th--sortable:active .mxb-th-inner{ filter: brightness(0.94); transform: translateY(0); }
.mxb-sort-icon{
  display:inline-block;
  width:9px;
  margin-right:4px;
  opacity:.65;
  font-size:10px;
}
.mxb-sort-icon::before{ content:"⇅"; }
.mxb-table thead th.mxb-th--sortable.is-sorted .mxb-sort-icon{ opacity:1; }
.mxb-table thead th.mxb-th--sortable.is-sorted.mxb-sort--asc .mxb-sort-icon::before{ content:"▲"; }
.mxb-table thead th.mxb-th--sortable.is-sorted.mxb-sort--desc .mxb-sort-icon::before{ content:"▼"; }

.mxb-row{
  /* بک‌گراندِ ردیف با inline style (بر اساسِ رنگِ رشته) ست می‌شه؛ این فقط فال‌بکه */
  background: var(--card-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 30px -22px rgba(55,62,75,0.30);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease,
              opacity .22s cubic-bezier(.4,0,.2,1);
}
.mxb-row:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -18px rgba(124,108,255,0.32);
  filter: brightness(1.05);
}
.mxb-row td{
  padding:3px 5px;
  border-top:1px solid var(--card-border);
  border-bottom:1px solid var(--card-border);
  text-align:center;
  vertical-align:middle;
  white-space:nowrap;
}
.mxb-row td:first-child{ border-right:1px solid var(--card-border); border-top-right-radius:10px; border-bottom-right-radius:10px; }
.mxb-row td:last-child{ border-left:1px solid var(--card-border); border-top-left-radius:10px; border-bottom-left-radius:10px; }

/* همه‌یِ نوشته‌هایِ معمولیِ ردیف یه رنگِ یکدست دارن (بک‌گراند بر اساسِ رشته فرق می‌کنه،
   نه نوشته‌ها) — به‌جز چیپِ «دوره» که به‌عمد رنگِ متفاوت داره (توضیح پایین‌تر). */
.mxb-rownum,
.mxb-code,
.mxb-field-name,
.mxb-td--uni,
.mxb-province-mini,
.mxb-city,
.mxb-row__extra,
.mxb-chip--exam,
.mxb-chip--gender,
.mxb-chip--semester,
.mxb-chip--commit-yes,
.mxb-chip--commit-no,
.mxb-cap__num,
.mxb-cap__label{
  color: var(--text-paper);
}

.mxb-rownum{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px; height:16px;
  border-radius:50%;
  background: rgba(255,255,255,0.5);
  font-size:9px;
  font-weight:800;
}

.mxb-code{
  display:inline-block;
  padding:2px 7px;
  border-radius:8px;
  background: rgba(255,255,255,0.45);
  font-weight:900;
  font-size:11px;
  white-space:nowrap;
}

.mxb-td--field{ text-align:center; overflow:hidden; }
.mxb-field-row{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;
  gap:6px;
  white-space:nowrap;
  min-width:0;
}
.mxb-field-name{
  display:inline-block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:10.5px;
  font-weight:800;
  line-height:1.45;
  white-space:nowrap;
}
.mxb-main__extras{ display:inline-flex; align-items:center; flex-wrap:nowrap; gap:6px; flex-shrink:0; }

/* ===========================================================
   بادجِ «دفترچه» و «سهمیه» — نمادِ کوچیکِ مرتب کنارِ اسمِ رشته
   به‌جایِ نوشتنِ متنِ کاملِ طولانی. با هاور/فوکوس/تپ، توضیحِ کامل
   تویِ یه تولتیپِ شناور (mxb-tooltip) نشون داده می‌شه.
   =========================================================== */
.mxb-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px; height:18px;
  border:none;
  border-radius:50%;
  cursor:pointer;
  font: inherit;
  padding:0;
  box-shadow: 0 2px 6px -1px rgba(46,36,25,.35), 0 0 0 1px rgba(255,255,255,.55) inset;
  transition: transform .18s var(--ease-pop), box-shadow .18s ease, filter .18s ease;
}
.mxb-badge:hover,
.mxb-badge:focus-visible{
  transform: translateY(-2px) scale(1.08);
  filter: brightness(1.06);
}
.mxb-badge:active{ transform: translateY(0) scale(.96); }
.mxb-badge:focus-visible{ outline: 2px solid rgba(255,255,255,.9); outline-offset:2px; }
.mxb-badge__icon{
  font-size:12px;
  line-height:1;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
}
.mxb-badge--booklet-deprived{ background: linear-gradient(145deg, #F6A93B, #D97706); }
.mxb-badge--booklet-health{   background: linear-gradient(145deg, #38BDF8, #0284C7); }
.mxb-badge--booklet-tuition{  background: linear-gradient(145deg, #A78BFA, #7C3AED); }
.mxb-badge--quota{            background: linear-gradient(145deg, #34D399, #059669); }
/* ⭐ کدهایِ کنکورِ زبان/هنر — هم‌رنگِ چیپ‌هایِ زبان/هنرِ کنارِ اسمِ دانش‌آموز */
.mxb-badge--kn-language{      background: linear-gradient(145deg, #60A5FA, #2563EB); }
.mxb-badge--kn-art{           background: linear-gradient(145deg, #F472B6, #DB2777); }
.mxb-code-wrap{
  display:inline-flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
}
.mxb-minimal-card__kn{ margin-inline-end:3px; font-size:11px; }
.mxb-code-wrap .mxb-badge{ width:16px; height:16px; flex:0 0 auto; }
.mxb-code-wrap .mxb-badge__icon{ font-size:10.5px; }

/* نبضِ ظریف تا چشم رو به‌سمتِ بادج جلب کنه، بدونِ اینکه مزاحم بشه */
@keyframes mxbBadgePulse{
  0%, 100% { box-shadow: 0 2px 6px -1px rgba(46,36,25,.35), 0 0 0 1px rgba(255,255,255,.55) inset, 0 0 0 0 rgba(217,119,6,.35); }
  50%      { box-shadow: 0 2px 6px -1px rgba(46,36,25,.35), 0 0 0 1px rgba(255,255,255,.55) inset, 0 0 0 5px rgba(217,119,6,0); }
}
@keyframes mxbBadgePulseSky{
  0%, 100% { box-shadow: 0 2px 6px -1px rgba(46,36,25,.35), 0 0 0 1px rgba(255,255,255,.55) inset, 0 0 0 0 rgba(2,132,199,.35); }
  50%      { box-shadow: 0 2px 6px -1px rgba(46,36,25,.35), 0 0 0 1px rgba(255,255,255,.55) inset, 0 0 0 5px rgba(2,132,199,0); }
}
@keyframes mxbBadgePulseViolet{
  0%, 100% { box-shadow: 0 2px 6px -1px rgba(46,36,25,.35), 0 0 0 1px rgba(255,255,255,.55) inset, 0 0 0 0 rgba(124,58,237,.35); }
  50%      { box-shadow: 0 2px 6px -1px rgba(46,36,25,.35), 0 0 0 1px rgba(255,255,255,.55) inset, 0 0 0 5px rgba(124,58,237,0); }
}
.mxb-badge--booklet-deprived{ animation: mxbBadgePulse 2.6s ease-in-out infinite; }
.mxb-badge--booklet-health{   animation: mxbBadgePulseSky 2.6s ease-in-out infinite; }
.mxb-badge--booklet-tuition{  animation: mxbBadgePulseViolet 2.6s ease-in-out infinite; }

/* ---- تولتیپِ شناور (به body متصل می‌شه تا زیرِ overflow جدول بریده نشه) ---- */
.mxb-tooltip{
  position:absolute;
  z-index:9999;
  max-width:300px;
  min-width:180px;
  padding:12px 14px;
  border-radius:16px;
  background: linear-gradient(165deg, #2E2419 0%, #241B12 100%);
  box-shadow: 0 20px 45px -14px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08) inset;
  color:#FFF6EA;
  text-align:right;
  direction: rtl;
  opacity:0;
  visibility:hidden;
  transform: translateY(6px) scale(.96);
  transform-origin: bottom center;
  transition: opacity .16s ease, transform .16s var(--ease-pop), visibility .16s;
  pointer-events:none;
}
.mxb-tooltip.is-visible{
  opacity:1;
  visibility:visible;
  transform: translateY(0) scale(1);
}
.mxb-tooltip--below{ transform-origin: top center; }
.mxb-tooltip__glow{
  position:absolute; inset:0;
  border-radius:inherit;
  background: radial-gradient(120% 140% at 15% 0%, rgba(217,119,6,.35), transparent 60%);
  pointer-events:none;
}
.mxb-tooltip--mint .mxb-tooltip__glow{
  background: radial-gradient(120% 140% at 15% 0%, rgba(5,150,105,.35), transparent 60%);
}
.mxb-tooltip--sky .mxb-tooltip__glow{
  background: radial-gradient(120% 140% at 15% 0%, rgba(2,132,199,.35), transparent 60%);
}
.mxb-tooltip--violet .mxb-tooltip__glow{
  background: radial-gradient(120% 140% at 15% 0%, rgba(124,58,237,.35), transparent 60%);
}
.mxb-tooltip__head{
  position:relative;
  font-size:11px;
  font-weight:800;
  letter-spacing:.2px;
  color:#FBBF6B;
  margin-bottom:4px;
}
.mxb-tooltip--mint .mxb-tooltip__head{ color:#6EE7B7; }
.mxb-tooltip--sky .mxb-tooltip__head{ color:#7DD3FC; }
.mxb-tooltip--violet .mxb-tooltip__head{ color:#C4B5FD; }
.mxb-tooltip__body{
  position:relative;
  font-size:12.5px;
  font-weight:600;
  line-height:1.9;
}
.mxb-tooltip__arrow{
  position:absolute;
  bottom:-6px;
  width:12px; height:12px;
  background: #241B12;
  transform: translateX(-50%) rotate(45deg);
  border-radius:2px;
  box-shadow: 2px 2px 4px -1px rgba(0,0,0,.35);
}
.mxb-tooltip--below .mxb-tooltip__arrow{
  bottom:auto;
  top:-6px;
  box-shadow: -2px -2px 4px -1px rgba(0,0,0,.35);
}
@media (max-width: 640px){
  .mxb-tooltip{ max-width: min(88vw, 300px); }
}

/* ---- پاپ‌آورِ «جابه‌جایی با شماره» — همون حال‌وهوایِ تولتیپِ شناور، ولی
   برخلافِ اون تعاملی‌ه (اینپوت و دکمه‌یِ داخلش قابلِ‌کلیک/تایپ‌ان). ---- */
.mxb-movenum-pop{
  position:absolute;
  z-index:9999;
  width:190px;
  padding:12px 14px;
  border-radius:16px;
  background: linear-gradient(165deg, #1E2A22 0%, #16211A 100%);
  box-shadow: 0 20px 45px -14px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08) inset;
  color:#EFFFF6;
  text-align:right;
  direction: rtl;
  opacity:0;
  visibility:hidden;
  transform: translateY(6px) scale(.96);
  transform-origin: bottom center;
  transition: opacity .16s ease, transform .16s var(--ease-pop), visibility .16s;
  pointer-events:none;
}
.mxb-movenum-pop.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform: translateY(0) scale(1);
}
.mxb-movenum-pop--below{ transform-origin: top center; }
.mxb-movenum-pop__glow{
  position:absolute; inset:0;
  border-radius:inherit;
  background: radial-gradient(120% 140% at 15% 0%, rgba(5,150,105,.35), transparent 60%);
  pointer-events:none;
}
.mxb-movenum-pop__head{
  position:relative;
  font-size:11px;
  font-weight:800;
  letter-spacing:.2px;
  color:#6EE7B7;
  margin-bottom:8px;
}
.mxb-movenum-pop__form{
  position:relative;
  display:flex;
  justify-content:center;
  gap:6px;
}
.mxb-movenum-pop__input{
  /* ⭐ عمداً عریض نمی‌شه — عددِ جایگاه همیشه ۱ تا ۳ رقمه، پس اینپوت رو
     جمع‌وجور و هم‌اندازه‌یِ خودِ عدد نگه می‌داریم. اگه اینپوت کشیده و
     پهن باشه، هر هایلایتی (چه ::selection چه is-all-selected) روش
     می‌شینه یه نوارِ رنگیِ بزرگ به‌نظر می‌رسه، نه «این عدد سلکت شده» —
     با این اندازه‌یِ کوچیک، هایلایت دقیقاً دورِ خودِ رقم‌ها می‌شینه. */
  flex:0 0 auto;
  width:56px;
  height:38px;
  padding:0 6px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color:#fff;
  font-size:20px;
  font-weight:800;
  text-align:center;
  direction: ltr;
}
.mxb-movenum-pop__input:focus{
  outline:none;
  border-color: var(--accent-mint, #34D399);
  background: rgba(255,255,255,.12);
}
/* ⭐ هایلایتِ انتخاب‌شدنِ عدد (وقتی پاپ‌آور باز می‌شه یا با Tab فوکوس می‌گیره)
   رنگِ پیش‌فرضِ مرورگر رویِ این پس‌زمینه‌یِ تیره تقریباً دیده نمی‌شد؛ یه رنگِ
   پررنگ و پرکنتراست (سبزِ اکسنت با متنِ تیره) جایگزینش می‌کنیم تا کاملاً
   واضح باشه که کل عدد سلکت شده. این استایل برایِ همه‌یِ پاپ‌آورهایِ
   «جابه‌جایی با شماره»یِ سایت مشترکه (رشته‌ها، شهرها، استان‌ها، دانشگاه‌ها). */
.mxb-movenum-pop__input::selection{
  background: var(--accent-mint, #34D399);
  color:#08130D;
}
.mxb-movenum-pop__input::-moz-selection{
  background: var(--accent-mint, #34D399);
  color:#08130D;
}
/* ⭐ کلاسِ کمکیِ is-all-selected: بک‌آپِ کاملاً مطمئن برایِ همون هایلایتِ
   بالا — رویِ خیلی از مرورگرهایِ موبایل (به‌خصوص وقتی فوکوس با جاوااسکریپت
   انجام می‌شه)، ::selection نیتیو اصلاً رندر نمی‌شه یا خیلی دیر می‌آد. این
   کلاس با فوکوس شدنِ اینپوت اضافه و با اولین تایپ برداشته می‌شه (ر.ک.
   majors.js و mxb-genius.js) و کلِ پس‌زمینه‌یِ اینپوت رو پررنگ می‌کنه تا
   کاملاً واضح باشه که «کل عدد الان انتخاب‌شده، تایپ کن جایگزینش می‌شه». */
.mxb-movenum-pop__input.is-all-selected{
  background: var(--accent-mint, #34D399) !important;
  border-color: var(--accent-mint, #34D399) !important;
  color:#08130D !important;
}
/* ⭐ چشمک روی همین اینپوت هر بار که پاپ‌آورِ «جابه‌جایی با شماره» باز می‌شه (حتی اگه همین اینپوت از قبل هم فوکوس بوده) — مستقل از هایلایتِ ثابتِ is-all-selected بالا: این کلاس هر دفعه از جاواسکریپت (حذف+اضافهِ دوباره) ریستارت می‌شه، پس کاربر همیشه یک چشمکِ تازه می‌بینه، نه فقط دفعه‌ی اول. */
@keyframes mxbMoveNumFlash{
  0%{ box-shadow: 0 0 0 0 rgba(52,211,153,.85); }
  70%{ box-shadow: 0 0 0 9px rgba(52,211,153,0); }
  100%{ box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}
.mxb-movenum-pop__input.mxb-movenum-flash{
  animation: mxbMoveNumFlash .5s ease-out;
}
.mxb-movenum-pop__go{
  flex:0 0 auto;
  height:34px;
  padding:0 14px;
  border:none;
  border-radius:10px;
  background: linear-gradient(135deg, var(--accent-lav, #7C6CFF), var(--accent-mint, #34D399));
  color:#fff;
  font-size:12.5px;
  font-weight:800;
  cursor:pointer;
  transition: transform .1s ease, filter .15s ease;
}
.mxb-movenum-pop__go:hover{ filter:brightness(1.08); }
.mxb-movenum-pop__go:active{ transform: scale(0.95); }
.mxb-movenum-pop__hint{
  position:relative;
  margin-top:6px;
  font-size:11px;
  font-weight:600;
  color: rgba(239,255,246,0.65);
}
.mxb-movenum-pop__arrow{
  position:absolute;
  bottom:-6px;
  width:12px; height:12px;
  background: #16211A;
  transform: translateX(-50%) rotate(45deg);
  border-radius:2px;
  box-shadow: 2px 2px 4px -1px rgba(0,0,0,.35);
}
.mxb-movenum-pop--below .mxb-movenum-pop__arrow{
  bottom:auto;
  top:-6px;
  box-shadow: -2px -2px 4px -1px rgba(0,0,0,.35);
}
@media (max-width: 640px){
  .mxb-movenum-pop{ width: min(80vw, 220px); }
}

.mxb-td--uni{
  text-align:center;
  overflow:hidden;
  font-size:10.5px;
  font-weight:700;
}
.mxb-uni-text{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.mxb-td--city{ text-align:center; overflow:hidden; white-space:nowrap; }
.mxb-city{ display:inline; font-size:10.5px; font-weight:700; white-space:nowrap; }
/* ستونِ ادغام‌شده‌یِ «شهر»: خودِ استان با فونتِ ریزتر و کم‌رنگ‌تر، درست زیرِ
   اسمِ شهر، تا اطلاعاتِ استان از دست نره ولی یه ستونِ جداگانه اشغال نکنه. */
.mxb-province-mini{
  display:block;
  font-size:9px;
  font-weight:600;
  opacity:.62;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mxb-row__extra{
  font-size:10px;
  font-weight:700;
  background: rgba(255,255,255,0.4);
  padding:2px 7px;
  border-radius:999px;
  white-space:nowrap;
  opacity:.85;
}

.mxb-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 7px;
  border-radius:999px;
  font-size:9.5px;
  font-weight:700;
  white-space:nowrap;
}
.mxb-chip--exam{ background: rgba(255,255,255,0.45); }
.mxb-chip--gender{ background: rgba(255,255,255,0.45); }
.mxb-chip--semester{ background: rgba(255,255,255,0.45); }
.mxb-chip--commit-yes{ background: rgba(255,255,255,0.45); }
.mxb-chip--commit-no{ background: rgba(255,255,255,0.45); }

/* ستونِ ادغام‌شده‌یِ «ویژگی‌ها» (پذیرش + جنسیت): دو تا چیپِ کوچیک، کنارِ
   هم و اگه جا نشد از رویِ هم رد بشن (wrap)، بدونِ اینکه ستونِ جداگانه‌ای
   بگیرن. */
.mxb-td--feat{ text-align:center; overflow:hidden; padding-top:4px; padding-bottom:4px; }
.mxb-feat-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:3px;
}
.mxb-td--period{ overflow:hidden; }
.mxb-td--period .mxb-chip{ max-width:100%; }
.mxb-td--period .mxb-chip--period{
  overflow:hidden;
  text-overflow:ellipsis;
  display:inline-block;
  vertical-align:middle;
}

/* چیپ‌هایِ «اصلاحیه» — رشته‌محل‌هایی که سنجش بعدِ انتشارِ دفترچه اضافه، اصلاح یا
   حذفشون کرده. برخلافِ بقیه‌یِ چیپ‌ها، این‌ها رنگِ پُررنگ دارن چون خبرن، نه
   ویژگیِ همیشگیِ ردیف. */
.mxb-chip--status-new{
  background: rgba(22,163,74,0.16);
  color:#15803d;
  border:1px solid rgba(22,163,74,0.35);
}
.mxb-chip--status-modified{
  background: rgba(217,119,6,0.16);
  color:#b45309;
  border:1px solid rgba(217,119,6,0.35);
}
.mxb-chip--status-removed{
  background: rgba(220,38,38,0.16);
  color:#b91c1c;
  border:1px solid rgba(220,38,38,0.4);
  font-weight:700;
}

/* ردیفِ حذف‌شده تویِ لیستِ انتخاب‌ها: کم‌رنگ و با نوارِ قرمزِ کناری، تا تویِ یه
   نگاه معلوم باشه که دیگه قابلِ انتخاب نیست. */
.mxb-row.is-removed{
  opacity:0.62;
  box-shadow: inset 4px 0 0 0 #dc2626;
}
.mxb-row.is-removed .mxb-field-name{ text-decoration: line-through; }

/* ردیفِ سهمیه‌یِ بومیِ استانِ دیگه: کم‌رنگ، بدونِ هاورِ معمولی، و غیرقابل‌کلیک —
   چون این رشته‌محل اصلاً شاملِ استانِ بومیِ این دانش‌آموز نمی‌شه. */
.mxb-row.is-native-blocked{
  opacity:0.5;
  filter:saturate(0.4);
  cursor:not-allowed;
  box-shadow: inset 4px 0 0 0 #9ca3af;
}
.mxb-row.is-native-blocked:hover{
  transform:none;
  filter:saturate(0.4);
  box-shadow: inset 4px 0 0 0 #9ca3af;
}
.mxb-note--native-blocked{
  background: rgba(107,114,128,0.14);
  color:#4b5563;
  border-color: rgba(107,114,128,0.32);
  font-weight:700;
}

/* چیپِ «دوره» (نوعِ دانشگاه: روزانه/نوبت دوم/پیام نور/غیرانتفاعی/شهریه‌پرداز/...)
   عمداً رنگ‌بندیِ خودشو داره — رنگ و بک‌گراند از رویِ inline style (mxbPeriodMeta
   تویِ admin.js) میاد تا هر نوع، رنگِ نوشته‌یِ مخصوصِ خودشو داشته باشه. */
.mxb-chip--period{
  border: 1px solid transparent;
  font-weight:800;
}
/* نوع‌هایِ شهریه‌دار (شهریه‌پرداز و غیرانتفاعی) — چون هزینه‌شون قابلِ‌توجهه،
   برجسته‌تر و پررنگ‌تر نمایش داده می‌شن. */
.mxb-chip--period-emphasis{
  font-weight:900;
  font-size:11px;
  padding:5px 11px;
  box-shadow: 0 0 0 1px currentColor inset, 0 3px 10px -4px currentColor;
  letter-spacing:.2px;
}
/* ⭐ یه پله پایین‌تر از شهریه‌دارها: «نوبت دوم» هم باید تویِ چشم بیاد (چون
   شهریه‌ش با روزانه فرق داره و مشاور باید حواسش بهش باشه)، ولی نه به‌اندازه‌ی
   شهریه‌پرداز/غیرانتفاعی. */
.mxb-chip--period-strong{
  font-weight:900;
  font-size:10.8px;
  padding:4.5px 10px;
  box-shadow: 0 0 0 1px currentColor inset;
  letter-spacing:.15px;
}

.mxb-cap{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:3px 12px;
  border-radius:12px;
  background: rgba(255,255,255,0.45);
}
.mxb-cap__num{ font-size:13.5px; font-weight:900; line-height:1.2; white-space:nowrap; }

.mxb-row-note td{
  padding:0 14px 8px;
  border:none;
  background:transparent;
  text-align:right;
}
.mxb-row-note{ box-shadow:none; background:transparent; transition: opacity .2s ease; }
/* ردیفِ کمکیِ توضیحات، وقتی بسته‌ست، کاملاً بی‌ارتفاع می‌مونه — نه خط، نه
   فاصله‌ی خالی؛ فقط فلشِ ⌄ کنارِ اسمِ رشته (mxb-note-flag) نشون می‌ده که
   توضیحی هست، و با کلیک روش این ردیف باز می‌شه. */
.mxb-row-note.is-collapsed td{ padding:0; }
.mxb-row-note.is-collapsed .mxb-note{
  display:none;
}
.mxb-note{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:9px 14px;
  border-radius:12px;
  background: rgba(217,119,6,0.08);
  border:1px dashed rgba(217,119,6,0.28);
  color: var(--text-muted);
  font-size:12px;
  line-height:1.7;
}

/* نوارِ توضیحاتِ بازشده: چون بازشدنش الان فقط از طریقِ فلشِ کنارِ اسمِ رشته
   (mxb-note-flag) اتفاق می‌افته، خودِ نوار وقتی بازه هم قابلِ‌کلیکه تا با
   یه کلیکِ دیگه دوباره جمع بشه. */
.mxb-note[data-code]{
  cursor:pointer;
  outline:none;
}
.mxb-note[data-code].is-expanded:hover{ filter:brightness(0.98); }
.mxb-note[data-code].is-expanded::after{
  content:"— برایِ جمع‌کردن دوباره کلیک کن";
  margin-inline-start:auto;
  flex-shrink:0;
  font-size:10px;
  font-weight:700;
  opacity:.55;
  white-space:nowrap;
  padding-inline-start:8px;
}

/* ===========================================================
   فلشِ کنارِ اسمِ رشته — نشانِ واضح و جذابِ «این ردیف توضیح داره،
   با کلیک روش یه چیزِ مهم باز می‌شه». بدونِ این، اون نوار فقط شبیهِ یه
   دیوایدرِ تزئینی به‌نظر می‌رسید. عمداً بدونِ دایره/بک‌گراند طراحی شده —
   فقط خودِ فلش (از دو میله‌یِ قرمزِ یک‌دست، بدونِ گرادیان/سایه، که یه ∨
   می‌سازن)، با افتادنِ نرمِ بالاپایین، تا سبک بمونه ولی تویِ چشم بزنه.
   =========================================================== */
.mxb-note-flag{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:20px; height:18px;
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
  font:inherit;
}
.mxb-note-flag__icon{
  position:relative;
  display:inline-block;
  width:13px; height:9px;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
  animation: mxbNoteFlagBounce 1.5s ease-in-out infinite;
}
.mxb-note-flag__ring{ display:none; }
.mxb-note-flag__bar{
  position:absolute;
  top:0;
  width:9.5px; height:3px;
  border-radius:3px;
  background: #dc2626;
}
.mxb-note-flag__bar--l{ left:0; transform-origin:left center; transform: rotate(45deg); }
.mxb-note-flag__bar--r{ right:0; transform-origin:right center; transform: rotate(-45deg); }
@keyframes mxbNoteFlagBounce{
  0%, 100%{ transform: translateY(-1px); }
  50%{ transform: translateY(3px); }
}
.mxb-note-flag:hover .mxb-note-flag__icon,
.mxb-note-flag:focus-visible .mxb-note-flag__icon{
  animation-play-state: paused;
  transform: translateY(2.5px) scale(1.18);
}
.mxb-note-flag:active .mxb-note-flag__icon{ transform: translateY(1px) scale(.88); }
.mxb-note-flag:focus-visible{ outline: 2px solid rgba(220,38,38,.5); outline-offset:2px; border-radius:6px; }
.mxb-note-flag.is-expanded .mxb-note-flag__icon{
  animation:none;
  transform: translateY(1px) rotate(180deg);
}
.mxb-note-flag.is-expanded:hover .mxb-note-flag__icon,
.mxb-note-flag.is-expanded:focus-visible .mxb-note-flag__icon{
  transform: translateY(1px) rotate(180deg) scale(1.18);
}
.mxb-note-flag.is-expanded .mxb-note-flag__bar{
  background: #dc2626;
}

.mxb-loading{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:34px 22px;
  font-size:13.5px;
  color: var(--text-paper);
  font-weight:800;
}
.mxb-loading__spin{
  position:relative;
  width:26px; height:26px; flex:0 0 auto;
  border-radius:50%;
  background: conic-gradient(from 0deg, #F59E0B, #EC4899, #8B5CF6, #06B6D4, #F59E0B);
  animation: mxbSpin .8s linear infinite;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3.5px));
}
@keyframes mxbSpin{ to{ transform: rotate(360deg); } }

/* ================= لودینگِ سراسریِ جذاب (به‌جایِ فریز موندنِ صفحه) =================
   پوششِ تمام‌صفحه‌ای که با mxbShowGlobalLoader/mxbHideGlobalLoader (تویِ
   javascripts/majors.js) کنترل می‌شه — هر جایِ سایت که بینِ یه کلیک و
   آماده‌شدنِ نتیجه فاصله بیفته، به‌جایِ فریز، همین نشون داده می‌شه. */
.mxb-glow-loader{
  position:fixed; inset:0; z-index:9500;
  display:flex; align-items:center; justify-content:center;
  background: rgba(20,16,36,.32);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity:0; pointer-events:none;
  transition: opacity .22s ease;
}
.mxb-glow-loader.is-visible{ opacity:1; pointer-events:auto; }

.mxb-glow-loader__box{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  padding:32px 40px; border-radius:24px; max-width:88vw;
  background: var(--panel-solid-bg, #FBFBFD);
  border:1px solid rgba(139,92,246,.24);
  box-shadow: 0 26px 60px -20px rgba(60,20,110,.5);
  transform: translateY(10px) scale(.96);
  transition: transform .26s var(--ease-pop, cubic-bezier(.34,1.4,.64,1));
}
.mxb-glow-loader.is-visible .mxb-glow-loader__box{ transform:none; }

.mxb-glow-loader__spinner{ position:relative; width:56px; height:56px; flex:0 0 auto; }
.mxb-glow-loader__ring{
  position:absolute; inset:0; border-radius:50%;
  background: conic-gradient(from 0deg, #F59E0B, #EC4899, #8B5CF6, #06B6D4, #F59E0B);
  animation: mxbSpin .85s linear infinite;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
}
.mxb-glow-loader__icon{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:21px;
  animation: mxbGlowIconPulse 1.3s ease-in-out infinite;
}
.mxb-glow-loader__text{
  margin:0; font-size:13.5px; font-weight:800; color:var(--text-paper);
  text-align:center; line-height:1.75; max-width:260px;
}
@keyframes mxbGlowIconPulse{
  0%,100%{ transform:scale(1); opacity:.85; }
  50%{ transform:scale(1.16); opacity:1; }
}

@media (max-width:640px){
  .mxb-glow-loader__box{ padding:26px 26px; gap:13px; }
  .mxb-glow-loader__spinner{ width:48px; height:48px; }
  .mxb-glow-loader__text{ font-size:12.5px; }
}

.mxb-more-btn{
  display:block;
  margin: 18px auto 4px;
  padding: 11px 28px;
  border-radius: 999px;
  border: none;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  color:#fff;
  background: linear-gradient(135deg, var(--accent-lav), var(--accent-mint));
  box-shadow: 0 10px 24px -10px rgba(124,108,255,.55);
  cursor:pointer;
  transition: transform .15s ease, filter .15s ease;
}
.mxb-more-btn:hover{ transform: translateY(-1px); filter:brightness(1.06); }
.mxb-more-btn:disabled{ opacity:.6; cursor:default; transform:none; }

@media (max-width: 720px){
  .mxb-filter-grid{ grid-template-columns: repeat(auto-fill, minmax(130px,1fr)); }
}

/* رویِ گوشی: ۱۱ ستون تویِ عرضِ واقعیِ یه گوشی (حتی با کوچیک‌ترین فونتِ ممکن)
   دیگه قابلِ‌خوندن نمی‌شه؛ پس فقط این‌جا (نه دسکتاپ/تبلت) دوباره اجازه‌یِ
   اسکرولِ افقی می‌دیم، وگرنه همه‌چی روی هم می‌افته. */
@media (max-width: 700px){
  .mxb-table-wrap{ overflow-x:auto; }
  .mxb-table{ table-layout:auto; min-width:680px; }
}

/* ---------- انتخابِ رشته‌محل: چک‌باکس‌ها، هایلایتِ ردیف، مودالِ لیستِ انتخاب‌ها ---------- */
.mxb-th--select,
.mxb-td--select{ width:34px; text-align:center; }

.mxb-select-all,
.mxb-row-check{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.mxb-select-all input,
.mxb-row-check__input{
  position:absolute;
  opacity:0;
  width:18px; height:18px;
  margin:0;
  cursor:pointer;
}
.mxb-select-all__box,
.mxb-row-check__box{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px; height:18px;
  border-radius:6px;
  border:1.6px solid rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.18);
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.mxb-select-all__box::after,
.mxb-row-check__box::after{
  content:"";
  width:5px; height:9px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform: rotate(45deg) translate(-1px,-1px);
  opacity:0;
}
.mxb-row-check__box{
  border-color: rgba(var(--ink),0.35);
  background: rgba(255,255,255,0.55);
}
.mxb-row-check__box::after{ border-color:#fff; }
.mxb-row-check__input:checked + .mxb-row-check__box,
.mxb-select-all input:checked + .mxb-select-all__box{
  background: var(--accent-lav, #7C6CFF);
  border-color: var(--accent-lav, #7C6CFF);
}
.mxb-row-check__input:checked + .mxb-row-check__box::after,
.mxb-select-all input:checked + .mxb-select-all__box::after{ opacity:1; }
.mxb-select-all input:indeterminate + .mxb-select-all__box{
  background: rgba(255,255,255,0.55);
}
.mxb-select-all input:indeterminate + .mxb-select-all__box::after{
  opacity:1;
  width:9px; height:2px;
  border:none;
  background:#fff;
  transform:none;
}

/* ردیفِ انتخاب‌شده: هایلایتِ واضح تا معلوم باشه انتخاب شده */
.mxb-row{ cursor:pointer; }
.mxb-row.is-selected{
  outline: 2px solid var(--accent-lav, #7C6CFF);
  outline-offset: -2px;
  filter: saturate(1.35) brightness(1.02);
  box-shadow: 0 16px 32px -18px rgba(124,108,255,0.55);
}
.mxb-row.is-selected td:first-child{ border-right-color: var(--accent-lav, #7C6CFF); }
.mxb-row.is-selected td:last-child{ border-left-color: var(--accent-lav, #7C6CFF); }

/* دکمه‌یِ حذف — فقط تویِ حالتِ «لیستِ انتخاب‌ها» به‌جایِ چک‌باکس نشون داده می‌شه */
.mxb-row-remove{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px; height:24px;
  border-radius:50%;
  border:none;
  background: rgba(225,29,72,0.16);
  font-size:11.5px;
  cursor:pointer;
  transition: background .15s ease, transform .1s ease;
}
.mxb-row-remove:hover{ background: rgba(225,29,72,0.3); transform: scale(1.08); }

/* تویِ حالتِ «لیستِ انتخاب‌ها»، چک‌باکسِ «انتخابِ همه» تویِ هدر معنایی نداره — مخفی می‌شه */
.mxb-table--selections-view .mxb-th--select .mxb-select-all{ visibility:hidden; }

/* دکمه‌یِ «نمایشِ نتایجِ کلی» — فقط وقتی تویِ لیستِ انتخاب‌ها یا سطلِ‌آشغالیم نشون داده می‌شه؛
   برخلافِ قبل، این یه دکمه‌یِ جداست و دکمه‌هایِ «لیستِ انتخاب‌ها»/«سطلِ‌آشغال» دیگه
   خودشون بازگشت‌دهنده نیستن (فقط همیشه همون لیستِ خودشون رو نشون می‌دن). */
.mxb-overall-btn{
  border-color: rgba(3,105,161,0.35);
  color:#0369A1;
  background: rgba(3,105,161,0.08);
}
.mxb-overall-btn:hover{ background: rgba(3,105,161,0.16); border-color:#0369A1; }
/* حالتِ فعال (وقتی خودمون تویِ نتایجِ جست‌وجوییم) — آبی، جدا از رنگِ بنفشِ
   «لیستِ انتخاب‌ها» تا دو تب به‌وضوح از هم جدا دیده بشن. */
.mxb-overall-btn.is-active{
  background: linear-gradient(135deg, #0369A1, #0EA5E9);
  border-color: transparent;
  color:#fff;
}

/* انتخاب‌شدنِ یک ردیف تویِ نتایجِ جست‌وجو: با یه انیمیشنِ نرم (کوچیک+محو) از لیست
   خارج می‌شه، چون دیگه لازم نیست همون‌جا دیده بشه — از این به بعد فقط تویِ
   «لیستِ انتخاب‌ها» نشونش می‌دیم. اگه بعداً حذفش کنه (بره تویِ سطلِ‌آشغال)، با
   «نمایشِ نتایجِ کلی» دوباره سرِ جایِ خودش (طبقِ فیلتر/سورتِ فعلی) برمی‌گرده. */
.mxb-row--leaving{
  opacity:0;
  transform: scale(0.94) translateX(10px);
  filter: saturate(0.55);
  pointer-events:none;
}

/* ---------- دکمه‌یِ «سطلِ‌آشغال» — کنارِ دکمه‌یِ «لیستِ انتخاب‌ها»، همون استایل با رنگِ فعالِ خودش ---------- */
.mxb-trash-btn.is-active{
  background: linear-gradient(135deg, #E11D48, #D97706);
  border-color: transparent;
  color:#fff;
}
.mxb-trash-btn.is-active .mxb-trash-badge{ background: rgba(255,255,255,0.3); }

/* تویِ حالتِ «سطلِ‌آشغال»، کلیکِ رویِ خودِ ردیف کاری نمی‌کنه — فقط دکمه‌هایِ
   اختصاصیِ هر ردیف قابلِ‌کلیک‌ان، پس نشانگرِ ماوس هم عوض می‌شه.
   تویِ حالتِ «لیستِ انتخاب‌ها»، کلیکِ رویِ خودِ ردیف نشان‌کردن رو toggle می‌کنه،
   پس همچنان cursor:pointer داره (مثلِ حالتِ عادیِ نتایجِ جست‌وجو). */
.mxb-table--trash-view .mxb-row{ cursor:default; }

/* ستونِ عملیات، وقتی بیش از یه دکمه توشه (نشان‌کردن+حذف یا بازگردانی+حذفِ‌همیشگی) */
.mxb-td--select-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:4px;
}
.mxb-table--selections-view .mxb-th--select,
.mxb-table--selections-view .mxb-td--select,
.mxb-table--trash-view .mxb-th--select,
.mxb-table--trash-view .mxb-td--select{ width:60px; }
/* تویِ «لیستِ انتخاب‌ها» یه دستگیره‌یِ درگ هم اضافه شده (سه آیکون به‌جایِ دو تا) */
.mxb-table--selections-view .mxb-th--select,
.mxb-table--selections-view .mxb-td--select{ width:110px; }

/* چک‌باکسِ نشان‌کردن — فقط تویِ حالتِ «لیستِ انتخاب‌ها»؛ ازِ همون ظاهرِ چک‌باکسِ
   انتخاب (mxb-row-check__box) استفاده می‌کنه تا یه مربعِ یکدست دیده بشه، نه دوتا. */
.mxb-row-check--mark .mxb-row-check__box{
  border-color: rgba(217,119,6,0.55);
}
.mxb-row-check--mark .mxb-row-check__input:checked + .mxb-row-check__box{
  background: #D97706;
  border-color: #D97706;
}

/* هایلایتِ ملایمِ ردیفِ نشان‌شده تویِ لیستِ انتخاب‌ها */
.mxb-row.is-marked td:first-child{ box-shadow: inset 3px 0 0 #D97706; }

/* دکمه‌هایِ «بازگردانی» و «حذفِ همیشگی» — فقط تویِ حالتِ «سطلِ‌آشغال» */
.mxb-row-restore{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px; height:24px;
  border-radius:50%;
  border:none;
  background: rgba(16,163,116,0.18);
  font-size:11px;
  cursor:pointer;
  transition: background .15s ease, transform .1s ease;
}
.mxb-row-restore:hover{ background: rgba(16,163,116,0.3); transform: scale(1.08); }

.mxb-row-delete-forever{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px; height:24px;
  border-radius:50%;
  border:none;
  background: rgba(225,29,72,0.16);
  font-size:11px;
  cursor:pointer;
  transition: background .15s ease, transform .1s ease;
}
.mxb-row-delete-forever:hover{ background: rgba(225,29,72,0.3); transform: scale(1.08); }

/* ---------- جابه‌جاییِ ردیف‌ها با درگ، تویِ «لیستِ انتخاب‌ها» ---------- */
.mxb-row-drag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px; height:22px;
  border-radius:7px;
  font-size:14px;
  line-height:1;
  color: var(--text-muted);
  background: rgba(var(--ink),0.06);
  cursor: grab;
  user-select:none;
  touch-action:none;
  transition: background .15s ease, color .15s ease, transform .1s ease;
}
.mxb-row-drag:hover{ background: rgba(124,108,255,0.18); color: var(--accent-lav, #7C6CFF); }
.mxb-row-drag:active{ cursor: grabbing; transform: scale(0.94); }

/* دکمه‌یِ جابه‌جایی با شماره — کنارِ دستگیره‌یِ درگ، برایِ وقتی که کاربر
   می‌خواد به‌جایِ کشیدنِ موس، مستقیم شماره‌یِ ردیفِ مقصد رو تایپ کنه. */
.mxb-row-movenum{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px; height:22px;
  border-radius:7px;
  border:none;
  font-size:12px;
  font-weight:800;
  line-height:1;
  color: var(--text-muted);
  background: rgba(var(--ink),0.06);
  cursor:pointer;
  transition: background .15s ease, color .15s ease, transform .1s ease;
}
.mxb-row-movenum:hover{ background: rgba(5,150,105,0.18); color:#059669; }
.mxb-row-movenum:active{ transform: scale(0.94); }
.mxb-row-movenum.is-active{ background: linear-gradient(135deg, var(--accent-lav, #7C6CFF), var(--accent-mint, #34D399)); color:#fff; }

/* حالتِ کلی موقعِ درگ: نشانگرِ موس همه‌جا grabbing می‌مونه و متن‌هایِ صفحه
   قابلِ‌هایلایت‌شدن نیستن، تا تجربه‌یِ کشیدن به‌هم نریزه. */
body.mxb-dragging{ cursor: grabbing !important; user-select: none !important; }
body.mxb-dragging .mxb-row{ cursor: grabbing; }

/* ردیف‌هایی که همین الان دارن کشیده می‌شن: کمرنگ‌تر و کمی جمع‌شده، تا هم
   معلوم باشه در حالِ جابه‌جاییَن، هم جایِ خالیِ گیج‌کننده‌ای تویِ لیست نمونه. */
.mxb-row--drag-source{
  opacity:.38;
  filter: saturate(.5);
  transform: scale(0.985);
}

/* شبحِ درحالِ‌کشیده‌شدن که دنبالِ موس می‌ره */
.mxb-drag-ghost{
  position:fixed;
  top:0; left:0;
  z-index:9999;
  display:flex;
  align-items:center;
  gap:6px;
  max-width:260px;
  padding:8px 14px;
  border-radius:12px;
  background: linear-gradient(135deg, var(--accent-lav, #7C6CFF), var(--accent-mint, #34D399));
  color:#fff;
  font-size:12.5px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  box-shadow: 0 16px 32px -12px rgba(124,108,255,0.55);
  pointer-events:none;
  will-change: transform;
}
.mxb-drag-ghost__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px; height:20px;
  padding:0 5px;
  border-radius:999px;
  background: rgba(255,255,255,0.28);
  font-size:11.5px;
}
.mxb-drag-ghost__label{ overflow:hidden; text-overflow:ellipsis; }

/* نشانگرِ خطِ محلِ درپ — با یه افکتِ درخشانِ ملایمِ پالسی، دقیقاً رویِ لبه‌یِ
   بین‌دو‌ردیفی که موس رویِش برده می‌شینه. */
.mxb-drag-indicator{
  position:fixed;
  z-index:9998;
  height:6px;
  border-radius:999px;
  background: linear-gradient(90deg, transparent, var(--accent-lav, #7C6CFF), var(--accent-mint, #34D399), transparent);
  box-shadow: 0 0 0 0 rgba(124,108,255,0.55), 0 2px 10px rgba(124,108,255,0.45);
  pointer-events:none;
  will-change: transform, opacity;
}
.mxb-drag-indicator--pulse{
  animation: mxbDragIndicatorPulse .55s ease-out;
}
@keyframes mxbDragIndicatorPulse{
  0%{ transform: scaleX(0.4); opacity:.4; box-shadow: 0 0 0 0 rgba(124,108,255,0.55), 0 2px 10px rgba(124,108,255,0.45); }
  55%{ transform: scaleX(1.01); opacity:1; box-shadow: 0 0 0 6px rgba(124,108,255,0.12), 0 2px 14px rgba(124,108,255,0.55); }
  100%{ transform: scaleX(1); opacity:1; box-shadow: 0 0 0 0 rgba(124,108,255,0), 0 2px 10px rgba(124,108,255,0.45); }
}

/* افکتِ نرمِ تاییدِ نشستنِ ردیف، درست بعدِ از جابه‌جایی (چه با درگ، چه با
   واردکردنِ شماره) — یه درخشش/هایلایتِ سبز-بنفشِ محسوس، تا چندلحظه بمونه و
   واضح باشه دقیقاً چی/کجا تغییر کرد. */
.mxb-row--moved{
  animation: mxbRowMoved 1.4s ease-out;
}
@keyframes mxbRowMoved{
  0%{
    outline: 2px solid var(--accent-mint, #34D399);
    outline-offset:-2px;
    filter: saturate(1.5) brightness(1.14);
    box-shadow: 0 0 0 5px rgba(52,211,153,0.35), 0 16px 32px -18px rgba(124,108,255,0.55);
  }
  55%{
    outline: 2px solid var(--accent-lav, #7C6CFF);
    outline-offset:-2px;
    filter: saturate(1.3) brightness(1.08);
    box-shadow: 0 0 0 3px rgba(124,108,255,0.22);
  }
  100%{
    outline: 2px solid transparent;
    outline-offset:-2px;
    filter: saturate(1) brightness(1);
    box-shadow: 0 0 0 0 rgba(124,108,255,0);
  }
}

/* ردیف‌هایی که با Ctrl+X «بریده» شدن و منتظرِ جای‌گذاری‌ان (ر.ک. mxbCutMarked
   تویِ majors.js) — یه خط‌چینِ بنفش+کم‌رنگ، تا هم واضح باشه هنوز تویِ لیستن
   (حذف نشدن)، هم فرق‌شون با ردیفِ عادی/نشان‌شده معلوم باشه. */
.mxb-row--cut{
  opacity:.6;
  outline: 1.5px dashed var(--accent-lav, #7C6CFF);
  outline-offset:-1.5px;
}
.mxb-row--cut td:first-child{ box-shadow: inset 3px 0 0 var(--accent-lav, #7C6CFF); }

/* نوارِ شناورِ پایینِ صفحه: وضعیتِ کلیپ‌بوردِ برش (چندتا برداشته شده، آیا
   مقصد هم نشان شده) + دکمه‌یِ انصراف. تا وقتی چیزی تویِ کلیپ‌بورد نیست یا از
   «لیستِ انتخاب‌ها» بیرونیم، مخفیه (ر.ک. mxbUpdateCutBanner). */
.mxb-cut-banner{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%) translateY(10px);
  z-index:9997;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:14px;
  background: linear-gradient(135deg, var(--accent-lav, #7C6CFF), var(--accent-mint, #34D399));
  color:#fff;
  font-size:13px;
  font-weight:700;
  line-height:1.7;
  box-shadow: 0 16px 36px -14px rgba(124,108,255,0.55);
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
  max-width:min(92vw, 440px);
}
.mxb-cut-banner.is-visible{
  opacity:1;
  transform:translateX(-50%) translateY(0);
  pointer-events:auto;
}
.mxb-cut-banner__icon{ font-size:16px; flex:none; }
.mxb-cut-banner__text{ flex:1 1 auto; }
.mxb-cut-banner__paste{
  flex:none;
  padding:6px 12px;
  border-radius:10px;
  background: rgba(255,255,255,0.94);
  border:none;
  color: var(--accent-lav, #7C6CFF);
  cursor:pointer;
  font-size:12.5px;
  font-weight:800;
  white-space:nowrap;
}
.mxb-cut-banner__paste:hover{ background:#fff; }
.mxb-cut-banner__cancel{
  flex:none;
  width:26px; height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background: rgba(255,255,255,0.18);
  border:none;
  color:#fff;
  cursor:pointer;
  font-size:13px;
  line-height:1;
}
.mxb-cut-banner__cancel:hover{ background: rgba(255,255,255,0.32); }
.mxb-cut-banner.is-shake{ animation: mxbCutBannerShake .5s ease; }
@keyframes mxbCutBannerShake{
  0%{ box-shadow: 0 16px 36px -14px rgba(124,108,255,0.55); }
  30%{ box-shadow: 0 0 0 6px rgba(217,119,6,0.4), 0 16px 36px -14px rgba(124,108,255,0.55); }
  100%{ box-shadow: 0 16px 36px -14px rgba(124,108,255,0.55); }
}
@media (max-width: 640px){
  .mxb-cut-banner{ bottom:14px; font-size:12.5px; padding:9px 13px; }
}

/* ===========================================================
   افزوده‌شده از پروژه‌یِ خلیلی: استایلِ قالبِ سایدباردار/داشبوردیِ
   صفحه‌یِ «انتخاب رشته» (msx-shell / msx-sidebar / msx-nav / msx-content
   / msx-stat-card و...). این بخش تویِ استایل‌شیتِ خارجیِ خلیلی نبود،
   بلکه به‌صورتِ اینلاین تویِ admin.html تعریف شده بود؛ این‌جا برایِ
   استفاده‌یِ مستقل تویِ majors.html، به‌عنوانِ CSS خارجی اضافه شده.
   =========================================================== */

  /* ===========================================================
     محیطِ جدیدِ «انتخاب رشته» — قالبِ سایدباردار و داینامیک
     =========================================================== */
  .msx-shell{
    position: fixed;
    inset: 0;
    z-index: 55;
    display: flex;
    background: linear-gradient(160deg, var(--bg-night) 0%, var(--bg-night-2) 100%);
    animation: entryFadeIn .4s var(--ease-pop, ease) both;
  }
  .msx-shell.is-leaving{ animation: entryFadeOut .22s ease both; }

  /* ---------- سایدبار ---------- */
  .msx-sidebar{
    width: 196px;
    flex: 0 0 196px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 9px 10px;
    background: var(--card-bg);
    border-inline-start: 1px solid var(--card-border);
    backdrop-filter: blur(18px);
    overflow-y: auto;
    overflow-x: hidden;
  }

  .msx-sidebar__brand{
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 2px 4px 4px;
  }
  .msx-sidebar__brand-icon{
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    font-size: 12.5px;
    background: linear-gradient(135deg, var(--accent-lav), var(--accent-mint));
    box-shadow: 0 8px 18px -8px rgba(124,108,255,0.55);
  }
  .msx-sidebar__brand-text{ font-weight: 800; font-size: 12px; color: var(--text-paper); }

  /* ---------- کارتِ کاربر + منویِ خروج ---------- */
  .msx-user{ position: relative; }
  .msx-user__btn{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border-radius: 13px;
    border: 1.5px solid var(--card-border);
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    font-family: inherit;
    text-align: right;
    transition: background .18s ease, border-color .18s ease;
  }
  .msx-user__btn:hover{ background: rgba(255,255,255,0.78); border-color: var(--accent-lav); }
  .msx-user__avatar{
    width: 27px; height: 27px; flex: 0 0 27px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    background: linear-gradient(135deg, var(--accent-amber), var(--accent-lav));
    color: #fff;
  }
  .msx-user__meta{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .msx-user__name{
    font-size: 12px; font-weight: 700; color: var(--text-paper);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .msx-user__role{ font-size: 10px; color: var(--text-muted); }
  .msx-user__chev{
    color: var(--text-faint);
    font-size: 11px;
    transition: transform .2s ease;
    flex: 0 0 auto;
  }
  .msx-user__btn[aria-expanded="true"] .msx-user__chev{ transform: rotate(180deg); }

  .msx-user__menu{
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    z-index: 5;
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 14px;
    box-shadow: var(--shadow-card);
    padding: 6px;
    animation: cardPopIn .18s var(--ease-pop, ease) both;
  }
  .msx-user__switch{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--text-paper);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
  }
  .msx-user__switch:hover{ background: rgba(var(--ink),0.08); }
  .msx-user__menu-divider{
    height: 1px;
    margin: 4px 6px;
    background: var(--card-border);
  }
  .msx-user__logout{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--accent-warn-red);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
  }
  .msx-user__logout:hover{ background: rgba(225,29,72,0.1); }

  /* ---------- سویچِ نقش (پنلِ مشاور ← انتخاب رشته) ---------- */
  .admin-header__actions{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
  }
  .btn-switch-role{
    flex-shrink: 0;
    padding: 10px 16px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(90deg, var(--accent-amber), var(--accent-mint));
    background-size: 200% 100%;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-position .2s ease, transform .12s ease;
  }
  .btn-switch-role:hover{ background-position: 100% 0%; }
  .btn-switch-role:active{ transform: scale(.98); }
  @media (max-width: 640px){
    .admin-header__actions{ flex-wrap: wrap; justify-content: flex-end; }
  }

  /* ---------- ناوبریِ سایدبار ---------- */
  .msx-nav{
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
  }
  .msx-nav__item{
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 600;
    text-align: right;
    cursor: pointer;
    max-width: 100%;
    transition: background .16s ease, color .16s ease, transform .16s ease;
  }
  .msx-nav__item:hover{ background: rgba(124,108,255,0.1); color: var(--text-paper); }
  .msx-nav__item.is-active{
    background: linear-gradient(95deg, var(--accent-lav), #a78bff);
    color: #fff;
    box-shadow: 0 10px 22px -10px rgba(124,108,255,0.65);
    transform: translateX(-2px);
  }
  .msx-nav__icon{ font-size: 12px; flex: 0 0 auto; }
  /* ⭐ رفعِ اینکه بعضی برچسب‌هایِ بلندِ سایدبار (مثلِ «دریافت دفترچه انتخاب
     رشته» یا «ویرایش دیتاهای سایت») از کادرِ گردِ آیتمِ ناوبری بیرون بزنن:
     برچسب حالا کوچک‌تر می‌شه (سه‌نقطه) نه اینکه از کادر رد بشه. */
  .msx-nav__item span:last-child{
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .msx-back{
    margin-top: auto;
    border: none;
    background: transparent;
    color: var(--text-faint);
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
    padding: 6px 4px;
    text-align: right;
    transition: color .15s ease;
  }
  .msx-back:hover{ color: var(--accent-amber); }

  /* ===========================================================
     ابزارهایِ جست‌وجو/انتخابِ رشته‌محل — داخلِ سایدبار
     (قبلاً ردیفِ دکمه‌هایِ بالایِ جدول بود؛ حالا عمودی و کنارِ ناوبریِ اصلیه)
     =========================================================== */
  .msx-sidebar-mxb{
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    flex: 0 0 auto;
  }
  /* منویِ اصلی: یه لیستِ کوتاه و ثابته، هیچ‌وقت نباید رشد کنه و بقیه‌یِ
     سایدبار (مثلِ «ابزار رشته‌محل») رو به‌زورِ فضا به‌سمتِ پایین هول بده —
     قانونِ اختصاصیِ زیر (نزدیکِ مدیاکوئریِ دسکتاپ/موبایل، پایین‌ترِ همین
     فایل) این رفتار رو فقط رویِ صفحه‌هایِ بزرگ خنثی می‌کنه، تا رویِ موبایل
     (که این بخش باید تمامِ‌عرض بشه) دست‌نخورده بمونه. */
  /* وقتی یه نوارِ کشویی بازه، به‌جایِ اینکه فقط قدِ محتواش بشه و بقیه‌یِ
     فضایِ خالیِ سایدبار بلااستفاده بمونه، رشد می‌کنه و کل فضایِ باقی‌مونده‌یِ
     ستونِ سایدبار رو پر می‌کنه؛ فقط اگه محتوا از همون فضا هم بیشتر بشه،
     بدنه‌ش (پایین‌تر) خودش مستقل اسکرول می‌خوره. */
  .msx-sidebar-mxb:not(.is-collapsed){
    flex: 1 1 auto;
    min-height: 0;
  }
  /* «ابزار رشته‌محل» درست زیرِ «منویِ اصلی» می‌مونه — بدونِ فاصله‌یِ الکی؛
     چه هردو بسته باشن چه «منویِ اصلی» باز باشه، فقط با یه گپِ کوچیک از
     هم جدا می‌شن (نه وسطِ صفحه‌ی سایدبار معلق). */
  .msx-sidebar-mxb__divider{
    height: 1px;
    background: var(--card-border);
    margin: 1px 2px 3px;
    flex: 0 0 auto;
  }

  /* دکمه‌یِ بازوبسته‌کردن — کلِ عنوان قابلِ کلیکه، شورونِ کناری جهتش عوض می‌شه */
  .msx-sidebar-mxb__toggle{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    border: none;
    background: transparent;
    padding: 4px 4px 3px;
    margin: 0;
    cursor: pointer;
    font-family: inherit;
    flex: 0 0 auto;
    border-radius: 7px;
    transition: background .15s ease;
  }
  .msx-sidebar-mxb__toggle:hover{ background: rgba(124,108,255,0.08); }
  .msx-sidebar-mxb__title{
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .3px;
    background: linear-gradient(90deg, var(--accent-lav), var(--accent-mint));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 1px 2px rgba(124,108,255,0.28));
    transition: filter .18s ease, transform .18s var(--ease-pop, ease);
  }
  .msx-sidebar-mxb__toggle:hover .msx-sidebar-mxb__title{
    filter: drop-shadow(0 3px 6px rgba(124,108,255,0.42));
    transform: translateY(-1px);
  }
  .msx-sidebar-mxb__toggle:active .msx-sidebar-mxb__title{ transform: translateY(0); }
  .msx-sidebar-mxb__chevron{
    width: 13px; height: 13px;
    flex-shrink: 0;
    color: var(--accent-lav);
    opacity: .75;
    transition: transform .22s ease, opacity .18s ease;
  }
  .msx-sidebar-mxb__toggle:hover .msx-sidebar-mxb__chevron{ opacity: 1; }
  /* دیفالت (بسته) رو به پایین نشون می‌ده یعنی «برای بازکردن بزن»؛
     وقتی بازه برمی‌گرده رو به بالا یعنی «برای بستن بزن» — عکسِ حالتِ قبلی. */
  .msx-sidebar-mxb:not(.is-collapsed) .msx-sidebar-mxb__chevron{ transform: rotate(180deg); }

  /* بدنه‌یِ هر نوارِ کشویی: اول کلِ فضایِ خالیِ باقی‌مونده‌یِ سایدبار رو پر
     می‌کنه (به‌خاطرِ flex روی .msx-sidebar-mxb بالا)؛ فقط وقتی محتوا از
     همون فضا هم بیشتر بشه، خودش مستقل اسکرول می‌خوره — نه زودتر از اون. */
  .msx-sidebar-mxb__body{
    display: flex;
    flex-direction: column;
    gap: 7px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    min-height: 0;
    max-height: 2000px;
    opacity: 1;
    transition: max-height .3s ease, opacity .2s ease, margin-top .3s ease;
    scrollbar-width: thin;
    scrollbar-color: rgba(124,108,255,0.4) transparent;
  }
  .msx-sidebar-mxb__body::-webkit-scrollbar{ width: 5px; }
  .msx-sidebar-mxb__body::-webkit-scrollbar-track{ background: transparent; }
  .msx-sidebar-mxb__body::-webkit-scrollbar-thumb{ background: rgba(124,108,255,0.35); border-radius: 10px; }
  .msx-sidebar-mxb__body::-webkit-scrollbar-thumb:hover{ background: rgba(124,108,255,0.55); }
  .msx-sidebar-mxb.is-collapsed .msx-sidebar-mxb__body{
    flex-grow: 0;
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
  }

  .msx-sidebar-mxb__group{
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 0 0 auto;
  }
  .msx-sidebar-mxb__group:empty{ display: none; }

  /* جعبه‌یِ جست‌وجو، تمام‌عرضِ سایدبار — با گرادیانِ ظریفِ برند و سایه‌یِ
     نرم، تا وسطِ لیستِ دکمه‌ها بیشتر به چشم بیاد و دعوت‌کننده‌تر باشه. */
  .msx-sidebar-mxb__search.mxb-inline-search{
    flex: 0 0 auto;
    width: 100%;
    padding: 8px 12px;
    border-radius: 13px;
    background:
      linear-gradient(rgba(255,255,255,0.82), rgba(255,255,255,0.82)) padding-box,
      linear-gradient(120deg, var(--accent-lav), var(--accent-mint)) border-box;
    border: 1.5px solid transparent;
    box-shadow: 0 2px 10px rgba(124,108,255,0.14);
    transition: box-shadow .2s ease, transform .18s ease;
  }
  .msx-sidebar-mxb__search.mxb-inline-search .mxb-inline-search__icon{
    color: var(--accent-lav);
    opacity: .85;
  }
  .msx-sidebar-mxb__search.mxb-inline-search:hover{
    box-shadow: 0 4px 14px rgba(124,108,255,0.22);
  }
  .msx-sidebar-mxb__search.mxb-inline-search:focus-within{
    box-shadow: 0 4px 16px rgba(124,108,255,0.32);
    transform: translateY(-1px);
  }
  .msx-sidebar-mxb__search.mxb-inline-search:focus-within .mxb-inline-search__icon{
    color: var(--accent-mint);
  }
  .msx-sidebar-mxb__search.mxb-inline-search .mxb-inline-search__input{ font-size: 11.5px; font-weight: 700; }

  /* دکمه‌هایِ اصلی (نتایج/لیستِ انتخاب‌ها/سطلِ‌آشغال) و دکمه‌هایِ ثانویه،
     همه تمام‌عرض و راست‌چین می‌شن تا شبیهِ آیتم‌هایِ ناوبریِ بالا دیده بشن —
     و عمداً بولدتر/بزرگ‌تر از اندازه‌یِ پیش‌فرضشونن، چون این‌جا (برخلافِ
     خیلی‌جاهایِ دیگه که همین دکمه‌ها رو دارن) باید تویِ چشمِ مشاور بزنن. */
  .msx-sidebar-mxb .mxb-selections-btn,
  .msx-sidebar-mxb .mxb-clear-selections-btn{
    width: 100%;
    justify-content: flex-start;
    padding: 6px 9px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 800;
  }
  .msx-sidebar-mxb .mxb-selections-btn__icon{ flex: 0 0 auto; font-size: 11px; }
  .msx-sidebar-mxb .mxb-selections-btn span:not(.mxb-selections-btn__icon):not(.mxb-selections-badge){
    flex: 1 1 auto;
    text-align: right;
  }
  .msx-sidebar-mxb .mxb-selections-badge{ margin-inline-start: auto; }

  .msx-sidebar-mxb__group--tabs .mxb-selections-btn{ font-size: 11px; }
  /* دکمه‌هایِ گردِ واگرد/ازنو، رویِ موبایل کمی کوچیک‌تر می‌شن تا جا باز کنن */
  .msx-sidebar-mxb .mxb-round-undo-btn{
    width: 29px;
    height: 29px;
  }
  .msx-sidebar-mxb .mxb-round-undo-btn__icon{ font-size: 13px; }

  .msx-sidebar-mxb .mxb-notes-switch-row{ padding: 6px 9px; }
  .msx-sidebar-mxb .mxb-notes-switch-row__label{ font-size: 10.5px; }

  .msx-sidebar-mxb__group--danger .mxb-clear-selections-btn,
  .msx-sidebar-mxb__group--primary .mxb-clear-selections-btn{
    justify-content: center;
    text-align: center;
    font-size: 11px;
  }
  .msx-sidebar-mxb .mxb-finalized-chip{
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }

  /* ---------- محتوایِ اصلی (داینامیک، بدون رفرش) ---------- */
  .msx-content{
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 16px 28px;
  }
  .msx-content__header{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .msx-content__eyebrow{
    margin: 0 0 4px;
    font-weight: 700;
    font-size: 11.5px;
    color: var(--accent-amber);
  }
  .msx-content__title{
    margin: 0;
    font-size: clamp(17px, 2.1vw, 21px);
    color: var(--text-paper);
  }

  .msx-view{ animation: cardPopIn .3s var(--ease-pop, ease) both; }

  /* کارت‌هایِ آماریِ داشبورد */
  .msx-stat-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 22px;
  }
  .msx-stat-card{
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .msx-stat-card__icon{ font-size: 22px; }
  .msx-stat-card__value{ font-size: 26px; font-weight: 800; color: var(--text-paper); }
  .msx-stat-card__label{ font-size: 13px; color: var(--text-muted); }

  /* ⭐ نشانِ «سهمیه از مدرسه‌ی X» — زیرِ کارتِ ظرفیتِ داشبورد، وقتی اعتبارِ
     این حساب نهایتاً از یه مدرسه اومده باشه (نگاه کن به
     msxRenderQuotaLimitNote تویِ majors.js). */
  .msx-quota-school-note{
    display:inline-flex; align-items:center; gap:4px;
    margin-top: 6px;
    font-size: 11.5px; font-weight:700;
    color: #5b4fd9;
    background: rgba(124,108,255,.10);
    border: 1px solid rgba(124,108,255,.28);
    padding: 4px 10px;
    border-radius: 999px;
    width: fit-content;
  }

  /* ⭐ کارت‌هایِ آماریِ قابل‌کلیک (مدیر/سرمشاور/مشاور/دانش‌آموز/مدرسه):
     کلیک روشون کاربر رو به لیستِ فیلترشده‌یِ همون دسته می‌بره — نگاه کن
     به msxGoToStatDetail تویِ majors.js. */
  .msx-stat-card--clickable{ cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
  .msx-stat-card--clickable:hover{ transform: translateY(-3px); box-shadow: 0 12px 26px -14px rgba(var(--ink),0.35); border-color: rgba(var(--ink),0.22); }
  .msx-stat-card--clickable:active{ transform: translateY(-1px); }

  /* ⭐ دکمه‌یِ «بازگشت به داشبورد» — فقط وقتی نشون داده می‌شه که کاربر از
     کلیکِ رویِ یکی از کارت‌هایِ داشبورد به این صفحه اومده باشه (نه از
     سایدبار). نگاه کن به msxSetDashboardBackVisible تویِ majors.js. */
  .msx-dashboard-back-btn{ margin-bottom: 16px; }

  /* کارت‌هایِ ظرفیتِ انتخاب‌رشته (داشبورد) */
  .msx-quota-card--total{ border-color: var(--card-border); }
  .msx-quota-card--total .msx-stat-card__value{ color: var(--text-paper); }
  .msx-quota-card--sarasari .msx-stat-card__value{ color: var(--accent-lav); }
  .msx-quota-card--farhangian .msx-stat-card__value{ color: var(--accent-mint); }
  .msx-quota-card--azad .msx-stat-card__value{ color: var(--accent-amber); }

  /* ---------- دکمه‌ی «خرید و افزایش ظرفیت» — هدرِ کارتِ ظرفیت ---------- */
  .msx-quota-card-head{
    display:flex; align-items:center; justify-content:space-between;
    gap: 14px; flex-wrap: wrap; margin-bottom: 20px;
  }
  .msx-quota-card-head .panel-card__title{ margin-bottom: 0; }

  .msx-quota-buy-btn{
    position: relative;
    display: inline-flex; align-items:center; gap:9px;
    padding: 12px 22px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 800;
    color: #fff;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(120deg, #7c3aed 0%, #ec4899 50%, #f59e0b 100%);
    background-size: 220% 100%;
    background-position: 0% 0%;
    box-shadow: 0 10px 26px -6px rgba(124,58,237,.55), 0 0 0 1px rgba(255,255,255,.10) inset;
    animation: msxQuotaBuyGlow 2.6s ease-in-out infinite;
    transition: background-position .5s ease, transform .18s ease, box-shadow .3s ease;
  }
  .msx-quota-buy-btn:hover{
    background-position: 100% 0%;
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 16px 34px -6px rgba(236,72,153,.65), 0 0 0 1px rgba(255,255,255,.16) inset;
  }
  .msx-quota-buy-btn:active{ transform: translateY(0) scale(.96); }
  .msx-quota-buy-btn:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }

  .msx-quota-buy-btn__shine{
    position:absolute; inset:0; z-index:0;
    background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
    transform: translateX(-130%);
    animation: msxQuotaBuyShine 3s ease-in-out infinite;
    pointer-events:none;
  }
  .msx-quota-buy-btn__icon{
    position:relative; z-index:1;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:17px; line-height:1;
    filter: drop-shadow(0 0 6px rgba(255,255,255,.75));
    animation: msxQuotaBuyIconPulse 1.5s ease-in-out infinite;
  }
  .msx-quota-buy-btn__label{ position:relative; z-index:1; white-space:nowrap; }

  /* ---------- مودالِ وسطِ‌صفحه‌یِ «سهمیه رو به اتمامه» (msxMaybeShowQuotaLowAlert) ----------
     ⭐ عمداً پررنگ‌تر و دیدنی‌تر از مودال‌هایِ معمولی طراحی شده (رینگِ نارنجیِ
     تپنده دورِ آیکون + گرادیانِ گرم رویِ دکمه‌یِ خرید) چون قراره واقعاً توجهِ
     کاربر رو جلب کنه، نه فقط یه پیامِ خنثی باشه. */
  .msx-quota-alert-overlay{ background: rgba(40,20,10,.55); }
  .msx-quota-alert-box{
    max-width: 420px;
    padding: 34px 26px 26px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    background:
      linear-gradient(var(--panel-solid-bg), var(--panel-solid-bg)) padding-box,
      linear-gradient(135deg, var(--accent-warn-red), var(--accent-amber)) border-box;
    border: 1.5px solid transparent;
    animation: msxQuotaAlertPop .32s var(--ease-pop);
  }
  @keyframes msxQuotaAlertPop{
    from{ opacity: 0; transform: scale(.86) translateY(10px); }
    to{ opacity: 1; transform: scale(1) translateY(0); }
  }
  .msx-quota-alert__icon-ring{
    width: 68px; height: 68px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
    background: radial-gradient(circle, rgba(225,29,72,.16), rgba(217,119,6,.08) 70%, transparent 72%);
    box-shadow: 0 0 0 0 rgba(225,29,72,.45);
    animation: msxQuotaAlertRingPulse 1.8s ease-out infinite;
  }
  @keyframes msxQuotaAlertRingPulse{
    0%{ box-shadow: 0 0 0 0 rgba(225,29,72,.45); }
    70%{ box-shadow: 0 0 0 14px rgba(225,29,72,0); }
    100%{ box-shadow: 0 0 0 0 rgba(225,29,72,0); }
  }
  .msx-quota-alert__icon{ font-size: 32px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(225,29,72,.35)); }
  .msx-quota-alert__title{
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 900;
    color: var(--text-paper);
  }
  .msx-quota-alert__desc{
    margin: 0 0 24px;
    font-size: 14px;
    line-height: 1.9;
    color: var(--text-muted);
  }
  .msx-quota-alert__desc strong{ color: var(--accent-warn-red); font-size: 15.5px; }
  .msx-quota-alert__actions{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
  }
  .msx-quota-alert__buy-btn{ justify-content: center; width: 100%; padding: 13px 20px; font-size: 15px; }
  .msx-quota-alert__later-btn{ width: 100%; justify-content: center; font-size: 13px; }

  @keyframes msxQuotaBuyGlow{
    0%,100%{ box-shadow: 0 10px 26px -6px rgba(124,58,237,.55), 0 0 0 1px rgba(255,255,255,.10) inset; }
    50%{ box-shadow: 0 12px 34px -4px rgba(236,72,153,.8), 0 0 0 1px rgba(255,255,255,.2) inset; }
  }
  @keyframes msxQuotaBuyShine{
    0%{ transform: translateX(-130%); }
    35%{ transform: translateX(130%); }
    100%{ transform: translateX(130%); }
  }
  @keyframes msxQuotaBuyIconPulse{
    0%,100%{ transform: scale(1) rotate(0deg); }
    50%{ transform: scale(1.2) rotate(-10deg); }
  }

  /* بج‌های رنگیِ «نوع ظرفیت» و «روندِ مصرف» توی جدولِ گزارشِ استفاده */
  .msx-quota-type-badge{
    display:inline-flex; align-items:center; gap:6px;
    padding: 4px 10px; border-radius: 999px;
    font-size: 12.5px; font-weight: 700;
    border: 1px solid transparent;
  }
  .msx-quota-type-badge--sarasari{ color: var(--accent-lav); background: rgba(124,108,255,0.14); border-color: rgba(124,108,255,0.3); }
  .msx-quota-type-badge--farhangian{ color: var(--accent-mint); background: rgba(5,150,105,0.14); border-color: rgba(5,150,105,0.3); }
  .msx-quota-type-badge--azad{ color: var(--accent-amber); background: rgba(217,119,6,0.14); border-color: rgba(217,119,6,0.3); }
  .msx-quota-type-badge--activation{ color: #ec4899; background: rgba(236,72,153,0.14); border-color: rgba(236,72,153,0.3); }

  .msx-quota-trend{
    display:inline-flex; align-items:center; gap:8px;
    font-weight: 700; font-size: 13.5px;
  }
  .msx-quota-trend__from{
    color: var(--text-faint);
    text-decoration: line-through;
    text-decoration-color: rgba(239,68,68,.55);
  }
  .msx-quota-trend__arrow{ color: var(--text-muted); font-size: 12px; }
  .msx-quota-trend__to{
    color: var(--text-paper);
    background: rgba(239,68,68,.12);
    border: 1px solid rgba(239,68,68,.28);
    padding: 2px 9px;
    border-radius: 999px;
  }

  /* ---------------------------------------------------------------
     صفحه‌ی «خرید و افزایشِ ظرفیت» (msxViewQuotaBuy)
  --------------------------------------------------------------- */
  .msx-buy-header{
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:16px; flex-wrap:wrap;
    margin: 18px 0 26px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--card-border);
  }
  .msx-buy-header__title{
    margin:0 0 6px; font-size: 19px; font-weight: 800; color: var(--text-paper);
    display:flex; align-items:center; gap:8px;
  }
  .msx-buy-header__icon{ font-size: 20px; }
  .msx-buy-header__desc{ margin:0; font-size: 13.5px; color: var(--text-muted); max-width: 520px; }
  .msx-buy-header__badge{
    flex-shrink:0;
    font-size: 13px; font-weight: 700;
    padding: 8px 16px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(120deg, #7c3aed, #ec4899);
    box-shadow: 0 8px 18px -6px rgba(124,58,237,.5);
  }

  /* ⭐ بسته‌ها دیگه به سراسری/فرهنگیان/آزاد تفکیک نمی‌شن — هر بسته خودش
     شاملِ هر سه نوعه، پس یه شبکه‌یِ یکپارچه از کارت‌ها داریم. */
  .msx-buy-cards--unified{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-bottom: 12px;
  }

  .msx-buy-card--unified{
    position:relative;
    display:flex; flex-direction:column; align-items:center; gap:11px;
    padding: 30px 18px 22px;
    background: var(--card-bg);
    border: 1.5px solid var(--card-border);
    border-radius: var(--radius-card);
    cursor:pointer;
    font-family: inherit;
    overflow: visible;
    transition: transform .18s ease, box-shadow .25s ease, border-color .2s ease, background .2s ease;
  }
  .msx-buy-card--unified:hover{ transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: rgba(124,108,255,.4); }

  /* روبانِ «پرفروش‌ترین / پیشنهادِ ویژه» گوشه‌ی بالایِ کارت */
  .msx-buy-card__ribbon{
    position:absolute; top:-11px; right:50%; transform: translateX(50%);
    font-size: 11px; font-weight:800; color:#fff; white-space:nowrap;
    padding: 5px 14px; border-radius: 999px;
    background: linear-gradient(120deg, var(--accent-lav), #a78bfa 55%, var(--accent-mint));
    box-shadow: 0 8px 18px -6px rgba(124,108,255,.6);
  }
  /* نشانِ درصدِ تخفیف، گوشه‌ی بالا-چپِ کارت */
  .msx-buy-card__discount-badge{
    position:absolute; top:12px; left:12px;
    font-size: 11px; font-weight:800; color:#fff;
    padding: 4px 10px; border-radius: 999px;
    background: linear-gradient(120deg, #e11d48, #f43f5e);
    box-shadow: 0 6px 14px -4px rgba(225,29,72,.6);
  }

  .msx-buy-card__badge{
    width: 54px; height:54px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    font-size:17px; font-weight:800;
    color: #fff;
    background: linear-gradient(135deg, var(--accent-lav), var(--accent-mint));
    border: none;
    box-shadow: 0 10px 22px -8px rgba(124,108,255,.55);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .msx-buy-card__count{ font-size: 15px; font-weight:800; color: var(--text-paper); }

  /* چیپ‌هایِ سه‌گانه‌یِ سهمیه — نشون می‌ده هر بسته هم‌زمان تویِ هر سه نوع صدق می‌کنه */
  .msx-buy-card__quota-chips{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
    gap: 6px;
  }
  .msx-buy-chip{
    font-size: 10.5px; font-weight:700;
    padding: 4px 9px; border-radius: 999px;
    color: var(--text-muted);
    background: rgba(var(--ink),0.06);
    border: 1px solid var(--card-border);
    white-space: nowrap;
  }
  .msx-buy-chip--sarasari{ color:#5b4fd9; background: rgba(124,108,255,.12); border-color: rgba(124,108,255,.3); }
  .msx-buy-chip--farhangian{ color:#047857; background: rgba(5,150,105,.12); border-color: rgba(5,150,105,.3); }
  .msx-buy-chip--azad{ color:#b45309; background: rgba(217,119,6,.12); border-color: rgba(217,119,6,.3); }

  .msx-buy-card__price-row{
    display:flex; flex-direction:column; align-items:center; gap:2px;
    margin-top: 4px;
  }
  .msx-buy-card__price-original{
    font-size: 12px; font-weight:600;
    color: var(--text-muted);
    text-decoration: line-through;
    text-decoration-color: rgba(225,29,72,.65);
  }
  .msx-buy-card__price{
    font-size: 14.5px; font-weight:800;
    padding: 5px 14px; border-radius:999px;
    color: var(--text-muted);
    background: rgba(var(--ink),0.06);
  }

  .msx-buy-card--unified.is-selected{
    transform: translateY(-4px);
    border-color: var(--accent-lav);
    background:
      linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
      linear-gradient(120deg, var(--accent-lav), var(--accent-mint) 55%, var(--accent-amber)) border-box;
    border: 2px solid transparent;
    box-shadow: 0 18px 38px -12px rgba(124,108,255,.5);
  }
  .msx-buy-card--unified.is-selected .msx-buy-card__badge{
    background: linear-gradient(135deg, var(--accent-lav), var(--accent-amber));
    box-shadow: 0 12px 26px -8px rgba(124,108,255,.7);
  }
  .msx-buy-card--unified.is-selected .msx-buy-card__price{
    background: linear-gradient(120deg, var(--accent-lav), var(--accent-mint));
    color:#fff;
  }
  .msx-buy-card--unified.is-selected::after{
    content:"✓";
    position:absolute; top:10px; left:10px;
    width:22px; height:22px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:800; color:#fff;
    background: var(--accent-mint);
    box-shadow: 0 6px 14px -4px rgba(5,150,105,.6);
  }
  /* وقتی هم درصدِ تخفیف هست هم تیکِ انتخاب، تیک رو کنارش می‌ذاریم که رویِ هم نیفتن */
  .msx-buy-card--unified.is-selected .msx-buy-card__discount-badge ~ *::after{ }
  .msx-buy-card--unified.is-selected:has(.msx-buy-card__discount-badge)::after{ top:44px; }

  /* کارتِ «تماس بگیرید» برایِ حجم‌هایِ بالاتر از ۱۰۰۰ نفر — همیشه خط‌چین */
  .msx-buy-card--contact.msx-buy-card--unified{
    border-style: dashed;
    border-color: rgba(124,108,255,.4);
    cursor:pointer;
    justify-content:center;
    padding-top: 22px;
  }
  .msx-buy-card--contact .msx-buy-card__badge{ font-size:20px; background:transparent; box-shadow:none; color: var(--accent-lav); border: 1.5px dashed rgba(124,108,255,.45); }
  .msx-buy-card--contact .msx-buy-card__price{ font-weight:800; color: var(--accent-lav); background:transparent; }

  /* نوارِ چسبانِ پایینِ صفحه — بعدِ انتخابِ یه بسته ظاهر می‌شه.
     ⭐ عمداً کاملاً ماته (بدون شفافیت/بلور) که زیرش هیچی دیده نشه و
     به‌جایِ حسِ شیشه‌ایِ سبک، حسِ یه نوارِ محکم و بااقتدارِ تسویه‌حساب
     رو بده. */
  .msx-buy-bar{
    position: sticky;
    bottom: 16px;
    margin-top: 8px;
    display:flex; align-items:center; justify-content:space-between;
    gap:16px; flex-wrap:wrap;
    padding: 18px 26px;
    border-radius: calc(var(--radius-card) + 4px);
    background: linear-gradient(120deg, #14151D 0%, #1E2130 48%, #14151D 100%);
    background-color: #14151D; /* fallback مات برایِ مرورگرهایی که گرادیان رو حذف کنن */
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 22px 48px -14px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    isolation: isolate; /* گارانتیِ اینکه هیچ لایه‌یِ نیمه‌شفافِ پشتش از زیر دیده نشه */
    animation: msxBuyBarIn .3s ease both;
  }
  @keyframes msxBuyBarIn{
    from{ opacity:0; transform: translateY(14px); }
    to{ opacity:1; transform: translateY(0); }
  }
  .msx-buy-bar__info{ display:flex; flex-direction:column; gap:4px; }
  .msx-buy-bar__label{ font-size: 13px; color: rgba(255,255,255,.6); font-weight:600; }
  .msx-buy-bar__price-row{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
  .msx-buy-bar__price-original{
    font-size: 13px; font-weight:600;
    color: rgba(255,255,255,.4);
    text-decoration: line-through;
    text-decoration-color: rgba(225,29,72,.7);
  }
  .msx-buy-bar__price{ font-size: 20px; font-weight:800; color:#fff; letter-spacing:.2px; }

  .msx-buy-bar__actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }

  /* ---------- کدِ تخفیف، تویِ نوارِ پرداخت ---------- */
  .msx-coupon__toggle{
    position: relative;
    display:inline-flex; align-items:center; gap:6px;
    padding: 10px 18px;
    font-family:inherit; font-size:13px; font-weight:800;
    color:#FDE9C8;
    border:none; border-radius:999px; cursor:pointer;
    background:
      linear-gradient(#1B1E2B, #1B1E2B) padding-box,
      linear-gradient(120deg, var(--accent-amber), #ffd48a 45%, var(--accent-mint)) border-box;
    border: 1.5px solid transparent;
    box-shadow: 0 10px 22px -10px rgba(217,119,6,.55);
    transition: transform .15s ease, box-shadow .2s ease;
  }
  .msx-coupon__toggle:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(217,119,6,.7); }
  .msx-coupon__toggle:active{ transform: translateY(0) scale(.97); }
  .msx-coupon__toggle-icon{ font-size: 14px; }

  /* ⭐ فرمِ واردکردنِ کد به‌صورتِ پاپ‌آورِ مستقل و شناور بالایِ دکمه‌ست —
     عمداً به‌جایِ اینکه توی ردیفِ خودِ نوار جا بشه، چون همون‌جا موندنش
     باعث می‌شد با شکستنِ خط/کم‌شدنِ فضا از داخلِ نوار بزنه بیرون. این‌جوری
     شکل/اندازه‌ی خودِ نوار همیشه ثابت می‌مونه. */
  .msx-coupon{ position: relative; display:inline-flex; align-items:center; }
  .msx-coupon__popover{
    position: absolute;
    bottom: calc(100% + 14px);
    right: 50%;
    transform: translateX(50%);
    z-index: 60;
    width: max-content;
    min-width: 280px;
    max-width: min(88vw, 340px);
    display:flex; flex-direction:column; gap:10px;
    padding: 16px 16px 14px;
    border-radius: 18px;
    background: linear-gradient(160deg, #232739, #14151D);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 26px 55px -16px rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.4);
    animation: msxCouponFormIn .18s var(--ease-pop) both;
  }
  .msx-coupon__popover::after{
    content:"";
    position:absolute;
    top:100%; right:50%;
    transform: translateX(50%);
    width:14px; height:14px;
    background: #14151D;
    border-inline-end: 1px solid rgba(255,255,255,.12);
    border-block-end: 1px solid rgba(255,255,255,.12);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }
  .msx-coupon__popover-head{
    display:flex; align-items:center; justify-content:space-between;
    font-size: 12.5px; font-weight:800; color: rgba(255,255,255,.75);
  }
  .msx-coupon__popover-row{
    display:flex; align-items:center; gap:8px;
    background: rgba(255,255,255,.05);
    border: 1.5px solid rgba(255,255,255,.14);
    border-radius: 999px;
    padding: 5px 6px 5px 14px;
  }
  .msx-coupon__popover-row:focus-within{
    border-color: rgba(69,230,165,.55);
    box-shadow: 0 0 0 3px rgba(69,230,165,.15);
  }
  @keyframes msxCouponFormIn{
    from{ opacity:0; transform: translateX(50%) translateY(6px) scale(.94); }
    to{ opacity:1; transform: translateX(50%) translateY(0) scale(1); }
  }
  .msx-coupon__input{
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color:#fff;
    letter-spacing: .5px;
  }
  .msx-coupon__input::placeholder{ color: rgba(255,255,255,.35); font-weight:500; letter-spacing:normal; }
  .msx-coupon__input:focus{ outline:none; box-shadow:none; }
  .msx-coupon__apply{
    flex: none;
    font-family: inherit; font-size:12.5px; font-weight:800; color:#0F1130;
    border:none; border-radius:999px; cursor:pointer;
    padding: 8px 16px;
    background: linear-gradient(120deg, var(--accent-mint), #7be8c2);
    box-shadow: 0 8px 18px -8px rgba(69,230,165,.55);
    transition: transform .15s ease, filter .15s ease;
    white-space: nowrap;
  }
  .msx-coupon__apply:hover{ filter:brightness(1.06); transform: translateY(-1px); }
  .msx-coupon__apply:active{ transform: translateY(0) scale(.96); }
  .msx-coupon__close{
    display:inline-flex; align-items:center; justify-content:center;
    width:22px; height:22px;
    font-size:11px; color: rgba(255,255,255,.5);
    background: rgba(255,255,255,.06);
    border:none; border-radius:50%; cursor:pointer;
    transition: background .15s ease, color .15s ease;
  }
  .msx-coupon__close:hover{ background: rgba(225,29,72,.18); color:#fff; }

  .msx-coupon__chip{
    display:flex; align-items:center; gap:8px;
    padding: 8px 8px 8px 16px;
    border-radius: 999px;
    background: rgba(5,150,105,.16);
    border: 1.5px solid rgba(5,150,105,.5);
    animation: msxCouponFormIn .18s var(--ease-pop) both;
  }
  .msx-coupon__chip-icon{
    display:inline-flex; align-items:center; justify-content:center;
    width:18px; height:18px; border-radius:50%;
    background: var(--accent-mint); color:#0F1130;
    font-size:10.5px; font-weight:900;
  }
  .msx-coupon__chip-text{ font-size:12.5px; font-weight:800; color:#B7F3D8; white-space:nowrap; }
  .msx-coupon__remove{
    display:inline-flex; align-items:center; justify-content:center;
    width:24px; height:24px;
    font-size:12px; color: rgba(255,255,255,.55);
    background: rgba(255,255,255,.06);
    border:none; border-radius:50%; cursor:pointer;
    transition: background .15s ease, color .15s ease;
  }
  .msx-coupon__remove:hover{ background: rgba(225,29,72,.22); color:#fff; }

  .msx-coupon__error{
    font-size: 12px; font-weight:700;
    color: #FCA5A5;
    background: rgba(225,29,72,.12);
    border: 1px solid rgba(225,29,72,.35);
    border-radius: 12px;
    padding: 7px 12px;
    line-height: 1.6;
  }

  @media (max-width: 640px){
    .msx-coupon__popover{ right:auto; left:0; transform:none; }
    .msx-coupon__popover::after{ display:none; }
    @keyframes msxCouponFormIn{
      from{ opacity:0; transform: translateY(6px) scale(.94); }
      to{ opacity:1; transform: translateY(0) scale(1); }
    }
  }
  .msx-buy-bar__btn{
    display:inline-flex; align-items:center; gap:8px;
    padding: 13px 24px;
    font-family: inherit; font-size:14.5px; font-weight:800; color:#fff;
    border:none; border-radius:999px; cursor:pointer;
    background: linear-gradient(120deg, var(--accent-mint), #7be8c2 55%, var(--accent-amber));
    background-size: 180% 100%;
    box-shadow: 0 14px 28px -10px rgba(69,230,165,0.45);
    transition: background-position .5s ease, transform .15s ease;
  }
  .msx-buy-bar__btn:hover{ background-position:100% 0%; transform: translateY(-1px); }
  .msx-buy-bar__btn:active{ transform: scale(.97); }
  .msx-buy-bar__btn-arrow{ transition: transform .15s ease; }
  .msx-buy-bar__btn:hover .msx-buy-bar__btn-arrow{ transform: translateX(-3px); }

  @media (max-width: 640px){
    .msx-buy-bar{ position: static; }
  }

  .msx-empty-note{
    background: var(--card-bg);
    border: 1px dashed var(--card-border);
    border-radius: var(--radius-card);
    padding: 34px 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.9;
  }
  .msx-empty-note__icon{ font-size: 30px; display: block; margin-bottom: 10px; }

  /* ---------- «ویرایش دیتاهای سایت» (فقط ادمین کل/ادمین) ---------- */
  .msx-sitedata-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 6px;
  }
  .msx-sitedata-card{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    text-align: right;
    font-family: inherit;
    padding: 26px 24px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    background: var(--card-bg);
    box-shadow: var(--shadow-card);
    cursor: pointer;
    overflow: hidden;
    transition: transform .2s var(--ease-pop, ease), box-shadow .2s ease;
  }
  .msx-sitedata-card::before{
    content: '';
    position: absolute;
    inset: 0;
    opacity: .1;
    transition: opacity .2s ease;
  }
  .msx-sitedata-card--uni::before{  background: linear-gradient(135deg, var(--accent-lav), var(--accent-mint)); }
  .msx-sitedata-card--rank::before{ background: linear-gradient(135deg, var(--accent-amber), var(--accent-lav)); }
  .msx-sitedata-card:hover{ transform: translateY(-3px); box-shadow: 0 30px 70px -20px rgba(55,62,75,0.32), 0 0 0 1px rgba(255,255,255,0.55) inset; }
  .msx-sitedata-card:hover::before{ opacity: .18; }
  .msx-sitedata-card__icon{ font-size: 30px; }
  .msx-sitedata-card__title{ font-size: 16.5px; font-weight: 800; color: var(--text-paper); }
  .msx-sitedata-card__desc{ font-size: 13px; color: var(--text-muted); line-height: 1.8; }
  .msx-sitedata-card__arrow{
    align-self: flex-start;
    margin-top: 4px;
    font-size: 18px;
    color: var(--accent-mint);
  }

  .msx-sitedata-editor{ animation: cardPopIn .25s var(--ease-pop, ease) both; }
  .msx-sitedata-editor .mxb-back{ margin-bottom: 16px; }

  .msx-td-input{
    width: 100%;
    min-width: 90px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 13px;
    color: var(--text-paper);
    background: rgba(var(--ink),0.035);
    border: 1px solid rgba(var(--ink),0.09);
    border-radius: 9px;
    outline: none;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
  }
  .msx-td-input::placeholder{ color: var(--text-faint); }
  .msx-td-input:focus{
    border-color: var(--accent-mint);
    background: rgba(69,230,165,0.045);
    box-shadow: 0 0 0 3px rgba(69,230,165,0.14);
  }

  .mxb-row-delete-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 14px;
    background: rgba(225,29,72,0.09);
    border: 1px solid rgba(225,29,72,0.22);
    border-radius: 9px;
    cursor: pointer;
    transition: background .2s ease, transform .15s ease;
  }
  .mxb-row-delete-btn:hover{ background: rgba(225,29,72,0.18); transform: translateY(-1px); }

  .msx-sitedata-hint{ font-size: 12.5px; color: var(--text-muted); line-height: 1.8; max-width: 420px; }

  .msx-sitedata-toolbar{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
  }
  .msx-sitedata-toolbar__search{ flex: 1 1 260px; min-width: 220px; }
  .msx-sitedata-toolbar select.select-role{ flex: 1 1 160px; min-width: 140px; }
  .msx-sitedata-toolbar__ms{ flex: 1 1 160px; min-width: 140px; }

  .msx-sortable-th{ cursor: pointer; user-select: none; white-space: nowrap; }
  .msx-sortable-th:hover{ color: var(--accent-mint); }
  .msx-sortable-th.is-sorted{ color: var(--accent-mint); }
  .msx-sort-arrow{ font-size: 10px; margin-right: 4px; display: inline-block; }

  .msx-sitedata-pagination{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 16px;
  }
  .msx-sitedata-pagination__info{ font-size: 13px; color: var(--text-muted); white-space: nowrap; }

  /* ---------- «رتبه‌بندی دانشگاه‌ها»: نوارِ آماری، چیپ‌ها، پلکانِ رتبه ---------- */
  .msx-uni-stats{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 2px 0 14px;
  }
  .msx-uni-stat{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    border: 1px solid transparent;
    white-space: nowrap;
  }
  .msx-uni-stat--total{ background: rgba(124,108,255,0.1); color: var(--accent-lav); border-color: rgba(124,108,255,0.22); }
  .msx-uni-stat--warn{  background: rgba(217,119,6,0.12);  color: var(--accent-amber); border-color: rgba(217,119,6,0.26); }
  .msx-uni-stat--ok{    background: rgba(5,150,105,0.1);   color: var(--accent-mint);  border-color: rgba(5,150,105,0.22); }

  .msx-uni-rank-table td{ vertical-align: middle; }

  .msx-city-chip{
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-paper);
    background: rgba(var(--ink),0.05);
    border: 1px solid rgba(var(--ink),0.08);
    white-space: nowrap;
  }

  .msx-major-chip{
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 800;
    white-space: nowrap;
    background: rgba(var(--ink),0.05);
    color: var(--text-muted);
    border: 1px solid rgba(var(--ink),0.08);
  }
  .msx-major-chip.is-riyazi{  background: rgba(124,108,255,0.13); color: var(--accent-lav);   border-color: rgba(124,108,255,0.26); }
  .msx-major-chip.is-tajrobi{ background: rgba(5,150,105,0.12);   color: var(--accent-mint);   border-color: rgba(5,150,105,0.26); }
  .msx-major-chip.is-ensani{  background: rgba(217,119,6,0.13);   color: var(--accent-amber);  border-color: rgba(217,119,6,0.26); }

  .msx-uni-cell{ display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
  .msx-uni-cell__name{ font-weight: 700; color: var(--text-paper); }
  .msx-incomplete-badge{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(217,119,6,0.1);
    color: var(--accent-amber);
    border: 1px solid rgba(217,119,6,0.24);
    white-space: nowrap;
  }

  .msx-rank-cell{ display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
  .msx-rank-cell--overridden .msx-rank-input{
    border-color: var(--accent-amber);
    background: rgba(217,119,6,0.06);
  }
  .msx-rank-cell--overridden .msx-rank-input:focus{
    box-shadow: 0 0 0 3px rgba(217,119,6,0.16);
  }

  /* جدولِ «رتبه آخرین فرد قبولی»: هر ردیف پنج ستونِ رتبه‌یِ مستقل داره، هرکدوم
     فقط یک اینپوت — برخلافِ سلولِ «رتبه‌بندی دانشگاه‌ها» که به‌خاطرِ استپر+برچسب
     نیاز به display:flex داره. کلاسِ msx-rank-cell (بالا) رو روی این <td>ها
     نذار: display:flex باعث می‌شه <td> از حالتِ table-cell خارج بشه و
     ستون‌ها به‌جایِ کنارِ هم، زیرِ هم بیفتن (دقیقاً همون باگی که دیده می‌شد). */
  /* جدولِ «رتبه آخرین فرد قبولی» — نسخه‌یِ فشرده: عرضِ ستون‌ها با colgroup
     (درصدی) مشخص شده و table-layout:fixed می‌ذاریم رو ۱۰۰٪ کانتینر جا بشه،
     بدونِ اسکرولِ افقیِ الکی. هدرها هم دوتکه‌ان: یه برچسبِ کوچیکِ خاکستری
     («آخرین فرد قبولی») بالا و زیرش برچسبِ اصلیِ کوتاه («منطقه ۱») — هم
     جمع‌وجورتره هم خواناتر از تکرارِ کلِ عبارت تویِ هر ستون. */
  #msxLastRankTable{ table-layout: fixed; }
  @media (max-width: 900px){
    .msx-lastrank-scroll{ overflow-x: auto; }
    #msxLastRankTable{ table-layout: auto; min-width: 760px; }
  }
  #msxLastRankTable th,
  #msxLastRankTable td{ overflow-wrap: break-word; }
  .msx-lastrank-th{
    text-align: center;
    padding: 8px 4px 9px;
    background: var(--table-header-bg, #F0EEFA);
  }
  .msx-lastrank-th__group{
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-faint);
    letter-spacing: .1px;
    margin-bottom: 2px;
  }
  .msx-lastrank-th__label{
    display: block;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--text-paper);
  }
  .msx-lastrank-table td:nth-child(n+5){ text-align: center; }
  .msx-lastrank-cell{ vertical-align: middle; }
  /* رنگِ دورِ سلول بر اساسِ وضعیتِ تاییدِ ادمین: بی‌رنگ (دست‌نخورده) →
     زرد (ویرایش‌شده، منتظرِ تاییدِ ادمینِ دیگه) → سبز (تاییدشده). */
  .msx-lastrank-cell--edited{
    box-shadow: inset 0 0 0 1.5px var(--accent-amber);
    border-radius: 8px;
  }
  .msx-lastrank-cell--edited .msx-rank-input{
    border-color: var(--accent-amber);
    background: rgba(217,119,6,0.06);
  }
  .msx-lastrank-cell--edited .msx-rank-input:focus{
    box-shadow: 0 0 0 3px rgba(217,119,6,0.16);
  }
  .msx-lastrank-cell--approved{
    box-shadow: inset 0 0 0 1.5px var(--accent-mint);
    border-radius: 8px;
  }
  .msx-lastrank-cell--approved .msx-rank-input{
    border-color: var(--accent-mint);
    background: rgba(5,150,105,0.06);
  }
  .msx-lastrank-cell--approved .msx-rank-input:focus{
    box-shadow: 0 0 0 3px rgba(5,150,105,0.16);
  }
  .msx-lastrank-cellrow{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
  }
  .msx-lastrank-approve-btn{
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    color: var(--text-muted);
    background: rgba(var(--ink),0.04);
    border: 1px solid rgba(var(--ink),0.09);
    border-radius: 7px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
  }
  .msx-lastrank-approve-btn:hover{
    color: var(--accent-mint);
    border-color: rgba(5,150,105,0.35);
    background: rgba(5,150,105,0.08);
  }
  .msx-lastrank-approve-btn.is-approved{
    color: #fff;
    background: var(--accent-mint);
    border-color: var(--accent-mint);
  }
  /* رتبه‌های «آخرین فرد قبولی» عددهایِ ۴-۶ رقمی‌ان (نه فقط ۱..N مثلِ رتبه‌بندیِ دانشگاه‌ها)، پس عرضِ بیشتری لازم دارن — ولی چون ستون‌ها الان با colgroup محدودن، عرض رو با flex به‌جایِ min-width بزرگ حل می‌کنیم. */
  #msxLastRankTable .msx-rank-input{
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    padding: 7px 4px;
    text-align: center;
  }
  .msx-rank-stepper{
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .msx-rank-input{
    width: 56px;
    min-width: 56px;
    text-align: center;
    font-weight: 800;
  }
  .msx-rank-step{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 10px;
    line-height: 1;
    color: var(--text-muted);
    background: rgba(var(--ink),0.04);
    border: 1px solid rgba(var(--ink),0.09);
    border-radius: 7px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .15s ease;
  }
  .msx-rank-step:hover{ background: rgba(5,150,105,0.13); color: var(--accent-mint); transform: translateY(-1px); }
  .msx-rank-of{ font-size: 11px; color: var(--text-faint); padding-inline-start: 2px; }

  .msx-uni-row{ transition: background .2s ease; }
  .msx-uni-row.is-saving{ opacity: .55; pointer-events: none; }
  .msx-uni-row.msx-row-flash{ animation: msxUniRankFlash 1.4s ease; }
  @keyframes msxUniRankFlash{
    0%   { background: rgba(69,230,165,0.32); }
    100% { background: transparent; }
  }

  .msx-field-set{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .msx-field-set .msx-field-select{ min-width: 120px; }

  /* ---------- کارت‌هایِ جمع‌شونده (آکاردئونی) ----------
     کارت‌هایِ «افزودنِ دانش‌آموز» و «افزودنِ گروهی» بعد از این‌که کارِ
     کاربر باهاشون تموم شد، الکی فضا نگیرن: هم با کلیک رویِ سربرگ جمع
     می‌شن، هم وقتی کاربر به سمتِ پایین (سراغِ لیستِ دانش‌آموزها) اسکرول
     می‌کنه خودشون جمع می‌شن و با برگشت به بالا دوباره باز می‌شن. */
  .msx-foldable{ transition: padding .3s var(--ease-pop, ease); }
  /* تا وقتی صفحه تازه لود شده، هیچ انیمیشنی بازی نمی‌شه (کارت‌ها از
     اول جمع‌ان و نباید موقعِ لود، جمع‌شدن رو جلویِ چشمِ کاربر اجرا کنن) */
  .msx-foldable:not(.is-fold-ready),
  .msx-foldable:not(.is-fold-ready) .msx-fold-body,
  .msx-foldable:not(.is-fold-ready) .msx-fold-chevron{ transition: none; }
  .msx-foldable.is-folded{ padding-top: 20px; padding-bottom: 20px; }

  .msx-fold-head{
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
  }
  .msx-fold-title{ margin: 0; min-width: 0; }
  .msx-fold-hint{
    margin-inline-start: auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .2s ease;
  }
  .msx-fold-head:hover .msx-fold-hint{ color: var(--text-muted); }
  .msx-fold-chevron{
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    background: rgba(var(--ink), 0.05);
    border: 1px solid var(--card-border);
    transition: transform .38s var(--ease-pop, ease), background .2s ease, color .2s ease;
  }
  .msx-fold-chevron svg{ width: 16px; height: 16px; }
  .msx-fold-head:hover .msx-fold-chevron{ background: rgba(var(--ink), 0.10); color: var(--accent-lav); }
  .msx-fold-head:focus-visible{ outline: none; }
  .msx-fold-head:focus-visible .msx-fold-chevron{ box-shadow: 0 0 0 3px rgba(124, 108, 255, 0.22); }
  .is-folded .msx-fold-chevron{ transform: rotate(-180deg); color: var(--accent-lav); }

  .msx-fold-body{
    display: grid;
    grid-template-rows: 1fr;
    margin-top: 20px;
    opacity: 1;
    transition: grid-template-rows .38s var(--ease-pop, ease), opacity .26s ease, margin-top .3s ease;
  }
  .msx-fold-inner{ min-height: 0; overflow: hidden; }
  /* وقتی کارت کاملاً باز شد، دیگه چیزی رو نمی‌بُریم تا کمبوباکسِ «مدرسه»
     بتونه از لبه‌یِ فرم بزنه بیرون */
  .msx-fold-body.is-open-done .msx-fold-inner{ overflow: visible; }
  .is-folded .msx-fold-body{
    grid-template-rows: 0fr;
    margin-top: 0;
    opacity: 0;
  }
  @media (prefers-reduced-motion: reduce){
    .msx-foldable,
    .msx-fold-body,
    .msx-fold-chevron{ transition: none; }
  }
  @media (max-width: 560px){
    .msx-fold-hint{ display: none; }
  }

  /* ---------- ردیفِ دو دکمه‌ی «افزودنِ دانش‌آموز» / «افزودنِ گروهی»:
     به‌جایِ دو نوارِ تمام‌عرضِ خسته‌کننده که زیرِ هم افتاده بودن، حالا
     دو تایلِ جذاب و رنگی کنارِ هم (تویِ یه ردیف) نشسته‌ان. با کلیک رویِ
     هرکدوم، دقیقاً مثلِ قبل بازش می‌شه؛ فقط چون فرم موقعِ باز شدن به
     فضایِ بیشتری نیاز داره، همون لحظه هردو تایل تمام‌عرض می‌شن (کلاسِ
     msx-add-row--has-open) و زیرِ هم قرار می‌گیرن. ---------- */
  .msx-add-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    width: 100%;
  }
  .msx-add-row .msx-foldable{ margin: 0; }
  .msx-add-row .msx-foldable:not(.is-folded),
  .msx-add-row.msx-add-row--has-open .msx-foldable{
    grid-column: 1 / -1;
  }
  /* تویِ حالتِ جمع‌شده، خودِ سربرگ (که حالا شکلِ یه تایلِ رنگی داره)
     کافیه؛ پدینگِ اضافه‌یِ کارتِ سفیدِ دورش رو کم می‌کنیم تا تایل جمع‌وجور
     و دکمه‌وار بمونه، نه یه جعبه‌ی بزرگِ نیمه‌خالی. */
  .msx-add-row .msx-foldable.is-folded{ padding: 10px; }
  @media (max-width: 760px){
    .msx-add-row{ grid-template-columns: 1fr; }
  }

  .msx-add-row .msx-fold-head{
    gap: 14px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid var(--card-border);
    background: linear-gradient(135deg, rgba(124,108,255,0.09), rgba(124,108,255,0.02));
    transition: transform .22s var(--ease-pop, ease), box-shadow .22s ease, border-color .22s ease;
  }
  .msx-add-row .msx-fold-head:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -16px rgba(124,108,255,0.5);
    border-color: rgba(124,108,255,0.35);
  }
  .msx-add-row .msx-fold-head:active{ transform: translateY(0); }
  #msxBulkFoldHead{
    background: linear-gradient(135deg, rgba(217,119,6,0.10), rgba(217,119,6,0.02));
  }
  #msxBulkFoldHead:hover{
    box-shadow: 0 14px 30px -16px rgba(217,119,6,0.5);
    border-color: rgba(217,119,6,0.35);
  }

  .msx-fold-icon{
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    line-height: 1;
    background: linear-gradient(135deg, var(--accent-lav), #A79BFF);
    box-shadow: 0 6px 16px -6px rgba(124,108,255,0.65);
  }
  #msxBulkFoldHead .msx-fold-icon{
    background: linear-gradient(135deg, var(--accent-amber), #F2A93B);
    box-shadow: 0 6px 16px -6px rgba(217,119,6,0.65);
  }

  .msx-fold-headtext{
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto;
    text-align: start;
  }
  .msx-add-row .msx-fold-title{ font-size: 15px; }
  .msx-add-row .msx-fold-hint{
    margin-inline-start: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 12px;
  }
  @media (max-width: 560px){
    .msx-add-row .msx-fold-hint{ display: block; }
  }

  /* ---------- افزودنِ گروهیِ دانش‌آموزان (آپلودِ فایلِ اکسل/CSV) ---------- */
  .msx-bulk-card{ margin-bottom: 0; }
  .msx-bulk-hint{
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.9;
  }
  .msx-bulk-actions{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }
  .msx-bulk-file-label{ cursor: pointer; }
  .msx-bulk-filename{
    font-size: 12.5px;
    color: var(--text-faint);
    flex: 1 1 auto;
    min-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .msx-bulk-submit{
    flex: 0 0 auto;
    width: auto;
    margin-top: 0;
    padding: 12px 22px;
  }
  .msx-bulk-results{
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--card-border);
    background: rgba(var(--ink), 0.025);
    font-size: 13px;
    line-height: 2;
  }
  .msx-bulk-results__summary{ font-weight: 700; margin: 0 0 6px; }
  .msx-bulk-results__summary--ok{ color: var(--accent-mint); }
  .msx-bulk-results__summary--warn{ color: var(--accent-amber); }
  .msx-bulk-results__errors{
    margin: 8px 0 0;
    padding-inline-start: 18px;
    color: #BE123C;
  }
  .msx-bulk-results__errors li{ margin-bottom: 3px; }

  /* ---------- مودالِ بازبینیِ اطلاعات، قبل از افزودنِ گروهی ---------- */
  .msx-bp-toolbar{
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 10px;
    border: 1px solid var(--card-border);
    border-radius: 16px;
    background: rgba(var(--ink), 0.03);
  }
  .msx-bp-selectall{
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
  }
  .msx-bp-selcount{ font-size: 12px; color: var(--text-faint); }
  .msx-bp-bulkedit{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto;
  }
  .msx-bp-bulkedit__label{ font-size: 12px; color: var(--text-muted); font-weight: 700; }
  .msx-bp-bulkedit select,
  .msx-bp-bulkedit input{
    min-width: 130px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--text-paper);
    background: rgba(var(--ink), 0.035);
    border: 1px solid rgba(var(--ink), 0.12);
    border-radius: 10px;
  }
  .msx-bp-bulkedit .btn-ghost,
  .msx-bp-dropbad{ padding: 8px 12px; font-size: 12.5px; }
  .msx-bp-dropbad{ color: #BE123C; }

  .msx-bp-tablewrap{
    flex: 1 1 auto;
    overflow: auto;
    border: 1px solid var(--card-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.28);
  }
  .msx-bp-table{ font-size: 12.5px; }
  .msx-bp-table th{
    padding: 10px 8px;
    white-space: nowrap;
    background: var(--bg-night-2);
  }
  .msx-bp-table td{ padding: 6px 8px; vertical-align: middle; }
  .msx-bp-table tr.is-invalid{ background: rgba(225, 29, 72, 0.06); }
  .msx-bp-table tr.is-invalid:hover{ background: rgba(225, 29, 72, 0.10); }
  .msx-bp-input,
  .msx-bp-select{
    width: 100%;
    min-width: 100px;
    padding: 7px 8px;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--text-paper);
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(var(--ink), 0.10);
    border-radius: 10px;
  }
  .msx-bp-input--wide{ min-width: 160px; }
  .msx-bp-input:focus,
  .msx-bp-select:focus{
    outline: none;
    border-color: var(--accent-lav);
    box-shadow: 0 0 0 3px rgba(124, 108, 255, 0.12);
  }
  .msx-bp-raw{
    display: block;
    margin-top: 3px;
    font-size: 10.5px;
    color: #BE123C;
  }
  .msx-bp-c-num{ text-align: center; color: var(--text-faint); }
  .msx-bp-c-check,
  .msx-bp-c-del{ text-align: center; width: 38px; }
  .msx-bp-c-status{ white-space: nowrap; }
  .msx-bp-badge{
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
  }
  .msx-bp-badge--ok{ background: rgba(5, 150, 105, 0.12); color: var(--accent-mint); }
  .msx-bp-badge--bad{ background: rgba(225, 29, 72, 0.12); color: #BE123C; }

  .msx-bp-footer{
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
  }
  .msx-bp-summary{
    margin: 0;
    flex: 1 1 220px;
    font-size: 12.5px;
    color: var(--text-muted);
  }
  .msx-bp-sum-ok{ color: var(--accent-mint); font-weight: 700; }
  .msx-bp-sum-bad{ color: #BE123C; font-weight: 700; }
  .msx-bp-actions{ display: flex; gap: 10px; margin-inline-start: auto; }
  .msx-bp-confirm{ width: auto; margin-top: 0; padding: 12px 22px; }
  @media (max-width: 820px){
    .msx-bp-bulkedit{ margin-inline-start: 0; width: 100%; }
    .msx-bp-bulkedit select,
    .msx-bp-bulkedit input{ flex: 1 1 120px; min-width: 0; }
    .msx-bp-actions{ width: 100%; }
    .msx-bp-confirm{ flex: 1 1 auto; }
  }

  /* ---------- فرمِ «افزودنِ دانش‌آموز» رویِ صفحه‌هایِ بزرگ (لپ‌تاپ/دسکتاپ):
     به‌جایِ یه ستونِ باریک و بلند که آدم رو مجبور به اسکرولِ الکی می‌کنه،
     افقی و کارت‌مانند می‌شه و فیلدها کنارِ هم می‌شینن. رویِ موبایل دست
     نمی‌خوره و همون چیدمانِ عمودیِ فعلی (که خودش خوبه) می‌مونه. */
  @media (min-width: 861px){
    #msxViewStudents .panel-card--form{
      flex: 1 1 100%;
      max-width: none;
    }
    #msxAddStudentForm{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 18px 20px;
    }
    #msxAddStudentForm .field-row{ display: contents; }
    #msxAddStudentForm #msxSchoolCombo{ grid-column: span 2; }
    #msxAddStudentForm .form__error{ grid-column: 1 / -1; }
    #msxAddStudentForm .btn-submit{
      grid-column: 1 / -1;
      margin-top: 2px;
    }
  }

  /* رویِ صفحه‌هایِ بزرگ (لپ‌تاپ/دسکتاپ): «منویِ اصلی» وقتی بازه هم فقط
     به‌اندازه‌یِ محتوایِ کوتاهِ خودش می‌مونه — نه بیشتر — تا «ابزار
     رشته‌محل» زیرش مجبور نشه به‌زورِ فضایِ خالی، بره ته‌ته‌یِ سایدبار.
     (رویِ موبایل عمداً دست‌نخورده می‌مونه؛ اونجا با flex:1 1 100% باید
     تمامِ‌عرض بشه — قانونش تویِ مدیاکوئریِ موبایلِ زیر همینه.) */
  @media (min-width: 861px){
    .msx-sidebar-nav-wrap.msx-sidebar-nav-wrap{
      flex: 0 0 auto;
    }
  }

  @media (max-width: 860px){
    .msx-shell{ flex-direction: column; }
    .msx-sidebar{
      width: auto; flex: 0 0 auto;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      border-inline-start: none;
      border-bottom: 1px solid var(--card-border);
    }
    .msx-sidebar__brand{ padding: 0; }
    .msx-user{ order: 3; flex: 1 1 100%; }
    .msx-nav{ order: 4; flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; }
    .msx-nav__item{ flex: 1 1 auto; justify-content: center; }
    .msx-back{ margin: 0; order: 2; }
    .msx-content{ padding: 20px 16px 32px; }
    .msx-sidebar-mxb{ order: 5; flex: 1 1 100%; }
  }


/* ===========================================================
   سفارشی‌سازیِ اختصاصیِ پروژه‌یِ «هدفینو»: پس‌زمینه‌ی عکس‌دارِ صفحه‌ی
   ورود + نشانِ برند + رنگ‌بندیِ طلایی/کهربایی مدالِ ورود.
   (این بخش در پروژه‌ی خلیلی وجود نداره؛ عمداً بعد از بقیه‌یِ استایل‌ها
   اضافه شده تا با اولویتِ بالاتر، ظاهرِ اختصاصیِ هدفینو رو جایگزینِ
   نسخه‌ی خلیلی کنه.)
   =========================================================== */
.scene{
  position: relative;
  min-height: 100vh;
  width: 100%;
  /* ⭐ عکسِ داده‌شده الان کلِ پس‌زمینه‌ی صفحه‌ست؛ رنگِ --bg-night به‌عنوانِ
     فالبک/لبه، برایِ زمانی‌که نسبتِ تصویر با نسبتِ صفحه یکی نباشه. */
  background:
    url('../assets/img/login-bg.jpg') right center / cover no-repeat,
    var(--bg-night);
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

.stage{
  position:relative;
  z-index:2;
  width:100%;
  display:flex;
  justify-content:flex-end;
  padding: 32px 6vw;
}

/* ---------- بندِ عکسِ صفحه‌یِ ورود، مخصوصِ گوشی (رویِ دسکتاپ کلاً مخفیه) ---------- */
.scene__hero{
  display:none;
  position:relative;
  width:100%;
  padding-top: 75%; /* نسبتِ ابعادِ 4:3 با ترفندِ کلاسیکِ padding، برایِ سازگاریِ کاملِ مرورگرها */
  overflow:hidden;
  border-radius: 0 0 32px 32px;
  box-shadow: 0 18px 40px -20px rgba(30,20,10,0.4);
}
.scene__hero img{
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: 80% 38%;
  display:block;
}
.scene__hero::after{
  content:"";
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  background: linear-gradient(180deg, rgba(20,14,6,0) 62%, rgba(20,14,6,0.16) 100%);
  pointer-events:none;
}

@media (max-width: 900px){
  /* رویِ گوشی، به‌جایِ یه پس‌زمینه‌یِ کاور-شده که زیرِ کارت بریده و گم می‌شد،
     خودِ عکس تویِ یه بندِ جدا و کاملاً دیده‌شده بالایِ کارت میاد. */
  .scene{
    background: var(--bg-night);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding-bottom: 36px;
  }
  .scene__hero{ display:block; }
  .stage{ justify-content:center; padding: 28px 20px 32px; }
}
@media (max-width: 480px){
  .scene__hero{ padding-top: 82%; border-radius: 0 0 26px 26px; }
}

/* ---------- نشانِ برند (لوگویِ هدفینو) — حالا بالایِ خودِ کارتِ ورود، وسط‌چین ----------
   لوگویِ رنگی روی مدالِ کِرمی/طلاییِ ورود خیلی خوب می‌شینه، برایِ همین به‌جایِ
   نسخه‌یِ سفید/مشکی از logo-color.png استفاده شده. */
.modal__logo{
  display:flex;
  justify-content:center;
  margin: -6px 0 22px;
}
.modal__logo img{
  display:block;
  width: 104px;
  height:auto;
  filter: drop-shadow(0 14px 26px rgba(217,119,6,0.30));
  animation: logo-in .8s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes logo-in{
  from{ opacity:0; transform: translateY(-14px) scale(.88); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}
@media (max-width: 640px){
  .modal__logo{ margin: -4px 0 18px; }
  .modal__logo img{ width: 84px; }
}

/* ---------- رنگ‌بندیِ طلایی/کهربایی مدالِ ورود (هماهنگ با رفرنسِ داده‌شده) ----------
   فقط با #loginModal اسکوپ شده تا استایلِ مشترکِ .field/.form/.btn-submit
   تویِ majors.html (که همین کلاس‌ها رو برایِ فرم‌هایِ دیگه هم داره) دست‌نخورده بمونه. */
#loginModal{
  background: linear-gradient(180deg, rgba(255,252,246,0.86), rgba(255,250,242,0.68));
  border-color: rgba(202,138,4,0.22);
  box-shadow: 0 24px 60px -18px rgba(55,62,75,0.24), 0 0 0 1px rgba(255,255,255,0.6) inset,
              0 30px 70px -30px rgba(217,119,6,0.28);
}
#loginModal .modal__eyebrow{ color:#B8790A; }
/* تیترِ مدالِ ورود: بعد از حذفِ چشم‌انداز/زیرعنوان، تیتر وسط‌چین شد و
   به‌جایِ رنگِ یک‌دستِ قبلی، یه گرادیانِ طلایی/کهربایی (هماهنگ با تمِ
   کارت) گرفت تا هم خوانا بمونه، هم جذاب‌تر به‌نظر بیاد. */
#loginModal .modal__title{
  text-align:center;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: .2px;
  margin: 6px 0 30px;
  background: linear-gradient(95deg, #B8790A, #F0A93A 50%, #B8790A);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:none;
}
/* برچسبِ فیلدها یه‌کمی درشت‌تر و پررنگ‌تر، برایِ ظاهرِ شیک‌ترِ فرم */
#loginModal .field label{
  font-weight: 700;
  color: var(--text-paper);
  letter-spacing: .1px;
}
#loginModal .field input:focus{
  border-color:#D97706;
  background: rgba(217,119,6,0.05);
  box-shadow: 0 0 0 4px rgba(217,119,6,0.14);
}
#loginModal .btn-submit{
  color:#2E1D02;
  background: linear-gradient(95deg, #FBDB8F, #F0A93A 55%, #D97706);
  background-size:160% 100%;
  box-shadow: 0 14px 28px -10px rgba(217,119,6,0.5);
  font-weight: 800;
  letter-spacing: .2px;
  overflow: hidden;
  transition: background-position .5s ease, transform .2s ease, box-shadow .3s ease;
}
/* ⭐ افکتِ درخشش: یه نوارِ نورِ مورّب که موقعِ هاور، از رویِ دکمه رد می‌شه */
#loginModal .btn-submit::after{
  content:"";
  position:absolute;
  top:0; right:-60%;
  width:45%; height:100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.65), transparent);
  transform: skewX(-18deg);
  transition: right .65s ease;
  pointer-events:none;
  z-index:0;
}
#loginModal .btn-submit__label,
#loginModal .btn-submit__spinner{ position:relative; z-index:1; }
#loginModal .btn-submit:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -10px rgba(217,119,6,0.62);
}
#loginModal .btn-submit:hover::after{ right:130%; }
#loginModal .btn-submit:active{ transform: translateY(0) scale(.98); }
#loginModal .btn-submit__spinner{
  border-color: rgba(46,29,2,0.25);
  border-top-color:#2E1D02;
}
#loginModal .modal__footer a{ color:#B8790A; }
/* ===========================================================
   ستونِ «احتمالِ قبولی» — چیپِ مینیمالِ رنگی
   رتبه‌یِ آخرین پذیرفته‌شده‌یِ سالِ قبل (در سهمیه‌یِ خودِ دانش‌آموز) با
   رتبه‌یِ همون دانش‌آموز مقایسه می‌شه. رنگ از سبز (خیلی زیاد) تا قرمز
   (خیلی کم) می‌ره؛ «بدونِ رقابت» آبیه و «فاقدِ اطلاعاتِ دقیق» خاکستریِ
   بی‌صدا، تا تویِ جدول سروصدا نکنه.
   =========================================================== */
.mxb-td--chance{ overflow:hidden; }

.mxb-chance{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3.5px 9px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:10.5px;
  font-weight:800;
  line-height:1.5;
  white-space:nowrap;
}
.mxb-chance__dot{
  width:6px; height:6px;
  border-radius:50%;
  flex:0 0 auto;
  box-shadow: 0 0 0 2px rgba(255,255,255,.65);
}
.mxb-chance__label{ letter-spacing:.2px; }
/* دو سرِ طیف کمی برجسته‌تر، چون تصمیم‌سازترین‌ان */
.mxb-chance--very_high,
.mxb-chance--very_low{ font-weight:900; box-shadow: 0 0 0 1px currentColor inset; }

.mxb-chance--unknown{
  color: var(--text-faint);
  background: rgba(var(--ink),.06);
  border-color: rgba(var(--ink),.14);
  font-weight:700;
}
.mxb-chance--unknown .mxb-chance__label{ font-size:10px; }
/* ⭐ تنظیماتِ مشترکِ «افزودنِ گروهیِ دانش‌آموزان» (قبل از آپلودِ فایل) */
.msx-bulk-defaults{
  margin: 14px 0 18px;
  padding: 16px 18px 12px;
  border: 1px solid var(--line, #eadccb);
  border-radius: 16px;
  background: rgba(251, 243, 233, .55);
}
.msx-bulk-defaults__title{
  margin: 0 0 12px;
  font-weight: 700;
  font-size: .95rem;
}
.msx-bulk-defaults__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px 16px;
}
.msx-bulk-defaults__grid .field{ margin: 0; }
.msx-bulk-defaults__error{ margin-top: 10px; }
/* ⭐ محدودسازیِ دیدِ ستون‌هایِ سلسله‌مراتبی (ادمین/مدیر/سرمشاور/مشاور) تویِ
   جدول‌هایِ «کاربرانِ زیرمجموعه» و «دانش‌آموزان»، بر اساسِ نقشِ کاربرِ
   لاگین‌شده — نگاه کن به msxApplyHierColumnVisibility تویِ majors.js. */
body.msx-hide-hier-admin .msx-hier-col--admin,
body.msx-hide-hier-manager .msx-hier-col--manager,
body.msx-hide-hier-sarmoshaver .msx-hier-col--sarmoshaver,
body.msx-hide-hier-moshaver .msx-hier-col--moshaver{
  display: none !important;
}
/* ---------- ⭐ تاگلِ فعال/غیرفعال (جدول‌هایِ «کاربران» و «مدارس») ---------- */
.msx-status-wrap{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.msx-switch--status .msx-switch__track{ width:38px; height:22px; }
.msx-switch--status .msx-switch__thumb{ width:16px; height:16px; }
.msx-switch--status input:checked ~ .msx-switch__track{ background:#10b981; }
.msx-switch--status input:checked ~ .msx-switch__track .msx-switch__thumb{ transform: translateX(-16px); }
.msx-switch--status input:focus-visible ~ .msx-switch__track{ outline-color:#10b981; }
.msx-switch--status input:disabled ~ .msx-switch__track{ opacity:.5; cursor:wait; }
.msx-status-label{
  display:inline-flex;
  align-items:center;
  padding:2px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
}
.msx-status-label.is-on { background: rgba(16,185,129,.12); color:#047857; }
.msx-status-label.is-off{ background: rgba(239,68,68,.12);  color:#b91c1c; }
.msx-status-warn{ cursor:help; font-size:13px; line-height:1; }
/* ردیفِ غیرفعال کم‌رنگ می‌شه؛ ستونِ وضعیت و منویِ عملیات عادی می‌مونن. */
tr.msx-row--inactive > td:not(.msx-status-cell):not(.msx-row-menu-cell){ opacity:.5; }
/* ===========================================================
   ⭐ جمع/بازکردنِ باکسِ مشخصاتِ دانش‌آموز (ر.ک. mxbSetHeadCollapsed تویِ majors.js)
   زبانه‌یِ گرادیانیِ لبه‌یِ پایینِ کارت؛ با جمع‌شدن، چیپ‌ها/شمارنده/مسیر نرم
   بسته می‌شن و فقط یه خطِ خلاصه (اسم + رتبه + تعدادِ کدها) می‌مونه.
   =========================================================== */
.mxb-head{
  padding-bottom:16px;
  transition: padding .3s ease, gap .3s ease;
}
.mxb-head__collapse{
  position:absolute;
  bottom:0;
  left:50%;
  transform: translateX(-50%);
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:5px;
  height:15px;
  padding:0 12px 0 10px;
  border:none;
  border-radius:10px 10px 0 0;
  background: linear-gradient(135deg, #7C6CFF 0%, #6366F1 45%, #0EA5E9 100%);
  background-size:200% 100%;
  color:#fff;
  font: inherit;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.2px;
  cursor:pointer;
  box-shadow: 0 -6px 16px -8px rgba(99,102,241,.75), 0 0 0 1px rgba(255,255,255,.35) inset;
  transition: height .2s var(--ease-pop, ease), padding .2s ease, background-position .5s ease, box-shadow .2s ease;
}
.mxb-head__collapse:hover,
.mxb-head__collapse:focus-visible{
  height:19px;
  padding:0 16px 0 14px;
  background-position:100% 0;
  box-shadow: 0 -8px 20px -8px rgba(14,165,233,.8), 0 0 0 1px rgba(255,255,255,.45) inset;
}
.mxb-head__collapse:focus-visible{ outline:2px solid rgba(124,108,255,.6); outline-offset:2px; }
.mxb-head__collapse-icon{
  display:inline-block;
  font-size:12px;
  line-height:1;
  margin-top:4px;
  transition: transform .35s var(--ease-pop, ease);
}
.mxb-head.is-collapsed .mxb-head__collapse-icon{ transform: rotate(180deg); margin-top:-2px; }
/* تویِ حالتِ جمع‌شده یه نبضِ ملایم، تا معلوم باشه باکس بازشدنیه */
.mxb-head.is-collapsed .mxb-head__collapse{ animation: mxbHeadTabPulse 2.8s ease-in-out infinite; }
@keyframes mxbHeadTabPulse{
  0%,100%{ box-shadow: 0 -6px 16px -8px rgba(99,102,241,.75), 0 0 0 1px rgba(255,255,255,.35) inset; }
  50%    { box-shadow: 0 -8px 22px -6px rgba(14,165,233,.95), 0 0 0 1px rgba(255,255,255,.5) inset; }
}

/* بخشِ جمع‌شدنی (چیپ‌ها + شمارنده‌یِ کدها + مسیر) — ترفندِ grid-rows برایِ انیمیشنِ ارتفاعِ خودکار */
.mxb-head__details{
  display:grid;
  grid-template-rows: 1fr;
  opacity:1;
  transition: grid-template-rows .35s ease, opacity .25s ease;
}
.mxb-head__details-inner{
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:2px;
  /* ⭐ سایه/حلقه‌یِ چیپ‌هایِ هشدار (mxbKnAttnRing) بیرونِ کادر می‌زنه؛ overflow:hidden لازمهٔ انیمیشنِ جمع‌شدنه،
     پس یه حاشیه‌یِ داخلی می‌دیم تا حلقه بریده نشه (با margin منفیِ هم‌اندازه، ارتفاع عوض نمی‌شه). */
  padding:8px 9px 9px;
  margin:-8px -9px -9px;
  pointer-events:none; /* پدینگِ منفی‌شده نباید کلیک/هاورِ ردیفِ ۱ رو بگیره */
}
.mxb-head__details-inner > *{ pointer-events:auto; }
.mxb-head.is-collapsed .mxb-head__details{ grid-template-rows: 0fr; opacity:0; }
.mxb-head.is-collapsed .mxb-head__path,
.mxb-head.is-collapsed .mxb-head__codes{ display:none !important; }

/* خلاصه‌یِ یک‌خطیِ کنارِ اسم — فقط تویِ حالتِ جمع‌شده */
.mxb-head__mini{
  display:none;
  align-items:center;
  gap:5px;
  margin-inline-start:6px;
  white-space:nowrap;
}
.mxb-head.is-collapsed .mxb-head__mini{ display:inline-flex; animation: mxbHeadMiniIn .35s ease both; }
@keyframes mxbHeadMiniIn{ from{ opacity:0; transform: translateX(6px); } to{ opacity:1; transform:none; } }
.mxb-head__mini:empty{ display:none !important; }
.mxb-head__mini-bit{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:1px 8px;
  border-radius:999px;
  background: rgba(255,255,255,.7);
  border:1px solid rgba(124,108,255,.22);
  font-size:10.5px;
  font-weight:800;
  color: var(--text-paper);
}
.mxb-head__mini-bit--codes{
  background: linear-gradient(135deg, rgba(124,108,255,.18), rgba(14,165,233,.14));
  color:#4338CA;
}
/* ⭐ هشدارِ «زبان/هنر هنوز اضافه نشده» تویِ حالتِ جمع‌شده — با کلیک، باکس باز می‌شه */
.mxb-head__mini-bit--attn{
  cursor:pointer;
  color:#c2410c;
  background: rgba(249,115,22,.14);
  border-color: rgba(249,115,22,.6);
  animation: mxbGhostPulse 1.8s ease-in-out infinite;
}

/* جمع‌وجورترِ خودِ کارت تویِ حالتِ جمع‌شده */
.mxb-head.is-collapsed{ padding-top:6px; padding-bottom:15px; margin-bottom:10px; }
.mxb-head.is-collapsed .mxb-head__student{ gap:8px; }
.mxb-head .mxb-head__avatar{ transition: width .3s ease, height .3s ease, font-size .3s ease, border-radius .3s ease; }
.mxb-head.is-collapsed .mxb-head__avatar{ width:26px; height:26px; font-size:13px; border-radius:9px; animation:none; }
.mxb-head .mxb-back{ transition: transform .15s ease, background .15s ease, box-shadow .15s ease, padding .3s ease, font-size .3s ease; }
.mxb-head.is-collapsed .mxb-back{ padding:4px 10px; font-size:12px; }

/* ===========================================================
   ⭐ لودِ خودکارِ نتایج — نشانگرِ تهِ جدول (سه نقطه‌یِ جهنده) به‌جایِ دکمه‌یِ
   «نمایشِ موردهایِ بیشتر». فقط وقتی هنوز نتیجه‌یِ بیشتری هست دیده می‌شه.
   =========================================================== */
.mxb-autoload{
  display:none;
  align-items:center;
  justify-content:center;
  gap:6px;
  height:38px;
}
.mxb-autoload.is-active{ display:flex; }
.mxb-autoload__dot{
  width:7px; height:7px;
  border-radius:50%;
  background: linear-gradient(135deg, #7C6CFF, #0EA5E9);
  animation: mxbAutoLoadDot 1s ease-in-out infinite;
}
.mxb-autoload__dot:nth-child(2){ animation-delay:.15s; }
.mxb-autoload__dot:nth-child(3){ animation-delay:.3s; }
@keyframes mxbAutoLoadDot{
  0%,80%,100%{ transform: translateY(0); opacity:.45; }
  40%        { transform: translateY(-6px); opacity:1; }
}
.mxb-more-btn.is-auto{ display:none !important; }
/* ⭐ قفلِ مقدارهایِ کارنامه (گروهِ اصلی / کنکورِ زبان / هنر) — ر.ک. msxApplyKarnamehLocks */
.msx-kn-lock-note{
  display:flex; align-items:center; gap:8px; margin:0 0 12px; padding:9px 12px;
  font-size:12.5px; font-weight:600; line-height:1.7; color:#047857;
  background:rgba(16,185,129,.10); border:1px solid rgba(16,185,129,.32); border-radius:12px;
}
.msx-kn-lock-note[hidden]{ display:none; }
.msx-kn-form input:disabled, .msx-kn-form select:disabled{ opacity:.7; cursor:not-allowed; background:rgba(120,124,133,.10); }
.msx-elig-toggle.msx-kn-locked, .msx-kn-locked .msx-elig-toggle{ pointer-events:none; }
.msx-kn-locked{ opacity:.7; }