/* ==========================================================================
   ABCL TECH — Course Kit · Gold Standard lesson layout (shared by every course)
   Full-width hero  →  left: course outline sidebar · right: lesson content
   Loaded after ../css/style.css (site header is fixed, 70px).
   ========================================================================== */

:root {
  --lx-accent: #39b549;
  --lx-accent-hover: #2d8c3a;
  --lx-accent-dark: #1f6e2a;
  --lx-accent-soft: #e6f4e8;
  --lx-accent-line: #bbe2c0;
  --lx-ink: #0f172a;
  --lx-body: #1f2937;
  --lx-soft: #475569;
  --lx-mute: #64748b;
  --lx-line: #e5e7eb;
  --lx-line-2: #d1d5db;
  --lx-bg: #ffffff;
  --lx-bg-soft: #f8fafc;
  --lx-code-bg: #1e1e1e;
  --lx-code-ink: #d4d4d4;
  --lx-header: var(--header-height, 70px);
  --lx-side-w: 280px;
  --lx-measure: 820px;
  --lx-fs: 1rem;            /* body text: 16px */
  --lx-font: 'Anek Bangla', 'Roboto', 'Noto Sans Bengali', sans-serif;
  --lx-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
}

body.lx-page { background: var(--lx-bg); }
.lx-page main { margin-bottom: 0; }

/* ---------- a11y helpers ---------- */
.lx-skip { position: absolute; left: 1rem; top: -100px; z-index: 2000; background: var(--lx-ink); color: #fff; padding: .6rem 1rem; border-radius: 8px; }
.lx-skip:focus { top: calc(var(--lx-header) + .5rem); color: #fff; }
.lx-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lx-page :focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; border-radius: 6px; }

/* ---------- reading progress ---------- */
.lx-progress { position: fixed; top: var(--lx-header); left: 0; right: 0; height: 3px; z-index: 990; pointer-events: none; }
.lx-progress span { display: block; height: 100%; width: 0; background: var(--lx-accent); }

/* ==========================================================================
   HERO
   ========================================================================== */
.lx-hero {
  background: linear-gradient(135deg, #020c1a 0%, #0d1f3c 50%, #0a2818 100%);
  color: #e2e8f0; position: relative; overflow: hidden;
  display: grid; grid-template-columns: var(--lx-side-w) minmax(0, 1fr);
}
.lx-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 55% 30%, rgba(57,181,73,.13) 0%, transparent 70%);
}
.lx-hero-inner {
  grid-column: 2; position: relative; z-index: 1; width: 100%;
  max-width: calc(var(--lx-measure) + 2 * clamp(1rem, 4vw, 3rem)); margin: 0 auto;
  padding: 2.4rem clamp(1rem, 4vw, 3rem) 2.2rem; font-family: var(--lx-font);
}
.lx-pill {
  display: inline-flex; align-items: center; gap: .45rem;
  font: 600 .78rem/1 var(--lx-mono); color: #86efac;
  border: 1px solid rgba(74,222,128,.45); background: rgba(57,181,73,.1);
  padding: .4rem .8rem; border-radius: 99px; margin-bottom: 1rem;
}
.lx-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px #4ade80; }
.lx-crumb { font-size: .84rem; color: #94a3b8; margin-bottom: 1rem; line-height: 1.6; }
.lx-crumb a { color: #4ade80; text-decoration: none; }
.lx-crumb a:hover { text-decoration: underline; }
.lx-crumb .sep { color: #475569; margin: 0 .4rem; }
.lx-crumb strong { color: #cbd5e1; font-weight: 600; }
.lx-title { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.35rem); font-weight: 700; color: #f1f5f9; line-height: 1.3; margin: 0 0 .45rem; }
.lx-title-en { font-family: Roboto, sans-serif; font-size: .98rem; color: #94a3b8; font-weight: 500; letter-spacing: .2px; margin-bottom: 1.1rem; }
.lx-meta { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.lx-meta li {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #cbd5e1;
  padding: .3rem .8rem; border-radius: 99px; font-size: .82rem; display: inline-flex; align-items: center; gap: .4rem;
}
.lx-meta li i { color: #4ade80; font-size: .75rem; }
.lx-hero-tools { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.3rem; }
.lx-hbtn {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; cursor: pointer;
  font: 600 .86rem var(--lx-font); color: #e2e8f0; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.2); border-radius: 99px; padding: .4rem 1rem;
}
.lx-hbtn:hover { border-color: #4ade80; color: #fff; }
.lx-hbtn[aria-pressed="true"] { background: var(--lx-accent); border-color: var(--lx-accent); color: #fff; }
.lx-mark.is-locked { border-style: dashed; }
.lx-fontctl { display: inline-flex; border: 1px solid rgba(255,255,255,.2); border-radius: 99px; overflow: hidden; }
.lx-fontctl button { background: rgba(255,255,255,.06); border: 0; color: #e2e8f0; font: 600 .86rem var(--lx-font); padding: .4rem .85rem; cursor: pointer; min-height: 40px; }
.lx-fontctl button + button { border-left: 1px solid rgba(255,255,255,.2); }
.lx-fontctl button:hover { background: rgba(255,255,255,.14); }

/* hero card — "কোর্সে আপনার অবস্থান" (desktop only, built by lesson.js) */
.lx-hero-card {
  display: none; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.13); border-radius: 14px;
  padding: .95rem 1.1rem; color: #cbd5e1; font-family: var(--lx-font);
}
.lx-hc-h { font-size: .72rem; font-weight: 700; letter-spacing: .4px; color: #86efac; margin: 0 0 .35rem; }
.lx-hc-mod { font-size: .9rem; font-weight: 700; color: #f1f5f9; line-height: 1.4; margin: 0; }
.lx-hc-pos { font-size: .76rem; color: #94a3b8; margin: 0 0 .55rem; }
.lx-hc-steps { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .05rem; }
.lx-hc-steps a { display: flex; align-items: center; gap: .6rem; padding: .24rem .45rem; border-radius: 7px; color: #cbd5e1; text-decoration: none; font-size: .8rem; line-height: 1.3; }
.lx-hc-steps a:hover { background: rgba(255,255,255,.06); color: #fff; }
.lx-hc-dot { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 700 .68rem var(--lx-font); border: 1.5px solid rgba(255,255,255,.28); color: #94a3b8; }
.lx-hc-steps .is-done .lx-hc-dot { background: rgba(74,222,128,.18); border-color: #4ade80; color: #4ade80; }
.lx-hc-steps .is-current a { background: rgba(57,181,73,.18); color: #fff; font-weight: 600; }
.lx-hc-steps .is-current .lx-hc-dot { background: #39b549; border-color: #39b549; color: #fff; box-shadow: 0 0 10px rgba(74,222,128,.55); }
.lx-hc-prog { font-size: .76rem; color: #94a3b8; padding-top: .6rem; border-top: 1px solid rgba(255,255,255,.1); }
.lx-hc-bar { height: 5px; background: rgba(255,255,255,.12); border-radius: 99px; overflow: hidden; margin: .35rem 0 .7rem; }
.lx-hc-bar span { display: block; height: 100%; width: 0; background: #4ade80; border-radius: 99px; }
.lx-hc-next { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .5rem .8rem; border-radius: 9px; background: #39b549; color: #fff; text-decoration: none; font-size: .82rem; font-weight: 600; line-height: 1.35; }
.lx-hc-next span:first-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-hero-main { min-width: 0; }
.lx-hc-next:hover { background: #2d8c3a; color: #fff; }
.lx-hc-login { display: flex; align-items: center; gap: .5rem; padding: .55rem .8rem; border-radius: 9px; border: 1px dashed rgba(74,222,128,.55); color: #bbf7d0; text-decoration: none; font-size: .8rem; font-weight: 600; margin: .1rem 0 .6rem; }
.lx-hc-login:hover { background: rgba(74,222,128,.12); color: #fff; }

/* ==========================================================================
   SHELL — sidebar + content
   ========================================================================== */
.lx-shell { display: grid; grid-template-columns: var(--lx-side-w) minmax(0, 1fr); }

.lx-side {
  position: sticky; top: var(--lx-header); align-self: start;
  height: calc(100vh - var(--lx-header)); overflow-y: auto; overscroll-behavior: contain;
  border-right: 1px solid var(--lx-line); background: var(--lx-bg-soft);
  padding: 1.25rem 1rem 3rem; font-family: var(--lx-font); scrollbar-width: thin;
}
.lx-side-head { margin-bottom: 1rem; }
.lx-side-course { display: block; font-weight: 700; font-size: 1.05rem; line-height: 1.35; color: var(--lx-ink); text-decoration: none; }
.lx-side-course:hover { color: var(--lx-accent-dark); }
.lx-side-sub { font-size: .82rem; color: var(--lx-mute); margin-top: .15rem; }
.lx-side-prog { margin-top: .85rem; }
.lx-side-prog-bar { height: 6px; background: var(--lx-line); border-radius: 99px; overflow: hidden; }
.lx-side-prog-bar span { display: block; height: 100%; width: 0; background: var(--lx-accent); border-radius: 99px; transition: width .3s; }
.lx-side-prog-txt { font-size: .8rem; color: var(--lx-mute); margin-top: .3rem; }
.lx-side-prog-txt a { color: var(--lx-accent-dark); font-weight: 600; text-decoration: none; }
.lx-side-prog-txt a:hover { text-decoration: underline; }
.lx-side-search { width: 100%; margin-top: .9rem; padding: .55rem .75rem; font: .9rem var(--lx-font); border: 1px solid var(--lx-line); border-radius: 10px; background: #fff; color: var(--lx-ink); }
.lx-side-close { display: none; }

.lx-mod { border-top: 1px solid var(--lx-line); padding: .35rem 0; }
.lx-mod > summary { list-style: none; cursor: pointer; padding: .55rem .4rem; border-radius: 8px; display: flex; gap: .5rem; align-items: flex-start; font-weight: 600; font-size: .92rem; color: var(--lx-ink); line-height: 1.4; }
.lx-mod > summary::-webkit-details-marker { display: none; }
.lx-mod > summary::before { content: "›"; flex: none; width: 1rem; font-size: 1.15rem; line-height: 1.1; color: var(--lx-mute); transition: transform .2s; }
.lx-mod[open] > summary::before { transform: rotate(90deg); }
.lx-mod > summary:hover { background: #eef2f6; }
.lx-mod-num { color: var(--lx-mute); font-weight: 500; font-size: .76rem; display: block; }
.lx-lessons { list-style: none; margin: .1rem 0 .4rem; padding: 0; }
.lx-lessons a { display: flex; gap: .55rem; align-items: flex-start; padding: .45rem .5rem .45rem 1.5rem; border-radius: 8px; color: var(--lx-soft); text-decoration: none; font-size: .9rem; line-height: 1.45; }
.lx-lessons a:hover { background: #eef2f6; color: var(--lx-ink); }
.lx-lessons .lx-n { flex: none; min-width: 1.6rem; font-size: .78rem; color: var(--lx-mute); padding-top: .12rem; }
.lx-lessons .lx-done .lx-n { color: var(--lx-accent-dark); }
.lx-lessons .lx-done .lx-n::after { content: " ✓"; }
.lx-lessons .lx-current > a { background: var(--lx-accent-soft); color: var(--lx-accent-dark); font-weight: 700; }
.lx-toc { list-style: none; margin: .2rem 0 .5rem 2.1rem; padding: 0 0 0 .7rem; border-left: 2px solid var(--lx-line); }
.lx-toc a { display: block; padding: .3rem .5rem; font-size: .85rem; line-height: 1.4; color: var(--lx-mute); text-decoration: none; border-radius: 6px; margin-left: -.8rem; border-left: 2px solid transparent; }
.lx-toc a:hover { color: var(--lx-ink); }
.lx-toc a.is-active { color: var(--lx-accent-dark); font-weight: 600; border-left-color: var(--lx-accent); background: #fff; }
.lx-side-extra { border-top: 1px solid var(--lx-line); margin-top: .5rem; padding-top: .8rem; }
.lx-side-extra a { display: flex; gap: .5rem; align-items: center; padding: .45rem .5rem; color: var(--lx-soft); text-decoration: none; font-size: .9rem; border-radius: 8px; }
.lx-side-extra a:hover { background: #eef2f6; }

.lx-bar { display: none; }


.lx-main { min-width: 0; padding: 2rem clamp(1rem, 4vw, 3rem) 3rem; }
.lx-article { max-width: var(--lx-measure); margin: 0 auto; font-family: var(--lx-font); font-size: calc(var(--lx-fs) * var(--lx-scale, 1)); line-height: 1.8; color: var(--lx-body); }

/* ---------- typography ---------- */
.lx-article p { margin: 0 0 .9rem; }
.lx-article strong { color: var(--lx-accent-dark); font-weight: 700; }
.lx-article em { color: var(--lx-soft); }
.lx-article a { color: var(--lx-accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.lx-article ul, .lx-article ol { margin: .5rem 0 1rem 1.4rem; padding: 0; }
.lx-article ol { list-style-type: bengali; }
.lx-article li { margin-bottom: .4rem; }
.lx-article li::marker { color: var(--lx-accent-dark); font-weight: 700; }
.lx-article h2 {
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.45rem); font-weight: 700; color: var(--lx-ink); line-height: 1.4;
  margin: 2.4rem 0 .8rem; padding-bottom: .35rem; border-bottom: 2px solid var(--lx-accent-soft);
  scroll-margin-top: calc(var(--lx-header) + 1.25rem);
}
.lx-article h3 { font-size: 1.1rem; font-weight: 700; color: var(--lx-ink); margin: 1.5rem 0 .5rem; line-height: 1.45; scroll-margin-top: calc(var(--lx-header) + 1.25rem); }
.lx-article code, .lx-article pre { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
.lx-article code { background: var(--lx-accent-soft); color: var(--lx-accent-dark); padding: 1px 6px; border-radius: 4px; font-family: var(--lx-mono); font-size: .86em; font-weight: 500; word-break: break-word; }
.lx-article img, .lx-article svg { max-width: 100%; height: auto; }
.lx-lead { font-size: 1.08em; color: var(--lx-ink); }

/* ==========================================================================
   OPENING BLOCKS
   ========================================================================== */
.lx-tldr { background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); border: 1px solid #fcd34d; border-left: 4px solid #f59e0b; border-radius: 10px; padding: 1.1rem 1.3rem; margin: 0 0 1.4rem; }
.lx-tldr h2, .lx-goals h2, .lx-box-h { font-size: 1rem !important; font-weight: 700; margin: 0 0 .6rem !important; padding: 0 !important; border: 0 !important; display: flex; align-items: center; gap: .5rem; }
.lx-tldr h2 { color: #b45309; }
.lx-article .lx-tldr ul { list-style: none; margin: 0; }
.lx-tldr li { position: relative; padding-left: 1.5rem; font-size: .97em; color: #78350f; line-height: 1.75; }
.lx-tldr li::before { content: "⚡"; position: absolute; left: 0; font-size: .85em; }
.lx-tldr li strong { color: #92400e; }
.lx-goals { background: var(--lx-accent-soft); border: 1px solid var(--lx-accent-line); border-left: 4px solid var(--lx-accent); border-radius: 10px; padding: 1.1rem 1.3rem; margin: 0 0 1.8rem; }
.lx-goals h2 { color: var(--lx-accent-dark); }
.lx-article .lx-goals ul { list-style: none; margin: 0; }
.lx-goals li { position: relative; padding-left: 1.4rem; font-size: .97em; color: var(--lx-accent-dark); line-height: 1.75; }
.lx-goals li::before { content: "✓"; position: absolute; left: 0; color: var(--lx-accent); font-weight: 700; }

/* ==========================================================================
   CALLOUTS (label is added by CSS so every course reads the same)
   ========================================================================== */
.lx-analogy, .lx-note, .lx-warn, .lx-explain, .lx-ai, .lx-history {
  border-left: 4px solid; border-radius: 0 10px 10px 0; padding: .95rem 1.15rem; margin: 1.3rem 0; font-size: .97em; line-height: 1.8;
}
.lx-analogy > :last-child, .lx-note > :last-child, .lx-warn > :last-child, .lx-explain > :last-child, .lx-ai > :last-child, .lx-history > :last-child { margin-bottom: 0; }
.lx-analogy::before, .lx-note::before, .lx-warn::before, .lx-explain::before, .lx-ai::before, .lx-history::before { font-weight: 700; display: block; margin-bottom: .25rem; }
.lx-analogy { background: #fffbeb; border-color: #f59e0b; color: #78350f; }
.lx-analogy::before { content: "💡 উদাহরণ দিয়ে বুঝি"; color: #b45309; }
.lx-note { background: #eff6ff; border-color: #2563eb; color: #1e3a8a; }
.lx-note::before { content: "📝 খেয়াল রাখুন"; }
.lx-warn { background: #fef2f2; border-color: #dc2626; color: #991b1b; }
.lx-warn::before { content: "⚠️ সতর্কতা"; }
.lx-explain { background: var(--lx-accent-soft); border-color: var(--lx-accent); color: #14532d; }
.lx-explain::before { content: "✅ এটা কী হলো?"; color: var(--lx-accent-dark); }
.lx-ai { background: #f5f3ff; border-color: #7c3aed; color: #3b0764; }
.lx-ai::before { content: "🤖 AI-এর যুগে আপনার কাজ"; color: #6d28d9; }
.lx-history { background: #f8fafc; border-color: #64748b; color: #334155; }
.lx-history::before { content: "📜 একটু ইতিহাস"; color: #334155; }
.lx-analogy strong, .lx-note strong, .lx-warn strong, .lx-ai strong, .lx-history strong { color: inherit; }
.lx-explain strong { color: var(--lx-accent-dark); }

.lx-key { background: linear-gradient(135deg, #f0fdf4 0%, #ecfccb 100%); border: 1px solid var(--lx-accent-line); border-radius: 12px; padding: 1.15rem 1.3rem; margin: 1.4rem 0; }
.lx-label { display: inline-block; background: var(--lx-accent); color: #fff; font-size: .74em; font-weight: 700; letter-spacing: .5px; padding: 2px 9px; border-radius: 4px; margin-bottom: .55rem; }
.lx-key p, .lx-key li { color: var(--lx-accent-dark); font-size: .97em; }
.lx-key > :last-child { margin-bottom: 0; }

.lx-big { font-size: 1.12em; font-weight: 700; line-height: 1.7; text-align: center; padding: 1.1rem 1rem; margin: 1.6rem 0; color: var(--lx-ink); border-top: 2px solid var(--lx-accent-line); border-bottom: 2px solid var(--lx-accent-line); }

/* ==========================================================================
   VISUALS
   ========================================================================== */
.lx-figure { background: var(--lx-bg-soft); border: 1px solid var(--lx-line); border-radius: 12px; padding: 1.3rem 1rem; margin: 1.5rem 0; }
.lx-figure figcaption { margin-top: .8rem; font-size: .88em; color: var(--lx-mute); text-align: center; font-style: italic; line-height: 1.6; }
.lx-fig-title { text-align: center; font-weight: 700; color: var(--lx-ink); font-size: .98em; margin: 0 0 .1rem; }
.lx-fig-sub { text-align: center; font: .8em Roboto, sans-serif; color: var(--lx-mute); margin: 0 0 1rem; }

/* flow diagram (horizontal when there is room, vertical on phones) */
.lx-stage { container-type: inline-size; }
.lx-article .lx-flow { display: flex; flex-direction: column; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.lx-article .lx-flow li { margin: 0; }
.lx-flow-node { border: 2px solid var(--lx-line-2); border-radius: 10px; padding: .5rem .75rem; background: #fff; display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: .05rem .65rem; align-items: center; line-height: 1.45; }
.lx-flow-node .ic { font-size: 1.3em; line-height: 1; }
.lx-flow-node b { font-size: .93em; color: var(--lx-ink); }
.lx-flow-node code { font-size: .76em; justify-self: start; }
.lx-flow-node small { color: var(--lx-mute); font-size: .8em; grid-column: 2 / -1; }
.lx-flow-node.c-amber { border-color: #d97706; background: #fef3c7; }
.lx-flow-node.c-blue  { border-color: #2563eb; background: #dbeafe; }
.lx-flow-node.c-green { border-color: #16a34a; background: #dcfce7; }
.lx-flow-node.c-violet{ border-color: #7c3aed; background: #ede9fe; }
.lx-flow-node.c-rose  { border-color: #e11d48; background: #ffe4e6; }
.lx-flow-arrow { align-self: center; color: #475569; font-weight: 800; font-size: 1em; line-height: 1; }
.lx-flow-arrow::before { content: "↓"; }
@container (min-width: 620px) {
  .lx-article .lx-flow { flex-direction: row; align-items: stretch; }
  .lx-flow-node { flex: 1 1 0; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: .75rem .35rem; }
  .lx-flow-node .ic { font-size: 1.55em; margin-bottom: .2rem; }
  .lx-flow-node code { justify-self: center; }
  .lx-flow-node small { grid-column: auto; }
  .lx-flow-arrow { font-size: 1.2em; }
  .lx-flow-arrow::before { content: "→"; }
}

/* many-to-one build diagram (files → objects → linker → program) */
.lx-multi { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.15fr); gap: .5rem .6rem; align-items: center; }
.lx-multi-col { display: grid; gap: .5rem; }
.lx-chip { border: 2px solid var(--lx-line-2); border-radius: 8px; background: #fff; padding: .45rem .55rem; font: 600 .8em/1.4 var(--lx-mono); text-align: center; color: var(--lx-ink); transition: background .3s, border-color .3s; }
.lx-chip small { display: block; font: 500 .92em var(--lx-font); color: var(--lx-mute); }
.lx-chip.c-amber { border-color: #d97706; background: #fef3c7; }
.lx-chip.c-blue  { border-color: #2563eb; background: #dbeafe; }
.lx-chip.c-green { border-color: #16a34a; background: #dcfce7; }
.lx-chip.c-violet{ border-color: #7c3aed; background: #ede9fe; }
.lx-chip.is-line { border-color: #e11d48; background: #ffe4e6; box-shadow: 0 0 0 3px rgba(225,29,72,.18); }
.lx-arr { color: #475569; font-weight: 800; text-align: center; }
.lx-arr::before { content: "→"; }
@container (max-width: 560px) {
  .lx-multi { grid-template-columns: minmax(0, 1fr); }
  .lx-arr::before { content: "↓"; }
}

/* compare cards */
.lx-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: .9rem; margin: 1.3rem 0; }
.lx-card { border: 2px solid var(--lx-line-2); border-radius: 12px; padding: 1rem 1.05rem; background: #fff; }
.lx-card h4 { margin: 0 0 .35rem; font-size: 1.02em; color: var(--lx-ink); display: flex; gap: .45rem; align-items: center; }
.lx-card p { margin: 0; font-size: .93em; line-height: 1.7; color: var(--lx-soft); }
.lx-card .lx-tag { display: inline-block; font: .74em var(--lx-mono); color: var(--lx-mute); margin-top: .55rem; }
.lx-card.c-amber { border-color: #d97706; background: #fffbeb; } .lx-card.c-amber h4 { color: #92400e; }
.lx-card.c-blue  { border-color: #2563eb; background: #eff6ff; } .lx-card.c-blue h4 { color: #1e40af; }
.lx-card.c-green { border-color: #16a34a; background: #f0fdf4; } .lx-card.c-green h4 { color: #15803d; }
.lx-card.c-violet{ border-color: #7c3aed; background: #f5f3ff; } .lx-card.c-violet h4 { color: #5b21b6; }

/* tables */
.lx-table-wrap { overflow-x: auto; margin: 1.3rem 0; border: 1px solid var(--lx-line); border-radius: 12px; -webkit-overflow-scrolling: touch; }
.lx-table { width: 100%; border-collapse: collapse; font-size: .93em; line-height: 1.6; min-width: 540px; }
.lx-table th, .lx-table td { padding: .7rem .9rem; text-align: left; vertical-align: top; border-top: 1px solid var(--lx-line); }
.lx-table thead th { background: var(--lx-ink); color: #e2e8f0; font-size: .92em; font-weight: 600; border-top: 0; }
.lx-table tbody tr:nth-child(even) { background: var(--lx-bg-soft); }

/* tabs */
.lx-tabs { margin: 1.3rem 0; border: 1px solid var(--lx-line); border-radius: 12px; overflow: hidden; }
.lx-tablist { display: flex; overflow-x: auto; background: var(--lx-bg-soft); border-bottom: 1px solid var(--lx-line); }
.lx-tablist button { flex: none; border: 0; background: transparent; padding: .75rem 1rem; font: 600 .92em var(--lx-font); color: var(--lx-mute); cursor: pointer; border-bottom: 3px solid transparent; min-height: 44px; }
.lx-tablist button[aria-selected="true"] { color: var(--lx-accent-dark); border-bottom-color: var(--lx-accent); background: #fff; }
.lx-tabpanel { padding: 1rem 1.2rem; }
.lx-tabpanel > :last-child { margin-bottom: 0; }

/* ---------- stepper (interactive, step-by-step) ---------- */
.lx-stepper { margin: 1.5rem 0; border: 1px solid var(--lx-line); border-radius: 12px; background: var(--lx-bg-soft); overflow: hidden; }
.lx-stepper-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; padding: .75rem 1rem; background: var(--lx-ink); color: #f1f5f9; font-weight: 700; font-size: .95em; }
.lx-stepper-head .lx-badge { font: 600 .76em var(--lx-mono); color: #86efac; border: 1px solid rgba(74,222,128,.45); border-radius: 99px; padding: .15rem .55rem; margin-left: .4rem; }
.lx-stepper-count { font-weight: 500; color: #94a3b8; font-size: .82em; }
.lx-stage { padding: 1.1rem 1rem; }
.lx-stepper [data-s] { transition: opacity .35s ease; }
.lx-stepper [data-s].is-hidden { opacity: .12; }
.lx-stepper .is-hidden-full { display: none !important; }
.lx-stepper .lx-flow-node.is-now { box-shadow: 0 0 0 3px rgba(57,181,73,.35); }
.lx-caption { margin: 0; padding: .95rem 1.15rem; border-top: 1px solid var(--lx-line); background: #fff; min-height: 5.4rem; font-size: .97em; line-height: 1.8; color: var(--lx-body); }
.lx-caption b { color: var(--lx-accent-dark); }
.lx-caps { display: none; }
.lx-controls { display: flex; gap: .5rem; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: .7rem 1rem; border-top: 1px solid var(--lx-line); background: #fff; }
.lx-dots { display: flex; gap: .35rem; flex-wrap: wrap; }
.lx-dots button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--lx-line-2); background: #fff; font: 600 .76em var(--lx-font); color: var(--lx-mute); cursor: pointer; padding: 0; }
.lx-dots button.is-done { background: var(--lx-accent-soft); border-color: var(--lx-accent); color: var(--lx-accent-dark); }
.lx-dots button[aria-current="step"] { background: var(--lx-accent); border-color: var(--lx-accent); color: #fff; }
.lx-ctl-btns { display: flex; gap: .4rem; }
.lx-btn { display: inline-flex; align-items: center; gap: .45rem; font: 600 .88em/1.2 var(--lx-font); padding: .55rem .95rem; border-radius: 8px; border: 1px solid var(--lx-line-2); background: #fff; color: var(--lx-ink); cursor: pointer; text-decoration: none; min-height: 40px; }
.lx-btn:hover { border-color: var(--lx-accent); color: var(--lx-accent-dark); }
.lx-btn-primary { background: var(--lx-accent); border-color: var(--lx-accent); color: #fff; }
.lx-btn-primary:hover { background: var(--lx-accent-hover); border-color: var(--lx-accent-hover); color: #fff; }
.lx-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* file preview inside a stepper */
.lx-peek { margin-top: 1rem; border-radius: 10px; overflow: hidden; background: var(--lx-code-bg); }
.lx-peek-h { background: #2d2d2d; color: #cbd5e1; font: 600 .78em var(--lx-mono); padding: .45rem .9rem; display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.lx-peek-h span:last-child { font-family: var(--lx-font); font-weight: 500; color: #94a3b8; }
.lx-peek pre { margin: 0; color: var(--lx-code-ink); padding: .85rem 1rem; font: .82em/1.7 var(--lx-mono); overflow-x: auto; }
.lx-peek .dim { color: #6a9955; font-style: italic; }
.lx-peek .hot { color: #4ade80; font-weight: 600; }

/* command anatomy */
.lx-cmd { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; background: var(--lx-code-bg); color: var(--lx-code-ink); padding: 1rem; border-radius: 10px; font: 1em/1.6 var(--lx-mono); }
.lx-cmd .lx-tok { padding: .2rem .55rem; border-radius: 6px; background: rgba(255,255,255,.07); border: 1px solid transparent; }
.lx-cmd .lx-tok.is-now { border-color: #4ade80; background: rgba(57,181,73,.28); }
.lx-cmd .lx-sign { color: #6b7280; }

/* debugger trace */
.lx-trace { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 1rem; }
.lx-trace-code { background: var(--lx-code-bg); color: var(--lx-code-ink); border-radius: 10px; padding: .7rem 0; font: .84em/1.9 var(--lx-mono); overflow-x: auto; margin: 0; }
.lx-trace-code span { display: block; padding-right: .9rem; white-space: pre; border-left: 4px solid transparent; }
.lx-trace-code span i { display: inline-block; width: 2.3rem; text-align: right; padding-right: .8rem; color: #6b7280; font-style: normal; user-select: none; }
.lx-trace-code span.is-line { background: rgba(57,181,73,.22); border-left-color: var(--lx-accent); }
.lx-trace > * { min-width: 0; }   /* let grid columns shrink; wide tables scroll inside */
.lx-vars { border: 1px solid var(--lx-line); border-radius: 10px; overflow-x: auto; background: #fff; }
.lx-vars-h { background: var(--lx-ink); color: #e2e8f0; font-size: .8em; font-weight: 600; padding: .45rem .75rem; }
.lx-vars table { width: 100%; border-collapse: collapse; font: .9em var(--lx-mono); }
.lx-vars td { padding: .45rem .75rem; border-top: 1px solid var(--lx-line); }
.lx-vars tr:first-child td { border-top: 0; }
.lx-vars td:last-child { text-align: right; font-weight: 700; }
.lx-vars .is-changed td:last-child { color: var(--lx-accent-dark); background: var(--lx-accent-soft); }
.lx-term-out { background: var(--lx-code-bg); color: #4ade80; font: .85em/1.7 var(--lx-mono); padding: .6rem .8rem; border-radius: 10px; margin-top: .7rem; min-height: 2.7rem; white-space: pre-wrap; }
.lx-term-out::before { content: "আউটপুট ▸ "; color: #6b7280; }

/* ---------- glossary term (inline) ---------- */
.lx-term { font: inherit; color: var(--lx-accent-dark); background: none; border: 0; padding: 0; cursor: help; border-bottom: 1.5px dotted var(--lx-accent); line-height: inherit; }
.lx-term:hover { background: var(--lx-accent-soft); }
.lx-pop { position: absolute; z-index: 1500; max-width: min(330px, calc(100vw - 24px)); background: #0f172a; color: #e2e8f0; border-radius: 10px; padding: .85rem 1rem; font: .9rem/1.7 var(--lx-font); box-shadow: 0 14px 34px rgba(0,0,0,.25); }
.lx-pop b { display: block; font-size: .98rem; color: #4ade80; margin-bottom: .15rem; padding-right: 1.4rem; }
.lx-pop .lx-pop-say { font-size: .78rem; color: #94a3b8; display: block; margin-bottom: .35rem; }
.lx-pop code { background: rgba(255,255,255,.1); color: #fff; padding: 0 4px; border-radius: 3px; }
.lx-pop .lx-pop-x { position: absolute; right: .35rem; top: .3rem; background: none; border: 0; color: #94a3b8; font-size: 1.15rem; cursor: pointer; padding: .15rem .45rem; }

/* ---------- code peek (code is optional) ---------- */
.lx-code { margin: 1.3rem 0; border-radius: 12px; overflow: hidden; background: var(--lx-code-bg); box-shadow: 0 4px 14px rgba(15,23,42,.12); }
.lx-code-head { display: flex; align-items: center; gap: .6rem; padding: .6rem 1rem; background: #2d2d2d; color: #9ca3af; font: .78em var(--lx-mono); }
.lx-code-head .dots { display: inline-flex; gap: 6px; }
.lx-code-head .dots span { width: 11px; height: 11px; border-radius: 50%; background: #ef4444; }
.lx-code-head .dots span:nth-child(2) { background: #f59e0b; }
.lx-code-head .dots span:nth-child(3) { background: #22c55e; }
.lx-code-head .lang { margin-left: auto; }
.lx-code pre { margin: 0; color: var(--lx-code-ink); padding: 1rem 1.1rem; font: .87em/1.75 var(--lx-mono); overflow-x: auto; tab-size: 4; }
.lx-code pre code { background: none; color: inherit; padding: 0; font-size: inherit; font-weight: 400; word-break: normal; }
.lx-code .c-k { color: #569cd6; font-weight: 600; } .lx-code .c-s { color: #ce9178; } .lx-code .c-c { color: #6a9955; font-style: italic; }
.lx-code .c-n { color: #b5cea8; } .lx-code .c-f { color: #dcdcaa; } .lx-code .c-p { color: #c586c0; }
.lx-code-actions { display: flex; flex-wrap: wrap; gap: .5rem; padding: .65rem 1rem; border-top: 1px solid #333; }
.lx-code-actions button { display: inline-flex; align-items: center; gap: .4rem; background: rgba(57,181,73,.18); border: 1px solid rgba(57,181,73,.45); color: #86efac; font: 600 .82em var(--lx-font); padding: .4rem .85rem; border-radius: 6px; cursor: pointer; min-height: 36px; }
.lx-code-actions button.sec { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.18); color: #d1d5db; }
.lx-code-actions button[disabled] { opacity: .5; cursor: wait; }
.lx-code-out { margin: 0; background: #111; color: #a7f3d0; font: .85em/1.7 var(--lx-mono); padding: .8rem 1rem; white-space: pre-wrap; display: none; border-top: 1px solid #333; }
.lx-code-out.is-show { display: block; }
.lx-code-out.is-err { color: #fca5a5; }
.lx-pre { margin: 1rem 0; background: var(--lx-code-bg); color: var(--lx-code-ink); padding: .9rem 1.1rem; border-radius: 10px; font: .86em/1.75 var(--lx-mono); overflow-x: auto; }
.lx-pre.wrap { white-space: pre-wrap; word-break: break-word; }
.lx-pre code { background: none; color: inherit; padding: 0; font-size: inherit; font-weight: 400; }
.lx-pre .err { color: #f87171; } .lx-pre .c-c { color: #6a9955; font-style: italic; }

/* AI prompt box */
.lx-prompt { position: relative; background: #fff; border: 1px dashed #a78bfa; border-radius: 10px; padding: 2.4rem 1rem .9rem; margin: .7rem 0; font-size: .93em; line-height: 1.75; white-space: pre-wrap; color: #1f2937; }
.lx-prompt::before { content: "প্রম্পট"; position: absolute; left: .8rem; top: .55rem; font: 700 .78em var(--lx-font); color: #6d28d9; background: #ede9fe; padding: .1rem .5rem; border-radius: 4px; }
.lx-prompt-copy { position: absolute; top: .4rem; right: .45rem; font: 600 .84em var(--lx-font); padding: .3rem .65rem; border-radius: 6px; border: 1px solid #ddd6fe; background: #f5f3ff; color: #6d28d9; cursor: pointer; }

/* checklist */
.lx-article .lx-check { list-style: none; margin: .6rem 0 1rem; padding: 0; }
.lx-check li { position: relative; padding-left: 2rem; margin-bottom: .55rem; }
.lx-check input { position: absolute; left: 0; top: .32rem; width: 1.15rem; height: 1.15rem; accent-color: var(--lx-accent); }

/* ==========================================================================
   END-OF-LESSON SECTIONS
   ========================================================================== */
.lx-panel { background: #fff; border: 1px solid var(--lx-line); border-radius: 12px; padding: 1.3rem; margin: 2rem 0 1.5rem; }
.lx-article .lx-panel > h2 { font-size: 1.2rem; margin: 0 0 .4rem; padding: 0; border: 0; display: flex; align-items: center; gap: .55rem; }
.lx-panel > h2 i { color: var(--lx-accent); }
.lx-panel-sub { font-size: .92em; color: var(--lx-mute); margin-bottom: 1.1rem !important; }

/* discussion (ভাবনার প্রশ্ন) */
.lx-dq { background: var(--lx-bg-soft); border: 1px solid var(--lx-line); border-radius: 10px; margin-bottom: .7rem; overflow: hidden; transition: border-color .15s, background .15s; }
.lx-dq[open] { background: #fff; border-color: var(--lx-accent); }
.lx-dq > summary { list-style: none; cursor: pointer; padding: .9rem 1.1rem; display: flex; align-items: flex-start; gap: .7rem; font-size: .97em; font-weight: 600; color: var(--lx-ink); line-height: 1.65; }
.lx-dq > summary::-webkit-details-marker { display: none; }
.lx-dq > summary::after { content: "→ উত্তর"; margin-left: auto; flex-shrink: 0; font-size: .78em; font-weight: 700; color: var(--lx-accent); background: var(--lx-accent-soft); padding: 3px 10px; border-radius: 99px; border: 1px solid var(--lx-accent); }
.lx-dq[open] > summary::after { content: "↑ লুকান"; background: var(--lx-accent); color: #fff; }
.lx-qn { display: inline-block; font: 700 .74em var(--lx-mono); color: var(--lx-accent-dark); background: var(--lx-accent-soft); padding: 2px 8px; border-radius: 4px; flex-shrink: 0; margin-top: 3px; }
.lx-ans { padding: .3rem 1.15rem 1.1rem; border-top: 1px dashed var(--lx-line); font-size: .97em; color: var(--lx-soft); line-height: 1.8; }
.lx-ans p { margin: .65rem 0; }
.lx-ans ul, .lx-ans ol { margin: .5rem 0 .5rem 1.4rem; }

/* practice */
.lx-article .lx-practice-list { margin: 0; padding-left: 1.6rem; }
.lx-practice-list > li { margin-bottom: 1.05rem; color: var(--lx-soft); font-size: .97em; padding-left: .3rem; }
.lx-practice-list > li > strong:first-child { color: var(--lx-ink); }
.lx-pa { margin-top: .5rem; background: var(--lx-bg-soft); border: 1px solid var(--lx-line); border-radius: 8px; padding: .5rem .9rem; }
.lx-pa > summary { list-style: none; cursor: pointer; font-size: .84em; font-weight: 600; color: var(--lx-accent-dark); }
.lx-pa > summary::-webkit-details-marker { display: none; }
.lx-pa > summary::before { content: "✓ উত্তর দেখুন"; }
.lx-pa[open] > summary::before { content: "↑ লুকান"; }
.lx-pa-body { margin-top: .6rem; padding-top: .6rem; border-top: 1px dashed var(--lx-line); font-size: .92em; line-height: 1.85; }
.lx-pa-body > :last-child { margin-bottom: 0; }

/* quiz */
.lx-quiz { padding: 1.1rem 0; border-bottom: 1px dashed var(--lx-line); }
.lx-quiz:last-of-type { border-bottom: 0; }
.lx-quiz-q { font-weight: 600; color: var(--lx-ink); margin: 0 0 .7rem !important; font-size: .97em; line-height: 1.65; display: flex; gap: .6rem; align-items: flex-start; }
.lx-article .lx-opts { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.lx-article .lx-opts li { margin: 0; }
.lx-opt { width: 100%; text-align: left; font: 500 .95em/1.55 var(--lx-font); color: var(--lx-ink); background: #fff; border: 1px solid var(--lx-line-2); border-radius: 8px; padding: .6rem .9rem; cursor: pointer; display: flex; gap: .65rem; align-items: flex-start; min-height: 46px; }
.lx-opt:hover:not([disabled]) { border-color: var(--lx-accent); background: var(--lx-bg-soft); }
.lx-opt-k { flex: none; width: 1.55rem; height: 1.55rem; border-radius: 50%; background: var(--lx-bg-soft); border: 1px solid var(--lx-line); display: grid; place-items: center; font-size: .78em; font-weight: 700; }
.lx-opt.is-right { border-color: var(--lx-accent); background: var(--lx-accent-soft); color: var(--lx-accent-dark); }
.lx-opt.is-right .lx-opt-k { background: var(--lx-accent); border-color: var(--lx-accent); color: #fff; }
.lx-opt.is-wrong { border-color: #dc2626; background: #fef2f2; color: #991b1b; }
.lx-opt.is-wrong .lx-opt-k { background: #dc2626; border-color: #dc2626; color: #fff; }
.lx-opt[disabled] { cursor: default; }
.lx-feedback { margin-top: .6rem; padding: .65rem .9rem; border-radius: 8px; font-size: .9em; line-height: 1.7; display: none; }
.lx-feedback.is-show { display: block; }
.lx-feedback.ok { background: var(--lx-accent-soft); color: var(--lx-accent-dark); border-left: 3px solid var(--lx-accent); }
.lx-feedback.no { background: #fef2f2; color: #991b1b; border-left: 3px solid #dc2626; }
.lx-quiz-score { text-align: center; font-weight: 700; padding: 1rem; border-radius: 10px; background: var(--lx-accent-soft); color: var(--lx-accent-dark); margin-top: 1rem; }

/* order puzzle */
.lx-order { padding: 1.1rem 0; border-bottom: 1px dashed var(--lx-line); }
.lx-article .lx-order ol { list-style: none; padding: 0; margin: .4rem 0 1rem; display: grid; gap: .45rem; counter-reset: ord; }
.lx-order li { display: flex; align-items: center; gap: .6rem; border: 1px solid var(--lx-line-2); border-radius: 8px; padding: .45rem .55rem .45rem .9rem; background: #fff; margin: 0 !important; counter-increment: ord; }
.lx-order li::before { content: counter(ord, bengali); font-weight: 700; color: var(--lx-accent-dark); min-width: 1.1rem; }
.lx-order .lx-ord-t { flex: 1; line-height: 1.5; font-size: .95em; }
/* flex rows must be allowed to shrink so long inline code wraps instead of widening the page on phones */
.lx-order .lx-ord-t, .lx-opt > span:last-child, .lx-quiz-q > span:last-child, .lx-dq > summary > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.lx-order .lx-ord-b { display: flex; gap: .3rem; }
.lx-order .lx-ord-b button { width: 38px; height: 38px; border-radius: 7px; border: 1px solid var(--lx-line); background: var(--lx-bg-soft); cursor: pointer; }
.lx-order li.is-right { border-color: var(--lx-accent); background: var(--lx-accent-soft); }
.lx-order li.is-wrong { border-color: #dc2626; background: #fef2f2; }
.lx-row { display: flex; flex-wrap: wrap; gap: .5rem; }

/* glossary list */
.lx-article .lx-gloss { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: .6rem; margin: 0; padding: 0; }
.lx-gloss div { border: 1px solid var(--lx-line); border-radius: 10px; padding: .7rem .95rem; background: var(--lx-bg-soft); }
.lx-gloss dt { font-weight: 700; color: var(--lx-ink); }
.lx-gloss dt small { font-weight: 500; color: var(--lx-mute); margin-left: .35rem; }
.lx-gloss dd { margin: .15rem 0 0; color: var(--lx-soft); font-size: .92em; line-height: 1.7; }
.lx-gloss dd code { font-size: .82em; }

/* recap */
.lx-recap { background: linear-gradient(135deg, #020c1a 0%, #0d1f3c 60%, #0a2818 100%); color: #cbd5e1; border-radius: 12px; padding: 1.3rem 1.4rem; margin: 2rem 0 1.5rem; }
.lx-article .lx-recap h2 { color: #f1f5f9; border: 0; margin: 0 0 .6rem; padding: 0; font-size: 1.15rem; display: flex; gap: .5rem; align-items: center; }
.lx-recap h2 i { color: #4ade80; }
.lx-recap li { margin-bottom: .45rem; }
.lx-recap li::marker { color: #4ade80; }
.lx-recap strong { color: #fff; }
.lx-recap code { background: rgba(255,255,255,.1); color: #86efac; }
.lx-recap .lx-next-up { margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .95em; }

/* further reading */
.lx-article .lx-further { list-style: none; margin: 0; padding: 0; }
.lx-further li { position: relative; padding-left: 1.7rem; margin-bottom: .95rem; }
.lx-further li::before { content: "🔗"; position: absolute; left: 0; top: 0; font-size: .9em; }
.lx-further a { font-weight: 700; text-decoration: none; }
.lx-further a:hover { text-decoration: underline; }
.lx-further .badge { display: inline-block; font: 700 .7em var(--lx-font); background: var(--lx-accent-soft); color: var(--lx-accent-dark); padding: 1px 7px; border-radius: 4px; margin-left: .4rem; vertical-align: middle; }
.lx-further .desc { display: block; font-size: .88em; color: var(--lx-mute); }

/* footer: share + report */
.lx-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--lx-line); padding-top: 1.2rem; margin-top: 2rem; font-size: .9em; color: var(--lx-soft); }
.lx-share { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.lx-share a, .lx-share button { width: 38px; height: 38px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; text-decoration: none; border: 0; cursor: pointer; font-size: .95em; }
.lx-share .fb { background: #1877f2; } .lx-share .wa { background: #25d366; } .lx-share .tw { background: #0f172a; } .lx-share .li { background: #0a66c2; } .lx-share .cp { background: #64748b; }
.lx-report { color: var(--lx-mute); text-decoration: none; display: inline-flex; gap: .4rem; align-items: center; }
.lx-report:hover { color: #dc2626; }
.lx-done-wrap { text-align: center; margin: 2rem 0 0; }
.lx-done-wrap .lx-btn[aria-pressed="true"] { background: var(--lx-accent-soft); border-color: var(--lx-accent); color: var(--lx-accent-dark); }

/* pager */
.lx-pager { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: 1.6rem 0 0; }
.lx-pager a { display: block; border: 1px solid var(--lx-line); border-radius: 12px; padding: .95rem 1.15rem; text-decoration: none; color: var(--lx-ink); background: #fff; line-height: 1.5; font-weight: 600; transition: border-color .15s, box-shadow .15s; }
.lx-pager a:hover { border-color: var(--lx-accent); box-shadow: 0 4px 14px rgba(57,181,73,.12); }
.lx-pager small { display: block; color: var(--lx-accent-dark); font-size: .8em; font-weight: 700; margin-bottom: .2rem; }
.lx-pager .lx-next { text-align: right; grid-column: 2; }

.lx-article .ad-slot { margin: 2rem 0; }
/* reserve room while an ad loads (no layout jump); collapse completely when Google has no ad */
.lx-article .ad-slot ins.adsbygoogle { min-height: 250px; }
.lx-article .ad-slot:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none; }
.lx-article .ad-slot ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; min-height: 0; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* Desktop: the lesson frame uses the SAME box as the site header's .container
   (max 1400px, 2rem side padding) — so the sidebar starts under the logo and the
   right edge ends under the Search button. Text sits next to the sidebar. */
:root { --lx-frame-max: 1400px; --lx-frame-pad: 2rem; }
@media (min-width: 1024px) {
  .lx-shell { width: 100%; max-width: var(--lx-frame-max); margin: 0 auto; padding: 0 var(--lx-frame-pad); }
  .lx-hero { padding-inline: max(var(--lx-frame-pad), calc((100% - var(--lx-frame-max)) / 2 + var(--lx-frame-pad))); }
  .lx-side { border-left: 1px solid var(--lx-line); }
  .lx-article { margin: 0; }
  /* hero spans the whole frame (logo edge → Search edge), no empty columns */
  .lx-hero-inner { grid-column: 1 / -1; margin: 0; max-width: none; padding-left: 0; padding-right: 0;
                   display: grid; grid-template-columns: minmax(0, 1fr) 320px; column-gap: 3rem; align-items: center; }
  .lx-hero-inner > .lx-hero-card { display: block; }
}
@media (min-width: 1440px) {
  .lx-hero-inner { grid-template-columns: minmax(0, 1fr) 360px; }
}
@media (max-width: 1200px) { :root { --lx-side-w: 260px; } }

/* Desktop: two columns — course nav · content. The content fills everything
   from the sidebar to the frame's right edge (same line as the header's Search
   button), so the page reads as one balanced frame. */
@media (min-width: 1024px) {
  .lx-article { max-width: none; }
  .lx-main { padding-right: 0; }
}
@media (min-width: 1600px) {
  :root { --lx-fs: 1.0625rem; }
}

@media (max-width: 1023px) {
  .lx-hero, .lx-shell { grid-template-columns: minmax(0, 1fr); }
  .lx-hero-inner { grid-column: 1; }
  .lx-side {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 1200; height: 100%;
    width: min(88vw, 340px); transform: translateX(-105%); transition: transform .25s ease;
    box-shadow: 0 0 40px rgba(0,0,0,.25); visibility: hidden;
  }
  .lx-side.is-open { transform: translateX(0); visibility: visible; }
  .lx-side-close { display: flex; margin-left: auto; margin-bottom: .5rem; border: 1px solid var(--lx-line); background: #fff; border-radius: 10px; width: 42px; height: 42px; align-items: center; justify-content: center; cursor: pointer; font-size: 1.1em; }
  .lx-scrim { position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 1100; }
  .lx-scrim[hidden] { display: none; }
  .lx-bar { display: flex; align-items: center; gap: .6rem; position: sticky; top: var(--lx-header); z-index: 900; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--lx-line); padding: .5rem clamp(1rem, 4vw, 2rem); font-family: var(--lx-font); }
  .lx-bar-title { flex: 1; min-width: 0; font-size: .86em; color: var(--lx-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 640px) {
  .lx-main, .lx-hero-inner { padding-left: 16px; padding-right: 16px; }
  .lx-hero-inner { padding-top: 1.8rem; padding-bottom: 1.7rem; }
  .lx-trace { grid-template-columns: minmax(0, 1fr); }
  .lx-pager { grid-template-columns: 1fr; }
  .lx-pager .lx-next { grid-column: 1; }
  .lx-controls { justify-content: center; }
  .lx-dq > summary { flex-wrap: wrap; }
  .lx-dq > summary::after { margin-left: 0; }
  .lx-panel { padding: 1rem; }
  .lx-share > span { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .lx-page *, .lx-page *::before, .lx-page *::after { transition: none !important; animation: none !important; }
}

@media print {
  .lx-side, .lx-bar, .lx-hero-tools, .lx-progress, .lx-controls, .ad-slot, .site-header, .site-footer, .lx-foot, .lx-pager { display: none !important; }
  .lx-hero, .lx-shell { display: block; }
  .lx-stepper [data-s].is-hidden { opacity: 1; }
  .lx-caps { display: block; }
}

/* link to the course-wide glossary page under the per-lesson glossary */
.lx-gloss-all { margin: .9rem 0 0; }
.lx-gloss-all a { font-weight: 600; color: var(--lx-accent-dark); text-decoration: none; }
.lx-gloss-all a:hover { text-decoration: underline; }

/* SEO helpers (tools/apply_seo.py): English summary in the hero + "যে নামে খোঁজেন" phrases */
.lx-hero-sum { font-family: Roboto, sans-serif; color: #cbd5e1; font-size: .95em; line-height: 1.6; max-width: 46rem; margin: -.2rem 0 1rem; }
.lx-searchas { margin: 2rem 0 1.2rem; padding: .9rem 1.1rem; border: 1px dashed var(--lx-line-2); border-radius: 12px; background: #f8fafc; }
.lx-searchas-h { margin: 0 0 .55rem; font-size: .88em; font-weight: 600; color: var(--lx-mute); }
.lx-searchas ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.lx-searchas li { padding: .2rem .7rem; border-radius: 50px; background: #fff; border: 1px solid var(--lx-line); font-size: .85em; color: #334155; overflow-wrap: anywhere; }
.lx-searchas li[lang="en"] { font-family: Roboto, sans-serif; }
.cx-searchas-wrap { padding-top: 1rem; padding-bottom: 1rem; }