/* ═══════════════════════════════════════════════
   জ্ঞানাঙ্গন ২.০ — css/style.css
   সব পেজের সাজ এক জায়গায়।
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&display=swap');

/* আরবি লেখার জন্য — Sakkal Majalla, শুধু আরবি ইউনিকোড-রেঞ্জে প্রযোজ্য (unicode-range),
   তাই body-র ফন্ট-স্ট্যাকে বসালেই সাইটের যেকোনো জায়গার আরবি টেক্সট (HTML/JS বদলানো ছাড়াই)
   স্বয়ংক্রিয়ভাবে এই ফন্টে দেখাবে, বাংলা/ইংরেজি Hind Siliguri-তেই থাকবে। */
@font-face {
  font-family: 'Sakkal Majalla';
  src: url('/fonts/SakkalMajalla-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
  /* Sakkal Majalla-র মূল অক্ষর Hind Siliguri-র চেয়ে em-স্কয়ারে ছোট বসে (কম x-height),
     তাই একই font-size-এ পাশাপাশি বসালে আরবি ছোট দেখায় — size-adjust দিয়ে ভিজুয়াল-সমান করা। */
  size-adjust: 130%;
}

/* কালপুরুষ — পরীক্ষা/অনুশীলন/ফল পেজের প্রশ্ন-অপশন-ব্যাখ্যায় (.q-card ভেতরে), Hind Siliguri-র
   বদলে। unicode-range নাই (বাংলার বদলে বাংলা, স্ক্রিপ্ট আলাদা নয়) — তাই সরাসরি ক্লাস-সিলেক্টরে
   স্কোপ করা, পুরো সাইটে না। ভেতরের আরবি (question_ar) আগের মতোই Sakkal Majalla পাবে —
   Kalpurush-এ আরবি গ্লিফ নাই বলে ব্রাউজার নিজেই পরের ফন্টে সরে যায়। */
@font-face {
  font-family: 'Kalpurush';
  src: url('/fonts/Kalpurush-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.q-card .q-text,
.q-card .opt,
.q-card .rv-expl {
  font-family: 'Kalpurush', 'Sakkal Majalla', 'Hind Siliguri', Georgia, sans-serif;
}

:root {
  /* --green নামটা পুরোনো (আগের ব্র্যান্ড-সবুজ), এখন মূল প্রাইমারি ব্লু ধরে —
     রিনেম করলে var(--green) ব্যবহারকারী সব HTML/CSS ফাইল ভাঙত, তাই মান বদলানো হলো, নাম না। */
  --green: #1a3a6b;
  --green-deep: #122a52;
  --success: #1a6b3c;
  --gold: #c9922a;
  --gold-soft: #f3e7cf;
  --blue: #1a3a6b;
  --bg: #eef2f6;
  --card-bg: #ffffff;
  --border: #dde3ec;
  --gray-mid: #6b7a94;
  --red: #b00020;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Hind Siliguri', 'Sakkal Majalla', Georgia, sans-serif;
  background: var(--bg);
  color: #22314f;
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ─── হেডার ─── */
.site-header {
  background: #e9eff8;
  border-bottom: 1px solid #dde3ec;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.site-logo {
  display: flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: var(--green);
  font-weight: 700;
  font-size: 1.15em;
  white-space: nowrap;
}
.header-right { display: flex; align-items: center; gap: 8px; }
/* ─── ডেস্কটপ-নেভ (≥৬৪১px) — মোবাইলে bottom-nav-এর সমতুল্য, হেডারে হরাইজন্টাল ─── */
.desktop-nav { display: none; }
@media (min-width: 641px) {
  .desktop-nav { display: flex; align-items: center; gap: 4px; }
  .desktop-nav .dn-item {
    display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px;
    text-decoration: none; color: var(--gray-mid); font-size: .9em; font-weight: 600;
    white-space: nowrap;
  }
  .desktop-nav .dn-item:hover { background: #e5ecf8; color: var(--green); }
  .desktop-nav .dn-item.active { background: #e5ecf8; color: var(--green); }
  .desktop-nav .dn-ic { display: flex; }
}
.user-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .85em;
  color: var(--blue);
  max-width: 160px;
  overflow: hidden;
}
.user-chip img {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--green);
  flex-shrink: 0;
}
.user-chip span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── বাটন ─── */
.btn {
  display: inline-block;
  padding: 9px 18px;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  font-family: inherit;
  font-size: .92em;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  transition: opacity .15s, transform .1s;
}
.btn:active { transform: scale(.97); }
.btn-green { background: var(--green); color: #fff; }
.btn-gold  { background: var(--gold);  color: #fff; }
.btn-line  {
  background: transparent;
  border: 1.5px solid var(--green);
  color: var(--green);
}
/* --success (আসল সবুজ, #1a6b3c) — --green ভেরিয়েবল আসলে নেভি-ব্লু বলে (#1a3a6b, --blue-র
   সাথে অভিন্ন), আলাদা পিল-রঙ দরকার হলে (যেমন মেরিট-লিস্ট) এটা ব্যবহার করা যায় */
.btn-success { background: var(--success); color: #fff; }

/* ─── মূল কাঠামো ─── */
.container {
  width: 100%;
  max-width: 840px;
  margin: 0 auto;
  padding: 20px 16px 50px;
  flex: 1;
}
.section-title {
  color: var(--green);
  font-size: 1.15em;
  font-weight: 700;
  margin: 22px 0 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid #d9e2f0;
}

/* ─── কোর্স কার্ড ─── */
.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}
.course-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
}
.course-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  background: #e6efe9;
  display: block;
}
.course-thumb-empty {
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #e6efe9, #d4e6da);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2em;
}
.course-body {
  padding: 13px 14px 15px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}
.course-name {
  font-weight: 700;
  color: var(--blue);
  font-size: 1em;
  line-height: 1.45;
}
.course-desc {
  font-size: .82em;
  color: var(--gray-mid);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.course-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}
.course-price { font-weight: 700; color: var(--green); font-size: .95em; }
.course-price .old {
  color: var(--gray-mid);
  font-weight: 400;
  font-size: .82em;
  text-decoration: line-through;
  margin-right: 6px;
}
.badge-free {
  background: var(--gold);
  color: #fff;
  font-size: .75em;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
}

/* ─── খালি/লোডিং অবস্থা ─── */
.empty-msg {
  text-align: center;
  color: var(--gray-mid);
  padding: 30px 10px;
  font-size: .9em;
}

/* ─── টোস্ট ─── */
#toastBox {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: max-content;
  max-width: 92vw;
}
.toast {
  background: var(--blue);
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: .88em;
  box-shadow: 0 3px 12px rgba(0,0,0,.2);
  animation: toastIn .25s ease;
}
.toast.error { background: var(--red); }
.toast.success { background: var(--success); }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── ফর্ম ─── */
.form-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
  padding: 22px 18px;
  max-width: 480px;
  margin: 20px auto 0;
}
.form-title {
  color: var(--green);
  font-weight: 700;
  font-size: 1.1em;
  margin-bottom: 4px;
}
.form-sub {
  font-size: .85em;
  color: var(--gray-mid);
  margin-bottom: 16px;
}
.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: .88em;
  font-weight: 600;
  color: var(--blue);
  margin-bottom: 5px;
}
.field label .req { color: var(--red); }
.field input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  font-family: inherit;
  font-size: .95em;
  background: #fff;
}
.field input:focus {
  outline: none;
  border-color: var(--green);
}
/* textarea-র জন্য কোনো স্টাইলই ছিল না — ব্রাউজার-ডিফল্টে ছোট/সরু দেখাত (যেমন ঠিকানার ঘর) */
.field textarea {
  width: 100%;
  min-height: 84px;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  font-family: inherit;
  font-size: .95em;
  background: #fff;
  resize: vertical;
}
.field textarea:focus {
  outline: none;
  border-color: var(--green);
}
.field .hint {
  font-size: .78em;
  color: var(--gray-mid);
  margin-top: 3px;
}
.field.invalid input,
.field.invalid textarea,
.field.invalid select {
  border-color: var(--red);
}
.form-err {
  display: none;
  color: var(--red);
  background: #fbeaec;
  border: 1px solid #f0c8ce;
  border-radius: 9px;
  padding: 9px 12px;
  font-size: .85em;
  margin-bottom: 12px;
}
.btn-block { display: block; width: 100%; }
.btn:disabled { opacity: .6; cursor: not-allowed; }

/* ─── প্রোফাইল কার্ড (ড্যাশবোর্ড) ─── */
.profile-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
  padding: 18px 16px;
  max-width: 560px;
  margin: 10px auto 0;
}
.profile-head {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #1a3a6b, #122a52);
  margin: -18px -16px 14px;          /* কার্ড-প্যাডিং ভেদ করে full-bleed সবুজ ব্যান্ড */
  padding: 18px 16px;
  border-radius: 14px 14px 0 0;
  color: #fff;
}
.profile-head .profile-name { color: #fff; }
.profile-head .avatar { border-color: #fff; }
.profile-head .btn-line { border-color: rgba(255,255,255,.85); color: #fff; background: transparent; }
.profile-head .btn-line:hover { background: rgba(255,255,255,.15); }
.profile-head { align-items: flex-start; }
.profile-metaline { font-size: .82em; color: rgba(255,255,255,.92); margin-top: 6px; line-height: 1.5; }
.profile-joined { font-size: .74em; color: rgba(255,255,255,.72); margin-top: 6px; }
.avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e6efe9, #d4e6da);
  color: var(--green);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--green);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-id { flex: 1; min-width: 0; }
.profile-name {
  font-weight: 700;
  color: var(--blue);
  font-size: 1.05em;
  line-height: 1.4;
}
.profile-email {
  font-size: .8em;
  color: var(--gray-mid);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-sm { padding: 6px 12px; font-size: .82em; }
.profile-meta {
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.meta-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  font-size: .9em;
}
.meta-label { color: var(--gray-mid); white-space: nowrap; }
.meta-value { color: #333; text-align: right; }
.btn-row { display: flex; gap: 8px; }
.btn-row .btn { flex: 1; }

/* ─── খালি-অবস্থা কার্ড ─── */
.empty-card {
  background: var(--card-bg);
  border: 1px dashed var(--border);
  border-radius: 14px;
  text-align: center;
  padding: 30px 16px;
  color: var(--gray-mid);
  font-size: .92em;
}
.empty-card .empty-icon { font-size: 2.2em; margin-bottom: 6px; }
.empty-card .btn { margin-top: 12px; }

/* ─── কোর্স বিস্তারিত পাতা ─── */
.detail-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
  overflow: hidden;
  max-width: 640px;
  margin: 10px auto 0;
}
.detail-body { padding: 16px; }
.detail-name {
  color: var(--blue);
  font-size: 1.25em;
  font-weight: 700;
  line-height: 1.45;
  margin-bottom: 10px;
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 14px;
}
.chip {
  background: #e9eff8;
  border: 1px solid #d9e2f0;
  color: var(--green);
  border-radius: 20px;
  padding: 3px 12px;
  font-size: .78em;
  font-weight: 600;
  white-space: nowrap;
}
.price-block {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}
.price-label { font-size: .9em; color: var(--gray-mid); }
/* একটাই দাম থাকলে — লেবেল ছাড়া কেন্দ্রে+বড়, বক্সের মাঝে ফাঁকা-জায়গা এড়াতে
   (.price-block .course-price-এর পরে আসা 1.12em override এড়াতে ৩-ক্লাস স্পেসিফিসিটি) */
.price-row-solo { justify-content: center; padding: 6px 0; }
.price-block .price-row-solo .course-price { font-size: 1.3em; }
.notice-box {
  background: #fdf6e8;
  border: 1px solid #f0dfba;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: .88em;
  color: #7a5c14;
  margin-bottom: 14px;
}
.link-row { margin-top: 10px; }
.detail-desc {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  font-size: .92em;
  max-width: 640px;
  margin: 0 auto;
}
/* বর্ণনার অনুচ্ছেদ-ব্লক (renderDescriptionHtml) — **বোল্ড** অংশ সাব-হেডিং-এর মতো রঙিন */
.desc-block { margin-bottom: 14px; }
.desc-block:last-child { margin-bottom: 0; }
.desc-line { margin-bottom: 2px; line-height: 1.55; }
.desc-line:last-child { margin-bottom: 0; }
.detail-desc strong { color: var(--blue); }
.detail-desc .desc-hl { background: #fdf6e8; color: #7a5c14; padding: 1px 5px; border-radius: 5px; }

/* ─── কোর্স বিক্রি-পেজ হিরো v2 (বিদ্যাবাড়ি/Edge Course থেকে অনুপ্রাণিত) —
   থাম্বনেইল/ভিডিও-হিরো (টেক্সট নেই, নাম-পুনরাবৃত্তি এড়াতে) + নিচে ওভারল্যাপ-কার্ডে আসল নাম+দাম ─── */
.course-hero-media {
  position: relative; line-height: 0; border-radius: 14px; overflow: hidden;
  max-width: 640px; margin: 0 auto;
}
.chm-thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: #e6efe9; }
.chm-empty {
  width: 100%; aspect-ratio: 16/9; background: linear-gradient(135deg, #1a3a6b, #2c5aa0);
  display: flex; align-items: center; justify-content: center; font-size: 3em;
}
.chm-badges {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.course-hero-media .course-tag {
  margin: 0; box-shadow: 0 1px 5px rgba(0,0,0,.16);
  /* প্যারেন্টের line-height:0 (ছবির নিচের ফাঁকা-জায়গা এড়াতে) ভেতরের ব্যাজেও চলে গিয়ে
     বক্স-হাইট ০ করে দিচ্ছিল — box-shadow তখন চ্যাপ্টা রেখার মতো দেখাত। এখানে রিসেট করা হলো। */
  line-height: normal;
}
.chm-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 50%; border: none;
  background: rgba(0,0,0,.55); color: #fff; font-size: 1.4em; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.course-hero-card {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  margin: -22px 10px 14px; position: relative; z-index: 2; padding: 10px 12px;
  max-width: 620px;
}
.chc-name { color: var(--blue); font-size: 1.18em; font-weight: 800; line-height: 1.4; margin-bottom: 4px; }
.course-hero-card .price-block { margin: 6px 0 12px; }

/* ভিডিও-মোডাল (হিরো প্লে-বাটন) */
.video-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.8); z-index: 500;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.video-modal-box { position: relative; width: 100%; max-width: 720px; aspect-ratio: 16/9; }
.video-modal-box iframe { width: 100%; height: 100%; border: none; border-radius: 8px; }
.video-modal-close {
  position: absolute; top: -38px; right: 0; background: none; border: none;
  color: #fff; font-size: 1.6em; cursor: pointer;
}

/* রুটিন-সেকশন — স্ট্যাটিক হেডার (আর কোলাপসিবল না), ভেতরে প্রতি-বিষয় আলাদা <details>
   (একমাত্র এক্সপ্যান্ড-লেভেল — নেস্টেড অ্যাকর্ডিয়নে বিভ্রান্তি এড়াতে বন্ধুর নির্দেশে,
   js/course.js routineGroupsHtml)। */
.rt-section { max-width: 640px; margin: 16px auto 0; }
.rt-pdf-pill {
  display: inline-block;
  padding: 4px 10px;
  background: #e5ecf8;
  color: #1a3a6b;
  font-size: .8em; font-weight: 600;
  border-radius: 14px;
  text-decoration: none;
  cursor: pointer;
  margin-left: 8px;
  transition: background 0.2s;
}
.rt-pdf-pill:hover { background: #d0ddf0; }

/* "পরবর্তী ক্লাস" হাইলাইট-কার্ড (loadLiveClassRoutine) — ফোল্ডার না খুলেই কাছের আসন্ন ক্লাস */
.rt-next {
  max-width: 640px; margin: 0 auto 10px; padding: 10px 14px; font-size: .92em;
  background: #fdf6e8; border: 1px solid #f0dfba; border-radius: 12px;
}
.rt-next b { color: var(--green); }

/* রুটিন — কার্ড-লিস্ট (loadCourseRoutine/loadLiveClassRoutine উভয়েই lcr-* কার্ড-ক্লাস
   ব্যবহার করে, নিচে "লাইভ-ক্লাস রুটিন" CSS ব্লকে দেখো)। */
.rt-list { display: flex; flex-direction: column; gap: 10px; max-width: 640px; margin: 0 auto; }
/* সাবজেক্ট-ফোল্ডার কোলাপসিবল (loadLiveClassRoutine + loadSyllabusFull) — সামারি পুরো-গোল
   রাখি (নিচে কার্ড/লিস্ট gap-সহ, flush নয়); নেস্টেড "সম্পন্ন"-এ একটু ফাঁক */
.rt-coll[open] > summary { border-radius: 12px; margin-bottom: 8px; }
.rt-coll .rt-list, .rt-coll .syl-list { margin-bottom: 8px; }
details.rt-coll.rt-done-coll { margin-top: 4px; }

/* সিলেবাস-প্রিভিউ-টিজ (sales-পেজ) — প্রথম N টপিক খোলা, বাকিটা লক-কার্ড */
.syl-list {
  display: flex; flex-direction: column; gap: 6px; max-width: 640px; margin: 0 auto;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px;
}
.syl-row { display: flex; align-items: center; gap: 9px; font-size: .92em; padding: 4px 0; }
.syl-ic { flex-shrink: 0; }
/* বিষয়-হেডার (subject গ্রুপ) — NTRCA সিলেবাস-ধাঁচ */
.syl-subj {
  font-weight: 800; font-size: .9em; color: var(--green); margin: 8px 0 2px;
  padding-top: 6px; border-top: 1px solid #eef2ef;
}
.syl-subj:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.syl-locked { color: var(--gold); font-weight: 700; cursor: pointer; border-top: 1px dashed var(--border); padding-top: 9px; margin-top: 3px; }
/* কোর্স-প্ল্যান ট্যাবে সিলেবাস গৌণ — কোলাপসিবল (রুটিনের নিচে) */
.syl-collapse { max-width: 640px; margin: 12px auto 0; }
.syl-collapse > summary {
  cursor: pointer; font-weight: 700; color: var(--blue); font-size: .95em;
  padding: 10px 14px; background: #eef3f8; border: 1px solid #d7e3ef; border-radius: 12px;
  list-style: none;
}
.syl-collapse > summary::-webkit-details-marker { display: none; }
.syl-collapse > summary::after { content: ' ▾'; color: var(--gray-mid); }
.syl-collapse[open] > summary::after { content: ' ▴'; }
.syl-collapse[open] > summary { border-radius: 12px 12px 0 0; }
.syl-collapse .syl-list { border-radius: 0 0 14px 14px; border-top: none; }

/* স্টিকি বটম প্রাইস-বার (sales-পেজ — স্ক্রল করলেও দাম+CTA সবসময় দেখা যায়) */
.csb-spacer { height: 70px; }
.course-sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  background: #fff; border-top: 1px solid var(--border); box-shadow: 0 -2px 12px rgba(0,0,0,.08);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; max-width: 640px; margin: 0 auto;
}
.csb-price-wrap { font-size: .92em; }
.csb-price { font-weight: 800; color: var(--green); font-size: 1.2em; }
.csb-price-note { font-size: .7em; color: var(--gray-mid); margin-left: 4px; }
.course-sticky-bar .btn { flex-shrink: 0; padding: 10px 20px; }
@media (max-width: 640px) {
  .course-sticky-bar { bottom: 58px; }
}

/* ─── পরীক্ষার তালিকা (কোর্স পেজ) ─── */
.exam-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 640px;
  margin: 0 auto;
}
.exam-row {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.exam-info { min-width: 0; }
.exam-name { font-weight: 700; color: var(--blue); font-size: .95em; line-height: 1.4; }
.exam-sub { font-size: .78em; color: var(--gray-mid); margin-top: 2px; }
.exam-action {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.exam-score { font-size: .85em; font-weight: 700; color: var(--green); white-space: nowrap; }
.exam-sched { font-size: .8em; color: var(--gray-mid); white-space: nowrap; }
/* চলমান পরীক্ষা — লাল-আভা হাইলাইট (এক নজরে চোখে পড়ে) */
.exam-row.is-live {
  border-color: #f0c8ce;
  background: linear-gradient(135deg, #fff5f5, #ffe9e9);
}
.exam-row.is-live .exam-name { color: var(--red); }
/* ভিজিটর-পেজে লক করা আসল পরীক্ষা — ধূসর, ডানে তালা, ট্যাপে এনরোলে স্ক্রল */
.exam-row.exam-locked { background: #f5f6f5; border-color: #e8eae8; cursor: pointer; }
.exam-row.exam-locked .exam-name { color: var(--gray-mid); }
.exam-row.exam-locked .cc-right { color: #b3b8b3; }

/* ─── পরীক্ষা চলাকালীন ─── */
.timer-bar {
  position: sticky;
  top: 56px;
  z-index: 50;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.timer-display {
  font-weight: 700;
  font-size: 1.1em;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}
.timer-bar.danger .timer-display { color: var(--red); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .45; } }
.ans-progress { font-size: .85em; color: var(--gray-mid); }

.q-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
}
.q-text {
  font-weight: 600;
  margin-bottom: 10px;
  line-height: 1.8;
  font-size: 1.02em;
}
.q-num { color: var(--gold); font-weight: 700; }
.opt-list { display: flex; flex-direction: column; gap: 8px; }
.opt {
  display: block;
  width: 100%;
  text-align: start;
  background: #fafcfa;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: .95em;
  line-height: 1.7;
  cursor: pointer;
  color: #333;
  transition: border-color .12s, background .12s;
}
.opt:active { transform: scale(.99); }
.opt.sel {
  background: #e5ecf8;
  border-color: var(--green);
  font-weight: 600;
}
.opt-key {
  display: inline-block;
  background: #e9eff8;
  border: 1px solid #d9e2f0;
  color: var(--green);
  border-radius: 6px;
  font-size: .78em;
  font-weight: 700;
  padding: 0 7px;
  margin-inline-end: 4px;
}

/* ─── রিভিউ — হালকা-পেস্টেল ভরাট (Live MCQ-ধাঁচ, বন্ধুর ২০২৬-০৭-১৫ নির্দেশ; আগে গাঢ়-ভরাট ছিল) ─── */
.opt.right { background: #d9efdd; border-color: #a9d9b4; color: #17603a; font-weight: 600; }
.opt.wrong { background: #f9dedb; border-color: #efb3ac; color: #9c231c; }
.opt.right .opt-key { background: #fff; border-color: #a9d9b4; color: #17603a; }
.opt.wrong .opt-key { background: #fff; border-color: #efb3ac; color: #9c231c; }
.rv-badge {
  font-size: .68em;
  font-weight: 700;
  border-radius: 12px;
  padding: 2px 9px;
  vertical-align: middle;
  white-space: nowrap;
}
.rv-badge.ok   { background: #e7f3ec; color: var(--success); }
.rv-badge.bad  { background: #fbeaec; color: var(--red); }
.rv-badge.skip { background: #f0f0f0; color: var(--gray-mid); }
.rv-expl {
  margin-top: 10px;
  background: #fdf6e8;
  border: 1px solid #f0dfba;
  border-radius: 9px;
  padding: 8px 12px;
  font-size: .85em;
  color: #7a5c14;
}
.result-score {
  text-align: center;
  font-size: 1.5em;
  font-weight: 700;
  color: var(--green);
  margin: 8px 0 12px;
}

/* ─── মেরিট লিস্ট (শেয়ার্ড .lb-* ক্লাস — টেস্ট/ব্যাচ/ডেমো সব জায়গায়) ─── */
.lb-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  max-width: 640px;
  margin: 0 auto;
}
.lb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  font-size: .9em;
}
.lb-row:last-child { border-bottom: none; }
.lb-rank { width: 34px; font-weight: 700; color: var(--blue); flex-shrink: 0; }
.lb-row img {
  width: 28px; height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
}
.lb-noimg { width: 28px; text-align: center; flex-shrink: 0; }
.lb-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-score { font-weight: 700; color: var(--green); flex-shrink: 0; }
.lb-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 640px;
  margin: 12px auto 0;
}
.lb-pager .btn:disabled { opacity: .4; cursor: default; }
.lb-pager-info { font-size: .85em; color: var(--muted, #667); font-weight: 600; }

/* ─── ব্যাচ মেরিট লিস্ট (course.js loadBatchLeaderboard — বর্ডার+ছবি+পিল-ব্যাজ কার্ড,
   বন্ধুর ২০২৬-০৭-৩১ মকআপ অনুযায়ী; টেস্ট-মেরিট-লিস্ট/ডেমো-লিডারবোর্ডের শেয়ার্ড .lb-*
   থেকে ইচ্ছাকৃতভাবে আলাদা) ─── */
.bmlb-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 640px;
  margin: 0 auto;
}
.bmlb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--blue);
  border-radius: 10px;
  padding: 10px 14px;
}
.bmlb-row.top3 { border-left-color: var(--gold); }
.bmlb-row.me { background: var(--blue-pale, #e5ecf8); }
.bmlb-rank {
  width: 30px;
  flex-shrink: 0;
  text-align: center;
  font-weight: 700;
  font-size: 1.1em;
  color: var(--blue);
}
.bmlb-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}
.bmlb-noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg, #eef2f6);
  color: #9aa5b4;
}
.bmlb-info { flex: 1; min-width: 0; }
.bmlb-name {
  font-weight: 700;
  font-size: .95em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
.bmlb-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.bmlb-pill {
  font-size: .72em;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: #eaf1fb;
  color: var(--blue);
  border: 1px solid #d3e0f2;
  white-space: nowrap;
}
.bmlb-pill.avg { background: #e8f6ee; color: var(--success); border-color: #cdeedb; }
.bmlb-score { text-align: right; flex-shrink: 0; }
.bmlb-score-label { font-size: .7em; color: #889; }
.bmlb-score-val { font-weight: 700; font-size: 1.15em; color: var(--blue); }

/* ─── ফুটার ─── */
.site-footer {
  background: #e9eff8;
  border-top: 1px solid #dde3ec;
  text-align: center;
  padding: 16px 12px;
  font-size: .8em;
  color: var(--gray-mid);
}
.site-footer a { color: var(--green); text-decoration: none; margin: 0 6px; }

/* ─── ভর্তি/পেমেন্ট (course পেজ — js/enroll.js) ─── */
.enroll-hint {
  font-size: .8em;
  color: var(--gray-mid);
  text-align: center;
  margin-top: 6px;
}
.enroll-status {
  border-radius: 10px;
  padding: 10px 12px;
  font-size: .9em;
  margin-bottom: 8px;
}
.enroll-status.ok   { background: #e7f3ec; color: var(--success); border: 1px solid #cfe6d8; }
.enroll-status.wait { background: #fdf6e7; color: #8a6712; border: 1px solid #ecd9a8; }
.enroll-status.bad  { background: #fbeaec; color: var(--red); border: 1px solid #f0c8ce; }
.pay-panel {
  margin-top: 10px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: #fff;
  padding: 14px;
}
.pay-title { font-weight: 700; color: var(--green); margin-bottom: 10px; }
.sheet-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  padding: 9px 11px;
  margin-bottom: 8px;
  cursor: pointer;
  font-size: .92em;
}
.sheet-opt input { width: auto; }
.sheet-opt .price { margin-left: auto; font-weight: 700; color: var(--green); }
.pay-total { text-align: right; font-weight: 700; color: var(--blue); margin: 4px 0 10px; }
/* কপি-করা-যায় পেমেন্ট-নম্বর বক্স (বইয়ের পেমেন্ট-সিস্টেম থেকে — books.html-এর .bks-paynum-* ধাঁচ,
   এখন কোর্স+বই দুই জায়গায় শেয়ার্ড) */
.pay-num-label { font-size: .85em; font-weight: 700; color: #444; margin: 10px 0 4px; }
.pay-num-box {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  background: #fff3cd; border: 2px solid #f0c14b; border-radius: 10px; padding: 12px 14px; margin-bottom: 4px;
}
.pay-num-box b { font-size: 1.25em; letter-spacing: .5px; color: #5c4200; }
.pay-num-box button {
  padding: 7px 12px; border: 1.5px solid #7a5b00; border-radius: 7px; background: #fff;
  color: #7a5b00; font-family: inherit; font-weight: 700; font-size: .78em; cursor: pointer; white-space: nowrap;
}
.pay-num-sub { font-size: .78em; color: var(--gray-mid); margin-bottom: 8px; }
/* course-pay পেজ — পেমেন্ট-নম্বর ব্লক (লেবেল+বক্স একসাথে; "অন্যান্য" মাধ্যমে পুরোটা লুকায়) */
.pay-num-block .pay-num-label small { font-weight: 400; color: var(--gray-mid); }
.pay-num-block .pay-num-box { justify-content: center; }
.cp-course-head { margin: 2px 0 10px; }
.cp-course-name { font-weight: 800; color: var(--blue); font-size: 1.02em; line-height: 1.4; }
/* প্রোমো-কোড মিনি-উইজেট (বইয়ের .bks-promo-* থেকে শেয়ার্ড — বই+কোর্স দুই জায়গায়) */
.promo-mini { display: flex; gap: 6px; margin: 6px 0; }
.promo-mini input { flex: 1; padding: 6px 9px; border: 1.5px solid var(--border); border-radius: 7px; font-family: inherit; font-size: .8em; }
.promo-btn-sm { padding: 6px 11px; border: none; border-radius: 7px; background: var(--green); color: #fff; font-family: inherit; font-weight: 700; font-size: .78em; cursor: pointer; }
.promo-btn-sm:disabled { opacity: .6; }
.promo-mini-applied {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #eaf6ee;
  border: 1px solid #bfe3c9; border-radius: 7px; padding: 6px 9px; font-size: .78em; color: #155724; margin: 6px 0;
}
.promo-mini-applied button { border: none; background: none; color: var(--red); font-weight: 700; font-size: .85em; cursor: pointer; }
.promo-err { color: var(--red); font-size: .74em; }
.field select {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  font-family: inherit;
  font-size: .95em;
  background: #fff;
}
.field select:focus { outline: none; border-color: var(--green); }

/* ─── আমার কোর্স (ড্যাশবোর্ড — js/dashboard.js) ─── */
.mycourse-row {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.mycourse-thumb {
  width: 56px;
  height: 56px;
  border-radius: 9px;
  object-fit: cover;
  background: #e6efe9;
  flex-shrink: 0;
}
.mycourse-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4em;
}
.mycourse-info { flex: 1; min-width: 0; }
.mycourse-name {
  font-weight: 700;
  color: var(--blue);
  font-size: .92em;
  line-height: 1.4;
}
.mc-badge {
  display: inline-block;
  font-size: .74em;
  border-radius: 99px;
  padding: 2px 9px;
  margin-top: 3px;
}
.mc-badge.ok   { background: #e7f3ec; color: var(--success); }
.mc-badge.wait { background: #fdf6e7; color: #8a6712; }
.mc-badge.bad  { background: #fbeaec; color: var(--red); }
.mycourse-reason { font-size: .76em; color: var(--red); margin-top: 2px; }
.mycourse-action { flex-shrink: 0; }

/* ─── অ্যাডমিন প্যানেল ─── */
.admin-menu-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  text-decoration: none;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.admin-menu-card.disabled { opacity: .55; }
.admin-menu-icon { font-size: 1.6em; }
.admin-menu-info { display: flex; flex-direction: column; }
.admin-menu-name { font-weight: 700; color: var(--blue); font-size: .95em; }
.admin-menu-sub { font-size: .78em; color: var(--gray-mid); }
.pay-row {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.pay-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 1px dashed var(--border);
  padding-bottom: 6px;
  margin-bottom: 6px;
}
.pay-row-name { font-weight: 700; color: var(--blue); }
.pay-row-phone { font-size: .85em; }
.pay-row-phone a { color: var(--green); text-decoration: none; }

/* ═══════════════════════════════════════════════
   হোমপেজ পূর্ণরূপ (পুরোনো সাইটের চেহারা অনুসরণে)
   ═══════════════════════════════════════════════ */

/* ─── হিরো ─── */
.hero { text-align: center; padding: 24px 20px 8px; }
.hero-title { font-size: 1.45em; font-weight: 800; color: var(--green); line-height: 1.35; }
.hero-brand { font-size: 1.15em; color: var(--gold); font-weight: 700; margin-top: 10px; letter-spacing: .5px; }
.hero-cta {
  display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 16px;
}
.hero-cta .btn { font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.hero-sub { font-size: .85em; color: var(--gray-mid); margin-top: 10px; }

/* ─── হিরো চিপ ─── */
.hero-chip-row { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 6px 14px 4px; }
.hero-chip {
  border: 1.5px solid #d6e0f0; background: #fff; color: #555;
  font-family: inherit; font-size: .82em; font-weight: 700;
  padding: 8px 14px; border-radius: 20px; cursor: pointer;
  transition: .15s; white-space: nowrap; user-select: none;
}
.hero-chip:active { transform: scale(.96); }
.hero-chip.hc-live.active { background: #fdecea; border-color: #e74c3c; color: #e74c3c; }
.hero-chip.hc-mcq.active  { background: #e8eef6; border-color: var(--blue); color: var(--blue); }
.hero-chip.hc-pdf.active  { background: #fdf3e3; border-color: var(--gold); color: var(--gold); }
.hero-chip-panel {
  background: #fff; border: 1.5px solid #d6e0f0; border-radius: 16px;
  padding: 16px; margin: 10px 14px 4px; box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

/* ─── সেকশন পিল ─── */
.sec-pill-wrap { text-align: center; }
.sec-pill {
  display: inline-block; background: #e8f5ee; color: var(--green);
  font-size: .85em; font-weight: 700; padding: 6px 18px;
  border-radius: 20px; margin: 2px auto 12px;
}
.sec-pill.paid { background: #fdf3e3; color: var(--gold); }

/* ─── হোম সেকশন-কার্ড (ফ্রি/আপকামিং) ─── */
.home-section {
  background: #fff; border-radius: 16px; padding: 18px 16px;
  margin-bottom: 16px; box-shadow: 0 2px 12px rgba(0,0,0,.08);
  border: 1.5px solid #d6e0f0;
}

/* ─── ক্যাটাগরি কার্ড ─── */
.home-cat-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.home-cat-card {
  background: #fff; border: 1.5px solid #d6e0f0; border-radius: 13px;
  padding: 14px 6px; text-align: center; cursor: pointer; transition: .15s;
  user-select: none; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
}
.home-cat-card.active { border-color: var(--green); background: #e8f5ee; }
.home-cat-card .hcc-ic { font-size: 1.35em; line-height: 1; }
.home-cat-card .hcc-tt { font-weight: 700; font-size: .74em; color: #555; line-height: 1.3; }
.home-cat-panel {
  display: none; background: #fff; border-radius: 16px; padding: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,.08); border: 1.5px solid #d6e0f0;
}
.home-cat-panel-title { font-size: .95em; font-weight: 700; color: var(--green); margin-bottom: 12px; text-align: center; }

/* ─── বিভাজক ─── */
.home-divider { display: flex; align-items: center; gap: 10px; margin: 18px 2px 12px; }
.home-divider::before, .home-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.home-divider span { font-size: .72em; color: var(--gray-mid); font-weight: 600; }

/* মিনি-কার্ড ও অ্যাকর্ডিয়নের নিয়মগুলো (.home-mini-grid/.home-mini-card/.hmc-*/
   .home-acc/.acc-pane*/.feat-item/.rev-item) ২০২৬-০৭-২৬-এ মুছে ফেলা হলো —
   ফিচার হার্ডকোডেড কার্ড-গ্রিডে (.hfeat-*) আর মন্তব্য সোয়াইপ-স্ট্রিপে (.rev-*)
   যাওয়ার পর কোনো লাইভ পেজ আর এগুলো ব্যবহার করত না (পুরো রিপো grep করে দেখা)। */

/* ─── PDF আইটেম ─── */
.pdf-item {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px;
  background: #fdf3e3; border: 1px solid #ecc987; border-radius: 11px;
  margin-bottom: 8px; text-decoration: none; transition: .15s;
}
.pdf-item .pdf-nm { flex: 1; font-size: .88em; font-weight: 600; color: #6b4f12; }
.pdf-item .pdf-go { font-size: .8em; color: var(--gold); font-weight: 700; white-space: nowrap; }

/* ─── পরিসংখ্যান বার ─── */
.stats-bar {
  background: #fff; border-radius: 14px; padding: 11px 10px;
  border: 1.5px solid #d6e0f0; display: flex; justify-content: space-around;
  align-items: center; margin-bottom: 16px;
}
.stat-item { flex: 1; text-align: center; }
.stat-val { font-size: 1.05em; font-weight: 700; color: var(--green); display: block; line-height: 1; }
.stat-lbl { font-size: .64em; color: var(--gray-mid); display: block; margin-top: 3px; }
.stat-sep { width: 1px; height: 26px; background: #e8f5ee; }

/* ─── যোগাযোগ ─── */
.contact-btn {
  background: linear-gradient(135deg, #1a3a6b, #122a52); border-radius: 30px;
  padding: 14px 16px; margin-bottom: 14px; display: flex; align-items: center;
  justify-content: center; gap: 10px; cursor: pointer; user-select: none;
  box-shadow: 0 4px 14px rgba(26,58,107,.28); color: #fff;
  font-size: .95em; font-weight: 700;
}
.contact-popup {
  display: none; background: #fff; border-radius: 16px; padding: 18px;
  box-shadow: 0 8px 30px rgba(0,0,0,.14); margin-bottom: 14px;
  border: 1.5px solid var(--border);
}
.contact-popup.open { display: block; }
.contact-title { font-size: .88em; font-weight: 700; color: var(--green); margin-bottom: 12px; text-align: center; }
.contact-links { display: flex; flex-direction: column; gap: 8px; }
.contact-link {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-radius: 10px; text-decoration: none; font-size: .88em; font-weight: 600;
}
.cl-wa { background: #e8f8ef; color: #128c7e; }
.cl-fb { background: #e8f0fb; color: #1877f2; }
.cl-yt { background: #fdecea; color: #ff0000; }
.cl-tg { background: #e8f4fb; color: #0088cc; }

/* ─── কোর্স-কার্ড বাড়তি ─── */
.course-tag {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: .68em; font-weight: 700; white-space: nowrap; margin-bottom: 5px;
}
.tag-live   { background: #fdecea; color: #e74c3c; }
.tag-record { background: #e8f5ee; color: var(--green); }
.tag-exam   { background: #fdf3e3; color: var(--gold); }
.disc-badge {
  background: #fff3cd; color: #b8860b; padding: 2px 7px; border-radius: 8px;
  font-size: .66em; font-weight: 700; white-space: nowrap;
}
.price-old { opacity: .55; font-weight: 500; margin-right: 5px; text-decoration: line-through; }

/* ─── স্প্ল্যাশ ─── */
.splash-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: linear-gradient(160deg, #122a52, #1a3a6b, #1a3a6b, #122a52);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.splash-box {
  background: #fff; border-radius: 22px; padding: 28px 22px;
  max-width: 380px; width: 100%; text-align: center;
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
}
.splash-logo { height: 90px; width: auto; border-radius: 10px; margin-bottom: 10px; }
.splash-title { font-size: 1.5em; font-weight: 700; color: var(--green); margin-bottom: 4px; }
.splash-subtitle { font-size: .85em; color: var(--gray-mid); margin-bottom: 18px; }
.splash-msg { font-size: .85em; color: var(--gray-mid); margin: 10px 0 16px; line-height: 1.5; }
.splash-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: var(--gray-mid); font-size: .8em; }
.splash-divider::before, .splash-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.splash-btn-sub { display: block; font-size: .72em; font-weight: 400; opacity: .85; margin-top: 2px; }

/* ═══ সেটিংস পেজ (admin/settings.html) ═══ */
.set-card{background:#fff;border:1px solid #dbe1ea;border-radius:12px;padding:16px;margin-bottom:16px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.set-card-head{font-weight:700;color:#1a3a6b;margin-bottom:6px;font-size:1.02em}
.set-hint{font-size:.82em;color:#777;margin-bottom:12px}
.payfield-add{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.payfield-add input[type=text]{flex:1;min-width:140px}
.payfield-req{display:flex;align-items:center;gap:5px;font-size:.85em;white-space:nowrap;cursor:pointer}
.payfield-req input{width:auto}
.payfield-row{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#eef2f8;border-radius:8px;margin-bottom:6px;font-size:.9em}
.payfield-star{color:#c0392b}
.payfield-tag{font-size:.75em;background:#e0e7ff;color:#3730a3;padding:2px 7px;border-radius:9px;margin-right:6px}

/* ─── ঘোষণা পপআপ (হোমপেজ) ─── */
.ann-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}
.ann-box{position:relative;background:#fff;border-radius:14px;max-width:420px;width:100%;padding:22px;box-shadow:0 10px 40px rgba(0,0,0,.25)}
.ann-title{font-weight:700;font-size:1.1em;color:#1a3a6b;margin-bottom:10px}
.ann-text{white-space:pre-line;line-height:1.7;margin-bottom:16px}
.ann-box .ann-close{width:100%}
.ann-x-close{
  position:absolute;top:8px;right:10px;background:none;border:none;
  font-size:1.6em;line-height:1;color:var(--gray-mid);cursor:pointer;padding:4px 8px;opacity:.6;
}
.ann-x-close:hover{opacity:1}

/* ─── ড্যাশবোর্ড নোটিশ কার্ড ─── */
.notice-card{background:#fff8e8;border:1.5px solid #c9922a;border-radius:12px;padding:14px 16px;margin-bottom:16px}
.notice-card .notice-title{font-weight:700;color:#c9922a;margin-bottom:6px}
#dashNoticeText{white-space:pre-line;line-height:1.7}

/* ─── ফুটার লিংক ─── */
.footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 8px; }
.footer-links a { color: var(--green); text-decoration: none; font-size: .85em; font-weight: 600; }
.footer-links a:hover { text-decoration: underline; }

/* ─── ছোট টেবিল-বোতাম (অ্যাডমিন: পেইজ-কন্টেন্ট, কোর্স ভিডিও) ─── */
.btn-tiny {
  padding: 4px 10px; font-size: .78em; border-radius: 7px; border: none;
  cursor: pointer; font-family: inherit; font-weight: 700;
}
.bt-up  { background: #e8eef6; color: #1a3a6b; }
.bt-down { background: #e8eef6; color: #1a3a6b; }
.bt-del { background: #fbeaec; color: #b00020; }

/* ─── ভিডিও প্লেলিস্ট প্লেয়ার (স্টুডেন্ট কোর্স পেজ) ─── */
.vid-player-wrap { margin-top: 12px; }
.vid-frame-box {
  position: relative; width: 100%; aspect-ratio: 16/9;
  background: #000; border-radius: 12px; overflow: hidden; margin-bottom: 10px;
}
.vid-frame-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid-frame-empty {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: #999; font-size: .9em; text-align: center; padding: 20px;
}
.vid-list { display: flex; flex-direction: column; gap: 6px; }
.vid-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: #f2f5fa; border: 1px solid #dbe1ea; border-radius: 9px;
  cursor: pointer; font-size: .9em; text-align: start; font-family: inherit;
  width: 100%; transition: background .12s;
}
.vid-item:hover { background: #e8f5ee; }
.vid-item.active { background: #e8f5ee; border-color: #1a3a6b; font-weight: 700; }
.vid-item .vid-ic { font-size: 1.1em; flex-shrink: 0; }
.vid-item .vid-tt { flex: 1; min-width: 0; }
.vid-item .vid-no { color: #999; font-size: .85em; flex-shrink: 0; }

/* ─── অ্যানালিটিক্স (ড্যাশবোর্ড — আমার অগ্রগতি) ─── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.stat-card {
  background: #fff;
  border: 1px solid #dbe1ea;
  border-radius: 12px;
  padding: 14px 8px;
  text-align: center;
}
.stat-val { font-size: 1.5em; font-weight: 800; color: var(--green); line-height: 1.1; }
.stat-lbl { font-size: .78em; color: #5a6b60; margin-top: 4px; }

.chart-card {
  background: #fff;
  border: 1px solid #dbe1ea;
  border-radius: 12px;
  padding: 14px 12px 10px;
}
.chart-title { font-size: .9em; font-weight: 700; color: var(--blue); margin-bottom: 12px; }
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 150px;
  overflow-x: auto;
}
.bar-col {
  flex: 1 0 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}
.bar-val { font-size: .68em; color: #5a6b60; margin-bottom: 3px; font-weight: 700; }
.bar-track {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  background: #f1f5f2;
  border-radius: 5px 5px 0 0;
  min-height: 0;
}
.bar {
  width: 100%;
  border-radius: 5px 5px 0 0;
  min-height: 3px;
  transition: height .3s ease;
}
.bar-hi  { background: var(--green); }
.bar-mid { background: var(--gold); }
.bar-lo  { background: #d05b4a; }
.bar-na  { background: #c4ccc6; }
.bar-x { font-size: .7em; color: #8a978d; margin-top: 4px; }

/* ─── হেডার লোগো-ছবি ─── */
.site-logo-img {
  height: 32px;
  width: 32px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

/* ─── প্রোফাইল ছবি আপলোড (ড্যাশবোর্ড অ্যাভাটার) ─── */
.avatar-wrap { position: relative; display: inline-block; cursor: pointer; flex-shrink: 0; }
.avatar-cam {
  position: absolute; right: -2px; bottom: -2px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--green); color: #fff; font-size: .68em;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--card-bg); box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.avatar-wrap.uploading { opacity: .55; pointer-events: none; }
.avatar-wrap.uploading .avatar-cam { animation: avatar-spin 1s linear infinite; }
@keyframes avatar-spin { to { transform: rotate(360deg); } }

/* ─── সাবজেক্ট অনুশীলন: বিষয়-বাছাই বোতাম ─── */
.pr-subjects { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-subj-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1.5px solid var(--border, #d6e0d8);
  border-radius: 22px; background: var(--card-bg, #fff);
  color: inherit; font: inherit; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.pr-subj-btn:active { transform: scale(.98); }
.pr-subj-btn.sel { background: #e5ecf8; border-color: var(--green); font-weight: 600; }
.pr-subj-count {
  font-size: .8em; padding: 1px 8px; border-radius: 10px;
  background: rgba(0,0,0,.06); color: var(--green);
}

/* ─── অনুশীলন: বিষয়-গ্রিড (পুরোনো-সাইট ধাঁচ) ─── */
.pr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 9px; }
.pr-subj-card {
  border: 1.5px solid var(--border, #d6e0d8); border-radius: 11px;
  background: var(--card-bg, #fff); padding: 13px 11px; cursor: pointer;
  text-align: center; transition: background .12s, border-color .12s, transform .08s;
}
.pr-subj-card:hover { background: #e9eff8; border-color: var(--green); }
.pr-subj-card:active { transform: scale(.97); }
.pr-subj-card .pr-name { font-weight: 600; font-size: .93em; margin-bottom: 3px; }
.pr-subj-card .pr-count { font-size: .78em; color: var(--gray-mid, #6b7c70); }
.pr-subj-card.empty { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* ─── অনুশীলন: মোড-মোডাল ─── */
.pr-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,.45); align-items: center; justify-content: center; padding: 14px;
}
.pr-modal-overlay.show { display: flex; }
.pr-modal {
  background: var(--card-bg, #fff); border-radius: 14px; padding: 18px;
  max-width: 380px; width: 100%; box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.pr-mode-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; padding: 11px 14px; border: none; border-radius: 10px;
  color: #fff; font: inherit; font-weight: 600; cursor: pointer; text-align: left;
}
.pr-mode-btn .pr-mode-sub { font-size: .78em; font-weight: 400; opacity: .9; }
.pr-mode-btn:active { transform: scale(.98); }

/* ─── কোর্স-পেজে ব্যাচ-ভিত্তিক কুইক-স্ট্যাট (৪ ঘর) ─── */
.stat-grid.cols-4 { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stat-grid.cols-4 .stat-card { padding: 12px 4px; }
.stat-grid.cols-4 .stat-val { font-size: 1.25em; }
.stat-grid.cols-4 .stat-lbl { font-size: .68em; }
/* ব্যাচ-মেরিট লিস্ট: নিজের সারি হাইলাইট + ছোট সাব-লাইন */
.lb-row.me { background: var(--blue-pale, #e5ecf8); }
.lb-name .lb-sub { display: block; font-size: .72em; color: var(--gray-mid); font-weight: 400; }
/* অ্যাডমিন ফলাফল-শিট টেবিল (get_test_results) */
.res-table { width: 100%; border-collapse: collapse; font-size: .88em; }
.res-table th, .res-table td { border: 1px solid #d8e3db; padding: 7px 9px; text-align: center; }
.res-table th { background: var(--green-pale, #e8f5ee); color: var(--deep-green, #1a3a6b); }
.res-table tbody tr:nth-child(even) td { background: #f2f5fa; }
.res-table td:nth-child(2) { text-align: left; }

/* ─── হোম কার্ড — ক্লিন সংস্করণ (ট্যাগ থাম্বে, এক "বিস্তারিত" বাটন) ─── */
.course-card { cursor: pointer; transition: box-shadow .15s, transform .15s; }
.course-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.10); transform: translateY(-2px); }
.course-thumb-wrap { position: relative; line-height: 0; }
/* টাইপ-ট্যাগ শুধু থাম্বের ওপরে হলে absolute; কার্ড-বডিতে গেলে সাধারণ ইনলাইন পিল
   (থাম্বনেইল সাফ থাকে — ব্যস্ত ব্যানার-ছবির ওপর বাড়তি ব্যাজ নয়) */
.course-thumb-wrap .course-tag {
  position: absolute; top: 8px; left: 8px; margin: 0;
  background: rgba(255,255,255,.93);
  box-shadow: 0 1px 4px rgba(0,0,0,.14);
}
.course-price-row { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.cc-btn {
  width: 100%; margin-top: 4px; padding: 9px 12px;
  background: #fff; color: var(--green);
  border: 1.5px solid var(--green); border-radius: 9px;
  font-family: inherit; font-size: .9em; font-weight: 700; cursor: pointer;
  transition: background .15s, color .15s;
}
.cc-btn:hover { background: var(--green); color: #fff; }
.cc-btn-green { background: var(--green); color: #fff; }
.cc-btn-green:hover { background: #155b32; }
.cc-btn-gold { color: var(--gold); border-color: var(--gold); }
.cc-btn-gold:hover { background: var(--gold); color: #fff; }

.price-block { background: #f3f9f5; border-color: #cfe6d8; border-radius: 12px; }
.price-block .course-price { font-size: 1.12em; font-weight: 800; }

/* ─── ভর্তি-ছাত্রের কোর্স-ড্যাশ হেডার (কম্প্যাক্ট, কনটেন্ট-ফার্স্ট) ─── */
.course-dash-head { padding: 16px; }
.cdh-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.course-dash-head .course-tag { margin: 0; }
.course-dash-head .detail-name { font-size: 1.25em; margin: 0; line-height: 1.4; }
.course-dash-head .notice-box { margin-top: 12px; margin-bottom: 0; }

/* ─── ড্যাশবোর্ড: নোটিশ-✕, কম্প্যাক্ট প্রোফাইল, কোর্স-গ্রিড, অনুশীলন-শর্টকাট, হোম-ওয়েলকাম ─── */
.notice-card { position: relative; }
.notice-close {
  position: absolute; top: 6px; right: 10px;
  background: none; border: none; font-size: 1.5em; line-height: 1;
  color: #b08a3a; cursor: pointer; padding: 2px 6px; opacity: .65;
}
.notice-close:hover { opacity: 1; }
.profile-more {
  background: none; border: none; color: var(--green);
  font-family: inherit; font-size: .82em; font-weight: 600;
  cursor: pointer; padding: 8px 0 0;
}
.mycourse-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; }
.mycourse-grid .mycourse-row { margin: 0; }
.ps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.ps-card {
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 13px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  padding: 14px 12px; text-decoration: none; transition: box-shadow .15s, transform .15s;
}
.ps-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.1); transform: translateY(-1px); }
.ps-card .ps-ic {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 1.3em; flex-shrink: 0;
}
.ps-card .ps-ic .st-ic { color: inherit; margin-right: 0; }
.ps-card .ps-tx { min-width: 0; }
.ps-card .ps-tx b { display: block; font-size: .95em; color: var(--blue); }
.ps-card .ps-tx small { display: block; font-size: .72em; color: var(--gray-mid); margin-top: 2px; }
.ps-c-saved .ps-ic { background: #fdecea; color: #e74c3c; }
.ps-c-bank  .ps-ic { background: #fdf3e0; color: var(--gold); }
@media (max-width: 380px) {
  .ps-card .ps-tx small { display: none; }
}
.home-welcome {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: linear-gradient(120deg, #1a3a6b, #2c5aa0); color: #fff;
  border-radius: 12px; padding: 12px 16px; text-decoration: none;
  margin-bottom: 14px; box-shadow: 0 2px 10px rgba(26,58,107,.22);
}
.home-welcome .hw-tx { display: flex; flex-direction: column; font-weight: 700; }
.home-welcome .hw-tx small { font-weight: 400; opacity: .9; font-size: .8em; margin-top: 2px; }
.home-welcome .hw-go { font-weight: 700; white-space: nowrap; font-size: .92em; }

/* ─── কোর্স কনটেন্ট: ম্যাটেরিয়াল টাইল-গ্রিড ───
   পুরোনো-সাইট ধাঁচে রঙিন আইকন-টাইল — সমতল বাটন-সারির চেয়ে বেশি স্ক্যানযোগ্য;
   প্রতিটা উপকরণ-টাইপ রঙ+আইকনে এক নজরে চেনা যায়। কলাম responsive:
   auto-fill minmax — স্ক্রিন-প্রস্থ অনুযায়ী নিজে ঠিক হয় (মোবাইলে কম, ডেস্কটপে বেশি),
   অল্প টাইলে বাম থেকে ভরে, ফাঁকা ঘর/একলা-চাপা টাইল এড়ায়। */
.mat-grid {
  display: grid; gap: 9px;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
.mat-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; text-decoration: none;
  border: 1.5px solid var(--border); border-radius: 11px;
  padding: 14px 6px; background: #fff; cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.mat-tile:hover { transform: translateY(-2px); box-shadow: 0 3px 10px rgba(0,0,0,.09); }
.mat-tile .mat-ic {
  height: 30px; display: flex; align-items: center; justify-content: center;
  font-size: 1.55em; line-height: 1;
}
.mat-tile .mat-ic svg { width: 30px; height: 30px; margin: 0 !important; }
.mat-tile .mat-lb { font-size: .77em; font-weight: 700; line-height: 1.3; }
.mat-blue  { background: #eef4ff; border-color: rgba(26,58,107,.18); }
.mat-blue  .mat-lb { color: var(--blue); }
.mat-green { background: #ecf6f0; border-color: rgba(26,107,60,.18); }
.mat-green .mat-lb { color: var(--success); }
.mat-gold  { background: #fdf6e7; border-color: rgba(201,146,42,.24); }
.mat-gold  .mat-lb { color: var(--gold); }
.mat-red   { background: #fdecea; border-color: rgba(217,71,47,.22); }
.mat-red   .mat-lb { color: #d9472f; }

/* ─── হোম কোর্স ব্রাউজিং: ফিল্টার-ট্যাব ───
   এক গ্রিড, উপরে ট্যাব। মোবাইলে অনুভূমিক-স্ক্রল (চাপাচাপি এড়াতে); নির্বাচিত
   ট্যাব সবুজ-পূর্ণ। আগের ছড়ানো চিপ/ফ্রি/আপকামিং সেকশন একত্র করে — এক কোর্স একবার। */
.course-tab-row {
  display: flex; gap: 8px; margin-bottom: 14px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: 4px; scrollbar-width: none;
}
.course-tab-row::-webkit-scrollbar { display: none; }
.course-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  font-family: inherit; font-size: .9em; font-weight: 700; cursor: pointer;
  padding: 8px 14px; border-radius: 999px; white-space: nowrap;
  border: 1.5px solid var(--border); background: #fff; color: var(--text);
  transition: background .15s, color .15s, border-color .15s;
}
.course-tab:hover { border-color: var(--green); }
.course-tab.active {
  background: var(--green); color: #fff; border-color: var(--green);
}
.course-tab .ct-count {
  font-size: .82em; font-weight: 700; opacity: .85;
  background: rgba(0,0,0,.07); border-radius: 999px; padding: 1px 7px;
}
.course-tab.active .ct-count { background: rgba(255,255,255,.25); }

/* ─── অ্যাডমিন পরীক্ষা-ড্যাশবোর্ড: টুলবার · স্ট্যাটাস-ট্যাব · কার্ড-অ্যাকশন ───
   এক তালিকা + ট্যাব (চলমান/নিষ্ক্রিয়/আর্কাইভ/ডেমো)। .course-tab-এর ধাঁচেই,
   তবে অ্যাডমিনে আলাদা নাম যাতে হোম-ট্যাবের সাথে না জড়ায়। */
.tst-toolbar {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px;
}
.tst-toolbar select, .tst-toolbar input[type="search"] {
  flex: 1; min-width: 150px; margin: 0;
  /* .field select/.field input-এর মতোই প্যাডিং+বর্ডার — এই টুলবার .field-এ মোড়া নয় বলে
     আগে ব্রাউজার-ডিফল্ট সরু চেহারায় রেন্ডার হতো */
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  font-family: inherit;
  font-size: .95em;
  background: #fff;
}
.tst-toolbar select:focus, .tst-toolbar input[type="search"]:focus {
  outline: none;
  border-color: var(--green);
}
.tst-tabs {
  display: flex; gap: 8px; margin-bottom: 14px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: 8px; scrollbar-width: none;
  border-bottom: 2px solid var(--border);
}
.tst-tabs::-webkit-scrollbar { display: none; }
.tst-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: .85em; font-weight: 700; cursor: pointer;
  padding: 6px 13px; border-radius: 999px; white-space: nowrap;
  border: 1.5px solid var(--border); background: #fff; color: var(--text);
  transition: background .15s, color .15s, border-color .15s;
}
.tst-tab:hover { border-color: var(--green); }
.tst-tab.on { background: var(--green); color: #fff; border-color: var(--green); }
.tst-cnt {
  font-size: .82em; font-weight: 700;
  background: rgba(0,0,0,.07); border-radius: 999px; padding: 1px 7px;
}
.tst-tab.on .tst-cnt { background: rgba(255,255,255,.25); }

.mc-badge.off { background: #eef1ee; color: var(--gray-mid); }

/* কার্ডের অ্যাকশন-সারি: প্রাকৃতিক প্রস্থ + র‍্যাপ (মোবাইলে চাপাচাপি এড়াতে) */
.tst-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.tst-pager {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 14px; flex-wrap: wrap;
}
.tst-pager .pinfo { font-size: .85em; color: var(--gray-mid); }

/* ═══ ভিত্তি-স্তর: হোম-কার্ড মেটা + ভর্তি-ব্যাজ ═══ */
.cc-meta {
  font-size: .8em; color: var(--gray-mid);
  display: flex; flex-wrap: wrap; gap: 4px 8px;
}
/* থাম্বের ওপরে ডান-কোণে ভর্তি-ব্যাজ (course-tag বাঁয়ে, এটা ডানে) */
.cc-enrolled {
  position: absolute; top: 8px; right: 8px;
  background: var(--green); color: #fff;
  font-size: .72em; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.cc-enrolled.wait { background: var(--gold); }

/* ═══ ভিত্তি-স্তর: ড্যাশ অসমাপ্ত-পরীক্ষা "চালিয়ে যাও" কার্ড ═══ */
.resume-card {
  display: flex; align-items: center; gap: 12px;
  background: #fff7e6; border: 1.5px solid var(--gold);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 14px;
}
.resume-card .rc-ic { font-size: 1.6em; flex: 0 0 auto; }
.resume-card .rc-tx { flex: 1; min-width: 0; }
.resume-card .rc-tx b { color: var(--blue); display: block; }
.resume-card .rc-tx small { color: var(--gray-mid); font-size: .85em; }

/* ═══ ভিত্তি-স্তর: কোর্স-ড্যাশ অগ্রগতি-বার + ফেরা-লিংক ═══ */
.cd-back {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .85em; color: var(--green); font-weight: 700;
  margin-bottom: 8px; text-decoration: none;
}
.cd-back:hover { text-decoration: underline; }
.course-progress { margin: 4px 0 14px; }
.course-progress .cp-top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .85em; margin-bottom: 5px;
}
.course-progress .cp-top b { color: var(--green); }
.course-progress .cp-track {
  height: 9px; background: #e6ece8; border-radius: 999px; overflow: hidden;
}
.course-progress .cp-fill {
  height: 100%; background: linear-gradient(90deg, var(--green), #2e9c5b);
  border-radius: 999px; transition: width .5s ease;
}

/* ═══ ভিত্তি-স্তর: বিষয়-দক্ষতা (ড্যাশ — দুর্বল বিষয় + অনুশীলন-লিংক) ═══ */
.mz-list { display: flex; flex-direction: column; gap: 10px; }
.mz-row { display: flex; align-items: center; gap: 10px; }
.mz-info { flex: 1; min-width: 0; }
.mz-name { font-size: .9em; font-weight: 700; color: var(--blue); margin-bottom: 4px; }
.mz-name .mz-n { font-weight: 400; color: var(--gray-mid); font-size: .85em; }
.mz-track { height: 8px; background: #e6ece8; border-radius: 999px; overflow: hidden; }
.mz-fill { height: 100%; border-radius: 999px; transition: width .5s ease; }
.mz-fill.hi  { background: var(--green); }
.mz-fill.mid { background: var(--gold); }
.mz-fill.lo  { background: #d65a4a; }
.mz-pct { font-weight: 700; font-size: .9em; min-width: 42px; text-align: right; }
.mz-go { flex: 0 0 auto; white-space: nowrap; }

/* ═══ ভিত্তি-স্তর: অধ্যয়ন-ধারাবাহিকতা (streak + সক্রিয়তা স্ট্রিপ) ═══ */
.streak-card {
  background: linear-gradient(135deg, #fff7e6 0%, #fff 60%);
  border: 1px solid #f0e2c0; border-radius: 12px;
  padding: 12px 14px; margin-bottom: 14px;
}
.sk-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.sk-fire { font-size: 1.3em; line-height: 1; }
.sk-main { font-size: 1.02em; color: var(--blue); }
.sk-main b { color: var(--gold); font-size: 1.18em; }
.sk-sub { font-size: .82em; color: var(--gray-mid); margin-left: auto; }
.sk-strip { display: flex; gap: 4px; }
.sk-dot {
  flex: 1; max-width: 26px; height: 11px; border-radius: 3px; background: #e6ece8;
}
.sk-dot.on { background: linear-gradient(180deg, var(--green), #2e9c5b); }

/* ─── অ্যাডমিন-হাব (ওয়ার্কপ্লেস ড্যাশবোর্ড) ─── */
.adash-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 4px 0 14px;
}
.adash-hello { font-size: 1.15em; font-weight: 800; color: var(--green); line-height: 1.2; }
.adash-date { font-size: .8em; color: var(--gray-mid); margin-top: 3px; }

/* করণীয় */
.adash-todo-wrap { margin-bottom: 16px; }
.adash-todo {
  display: flex; align-items: center; gap: 10px;
  border-radius: 12px; padding: 12px 14px; margin-bottom: 8px;
  text-decoration: none; border: 1px solid var(--border); background: var(--card-bg);
}
.adash-todo:last-child { margin-bottom: 0; }
.adash-todo.warn { background: #fdf6e7; border-color: #ecd9a8; }
.adash-todo.info { background: #eaf1fb; border-color: #c7d8f1; }
.adash-todo.ok   { background: #e9f5ee; border-color: #c4e3d1; }
.adash-todo-ic  { flex: 0 0 auto; color: var(--blue); display: flex; }
.adash-todo.ok .adash-todo-ic { color: var(--success); }
/* রিফ্রেশ — হেডারের বড় ↻-বাক্সের বদলে করণীয়-স্ট্রিপে ছোট গোল আইকন-বোতাম */
.adash-refresh {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--border); background: #fff; color: var(--gray-mid);
}
.adash-refresh:hover { color: var(--blue); border-color: var(--blue); }
.adash-refresh-row { display: flex; justify-content: flex-end; margin-top: 6px; }
.adash-todo-txt { flex: 1; font-size: .9em; color: #333; }
.adash-todo-txt b { color: var(--blue); }
.adash-todo-go  {
  flex: 0 0 auto; font-size: .82em; font-weight: 700; color: var(--green);
  background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px;
}

/* এক নজরে — কমপ্যাক্ট গণনা-কার্ড (আইকন বাঁয়ে, সংখ্যা+লেবেল ডানে) —
   আগের লম্বা সেন্টার-কার্ডে সেকশন এত বড় হতো যে "দ্রুত যাও" স্ক্রিনের নিচে চলে যেত */
.adash-stat-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 16px;
}
@media (min-width: 560px) { .adash-stat-grid { grid-template-columns: repeat(3, 1fr); } }
.adash-stat {
  display: flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid #dbe1ea; border-radius: 12px;
  padding: 9px 11px;
}
.adash-stat.hot { background: #fff8ef; border-color: #f0ddb8; }
.adash-stat-ic  { flex: 0 0 auto; color: var(--blue); display: flex; }
.adash-stat.hot .adash-stat-ic { color: var(--gold); }
.adash-stat-body { display: flex; flex-direction: column; min-width: 0; }
.adash-stat-val { font-size: 1.1em; font-weight: 800; color: var(--blue); line-height: 1.2; }
.adash-stat.hot .adash-stat-val { color: var(--gold); }
.adash-stat-lbl { font-size: .72em; color: #5a6b60; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adash-stat-sub { font-size: .95em; color: var(--gray-mid); }

/* দ্রুত যাও — নেভ-কার্ড */
/* এক-শব্দের কার্ড; grid নয় flex — কার্ড-সংখ্যা বেজোড় হলে শেষেরটা একা না ঝুলে
   বাকি জায়গা ভরে নেয় (বন্ধুর রিপোর্ট: ১১টায় একটা সিঙ্গেল হয়ে যাচ্ছিল) */
.adash-nav-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.adash-nav {
  flex: 1 1 30%; min-width: 138px;
  display: flex; align-items: center; gap: 8px;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 11px; text-decoration: none; box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.adash-nav-ic { flex: 0 0 auto; color: var(--blue); display: flex; }
.adash-nav-body {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap; min-width: 0; flex: 1;
}
.adash-nav-name { font-weight: 700; color: var(--blue); font-size: .92em; }
.adash-nav-badge {
  font-size: .7em; font-weight: 700; color: var(--green);
  background: #e5ecf8; border-radius: 999px; padding: 1px 8px;
}
.adash-nav-badge.warn { color: #8a6712; background: #fdf2d6; }

/* সাম্প্রতিক অপেক্ষমান পেমেন্ট */
.adash-pend-list { display: flex; flex-direction: column; gap: 8px; }
.adash-pend-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
}
.adash-pend-info { flex: 1; min-width: 0; }
.adash-pend-name  { font-weight: 700; color: var(--blue); font-size: .9em; }
.adash-pend-phone { font-weight: 400; color: var(--gray-mid); font-size: .85em; }
.adash-pend-meta  { font-size: .78em; color: #5a6b60; margin-top: 2px; }
.adash-pend-ok    { flex: 0 0 auto; }

@media (max-width: 420px) {
  .adash-nav { flex-basis: 40%; min-width: 120px; }
}

/* ─── অ্যাডমিন প্রশ্ন-ওয়ার্কস্পেস (admin/questions.html) ─── */
.q-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.q-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-left: 4px solid var(--green); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 9px;
}
.q-card.editing { border-left-color: var(--gold); background: #fffdf6; }
.q-card-err { border-left-color: var(--red); background: #fdf4f4; }
.q-card-head { display: flex; gap: 9px; align-items: flex-start; }
.q-num {
  flex: 0 0 auto; min-width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--green); color: #fff; border-radius: 50%;
  font-size: .82em; font-weight: 700;
}
.q-text { font-weight: 600; flex: 1; min-width: 0; }
.q-opts { margin: 7px 0 0 35px; display: flex; flex-direction: column; gap: 3px; }
.q-opt { font-size: .92em; }
.q-opt.ok { color: var(--success); font-weight: 700; }
.q-opt-key { display: inline-block; min-width: 2.6em; font-weight: 700; color: var(--gray-mid); }
.q-opt.ok .q-opt-key { color: var(--success); }
.q-exp { margin: 6px 0 0 35px; font-size: .82em; color: var(--gray-mid); }
.q-meta { margin: 6px 0 0 35px; font-size: .8em; color: var(--gray-mid); }
.q-meta .q-id { opacity: .65; }
.q-card-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 9px 0 0 35px; }
@media (max-width: 420px) {
  .q-opts, .q-exp, .q-meta, .q-card-actions { margin-left: 0; }
}
.q-warn {
  background: #fff7e6; color: #8a6712; border: 1px solid #f0e2c0;
  border-radius: 9px; padding: 9px 12px; margin-bottom: 10px;
  font-size: .88em; font-weight: 600;
}
/* 📚 ব্যাংক থেকে যোগ — বাছাই-সারি */
.qbank-pick {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 9px; margin-bottom: 6px; cursor: pointer;
}
.qbank-pick.on { border-color: var(--green); background: #eaf1fb; }
.qbank-pick input { margin-top: 3px; flex: 0 0 auto; }
.qbank-pick-tx { display: flex; flex-direction: column; min-width: 0; font-size: .92em; }
.qbank-pick-tx small { color: var(--gray-mid); font-size: .82em; margin-top: 2px; }

/* ═══════════════════════════════════════════════
   অ্যাপ-ধাঁচ ভিত্তি (পেজ ঢেলে-সাজানো · ধাপ ০)
   app-hero · stat-banner · icon-tile · bottom-nav
   শেয়ার্ড — হোম/ড্যাশ/কোর্স তিন পেজে এক ভাষা।
   ═══════════════════════════════════════════════ */

/* ─── সবুজ অ্যাপ-হিরো ব্যান্ড ─── */
.app-hero {
  background: linear-gradient(135deg, #1a3a6b, #122a52);
  color: #fff; border-radius: 0 0 22px 22px;
  padding: 22px 18px 26px;
}
.app-hero .ah-title { font-size: 1.25em; font-weight: 800; color: #fff; line-height: 1.4; }
.app-hero .ah-sub { font-size: .85em; opacity: .9; margin-top: 6px; }
.app-hero .ah-greet { font-size: .82em; opacity: .85; }
/* কনটেইনারের ভেতরে হিরো হলে প্যাডিং ভেদ করে ফুল-উইডথ (ড্যাশ/কোর্সে) */
.app-hero.bleed { margin: -20px -16px 0; }

/* হোম-হিরো app-hero-এর ভেতরে — পুরোনো রঙ override (সবুজে সাদা/হালকা-গোল্ড) */
.hero.app-hero { padding: 26px 20px 30px; }
.hero.app-hero .hero-title { color: #fff; }
.hero.app-hero .hero-brand { color: #f1c75a; }
.hero.app-hero .hero-sub { color: rgba(255,255,255,.85); }
.hero.app-hero .btn-line { border-color: rgba(255,255,255,.85); color: #fff; }
.hero.app-hero .btn-line:hover { background: rgba(255,255,255,.14); }

/* ─── ভাসমান স্ট্যাট-ব্যানার (হিরোর নিচে ওভারল্যাপ) ─── */
.stat-banner {
  background: #fff; border: 1.5px solid #e3e9e4; border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.08); display: flex;
  margin: -20px 6px 18px; position: relative; z-index: 2;
}
.sb-item { flex: 1; text-align: center; padding: 12px 6px; }
.sb-item + .sb-item { border-left: 1px solid #eef3f0; }
.sb-val { font-size: 1.3em; font-weight: 800; color: var(--green); display: block; line-height: 1.1; }
.sb-lbl { font-size: .68em; color: var(--gray-mid); display: block; margin-top: 4px; }

/* ─── রঙিন টাইপ-আইকন টাইল ─── */
.icon-tile {
  width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.3em;
}
.icon-tile.it-live   { background: #fdecea; color: #e74c3c; }
.icon-tile.it-record { background: #e8eef6; color: var(--blue); }
.icon-tile.it-exam   { background: #fdf3e3; color: var(--gold); }

/* মোবাইলে দুই কোর্স-কার্ড পাশাপাশি (কার্ড এখন সরল — থাম্ব+নাম+দাম+বোতাম) */
@media (max-width: 560px) {
  .course-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .course-grid .course-name { font-size: .92em; }
  .course-grid .cc-btn { font-size: .82em; padding: 8px 6px; }
}

/* ─── হেডার: দুই-লাইন ইংরেজি ব্র্যান্ড + কোর্স-সার্চ + আইকন-বোতাম ─── */
.site-brand { display: flex; flex-direction: column; line-height: 1.02; }
.site-brand b { color: var(--green); font-size: .78em; font-weight: 800; }
.site-brand i { color: var(--gold); font-style: normal; font-size: .78em; font-weight: 700; }
.hdr-search-wrap { position: relative; flex: 1; min-width: 0; max-width: 300px; display: flex; align-items: center; }
.hdr-search-wrap .svic { position: absolute; left: 11px; color: #9aa6a0; pointer-events: none; }
.hdr-search {
  width: 100%; height: 36px;
  border: 1.5px solid #d6e0f0; border-radius: 20px; padding: 0 14px 0 34px;
  font-family: inherit; font-size: .9em; background: #fff;
}
.hdr-search:focus { outline: none; border-color: var(--green); }
.hdr-logout, .hdr-menu {
  background: none; border: none; cursor: pointer; line-height: 0; padding: 5px 7px; border-radius: 8px;
  display: inline-flex; align-items: center;
}
.hdr-logout { color: #6b7770; }
.hdr-menu { color: var(--green); }
.hdr-logout:hover, .hdr-menu:hover { background: #e5ecf8; }

/* প্রোফাইল বটম-ট্যাবে নিজের অবতার-ছবি */
.bn-av { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; display: block; }
.bn-item.active .bn-av { box-shadow: 0 0 0 2px var(--green); }

/* ড্যাশ প্রোফাইল-কার্ডে নামের আগে ছোট অবতার (সবুজ ব্যান্ডে) */
.pf-av {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  background: rgba(255,255,255,.2); color: #fff; border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05em;
}
.pf-av img { width: 100%; height: 100%; object-fit: cover; }

/* ─── ☰ নেভ-ড্রয়ার (ডান থেকে স্লাইড; গৌণ লিংক) ─── */
.nd-overlay { position: fixed; inset: 0; z-index: 300; display: none; }
.nd-overlay.open { display: block; }
.nd-dim { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.nd-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 290px; max-width: 84vw;
  background: #fff; display: flex; flex-direction: column; overflow-y: auto;
  transform: translateX(100%); transition: transform .25s ease;
  box-shadow: -6px 0 24px rgba(0,0,0,.18);
}
.nd-overlay.open .nd-panel { transform: translateX(0); }
.nd-head {
  display: flex; align-items: center; gap: 10px; padding: 18px 16px;
  background: linear-gradient(135deg, #1a3a6b, #122a52); color: #fff;
}
.nd-head img { width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0; }
.nd-head b { font-size: 1.05em; }
.nd-head small { display: block; font-size: .72em; opacity: .9; margin-top: 2px; line-height: 1.4; }
.nd-nav { padding: 6px 0; }
.nd-link {
  display: flex; align-items: center; gap: 12px; padding: 13px 18px; text-decoration: none; color: #333;
  font-size: .95em; font-weight: 600; border-bottom: 1px solid #eef2f6;
}
.nd-link .svic { color: var(--green); flex-shrink: 0; }
.nd-link:hover { background: #eef2f8; color: var(--green); }
.nd-csec { padding: 14px 18px; }
.nd-clabel { display: flex; align-items: center; gap: 7px; font-size: .85em; font-weight: 700; color: var(--green); margin-bottom: 9px; }
.nd-clinks { display: flex; flex-wrap: wrap; gap: 7px; }
.nd-clink { font-size: .8em; font-weight: 600; padding: 6px 12px; border-radius: 9px; text-decoration: none; }
.nd-foot { margin-top: auto; padding: 14px 18px; font-size: .78em; color: var(--gray-mid); border-top: 1px solid #eef3f0; text-align: center; }

/* ─── মোবাইল বটম-নেভ (অ্যাপ-শেল; শুধু ছোট স্ক্রিনে) ─── */
.bottom-nav { display: none; }
@media (max-width: 640px) {
  .bottom-nav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
    background: #fff; border-top: 1px solid #e3e9e4;
    box-shadow: 0 -2px 10px rgba(0,0,0,.06);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .bn-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    text-decoration: none; color: #9aa6a0; font-size: .64em; font-weight: 700;
    white-space: nowrap;
  }
  .bn-item .bn-ic { font-size: 1.45em; line-height: 1; }
  .bn-item .bn-ic svg { width: 23px; height: 23px; display: block; }
  .bn-item.active { color: var(--green); }
  body { padding-bottom: 62px; }
}

/* ─── হেডার অবতার (নামহীন; চাপলে ড্যাশবোর্ড — এক পথ) ─── */
.user-avatar {
  width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #e5ecf8; color: var(--green); font-size: 1.05em;
  border: 1.5px solid var(--green); text-decoration: none; flex-shrink: 0;
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* লগইন-করা ছাত্রের স্লিম শুভেচ্ছা (বিক্রি-হিরোর বদলে) */
.home-greet { font-size: 1.1em; font-weight: 700; color: var(--green); margin: 4px 0 14px; }

/* ফর্ম-নোট (যেমন: ফোন অ্যাডমিন-সেট) */
.field-note { display: block; font-size: .78em; color: var(--gray-mid); margin-top: 4px; }

/* ড্যাশবোর্ড লগআউট (হেডার থেকে সরানো — অ্যাকাউন্ট এক জায়গায়) */
.dash-logout { margin-top: 22px; color: var(--red); border-color: #e0b4bb; }
.dash-logout:hover { background: var(--red); color: #fff; border-color: var(--red); }

/* অনুশীলন এখন বটম-ট্যাবে নেই — ড্যাশবোর্ডের শর্টকাটই মোবাইলেও মূল পথ (লুকাই না) */

/* ─── কোর্স-ড্যাশ: অ্যাপ-হিরো হেডার + ট্যাব ─── */
.cd-hero { border-radius: 14px; padding: 13px 16px 11px; margin-bottom: 12px; }
.cd-hero .course-tag { background: rgba(255,255,255,.92); margin-bottom: 5px; }
.cd-hero-name { color: #fff; font-size: 1.18em; font-weight: 800; line-height: 1.3; margin: 2px 0 5px; }
.cd-enrolled {
  display: inline-block; font-size: .82em; color: #fff;
  background: rgba(255,255,255,.18); padding: 4px 11px; border-radius: 999px;
}
.cd-tabs { display: flex; gap: 7px; margin-bottom: 14px; overflow-x: auto; }
.cd-tabs::-webkit-scrollbar { display: none; }
.cd-tab {
  flex: 0 0 auto; font-family: inherit; font-size: .9em; font-weight: 700;
  padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--border);
  background: #fff; color: var(--gray-mid); cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s;
}
.cd-tab.active { background: var(--green); color: #fff; border-color: var(--green); }

/* ─── অ্যাডমিন সাইডবার-শেল (শেয়ার্ড; স্থায়ী বাঁ-নেভ) ─── */
.adm-side, .adm-overlay, .adm-burger { display: none; }
.adm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 140; }
body.adm-shell .site-header, body.adm-shell .site-footer { display: none; }
/* width:auto জরুরি — base .container-এ width:100%; margin-left:220 যোগ হলে
   ১০০% + ২২০px = ভিউপোর্ট ছাড়িয়ে ডানে উপচে পড়ে (এডিট-বোতাম আড়াল)। auto = বাকিটা ভরে। */
body.adm-shell .container { max-width: none; width: auto; margin: 0 0 0 220px; padding: 22px 26px 60px; }
/* pages.html (.pg-wrap) ও students.html (.stu-wrap) আলাদা কাস্টম-লেআউট — ওদেরও শিফট */
body.adm-shell .pg-wrap, body.adm-shell .stu-wrap { width: auto; margin: 0 0 0 220px; }
body.adm-shell .adm-side {
  display: flex; flex-direction: column;
  position: fixed; left: 0; top: 0; bottom: 0; width: 220px; z-index: 150;
  background: #143a24; color: #cfe3d6; overflow-y: auto;
}
.adm-brand {
  display: flex; align-items: center; gap: 9px; padding: 15px 16px;
  text-decoration: none; color: #fff; font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.adm-brand img { width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0; }
.adm-brand small { display: block; font-size: .66em; font-weight: 400; color: #9cc3a8; }
.adm-nav { flex: 1; padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; }
.adm-link {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 9px; text-decoration: none; color: #cfe3d6;
  font-size: .92em; font-weight: 600;
}
.adm-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.adm-link.active { background: var(--green); color: #fff; }
.adm-ic { font-size: 1.1em; width: 1.3em; text-align: center; }
.adm-side-foot { padding: 8px; border-top: 1px solid rgba(255,255,255,.1); }

@media (max-width: 860px) {
  body.adm-shell .container { margin-left: 0; padding: 62px 16px 60px; }
  body.adm-shell .pg-wrap, body.adm-shell .stu-wrap { margin-left: 0; padding-top: 60px; }
  body.adm-shell .adm-side {
    transform: translateX(-100%); transition: transform .25s;
    box-shadow: 2px 0 18px rgba(0,0,0,.3);
  }
  body.adm-shell .adm-side.open { transform: translateX(0); }
  body.adm-shell .adm-burger {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: 10px; left: 10px; z-index: 160;
    width: 42px; height: 42px; border-radius: 10px; border: none;
    /* আগে হার্ডকোড পুরোনো ব্র্যান্ড-সবুজ #143a24 ছিল — নেভি-অডিটে বাদ পড়া শেষ স্পট */
    background: linear-gradient(135deg, #1a3a6b, #122a52); color: #fff;
    font-size: 1.3em; cursor: pointer;
  }
}

/* ═══════════ হোম পুনর্গঠন: কম্প্যাক্ট হিরো + বিষয়/টাইপ ফাইন্ডার + ফ্রি-ক্লাস মডাল ═══════════ */

/* শেয়ার্ড SVG আইকন (icon() ফেরায় .svic) — ইনলাইন, currentColor */
.svic { display: inline-block; vertical-align: -0.18em; flex-shrink: 0; }

/* ─ হিরো (অ্যাপ-ধাঁচ কার্ড + ইলাস্ট্রেশন) ─ */
.home-hero {
  position: relative; overflow: hidden; color: #fff;
  /* বাঁ-ডান 16px = .container-এর padding — নিচের স্ট্যাটস/কার্ডের প্রান্তের সাথে এক লাইনে */
  margin: 12px 16px 4px; border-radius: 18px; padding: 20px 18px;
  background: linear-gradient(140deg, #0c182e 0%, #1e3c72 50%, #3662a8 100%);
}
.hh-glow {
  position: absolute; top: -60px; right: -60px; width: 180px; height: 180px;
  border-radius: 50%; background: #d4af37; opacity: .25; filter: blur(40px);
  mix-blend-mode: screen; pointer-events: none;
}
.hh-deco { position: absolute; color: #fff; pointer-events: none; }
.hh-deco-book { width: 180px; height: 180px; top: -40px; right: -40px; opacity: .06; transform: rotate(12deg); }
.hh-deco-cap  { width: 150px; height: 150px; bottom: -40px; left: -40px; opacity: .03; transform: rotate(-12deg); }
.hh-body { position: relative; z-index: 1; padding-top: 4px; }
.hh-title { font-size: 1.4em; font-weight: 800; line-height: 1.32; color: #fff; }
.hh-title-accent { color: #d4af37; }
.hh-sub { font-size: .8em; font-weight: 500; line-height: 1.6; color: rgba(255,255,255,.8); max-width: 240px; margin-top: 9px; }
.hh-cta { display: flex; gap: 10px; margin-top: 18px; }
.hh-pill {
  justify-content: center; white-space: nowrap;
  font-family: inherit; font-size: .9em; font-weight: 800;
  padding: 12px 14px; border-radius: 999px; cursor: pointer; border: 0;
  text-decoration: none; transition: transform .12s, background .15s;
  display: inline-flex; align-items: center; gap: 6px;
}
.hh-pill:active { transform: scale(.97); }
.hh-gold { flex: 1.5; background: linear-gradient(135deg, #d4af37, #b8860b); color: #fff; box-shadow: 0 4px 15px rgba(212,175,55,.3); }
.hh-outline { flex: 1; background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.3); }
.hh-outline:hover { background: rgba(255,255,255,.1); }

/* ─ ফাইন্ডার (পেজ-বিজিতে, সাদা-কার্ড মোড়ক ছাড়া) ─ */
.home-finder { padding: 4px 0 0; }
.finder-title { font-size: 1.06em; font-weight: 800; color: var(--green); margin: 16px 0 10px; line-height: 1.3; }
.home-finder > .finder-title:first-child { margin-top: 4px; }

/* শিরোনাম + ডানে "সব দেখুন" একই লাইনে (হোমের হাইলাইট-স্ট্রিপে) */
.finder-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 10px; }
.finder-head .finder-title { margin: 0; }
.finder-more { display: flex; align-items: center; gap: 2px; font-size: .86em; font-weight: 700; color: var(--green); text-decoration: none; white-space: nowrap; }
.finder-more:active { opacity: .7; }

/* ─ বিষয়-কার্ড (আইকন উপরে, নাম নিচে; এক লাইনে অনুভূমিক স্ক্রল, ডানে › সর্বদা) ─ */
.subj-wrap { position: relative; }
.subject-row {
  display: flex; gap: 9px; overflow-x: auto; padding: 2px 14px 6px;
  margin: 0 -2px 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  justify-content: safe center;  /* কম হলে সেন্টার (পিলের মতো); বেশি হলে স্ক্রল-শুরু থেকে */
}
.subject-row::-webkit-scrollbar { display: none; }
.subject-card {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: #fff; border: 1.5px solid #e3ece6; border-radius: 14px;
  padding: 10px 8px 9px; cursor: pointer; font-family: inherit;
  transition: .15s; user-select: none; width: 100px; text-align: center;
  box-shadow: 0 2px 8px rgba(20,55,35,.05);
}
.subject-card:active { transform: scale(.96); }
.subject-card .sc-ic {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  font-size: 1.3em; flex-shrink: 0; background: #e8f5ee; color: var(--green);
}
.subject-card strong { font-size: .78em; font-weight: 700; color: #2b3a31; text-align: center; line-height: 1.25; }
.sc-c1 .sc-ic { background: #e7eef9; }
.sc-c2 .sc-ic { background: #fbf2dd; }
.sc-c3 .sc-ic { background: #efeafa; }
.subject-card.active { border-color: var(--green); background: #eaf1fb; box-shadow: 0 4px 14px rgba(26,58,107,.16); }
/* স্ক্রল-ইশারা (›) — শুধু উপচে পড়লে ডান-প্রান্তে ফেইড */
.subj-wrap.scrollable::after {
  content: '›'; position: absolute; right: -2px; top: 0; bottom: 8px;
  display: flex; align-items: center; padding: 0 4px 0 22px;
  font-size: 1.6em; font-weight: 800; color: var(--green);
  background: linear-gradient(90deg, rgba(240,244,241,0), #eef2f6 60%);
  pointer-events: none;
}

/* ─ টাইপ-পিল (রঙিন ডট, সেন্টার) ─ */
.type-row { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; margin: 10px 0 16px; }
.type-pill {
  font-family: inherit; font-size: .8em; font-weight: 700;
  padding: 6px 14px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid #e3ece6; background: #fff; color: #555; transition: .15s;
  display: inline-flex; align-items: center; gap: 6px;
}
.type-pill:active { transform: scale(.96); }
.type-pill .tp-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tp-live .tp-dot { background: #e74c3c; }
.tp-exam .tp-dot { background: var(--gold); }
.tp-record .tp-dot { background: #7c5cd0; }
.type-pill.active { color: #fff; border-color: transparent; }
.tp-all.active { background: var(--green); }
.tp-live.active { background: #e74c3c; }
.tp-exam.active { background: var(--gold); color: #3a2a06; }
.tp-record.active { background: #7c5cd0; }
.type-pill.active .tp-dot { background: rgba(255,255,255,.9); }

/* টাইপ-ডট — কোর্স-নামের আগে রঙিন বৃত্ত (সব জায়গায় এক চেনা ইশারা; টাইপ-পিলের ডটের সাথে এক রঙ) */
.bt-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0; margin-right: 7px; vertical-align: middle;
}
.bt-dot-live { background: #e74c3c; }
.bt-dot-exam { background: var(--gold); }
.bt-dot-record { background: #7c5cd0; }

/* টাইপ-আইকন-স্কয়ার — bt-dot-এর বদলে ড্যাশবোর্ডের কোর্স-লিস্টে (হোমপেজ hc-ic-এর ছোট
   সংস্করণ, একই রং-কনভেনশন) */
.bt-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 7px;
  flex-shrink: 0; margin-right: 2px;
}
.bt-ic-live   { background: #fdecea; color: #e74c3c; }
.bt-ic-exam   { background: #faf3e6; color: var(--gold); }
.bt-ic-record { background: #f4ecf9; color: #7c3aed; }

/* ─ কোর্স কার্ড (অনুভূমিক থাম্ব-কলাম, বন্ধুর ২০২৬-০৮-০৪ মকআপ #১ — আগের উল্লম্ব
   অ্যাকসেন্ট-বর্ডার স্ট্যাকের বদলে): বাঁয়ে পূর্ণ-উচ্চতার থাম্ব (ছবি/টাইপ-আইকন) + নিচে
   টাইপ-ব্যাজ, ডানে নাম → মেট্রিক → ভর্তি-সংখ্যা → ডিভাইডার → দাম+বোতাম।
   বাঁ-ধারের অ্যাকসেন্ট-রং টাইপ-কনভেনশনে আগের মতোই। */
.hcourse-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.hcard {
  display: flex; align-items: stretch; gap: 12px; background: #fff;
  border: 1px solid #eef2f7; border-left: 4px solid var(--gray-mid);
  border-radius: 14px; padding: 11px 13px; cursor: pointer; transition: .15s;
  box-shadow: 0 2px 10px rgba(20,35,70,.06);
  color: inherit; text-decoration: none; /* কার্ড এখন <a> — লিংকের ডিফল্ট সাজ বাতিল */
}
.hcard:active { transform: scale(.99); }
.hcard:hover { box-shadow: 0 6px 18px rgba(20,35,70,.10); border-color: #dde3ec; }
.hcard:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.hcard.hta-live   { border-left-color: var(--green); }
.hcard.hta-exam   { border-left-color: var(--gold); }
.hcard.hta-record { border-left-color: #7c3aed; }

/* বাঁ থাম্ব-কলাম — কার্ডের পূর্ণ উচ্চতা, ৮৮px চওড়া। ছবি object-fit:cover দিয়ে বসে,
   অর্থাৎ ১৬:৯ ছবির **মাঝের খাড়া অংশটুকুই** দেখা যায় (দুই পাশ কাটা পড়ে)। */
/* overflow:hidden দেওয়া যায় না — রিবনটা কোণা পেরিয়ে ভাসে; তাই ছবি/ব্যাজ নিজেরাই
   কোণা গোল করে নেয় (border-radius: inherit) */
.hc-thumb {
  position: relative; flex: 0 0 88px; width: 88px; min-height: 92px;
  display: flex; flex-direction: column; justify-content: flex-end;
  border-radius: 11px; border: 1px solid transparent;
}
.hta-live   .hc-thumb { background: #e9eff8; border-color: #d8e2f2; color: var(--green); }
.hta-exam   .hc-thumb { background: #faf3e6; border-color: #f0e3c6; color: var(--gold); }
.hta-record .hc-thumb { background: #f4ecf9; border-color: #e6d8f3; color: #7c3aed; }
/* ছবি আইকনের উপরে বসে; onerror-এ সরে গেলে নিচের আইকনই দেখা যায় */
.hc-thumb-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: inherit;
}
.hc-thumb-ic { flex: 1; display: flex; align-items: center; justify-content: center; }

/* ডান বডি-কলাম — উপরের সারিতে নাম (বাঁয়ে) + ভর্তি-সংখ্যা পিল (ডানে) */
.hc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.hc-name {
  font-size: .95em; font-weight: 800; color: #1e293b; line-height: 1.3; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hc-body.bare .hc-head { margin-top: auto; margin-bottom: auto; } /* মেট্রিক-হীন কার্ডে নাম মাঝখানে */
/* ভর্তি-সংখ্যা — থাম্বের নিচে পুরো-চওড়া বার (আগে টাইপ-ব্যাজ যেমন ছিল ঠিক তেমন),
   পিল নয়; রংও টাইপ-কনভেনশনেই */
.hc-enroll {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  font-size: .6em; font-weight: 800; letter-spacing: .3px;
  padding: 4px 3px; text-align: center;
  border-radius: 0 0 10px 10px; /* থাম্বে overflow:hidden নেই, তাই নিজেই কোণা গোল করে */
}
.hta-live   .hc-enroll { background: #fdeeee; color: #c0392b; }
.hta-exam   .hc-enroll { background: #f6ead0; color: #8a6712; }
.hta-record .hc-enroll { background: #ece0f6; color: #6d28d9; }
.hc-metrics {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
  font-size: .75em; color: var(--gray-mid); font-weight: 500; margin-top: 5px;
}
.hc-metric-item { display: inline-flex; align-items: center; gap: 3px; }
/* মেট্রিক-আইকনে আলাদা রং (বন্ধুর নির্দেশ) — সবই ব্র্যান্ড-প্যালেটের, নতুন রং নয় */
.mi-class .svic { color: #7c3aed; }   /* ক্লাস — রেকর্ডেড-বেগুনি */
.mi-sheet .svic { color: var(--gold); }/* শিট — গোল্ড */
.mi-exam  .svic { color: var(--success); } /* পরীক্ষা — সবুজ */
.hc-metric-sep { opacity: .5; }

/* নিচের সারি — দাম/স্ট্যাটাস (বাঁয়ে) + বোতাম (ডানে); mt:auto দিয়ে কার্ডের তলায় বসে */
.hc-bottom {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
  border-top: 1px solid #f1f5f9; padding-top: 8px; margin-top: auto;
}
.hc-price-col { min-width: 0; }
.hc-price-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hc-price { font-size: 1.1em; font-weight: 800; color: #1e293b; line-height: 1; }
.hc-price-old { font-size: .7em; color: #9aa6a0; text-decoration: line-through; }
/* ছাড়-চিপ — কাটা-দামের ঠিক পাশে (বন্ধুর নির্দেশ) */
.hc-off {
  font-size: .62em; font-weight: 800; color: #fff; background: #e74c3c;
  padding: 1px 6px; border-radius: 999px; white-space: nowrap;
}
.hc-enr {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .85em; font-weight: 700;
  background: #e7f3ec; color: var(--success);
  border: 1px solid #cfe6d8; padding: 4px 10px; border-radius: 6px;
}
.hc-enr.wait {
  background: #fdf6e7; color: #8a6712;
  border: 1px solid #ecd9a8;
}
/* <span> (কার্ড নিজেই <a>, তাই ভেতরে <button> নয়) — দেখতে বোতামের মতোই */
.hc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: .78em; font-weight: 700; white-space: nowrap;
  padding: 9px 16px; border-radius: 10px; border: 0; cursor: pointer; flex-shrink: 0;
  color: #fff; background: linear-gradient(135deg, #1a3a6b, #122a52);
}
.hc-btn-gold { background: linear-gradient(135deg, #e0a52e, #c9922a); color: #3a2a06; }
.hc-btn:active { transform: scale(.97); }

/* ─ পরিসংখ্যান ৪ কার্ড — হরাইজন্টাল: আইকন বাঁয়ে, ডানে সংখ্যা(উপরে)+নাম(নিচে) — খাটো কার্ড ─ */
.stat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 18px; }
.stat-card {
  display: grid; grid-template-columns: auto 1fr; column-gap: 7px; align-items: center;
  background: #fff; border: 1px solid #f1f5f9; border-radius: 14px;
  padding: 9px 7px; text-align: left; box-shadow: 0 1px 3px rgba(0,0,0,.03);
}
.stat-card .stat-ic {
  grid-row: 1 / 3; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(26,58,107,.05); color: var(--green);
}
.stat-card .stat-ic .svic { width: 16px; height: 16px; }
.stat-card b { display: block; font-size: .92em; font-weight: 700; color: var(--green); line-height: 1.15; }
.stat-card span { display: block; font-size: .6em; font-weight: 500; color: var(--gray-mid); line-height: 1.3; }

/* ─ ডেস্কটপ: সব পেজ .container-এর একই ৮৪০px (base) — কনসিস্টেন্ট প্রস্থ (বন্ধুর ফিডব্যাক);
   পিল content-প্রস্থ (full-bleed স্ট্রেচ রোধ) ─ */
@media (min-width: 1000px) {
  /* width:100% জরুরি — margin:auto থাকলে flex-item stretch বন্ধ হয়ে content-প্রস্থে সরু হয় */
  /* 808 = container-এর 840 − বাঁ-ডান padding 16+16 — ভেতরের কনটেন্টের সমান প্রস্থ */
  .home-hero { width: 100%; max-width: 808px; margin: 16px auto 8px; }
  .hh-cta { justify-content: flex-start; max-width: 560px; }
  .hh-pill { flex: 0 1 auto; min-width: 200px; }
  /* minmax(0,1fr) — নইলে কার্ডের min-content গ্রিডকে container ছাড়িয়ে চওড়া করে */
  .hcourse-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ─── কোর্স-পেজ হিরো-কার্ড — container-প্রস্থ জুড়ে (নিজের ডিফল্ট max-width/margin বাতিল) ─── */
@media (min-width: 700px) {
  body.course-page .course-hero-card { max-width: none; margin-left: 0; margin-right: 0; }
}

/* ─ ফ্রি-ক্লাস মডাল ─ */
.fc-overlay {
  position: fixed; inset: 0; z-index: 200; display: flex;
  align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .2s;
}
.fc-overlay.open { opacity: 1; }
.fc-dim { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.fc-modal {
  position: relative; background: #fff; width: 100%; max-width: 560px;
  border-radius: 18px 18px 0 0; max-height: 88vh; display: flex; flex-direction: column;
  transform: translateY(14px); transition: transform .2s;
}
.fc-overlay.open .fc-modal { transform: translateY(0); }
.fc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px; border-bottom: 1px solid var(--border);
}
.fc-head b { font-size: 1.02em; color: var(--green); }
.fc-x { background: none; border: 0; font-size: 1.1em; cursor: pointer; color: #888; padding: 4px 8px; }
.fc-body { padding: 14px 16px 20px; overflow-y: auto; }
@media (min-width: 600px) {
  .fc-overlay { align-items: center; }
  .fc-modal { border-radius: 18px; }
}

/* ─ ফ্রি-ক্লাস পেজ (free-classes.html) — গ্রুপ-ওয়াইজ সেকশন ─ */
.fcp-top { display: flex; align-items: center; gap: 12px; margin: 6px 0 4px; }
.fcp-back { text-decoration: none; color: var(--green); font-weight: 700; font-size: .92em; flex-shrink: 0; }
.fcp-title { font-size: 1.18em; font-weight: 700; color: var(--green); }
.fcp-group { margin-top: 18px; }
.fcp-group-title {
  font-weight: 700; color: var(--green); font-size: 1.02em; margin-bottom: 9px;
  padding-bottom: 6px; border-bottom: 2px solid #e3ece6; display: flex; align-items: center; gap: 7px;
}
.fcp-cnt {
  font-size: .72em; font-weight: 700; color: #8a6410; background: #fbf2dd;
  border-radius: 10px; padding: 1px 8px;
}

/* ─ পেইজ-কন্টেন্ট কম্প্যাক্ট তালিকা-সম্পাদক (admin/pages — freeVideos) ─ */
.pg-item-compact {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 8px;
  background: #f2f5fa; border: 1px solid #dbe1ea; border-radius: 9px; padding: 7px 8px;
}
.pg-cf {
  flex: 0 0 auto; width: 120px; padding: 7px 9px; border: 1.5px solid var(--border);
  border-radius: 8px; font-family: inherit; font-size: .9em; background: #fff; min-width: 0;
}
.pg-cf.grow { flex: 1 1 170px; }
.pg-cf:focus { outline: none; border-color: var(--green); }

/* ─ ডেমো পেজ — গ্রুপ-সেকশন শিরোনাম ─ */
.dm-grp-title {
  font-weight: 700; color: var(--green); font-size: .98em; margin: 16px 0 8px;
  padding-bottom: 5px; border-bottom: 2px solid #e3ece6;
}

/* ─ ☰ ড্রয়ার — প্রোফাইল-রো (উপরে) + লগআউট (নিচে) ─ */
.nd-profile { border-bottom: 1px solid #eef2f6; }
.nd-profile-row { display: flex; align-items: center; padding: 14px 14px 14px 18px; }
.nd-profile-link {
  display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0;
  text-decoration: none; color: #222;
}
.nd-edit-btn {
  flex-shrink: 0; padding: 8px; margin: -8px; border-radius: 8px; text-decoration: none;
  font-size: 1.05em; line-height: 1;
}
.nd-edit-btn:hover { background: #eef2f8; }
.nd-av {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
  background: #e5ecf8; color: var(--green); display: flex; align-items: center; justify-content: center;
}
.nd-av img { width: 100%; height: 100%; object-fit: cover; }
.nd-profile-info { flex: 1; min-width: 0; }
.nd-profile-info b { display: block; font-size: .96em; }
.nd-profile-info small { display: block; font-size: .76em; color: var(--gray-mid); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-login-btn { margin: 14px 18px; width: calc(100% - 36px); }
.nd-logout-wrap { padding: 4px 18px 0; }
.nd-logout-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 0;
  background: none; border: none; border-top: 1px solid #eef2f6; cursor: pointer;
  font-family: inherit; font-size: .92em; font-weight: 700; color: #c0392b;
}
.nd-logout-btn:hover { color: #962d22; }

/* ─── কোর্স-পেজ হেডার পুনর্গঠন: ভর্তি-সংখ্যা-বক্স + ক্লাস/শিট-পরীক্ষা-লাইভ আইকন-সারি
   (দামের বদলে — দাম এখন স্টিকি-বারেই); ইন্সট্রাক্টর-ক্যারৌসেল ─── */
.cd-enroll-box {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: #e9eff8; border: 1px solid #d9e2f0; color: var(--green);
  border-radius: 10px; padding: 6px 10px; margin-bottom: 8px;
  font-size: .85em; font-weight: 700;
}
.course-metrics-row {
  display: flex; justify-content: center; gap: 7px; margin-bottom: 10px;
}
/* flex:1 1 0 + max-width = ৩টা থাকলে সমান-প্রস্থে এক লাইন; ২টা হলে max-width-এ আটকে
   row-কেন্দ্রে (একপাশে চওড়া-প্যাড নয়); justify-content:center ভেতরের আইকন+লেখা মাঝে রাখে। */
.cm-card {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: 10px; padding: 7px 9px; flex: 1 1 0; min-width: 0; max-width: 150px;
}
/* প্রতিটা মেট্রিকের আলাদা রং — দুটো কার্ড আর একই রঙের নয় (বন্ধুর ফিডব্যাক) */
.cm-card.cm-purple { background: #efe9fb; color: #7c5cd0; }
.cm-card.cm-gold   { background: #fbf1e0; color: var(--gold); }
.cm-card.cm-green  { background: #e3f3e8; color: var(--success); }
.cm-card.cm-blue   { background: #e7eef8; color: var(--blue); }
.cm-card .svic { flex-shrink: 0; }
.cm-text { display: flex; flex-direction: column; line-height: 1.2; }
/* সংখ্যা গাঢ় নিউট্রাল — কার্ড-রঙের সাথে আর সংঘর্ষ করে না (আগে সব কার্ডে নীল ছিল) */
.cm-val { font-size: 1.05em; font-weight: 800; color: #283142; }
.cm-lbl { font-size: .72em; color: var(--gray-mid); }

/* ইন্সট্রাক্টর — একজন হোক বা একাধিক, একই "প্রোফাইল-রো" লেআউট (ছবি বামে + ডানে নাম/পদবী/
   প্রতিষ্ঠান স্ট্যাক্ড) — তাই একজন থাকলেও ডান পাশ ফাঁকা লাগে না। একাধিক হলে পুরো-প্রস্থ
   স্লাইড হিসেবে scroll-snap দিয়ে ডান থেকে সোয়াইপ করে দেখা যায়; নিচে ডট-ইন্ডিকেটর। */
.instr-slider {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; border-radius: 12px;
}
.instr-slider::-webkit-scrollbar { display: none; }
.instr-slide {
  flex: 0 0 100%; scroll-snap-align: start; box-sizing: border-box;
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 14px;
}
.instr-photo {
  flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%; overflow: hidden;
}
.instr-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block; border: 2px solid #e9eff8;
  border-radius: 50%; box-sizing: border-box;
}
.instr-noimg {
  width: 100%; height: 100%; border-radius: 50%; background: #e9eff8; color: var(--green);
  display: flex; align-items: center; justify-content: center;
}
.instr-info { flex: 1; min-width: 0; }
.instr-name { font-weight: 800; font-size: 1em; color: var(--blue); line-height: 1.35; }
.instr-title { font-size: .82em; color: #3a4a63; margin-top: 2px; line-height: 1.3; }
.instr-inst { font-size: .76em; color: var(--gray-mid); margin-top: 1px; line-height: 1.3; }
.instr-dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.instr-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--border); cursor: pointer;
  transition: all .15s;
}
.instr-dot.active { width: 16px; border-radius: 4px; background: var(--green); }

/* ─── ভর্তি-ছাত্রের কোর্স-ড্যাশ: টাইপ-ভিত্তিক হিরো + অগ্রগতি + করণীয়-কার্ড ─── */
.cd-dash-hero { padding-bottom: 14px; }
.cdh-top { display: flex; align-items: center; gap: 8px; }
.cdh-about-btn {
  margin-left: auto; font-family: inherit; font-size: .76em; font-weight: 700; color: #fff;
  background: rgba(255,255,255,.16); border: none; padding: 5px 11px; border-radius: 999px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
}
.cdh-caret { display: inline-block; transition: transform .15s; }
.cdh-about-btn.open .cdh-caret { transform: rotate(180deg); }
.cdh-about-body {
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; margin: -4px 0 12px;
}
.cdh-prog { margin-top: 6px; }
.cdh-prog-top { display: flex; justify-content: space-between; font-size: .76em; color: rgba(255,255,255,.9); margin-bottom: 5px; }
.cdh-prog-track { height: 6px; background: rgba(255,255,255,.22); border-radius: 999px; overflow: hidden; }
.cdh-prog-fill { height: 100%; background: var(--gold); border-radius: 999px; }

/* ট্যাবে আইকন+লেখা এক সারিতে (ইমোজি নয়, SVG) */
.cd-tab { display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px; }
.cd-tab .svic { flex-shrink: 0; }

/* ─── হিরোর নিচে "যোগ দিন" কার্ড (সিক্রেট গ্রুপ FB/WA + জুম) ─── */
.cd-join-card { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.cd-join-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  flex: 1 1 auto; min-width: 90px; background: #fff; border: 1px solid var(--border);
  border-radius: 10px; padding: 9px 12px; font-size: .84em; font-weight: 700;
  color: var(--blue); text-decoration: none;
}
.cd-join-btn.cd-join-zoom { background: #eef4ff; border-color: rgba(26,58,107,.2); }
.cd-join-meta { font-size: .8em; color: var(--gray-mid); margin: 2px 0 10px; }

/* ─── ফ্রি/লক কনটেন্ট-তালিকা (PDF শিট / ভিডিও) — বাম আইকন · শিরোনাম · ডানে লক-আইকন ─── */
.cc-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; }
.cc-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 12px 13px;
  text-decoration: none; color: var(--blue); font-weight: 700; font-size: .9em;
  font-family: inherit; cursor: pointer;
}
.cc-item:hover { border-color: var(--border-strong, #cdd6cf); background: #fafdfb; }
.cc-item .cc-ic { display: flex; flex-shrink: 0; }
.cc-ic-sheet { color: var(--gold); }
.cc-ic-video { color: #d6453d; }
.cc-tt { flex: 1; min-width: 0; line-height: 1.35; }
.cc-right { display: flex; flex-shrink: 0; color: var(--gray-mid); margin-left: auto; }
/* লক রো — পুরো ধূসর (আইকন+লেখা মিউট), ব্যাকগ্রাউন্ডও হালকা */
.cc-item.locked { background: #f5f6f5; border-color: #e8eae8; color: var(--gray-mid); }
.cc-item.locked .cc-ic { color: #b3b8b3; }
.cc-item.locked[data-lock] { cursor: pointer; }
.cc-note {
  font-size: .82em; color: #8a6d1a; background: #fdf6e3; border: 1px solid #f0e0ad;
  border-radius: 8px; padding: 7px 10px; margin-bottom: 8px;
  font-family: inherit; width: 100%; text-align: left; display: block;
}
.cc-note-link {
  display: flex; align-items: center; text-decoration: none; font-weight: 700; cursor: pointer;
}
.cc-note-link:hover { border-color: #e0c67a; }
.cc-note-pill {
  display: inline-block; margin-left: 4px; padding: 3px 13px; border-radius: 999px;
  background: var(--gold); color: #fff; font-weight: 700; font-size: .92em;
  text-decoration: none; cursor: pointer; border: none; font-family: inherit; vertical-align: middle;
}
.cc-note-pill:hover { background: #b98420; }

/* ─── শিট-আপগ্রেড মোডাল (bottom-sheet, .fc-* ধাঁচে) ─── */
.shu-overlay {
  position: fixed; inset: 0; z-index: 400; display: flex;
  align-items: flex-end; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.shu-overlay.open { opacity: 1; pointer-events: auto; }
.shu-dim { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.shu-modal {
  position: relative; background: #fff; width: 100%; max-width: 480px;
  border-radius: 18px 18px 0 0; max-height: 90vh; overflow-y: auto;
  transform: translateY(14px); transition: transform .2s;
}
.shu-overlay.open .shu-modal { transform: translateY(0); }
.shu-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px; border-bottom: 1px solid var(--border);
}
.shu-head b { font-size: 1.02em; color: var(--green); }
.shu-x { background: none; border: 0; font-size: 1.1em; cursor: pointer; color: #888; padding: 4px 8px; }
.shu-body { padding: 14px 18px 20px; }
.shu-amount {
  text-align: center; background: #f0f4f1; border-radius: 10px; padding: 12px; margin-bottom: 12px;
}
.shu-amount small { display: block; color: var(--gray-mid); font-size: .8em; margin-bottom: 2px; }
.shu-amount b { font-size: 1.6em; color: var(--green); }
@media (min-width: 600px) {
  .shu-overlay { align-items: center; }
  .shu-modal { border-radius: 18px; }
}

/* ─── স্টুডেন্ট হাব-ড্যাশ v3 (সবুজ হিরো + ইসলামিক প্যাটার্ন + ভাসমান স্ট্যাট) ─── */
.dash-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1a3a6b, #122a52);
  border-radius: 18px;
  padding: 18px 16px 42px;      /* নিচে বাড়তি — স্ট্যাট-কার্ড ওভারল্যাপ করবে */
  color: #fff;
  margin: 10px 0 0;
  /* block + float (আগে flex ছিল) — ছবি ডানে ভাসে, নাম তার পাশে, তথ্য-সারিগুলো
     ছবির নিচ দিয়ে পুরো প্রস্থ পায়। ফোনে বড়-ফন্ট সেটিং থাকলেও ইমেইল/প্রতিষ্ঠান
     আর ভেঙে যায় না। overflow:hidden float-টাকে ভেতরে ধরে রাখে। */
  display: block;
}
.dh-pattern {
  position: absolute; top: 0; right: 0;
  width: 68%; height: 100%;
  pointer-events: none;
  z-index: 0;
}
.dh-id { min-width: 0; position: relative; z-index: 1; }
/* রঙ-সিস্টেম: সোনালি = অলংকরণ (নাম/আইকন/ফ্রেম/জাল) · সাদা = তথ্য · সবুজ+সাদা = অ্যাকশন */
/* নাম — লম্বা হলে সর্বোচ্চ ২ লাইন, তারপর "…" (আগে যত ইচ্ছা লাইন ভেঙে কার্ড লম্বা করে দিত) */
.dh-name {
  font-size: 1.12em; font-weight: 700; line-height: 1.35; margin: 0 0 6px; color: #f2ca6e;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
/* block — প্রতিটা সারি নিজে flex (BFC), তাই ছবির পাশে থাকলে সরু হয়, নিচে গেলে পুরো প্রস্থ */
.dh-metas { display: block; }
.dh-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: .72em; color: rgba(255,255,255,.88); line-height: 1.45;
  min-width: 0; margin-bottom: 4px;
}
.dh-meta:last-child { margin-bottom: 0; }
/* প্রতিটা তথ্য-সারি এক লাইনে — না ধরলে শেষে "…" (আগে ইমেইল মাঝখান থেকে ভেঙে
   "gmail.c / om" হয়ে যেত); পুরোটা দেখতে title/ট্যাপ-টুলটিপ */
.dh-meta > span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dh-meta .svic { flex-shrink: 0; color: #f0c96a; }
.dh-joined { color: rgba(255,255,255,.68); }
.dh-joined .svic { color: rgba(240,201,106,.7); }
/* z-index: 2 — .dh-id (z-index:1) DOM-এ পরে আসে, আর float-এর পাশের ব্লক-বক্স
   ছবির জায়গাটুকুও ঢেকে রাখে; সমান z-index হলে .dh-id উপরে এসে ✏️-ব্যাজ ও
   ছবিতে ট্যাপ খেয়ে ফেলত (২০২৬-০৭-২৬ বাগ — সম্পাদনা/ছবি-বদল কাজই করত না) */
.dh-avwrap { position: relative; float: right; margin: 0 0 6px 12px; z-index: 2; }
.dh-av {
  width: 78px; height: 78px;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  border: 2.5px solid #f0c96a;    /* সোনালি ফ্রেম — জাল+নামের সাথে এক সুর */
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.3em;
  overflow: hidden; cursor: pointer;
}
.dh-av .dh-av-inner {
  display: flex; width: 100%; height: 100%;
  align-items: center; justify-content: center;
}
.dh-av img { width: 100%; height: 100%; object-fit: cover; }
.dh-av.uploading { opacity: .5; }
.dh-edit-badge {
  position: absolute; right: -2px; bottom: -2px;
  width: 28px; height: 28px; border-radius: 50%;
  background: #fff; color: var(--green);
  border: 1.5px solid var(--green);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 5px rgba(0,0,0,.25);
}
.dh-edit-badge:hover { background: #e5ecf8; }
/* ভাসমান ৩ স্ট্যাট-কার্ড — হিরোর নিচে ওভারল্যাপ, সবসময় এক লাইনে */
.dh-statwrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: -28px 8px 16px;
  position: relative;
}
.dh3-stat {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 13px;
  box-shadow: 0 3px 12px rgba(0,0,0,.08);
  padding: 9px 8px;
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
}
.dh3-sic {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dh3-c-green { background: #e3f3e8; color: var(--success); }
.dh3-c-blue  { background: #e7eef8; color: var(--blue); }
.dh3-c-gold  { background: #fbf0d8; color: var(--gold); }
.dh3-txt { min-width: 0; line-height: 1.2; }
.dh3-txt b { display: block; font-size: 1.08em; color: #2a2a2a; }
.dh3-txt small { display: block; font-size: .66em; color: var(--gray-mid); }
/* ছোট ফোনে (≤৩৮০px) ছবি একটু ছোট + প্যাডিং কম — নাম/ইমেইলের জন্য বাড়তি জায়গা */
@media (max-width: 380px) {
  .dash-hero { padding: 16px 13px 42px; gap: 10px; }
  .dh-av { width: 66px; height: 66px; font-size: 1.15em; }
  .dh-name { font-size: 1.05em; }
}

/* সেকশন-হেড: বাঁয়ে টাইটেল, ডানে "সব দেখুন" */
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sec-head .section-title { margin-bottom: 10px; }
.sec-link {
  font-size: .8em; font-weight: 700; color: var(--green);
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
}
.sec-link:hover { text-decoration: underline; }

/* কোর্স-কার্ড (থাম্বনেইল নয় — নাম + স্ট্যাটস + প্রগ্রেস + বোতাম) */
.crs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.crs-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  padding: 13px 14px;
  display: flex; flex-direction: column; gap: 9px;
}
/* উপর: নাম (বাঁয়ে) + র‍্যাঙ্ক-ব্যাজ (ডানে) */
.crs-top { display: flex; align-items: flex-start; gap: 8px; }
.crs-name {
  flex: 1; min-width: 0;
  font-weight: 700; font-size: .95em; color: var(--blue);
  line-height: 1.4;
  display: flex; align-items: center; gap: 6px;
}
.crs-rank {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 3px;
  background: #fbf0d8; color: #9a6f16;
  border-radius: 20px; padding: 2px 9px;
  font-size: .72em; font-weight: 700; white-space: nowrap;
}
.crs-rank small { font-size: .82em; opacity: .7; font-weight: 600; }
.crs-rank .svic { color: var(--gold); }
.crs-free-badge {
  flex-shrink: 0;
  background: #e3f3ea; color: var(--success);
  border-radius: 20px; padding: 2px 8px;
  font-size: .68em; font-weight: 700;
}
/* নিচ: স্ট্যাটস/প্রগ্রেস (বাঁয়ে) + বোতাম (ডানে) */
.crs-mid { display: flex; align-items: flex-end; gap: 10px; }
.crs-midtx { flex: 1; min-width: 0; }
.crs-stats { font-size: .76em; color: var(--gray-mid); font-weight: 600; }
.crs-bar {
  height: 6px; background: #eef2ef; border-radius: 10px; overflow: hidden; margin-top: 6px;
}
.crs-bar > div { height: 100%; background: var(--green); border-radius: 10px; }
.crs-go {
  flex-shrink: 0;
  background: var(--green); color: #fff;
  border-radius: 9px; padding: 8px 15px;
  font-size: .82em; font-weight: 700;
  text-decoration: none; white-space: nowrap;
}
.crs-go:hover { background: var(--green-dk, #122a52); }
.crs-go-line { background: #eef1f7; color: var(--gray-mid); }
.crs-go-gold { background: var(--gold); color: #fff; }

/* "যেখানে শেষ করেছেন" — বিঘ্নিত পরীক্ষা */
.r2-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  padding: 13px 15px;
  margin-bottom: 14px;
}
.r2-head { font-weight: 700; font-size: .92em; color: var(--blue); margin-bottom: 9px; }
.r2-head small { font-weight: 400; color: var(--gray-mid); font-size: .78em; }
.r2-row { display: flex; align-items: center; gap: 11px; }
.r2-ic {
  width: 40px; height: 40px; border-radius: 11px;
  background: #fdf3e0; color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.r2-info { flex: 1; min-width: 0; }
.r2-info b { display: block; font-size: .88em; color: #333; line-height: 1.4; }
.r2-info small { color: var(--gray-mid); font-size: .74em; }
.r2-bar {
  display: block; height: 6px; background: #eef2ef;
  border-radius: 10px; overflow: hidden; margin-top: 5px;
}
.r2-bar span { display: block; height: 100%; background: var(--green); border-radius: 10px; }

/* সেকশন-টাইটেল/কার্ডে ইনলাইন SVG আইকন (সেকশন-ভেদে রঙ) */
.st-ic { display: inline-flex; vertical-align: -4px; margin-right: 3px; color: var(--green); }
.st-c-green { color: var(--success); }
.st-c-blue  { color: var(--blue); }
.st-c-gold  { color: var(--gold); }
.st-c-red   { color: var(--red); }
.notice-title .st-ic { color: #c9922a; }
.section-title small { font-weight: 400; opacity: .7; }

/* লাইভ-পরীক্ষা টাইটেলের pulse-ডট */
.live-sec-title { color: var(--red); display: flex; align-items: center; gap: 8px; }
.live-pulse-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 3px rgba(176,0,32,.18);
  animation: lpd 1.4s infinite;
  flex-shrink: 0;
}
@keyframes lpd { 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .live-pulse-dot { animation: none; } }
.resume-card .rc-ic { display: flex; color: var(--gold); }

/* সামনে যা আছে — টাইমলাইন */
.timeline { position: relative; padding-left: 20px; }
.timeline::before {
  content: ''; position: absolute; left: 6px; top: 6px; bottom: 8px;
  width: 2px; background: #d7e0d9;
}
.tl-item {
  position: relative;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.05);
  padding: 10px 13px; margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.tl-item .tl-dot {
  position: absolute; left: -18px; top: 50%; transform: translateY(-50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gray-mid); border: 2px solid var(--bg);
}
.tl-item.tl-t-live   .tl-dot { background: #e74c3c; }
.tl-item.tl-t-exam   .tl-dot { background: var(--gold); }
.tl-item.tl-t-record .tl-dot { background: #7c3aed; }
.tl-item .bt-ic { margin-right: 0; }
.tl-item .tl-body { flex: 1; min-width: 0; }
.tl-item .tl-when { font-size: .74em; font-weight: 700; color: var(--gold); }
.tl-item .tl-name { font-size: .9em; font-weight: 700; color: var(--blue); line-height: 1.4; margin-top: 1px; }
.tl-item .tl-course { font-weight: 400; color: var(--gray-mid); font-size: .8em; margin-top: 2px; }

/* ফ্রি কোর্স তালিকা */
.fc-invite-label {
  font-size: .82em; font-weight: 700; color: var(--gray-mid);
  margin: 14px 0 8px;
}
.fc-list {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.fc-row {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 14px;
  text-decoration: none; color: var(--blue);
}
.fc-row + .fc-row { border-top: 1px solid #eef0ec; }
.fc-row:hover { background: #f4f8f5; }
.fc-name {
  flex: 1; min-width: 0;
  font-weight: 700; font-size: .92em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ঘোষণা-কার্ড — সাদা কার্ডে, সোনালি স্পিকার-বৃত্ত */
#dashNotice.notice-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
#dashNotice .notice-title { color: var(--blue); display: flex; align-items: center; gap: 8px; }
#dashNotice .notice-title .st-ic {
  width: 32px; height: 32px; border-radius: 50%;
  background: #fdf3e0; color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  margin: 0; vertical-align: baseline;
}

/* পারফরম্যান্স: ডোনাট + সারাংশ */
.perf-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.perf-donut {
  width: 78px; height: 78px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.perf-donut > div {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--card-bg);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--green);
}
.perf-sum { flex: 1; min-width: 0; }
.perf-sum b { display: block; font-size: .95em; color: var(--blue); }
.perf-sum small { color: var(--gray-mid); font-size: .8em; }
.perf-dots { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.perf-dots .pd-lbl { font-size: .7em; color: var(--gray-mid); flex-shrink: 0; }

/* কুইক অ্যাকসেস টাইল (রঙিন আইকন-বর্গ + লেবেল) */
.qa-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.qa-tile {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 13px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  padding: 12px 11px;
  cursor: pointer; font-family: inherit; text-align: left;
  display: flex; align-items: center; gap: 9px;
  min-width: 0;
  transition: box-shadow .15s;
}
.qa-tile:hover { box-shadow: 0 4px 14px rgba(0,0,0,.1); }
.qa-tic {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.qa-tic-routine { background: #e5ecf8; color: var(--green); }
.qa-tic-sheet   { background: #fdf3e0; color: var(--gold); }
.qa-tic-class   { background: #fdecea; color: #d6453d; }
.qa-tic-archive { background: #e9eff8; color: var(--blue); }
.qa-ttx { min-width: 0; }
.qa-ttx b { display: block; font-size: .8em; color: #333; line-height: 1.3; }
.qa-ttx small { font-size: .66em; color: var(--gray-mid); line-height: 1.3; display: block; }
@media (max-width: 560px) {
  .qa-grid { grid-template-columns: repeat(2, 1fr); }
}

/* কুইক-অ্যাকসেস ব্যাচ-পিকার (bottom-sheet) */
.qa-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 600;
  display: flex; align-items: flex-end; justify-content: center;
}
.qa-sheet {
  background: var(--card-bg);
  border-radius: 16px 16px 0 0;
  padding: 16px;
  width: 100%; max-width: 520px;
  max-height: 70vh; overflow-y: auto;
}
.qa-sheet-title { font-weight: 700; color: var(--green); margin-bottom: 10px; font-size: .95em; }
.qa-batch {
  display: flex; align-items: center; gap: 9px;
  width: 100%; text-align: left;
  background: #f2f6fb;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer; font-family: inherit;
  font-size: .92em; font-weight: 700; color: var(--blue);
}
.qa-batch:hover { background: #eef5f0; }

/* ═══════════════════════════════════════════════════════════════
   কমিউনিটি V4 — বন্ধুর দেওয়া মকআপ (React/Tailwind) অনুযায়ী কাঠামো+
   ইন্টারঅ্যাকশন রিস্কিন। cq- প্রিফিক্স (cm- আগে থেকেই course.js-এর
   ছোট স্ট্যাট-কার্ডে ব্যবহৃত)। ফন্ট ও সবুজ — সাইটের ডিফল্ট (Noto Serif
   Bengali, var(--green)); বাকি অ্যাকসেন্ট (rose/amber/blue/slate-gray)
   মকআপ-অনুযায়ী। হেডার/বটম-নেভ শেয়ার্ড বলে অপরিবর্তিত।
   ═══════════════════════════════════════════════════════════════ */

/* ─── তালিকা-হেডার ─── */
.cq-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0 14px; }
.cq-head-title {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 1.15em; font-weight: 700; color: #122a52;
}
/* প্রশ্ন-ফিল্টার-ভিউতে "সব পোস্ট দেখুন" — মূল শিরোনামের চেয়ে ছোট/হালকা, আলাদা অ্যাকশন বোঝায় */
.cq-clear-qfilter {
  font-size: .6em; font-weight: 600; color: var(--gray-mid);
  text-decoration: none; border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 10px; white-space: nowrap;
}
.cq-clear-qfilter:hover { color: var(--green); border-color: var(--green); }

/* প্রশ্ন-প্রসঙ্গ-কার্ড — সাধারণ পোস্ট-কার্ড থেকে আলাদা বোঝাতে হালকা-নীল বর্ডার (তালিকা-ভিউয়ের
   প্রশ্ন-ফিল্টার cqQuestionContext, পোস্ট-বিস্তারিত cqDetailQuestionContext, ও অ্যাডমিন-
   মডারেশন প্যানেল — তিন জায়গাতেই একই .cq-qctx ক্লাস, তাই id-স্কোপ না রেখে সাধারণ করা হলো) */
.cq-qctx {
  border-color: var(--blue); background: #f6f8fd; margin-bottom: 14px;
}
.cq-qctx .opt { cursor: default; }
.cq-qctx .opt:active { transform: none; }
.cq-newpost-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--green); color: #fff; border: none;
  padding: 10px 17px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: .86em; font-weight: 700;
  box-shadow: 0 3px 10px rgba(26,58,107,.22);
}
.cq-newpost-btn:hover { background: #122a52; }
.cq-newpost-btn:active { transform: scale(.97); }
.cq-head-actions { display: flex; align-items: center; gap: 8px; }
.cq-iconbtn2 {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 50%;
  background: #eef2f6; color: #64748b; border: none; cursor: pointer;
}
.cq-iconbtn2:hover { background: #e2e8f0; }
.cq-iconbtn2.active { background: var(--green); color: #fff; }
.cq-search-bar {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1.5px solid #cfdad2; border-radius: 12px;
  padding: 9px 12px; margin: -6px 0 14px; color: #64748b;
}
.cq-search-bar:focus-within { border-color: var(--green); }
.cq-search-bar input {
  flex: 1; border: none; outline: none; background: none;
  font-family: inherit; font-size: .92em; color: #1e293b;
}
.cq-search-bar input::placeholder { color: #94a3b8; }
.cq-search-bar .cq-iconbtn { width: 26px; height: 26px; font-size: .95em; }

/* ─── অ্যাভাটার (ছবি বা আদ্যক্ষর) — sm/md/lg, সব কার্ডে শেয়ার্ড ─── */
.cq-av {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: #e2e8f0; color: #475569; font-weight: 700;
  border: 1px solid #e2e8f0;
}
.cq-av img { width: 100%; height: 100%; object-fit: cover; }
.cq-av-sm { width: 34px; height: 34px; font-size: .74em; }
.cq-av-md { width: 40px; height: 40px; font-size: .82em; }
.cq-av-lg { width: 46px; height: 46px; font-size: .9em; }
.cq-av-brand { background: var(--green); color: #fff; border-color: var(--green); }

/* ─── প্রশ্ন/পোস্ট-কার্ড (তালিকা) ─── */
.cq-card {
  background: #fff; border: 1px solid #f1f5f9; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  padding: 16px; margin-bottom: 14px; cursor: pointer;
}
.cq-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.07); }
.cq-card-top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.cq-card-who { display: flex; flex-direction: column; gap: 0; min-width: 0; flex: 1; line-height: 1.2; }
.cq-author { font-size: .92em; font-weight: 700; color: #1e293b; line-height: 1.25; }
.cq-author.sm { font-size: .86em; }
.cq-meta { font-size: .68em; color: #94a3b8; font-weight: 600; line-height: 1.25; }
.cq-badge { font-size: .68em; font-weight: 700; padding: 2px 9px; border-radius: 20px; flex-shrink: 0; }
.cq-badge.bad { background: #fff1f2; color: #e11d48; }
.cq-badge.warn { background: #fff7ed; color: #c2703d; }
.cq-reject-note {
  font-size: .82em; line-height: 1.5; padding: 8px 12px; border-radius: 9px;
  margin: 0 0 12px; background: #fff1f2; color: #9f1239;
}
.cq-reject-note.pending { background: #fff7ed; color: #9a5b26; }
.cq-card-body { font-size: .92em; color: #1e293b; line-height: 1.65; }
.cq-card-img { border-radius: 12px; overflow: hidden; border: 1px solid #f1f5f9; margin-top: 10px; }
.cq-card-img img { display: block; width: 100%; height: 160px; object-fit: cover; }
.cq-card-foot {
  display: flex; align-items: center;
  border-top: 1px solid #f8fafc; margin-top: 12px; padding-top: 11px;
}

/* লাইক/মন্তব্য-বোতামের জোড়া — কিনারার কাছাকাছি কিন্তু একদম কিনারায় না
   (~14%/86% পজিশন): প্রশস্ত বক্স সেন্টার্ড করে ভেতরে space-between দিয়ে */
.cq-foot-actions { display: flex; align-items: center; justify-content: space-between; width: 72%; margin: 0 auto; }

/* লাইক/মন্তব্য-সংখ্যা বোতাম (তালিকা+হিরো+রিপ্লাই শেয়ার্ড; ইংরেজি ডিজিট, bnNum নয়) */
.cq-actbtn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: inherit; font-size: .86em; font-weight: 600; color: #64748b;
}
.cq-actbtn:hover { color: var(--green); }
.cq-actbtn.active { color: var(--green); }
.cq-actbtn.static { cursor: default; }
.cq-actbtn.static:hover { color: #64748b; }
.cq-actbtn.sm { font-size: .78em; gap: 5px; }
.cq-actbtn.lg { font-size: .68em; gap: 5px; color: #94a3b8; font-weight: 600; }
.cq-actbtn.lg:hover, .cq-actbtn.lg.active { color: var(--green); }
.cq-actbtn:disabled { opacity: .55; cursor: default; }

/* ─── ⋮ কেবাব-মেনু (আইকনসহ, own/other/admin অনুযায়ী ভিন্ন আইটেম) ─── */
.cq-kebab { position: relative; margin-left: auto; flex-shrink: 0; }
.cq-kebab-btn {
  font-family: inherit; font-size: 1.15em; line-height: 1; color: #94a3b8;
  background: none; border: none; cursor: pointer; padding: 5px 9px; border-radius: 50%;
}
.cq-kebab-btn:hover { background: #f1f5f9; color: #334155; }
.cq-kebab-btn.horiz { font-size: .8em; letter-spacing: 1px; font-weight: 900; }
.cq-kebab-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  background: #fff; border: 1px solid #f1f5f9; border-radius: 12px;
  box-shadow: 0 8px 26px rgba(15,23,42,.14); min-width: 175px; padding: 6px; overflow: hidden;
}
.cq-mi {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  font-family: inherit; font-size: .86em; font-weight: 600; padding: 9px 11px;
  cursor: pointer; background: none; border: none; border-radius: 8px; color: #334155;
}
.cq-mi:hover { background: #f8fafc; }
.cq-mi.danger { color: #e11d48; }
.cq-mi.danger:hover { background: #fff1f2; }
.cq-mi-divider { height: 1px; background: #f1f5f9; margin: 5px 4px; }

/* ─── বিস্তারিত-ভিউ: ফুল-স্ক্রিন প্যানেল (ফিক্সড হেডার+ফিক্সড রিপ্লাই-বার) ─── */
.cq-detail-panel {
  display: none; position: fixed; inset: 0; z-index: 400;
  background: #f8fafc; flex-direction: column;
}
.cq-detail-head, .cq-compose-head {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  background: #fff; padding: 13px 14px; border-bottom: 1px solid #f1f5f9;
}
.cq-iconbtn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: none; border: none; color: #475569; cursor: pointer; font-size: 1.2em; line-height: 1;
}
.cq-iconbtn:hover { background: #f1f5f9; }
.cq-compose-title { flex: 1; font-weight: 700; font-size: 1.02em; color: #1e293b; }
.cq-detail-body { flex: 1; overflow-y: auto; padding: 0 0 20px; }

/* প্রশ্ন = হিরো (সাদা, উপরে ছবি ছাড়া বড়-বোল্ড লেখা; ছবি থাকলে নরমাল+ছবি) */
.cq-hero { background: linear-gradient(#e5ecf810, #fff); padding: 18px 16px; border-bottom: 1px solid #f1f5f9; margin-bottom: 10px; }
.cq-hero-top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.cq-hero-who { display: flex; flex-direction: column; gap: 0; min-width: 0; flex: 1; line-height: 1.2; }
.cq-hero-body { color: #0f172a; line-height: 1.7; margin-bottom: 14px; }
.cq-hero-body.big { font-size: 1.22em; font-weight: 700; }
.cq-hero-body.normal { font-size: .96em; font-weight: 400; }
.cq-postimg {
  display: block; width: 100%; max-height: 340px; object-fit: cover;
  border-radius: 12px; border: 1px solid #e2e8f0; margin-bottom: 14px;
}
.cq-hero-foot { display: flex; align-items: center; border-top: 1px solid #f1f5f9; padding-top: 14px; }

/* উত্তর = মন্তব্যসমূহ */
.cq-replies-wrap { padding: 0 14px; }
.cq-replies-title { font-size: .88em; font-weight: 700; color: #475569; margin: 4px 0 10px 2px; }
.cq-reply-row {
  background: #fff; border: 1px solid #f1f5f9; border-radius: 16px;
  padding: 13px 15px; margin-bottom: 11px;
}
.cq-reply-row.admin { background: #f6fbf8; border-color: #cfe3d7; }
/* অবতার সরাসরি নাম+মন্তব্য-কলামের flex-sibling — মাঝে কোনো ফাঁকা row-height গ্যাপ নেই,
   অবতার লম্বা হলে নাম+মন্তব্য দুই লাইন জুড়েই পাশে দেখায় (ফেসবুক-স্টাইল)। */
.cq-reply-flex { display: flex; align-items: flex-start; gap: 8px; }
.cq-reply-col { flex: 1; min-width: 0; }
.cq-reply-top { display: flex; align-items: center; gap: 8px; margin-bottom: 1px; }
.cq-reply-who { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; line-height: 1.2; }
.cq-reply-body { font-size: .88em; color: #334155; line-height: 1.5; }
.cq-reply-foot { display: flex; gap: 16px; margin-top: 6px; }

/* ফেসবুক-স্টাইল থ্রেডেড রিপ্লাই — এক-স্তর নেস্টিং, ইনডেন্ট+বাম-বর্ডার (অবতার-প্রস্থ+গ্যাপ = 42px) */
.cq-reply-children { margin-left: 42px; margin-top: 8px; padding-left: 12px; border-left: 2px solid #f1f5f9; }
.cq-reply-children .cq-reply-row { margin-bottom: 8px; }
.cq-inline-reply-slot:empty { display: none; }
.cq-inline-reply-box { display: flex; align-items: flex-end; gap: 8px; margin: 10px 0 4px 42px; }
.cq-inline-reply-ta {
  flex: 1; min-width: 0; font-family: inherit; font-size: .86em;
  border: 1px solid #e2e8f0; border-radius: 16px; padding: 8px 13px;
  color: #1e293b; resize: none; background: #f8fafc; line-height: 1.5;
}
.cq-inline-reply-ta:focus { outline: none; border-color: var(--green); background: #fff; }
.cq-sendbtn.sm { width: 32px; height: 32px; flex-shrink: 0; }

/* অ্যাডমিন-মন্তব্য: ব্যক্তির নাম নয়, ব্র্যান্ড-পরিচয় */
.cq-reply-brand { font-size: .86em; font-weight: 700; color: var(--green); }
.cq-official {
  display: inline-flex; align-items: center; gap: 2px;
  background: #fffbeb; color: #b45309;
  font-size: .82em; font-weight: 700; padding: 1px 8px; border-radius: 20px; margin-left: 4px;
}

/* ইনলাইন মন্তব্য-এডিট (কেবাব → এডিট করুন) */
.cq-edit-ta {
  width: 100%; min-height: 60px; font-family: inherit; font-size: .9em;
  border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 10px;
  color: #1e293b; resize: vertical; line-height: 1.6;
}
.cq-edit-ta:focus { outline: none; border-color: var(--green); }
.cq-edit-actions { display: flex; gap: 8px; margin-top: 8px; }

/* ফিক্সড রিপ্লাই-বার (স্ক্রল করলেও নিচে স্থির) */
.cq-reply-bar {
  display: flex; align-items: flex-end; gap: 8px; flex-shrink: 0;
  background: #fff; border-top: 1px solid #f1f5f9; padding: 10px 12px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
.cq-imgbtn.round {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: #f1f5f9; border: none; color: #64748b; cursor: pointer;
}
.cq-imgbtn.round:hover { background: #e2e8f0; color: var(--green); }
.cq-reply-ta {
  flex: 1; min-width: 0; font-family: inherit; font-size: .92em;
  border: 1px solid #e2e8f0; border-radius: 20px; padding: 10px 15px;
  color: #1e293b; resize: none; max-height: 90px; background: #f8fafc; line-height: 1.5;
}
.cq-reply-ta:focus { outline: none; border-color: var(--green); background: #fff; }
.cq-sendbtn {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--green); border: none; color: #fff; cursor: pointer;
}
.cq-sendbtn:hover { background: #122a52; }
.cq-sendbtn:disabled { opacity: .6; cursor: default; }

/* ─── নতুন-পোস্ট/এডিট: ফুল-স্ক্রিন কম্পোজার ─── */
.cq-compose-overlay { display: none; position: fixed; inset: 0; z-index: 500; background: #fff; flex-direction: column; }
.cq-postbtn {
  font-family: inherit; font-size: .84em; font-weight: 700;
  padding: 8px 18px; border-radius: 999px; cursor: pointer; border: none;
  background: var(--green); color: #fff; box-shadow: 0 3px 10px rgba(26,58,107,.22);
}
.cq-postbtn:hover { background: #122a52; }
.cq-postbtn.sm { padding: 6px 13px; font-size: .8em; box-shadow: none; }
.cq-cancelbtn {
  font-family: inherit; font-size: .8em; font-weight: 700;
  padding: 6px 13px; border-radius: 999px; cursor: pointer;
  background: #f1f5f9; color: #475569; border: none;
}
.cq-cancelbtn:hover { background: #e2e8f0; }
.cq-compose-body { flex: 1; overflow-y: auto; padding: 18px 16px; }
.cq-compose-who { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.cq-compose-whotxt { display: flex; flex-direction: column; gap: 4px; }
.cq-compose-whotxt b { font-size: .95em; color: #1e293b; }
.cq-open-badge {
  display: inline-flex; align-items: center; gap: 4px; width: max-content;
  background: #f1f5f9; color: #64748b;
  font-size: .74em; font-weight: 700; padding: 2px 9px; border-radius: 20px;
}
.cq-open-badge .svic { color: #64748b; }
.cq-compose-ta {
  width: 100%; min-height: 150px; font-family: inherit; font-size: 1.1em;
  border: none; outline: none; resize: none; color: #1e293b; line-height: 1.7;
  background: transparent;
}
.cq-compose-ta::placeholder { color: #94a3b8; }

/* ছবি-প্রিভিউ — কোণে ✕, বাড়তি বাটন নেই */
.cq-imgpreview { position: relative; display: inline-block; margin-top: 10px; max-width: 240px; }
.cq-imgpreview img { display: block; width: 100%; border-radius: 12px; border: 1px solid #e2e8f0; }
.cq-imgremove {
  position: absolute; top: -8px; right: -8px;
  width: 25px; height: 25px; border-radius: 50%;
  background: rgba(15,23,42,.75); color: #fff; border: 2px solid #fff;
  font-size: .78em; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.cq-imgremove:hover { background: rgba(15,23,42,.92); }

.cq-compose-toolbar { display: flex; padding: 12px 16px; border-top: 1px solid #f1f5f9; flex-shrink: 0; }
.cq-attachbtn {
  display: flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 11px 15px; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.04);
  font-family: inherit; font-size: .86em; font-weight: 600; color: #334155;
}
.cq-attachbtn:hover { border-color: #cfe3d7; background: #e5ecf8; }
.cq-attach-ic { display: inline-flex; }
.cq-attach-ic.blue { color: #3b82f6; }

/* কাস্টম কনফার্ম-ডায়ালগ (uiConfirm() — js/ui.js) — নেটিভ confirm()-এর বদলে,
   সব পেজে ব্যবহারযোগ্য (ছাত্র+অ্যাডমিন) */
.ui-confirm-overlay {
  position: fixed; inset: 0; z-index: 600; background: rgba(15,23,42,.45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.ui-confirm-box {
  background: #fff; border-radius: 16px; padding: 20px; max-width: 320px; width: 100%;
  box-shadow: 0 12px 32px rgba(15,23,42,.2);
}
.ui-confirm-box p { margin: 0 0 16px; font-size: .94em; color: #1e293b; line-height: 1.5; }
.ui-confirm-ta {
  width: 100%; padding: 10px 12px; border: 1.5px solid #cfdad2; border-radius: 9px;
  font-family: inherit; font-size: .88em; background: #fff; resize: vertical;
  margin: -8px 0 14px;
}
.ui-confirm-ta:focus { outline: none; border-color: var(--green); }
.ui-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ═══ নোটিফিকেশন (হেডার-বেল + প্যানেল + পারমিশন-ব্যানার) ═══ */
.hdr-bell {
  background: none; border: none; cursor: pointer; line-height: 0; padding: 5px 7px;
  border-radius: 8px; display: inline-flex; align-items: center; color: var(--green);
  position: relative;
}
.hdr-bell:hover { background: #e5ecf8; }
.hdr-bell-dot {
  position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; padding: 0 3px;
  background: #d43f3f; color: #fff; border-radius: 9px; font-size: 10.5px; font-weight: 700;
  line-height: 16px; text-align: center; border: 1.5px solid #e9eff8;
}
/* কার্ড (বটম-শিট + পূর্ণ পেজ শেয়ার্ড) — --ntc/--ntb ক্যাটাগরি-রং (JS বসায়) */
.ntf-card {
  display: flex; gap: 10px; align-items: flex-start; position: relative;
  background: #fff; border: 1px solid #e7ebe7; border-left: 4px solid var(--ntc, #5a6a78);
  border-radius: 12px; padding: 11px 12px; cursor: pointer;
}
.ntf-card.unread { background: #f3f7fc; }
.ntf-cic {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--ntb, #eef1f4); color: var(--ntc, #5a6a78);
}
.ntf-main { flex: 1; min-width: 0; }
.ntf-title { font-weight: 700; font-size: .92em; color: #23392c; }
.ntf-batch {
  display: inline-block; font-size: .72em; font-weight: 700; color: var(--ntc, #5a6a78);
  background: var(--ntb, #eef1f4); border-radius: 6px; padding: 1px 7px;
  margin-left: 6px; vertical-align: middle;
}
.ntf-body {
  font-size: .84em; color: #5a6a60; margin-top: 2px; white-space: pre-line;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ntf-card.expanded .ntf-body { -webkit-line-clamp: unset; }
.ntf-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 6px; flex-wrap: wrap;
}
.ntf-time { font-size: .76em; color: #93a29a; display: inline-flex; align-items: center; gap: 4px; }
.ntf-cta {
  font-size: .78em; font-weight: 700; color: #fff; background: var(--ntc, #5a6a78);
  padding: 4px 11px; border-radius: 8px; white-space: nowrap;
}
.ntf-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #2563eb;
  margin-top: 5px; flex: 0 0 auto; display: none;
}
.ntf-card.unread .ntf-dot { display: block; }

/* বেল-ড্রপডাউন — বেলের ঠিক নিচে-ডানে খোলে (বটম-শিট নয়; বেল উপরে থাকলে
   নিচ থেকে প্যানেল ওঠাটা বিচ্ছিন্ন/অড লাগে — তাই যেখানে ট্যাপ করা হলো
   তার কাছাকাছি থেকেই খোলে, ডেস্কটপ+মোবাইল দুটোতেই একই আচরণ)। */
.ntf-sheet-ov { position: fixed; inset: 0; z-index: 260; pointer-events: none; }
.ntf-sheet-ov.open { pointer-events: auto; }
.ntf-sheet-dim { position: absolute; inset: 0; background: transparent; }
.ntf-sheet {
  position: absolute; top: 58px; right: 8px; left: auto; bottom: auto;
  width: min(380px, calc(100vw - 16px)); background: #fff;
  border-radius: 14px; padding: 8px 10px 6px; max-height: 70vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid #e2e8e4; box-shadow: 0 10px 30px rgba(20, 40, 30, .18);
  opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: top right;
  transition: opacity .16s ease, transform .16s ease;
}
.ntf-sheet-ov.open .ntf-sheet { opacity: 1; transform: none; }
.ntf-sheet-head {
  display: flex; align-items: center; gap: 7px; font-weight: 700;
  color: var(--green); padding: 4px 2px 2px;
}
.ntf-sheet-all {
  display: block; text-align: center; padding: 10px; margin-top: 2px;
  color: #1a3a6b; font-weight: 700; font-size: .9em; text-decoration: none;
  border-top: 1px solid #eef2ef;
}

/* পূর্ণ পেজ — হেড/গ্রুপ-লেবেল/সোয়াইপ/ইঙ্গিত */
.ntf-page-head { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 12px; }
.ntf-mark-all {
  background: none; border: none; color: #1a3a6b; font-weight: 700;
  cursor: pointer; font-size: .86em; padding: 6px; font-family: inherit;
}
.ntf-group { font-weight: 700; color: #6b7770; font-size: .84em; margin: 14px 2px 8px; }
.ntf-swipe { position: relative; margin-bottom: 8px; }
.ntf-swipe .ntf-card { position: relative; z-index: 1; }
.ntf-sw-bg {
  position: absolute; inset: 0; border-radius: 12px; display: flex; align-items: center;
  justify-content: space-between; padding: 0 16px; font-size: .84em; font-weight: 700; color: #fff;
}
.ntf-swipe.sw-r .ntf-sw-bg { background: var(--green); }
.ntf-swipe.sw-l .ntf-sw-bg { background: #d43f3f; }
.ntf-sw-bg .sw-read, .ntf-sw-bg .sw-del { opacity: 0; }
.ntf-swipe.sw-r .sw-read { opacity: 1; }
.ntf-swipe.sw-l .sw-del { opacity: 1; }
.ntf-swipe-hint { text-align: center; color: #93a29a; font-size: .8em; margin: 14px 0 6px; }

/* খালি অবস্থা */
.ntf-empty { text-align: center; padding: 40px 16px; color: #6b7770; font-size: .92em; }
.ntf-empty-ic { font-size: 44px; margin-bottom: 10px; }
.ntf-empty b { display: block; color: #3a4a40; margin-bottom: 4px; }
.notif-ask {
  position: fixed; left: 10px; right: 10px; bottom: 74px; z-index: 240;
  background: #1a3a6b; color: #fff; border-radius: 14px; padding: 12px 14px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  box-shadow: 0 8px 24px rgba(10, 25, 50, .3);
}
.notif-ask-txt { flex: 1 1 220px; font-size: .88em; line-height: 1.5; }
.notif-ask-btns { display: flex; gap: 8px; }
@media (min-width: 641px) {
  .notif-ask { left: auto; right: 20px; bottom: 20px; max-width: 420px; }
}
/* অ্যাডমিন: পাঠানো নোটিফিকেশনের তালিকা-রো */
.ntf-adm-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border: 1px solid #e8ece8; border-radius: 9px; margin-bottom: 7px;
  font-size: .9em;
}
.ntf-adm-row small { display: block; color: #8a978f; }

/* ─── ক্যাটাগরি প্রিসেট-আইকন (SVG, ইমোজির বদলে) — রঙ প্রিসেট-নির্ভর, পজিশন-নির্ভর নয় ───
   .sc-ic (courses.html বিষয়-কার্ড) / .cat-mini-ic (অ্যাডমিন-লিস্ট) / .cic-opt (অ্যাডমিন-পিকার)
   তিনটাতেই একই ৬-রঙ প্যালেট — সাইটের green/blue/gold-এর সাথে +teal/purple/maroon। */
.sc-ic.cic-green, .cat-mini-ic.cic-green, .cic-opt.cic-green, .stat-ic.cic-green { background: #e8f5ee; color: var(--success); }
.sc-ic.cic-blue, .cat-mini-ic.cic-blue, .cic-opt.cic-blue, .stat-ic.cic-blue { background: #e7eef9; color: var(--blue); }
.sc-ic.cic-gold, .cat-mini-ic.cic-gold, .cic-opt.cic-gold, .stat-ic.cic-gold { background: var(--gold-soft); color: var(--gold); }
.sc-ic.cic-purple, .cat-mini-ic.cic-purple, .cic-opt.cic-purple, .stat-ic.cic-purple { background: #efeafa; color: #6b3fa0; }
.sc-ic.cic-maroon, .cat-mini-ic.cic-maroon, .cic-opt.cic-maroon, .stat-ic.cic-maroon { background: #faeaee; color: #8a2e3f; }
.sc-ic.cic-teal, .cat-mini-ic.cic-teal, .cic-opt.cic-teal, .stat-ic.cic-teal { background: #e1f5ee; color: #0f6e56; }

.cat-mini-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 7px; margin-right: 6px; vertical-align: -6px;
  background: #eef2f6; color: #6b7a94; font-size: .85em;
}
.cic-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.cic-opt {
  width: 38px; height: 38px; border-radius: 10px; border: 1.5px solid transparent;
  background: #eef2f6; color: #6b7a94; display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.cic-opt.active { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(26,58,107,.15); }

/* ── CSV ইনলাইন-এডিট প্রিভিউ টেবিল (questions.js / question-bank.js) ── */
.csv-edit-wrap { overflow-x: auto; border: 1px solid var(--border, #dde3e8); border-radius: 10px; margin-top: 8px; }
.csv-edit-table { width: 100%; border-collapse: collapse; font-size: .82em; }
.csv-edit-table th, .csv-edit-table td { border: 1px solid #e5e9ee; padding: 5px 6px; vertical-align: top; }
.csv-edit-table th { background: #f6f7f9; color: var(--blue, #1a3a6b); position: sticky; top: 0; }
.csv-edit-table textarea, .csv-edit-table select, .csv-edit-table input {
  width: 100%; min-width: 90px; font-family: inherit; font-size: 1em; padding: 4px 6px;
  border: 1px solid #dde3e8; border-radius: 6px; resize: vertical;
}
.csv-edit-row.err { background: #fbeaec; }
.csv-edit-row.dup { background: #fdf6e7; }
.csv-row-status { font-size: .78em; white-space: nowrap; }
.csv-row-status.err { color: var(--red, #c0392b); }
.csv-row-status.dup { color: #8a6712; }
.csv-row-status.ok { color: var(--success, #1a6b3c); }

/* ── পাস/ফেল ফলাফল-ব্যানার (result.js/exam.js শেয়ার — resultBannerHtml, ui.js) ── */
.result-banner { border-radius: 14px; padding: 22px 18px; text-align: center; color: #fff; margin-bottom: 14px; }
.result-banner .rb-emoji { font-size: 2.2em; line-height: 1; }
.result-banner .rb-score { font-size: 1.7em; font-weight: 700; margin-top: 6px; }
.result-banner .rb-headline { font-weight: 700; font-size: 1.05em; margin-top: 6px; }
.result-banner .rb-sub { font-size: .85em; opacity: .92; margin-top: 6px; line-height: 1.6; }
.result-banner.pass { background: linear-gradient(135deg, var(--success), #2d9e5f); }
.result-banner.close { background: linear-gradient(135deg, var(--gold), #e6aa48); }
.result-banner.fail { background: linear-gradient(135deg, var(--red), #d9536a); }
.result-banner.practice { background: linear-gradient(135deg, var(--blue), #2a5aa8); }

/* ── হোয়াটসঅ্যাপ শেয়ার বোতাম (result.html/exam.html) ── */
.btn-wa { background: #25d366; color: #fff; }

/* ── সাইট-ওয়াইড "এখন লাইভ পরীক্ষা চলছে" পপআপ (checkLiveExamNotice, ui.js) ── */
.lex-list { max-height: 50vh; overflow-y: auto; margin-top: 6px; }
.lex-row { display: flex; align-items: center; gap: 9px; padding: 8px 10px; background: #fdf3f3; border-radius: 9px; margin-bottom: 7px; }
.lex-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex-shrink: 0; animation: lexBlink 1.1s infinite; }
@keyframes lexBlink { 50% { opacity: .35; } }
.lex-name { font-weight: 600; font-size: .92em; }
.lex-batch { font-size: .78em; color: var(--gray-mid); margin-top: 1px; }

/* ── পরীক্ষা চলাকালীন অফলাইন-ইন্ডিকেটর (exam.html) ── */
#examOfflineBar {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  background: var(--red); color: #fff; padding: 8px 18px; border-radius: 20px;
  font-size: .85em; font-weight: 700; z-index: 500; box-shadow: 0 3px 14px rgba(0,0,0,.25);
  display: none;
}
#examOfflineBar.show { display: block; }

/* ── পরীক্ষায় উত্তর লক হয়ে গেলে (exam.js selectAns) ── */
.opt.locked { cursor: default; opacity: .92; pointer-events: none; }
.opt.locked:not(.sel) { opacity: .55; }

/* ── ফুলস্ক্রিন থেকে বেরিয়ে গেলে সতর্কতা (exam.js) ── */
#examFsWarn {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 600;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
#examFsWarn.show { display: flex; }
#examFsWarn .fs-box {
  background: #fff; border-radius: 14px; padding: 22px; max-width: 360px; width: 100%;
  text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,.3);
}
#examFsWarn .fs-box p { margin: 10px 0 16px; color: var(--gray-mid); font-size: .9em; line-height: 1.6; }

/* ── পরীক্ষা-স্ক্রিনে টেক্সট-সিলেকশন বন্ধ (কপি-ব্লক জাভাস্ক্রিপ্টের পরিপূরক) ── */
#screenQuiz { -webkit-user-select: none; user-select: none; }

/* ── লাইভ-ক্লাস রুটিন — তারিখ-ব্লক কার্ড (বন্ধুর মকআপ "Option 3", js/course.js loadLiveClassRoutine) ──
   বামে রঙিন তারিখ-ব্লক (দিন বড়/সোনালি, মাস-বছর, বার), মাঝে ক্লাস-নং+টপিক, ডানে ডিউরেশন+সময়।
   জোড়-অবস্থানের কার্ডে ব্লক সবুজ — মকআপের অল্টারনেটিং নেভি/সবুজ ধাঁচ। */
.lcr-card {
  position: relative;
  display: flex; align-items: flex-start; flex-wrap: wrap; gap: 10px;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 8px;
}
.lcr-date {
  flex-shrink: 0; width: 80px; border-radius: 10px; background: var(--blue); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 14px 4px; gap: 2px; min-height: 96px;
}
/* মিলিত-রুটিনে (loadCourseRoutine) টাইপ-ভেদে তারিখ-ব্লকের রং — ক্লাস=নেভি, পরীক্ষা=সবুজ
   (সবুজ ইতিমধ্যে সাইটজুড়ে "পরীক্ষা/সঠিক-উত্তর" সিমান্টিক, exam-row2 পিলেও একই ধাঁচ) */
.lcr-card.lcr-exam .lcr-date { background: var(--success); }
.lcr-day { font-size: 1.45em; font-weight: 800; color: var(--gold); line-height: 1.1; }
.lcr-my { font-size: .64em; opacity: .92; }
.lcr-wd { font-size: .7em; font-weight: 700; margin-top: 2px; }
.lcr-date-txt { font-size: .74em; font-weight: 700; padding: 8px 6px; }
.lcr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.lcr-name { font-weight: 800; font-size: .95em; }
.rt-subj { font-size: .78em; font-weight: 700; color: var(--green); margin-top: 1px; }
.lcr-topic { font-size: .84em; color: var(--blue); margin-top: 2px; }
.lcr-meta {
  flex-shrink: 0; display: flex; flex-direction: column; justify-content: center;
  gap: 4px; text-align: right; font-size: .78em; color: var(--gray-mid); font-weight: 700;
}
.lcr-meta-row { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }

/* ── অ্যাডমিন কোর্স-হাব (তালিকা → প্রতি-কোর্স ট্যাবড ভিউ — js/admin/courses.js) ── */
.crs-hub-head {
  background: #fff; border: 1px solid #dbe1ea; border-radius: 12px;
  padding: 12px 14px; margin-bottom: 10px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.crs-hub-title {
  font-weight: 800; color: var(--blue); font-size: 1.02em; flex: 1 1 100%; line-height: 1.4;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.crs-hub-title-text { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.crs-hub-id { font-weight: 400; color: #8a94a6; font-size: .82em; }
.crs-hub-del {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px; font-size: .95em; cursor: pointer;
  border: 1.5px solid var(--border); background: #fff; color: var(--red);
  font-family: inherit; transition: border-color .15s, background .15s;
}
.crs-hub-del:hover { border-color: var(--red); background: #fbeaec; }
.crs-hub-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; flex: 1; }
.crs-check { list-style: none; padding: 0; margin: 8px 0 0; }
.crs-check li {
  padding: 8px 11px; border: 1px solid #e5e9ee; border-radius: 8px; margin-bottom: 5px;
  font-size: .88em; background: #fff; display: flex; gap: 6px; align-items: center;
}
.crs-check li.ok { color: var(--green); background: #f3faf5; border-color: #d7ecdd; }
.crs-check li.no { color: #8a94a6; }
.crs-check li a { margin-left: auto; font-weight: 700; font-size: .92em; white-space: nowrap; }
.crs-savebar {
  position: sticky; bottom: 0; z-index: 5;
  background: rgba(240, 244, 241, .93); backdrop-filter: blur(4px);
  padding: 10px 0; margin-top: 10px; display: flex; gap: 8px;
  border-top: 1px solid #dde5df;
}

/* ─── পরীক্ষা/অনুশীলন শুরুর নিশ্চিতকরণ-স্ক্রিন — শিরোনাম-ব্যাজ + ২-কলাম আইকন-স্ট্যাট-কার্ড
   (বন্ধুর মকআপ) — .stat-cards/.stat-ic হোমপেজের কম্পোনেন্টই পুনর্ব্যবহার, cic-* প্যালেটও ─── */
.cf-badge {
  background: var(--blue); color: #fff; font-weight: 700; font-size: .92em;
  padding: 8px 14px; border-radius: 12px; margin-bottom: 12px; line-height: 1.4;
}
.stat-cards.cols-2 { grid-template-columns: repeat(2, 1fr); }
/* ক্যাটাগরি-চিপ (নিয়মিত/রিভিশন...) সবসময় প্রথমে — বিষয়-চিপ থেকে আলাদা বোঝাতে ভরাট */
.chip-cat { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ─── কোর্স-পেজ পরীক্ষা-তালিকা — দেওয়া+আর্কাইভ পরীক্ষায় স্কোর/উত্তরপত্র/অনুশীলন একসাথে ─── */
.exam-action-col { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.exam-btn-row { display: flex; gap: 6px; }

/* ─── exam-row2 — ভার্টিকাল-কার্ড লেআউট (Live MCQ archive-ধাঁচ, ২০২৬-০৭-১৫) ───
   তারিখ উপরে → নাম → মার্ক-ডিউরেশন → টপিক → পিল-বাটন সারি (রঙ-ভ্যারিয়েশন: সবুজ=মার্কশিট,
   আউটলাইন=উত্তরপত্র, সোনালি=অনুশীলন) */
.exam-row2 {
  position: relative;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 8px;
}
.exam-row2.is-live { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
/* "Upcoming" কর্নার-ব্যাজ — নির্ধারিত-কিন্তু-এখনো-লাইভ-হয়নি পরীক্ষা/ক্লাসের কার্ডে ওপরে-ডানে
   (exam-row2 ও lcr-card দুটোতেই শেয়ার্ড, js/course.js) — সময় নয়, শুধু স্ট্যাটাস-লেবেল।
   ইংরেজি টেক্সট (বন্ধুর নির্দেশ, ২০২৬-০৭-১৭: বাংলা প্রতিশব্দ বেখাপ্পা শোনালে ইংরেজিই রাখা হবে)। */
.card-upcoming-badge {
  position: absolute; top: -7px; right: 10px;
  background: var(--gold); color: #fff; font-size: .68em; font-weight: 700;
  padding: 3px 10px; border-radius: 10px; line-height: 1.3; z-index: 1;
}
/* তারিখ (বাঁয়ে) + মেরিট লিস্ট-পিল (ডানে, তারিখের পাশের খালি জায়গা পূরণ করে) — বন্ধুর
   নির্দেশ: পিল বাটন-বক্স স্টাইলেই থাকবে (খালি টেক্সট-লিংক নয়), তাই এখানে .btn সাইজ
   ছোট করে স্কোপ-করা (বাকি জায়গার .btn-sm/.btn অক্ষত) */
.exam-date-row { display: flex; justify-content: space-between; align-items: center; font-size: .74em; margin-bottom: 2px; }
.exam-date-row > span:first-child { color: var(--gray-mid); }
.exam-date-row .btn { padding: 3px 10px; font-size: .92em; border-radius: 12px; }
.exam-name2 { font-weight: 700; font-size: .94em; margin-bottom: 2px; }
/* পূর্ণমান (বাঁয়ে) + সময় (ডানে) — তারিখের চেয়ে একটু গাঢ়/জোরালো (হায়ারার্কি — এই দুটো
   তথ্য তারিখের চেয়ে বেশি গুরুত্বপূর্ণ, বন্ধুর ইঙ্গিতে রঙ-ভ্যারিয়েশন) */
.exam-subline-row { display: flex; justify-content: space-between; font-size: .78em; margin-bottom: 2px; }
.exam-subline-row span { color: #22314f; font-weight: 600; } /* body-র ডিফল্ট টেক্সট-কালার, --gray-mid-এর চেয়ে গাঢ় */
.exam-topic-wrap { margin-bottom: 2px; }
.exam-topic {
  font-size: .78em; color: var(--gray-mid);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.exam-topic.expanded { -webkit-line-clamp: unset; overflow: visible; }
.exam-topic-more {
  background: none; border: none; padding: 2px 0; margin-top: 1px;
  font-family: inherit; font-size: .76em; font-weight: 700; color: var(--green); cursor: pointer;
}
/* সমান-প্রস্থ পিল — flex:1 দিলে ২টা বা ৩টা যা-ই থাকুক, বাম-মাঝ-ডান সবসময় সমান দূরত্বে
   পুরো সারি জুড়ে ছড়িয়ে থাকে (বন্ধুর নির্দেশ) */
.exam-pills { display: flex; gap: 6px; margin-top: 8px; }
.exam-pills .btn { flex: 1; padding: 5px 8px; font-size: .78em; text-align: center; }

/* দ্রুত-ফল পিল — "পাশ" প্রথমে, হালকা-সবুজ হাইলাইট */
.stat-card-hl { background: #e7f3ec; border-color: var(--success); }
.stat-card-hl .stat-val { color: var(--success); }

/* কোর্স-ড্যাশের "এই কোর্সে আমার ফল" — ছোট আকার। বেস .stat-grid/.stat-card অন্য
   প্রসঙ্গের জন্য বড় বানানো (যেমন exam-confirm ২-কলাম মেটা) — cols-4 মডিফায়ার সরানোর
   পর এই বড় বেস-স্টাইলই সরাসরি লাগছিল, তাই "সব বড় বড় লাগছে" (বন্ধুর ২০২৬-০৭-১৫ ফিডব্যাক)। */
.stat-grid.compact { gap: 8px; margin-bottom: 10px; }
/* display:block+text-align:center স্পষ্ট করে লেখা — পাতায় আরেকটা অসম্পর্কিত .stat-card
   rule (হোমপেজ আইকন-স্ট্যাট, display:grid+text-align:left) পরে আসায় জিতে যাচ্ছিল,
   ফলে "পাশ"/"গড়"/"সর্বোচ্চ" লেখা মান-এর পাশে বাঁ-ঘেঁষা বসছিল, নিচে-কেন্দ্রে নয়
   (বন্ধুর ২০২৬-০৭-১৫ ফিডব্যাক) — দুই-ক্লাস সিলেক্টর দিয়ে জোরালো-ভাবে override */
.stat-grid.compact .stat-card { display: block; text-align: center; padding: 10px 6px; }
.stat-grid.compact .stat-val { font-size: 1.15em; }
.stat-grid.compact .stat-lbl { font-size: .68em; margin-top: 2px; }

/* এই ট্যাবের ক্যাটাগরি-ফিল্টার — .course-tab অন্য পাতায় (কোর্স-ক্যাটালগ) বড়-ই রাখা
   দরকার, তাই এখানে স্কোপ-করা ছোট সংস্করণ (বন্ধুর একই ফিডব্যাক) */
.exam-cat-tabs .course-tab { font-size: .8em; padding: 6px 12px; }

/* "এই কোর্সে আমার ফল" / "সব পরীক্ষা" শিরোনাম — .section-title সাইট-জুড়ে শেয়ার্ড
   (বড় রাখা দরকার অন্য পাতায়), তাই এখানে আলাদা ছোট মডিফায়ার (বন্ধুর ২০২৬-০৭-১৫ ফিডব্যাক) */
.section-title.exam-tab-title { font-size: .95em; margin: 16px 0 8px; padding-bottom: 4px; }

/* ─── পরীক্ষা-সামারি বক্স (Live MCQ-স্ক্রিনশট হুবহু, ২০২৬-০৭-১৫) — ২×২ গ্রিড
   (মোট-পরীক্ষার্থী/উত্তীর্ণ সবুজ, কাট-মার্ক/আপনার-মার্কস নীলচে) + নিচে অবস্থান-ব্যানার ─── */
.tsb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.tsb-box { border-radius: 10px; padding: 10px 12px; text-align: center; }
.tsb-box.tsb-green { background: #e7f3ec; }
.tsb-box.tsb-blue { background: #eef2fb; }
.tsb-lbl { font-size: .74em; color: var(--gray-mid); margin-bottom: 4px; }
.tsb-val { font-size: 1.3em; font-weight: 800; }
.tsb-box.tsb-green .tsb-val { color: var(--success); }
.tsb-box.tsb-blue .tsb-val { color: var(--blue); }
.tsb-rank { background: #e7f3ec; border-radius: 10px; padding: 12px; text-align: center; margin: 0 0 10px; }
.tsb-rank-lbl { font-size: .82em; color: var(--success); font-weight: 600; }
.tsb-rank-val { font-size: 1.5em; font-weight: 800; color: var(--success); margin-top: 2px; }

/* ফল-অপ্রকাশিত লাইভ-পরীক্ষায় rank-এর বদলে প্রকাশ-সময়ের ব্যানার (সোনালি — "অপেক্ষমান") */
.tsb-pending { background: #faf3e6; border-radius: 10px; padding: 12px; text-align: center; margin: 0 0 10px; }
.tsb-pending-lbl { font-size: .82em; color: #c9922a; font-weight: 600; }
.tsb-pending-val { font-size: 1.15em; font-weight: 800; color: #c9922a; margin-top: 2px; }

/* ─── স্কিপ-করা প্রশ্নের সঠিক-উত্তর — হালকা-হলুদ (miss), বেছে-নেওয়া সঠিক-উত্তরের
   হালকা-সবুজ (right) থেকে আলাদা — নইলে স্কিপ আর সঠিক-উত্তর একই রঙে গুলিয়ে যায় ─── */
.opt.miss { background: #fbf3d0; border-color: #e5d18b; color: #79600e; font-weight: 600; }
.opt.miss .opt-key { background: #fff; border-color: #e5d18b; color: #79600e; }

/* ─── উত্তরপত্র v2 — Live MCQ-অনুপ্রাণিত (২০২৬-০৭-১৫) ─── */
/* উত্তর/ব্যাখ্যা টগল-বাটন — পাশাপাশি এক লাইনে (বন্ধুর ফিডব্যাক), ইমোজি-হীন */
/* মোবাইলে ৪টা পিল (উত্তর/ব্যাখ্যা/সেভ/কমেন্ট) এক লাইনে ধরাতে ছোট প্যাডিং+ফন্ট
   (বন্ধুর ২০২৬-০৭-১৬ ফিডব্যাক — আগের সাইজে "কমেন্ট" পরের লাইনে চলে যাচ্ছিল)।
   সমান-প্রস্থ (flex:1) — ডানে ফাঁকা জায়গা না রেখে পুরো সারি জুড়ে ছড়ানো (বন্ধুর নির্দেশ,
   এক্সাম-কার্ডের পিল-সারির প্যাটার্নের মতোই) */
.rv-btn-row { display: flex; gap: 5px; margin-top: 10px; }
.rv-tgl {
  flex: 1; cursor: pointer; background: #fff; border: 1px solid var(--border);
  color: var(--green); border-radius: 7px; padding: 3px 6px; text-align: center;
  font-family: inherit; font-size: .72em; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.rv-tgl.active { background: #e7f3ec; border-color: var(--green); }
/* প্রশ্ন-ফেভারিট (❤️) — সেভ-করা অবস্থায় গোলাপি-ছোপ (sql/question-bookmarks.sql) */
.rv-tgl.rv-bookmark.saved { background: #fde8ec; border-color: #e88; color: #b0234a; }
.rv-tgl.rv-bookmark:disabled { opacity: .6; cursor: default; }
.rv-btn-row + .rv-expl { margin-top: 8px; }

/* sheet-মোডে সঠিক-উত্তর ডিফল্ট-লুকানো — "উত্তর দেখুন" টগলে rv-open হলে ফোটে */
.q-card.rv-open .opt.rv-ans { background: #d9efdd; border-color: #a9d9b4; color: #17603a; font-weight: 600; }
.q-card.rv-open .opt.rv-ans .opt-key { background: #fff; border-color: #a9d9b4; color: #17603a; }
.q-card.rv-open .opt.rv-ans::after { content: ' ✓'; }

/* উত্তরপত্র ফিল্টার-চিপ — সব/সঠিক/ভুল/বাদ */
.rv-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.rv-filter button {
  border: 1px solid var(--border); background: var(--card-bg); border-radius: 20px;
  padding: 5px 14px; font-family: inherit; font-size: .82em; font-weight: 600;
  color: var(--gray-mid); cursor: pointer;
}
.rv-filter button.active { background: var(--green); border-color: var(--green); color: #fff; }

/* বিষয়-ওয়াইজ মার্কশিট টেবিল */
.rv-subtable { width: 100%; border-collapse: collapse; font-size: .86em; margin: 4px 0 6px; }
.rv-subtable th, .rv-subtable td { border: 1px solid var(--border); padding: 6px 8px; text-align: center; }
.rv-subtable th:first-child, .rv-subtable td:first-child { text-align: start; }
.rv-subtable thead th { background: #e9eff8; color: var(--blue); font-weight: 700; }
.rv-subtable tfoot td { font-weight: 700; background: #f4f7fb; }

/* অপশন-পরিসংখ্যান % ব্যাজ */
.opt-pct {
  float: inline-end; font-size: .75em; font-weight: 700; color: var(--gray-mid);
  background: rgba(0,0,0,.06); border-radius: 10px; padding: 1px 8px; margin-inline-start: 6px;
}

/* ─── আর্কাইভ-তালিকা UX (Live MCQ-অনুপ্রাণিত, ২০২৬-০৭-১৫) ─── */
/* মাস-ডিভাইডার — "জুলাই ২০২৬ ———" */
.exam-month-div {
  display: flex; align-items: center; gap: 10px;
  color: var(--gray-mid); font-size: .8em; font-weight: 700; margin: 14px 0 6px;
}
.exam-month-div::before, .exam-month-div::after { content: ''; flex: 1; border-top: 1px solid var(--border); }

/* পরীক্ষা-তালিকার নাম-সার্চ */
.exam-search {
  width: 100%; box-sizing: border-box; margin: 8px 0 10px;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 7px 12px; font-family: inherit; font-size: .84em; color: inherit;
}
.exam-search:focus { outline: none; border-color: var(--green); }

/* অ্যাডমিন কোর্স-তালিকা — হেডারে আইকন-শুধু অ্যাকশন (নতুন/ক্যাটাগরি/প্রোমো), নাম ছাড়া */
.crs-hdr-actions { display: flex; gap: 6px; flex-shrink: 0; }
.crs-hdr-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  border: 1.5px solid var(--border); background: #fff; color: var(--text);
  font-size: 1.05em; line-height: 1; cursor: pointer; text-decoration: none;
  font-family: inherit; transition: border-color .15s, background .15s;
}
.crs-hdr-icon-btn:hover { border-color: var(--green); background: #f2f7f4; }

/* অ্যাডমিন কোর্স-তালিকা — ক্যাটাগরি-ওয়াইজ গ্রুপ-হেডার */
.crs-group-title {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--blue); font-size: .9em;
  margin: 16px 0 8px; padding-bottom: 6px; border-bottom: 1.5px solid var(--border);
}
.crs-group-title:first-child { margin-top: 0; }

/* অ্যাডমিন কোর্স-তালিকা — নাম-শুধু স্কয়ার কার্ড, প্রতি-ক্যাটাগরি অনুভূমিক-স্লাইড র‍্যাক
   (বন্ধুর নির্দেশ — স্ট্যাটাস/দাম/টাইপ কিছুই দেখাবে না, ট্যাপ করলেই খোলে) */
.crs-cat-row {
  display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 2px 2px 10px; margin-bottom: 4px; scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.crs-cat-row-wrap { flex-wrap: wrap; overflow-x: visible; }
.crs-sq-card {
  flex: 0 0 116px; width: 116px; height: 116px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; padding: 10px;
  border-radius: 14px; border: 1.5px solid var(--border); background: var(--card-bg);
  cursor: pointer; scroll-snap-align: start; user-select: none;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.crs-sq-card:hover { border-color: var(--green); box-shadow: 0 2px 8px rgba(0,0,0,.07); }
.crs-sq-card:active { transform: scale(.96); }
.crs-sq-name {
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
  overflow: hidden; text-align: center; font-weight: 700; font-size: .84em;
  line-height: 1.3; color: var(--text);
}

/* অ্যাডমিন পরীক্ষা-ফর্ম — সিলেবাস-টপিক চেকবক্স-চিপ (টিক দিলে উপরের টপিক-টেক্সটবক্সে
   লাইন যোগ হয়, একাধিক বাছাই করা যায়) */
.tf-topic-checks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tf-topic-chk {
  display: flex; align-items: center; gap: 5px; cursor: pointer;
  border: 1.5px solid var(--border); border-radius: 20px; padding: 5px 12px;
  font-size: .85em; background: #fff;
}
.tf-topic-chk input { width: auto; }
.tf-topic-chk:has(input:checked) { border-color: var(--green); background: #eaf5ee; color: var(--green); font-weight: 600; }

/* অ্যাডমিন কমিউনিটি-মডারেশন: প্রশ্ন-কার্ডের নিচে সঠিক-উত্তর+ব্যাখ্যা (admin-only) */
.cm-ansbox {
  margin-top: 8px; border-radius: 9px; padding: 8px 10px;
  background: #eaf5ee; border: 1.5px solid var(--success);
  font-size: .9em; line-height: 1.6; color: #1c3d2a;
}

/* কমিউনিটিতে অ্যাডমিন-only লেখক-লিংক (নামে ক্লিক → স্টুডেন্ট-ডিটেইল) */
a.cq-author-adm { text-decoration: none; cursor: pointer; border-bottom: 1px dashed var(--gold); }
a.cq-author-adm:hover { color: var(--gold); }
.cq-author-adm-i { font-size: .82em; margin-left: 3px; opacity: .75; }

/* অ্যাডমিন কোর্স → 🔐 কনটেন্ট ট্যাব: শিট ও ভিডিও সেকশন আলাদা করে চেনানো */
.pv-sec { margin-top: 14px; border-radius: 10px; padding: 10px 12px 12px; border: 1.5px solid var(--border); }
.pv-sec-head {
  display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: .95em;
  padding-bottom: 7px; margin-bottom: 8px; border-bottom: 1.5px solid var(--border);
}
.pv-sec-head small { font-weight: 500; font-size: .82em; opacity: .7; }
.pv-sec-sheet { background: #fdf7ea; border-color: #e7cf9a; }
.pv-sec-sheet .pv-sec-head { color: var(--gold); border-bottom-color: #e7cf9a; }
.pv-sec-video { background: #eef2f9; border-color: #c3d0e6; }
.pv-sec-video .pv-sec-head { color: var(--blue); border-bottom-color: #c3d0e6; }

/* অ্যাডমিন কোর্স-হাব → 🎓 শিক্ষার্থী ট্যাব */
.crs-stu-sum {
  background: #eef2f9; border: 1.5px solid #c3d0e6; color: var(--blue);
  border-radius: 9px; padding: 8px 11px; font-size: .92em; margin-bottom: 10px;
}
.crs-stu-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 4px; border-bottom: 1px solid var(--border);
}
.crs-stu-row:last-child { border-bottom: 0; }
.crs-stu-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.crs-stu-name { font-weight: 600; color: var(--blue); text-decoration: none; }
.crs-stu-name:hover { color: var(--gold); }
.crs-stu-meta { font-size: .84em; color: #666; }
.crs-stu-badges { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }

/* কোর্স-হাব: প্রি-এনরোল (নিবন্ধন-বাকি) অংশ + পেমেন্ট-পেজের কোর্স-ফিল্টার ব্যান্ড */
.crs-pre-sec {
  background: #fdf7ea; border: 1.5px solid #e7cf9a; border-radius: 10px;
  padding: 9px 11px; margin-bottom: 12px;
}
.crs-pre-head { font-weight: 700; color: var(--gold); font-size: .92em; }
.crs-pre-hint { font-size: .82em; color: #7a6428; margin: 3px 0 6px; }
.crs-stu-name.plain { color: #333; }
.pay-batch-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  background: #eef2f9; border: 1.5px solid #c3d0e6; color: var(--blue);
  border-radius: 9px; padding: 8px 11px; margin-bottom: 10px; font-size: .92em;
}

/* কোর্স-হাব "দ্রুত যাও"-এর নিচে সাইট-জুড়ে লিংক (পিল নয়, সাধারণ লিংক) */
.crs-quick-all { margin-top: 8px; font-size: .86em; }
.crs-quick-all a { color: #666; text-decoration: none; }
.crs-quick-all a:hover { color: var(--blue); }

/* ─── অ্যাডমিন পরীক্ষা-তালিকা: কোর্স-গ্রুপ + এক-লাইনের সারি + ট্যাপে ড্রয়ার ─── */
.tst-add {
  float: right; width: 30px; height: 30px; line-height: 1; font-size: 1.25em; font-weight: 700;
  border-radius: 9px; border: 1.5px solid var(--blue); background: var(--blue); color: #fff;
  cursor: pointer; padding: 0;
}
.tst-add:hover { background: var(--blue-dark, #122a52); }

/* কোর্স-ফোল্ডার (<details>) — বন্ধ অবস্থায় শুধু নাম+সংখ্যা, ট্যাপে খোলে */
.tst-group { margin-bottom: 8px; }
.tst-group-head {
  display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  font-weight: 700; color: var(--blue); font-size: .9em;
  background: #eef2f9; border: 1.5px solid #c3d0e6; border-radius: 10px;
  padding: 10px 12px;
}
.tst-group-head::-webkit-details-marker { display: none; }
.tst-group-head::after { content: '▾'; color: var(--gray-mid); font-size: .85em; transition: transform .15s; }
.tst-group[open] > .tst-group-head { border-radius: 10px 10px 0 0; }
.tst-group[open] > .tst-group-head::after { transform: rotate(180deg); }
.tst-group[open] > .tst-row {
  border-left: 1.5px solid #c3d0e6; border-right: 1.5px solid #c3d0e6;
  padding: 0 6px;
}
.tst-group[open] > .tst-row:last-child {
  border-bottom: 1.5px solid #c3d0e6; border-radius: 0 0 10px 10px;
}
.tst-group-n {
  margin-left: auto; font-size: .82em; font-weight: 600; color: var(--gray-mid);
  background: #fff; border-radius: 999px; padding: 1px 8px;
}

.tst-row { border-bottom: 1px solid var(--border); background: var(--card-bg); }
.tst-row:last-child { border-bottom: 0; }
.tst-row-main {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: none; border: 0; padding: 11px 4px; cursor: pointer; text-align: right;
  font: inherit; color: inherit;
}
.tst-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--gray-mid); }
.tst-dot.active   { background: var(--success, #1a6b3c); }
.tst-dot.archived { background: var(--gold); }
.tst-dot.inactive { background: #c9ced6; }
/* ডেমো-ব্যাজ — সরাসরি সারিতে (ড্রয়ার না খুলেই কোনগুলো ডেমো বোঝা যায়) */
.tst-demo-tag {
  flex: 0 0 auto; font-size: .72em; font-weight: 700; color: #8a6712;
  background: #fdf6e7; border: 1px solid var(--gold); border-radius: 999px;
  padding: 1px 7px;
}
.tst-name {
  flex: 1; min-width: 0; text-align: left; font-size: .93em; color: #222;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tst-q {
  flex: 0 0 auto; font-size: .78em; font-weight: 600; color: var(--gray-mid);
  background: #eef2f6; border-radius: 999px; padding: 1px 8px;
}
.tst-q.none { color: #b02020; background: #fdecec; }
.tst-chev { flex: 0 0 auto; color: var(--gray-mid); font-size: .8em; transition: transform .15s; }
.tst-row.open .tst-chev { transform: rotate(180deg); }
.tst-row.open .tst-name { font-weight: 700; color: var(--blue); }

.tst-drawer { display: none; padding: 2px 4px 12px; }
.tst-row.open .tst-drawer { display: block; }
.tst-drawer-meta { font-size: .8em; color: var(--gray-mid); margin-bottom: 7px; }
.tst-drawer-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }

/* ─── কোর্স ভিডিও-ট্যাব: ফিক্সড-টপ ক্লিন প্লেয়ার (নিজস্ব কন্ট্রোল) + থাম্বনেইল + দেখা-ট্র্যাকিং ───
   ভিডিও চললে body.cc-playing: হেডার লুকানো, প্লেয়ার viewport-এর একদম ওপরে পিন (.ccp-fix),
   নিচে তালিকা স্ক্রল; .ccp-spacer সমান-উচ্চতার ফাঁকা জায়গা রাখে যেন কনটেন্ট চাপা না পড়ে।
   YouTube-এ controls=0 + স্বচ্ছ ঢাল (.ccp-shield) — চ্যানেল-নাম/শেয়ার/cc ক্লিকই করা যায় না।
   কন্ট্রোল দুই স্তরে: (১) মাঝ-ওভারলে (.ccp-ovl) — আগের/±১০/প্লে-পজ/পরের, ভিডিওর ওপর
   ভাসে, ট্যাপে দেখা/লুকানো, চললে ৩সে পর অটো-ফেড (normal+ফুলস্ক্রিন একই আচরণ);
   (২) নিচের পাতলা বার (.ccp-seekrow) — সিক+সময়+CC+স্পিড+ফুলস্ক্রিন, সবসময় দৃশ্যমান।
   বন্ধ করার ✕ নেই ইচ্ছাকৃতভাবে — ব্যাক-বাটন/জেসচারই একমাত্র পথ। */
body.cc-playing #siteHeader { display: none; }
.ccp-fix { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 840px; z-index: 300; }
.ccp-box { display: flex; flex-direction: column; background: #000; border-radius: 0 0 14px 14px; overflow: hidden; box-shadow: 0 8px 26px rgba(0,0,0,.35); }
.ccp-box:fullscreen { max-width: none; border-radius: 0; }
.ccp-frame { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; }
.ccp-box:fullscreen .ccp-frame { aspect-ratio: auto; flex: 1; }
.ccp-frame iframe, .ccp-frame > div:first-child { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.ccp-shield { position: absolute; inset: 0; z-index: 1; background: transparent; border: none; padding: 0; cursor: pointer; }
.ccp-frame.paused .ccp-shield { background: rgba(4, 10, 22, .55); }

/* মাঝ-ওভারলে — আগের/±১০/প্লে-পজ/পরের, শিরোনাম */
.ccp-ovl { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 14px; pointer-events: none; transition: opacity .25s; }
.ccp-ovl button { pointer-events: auto; flex-shrink: 0; background: rgba(0,0,0,.45); border: none; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ccp-ovl .ccp-prev, .ccp-ovl .ccp-next { width: 38px; height: 38px; }
.ccp-ovl .ccp-r10, .ccp-ovl .ccp-f10 { width: 46px; height: 46px; }
.ccp-ovl .ccp-pp { width: 60px; height: 60px; background: rgba(0,0,0,.55); }
.ccp-ovl button:disabled { opacity: .3; cursor: default; }
.ccp-ovl-tt { position: absolute; top: 10px; left: 14px; right: 14px; z-index: 2; color: #fff; font-weight: 700; font-size: .84em; line-height: 1.3; text-shadow: 0 1px 5px rgba(0,0,0,.7); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: opacity .25s; pointer-events: none; }
.ccp-frame.ctl-hide .ccp-ovl, .ccp-frame.ctl-hide .ccp-ovl-tt { opacity: 0; pointer-events: none; }

/* নিচের পাতলা বার — সবসময় দৃশ্যমান, ওভারলের ফেডের সাথে সম্পর্কহীন */
.ccp-seekrow { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #10203c; }
/* সিক-বার: চিকন লাইন, টাচ/ড্র্যাগে বিন্দু বড় হয়; --p = খেলা-হওয়া অংশ (JS বসায়) */
.ccp-seek { flex: 1; min-width: 0; cursor: pointer; -webkit-appearance: none; appearance: none; height: 22px; background: transparent; }
.ccp-seek::-webkit-slider-runnable-track { height: 3px; border-radius: 99px; background: linear-gradient(to right, var(--gold) var(--p, 0%), rgba(255,255,255,.28) var(--p, 0%)); }
.ccp-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; border-radius: 50%; background: var(--gold); margin-top: -4px; transition: transform .15s; }
.ccp-seek:active::-webkit-slider-thumb { transform: scale(1.8); }
.ccp-seek::-moz-range-track { height: 3px; border-radius: 99px; background: rgba(255,255,255,.28); }
.ccp-seek::-moz-range-progress { height: 3px; border-radius: 99px; background: var(--gold); }
.ccp-seek::-moz-range-thumb { width: 11px; height: 11px; border: none; border-radius: 50%; background: var(--gold); transition: transform .15s; }
.ccp-seek:active::-moz-range-thumb { transform: scale(1.8); }
.ccp-time { color: #cdd8ea; font-size: .72em; white-space: nowrap; font-weight: 700; }
.ccp-sm { flex: 0 0 auto; background: rgba(255,255,255,.12); border: none; color: #fff; border-radius: 8px; padding: 6px 10px; font-family: inherit; font-weight: 700; font-size: .74em; cursor: pointer; }
.ccp-cc.on { color: var(--gold); }
/* তালিকা-সারি: থাম্বনেইল + শিরোনাম/দৈর্ঘ্য + ডানে ✓ */
.cc-item { position: relative; }
.cc-item.playing { border-color: var(--blue); background: #eef4ff; }
.cc-thumb { flex-shrink: 0; width: 82px; aspect-ratio: 16/9; border-radius: 7px; object-fit: cover; background: #e8ecf2; }
.cc-sub { display: block; font-weight: 400; font-size: .78em; color: var(--gray-mid); margin-top: 2px; }
.cc-check { flex-shrink: 0; margin-left: auto; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #cdd6cf; background: #fff; color: transparent; font-size: .8em; line-height: 1; cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: center; padding: 0; }
.cc-check.on { background: var(--success); border-color: var(--success); color: #fff; }
/* অগ্রগতি-বার + চালিয়ে-যান কার্ড + খোঁজা */
.cc-prog { margin-bottom: 10px; }
.cc-prog-tt { font-size: .78em; color: var(--gray-mid); font-weight: 700; margin-bottom: 4px; }
.cc-prog-track { height: 7px; border-radius: 99px; background: #e4e9ef; overflow: hidden; }
.cc-prog-fill { height: 100%; border-radius: 99px; background: var(--success); transition: width .3s; }
.cc-cont { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: #eef4ff; border: 1px solid rgba(26,58,107,.22); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; cursor: pointer; font-family: inherit; }
.cc-cont-ic { flex-shrink: 0; display: flex; color: var(--blue); }
.cc-cont-tt { flex: 1; min-width: 0; font-size: .84em; color: var(--blue); font-weight: 700; line-height: 1.35; }
.cc-cont-tt small { display: block; font-weight: 400; color: var(--gray-mid); }
.cc-search { width: 100%; margin-bottom: 10px; padding: 9px 12px; border: 1.5px solid var(--border); border-radius: 9px; font-family: inherit; font-size: .88em; }
/* Modal — Google Drive import + অন্যান্য */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.modal { background: #fff; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.2); max-height: 85vh; display: flex; flex-direction: column; }
.modal-head { padding: 16px 20px; border-bottom: 1px solid #e8eef6; font-weight: 700; font-size: .95em; color: #333; }
.modal-body { padding: 16px 20px; overflow-y: auto; flex: 1; }
.modal-foot { padding: 12px 20px; border-top: 1px solid #e8eef6; display: flex; gap: 8px; justify-content: flex-end; }
.modal .hint { font-size: .85em; color: #666; line-height: 1.4; }

/* LIVE পরীক্ষা কর্নার-ব্যাজ — চলমান-লাইভ পরীক্ষা/ক্লাস (js/course.js lcr-card) */
@keyframes pulse-badge { 0%, 100% { box-shadow: 0 0 0 0 rgba(214, 51, 51, .7); } 50% { box-shadow: 0 0 0 6px rgba(214, 51, 51, 0); } }
.card-live-badge {
  position: absolute; top: -7px; right: 10px;
  background: #d63333; color: #fff; font-size: .68em; font-weight: 700;
  padding: 3px 10px; border-radius: 10px; line-height: 1.3; z-index: 1;
  animation: pulse-badge 2s infinite;
}
/* পরীক্ষা-কার্ডের পূর্ণমান/সময় পিল + LIVE-বাটন — মেরিট-লিস্টের "টেস্ট/গড়" পিলের ধাঁচে
   (হালকা নীল/সবুজ পটভূমি)। কার্ডের নিচে পূর্ণ-প্রস্থ সারি (lcr-card flex-wrap +
   width:100% — তারিখ-ব্লকের নিচের খালি জায়গাও ব্যবহার হয়, ডানে overflow হয় না);
   এক লাইনে nowrap, বাটন margin-left:auto-তে ডান কিনারায় */
.lcr-pills { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; width: 100%; margin-top: 0; }
.lcr-pill { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: .74em; font-weight: 700; padding: 3px 9px; border-radius: 8px; line-height: 1.4; }
.lcr-pill svg { flex-shrink: 0; }
.lcr-pill-marks { background: #e8f0fe; color: var(--blue); }
.lcr-pill-time { background: #e6f4ea; color: var(--success); }
.lcr-pills .btn { padding: 4px 12px; font-size: .74em; white-space: nowrap; flex-shrink: 0; margin-left: auto; }

/* অ্যাডমিন: সামনে যা আছে — টাইমলাইন */
#adashUpcomingSection { margin-bottom: 20px; }
.adash-upcom-day { margin-bottom: 16px; }
.adash-upcom-day-hdr {
  font-size: .84em; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: .5px;
  padding-bottom: 8px; border-bottom: 2px solid #e8eef6; margin-bottom: 8px;
}
/* কোলাপসিবল: পুরো সেকশন + ভেতরের প্রতি দিন (details/summary — বন্ধুর চাওয়া ২০২৬-০৭-২৫) */
.adash-upcom-coll > summary.section-title {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px;
}
.adash-upcom-coll > summary.section-title::-webkit-details-marker { display: none; }
.adash-upcom-coll > summary.section-title::after {
  content: '▾'; margin-left: auto; color: var(--gray-mid); font-size: .8em; font-weight: 700;
}
.adash-upcom-coll[open] > summary.section-title::after { content: '▴'; }
.adash-upcom-cnt {
  background: #e8f0fe; color: var(--blue); border-radius: 20px; padding: 1px 9px;
  font-size: .72em; font-weight: 700; white-space: nowrap;
}
details.adash-upcom-day > summary.adash-upcom-day-hdr {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 7px;
}
details.adash-upcom-day > summary.adash-upcom-day-hdr::-webkit-details-marker { display: none; }
details.adash-upcom-day > summary.adash-upcom-day-hdr::after {
  content: '▾'; margin-left: auto; color: var(--gray-mid); font-size: .9em;
}
details.adash-upcom-day[open] > summary.adash-upcom-day-hdr::after { content: '▴'; }
.adash-upcom-day-cnt {
  background: #eef3f8; color: var(--blue); border-radius: 20px; padding: 1px 8px;
  font-size: .92em; font-weight: 700; letter-spacing: 0; text-transform: none;
}
.adash-upcom-day-warn {
  background: #fef3cd; color: #856404; border-radius: 20px; padding: 1px 8px;
  font-size: .92em; font-weight: 700; letter-spacing: 0; text-transform: none;
}
/* দুই-লাইন লেআউট: নাম উপরে পুরো প্রস্থে (লম্বা টপিক-তালিকা ২ লাইনে ক্লিপ),
   সময়+কোর্স+ব্যাজ নিচের মেটা-লাইনে — এক-লাইনের flex-এ মোবাইলে নাম সরু কলামে
   ভেঙে যাচ্ছিল (বন্ধুর স্ক্রিনশট ২০২৬-০৭-২২) */
.adash-upcom-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px 8px; padding: 9px 10px;
  border-radius: 8px; background: #f7faff; border-left: 3px solid rgba(26,58,107,.15);
  margin-bottom: 6px; font-size: .85em;
}
.adash-upcom-name {
  flex: 0 0 100%; order: -1; color: #333; font-weight: 600; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.adash-upcom-when { flex-shrink: 0; font-size: .78em; color: var(--gray-mid); font-weight: 600; }
.adash-upcom-when:empty { display: none; }
/* কোর্স-নাম নিচ-প্রান্তে পিল হিসেবে (lcr-pill-marks-এর নীল ধাঁচ) — বন্ধুর চাওয়া ২০২৬-০৭-২২ */
.adash-upcom-batch {
  display: inline-flex; align-items: center; background: #e8f0fe; color: var(--blue);
  padding: 3px 9px; border-radius: 8px; font-size: .74em; font-weight: 700;
  line-height: 1.4; min-width: 0;
}
.adash-upcom-warn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px;
  background: #fef3cd; color: #856404; padding: 3px 8px; border-radius: 6px;
  font-size: .76em; font-weight: 600; white-space: nowrap;
}
.adash-upcom-warn-row { background: #fffbf0; border-left-color: #ffc107; }
/* পিল এখন ট্যাপযোগ্য লিংক — আন্ডারলাইন বাদ, চাপলে হালকা দেবে যায় */
a.adash-upcom-batch, a.adash-upcom-warn { text-decoration: none; }
a.adash-upcom-batch:active, a.adash-upcom-warn:active { opacity: .65; transform: scale(.97); }

/* ═══ ড্যাশবোর্ড "আমার কোর্স" — শেষ হওয়া (status='ended') কোর্সের সাব-সেকশন ═══
   ভর্তি ছাত্র টাকা দিয়েছে বলে কোর্সটা লুকানো হয় না, শুধু চলমান কোর্সের নিচে
   ম্লান করে নামানো হয় — ফল/উত্তরপত্র আগের মতোই খোলা থাকে। */
.mc-subhead {
  display: flex; align-items: center; gap: 6px;
  margin: 18px 0 10px;
  font-size: .84em; font-weight: 700; color: var(--gray-mid);
}
.mc-subhead .svic { color: var(--gray-mid); opacity: .8; }
.mc-subhead small {
  background: #eceff3; color: var(--gray-mid);
  border-radius: 20px; padding: 1px 8px;
  font-size: .92em; font-weight: 700;
}
.crs-card.is-ended {
  background: #f7f8fa; box-shadow: none; opacity: .75;
  transition: opacity .15s ease;
}
.crs-card.is-ended:hover { opacity: 1; }
.crs-end-badge {
  flex-shrink: 0;
  background: #eceff3; color: var(--gray-mid);
  border-radius: 20px; padding: 2px 8px;
  font-size: .68em; font-weight: 700;
}

/* ─── ফ্রি-ক্লাস পেজে শিট-সারির "খুলুন ›" (ভিডিও-সারির ✓-এর জায়গায়) ─── */
.cc-item .cc-open {
  flex-shrink: 0;
  font-size: .8em; font-weight: 700;
  color: var(--gold); white-space: nowrap;
}

/* ─── ফ্রি-ক্লাস পেজে শিট-সারি — ভিডিও থেকে এক নজরে আলাদা ─── */
.cc-subhead {
  display: flex; align-items: center; gap: 6px;
  margin: 12px 2px 6px;
  font-size: .76em; font-weight: 800;
  color: #8a6410;
}
.cc-subhead svg { flex-shrink: 0; }
.cc-item.cc-pdfrow { background: #fdf8ef; border-color: #f0e1c2; }
.cc-item.cc-pdfrow:hover { background: #fbf3e3; border-color: #e3ce9f; }
.cc-item .cc-badge-pdf {
  flex-shrink: 0;
  background: var(--gold); color: #fff;
  border-radius: 5px; padding: 2px 7px;
  font-size: .64em; font-weight: 800; letter-spacing: .04em;
}
/* ক্লাসের সাথে বাঁধা শিট — ইন্ডেন্ট + বাঁয়ে সংযোগ-দাগ, যেন "এই ক্লাসের" বোঝা যায়।
   .cc-item-এ width:100% থাকায় শুধু margin-left দিলে সারিটা ডানে ঠিক ততটাই বেরিয়ে
   যেত — তাই width নিজেই কমাতে হয় (বন্ধুর রিপোর্ট: ডান মার্জিন বেশি বেরিয়ে গেছে) */
.cc-item.cc-pdfsub {
  margin-left: 22px; margin-top: -4px;
  width: calc(100% - 22px);
  border-top-left-radius: 4px;
  position: relative;
}
.cc-item.cc-pdfsub::before {
  content: ''; position: absolute;
  left: -13px; top: -6px; bottom: 50%; width: 9px;
  border-left: 2px solid #e3ce9f;
  border-bottom: 2px solid #e3ce9f;
  border-bottom-left-radius: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════
   লোড-স্কেলিটন (.ld-skel) — CLS (পেজ-লাফানো) কমানোর ভিত
   ───────────────────────────────────────────────────────────────────────
   সমস্যা: যেসব কনটেইনার JS ভরে (হোমের কোর্স-গ্রিড, কোর্স-রুটিন, সিলেবাস,
   ড্যাশবোর্ডের "আমার কোর্স") সেগুলো প্রথম রেন্ডারে ০ উচ্চতা নিয়ে থাকত, ডেটা
   এলে হঠাৎ বড় হয়ে নিচের সবকিছু ধাক্কা দিয়ে নামিয়ে দিত।
   সমাধান: আগেই জায়গা ধরে রাখা। `:empty` বলে কনটেন্ট বসার সাথে সাথেই
   স্কেলিটন আপনাআপনি চলে যায় — আলাদা JS লাগে না। (যেসব ক্ষেত্রে সত্যিই কিছু
   বসানোর নেই, সেখানে লোডার নিজে ক্লাসটা remove করে — নইলে স্থায়ী ফাঁকা
   বাক্স থেকে যেত।)
   উচ্চতাগুলো ব্রাউজারে মেপে বসানো — অনুমান নয়।
   ═══════════════════════════════════════════════════════════════════════ */
.ld-skel:empty {
  min-height: 260px;
  border-radius: 14px;
  background: linear-gradient(100deg,
    rgba(26, 58, 107, .04) 30%,
    rgba(26, 58, 107, .09) 48%,
    rgba(26, 58, 107, .04) 66%);
  background-size: 300% 100%;
  animation: ldSkelShimmer 1.5s ease-in-out infinite;
}
@keyframes ldSkelShimmer {
  0%   { background-position: 130% 0; }
  100% { background-position: -30% 0; }
}
/* কম-মোশন পছন্দ করা ব্যবহারকারীর জন্য ঝিলিক বন্ধ (জায়গা-সংরক্ষণ বহাল) */
@media (prefers-reduced-motion: reduce) {
  .ld-skel:empty { animation: none; }
}

/* হোমের কোর্স-গ্রিড — ৩টা কার্ড (HOME_HIGHLIGHT_MAX), কার্ড ১৬৬px + গ্যাপ ১২px।
   ৩৭৫px-এ ১ কলাম → ৩×১৬৬ + ২×১২ = ৫২২px; ১০০০px+-এ ২ কলাম → ৩৪৬px (২ সারি,
   ৪টার সময়ও একই ছিল)। কোর্স-সংখ্যা বদলালে এই মান দুটোও মিলিয়ে নিতে হবে। */
#homeCourseGrid.ld-skel:empty { min-height: 522px; }
@media (min-width: 1000px) {
  #homeCourseGrid.ld-skel:empty { min-height: 346px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   অ্যাডমিন — ব্যবসা ও ট্রাফিক (/admin/insights.html)
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── ফানেল / অনুপাত-বার ─── */
.ins-funnel { margin: 0 0 18px; }
.ins-fn-row { margin-bottom: 11px; }
.ins-fn-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 4px;
}
.ins-fn-lbl {
  font-size: .88em; font-weight: 700; color: var(--blue);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ins-fn-num { font-size: .95em; font-weight: 800; color: var(--blue); flex: 0 0 auto; }
.ins-fn-num small {
  display: inline-block; margin-left: 6px;
  font-size: .72em; font-weight: 600; color: var(--gray-mid);
}
.ins-fn-track {
  height: 12px; background: #e7ecf4; border-radius: 999px; overflow: hidden;
}
.ins-fn-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), #2d5da8);
  transition: width .35s ease;
}
.ins-fn-drop { font-size: .74em; color: #b06a2a; margin-top: 3px; }

/* ─── লিড-তালিকা (নাম + ফোন + কল/হোয়াটসঅ্যাপ) ─── */
.ins-lead {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 12px; margin-bottom: 8px;
}
.ins-lead-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 220px; }
.ins-lead-main b { font-size: .95em; color: var(--blue); }
.ins-lead-meta { font-size: .78em; color: var(--gray-mid); word-break: break-word; }
.ins-lead-act { display: flex; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; }
.ins-lead-noph { font-size: .78em; color: var(--gray-mid); }

.ins-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.ins-tag {
  font-size: .7em; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: #eef2f8; color: var(--gray-mid); border: 1px solid var(--border);
}
.ins-tag.warn { background: #fff6e6; color: #96650f; border-color: #f0ddb8; }
.ins-tag.bad  { background: #fdeceb; color: #9c2b1e; border-color: #f2c9c4; }

/* insights-এর চার্ট — শেয়ার্ড .bar-chart-এর ওপরে সরু-কলাম ভ্যারিয়েন্ট।
   ৩০/৯০ দিনের সিরিজ যেন অনুভূমিক স্ক্রল ছাড়াই এক পর্দায় আঁটে (শেয়ার্ড
   .bar-col-এর flex:1 0 26px থাকলে ৩০ বার = ৭৮০px হয়ে স্ক্রল করত)। */
.ins-chart { height: 168px; gap: 3px; overflow: hidden; }
.ins-chart .bar-col { flex: 1 1 0; min-width: 0; }
.ins-chart .bar-x {
  white-space: nowrap; overflow: visible; line-height: 1.1;
}

/* ─── একা-পিলের সারি (pills-auto) — ২০২৬-০৭-২৫ ───
   .exam-pills-এর ডিফল্ট flex:1 একটামাত্র বাটনকে পুরো কার্ড-প্রস্থে টেনে ভারী দেখাত
   (বন্ধুর ফিডব্যাক — চলমান-পরীক্ষা কার্ড ও ভিজিটর-পেজের লক-পিল দুটোতেই)। এই
   মডিফায়ারে বাটন নিজের মাপেই থাকে, সারির ডান-ঘেঁষে বসে। দুই/তিন পিলের সারি অক্ষত। */
.exam-pills.pills-auto { justify-content: flex-end; }
.exam-pills.pills-auto .btn { flex: 0 0 auto; padding: 5px 16px; }

/* ভিজিটর-পেজে (sales) লক করা আসল পরীক্ষা — কার্ড-ধাঁচে (.exam-row2), আগের
   .exam-row.exam-locked-এর হুবহু একই ধূসর ভাষা; ট্যাপে এনরোল-সেকশনে স্ক্রল */
.exam-row2.exam-locked { background: #f5f6f5; border-color: #e8eae8; cursor: pointer; }
.exam-row2.exam-locked .exam-name2,
.exam-row2.exam-locked .exam-subline-row span { color: var(--gray-mid); }
.exam-lock-pill { color: var(--gray-mid); border-color: #dfe3e0; pointer-events: none; }

/* ═══════════════ হোম: স্পেশাল ফিচার কার্ড-গ্রিড (২০২৬-০৭-২৬) ═══════════════
   আগে settings.pages.features (অ্যাডমিন) থেকে এক-লাইন আইটেম আসত, অ্যাকর্ডিয়নে লুকানো।
   এখন index.html-এ হার্ডকোডেড — নেভি/গোল্ড টিন্ট-বাক্সে stroke আইকন + এক লাইনের শিরোনাম
   (বর্ণনার লাইন ২০২৬-০৭-২৬-এ বাদ — শিরোনামই যথেষ্ট বোঝায়, বন্ধুর সিদ্ধান্ত)। */
.home-feats { padding: 4px 0 2px; }
.home-feats .finder-head { margin-bottom: 2px; }
.hfeat-sub { font-size: .8em; color: var(--gray-mid); margin: 0 0 12px; }
/* আইকন উপরে-মাঝে, নিচে শিরোনাম (বন্ধুর নির্দেশ ২০২৬-০৭-২৬)। ৪-৫ শব্দের শিরোনাম
   ছোট ঘরে দুই লাইনে ভাঙে — text-wrap: balance দুই লাইনকে সমান-লম্বা করে, নইলে
   মাঝ-বরাবর লেখায় "একটা শব্দ ঝুলে থাকা" চেহারা হয় (যে ব্রাউজারে balance নেই সেখানে
   আগের মতোই ভাঙবে, কিছু ভাঙে না)। মোবাইলে ২ কলাম, বড় স্ক্রিনে ৪ কলাম (৮ = ২ সারি)।
   min-height সব কার্ড সমান রাখে (এক-লাইন বনাম দুই-লাইনের উঁচু-নিচু ঠেকাতে)। */
.hfeat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 16px; }
.hfeat-card {
  background: #fff; border: 1px solid #eef2f7; border-radius: 12px;
  padding: 11px 9px 12px; box-shadow: 0 1px 3px rgba(0,0,0,.03);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  text-align: center; min-height: 82px; transition: box-shadow .15s, transform .15s;
}
.hfeat-card .hfc-ic {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; line-height: 0;
  background: rgba(26,58,107,.07); color: var(--green);
}
/* এক-এক করে গোল্ড — ২ কলামে বাঁ-কলাম নেভি / ডান-কলাম গোল্ড */
.hfeat-card:nth-child(even) .hfc-ic { background: #fdf6e7; color: var(--gold); }
.hfeat-card .hfc-tt {
  font-size: .78em; font-weight: 700; color: #122a52;
  margin: 8px 0 0; line-height: 1.35; text-wrap: balance;
}
@media (min-width: 620px) {
  .hfeat-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
}
@media (hover: hover) {
  .hfeat-card:hover { box-shadow: 0 4px 14px rgba(18,42,82,.09); transform: translateY(-2px); }
}
/* ═══════════ হোম: শিক্ষার্থীদের মন্তব্য — সোয়াইপ-স্ট্রিপ (২০২৬-০৭-২৬) ═══════════
   আগে বন্ধ অ্যাকর্ডিয়নে লুকানো ছিল (সেই নিয়মগুলো এখন মুছে ফেলা)। এখন অনুভূমিক স্ক্রল:
   কার্ড ৭৮% চওড়া বলে পরেরটা উঁকি দেয় — ছাত্র বুঝে যায় টেনে দেখতে হবে। scroll-snap
   এক কার্ডে থামায়। মন্তব্য যত বাড়ুক পাতা লম্বা হয় না।
   margin/padding-এর ±16px জোড়াটা ইচ্ছাকৃত: স্ট্রিপ container-এর প্রান্ত ছাড়িয়ে
   পর্দার কিনারা পর্যন্ত স্ক্রল করে, অথচ প্রথম কার্ড কনটেন্টের সাথেই সারিবদ্ধ থাকে। */
.home-revs { padding: 4px 0 2px; }
.home-revs .finder-head { margin-bottom: 2px; }
.rev-strip {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  margin: 0 -16px; padding: 2px 16px 10px;
  scrollbar-width: none;
}
.rev-strip::-webkit-scrollbar { display: none; }
/* খালি থাকতে জায়গা ধরে রাখে — settings আসার পর কার্ড বসলে পাতা লাফায় না (CLS) */
.rev-strip:empty { min-height: 182px; }
/* কমেন্টের ফেসবুক-লিংক থাকলে কার্ডটাই <a> হয় (js/home.js) — তখন সাইটের সাধারণ
   লিংক-স্টাইল লেখা আন্ডারলাইন/নীল করে দিচ্ছিল, তাই এখানে স্পষ্ট করে বাতিল */
.rev-card, a.rev-card:hover {
  flex: 0 0 78%; scroll-snap-align: start;
  background: #fff; border: 1px solid #eef2f7; border-radius: 14px;
  padding: 13px 14px 12px; box-shadow: 0 1px 3px rgba(0,0,0,.03);
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
}
a.rev-card:active { opacity: .75; }
.rvc-q { color: var(--gold); font-size: 1.5em; line-height: .7; height: 14px; }
/* flex:1 — লেখা ছোট-বড় যাই হোক, নাম-সারি সব কার্ডে একই উচ্চতায় বসে */
.rvc-text { font-size: .82em; line-height: 1.65; color: #3d4754; margin: 8px 0 11px; flex: 1; }
.rvc-foot { display: flex; align-items: center; gap: 9px; border-top: 1px solid #f1f4f8; padding-top: 10px; }
.rvc-av {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(26,58,107,.08); color: var(--green);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85em; overflow: hidden;
}
.rvc-av img { width: 100%; height: 100%; object-fit: cover; }
.rvc-name { font-size: .78em; font-weight: 700; color: #122a52; line-height: 1.3; }
.rvc-role { font-size: .7em; color: #7c8794; line-height: 1.3; }
/* ফেসবুক-লিংক — আসল পোস্টের শত শত কমেন্টই সবচেয়ে বড় প্রমাণ */
.rev-fb {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 2px 0 16px; padding: 9px 12px;
  background: #fff; border: 1px solid #e3e9f2; border-radius: 11px;
  font-size: .8em; font-weight: 600; color: #1877f2; text-decoration: none;
}
.rev-fb:active { opacity: .7; }
@media (min-width: 620px) {
  /* বড় স্ক্রিনে ৭৮% বিশাল হয়ে যেত — এখানে তিনটা পাশাপাশি, চতুর্থটা উঁকি দেয় */
  .rev-card { flex: 0 0 31%; }
}

/* ফেসবুক-পোস্টের বোতাম একাধিক হতে পারে (settings.pages.reviewsFbLinks) —
   মোড়কটাই এখন মার্জিন ধরে, বোতামের নিজের মার্জিন বাতিল। একটা থাকলে পূর্ণ-প্রস্থ
   (আগের চেহারা হুবহু), একাধিক হলে পাশাপাশি বসে জায়গা না হলে নিচে নামে। */
.rev-fbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 16px; }
.rev-fbs:empty { display: none; }
.rev-fbs .rev-fb { flex: 1 1 auto; min-width: 0; margin: 0; }
.rev-fbs .rev-fb span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ─── কোর্স-পেমেন্ট পেজ: ধাপ-চিহ্ন, খসড়া-নোট, হোয়াটসঅ্যাপ সাহায্য (js/course-pay.js) ───
   ফানেলে দেখা গেছে পেমেন্ট পেজে পৌঁছেও বেশির ভাগ জমা দেয় না — ক্রম স্পষ্ট
   করতে ধাপ-১/২ ব্যাজ, ফিরে-আসা ছাত্রের জন্য খসড়া-নোট, আর আটকে গেলে
   হোয়াটসঅ্যাপে বেরোনোর পথ। */
.cp-step {
  display: inline-block; background: var(--blue); color: #fff;
  font-size: .72em; font-weight: 700; letter-spacing: .3px;
  padding: 2px 8px; border-radius: 20px; margin-inline-end: 6px; vertical-align: middle;
}
.cp-step-head {
  font-size: .85em; font-weight: 700; color: #444; margin: 14px 0 6px;
  padding-top: 12px; border-top: 1px dashed var(--border);
}
.cp-draft-note {
  background: #eef6ff; border: 1px solid #b9d8f7; border-radius: 8px;
  padding: 8px 10px; font-size: .8em; color: #1a3a6b; margin-bottom: 8px;
}
.cp-help {
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border);
  text-align: center; font-size: .82em; color: var(--gray-mid); line-height: 1.7;
}
/* সাদা পটভূমি + বর্ডার (.cd-join-btn-এর মতোই) — brandIcon('whatsapp') নিজেই
   সবুজ চৌকো, তাই সবুজ বাটনে বসালে মিশে যেত */
.cp-help a {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  margin-top: 6px; padding: 9px 16px; border-radius: 10px;
  background: #fff; border: 1px solid var(--border);
  color: var(--blue); font-size: 1.02em; font-weight: 700; text-decoration: none;
}

/* ─── অতিথিকে লগইনের কারণ বোঝানোর বাক্স (js/enroll.js — enrollAskLogin) ───
   বটম-শিটের কাঠামো .shu-* থেকে শেয়ার করা, শুধু ভেতরের লেখার সাজ এখানে। */
.elg-lead { font-size: .92em; color: #333; line-height: 1.75; margin: 0 0 10px; }
.elg-why { margin: 0 0 16px; padding-inline-start: 0; list-style: none; }
.elg-why li {
  position: relative; padding-inline-start: 24px; margin-bottom: 7px;
  font-size: .85em; color: var(--gray-mid); line-height: 1.6;
}
.elg-why li::before {
  content: '✓'; position: absolute; inset-inline-start: 0;
  color: var(--success); font-weight: 700;
}
/* Google-এর ব্র্যান্ড-নির্দেশনার ধাঁচ: সাদা পটভূমি, ধূসর বর্ডার, গাঢ় লেখা।
   ভরাট রঙের বদলে সাদা রাখায় বিশ্বজুড়ে চেনা "Sign in with Google" চেহারাটা
   আসে, ফলে ব্যবহারকারী এক নজরেই বোঝে কী ঘটবে। */
.elg-google {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 13px 16px; border-radius: 10px;
  background: #fff; border: 1px solid #dadce0;
  color: #3c4043; font-family: inherit; font-size: .95em; font-weight: 700;
  cursor: pointer;
}
.elg-google:active { background: #f7f8f8; }
/* হোয়াটসঅ্যাপ বিকল্পটা এখন নিছক লিংক (বাক্স-বোতাম নয়) — নইলে উপরের
   জিমেইল-বোতামের সমান গুরুত্ব পেত, অথচ ওটাই মূল পথ। */
.elg-alt {
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border);
  text-align: center; font-size: .82em; color: var(--gray-mid); line-height: 1.9;
}
.elg-alt a {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--blue); font-weight: 700; text-decoration: underline;
}

/* ─── কমিউনিটি: অতিথি-মোড (js/community.js — cqApplyGuestUi/cqAskLogin) ───
   কমিউনিটি এখন লগইন ছাড়াও পড়া যায় (sql/community-public-read.sql)। লেখা/লাইক/
   সেভ আগের মতোই লগইন-বাধ্য — তাই অতিথিকে মন্তব্য-বারের বদলে লগইন-বোতাম।
   (উপরের "যোগ দিন" পট্টিটা বন্ধুর নির্দেশে সরানো হয়েছে — ফিডই যথেষ্ট।) */
.cq-guest-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  flex-shrink: 0; font-family: inherit; font-size: .82em; font-weight: 700;
  padding: 8px 16px; border-radius: 999px; border: none; cursor: pointer;
  background: var(--green); color: #fff;
}
.cq-guest-btn:hover { background: #122a52; }
.cq-guest-btn .svic { color: #fff; }
.cq-guest-btn.wide { width: 100%; padding: 11px 16px; font-size: .88em; }
.cq-guest-bar { display: none; }   /* cqApplyGuestUi() অতিথি হলে flex করে দেয় */

/* কম্পোজারের গোপনীয়তা-নোট — ছাত্র যেন জেনে-বুঝে পোস্ট করে (নাম-ছবি পাবলিক) */
.cq-public-note {
  margin-top: 14px; padding: 10px 12px; border-radius: 10px;
  background: #fffbeb; border: 1px solid #fde68a;
  font-size: .78em; color: #78350f; line-height: 1.7;
}

/* রুটিন — "See more" (js/course.js rtListHtml/rtMoreToggle): লম্বা তালিকা একাধারে না ঢেলে
   প্রথম ৪টা কার্ড, বাকিটা বাটনের পেছনে। আলাদা পিল-সারি নয় — বাটনটা কার্ড-স্ট্যাকের নিচের
   ডান-কোণে ভাসে (ছায়াসহ, শেষ কার্ডের কিনারায় সামান্য বসে) — বন্ধুর ২০২৬-০৭-৩১ নির্দেশ
   (গ্রেডিয়েন্ট-ফেইড চেষ্টা করা হয়েছিল, বন্ধু বাদ দিতে বলেছেন — শুধু ভাসমান বোতামই)।
   ⚠️ .rt-list-এ display:flex আছে বলে UA-র [hidden]{display:none} হেরে যায় — তাই স্পষ্ট নিয়ম। */
.rt-list[hidden] { display: none; }
.rt-more-wrap { position: relative; padding-bottom: 24px; }
.rt-more { margin-top: 10px; }
.rt-more-btn {
  position: absolute; right: 10px; bottom: 0; z-index: 2;
  padding: 6px 16px;
  background: var(--card-bg); color: #1a3a6b;
  border: 1px solid #d0ddf0; border-radius: 20px;
  box-shadow: 0 2px 8px rgba(26, 58, 107, .16);
  font-family: inherit; font-size: .82em; font-weight: 600;
  cursor: pointer; transition: background .2s;
}
.rt-more-btn:hover { background: #e5ecf8; }