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: .7; }              /* তীর সবসময় দেখা যাবে */
      .stage-frame:hover .page-arrow-btn { opacity: .85; }
      .stage-frame .page-arrow-btn:hover { opacity: 1; }
    }

    /*
     * পেইজ বদলানোর সময় খুব দ্রুত (~০.১ সেকেন্ড করে) slide + fade: পুরোনো পাতা এক পাশে সরে যায়,
     * নতুন পাতা উল্টো পাশ থেকে ঢোকে। ডেটা/ছবি আগেই (prefetch) লোড থাকে বলে কোনো অপেক্ষা নেই।
     */
    .stage { transition: transform .1s ease-out, opacity .1s ease-out; will-change: transform, opacity; }
    .stage.pg-out.pg-next { opacity: 0; transform: translateX(-7%); }
    .stage.pg-out.pg-prev { opacity: 0; transform: translateX(7%); }
    .stage.pg-enter { transition: none; }
    .stage.pg-enter.pg-next { opacity: 0; transform: translateX(7%); }
    .stage.pg-enter.pg-prev { opacity: 0; transform: translateX(-7%); }
    @media (prefers-reduced-motion: reduce) { .stage { transition: none !important; } }
    .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; }

    /* ---------- সক্রিয় (ক্লিক করা) slice — বাম পাতায় চিহ্নিত থাকে ---------- */
    .slice-area.is-active {
      z-index: 998 !important;
      border-color: #0d6efd;
      background: rgba(13, 110, 253, .16);
    }

    /* ---------- মোবাইল (<992px): numeric navigation নেই (শুধু তীর/swipe); ডান panel নেই, popup চলে ---------- */
    @media (max-width: 991.98px) {
      #pageNavWrap { display: none !important; }
      .stage-frame { padding: .4rem; border-radius: 12px; }
    }

    /* ---------- ডান কলামের slice panel (ডেক্সটপ) ---------- */
    .slice-panel {
      position: sticky; top: 72px;                 /* বাম পাতা স্ক্রল করলেও panel চোখের সামনে থাকে */
      height: calc(100vh - 92px); min-height: 440px;
      display: flex; flex-direction: column; overflow: hidden;
      background: #fff; border-radius: 16px;
      box-shadow: 0 10px 30px rgba(23, 32, 84, .10);
    }
    .sp-head {
      display: flex; align-items: center; gap: .75rem;
      padding: .7rem .9rem; border-bottom: 1px solid #edf0f5; flex: none;
    }
    .sp-icon {
      width: 42px; height: 42px; flex: none; border-radius: 12px; font-size: 1.2rem;
      background: linear-gradient(135deg, #273a96, #4056c0); color: #fff;
      display: flex; align-items: center; justify-content: center;
    }
    .sp-title { min-width: 0; flex: 1; }
    .sp-title h3 { margin: 0; font-size: 1.02rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sp-title small { color: #7a8194; }
    .sp-tools { display: flex; align-items: center; gap: .4rem; flex: none; }
    .sp-zoom-label { min-width: 3.7rem; font-variant-numeric: tabular-nums; }
    .sp-body { position: relative; flex: 1 1 auto; min-height: 0; background: #eef1f6; }
    .sp-empty {
      position: absolute; inset: 0; display: flex; flex-direction: column;
      align-items: center; justify-content: center; text-align: center; color: #7a8194; padding: 2rem;
    }
    .sp-empty i { font-size: 3rem; color: #b5bdd3; }
    .sp-scroll {
      position: absolute; inset: 0; overflow: auto; padding: .75rem;
      scrollbar-gutter: stable; overscroll-behavior: contain;
    }
    .sp-scroll.can-pan { cursor: grab; }
    .sp-scroll.is-panning { cursor: grabbing; user-select: none; }
    .sp-parts { display: inline-block; min-width: 100%; vertical-align: top; }
    .sp-part {
      background: #fff; border-radius: 12px; margin: 0 0 .9rem;
      box-shadow: 0 6px 18px rgba(23, 32, 84, .10);
    }
    .sp-part:last-child { margin-bottom: 0; }
    .sp-bar {
      padding: .5rem .8rem; background: #fbfcfe; border-bottom: 1px solid #edf0f5;
      border-radius: 12px 12px 0 0; white-space: nowrap;
    }
    .sp-bar-in { position: sticky; left: 1.5rem; display: inline-flex; align-items: center; gap: .6rem; }
    .sp-part img {
      display: block; max-width: none; height: auto; margin: 0 auto;
      box-sizing: content-box; padding: .5rem;      /* জাভাস্ক্রিপ্ট px-এ width বসায় (দেখুন home.js applyZoom) */
      user-select: none; -webkit-user-drag: none;
    }
    .sp-foot {
      flex: none; display: flex; align-items: center; gap: .5rem;
      padding: .45rem .9rem; border-top: 1px solid #edf0f5; background: #fff;
      font-size: .8rem; color: #7a8194;
    }

    /* ---------- দেখার স্টাইল: 'popup (modal)' হলে ডান কলাম নেই, পাতা আগের মতো একা মাঝখানে ---------- */
    .epaper-split.mode-modal #sliceCol { display: none !important; }
    .epaper-split.mode-modal #paperCol { width: 100%; max-width: 1140px; margin-left: auto; margin-right: auto; }