body {
      background: linear-gradient(180deg, #eef1f7 0%, #f6f7fa 320px);
      font-family: 'Hind Siliguri', 'Noto Sans Bengali', system-ui, sans-serif;
    }

    /* ---------- পেইজের ছবি ---------- */
    .stage-frame {
      background: #fff; border-radius: 16px; padding: .9rem;
      box-shadow: 0 10px 30px rgba(23, 32, 84, .10); display: inline-block; max-width: 100%;
    }

    /* ---------- আগের/পরের পেইজে swipe (মোবাইল) ও arrow (ডেক্সটপ) দিয়ে যাওয়া ---------- */
    .stage-frame {
      position: relative;   /* arrow বাটন এর ভেতরে বসবে */
      touch-action: pan-y;  /* উল্লম্ব স্ক্রল স্বাভাবিক থাকবে; অনুভূমিক swipe নিজে সামলানো হয় */
    }
    .page-arrow-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 30;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(33, 37, 41, .40);
      color: #fff;
      font-size: 1.25rem;
      line-height: 1;
      cursor: pointer;
      opacity: .55;
      transition: background .15s, transform .15s, opacity .15s;
    }
    .page-arrow-btn:hover  { background: rgba(33, 37, 41, .72); opacity: 1; transform: translateY(-50%) scale(1.08); }
    .page-arrow-btn:active { transform: translateY(-50%) scale(.96); }
    .page-arrow-btn.prev { left: 8px; }
    .page-arrow-btn.next { right: 8px; }
    .page-arrow-btn[disabled],
    .page-arrow-btn.d-none { display: none; }
    @media (hover: hover) {
      .stage-frame .page-arrow-btn { opacity: 0; }               /* মাউস থাকলে ডিফল্টে হালকা লুকানো */
      .stage-frame:hover .page-arrow-btn { opacity: .55; }        /* ফ্রেমে মাউস নিলে দেখা যাবে */
      .stage-frame .page-arrow-btn:hover { opacity: 1; }
    }

    /*
     * পেইজ বদলানোর সময় Bootstrap carousel-এর মতোই সাদাসিধে, দ্রুত slide + fade — কোনো wait/spinner
     * নেই; loadRecord() সাথে সাথেই চলে, animation শুধু CSS transition দিয়ে সমান্তরালে চলে।
     */
    .stage { transition: opacity .18s ease, transform .18s ease; }
    .stage.pg-out { opacity: 0; }
    .stage.pg-out.pg-next { transform: translateX(-4%); }
    .stage.pg-out.pg-prev { transform: translateX(4%); }
    .stage {
      position: relative;
      isolation: isolate;   /* নিজস্ব stacking context: ভেতরের z-index বাইরের পেইজে প্রভাব ফেলবে না, উল্টোটাও না */
      display: inline-block;
      max-width: 100%;
      line-height: 0;
      box-shadow: 0 2px 12px rgba(0, 0, 0, .15);
    }
    .stage img {
      display: block;
      max-width: 100%;
      height: auto;
      user-select: none;
      -webkit-user-drag: none;
    }

    /*
     * slice এলাকা: সাধারণ অবস্থায় অদৃশ্য, মাউস/ট্যাপ করলে চিহ্নিত হয়।
     * একটি slice আরেকটির ভেতরে/উপরে থাকতে পারে — এখানে কোনটি "উপরে" তা ব্রাউজারের hit-testing-এর
     * উপর ছেড়ে না দিয়ে JS নিজে (মাপ অনুযায়ী, ছোট অংশ আগে) হিসাব করে ঠিক করে — তাই .is-hover ক্লাস ব্যবহার হয়।
     */
    .slice-area {
      position: absolute;
      border: 2px solid transparent;
      background: transparent;
      cursor: pointer;
      transition: background .15s, border-color .15s;
    }
    .slice-area.is-hover,
    .stage.show-all .slice-area {
      z-index: 999 !important;
      border-color: #198754;
      background: rgba(25, 135, 84, .22);
    }

    /* ---------- header (লোগো) ---------- */
    .site-header { background: #fff; border-bottom: 1px solid #dee2e6; }
    .site-logo { height: 68px; width: auto; max-width: 100%; }
	.bg-sg{ background-color:#273a96}
	.nav-link, .nav-link.active{
		color:#d3cdcd;
	}
	.nav-link:hover, .nav-link.active{
		color:#ffffff !important;
	}
	.dropdown-item:hover{
		background:#0d6efd !important;
	}
	[data-bs-theme="blue"] {
	  --bs-body-color: #ffffff;
	  --bs-body-bg: #273a96;
	}
	.form-check-label{color:#ffffff;}
	.form-check-input{background:#ffffff;}
	.navbar-brand, :hover{color:#FD0E25 !important; font-weight:bold !important}
    @media (max-width: 575.98px) {
	.site-logo { height: 46px; }
	}

	/* ---------- navbar sticky হলে মাঝ বরাবর ছোট সাদা লোগো (উপরের কালো লোগোটিই যেন ভিতরে চলে আসছে) ---------- */
	#mainNavbar { /*position: relative;*/ }   /* sticky positioned element নিজেই absolute child-দের জন্য ঠিকানা ধরে রাখে */
	.navbar-sticky-logo-link {
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  z-index: 5;
	  display: block;
	  line-height: 0;
	  transform: translate(-50%, -50%) scale(.85);
	  opacity: 0;
	  pointer-events: none;     /* sticky না হওয়া পর্যন্ত লুকানো, ক্লিকও হয় না */
	  transition: opacity .25s ease, transform .25s ease;
	}
	.navbar-sticky-logo { display: block; height: 28px; width: auto; }
	#mainNavbar.is-stuck .navbar-sticky-logo-link {
	  opacity: 1;
	  pointer-events: auto;     /* দেখা গেলে লোগোতে ক্লিক করে frontend-এ যাওয়া যায় */
	  transform: translate(-50%, -50%) scale(1);
	}
	/* sticky অবস্থায় মোবাইলে "ই-পেপার" লেখাটা মাঝের লোগোর সাথে জট পাকাবে না */
	#mainNavbar.is-stuck .navbar-brand { opacity: 0; }
	@media (max-width: 575.98px) {
	  .navbar-sticky-logo { height: 22px; }
	}

    /* ---------- পেইজ নম্বর slider: একসাথে ৫টি নম্বর, দু পাশের তীর চাপলে ৫টি করে সরে ---------- */
    .pgslider { --item-w: 2.75rem; --gap: .35rem; }
    .pg-viewport {
      box-sizing: content-box;
      width: calc(5 * var(--item-w) + 4 * var(--gap));
      padding: 3px;                       /* focus-এর outline যেন কেটে না যায় */
      overflow: hidden;
    }
    .pg-track {
      display: flex;
      gap: var(--gap);
      transform: translateX(calc(var(--start, 0) * -1 * (var(--item-w) + var(--gap))));
      transition: transform .3s ease;
    }
    .pg-track.no-anim { transition: none; }
    .pg-item {
      flex: 0 0 var(--item-w); width: var(--item-w); padding-left: 0; padding-right: 0;
      border-radius: 999px; font-weight: 600;
    }
    .pg-arrow { width: 2.25rem; border-radius: 50%; }
    .pg-wrap-card {
      background: #fff; border-radius: 999px; padding: .45rem .6rem;
      box-shadow: 0 6px 18px rgba(23, 32, 84, .08); display: inline-flex;
    }

    .hint-pill {
      background: #fff; border-radius: 999px; padding: .4rem 1.1rem; display: inline-flex;
      align-items: center; gap: .5rem; box-shadow: 0 4px 14px rgba(23, 32, 84, .07);
    }

    /* ---------- interactive reader popup (Bootstrap modal-এর বদলে) ---------- */
    .ux-overlay {
      position: fixed; inset: 0; z-index: 1080;
      background: rgba(16, 22, 52, .6);
      backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
      display: flex; align-items: center; justify-content: center; padding: .9rem;
      opacity: 0; visibility: hidden;
      transition: opacity .28s ease, visibility .28s ease;
    }
    .ux-overlay.open { opacity: 1; visibility: visible; }
    .ux-popup {
      background: #fff; border-radius: 18px;
      /* ছবি বড় হলে popup-ও বড় হবে: width ছবির নিজস্ব মাপ অনুযায়ী বাড়ে (auto),
         সর্বোচ্চ ভিউপোর্টের ৯৬% পর্যন্ত; ছোট ছবিতে ছোটই থাকে। */
      width: auto; min-width: min(620px, 94vw); max-width: min(1600px, 96vw); max-height: 94vh;
      display: flex; flex-direction: column; position: relative;
      box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
      transform: translateY(28px) scale(.95); opacity: 0;
      transition: transform .35s cubic-bezier(.34, 1.4, .64, 1), opacity .3s ease;
    }
    .ux-overlay.open .ux-popup { transform: none; opacity: 1; }
    .ux-logo { text-align: center; padding: 1.2rem 3.6rem 0; }
    .ux-logo img { height: 34px; width: auto; }
    .ux-close {
      position: absolute; top: 12px; right: 12px; width: 38px; height: 38px;
      border: 0; border-radius: 50%; background: #f1f3f7; color: #20263a;
      font-size: 1.1rem; line-height: 1; cursor: pointer; transition: .25s; z-index: 2;
    }
    .ux-close:hover { background: #e3e7ee; transform: rotate(90deg); }
    .ux-head {
      display: flex; gap: .9rem; align-items: center;
      padding: 1.1rem 3.6rem .9rem 1.4rem; border-bottom: 1px solid #edf0f5;
    }
    .ux-icon {
      width: 50px; height: 50px; flex: none; border-radius: 14px;
      background: linear-gradient(135deg, #273a96, #4056c0);
      color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
    }
    .ux-head h3 { margin: 0; font-size: 1.1rem; font-weight: 700; }
    .ux-head small { color: #7a8194; }
    .ux-body { overflow-y: auto; background: #eef1f6; padding: 1.1rem; }
    .ux-foot {
      padding: .8rem 1.2rem; border-top: 1px solid #edf0f5;
      display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; background: #fff;
      border-radius: 0 0 18px 18px;
    }

    /* popup-এর ভেতরে অংশগুলো একটির নিচে একটি */
    .part {
      background: #fff; border-radius: 14px; overflow: hidden;
      box-shadow: 0 6px 18px rgba(23, 32, 84, .10); margin: 0 0 1.1rem;
    }
    .part:last-child { margin-bottom: .2rem; }
    .part-bar {
      display: flex; align-items: center; gap: .6rem; padding: .55rem .9rem;
      background: #fbfcfe; border-bottom: 1px solid #edf0f5;
      position: sticky; top: 0; z-index: 1;
    }
    .part img { display: block; max-width: 100%; width: auto; height: auto; margin: 0 auto; padding: 1rem; }

    /* ---------- toast ---------- */
    .ux-toast {
      position: fixed; top: 16px; right: 16px; z-index: 1200;
      min-width: 260px; max-width: 400px; background: #fff; border-radius: 12px;
      box-shadow: 0 12px 32px rgba(20, 26, 60, .18); padding: .8rem 1rem;
      border-left: 5px solid #0d6efd; font-size: .92rem;
      opacity: 0; transform: translateX(24px); transition: .3s;
    }
    .ux-toast.show { opacity: 1; transform: none; }
    .ux-toast.toast-success { border-left-color: #198754; }
    .ux-toast.toast-danger  { border-left-color: #dc3545; }
    .ux-toast.toast-warning { border-left-color: #ffc107; }