:root{--colGap:8px;
  --bg:#f6f7fb;
  --panel:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e5e7eb;
  --brand:#2563eb;
  --shadow:0 10px 30px rgba(2,6,23,.08);
  --radius:16px;
  --tocW:320px;

  
  /* Block (note/warn/quote/callout/box) palette — theme-aware via vars.
     Themes override hues below to create distinct personalities. */
  --blk-title-color: color-mix(in srgb, var(--text) 78%, transparent);
  --blk-summary-bg: color-mix(in srgb, var(--panel) 86%, transparent);
  --blk-divider: color-mix(in srgb, var(--border) 70%, transparent);

  /* Per-theme hues (0–360). Each theme should override these. */
  --hue-note: 220;
  --hue-warn: 28;
  --hue-quote: 255;
  --hue-callout: 155;
  --hue-box: 45;

  /* Derived block colors */
  --blk-note-accent: hsl(var(--hue-note) 70% 55%);
  --blk-note-bg: color-mix(in srgb, var(--panel) 90%, hsl(var(--hue-note) 70% 55%) 10%);
  --blk-note-border: color-mix(in srgb, var(--border) 65%, hsl(var(--hue-note) 70% 55%) 35%);

  --blk-warn-accent: hsl(var(--hue-warn) 80% 55%);
  --blk-warn-bg: color-mix(in srgb, var(--panel) 88%, hsl(var(--hue-warn) 80% 55%) 12%);
  --blk-warn-border: color-mix(in srgb, var(--border) 60%, hsl(var(--hue-warn) 80% 55%) 40%);

  --blk-quote-accent: hsl(var(--hue-quote) 75% 60%);
  --blk-quote-bg: color-mix(in srgb, var(--panel) 90%, hsl(var(--hue-quote) 75% 60%) 10%);
  --blk-quote-border: color-mix(in srgb, var(--border) 65%, hsl(var(--hue-quote) 75% 60%) 35%);

  --blk-callout-accent: hsl(var(--hue-callout) 65% 50%);
  --blk-callout-bg: color-mix(in srgb, var(--panel) 88%, hsl(var(--hue-callout) 65% 50%) 12%);
  --blk-callout-border: color-mix(in srgb, var(--border) 60%, hsl(var(--hue-callout) 65% 50%) 40%);

  --blk-box-accent: hsl(var(--hue-box) 55% 55%);
  --blk-box-bg: color-mix(in srgb, var(--panel) 92%, hsl(var(--hue-box) 55% 55%) 8%);
  --blk-box-border: color-mix(in srgb, var(--border) 75%, hsl(var(--hue-box) 55% 55%) 25%);
}
*{box-sizing:border-box}
html,body{height:100%; margin:0; background:var(--bg); color:var(--text); font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, 'Noto Sans Bengali', sans-serif;}
html,body{overflow:hidden;}
.topbar{position:sticky; top:0; z-index:50; background:rgba(246,247,251,.92); backdrop-filter: blur(10px); border-bottom:1px solid var(--border);}
.topbar-inner{max-width:1200px; margin:0 auto; padding:10px 12px; display:flex; gap:10px; align-items:center; justify-content:space-between;}
.brand{font-weight:800; letter-spacing:.3px}
.search{width:260px; max-width:45vw; padding:10px 12px; border-radius:999px; border:1px solid var(--border); background:#fff;}
.shell{max-width:1200px; margin:0 auto; display:grid; grid-template-columns: var(--tocW) 1fr; column-gap:var(--colGap); height:calc(100vh - 56px); padding-bottom:16px; position:relative;}
.shell::after{
  content:"";
  position:absolute;
  top:12px;
  bottom:48px;
  left:calc(var(--tocW) + (var(--colGap) / 2));
  width:1px;
  background:rgba(0,0,0,0.06);
  pointer-events:none;
  opacity:0.55;
  border-radius:1px;
}
@supports(selector(:has(*))){
  .shell:has(.toc:hover)::after,
  .shell:has(.content:hover)::after{
    opacity:1;
    background:rgba(0,0,0,0.10);
  }
}

.toc{background:var(--panel); display:flex; flex-direction:column; min-width:0; min-height:0; height:100%; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); margin:12px 4px 48px 12px;}
.toc-head{padding:12px 14px; font-weight:800; border-bottom:1px solid var(--border);position:sticky; top:0; z-index:6; background:var(--panel); transition:box-shadow .15s ease;}
.toc-list{padding:12px 10px 20px; overflow:auto; min-height:0;}
.toc-item{padding:10px 12px; border-radius:12px; cursor:pointer; display:flex; gap:10px; align-items:flex-start;}
.toc-item:hover{background:rgba(2,6,23,.04)}
.toc-item.active{background:rgba(37,99,235,.10); outline:1px solid rgba(37,99,235,.20)}
.toc-title{font-weight:600}
.toc-meta{color:var(--muted); font-size:12px}
/* ScrollSpy sub-TOC (per-page headings) */
.toc-sub{margin-top:6px; padding-left:6px; border-left:1px solid rgba(0,0,0,0.06); display:none;}
.toc-item.active .toc-sub{display:block;}
.toc-subitem{padding:6px 10px; border-radius:10px; cursor:pointer; font-size:13px; color:var(--text); display:block;}
.toc-subitem:hover{background:rgba(2,6,23,.04)}
.toc-subitem.active{background:rgba(37,99,235,.10); outline:1px solid rgba(37,99,235,.18)}
.toc-subitem.l2{font-weight:600;}
.toc-subitem.l3{padding-left:18px; font-weight:520;}
.toc-subitem.l4{padding-left:28px; font-weight:500;}
.content{min-width:0; min-height:0; height:100%; display:flex; flex-direction:column;background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);margin:12px 12px 48px 4px;}
.content-wrap{flex:1 1 auto; overflow:auto; padding:12px 18px 22px; position:relative;}
article{background:transparent; border:none; border-radius:0; box-shadow:none; padding:0; max-width:920px; margin:0 auto;}
h1,h2,h3,h4{margin:16px 0 10px; line-height:1.2}
article > h1:first-child, article > h2:first-child, article > h3:first-child, article > h4:first-child{margin-top:0}

p{line-height:1.85; margin: 10px 0}
.permalink{border:1px solid var(--border); background:#fff; border-radius:10px; padding:2px 8px; cursor:pointer; margin-left:10px;}
.blk{border:1px solid var(--border); border-radius:14px; padding:12px 12px; margin:14px 0; background:rgba(246,247,251,.6);}
.blk-title{font-weight:800; color:var(--muted); font-size:12px; letter-spacing:.5px; margin-bottom:6px}
.ayah{background:rgba(37,99,235,.06); border-color:rgba(37,99,235,.20)}
.warn{background:rgba(245,158,11,.08); border-color:rgba(245,158,11,.25)}
.note{background:rgba(16,185,129,.08); border-color:rgba(16,185,129,.25)}
.xlink{color:var(--brand); text-decoration:none}
.xlink:hover{text-decoration:underline}
ol[data-bn-ol="1"]{list-style: none; padding-left: 1.2em;}
ol[data-bn-ol="1"]>li{counter-increment: item; margin: .35em 0;}
ol[data-bn-ol="1"]>li::before{content: counter(item) ") "; font-weight:700; color:var(--muted); margin-left:-1.2em; width:1.2em; display:inline-block;}
@media (max-width: 920px){
  :root{--colGap:8px;--tocW: 0px;}
  .shell{grid-template-columns: 1fr;}
  .toc{background:var(--panel); display:flex; flex-direction:column; min-width:0; min-height:0; height:100%; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); margin:12px 4px 48px 12px;}
  .search{width: 52vw;}
  article{background:transparent; border:none; border-radius:0; box-shadow:none; padding:0; max-width:920px; margin:0 auto;}
}

@media (max-width: 1100px){
  :root{--colGap:12px;}
  .toc{margin:12px 8px 48px 12px;}
  .content{margin:12px 12px 48px 8px;}
  .shell::after{opacity:0.4;}
}
@media (max-width: 860px){
  :root{--colGap:0px;}
  .shell{grid-template-columns: 1fr;}
  .shell::after{display:none;}
  .toc{display:none;}
  .content{margin:12px 12px 48px 12px;}

  /* Mobile: stack Content Head rows so ScrollSpy line stays above Actions */
  .content-head{display:block; padding:12px 14px;}
  #contentTitle{display:block; margin-bottom:6px;}
  #contentSpy{display:block; margin:0 0 8px 0;}
  #contentActions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:flex-end;
    align-items:center;
  }

  /* Mobile: hide TOC search bar (TOC is hidden on mobile, but keep consistent) */
  #tocSearchWrap{display:none !important;}
  .toc-top{padding-bottom:8px;}
}
.content-head{padding:12px 14px; font-weight:800; border-bottom:1px solid var(--border);position:sticky; top:0; z-index:6; background:var(--panel); transition:box-shadow .15s ease;}
.content-head.has-theme-switcher{padding-right:220px;}
.content-title{font-size:14px; font-weight:800;}

.content-spy{font-size:12px;color:var(--muted);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.toc.is-scrolled .toc-top{box-shadow:0 1px 0 rgba(0,0,0,0.06), 0 8px 16px rgba(0,0,0,0.04);}
.content.is-scrolled .content-head{box-shadow:0 1px 0 rgba(0,0,0,0.06), 0 8px 16px rgba(0,0,0,0.04);}

.toc-list::after{content:""; position:sticky; bottom:0; display:block; height:26px; margin-top:-26px;background:linear-gradient(to bottom, rgba(255,255,255,0), var(--panel)); pointer-events:none;}

.content-wrap::after{content:""; position:sticky; bottom:0; display:block; height:28px; margin-top:-28px;background:linear-gradient(to bottom, rgba(255,255,255,0), var(--panel)); pointer-events:none;}

@media (prefers-color-scheme: dark){
  .toc-list::after, .content-wrap::after{background:linear-gradient(to bottom, rgba(0,0,0,0), var(--panel));}
}
.toc-top{position:sticky; top:0; z-index:7; background:var(--panel); border-bottom:1px solid var(--border);}
.toc-head{padding:12px 14px; font-weight:800; border-bottom:none;}
.toc-search{position:relative; padding:10px 12px 12px;}
.toc-search input{width:100%; padding:10px 40px 10px 12px; border-radius:14px; border:1px solid var(--border);
  background:rgba(255,255,255,0.72); outline:none; font-size:14px;}
.toc-search input:focus{box-shadow:0 0 0 4px rgba(0,0,0,0.04);}
.toc-search-clear{
  position:absolute; right:18px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; border-radius:50%; border:none;
  background:rgba(0,0,0,0.08); color:#333; font-size:14px; line-height:22px;
  cursor:pointer; display:none;
}
.toc-search-clear:hover{background:rgba(0,0,0,0.14);}
.toc-search.has-value .toc-search-clear{display:block;}
.toc-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,0.28);
  opacity:0; pointer-events:none; transition:opacity .18s ease;
  z-index:60;
}
.toc-backdrop.show{opacity:1; pointer-events:auto;}
.toc-fab{
  position:fixed; right:18px; bottom:18px;
  width:56px; height:56px; border-radius:50%;
  border:1px solid rgba(0,0,0,0.08);
  background:var(--panel);
  box-shadow:0 12px 28px rgba(0,0,0,0.14);
  cursor:pointer; z-index:70;
  font-size:22px; font-weight:800;
  display:none;
  animation:qGlow 2.2s ease-in-out infinite;
}
@keyframes qGlow{
  0%{box-shadow:0 12px 28px rgba(0,0,0,0.14), 0 0 0 0 rgba(60,130,246,0.28);}
  70%{box-shadow:0 12px 28px rgba(0,0,0,0.14), 0 0 0 14px rgba(60,130,246,0);}
  100%{box-shadow:0 12px 28px rgba(0,0,0,0.14), 0 0 0 0 rgba(60,130,246,0);}
}
@media (max-width: 860px){
  :root{--colGap:0px;}
  .shell{grid-template-columns:1fr;}
  .shell::after{display:none;}
  .content{margin:12px 12px 72px 12px;}
  .toc{
    display:flex;
    position:fixed;
    top:56px;
    bottom:0;
    left:0;
    width:min(86vw, 340px);
    max-width:340px;
    margin:0;
    border-radius:0 18px 18px 0;
    transform:translateX(-105%);
    transition:transform .20s ease;
    z-index:65;
  }
  .toc.open{transform:translateX(0);}
  body.toc-open{overflow:hidden;}
  .toc-fab{display:block;}
}



/* FIX21 MOBILE TOC DRAWER (tablet+mobile). Desktop untouched. */
@media (max-width: 1023px){
  :root{--tocW:0px;}
  .shell{grid-template-columns:1fr !important;}
  .shell::after{display:none !important;}

  .content{margin:12px 12px 72px 12px !important;}

  .toc{
    display:flex !important;
    position:fixed !important;
    top:56px !important;
    bottom:0 !important;
    left:0 !important;
    width:min(86vw, 340px) !important;
    max-width:340px !important;
    margin:0 !important;
    border-radius:0 18px 18px 0 !important;
    transform:translateX(-105%) !important;
    transition:transform .20s ease !important;
    z-index:65 !important;
  }
  .toc.open{transform:translateX(0) !important;}
  body.toc-open{overflow:hidden;}

  .toc-fab{display:block !important;}
}




/* FIX34_PARALINK_CSS_BEGIN */
.permalink.plink-inline{
  margin-left: .5rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  opacity: .6;
}
.permalink.plink-inline:hover{ opacity: 1; }
.permalink.blk-permalink{
  float: right;
  background: transparent;
  border: 0;
  cursor: pointer;
  opacity: .7;
  margin: .25rem .25rem 0 0;
}
.permalink.blk-permalink:hover{ opacity: 1; }
/* FIX34_PARALINK_CSS_END */


/* FIX35_CALLOUT_COLLAPSE_CSS_BEGIN */
.blk[data-collapsible="1"] .blk-title{ cursor:pointer; user-select:none; }
.blk[data-collapsible="1"] .blk-title .blk-toggle{
  margin-right:.5rem;
  background:transparent;
  border:0;
  cursor:pointer;
  padding:0;
  opacity:.8;
}
.blk[data-collapsible="1"].is-collapsed .blk-body{ display:none; }
/* FIX35_CALLOUT_COLLAPSE_CSS_END */


/* ===== QFlex: Beautiful Container Blocks + Optional Collapsible (global) ===== */

/* Beautiful base look for block containers */
.blk{margin:1rem 0;padding:.9rem 1rem;border-radius:12px;border:1px solid var(--border);background:color-mix(in srgb, var(--panel) 92%, var(--bg));border-left:6px solid transparent}
.blk.quote{font-style:italic}
.blk p:first-child{margin-top:0}
.blk p:last-child{margin-bottom:0}

/* Collapsible variant (progressive enhancement) */
details.blk-collapsible{padding:0;overflow:hidden}
details.blk-collapsible>summary{list-style:none;cursor:pointer;padding:.85rem 1rem;font-weight:700;user-select:none}
details.blk-collapsible>summary::-webkit-details-marker{display:none}
details.blk-collapsible>summary::after{content:"▾";float:right;opacity:.7}
details.blk-collapsible[open]>summary::after{content:"▴"}
details.blk-collapsible>.blk-body{padding:.85rem 1rem 1rem 1rem;border-top:1px solid var(--blk-divider)}

/* ===== QLens override: distinct block colors + single copy button ===== */
/* Hide paragraph-level permalink buttons inside blocks to avoid duplicates.
   Keep only the block-level permalink (.blk-permalink). */
.blk .permalink.plink-inline,
details.blk-collapsible .permalink.plink-inline{display:none !important;}

/* Distinct color accents per block type (also applies to collapsible <details>) */
.blk.note, details.blk-collapsible.note{
  background: var(--blk-note-bg);
  border-color: var(--blk-note-border);
  border-left-color: var(--blk-note-accent);
}
.blk.warn, details.blk-collapsible.warn{
  background: var(--blk-warn-bg);
  border-color: var(--blk-warn-border);
  border-left-color: var(--blk-warn-accent);
}
.blk.quote, details.blk-collapsible.quote{
  background: var(--blk-quote-bg);
  border-color: var(--blk-quote-border);
  border-left-color: var(--blk-quote-accent);
}
.blk.callout, details.blk-collapsible.callout{
  background: var(--blk-callout-bg);
  border-color: var(--blk-callout-border);
  border-left-color: var(--blk-callout-accent);
}
.blk.box, details.blk-collapsible.box{
  background: var(--blk-box-bg);
  border-color: var(--blk-box-border);
  border-left-color: var(--blk-box-accent);
}

/* Improve header/summary readability */
.blk-title,
details.blk-collapsible > summary{
  color: var(--blk-title-color);
}
details.blk-collapsible > summary{
  background: var(--blk-summary-bg);
}



/* ===== FIX55: Remove ID/Type badges highlight (TOC numbers + block kicker labels) ===== */
.toc .id,
.toc .toc-id,
.toc .toc-num,
.toc small,
.toc-item small,
.toc-item .pid,
.toc-item .page-id,
.toc-item .meta,
.toc-item .sub,
.toc-item .hint {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Many blocks render an uppercase type label (e.g., NOTE/QUOTE/WARN) - remove highlight */
.blk .kicker,
.blk .blk-kicker,
.blk .type,
.blk .blk-type,
.blk .label,
.blk .badge,
.blk .tag {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Ensure any <mark> used for search highlighting inside TOC isn't styled as orange bar */
.toc mark,
.toc-item mark {
  background: transparent !important;
  color: inherit !important;
}



/* ===== FIX56: Remove block type kicker labels completely ===== */
.blk .kicker,
.blk .blk-kicker,
.blk .type,
.blk .blk-type,
.blk .label,
.blk .badge,
.blk .tag {
  display: none !important;
}



/* ===== FIX56: Remove TOC numeric pid line ===== */
.toc .toc-meta,
.toc-item .toc-meta {
  display:none !important;
}

/* ===== FIX93: Markdown lists promoted by parser ===== */
.mdlist-wrap{position:relative; margin: 0.6rem 0;}
.mdlist{margin: 0.2rem 0 0.2rem 1.2rem; padding: 0;}
.mdlist li{margin: 0.15rem 0;}

/* FIX106C: Theme switcher in content header (top-right) */

/* Theme switcher: add preview swatches + keep controls aligned */
.qflex-theme-switcher{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
}
.qflex-theme-switcher__label{ white-space:nowrap; }
.qflex-theme-preview{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:2px 6px;
  border-radius:999px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--panel) 92%, transparent);
}
.qflex-theme-preview span{
  width:10px;
  height:10px;
  border-radius:3px;
  border:1px solid color-mix(in srgb, var(--border) 70%, transparent);
  display:inline-block;
}
.qflex-justify-toggle{
  height:30px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--panel) 92%, transparent);
  color:var(--text);
  font-size:13px;
  cursor:pointer;
  white-space:nowrap;
}
.qflex-justify-toggle:hover{ filter:brightness(0.98); }

.qflex-theme-switcher{
  flex-wrap:nowrap;
  white-space:nowrap;
  position:absolute;
  top:10px;
  right:12px;
  z-index:20;
  display:flex;
  gap:8px;
  align-items:center;
  padding:6px 8px;
  border:1px solid var(--border);
  border-radius:12px;
  background:color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font: 13px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, 'Noto Sans Bengali', sans-serif;
}
.qflex-theme-switcher__label{font-weight:700; color:var(--muted);}
.qflex-theme-switcher__select{
  padding:6px 8px;
  border-radius:10px;
  border:1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background:var(--select-bg, color-mix(in srgb, var(--panel) 92%, transparent));
  color:var(--text);
  max-width: 220px;
}
.qflex-theme-switcher__select option{
  background:var(--select-opt-bg, var(--panel));
  color:var(--select-opt-fg, var(--text));
}

@media (max-width: 720px){
  .content-head.has-theme-switcher{padding-right: 14px;}
  .qflex-theme-switcher{top:8px; right:10px; padding:5px 6px;}
  .qflex-theme-switcher__label{display:none;}
  .qflex-theme-switcher__select{max-width: 180px; padding:5px 6px;}
}

/* --- Justify Toggle (viewer preference) --- */
html.qflex-justify-on .content p,
html.qflex-justify-on .content li,
html.qflex-justify-on .content blockquote,
html.qflex-justify-on .content .blk-body{
  text-align: justify;
  text-justify: inter-word;
}

.qflex-justify-toggle{
  appearance: none;
  border: 1px solid rgba(0,0,0,.12);
  background: var(--ui-panel-bg, var(--panel));
  color: var(--ui-panel-text, var(--text));
  border-radius: 10px;
  padding: 7px 10px;
  font: inherit;
  font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
  line-height: 1;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.qflex-justify-toggle:hover{filter: brightness(0.98);}
.qflex-justify-toggle:focus{outline: 2px solid rgba(120,120,120,.35); outline-offset: 2px;}

/* When justify toggle sits inside theme switcher, match control height */
.qflex-theme-switcher .qflex-justify-toggle{padding:6px 8px; font-size:12px; border-radius:10px;}


/* FINAL: prevent sticky content-head overlapping content when it grows (mobile) */
:root{ --qflex-contenthead-h: 0px; }
@media (max-width: 860px){
  /* pad scroll area so content doesn't slide under sticky header */
  #contentWrap{ padding-top: var(--qflex-contenthead-h); }
  /* use dynamic height for anchor scroll margin too */
  section.content{
    scroll-margin-top: calc(var(--qflex-topbar-h, 56px) + var(--qflex-contenthead-h) + env(safe-area-inset-top, 0px));
  }
}



/* v1.9.2 FINAL (LOCK): Mobile reading UX — disable sticky header to prevent overlap */
@media (max-width: 860px){
  .content-head{
    position: static !important;
    top: auto !important;
    box-shadow: none !important;
  }
  .content.is-scrolled .content-head{ box-shadow:none !important; }
  #contentWrap{ padding-top: 0 !important; }
  /* keep anchor jumps below the topbar only */
  section.content{
    scroll-margin-top: calc(var(--qflex-topbar-h, 56px) + env(safe-area-inset-top, 0px)) !important;
  }
}



/* Disable permalink / copy-clip buttons inside lists */
ul .permalink,
ol .permalink,
ul .clip-btn,
ol .clip-btn,
ul .anchor-link,
ol .anchor-link{
  display:none !important;
}