/* =============================================================
   ABCL TECH — AI Lesson Stylesheet (v2)
   - Bengali numerals for <ol>
   - Prism.js theme overrides
   - SVG flowchart components
   - Discussion-question + answer-toggle
   - Practice answer toggles
   ============================================================= */

/* ── Bengali numerals for ordered lists ─────────────────── */
@counter-style bengali-numerals {
  system: numeric;
  symbols: "০" "১" "২" "৩" "৪" "৫" "৬" "৭" "৮" "৯";
  suffix: "। ";
}

.lesson-body .concept ol,
.lesson-body .practice ol {
  list-style-type: bengali-numerals;
}
.lesson-body .practice ol > li,
.lesson-body .concept ol > li {
  padding-left: 0.3rem;
}

/* nested lists keep bullets */
.lesson-body .concept ol ul,
.lesson-body .practice ol ul {
  list-style-type: disc;
}

/* ── LESSON HEADER ─────────────────────────────────────── */
.lesson-header {
  background: linear-gradient(135deg, #020c1a 0%, #0d1f3c 50%, #0a2818 100%);
  color: #e2e8f0;
  padding: 2.4rem 1.2rem 2rem;
  position: relative;
  overflow: hidden;
}
.lesson-header::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 30%, rgba(57,181,73,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.lesson-header-inner {
  max-width: 820px; margin: 0 auto;
  position: relative; z-index: 1;
}
.lesson-crumb {
  font-family: 'Anek Bangla', sans-serif;
  font-size: 0.82rem;
  color: #94a3b8;
  margin-bottom: 1rem;
}
.lesson-crumb a {
  color: #4ade80; text-decoration: none;
}
.lesson-crumb a:hover { text-decoration: underline; }
.lesson-crumb .sep { color: #475569; margin: 0 0.4rem; }

.lesson-title {
  font-family: 'Anek Bangla', sans-serif;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: 700;
  color: #f1f5f9;
  line-height: 1.3;
  margin-bottom: 0.4rem;
}
.lesson-title-en {
  font-family: 'Roboto', sans-serif;
  font-size: 0.95rem; color: #94a3b8;
  font-weight: 500; letter-spacing: 0.3px;
  margin-bottom: 1rem;
}
.lesson-meta-row {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.lesson-meta-row .chip {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.13);
  color: #cbd5e1; padding: 0.25rem 0.7rem;
  border-radius: 50px; font-size: 0.78rem;
  font-family: 'Anek Bangla', sans-serif;
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.lesson-meta-row .chip i { color: #4ade80; font-size: 0.7rem; }

/* ── LESSON BODY ───────────────────────────────────────── */
.lesson-body {
  max-width: 820px; margin: 0 auto;
  padding: 2rem 1.2rem 3rem;
  font-family: 'Anek Bangla', sans-serif;
}

.lesson-outcomes {
  background: var(--hub-accent-soft);
  border: 1px solid #bbe2c0;
  border-left: 4px solid var(--hub-accent);
  border-radius: 10px;
  padding: 1.1rem 1.3rem;
  margin-bottom: 2rem;
}
.lesson-outcomes h2 {
  font-size: 1rem; font-weight: 700;
  color: var(--hub-accent-dark);
  margin-bottom: 0.6rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.lesson-outcomes h2 i { font-size: 0.95rem; }
.lesson-outcomes ul {
  list-style: none; padding: 0; margin: 0;
}
.lesson-outcomes li {
  font-size: 0.93rem; color: #1f6e2a;
  line-height: 1.7; padding: 0.15rem 0 0.15rem 1.3rem;
  position: relative;
}
.lesson-outcomes li::before {
  content: '✓'; position: absolute; left: 0;
  color: var(--hub-accent); font-weight: 700;
}

.concept {
  margin-bottom: 1.6rem;
  font-size: 1.02rem;
  color: #1f2937; line-height: 1.85;
}
.concept h2 {
  font-family: 'Anek Bangla', sans-serif;
  font-size: 1.35rem; font-weight: 700;
  color: var(--hub-text);
  margin: 1.8rem 0 0.7rem;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--hub-accent-soft);
}
.concept h3 {
  font-family: 'Anek Bangla', sans-serif;
  font-size: 1.1rem; font-weight: 700;
  color: var(--hub-text);
  margin: 1.2rem 0 0.5rem;
}
.concept p { margin-bottom: 0.85rem; }
.concept strong { color: var(--hub-accent-dark); font-weight: 700; }
.concept em { color: #475569; font-style: italic; }
.concept code {
  background: var(--hub-accent-soft);
  color: var(--hub-accent-dark);
  padding: 1px 6px; border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.88em; font-weight: 500;
}
.concept ul, .concept ol {
  margin: 0.5rem 0 1rem 1.4rem;
}
.concept li { margin-bottom: 0.4rem; }

.analogy {
  background: #fffbeb;
  border-left: 4px solid #f59e0b;
  border-radius: 0 10px 10px 0;
  padding: 0.9rem 1.1rem;
  margin: 1.2rem 0;
  font-size: 0.95rem;
  color: #78350f;
}
.analogy::before {
  content: '💡 উদাহরণ: ';
  font-weight: 700;
  color: #b45309;
}

.note {
  background: #eff6ff;
  border-left: 4px solid #2563eb;
  border-radius: 0 10px 10px 0;
  padding: 0.9rem 1.1rem;
  margin: 1.2rem 0;
  font-size: 0.95rem;
  color: #1e3a8a;
}
.note::before {
  content: '📝 খেয়াল রাখুন: ';
  font-weight: 700;
}

.warn {
  background: #fef2f2;
  border-left: 4px solid #dc2626;
  border-radius: 0 10px 10px 0;
  padding: 0.9rem 1.1rem;
  margin: 1.2rem 0;
  font-size: 0.95rem;
  color: #991b1b;
}
.warn::before {
  content: '⚠️ সতর্কতা: ';
  font-weight: 700;
}

.key-concept {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfccb 100%);
  border: 1px solid #bbe2c0;
  border-radius: 12px;
  padding: 1.2rem 1.3rem;
  margin: 1.4rem 0;
}
.key-concept .label {
  display: inline-block;
  background: var(--hub-accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}
.key-concept p {
  margin: 0; font-size: 0.97rem;
  color: #1f6e2a; line-height: 1.75;
}

/* ── FLOWCHART / DIAGRAM ──────────────────────────────── */
.flow-diagram {
  background: #f8fafc;
  border: 1px solid var(--hub-border);
  border-radius: 12px;
  padding: 1.4rem 1rem;
  margin: 1.4rem 0;
  text-align: center;
}
.flow-diagram svg {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.flow-diagram .caption {
  margin-top: 0.7rem;
  font-size: 0.88rem;
  color: var(--hub-text-mute);
  font-family: 'Anek Bangla', sans-serif;
  font-style: italic;
}
.flow-node {
  fill: var(--hub-accent-soft);
  stroke: var(--hub-accent);
  stroke-width: 1.5;
}
.flow-node-alt {
  fill: #eff6ff;
  stroke: #2563eb;
  stroke-width: 1.5;
}
.flow-node-warn {
  fill: #fef2f2;
  stroke: #dc2626;
  stroke-width: 1.5;
}
.flow-text {
  font-family: 'Anek Bangla', sans-serif;
  font-size: 13px;
  font-weight: 600;
  fill: #0f172a;
  text-anchor: middle;
}
.flow-text-en {
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  fill: #64748b;
  text-anchor: middle;
}
/* Same presentation-attribute-vs-stylesheet issue as above, but for `text-anchor`: lessons
   that position a caption/label at a specific left edge (not a box's center) set
   text-anchor="start" as an attribute, expecting normal SVG behavior -- but the CSS class
   rule above always wins, silently forcing it back to "middle" and centering long text on
   that edge coordinate, pushing most of it outside the diagram (the exact "text runs outside
   the box" bug). This restores every text-anchor value actually used across the site. */
.flow-text[text-anchor="start"], .flow-text-en[text-anchor="start"] { text-anchor: start; }
.flow-text[text-anchor="end"], .flow-text-en[text-anchor="end"] { text-anchor: end; }
/* SVG `fill="..."` is a presentation attribute, which CSS always overrides regardless of
   specificity -- lessons that darken a .flow-node and set fill="#fff" on its .flow-text
   (to keep the label readable on the dark box) were being silently overridden back to the
   default dark fill above. These attribute-selector rules restore every fill value actually
   used across the site's lesson diagrams so those overrides render as authored. */
.flow-text[fill="#fff"], .flow-text-en[fill="#fff"] { fill: #fff; }
.flow-text[fill="#64748b"], .flow-text-en[fill="#64748b"] { fill: #64748b; }
.flow-text[fill="#0f172a"], .flow-text-en[fill="#0f172a"] { fill: #0f172a; }
.flow-text[fill="#475569"], .flow-text-en[fill="#475569"] { fill: #475569; }
.flow-text[fill="#ffb4b4"], .flow-text-en[fill="#ffb4b4"] { fill: #ffb4b4; }
.flow-text[fill="#f87171"], .flow-text-en[fill="#f87171"] { fill: #f87171; }
.flow-text[fill="#cbd5e1"], .flow-text-en[fill="#cbd5e1"] { fill: #cbd5e1; }
.flow-text[fill="#991b1b"], .flow-text-en[fill="#991b1b"] { fill: #991b1b; }
.flow-text[fill="#94a3b8"], .flow-text-en[fill="#94a3b8"] { fill: #94a3b8; }
.flow-text[fill="#fecaca"], .flow-text-en[fill="#fecaca"] { fill: #fecaca; }
.flow-text[fill="#dc2626"], .flow-text-en[fill="#dc2626"] { fill: #dc2626; }
.flow-text[fill="#7f1d1d"], .flow-text-en[fill="#7f1d1d"] { fill: #7f1d1d; }
.flow-text[fill="#78350f"], .flow-text-en[fill="#78350f"] { fill: #78350f; }
.flow-text[fill="#1f6e2a"], .flow-text-en[fill="#1f6e2a"] { fill: #1f6e2a; }
.flow-text[fill="currentColor"], .flow-text-en[fill="currentColor"] { fill: currentColor; }
.flow-text[fill="#9ca3af"], .flow-text-en[fill="#9ca3af"] { fill: #9ca3af; }
.flow-text[fill="#39b549"], .flow-text-en[fill="#39b549"] { fill: #39b549; }
.flow-text[fill="#2563eb"], .flow-text-en[fill="#2563eb"] { fill: #2563eb; }
.flow-text[fill="#08210d"], .flow-text-en[fill="#08210d"] { fill: #08210d; }
.flow-text[fill="#f4a4a4"], .flow-text-en[fill="#f4a4a4"] { fill: #f4a4a4; }
.flow-text[fill="#d1fae5"], .flow-text-en[fill="#d1fae5"] { fill: #d1fae5; }
.flow-text[fill="#92400e"], .flow-text-en[fill="#92400e"] { fill: #92400e; }
.flow-text[fill="#4ade80"], .flow-text-en[fill="#4ade80"] { fill: #4ade80; }
.flow-text[fill="#22c55e"], .flow-text-en[fill="#22c55e"] { fill: #22c55e; }
.flow-text[fill="#1e3a8a"], .flow-text-en[fill="#1e3a8a"] { fill: #1e3a8a; }
.flow-text[fill="#1d4ed8"], .flow-text-en[fill="#1d4ed8"] { fill: #1d4ed8; }
.flow-arrow {
  fill: none;
  stroke: #475569;
  stroke-width: 1.5;
  marker-end: url(#arrowhead);
}
.flow-arrow-accent {
  fill: none;
  stroke: var(--hub-accent);
  stroke-width: 2;
  marker-end: url(#arrowhead-accent);
}

/* ── CODE CELL ─────────────────────────────────────────── */
.code-cell {
  background: #1e1e1e;
  border: 1px solid #2d2d2d;
  border-radius: 10px;
  margin: 1.2rem 0;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.code-cell-head {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.9rem;
  background: #2d2d2d;
  border-bottom: 1px solid #3d3d3d;
}
.code-cell-head .dots {
  display: inline-flex; gap: 0.3rem;
}
.code-cell-head .dots span {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.code-cell-head .dots span:nth-child(1) { background: #ef4444; }
.code-cell-head .dots span:nth-child(2) { background: #f59e0b; }
.code-cell-head .dots span:nth-child(3) { background: #22c55e; }
.code-cell-head .lang {
  color: #94a3b8;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
}
.code-cell pre {
  margin: 0;
  padding: 1rem 1.1rem;
  background: #1e1e1e !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.86rem;
  line-height: 1.7;
  overflow-x: auto;
  text-shadow: none !important;
}
.code-cell pre code {
  background: transparent !important;
  color: #e2e8f0;
  font-family: 'JetBrains Mono', monospace;
  font-size: inherit;
  text-shadow: none !important;
  padding: 0 !important;
}

/* Prism Tomorrow theme overrides for our dark cell */
.code-cell pre[class*="language-"],
.code-cell code[class*="language-"] {
  background: #1e1e1e !important;
  text-shadow: none !important;
  color: #e2e8f0;
}
.code-cell .token.comment,
.code-cell .token.prolog,
.code-cell .token.doctype,
.code-cell .token.cdata { color: #6a9955; font-style: italic; }
.code-cell .token.punctuation { color: #d4d4d4; }
.code-cell .token.property,
.code-cell .token.tag,
.code-cell .token.boolean,
.code-cell .token.number,
.code-cell .token.constant,
.code-cell .token.symbol,
.code-cell .token.deleted { color: #b5cea8; }
.code-cell .token.selector,
.code-cell .token.attr-name,
.code-cell .token.string,
.code-cell .token.char,
.code-cell .token.builtin,
.code-cell .token.inserted { color: #ce9178; }
.code-cell .token.operator,
.code-cell .token.entity,
.code-cell .token.url,
.code-cell .token.variable { color: #d4d4d4; }
.code-cell .token.atrule,
.code-cell .token.attr-value,
.code-cell .token.function,
.code-cell .token.class-name { color: #dcdcaa; }
.code-cell .token.keyword { color: #569cd6; font-weight: 600; }
.code-cell .token.regex,
.code-cell .token.important { color: #d16969; }

.code-cell-actions {
  display: flex; gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  background: #2d2d2d;
  border-top: 1px solid #3d3d3d;
}
.code-cell-actions button {
  background: rgba(57,181,73,0.18);
  color: #86efac;
  border: 1px solid rgba(57,181,73,0.40);
  padding: 0.35rem 0.85rem;
  border-radius: 6px;
  font-family: 'Anek Bangla', sans-serif;
  font-size: 0.78rem; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.code-cell-actions button:hover { background: rgba(57,181,73,0.30); }
.code-cell-actions button:disabled {
  opacity: 0.6; cursor: wait;
}
.code-cell-actions button.loading::after {
  content: ''; width: 10px; height: 10px;
  border: 2px solid #86efac; border-top-color: transparent;
  border-radius: 50%; display: inline-block;
  margin-left: 4px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.code-cell-actions button.secondary {
  background: rgba(255,255,255,0.05);
  color: #cbd5e1;
  border-color: rgba(255,255,255,0.15);
}
.code-cell-actions button.secondary:hover { background: rgba(255,255,255,0.10); }
.code-cell-output {
  display: none;
  padding: 0.85rem 1.1rem;
  background: #0a0f1c;
  border-top: 1px solid #3d3d3d;
  color: #94f0a0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  line-height: 1.7;
  white-space: pre-wrap;
  max-height: 320px;
  overflow-y: auto;
}
.code-cell-output.error { color: #fca5a5; }
.code-cell-output.show { display: block; }

.output-explain {
  background: var(--hub-accent-soft);
  border-radius: 8px;
  padding: 0.7rem 1rem;
  margin: -0.3rem 0 1.2rem;
  font-size: 0.9rem;
  color: var(--hub-accent-dark);
  border-left: 3px solid var(--hub-accent);
}
.output-explain::before {
  content: '🟢 এটা কী হলো? ';
  font-weight: 700;
}

/* ── DISCUSSION QUESTIONS (replaces চটপট প্রশ্ন) ────────── */
.discuss {
  background: #fff;
  border: 1px solid var(--hub-border);
  border-radius: 12px;
  padding: 1.3rem;
  margin: 2rem 0 1.5rem;
}
.discuss > h2 {
  font-family: 'Anek Bangla', sans-serif;
  font-size: 1.2rem; font-weight: 700;
  color: var(--hub-text);
  margin-bottom: 0.4rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.discuss > h2 i { color: var(--hub-accent); }
.discuss > p {
  font-size: 0.92rem; color: var(--hub-text-mute);
  margin-bottom: 1.1rem;
}

.discuss-q {
  background: var(--hub-bg-soft);
  border: 1px solid var(--hub-border);
  border-radius: 10px;
  padding: 0;
  margin-bottom: 0.7rem;
  overflow: hidden;
  transition: border-color 0.15s, background 0.15s;
}
.discuss-q[open] {
  background: #fff;
  border-color: var(--hub-accent);
}
.discuss-q > summary {
  font-family: 'Anek Bangla', sans-serif;
  font-size: 0.97rem; font-weight: 600;
  color: var(--hub-text);
  cursor: pointer;
  list-style: none;
  padding: 0.9rem 1.1rem;
  display: flex; align-items: flex-start;
  gap: 0.7rem;
}
.discuss-q > summary::-webkit-details-marker { display: none; }
.discuss-q > summary::after {
  content: '→ উত্তর';
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--hub-accent);
  background: var(--hub-accent-soft);
  padding: 3px 10px;
  border-radius: 50px;
  border: 1px solid var(--hub-accent);
  transition: all 0.15s;
}
.discuss-q[open] > summary::after {
  content: '↑ লুকান';
  background: var(--hub-accent);
  color: #fff;
}
.discuss-q .q-num {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem; font-weight: 700;
  color: var(--hub-accent-dark);
  background: var(--hub-accent-soft);
  padding: 2px 8px;
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 1px;
}
.discuss-q .answer {
  padding: 0.2rem 1.1rem 1.1rem;
  border-top: 1px dashed var(--hub-border);
  margin-top: 0.4rem;
  font-family: 'Anek Bangla', sans-serif;
  font-size: 0.93rem;
  color: var(--hub-text-soft);
  line-height: 1.85;
}
.discuss-q .answer strong {
  color: var(--hub-accent-dark);
}
.discuss-q .answer p { margin: 0.6rem 0; }
.discuss-q .answer ul, .discuss-q .answer ol {
  margin: 0.5rem 0 0.5rem 1.4rem;
}
.discuss-q .answer li { margin-bottom: 0.3rem; }

/* ── LEGACY QUIZ (kept for back-compat with older lessons) */
.quiz {
  background: #fff;
  border: 1px solid var(--hub-border);
  border-radius: 12px;
  padding: 1.3rem;
  margin: 2rem 0 1.5rem;
}
.quiz h2 {
  font-family: 'Anek Bangla', sans-serif;
  font-size: 1.15rem; font-weight: 700;
  color: var(--hub-text);
  margin-bottom: 0.4rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.quiz h2 i { color: var(--hub-accent); }
.quiz > p {
  font-size: 0.9rem; color: var(--hub-text-mute);
  margin-bottom: 1rem;
}
.quiz-q {
  margin-bottom: 1.2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px dashed var(--hub-border);
}
.quiz-q:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.quiz-q-text {
  font-weight: 600; color: var(--hub-text);
  margin-bottom: 0.6rem; font-size: 0.97rem;
}
.quiz-q-text .num {
  display: inline-block;
  background: var(--hub-accent-soft);
  color: var(--hub-accent-dark);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem; font-weight: 700;
  padding: 1px 7px;
  border-radius: 4px;
  margin-right: 0.5rem;
}
.quiz-options { display: grid; gap: 0.4rem; }
.quiz-option {
  background: #fff;
  border: 1px solid var(--hub-border);
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  font-family: 'Anek Bangla', sans-serif;
  font-size: 0.93rem;
  color: var(--hub-text);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}
.quiz-option:hover {
  border-color: var(--hub-accent);
  background: var(--hub-bg-soft);
}
.quiz-option.correct {
  background: var(--hub-accent-soft);
  border-color: var(--hub-accent);
  color: var(--hub-accent-dark);
}
.quiz-option.wrong {
  background: #fef2f2;
  border-color: #dc2626;
  color: #991b1b;
}
.quiz-option.disabled { cursor: default; pointer-events: none; }
.quiz-feedback {
  display: none;
  margin-top: 0.6rem;
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
  font-size: 0.88rem;
}
.quiz-feedback.show { display: block; }
.quiz-feedback.right {
  background: var(--hub-accent-soft);
  color: var(--hub-accent-dark);
  border-left: 3px solid var(--hub-accent);
}
.quiz-feedback.miss {
  background: #fef2f2;
  color: #991b1b;
  border-left: 3px solid #dc2626;
}

/* ── PRACTICE (with Bengali numerals + answer toggles) ─── */
.practice {
  background: #fff;
  border: 1px solid var(--hub-border);
  border-radius: 12px;
  padding: 1.3rem;
  margin: 1.5rem 0 2rem;
}
.practice h2 {
  font-family: 'Anek Bangla', sans-serif;
  font-size: 1.15rem; font-weight: 700;
  color: var(--hub-text);
  margin-bottom: 0.6rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.practice h2 i { color: var(--hub-accent); }
.practice ol {
  margin: 0;
  padding-left: 1.6rem;
  list-style-type: bengali-numerals;
}
.practice ol > li {
  margin-bottom: 1rem;
  color: var(--hub-text-soft);
  line-height: 1.8;
  font-size: 0.95rem;
  padding-left: 0.3rem;
}
.practice ol > li::marker {
  color: var(--hub-accent-dark);
  font-weight: 700;
}
.practice li strong { color: var(--hub-text); }

.practice-answer {
  margin-top: 0.5rem;
  background: var(--hub-bg-soft);
  border: 1px solid var(--hub-border);
  border-radius: 8px;
  padding: 0.5rem 0.9rem;
}
.practice-answer summary {
  font-family: 'Anek Bangla', sans-serif;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--hub-accent-dark);
  cursor: pointer;
  list-style: none;
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.practice-answer summary::-webkit-details-marker { display: none; }
.practice-answer summary::before {
  content: '✓ উত্তর দেখুন';
  font-size: 0.78rem;
}
.practice-answer[open] summary::before {
  content: '↑ লুকান';
}
.practice-answer .ans-body {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--hub-border);
  font-size: 0.9rem;
  color: var(--hub-text-soft);
  line-height: 1.85;
}
.practice-answer .ans-body strong { color: var(--hub-accent-dark); }
.practice-answer .ans-body p { margin: 0.4rem 0; }
.practice-answer .ans-body ul {
  margin: 0.4rem 0 0.4rem 1.2rem;
  list-style-type: disc;
}

/* ── NEXT-LESSON FOOTER ────────────────────────────────── */
.lesson-nav {
  display: flex; flex-wrap: wrap; gap: 1rem;
  max-width: 820px; margin: 0 auto 3rem;
  padding: 0 1.2rem;
}
.lesson-nav-card {
  flex: 1; min-width: 250px;
  background: #fff; border: 1px solid var(--hub-border);
  border-radius: 12px; padding: 1.1rem;
  text-decoration: none; color: inherit;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.lesson-nav-card:hover {
  border-color: var(--hub-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -10px rgba(57,181,73,0.25);
}
.lesson-nav-card .label {
  font-family: 'Anek Bangla', sans-serif;
  font-size: 0.78rem; color: var(--hub-text-mute);
  letter-spacing: 0.5px; font-weight: 600;
  margin-bottom: 0.3rem; display: flex; align-items: center; gap: 0.3rem;
}
.lesson-nav-card .label i { color: var(--hub-accent); }
.lesson-nav-card.next .label { justify-content: flex-end; }
.lesson-nav-card.next { text-align: right; }
.lesson-nav-card .title {
  font-family: 'Anek Bangla', sans-serif;
  font-size: 1rem; font-weight: 700;
  color: var(--hub-text);
  line-height: 1.4;
}

/* ── PROGRESS PILL ─────────────────────────────────────── */
.lesson-progress {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgba(57,181,73,0.18);
  border: 1px solid rgba(57,181,73,0.40);
  color: #86efac;
  padding: 0.25rem 0.7rem;
  border-radius: 50px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 0.7rem;
}
.lesson-progress .dot {
  width: 6px; height: 6px;
  background: #4ade80;
  border-radius: 50%;
  box-shadow: 0 0 6px #4ade80;
}

/* ── TL;DR CARD ────────────────────────────────────────── */
.tldr {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #fde68a;
  border-left: 4px solid #f59e0b;
  border-radius: 10px;
  padding: 1rem 1.2rem;
  margin-bottom: 1.5rem;
}
.tldr h2 {
  font-family: 'Anek Bangla', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #92400e;
  margin-bottom: 0.5rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.tldr h2 i { color: #b45309; font-size: 0.9rem; }
.tldr ul {
  list-style: none; padding: 0; margin: 0;
}
.tldr li {
  font-size: 0.92rem;
  color: #78350f;
  line-height: 1.7;
  padding: 0.15rem 0 0.15rem 1.4rem;
  position: relative;
}
.tldr li::before {
  content: '⚡';
  position: absolute; left: 0;
  font-size: 0.78rem;
}

/* ── GLOSSARY TOOLTIP ──────────────────────────────────── */
.gloss {
  border-bottom: 1px dotted var(--hub-accent);
  cursor: help;
  position: relative;
  font-weight: 500;
  color: var(--hub-accent-dark);
}
.gloss:hover, .gloss:focus {
  background: var(--hub-accent-soft);
}
.gloss .gloss-bubble {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #0f172a;
  color: #e2e8f0;
  font-family: 'Anek Bangla', sans-serif;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.6;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  width: max-content;
  max-width: 280px;
  text-align: left;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  z-index: 100;
  transition: opacity 0.15s, transform 0.15s;
  pointer-events: none;
}
.gloss .gloss-bubble::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #0f172a;
}
.gloss .gloss-bubble strong {
  color: #4ade80;
  display: block;
  margin-bottom: 0.2rem;
  font-weight: 700;
}
.gloss:hover .gloss-bubble,
.gloss:focus .gloss-bubble {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (max-width: 640px) {
  .gloss .gloss-bubble {
    max-width: 220px;
    font-size: 0.78rem;
  }
}

/* ── MARK-AS-READ button (top-right of lesson) ─────────── */
.mark-read-wrap {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  z-index: 5;
}
.mark-read-btn {
  background: rgba(255,255,255,0.08);
  color: #cbd5e1;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50px;
  padding: 0.4rem 0.95rem;
  font-family: 'Anek Bangla', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.mark-read-btn:hover {
  background: rgba(57,181,73,0.20);
  border-color: var(--hub-accent);
  color: #86efac;
}
.mark-read-btn.read {
  background: var(--hub-accent);
  color: #fff;
  border-color: var(--hub-accent);
}
.mark-read-btn.read::before {
  content: '✓ ';
}
.mark-read-btn:not(.read)::before {
  content: '○ ';
  opacity: 0.6;
}
@media (max-width: 640px) {
  .mark-read-wrap { position: static; margin-bottom: 0.7rem; }
}

/* ── FURTHER READING ───────────────────────────────────── */
.further {
  background: #fff;
  border: 1px solid var(--hub-border);
  border-radius: 12px;
  padding: 1.2rem 1.3rem;
  margin: 1.5rem 0;
}
.further h2 {
  font-family: 'Anek Bangla', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--hub-text);
  margin-bottom: 0.7rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.further h2 i { color: var(--hub-accent); }
.further ul {
  list-style: none;
  padding: 0; margin: 0;
}
.further li {
  margin-bottom: 0.7rem;
  padding-left: 1.6rem;
  position: relative;
  font-size: 0.93rem;
  line-height: 1.7;
}
.further li::before {
  content: '🔗';
  position: absolute; left: 0;
  font-size: 0.85rem;
}
.further a {
  color: var(--hub-accent-dark);
  text-decoration: none;
  font-weight: 600;
}
.further a:hover { text-decoration: underline; }
.further .desc {
  display: block;
  font-size: 0.85rem;
  color: var(--hub-text-mute);
  margin-top: 2px;
}
.further .badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 0.4rem;
  background: var(--hub-accent-soft);
  color: var(--hub-accent-dark);
}
.further .badge.video { background: #fef2f2; color: #991b1b; }
.further .badge.book  { background: #eff6ff; color: #1e3a8a; }
.further .badge.code  { background: #ede9fe; color: #5b21b6; }

/* ── LESSON FOOTER (share + report) ────────────────────── */
.lesson-footer {
  max-width: 820px; margin: 1.5rem auto 0;
  padding: 1rem 1.2rem;
  border-top: 1px dashed var(--hub-border);
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 0.7rem;
  font-family: 'Anek Bangla', sans-serif;
  font-size: 0.86rem;
  color: var(--hub-text-mute);
}
.share-row {
  display: inline-flex; gap: 0.4rem; align-items: center;
}
.share-row span { margin-right: 0.2rem; }
.share-btn {
  background: var(--hub-bg-soft);
  border: 1px solid var(--hub-border);
  color: var(--hub-text-soft);
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  font-size: 0.85rem;
}
.share-btn:hover {
  border-color: var(--hub-accent);
  color: var(--hub-accent);
  transform: translateY(-1px);
}
.share-btn.fb:hover { color: #1877f2; border-color: #1877f2; }
.share-btn.wa:hover { color: #25d366; border-color: #25d366; }
.share-btn.tw:hover { color: #1da1f2; border-color: #1da1f2; }
.share-btn.copy.copied { background: var(--hub-accent); color: #fff; border-color: var(--hub-accent); }

.report-typo {
  color: var(--hub-text-mute);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.report-typo:hover { color: var(--hub-accent); text-decoration: underline; }

/* ── RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 640px) {
  .lesson-body { padding: 1.5rem 1rem 2rem; }
  .lesson-header { padding: 2rem 1rem 1.5rem; }
  .concept { font-size: 0.97rem; }
  .code-cell pre { font-size: 0.78rem; }
  .lesson-nav { padding: 0 1rem; }
  .lesson-nav-card.next { text-align: left; }
  .lesson-nav-card.next .label { justify-content: flex-start; }
  .discuss-q > summary::after { font-size: 0.7rem; padding: 2px 8px; }
}