/* ========== INTERACTIVE LESSONS (lessons.html + lesson-*.html) ==========
   Shared by every lesson page except lesson-sorting-algorithms.html,
   which keeps its own inline styles. */

.lesson-wrap { max-width: 880px; margin: 0 auto; padding: 150px 6% 70px; }
.lesson-crumb {
  display: inline-block; margin-bottom: 18px; color: var(--text-muted);
  text-decoration: none; font-size: 0.85rem; font-weight: 600;
}
.lesson-crumb:hover { color: var(--brand-primary); }
.lesson-badge {
  display: inline-block; padding: 6px 16px; border-radius: 30px;
  border: 1px solid var(--brand-primary); color: var(--brand-primary);
  font-weight: 700; font-size: 0.78rem; margin: 0 0 16px 12px;
}
.lesson-crumb + .lesson-badge { margin-left: 12px; }
.lesson-wrap h1 { font-size: 2.1rem; margin: 0 0 10px; line-height: 1.2; }
.lesson-wrap > p.lead { color: var(--text-muted); font-size: 1rem; max-width: 640px; margin-bottom: 30px; }

.lesson-panel {
  background: var(--card-bg); border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px; padding: 24px; margin-bottom: 20px;
}
.lesson-panel h2, .lesson-panel h3 { margin: 0 0 10px; }
.lesson-panel h2 { font-size: 1.25rem; }
.lesson-panel h3 { font-size: 1.05rem; }
.lesson-hint { color: var(--text-muted); font-size: 0.9rem; margin: 0 0 14px; }
.lesson-explain { font-size: 0.95rem; line-height: 1.8; color: var(--text-muted); }
.lesson-explain b { color: var(--text-light); }
.lesson-explain ul { margin: 8px 0 0 18px; padding: 0; }
.lesson-explain li { margin-bottom: 6px; }

/* ---- Controls ---- */
.lesson-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }
.lesson-controls select, .lesson-controls button, .lesson-btn {
  font-family: inherit; font-size: 0.88rem; font-weight: 600;
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04); color: var(--text-light);
  padding: 10px 16px; cursor: pointer;
}
.lesson-controls button:hover, .lesson-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.lesson-controls button.primary, .lesson-btn.primary { background: var(--brand-primary); color: #050816; border: none; }
.lesson-controls button.primary:hover, .lesson-btn.primary:hover { color: #050816; box-shadow: 0 0 18px var(--brand-glow); }
.lesson-controls select option { background: #000000; color: #ffffff; }
.lesson-controls button:disabled, .lesson-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.lesson-input {
  font-family: inherit; font-size: 1rem; font-weight: 700; width: 100%;
  padding: 10px 12px; border-radius: 12px; box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.05);
  color: var(--text-light); outline: none;
}
.lesson-input:focus { border-color: var(--brand-primary); }
.lesson-field { display: flex; flex-direction: column; gap: 6px; font-size: 0.78rem; color: var(--text-muted); font-weight: 600; }

.lesson-step-msg { min-height: 1.4em; color: var(--brand-primary); font-weight: 700; font-size: 0.92rem; margin-top: 12px; line-height: 1.6; }
.ok { color: #2ee68b; }
.bad { color: #ff6b6b; }

/* ---- Binary converter ---- */
.nibbles { display: flex; justify-content: center; gap: 16px; margin: 6px 0 20px; }
.nibble-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.nibble { display: flex; gap: 6px; }
.bit-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bit-place { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); }
.bit {
  width: clamp(32px, 9vw, 56px); height: clamp(48px, 12vw, 72px);
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04); color: var(--text-muted);
  font-family: inherit; font-size: 1.5rem; font-weight: 800; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.bit:hover { border-color: var(--brand-primary); }
.bit:active { transform: scale(0.94); }
.bit.on { background: var(--brand-primary); color: #050816; border-color: transparent; box-shadow: 0 0 16px var(--brand-glow); }
.nibble-hex {
  min-width: 36px; text-align: center; padding: 4px 10px; border-radius: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.2); color: var(--text-light); font-weight: 800;
}
.conv-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.big-code { font-family: ui-monospace, Consolas, monospace; font-size: 1.7rem; font-weight: 800; letter-spacing: 3px; color: var(--text-light); }
.chal-prompt { font-size: 1.05rem; line-height: 1.7; margin: 0 0 14px; }
.chal-answer { display: flex; gap: 10px; max-width: 360px; margin-bottom: 12px; }
.chal-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.chal-score { color: var(--text-muted); font-size: 0.85rem; margin-left: auto; }

/* ---- Graph plotter ---- */
.graph-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.graph-svg { width: 100%; max-width: 480px; height: auto; display: block; margin: 0 auto; border-radius: 14px; background: rgba(0, 0, 0, 0.25); }
.g-grid { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; }
.g-axis { stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.6; }
.g-tick { fill: var(--text-muted); font-size: 9px; font-family: inherit; }
.g-curve { fill: none; stroke: var(--brand-primary); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px var(--brand-glow)); }
.g-dot { fill: #ffb648; stroke: #050816; stroke-width: 1.5; }
.g-lbl { fill: #ffb648; font-size: 10px; font-weight: 700; font-family: inherit; }
.slider-row { display: grid; grid-template-columns: 34px 1fr 52px; gap: 10px; align-items: center; margin-bottom: 12px; font-size: 0.9rem; }
.slider-row label { font-weight: 800; color: var(--text-light); }
.slider-row input[type=range] { width: 100%; accent-color: var(--brand-primary); }
.slider-row output { text-align: right; font-weight: 700; color: var(--brand-primary); }
.equation { font-size: 1.4rem; font-weight: 800; color: var(--text-light); margin: 4px 0 14px; }
.graph-info { margin: 0; padding-left: 18px; font-size: 0.9rem; line-height: 1.7; color: var(--text-muted); }
.graph-info b { color: var(--text-light); }

/* ---- Expanding brackets (grid method) ---- */
.q-big { font-size: 1.6rem; font-weight: 800; margin: 0 0 16px; color: var(--text-light); }
.gridm { border-collapse: separate; border-spacing: 6px; margin: 0 auto 14px; }
.gridm th, .gridm td {
  min-width: 78px; height: 54px; text-align: center; border-radius: 12px;
  font-size: 1.1rem; font-weight: 800; padding: 4px 10px;
}
.gridm th { background: rgba(255, 255, 255, 0.06); color: var(--text-light); }
.gridm td { border: 1px dashed rgba(255, 255, 255, 0.18); color: transparent; }
.gridm td.show.c-x2 { background: rgba(0, 212, 255, 0.16); border-style: solid; border-color: rgba(0, 212, 255, 0.5); color: #7fe3ff; }
.gridm td.show.c-x { background: rgba(255, 182, 72, 0.16); border-style: solid; border-color: rgba(255, 182, 72, 0.5); color: #ffcf85; }
.gridm td.show.c-k { background: rgba(46, 230, 139, 0.16); border-style: solid; border-color: rgba(46, 230, 139, 0.5); color: #7ff0b8; }
.work-line { font-size: 1.05rem; line-height: 1.7; margin: 6px 0; color: var(--text-muted); }
.work-line b { color: var(--text-light); }
.answer-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 460px; margin: 12px 0; }

/* ---- Factorising ---- */
.pair-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.pair-btn {
  font-family: inherit; font-size: 0.95rem; font-weight: 700; padding: 10px 14px;
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04); color: var(--text-light); cursor: pointer;
}
.pair-btn:hover:not(:disabled) { border-color: var(--brand-primary); color: var(--brand-primary); }
.pair-btn.wrong { border-color: #ff6b6b; color: #ff6b6b; opacity: 0.75; cursor: default; }
.pair-btn.right { border-color: #2ee68b; background: rgba(46, 230, 139, 0.15); color: #2ee68b; cursor: default; }
.pair-btn.hint { box-shadow: 0 0 0 2px #ffb648; }
.factor-steps { margin-top: 16px; }
.factor-steps .work-line { animation: lessonFade 0.4s ease; }
@keyframes lessonFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---- Next-step panel ---- */
.lesson-next { text-align: center; padding: 28px; }
.lesson-next p { color: var(--text-muted); margin: 0 0 16px; }
.lesson-next-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 16px; }
.next-btn {
  display: inline-block; padding: 11px 22px; border-radius: 14px; text-decoration: none;
  font-weight: 700; font-size: 0.9rem; border: 1px solid rgba(255, 255, 255, 0.15); color: var(--text-light);
}
.next-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.next-btn.primary { background: var(--brand-primary); color: #050816; border: none; }
.next-btn.primary:hover { color: #050816; box-shadow: 0 0 18px var(--brand-glow); }
.lesson-next .fb a { color: var(--brand-primary); font-weight: 700; text-decoration: none; font-size: 0.9rem; }

/* ---- Hub (lessons.html) ---- */
.hub-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.hub-filter {
  font-family: inherit; font-size: 0.9rem; font-weight: 600; padding: 10px 20px; border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); color: var(--text-light); cursor: pointer;
}
.hub-filter:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.hub-filter.active { background: var(--brand-primary); color: #050816; border-color: transparent; }
.hub-subject { margin-bottom: 40px; }
.hub-subject > h2 { font-size: 1.5rem; margin: 0 0 4px; }
.hub-level { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--brand-primary); margin: 22px 0 12px; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.lesson-card {
  display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 20px; text-decoration: none; color: inherit;
  background: var(--card-bg); border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.lesson-card:hover { transform: translateY(-4px); border-color: var(--brand-primary); box-shadow: 0 12px 28px var(--brand-glow); }
.lesson-card h3 { margin: 0; font-size: 1.1rem; line-height: 1.3; }
.lesson-card p { margin: 0; color: var(--text-muted); font-size: 0.88rem; line-height: 1.6; flex: 1; }
.lc-level { align-self: flex-start; padding: 3px 12px; border-radius: 20px; font-size: 0.72rem; font-weight: 700; border: 1px solid rgba(255, 255, 255, 0.18); color: var(--text-muted); }
.lc-go { color: var(--brand-primary); font-weight: 700; font-size: 0.88rem; }

@media (max-width: 760px) {
  .graph-layout { grid-template-columns: 1fr; }
  .conv-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .lesson-wrap { padding-top: 120px; }
  .lesson-wrap h1 { font-size: 1.6rem; }
  .lesson-badge { margin-left: 0; }
  .nibbles { gap: 10px; }
  .nibble { gap: 4px; }
  .gridm th, .gridm td { min-width: 62px; height: 48px; font-size: 0.95rem; }
}

/* ---- Guided steps (binary conversions, expanding brackets) ---- */
.gsteps { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.gstep {
  display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02); animation: lessonFade 0.35s ease;
}
.gstep.current { border-color: var(--brand-primary); background: rgba(0, 212, 255, 0.05); }
.gstep.done { border-color: rgba(46, 230, 139, 0.35); }
.gstep.revealed { border-color: rgba(255, 182, 72, 0.35); }
.gstep-num {
  font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-muted); padding-top: 9px;
}
.gstep.current .gstep-num { color: var(--brand-primary); }
.gstep-q { font-size: 1.05rem; line-height: 2.1; color: var(--text-light); }
.g-code sub { font-size: 0.6em; letter-spacing: 0; color: var(--text-muted); }
.gstep-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.gstep-msg { font-size: 0.92rem; line-height: 1.6; margin-top: 8px; color: var(--text-muted); }
.gstep-msg:empty { display: none; }
.gstep-msg.ok { color: #7ff0b8; }
.gstep-msg.bad { color: #ff8f8f; }
.gstep-msg b { color: var(--text-light); }
.g-hint { color: var(--text-muted); }
.gin {
  font-family: ui-monospace, Consolas, monospace; font-size: 1.05rem; font-weight: 800; text-align: center;
  padding: 6px 8px; margin: 0 4px; border-radius: 10px; min-width: 3.2em; max-width: 9em; box-sizing: content-box;
  border: 2px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.06); color: var(--text-light); outline: none;
}
.gin:focus { border-color: var(--brand-primary); }
.gin.good { border-color: #2ee68b; color: #7ff0b8; background: rgba(46, 230, 139, 0.10); }
.gin.bad { border-color: #ff6b6b; color: #ff8f8f; background: rgba(255, 107, 107, 0.10); }
.gin.shown { border-color: #ffb648; color: #ffcf85; background: rgba(255, 182, 72, 0.10); }
.gin:disabled { opacity: 1; -webkit-text-fill-color: currentColor; }
.g-code {
  font-family: ui-monospace, Consolas, monospace; font-weight: 800; letter-spacing: 1px;
  padding: 2px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.07); color: var(--text-light); white-space: nowrap;
}
.gstep-end { padding: 14px 16px; border-radius: 16px; background: rgba(46, 230, 139, 0.08); color: var(--text-light); font-weight: 700; line-height: 1.8; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.gstep-end .lesson-btn { margin-left: 8px; }
.pv-table { display: inline-block; margin: 8px 0 0; vertical-align: top; }
.pv-row { display: grid; grid-template-columns: repeat(8, minmax(30px, 46px)); gap: 4px; text-align: center; }
.pv-row span { padding: 4px 0; border-radius: 8px; line-height: 1.6; }
.pv-head span { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); }
.pv-bits span { font-family: ui-monospace, Consolas, monospace; font-size: 1.15rem; font-weight: 800; background: rgba(255, 255, 255, 0.05); color: var(--text-muted); }
.pv-bits span.pv-on { background: rgba(0, 212, 255, 0.18); color: #7fe3ff; }
.ref-row { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; max-width: 420px; margin: 4px 0 14px; }
.ref-row span { text-align: center; padding: 6px 0; border-radius: 10px; background: rgba(255, 255, 255, 0.05); color: var(--text-light); font-weight: 800; font-size: 0.85rem; }
@media (max-width: 640px) {
  .gstep { grid-template-columns: 1fr; gap: 2px; padding: 12px; }
  .gstep-num { padding-top: 0; }
  .gstep-q { font-size: 0.98rem; }
  .pv-row { grid-template-columns: repeat(8, minmax(26px, 1fr)); }
}
/* Grid method with answer boxes inside the grid */
.gridm-in { margin: 12px 0 4px; }
.gridm-in td { color: var(--text-light); border-style: solid; white-space: nowrap; }
.gridm-in td.c-x2 { background: rgba(0, 212, 255, 0.08); border-color: rgba(0, 212, 255, 0.35); }
.gridm-in td.c-x { background: rgba(255, 182, 72, 0.08); border-color: rgba(255, 182, 72, 0.35); }
.gridm-in td.c-k { background: rgba(46, 230, 139, 0.08); border-color: rgba(46, 230, 139, 0.35); }
.gridm-in .gin { min-width: 2.4em; margin: 0 2px; }
.sfx { font-weight: 800; color: var(--text-light); }
@media (max-width: 640px) {
  .gridm-in { border-spacing: 4px; }
  .gridm-in th, .gridm-in td { min-width: 0; padding: 4px 6px; }
  .gridm-in .gin { min-width: 1.8em; padding: 6px 4px; font-size: 0.95rem; }
}

/* ---- Walkthrough cards ("Learn it") ---- */
.wt-card { border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px; padding: 18px 20px; background: rgba(255, 255, 255, 0.02); }
.wt-top { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.wt-count { font-size: 0.75rem; font-weight: 800; color: var(--brand-primary); white-space: nowrap; }
.wt-title { margin: 0; font-size: 1.1rem; }
.wt-body { color: var(--text-muted); font-size: 0.97rem; line-height: 1.75; min-height: 150px; animation: lessonFade 0.3s ease; }
.wt-body b { color: var(--text-light); }
.wt-body p { margin: 0 0 10px; }
.wt-body ul, .wt-body ol { margin: 6px 0 10px 18px; padding: 0; }
.wt-body li { margin-bottom: 8px; }
.wt-key { color: var(--text-light) !important; font-weight: 700; padding: 10px 14px; border-radius: 12px; background: rgba(0, 212, 255, 0.08); border-left: 3px solid var(--brand-primary); }
.wt-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.wt-dots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.wt-dot { width: 10px; height: 10px; border-radius: 50%; border: none; padding: 0; background: rgba(255, 255, 255, 0.18); cursor: pointer; }
.wt-dot.on { background: var(--brand-primary); }
.wt-pairs { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
.wt-pairs span { padding: 6px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); color: var(--text-light); font-weight: 700; }
.wt-pairs span.yes { background: rgba(46, 230, 139, 0.15); color: #7ff0b8; }
.wt-pairs span.no { color: #ff8f8f; }
.wt-grid { margin: 8px 0 12px; }
.wt-grid td { color: var(--text-light); border-style: solid; }
.hl { font-weight: 800; padding: 0 3px; border-radius: 5px; }
.hl-a { color: #ffcf85; background: rgba(255, 182, 72, 0.15); }
.hl-b { color: #7fe3ff; background: rgba(0, 212, 255, 0.15); }
.hl-c { color: #7ff0b8; background: rgba(46, 230, 139, 0.15); }

/* ---- Practice extras ---- */
.lesson-panel > h2 + .lesson-controls, .lesson-panel > .lesson-hint + .lesson-controls { margin-top: 4px; }
.gsel { font-family: inherit; font-size: 0.95rem; text-align: left; padding: 6px 8px; cursor: pointer; }
.gsel option { background: #050816; color: #fff; }
.pair-rows { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; }
.pair-rows span { white-space: nowrap; }
.vt { border-collapse: separate; border-spacing: 4px; margin: 8px 0 2px; }
.vt th, .vt td { text-align: center; padding: 2px 4px; font-weight: 800; color: var(--text-light); }
.vt th { color: var(--text-muted); font-size: 0.85rem; padding-right: 8px; }
.vt td.vx { background: rgba(255, 255, 255, 0.06); border-radius: 8px; min-width: 2.6em; }
.vt .gin { min-width: 2.2em; margin: 0; padding: 6px 2px; }
.vt-wrap { overflow-x: auto; max-width: 100%; }
.mini-graph { width: 100%; max-width: 320px; display: block; margin: 10px auto 0; border-radius: 12px; background: rgba(0, 0, 0, 0.25); }
@media (max-width: 640px) {
  .wt-card { padding: 14px; }
  .wt-body { font-size: 0.93rem; }
  .vt .gin { min-width: 1.9em; font-size: 0.9rem; }
}
.wt-nav .lesson-btn { white-space: nowrap; }
.inline-link { color: var(--brand-primary); font-weight: 700; text-decoration: none; }
.hl { white-space: nowrap; }

/* ---- "How was this lesson?" feedback box ---- */
.fb-panel { border-color: rgba(0, 212, 255, 0.25); }
.fb-label { font-weight: 700; margin: 6px 0 8px; color: var(--text-light); }
.fb-choices { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.fb-choice {
  font-family: inherit; font-size: 0.95rem; font-weight: 700; padding: 10px 18px; border-radius: 30px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.04); color: var(--text-light);
}
.fb-choice:hover { border-color: var(--brand-primary); }
.fb-choice.on { background: var(--brand-primary); color: #050816; border-color: transparent; }
.fb-field { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; font-weight: 700; color: var(--text-light); margin-bottom: 12px; flex: 1; min-width: 0; }
.fb-field span { font-weight: 500; color: var(--text-muted); }
.fb-field textarea, .fb-field input, .fb-field select {
  font-family: inherit; font-size: 0.95rem; padding: 10px 12px; border-radius: 12px; resize: vertical; width: 100%; box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.05); color: var(--text-light); outline: none;
}
.fb-field select option { background: #050816; color: #fff; }
.fb-field textarea:focus, .fb-field input:focus, .fb-field select:focus { border-color: var(--brand-primary); }
.fb-row { display: flex; gap: 12px; flex-wrap: wrap; }
.fb-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.fb-msg { margin-top: 10px; font-size: 0.9rem; font-weight: 600; color: var(--text-muted); }
.fb-msg.bad { color: #ff8f8f; }
.fb-thanks { font-weight: 800; color: #7ff0b8; font-size: 1.05rem; margin: 4px 0 8px; }

/* ===== Batch 1 lessons ===== */
.q-big .g-code { font-size: 0.95em; }
.ladder { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 0 12px; }
.ladder span { padding: 5px 10px; border-radius: 10px; background: rgba(0, 212, 255, 0.12); color: #7fe3ff; font-weight: 800; font-size: 0.85rem; }
.ladder i { font-style: normal; font-size: 0.72rem; color: var(--text-muted); font-weight: 700; }
.eq-pair { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: 0.9em; }
.eq-pair span { font-family: ui-monospace, Consolas, monospace; padding: 4px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); align-self: flex-start; }
/* Triangles */
.tri-svg { display: block; width: 100%; max-width: 300px; margin: 10px 0 0; }
.tri { fill: rgba(0, 212, 255, 0.06); stroke: rgba(255, 255, 255, 0.7); stroke-width: 2; stroke-linejoin: round; }
.tri-right, .tri-arc { fill: none; stroke: rgba(255, 255, 255, 0.6); stroke-width: 1.5; }
.tri-lbl { fill: var(--text-light); font-size: 15px; font-weight: 800; font-family: inherit; }
.tri-lbl.ang { fill: #ffcf85; font-size: 13px; }
.tri-lbl.unk { fill: #7fe3ff; font-size: 17px; }
/* Spreadsheet */
.sheet-wrap { overflow-x: auto; margin: 10px 0 0; max-width: 100%; }
.sheet { border-collapse: collapse; font-size: 0.78rem; font-weight: 600; background: rgba(255, 255, 255, 0.02); }
.sheet th, .sheet td { border: 1px solid rgba(255, 255, 255, 0.12); padding: 4px 8px; text-align: left; white-space: nowrap; color: var(--text-light); min-width: 34px; }
.sheet th { background: rgba(255, 255, 255, 0.07); color: var(--text-muted); text-align: center; font-weight: 700; }
.sheet td.src { background: rgba(0, 212, 255, 0.14); }
.sheet td.dst { background: rgba(255, 182, 72, 0.18); }
.f-cell { font-family: ui-monospace, Consolas, monospace; color: #7fe3ff; }
.t-cell { color: #ffcf85; font-weight: 800; }
/* Logic gates */
.gate-explore { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 10px; }
.gate-io { display: flex; flex-direction: column; gap: 10px; }
.sw, .lamp {
  font-family: inherit; font-weight: 800; font-size: 0.95rem; padding: 10px 14px; border-radius: 12px; min-width: 76px; text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.04); color: var(--text-light);
}
.sw { cursor: pointer; }
.sw.on { background: var(--brand-primary); color: #050816; border-color: transparent; }
.lamp.on { background: #ffd54a; color: #050816; border-color: transparent; box-shadow: 0 0 22px rgba(255, 213, 74, 0.6); }
.gate-svg { width: 150px; height: 76px; }
.g-sym { fill: rgba(0, 212, 255, 0.08); stroke: #7fe3ff; stroke-width: 2.5; }
.g-wire { stroke: rgba(255, 255, 255, 0.6); stroke-width: 2.5; }
.q-big .gate-svg { display: block; margin-top: 6px; }
.tt td, .tt th { min-width: 2.2em; }
.tt tr.cur td { background: rgba(0, 212, 255, 0.15); border-radius: 6px; }
.vt.tt td { background: rgba(255, 255, 255, 0.04); border-radius: 6px; }
/* Gantt chart */
.gantt { margin: 12px 0 6px; overflow-x: auto; padding: 0 2px 4px; }
.g-bars, .g-times { display: flex; min-width: max(100%, calc(var(--n, 6) * 52px)); }
.g-blk { min-width: 0; height: 44px; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #050816; border-right: 2px solid #050816; }
.g-times { position: relative; margin-top: 6px; padding-left: 0; }
.g-t { min-width: 0; text-align: right; font-weight: 800; font-size: 0.85rem; color: var(--text-light); }
.g-t .gin { min-width: 1.6em; padding: 3px 2px; margin: 0; font-size: 0.85rem; }
.g-t0 { position: absolute; left: 0; top: 4px; font-weight: 800; font-size: 0.85rem; color: var(--text-light); }
.g-P1 { background: #7fe3ff; } .g-P2 { background: #ffcf85; } .g-P3 { background: #7ff0b8; } .g-P4 { background: #d3b6ff; }
.pt td { background: rgba(255, 255, 255, 0.04); border-radius: 6px; min-width: 3em; }
.gstep-body { min-width: 0; }
/* Lessons hub: class tabs */
.class-tabs { position: sticky; top: 76px; z-index: 5; padding: 8px; margin-left: -8px; margin-right: -8px; border-radius: 16px; background: rgba(5, 8, 22, 0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.tab-n { display: inline-block; min-width: 1.5em; padding: 0 6px; margin-left: 4px; border-radius: 10px; font-size: 0.75rem; background: rgba(255, 255, 255, 0.12); }
.hub-filter.active .tab-n { background: rgba(5, 8, 22, 0.2); }
@media (max-width: 640px) {
  .class-tabs { flex-wrap: nowrap; overflow-x: auto; top: 64px; -webkit-overflow-scrolling: touch; }
  .class-tabs .hub-filter { white-space: nowrap; padding: 9px 14px; }
}

/* ---- Share a lesson ---- */
.share-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 22px; }
.share-btn {
  font-family: inherit; font-size: 0.85rem; font-weight: 700; padding: 8px 14px; border-radius: 30px; cursor: pointer; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.04); color: var(--text-light); line-height: 1.3;
}
.share-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.share-btn.wa { background: #25d366; color: #052e16; border-color: transparent; }
.share-btn.wa:hover { color: #052e16; filter: brightness(1.08); }
.share-msg { font-size: 0.85rem; font-weight: 600; color: #7ff0b8; flex-basis: 100%; }
.share-msg:empty { display: none; }
.share-url { width: 100%; margin-top: 6px; font-family: inherit; font-size: 0.85rem; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06); color: var(--text-light); }
.share-end { margin: 0 0 16px; }
.share-end .share-bar { justify-content: center; margin-bottom: 0; }
.share-end .lesson-hint { margin-bottom: 8px; }
/* Lessons hub: search + card share */
.hub-search { margin: 0 0 14px; }
.hub-search input {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 1rem; padding: 14px 18px; border-radius: 16px; outline: none;
  border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05); color: var(--text-light);
}
.hub-search input:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15); }
.hub-empty { color: var(--text-muted); padding: 10px 0 20px; }
.card-wrap { position: relative; display: flex; flex-direction: column; }
.card-wrap .lesson-card { flex: 1; }
.card-wrap .lc-level { margin-right: 84px; }
.card-share {
  position: absolute; right: 14px; top: 18px; font-family: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer;
  padding: 6px 12px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(5, 8, 22, 0.6); color: var(--text-light);
}
.card-share:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.card-wrap .share-bar { margin: 8px 0 0; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); }
.card-wrap[hidden], .hub-grid[hidden], .hub-level[hidden], .hub-subject[hidden], .class-tabs[hidden] { display: none !important; }
/* Form 1 algorithms lesson + empty classes */
.order-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.order-list > div { display: flex; align-items: center; gap: 8px; }
.ol-n { flex: 0 0 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(0, 212, 255, 0.15); color: #7fe3ff; font-weight: 800; font-size: 0.85rem; line-height: 1; }
.order-list .gsel { flex: 1; min-width: 0; max-width: 100%; margin: 0; }
.why-list { margin: 6px 0 6px 20px; padding: 0; line-height: 1.7; }
.bug-list { color: var(--text-light); font-size: 0.97rem; }
.hub-soon { color: var(--text-muted); padding: 14px 18px; border-radius: 16px; border: 1px dashed rgba(255, 255, 255, 0.15); }
.tab-n:empty { display: none; }

/* ===== Activities (theory lessons) ===== */
.act-progress { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 0.82rem; font-weight: 700; color: var(--text-muted); }
.act-bar { flex: 1; height: 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.act-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brand-primary), #2ee68b); transition: width 0.4s ease; }
.act-list { display: flex; flex-direction: column; gap: 12px; }
.act { padding: 16px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.02); animation: lessonFade 0.35s ease; min-width: 0; }
.act.current { border-color: var(--brand-primary); background: rgba(0, 212, 255, 0.05); }
.act.done { border-color: rgba(46, 230, 139, 0.35); }
.act.revealed { border-color: rgba(255, 182, 72, 0.35); }
.act-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.act-num { font-size: 0.72rem; font-weight: 800; color: var(--brand-primary); }
.act-type { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); }
.act-q { font-size: 1.02rem; font-weight: 700; color: var(--text-light); margin: 4px 0 12px; line-height: 1.55; }
.act-visual { margin: 6px 0 10px; }
.act-visual svg, .a-label-pic svg, .wt-body svg.viz { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
.act-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.act-msg { margin-top: 10px; font-size: 0.92rem; line-height: 1.6; color: var(--text-muted); }
.act-msg:empty { display: none; }
.act-msg.ok { color: #7ff0b8; } .act-msg.bad { color: #ff8f8f; } .act-msg.shown { color: #ffcf85; }
.act-msg b { color: var(--text-light); }
.a-options { display: flex; flex-direction: column; gap: 8px; }
.a-opt {
  text-align: left; font-family: inherit; font-size: 0.95rem; font-weight: 600; line-height: 1.45; padding: 11px 14px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.04); color: var(--text-light);
}
.a-opt:hover:not(:disabled) { border-color: var(--brand-primary); }
.a-opt.on { border-color: var(--brand-primary); background: rgba(0, 212, 255, 0.14); }
.a-opt.bad { border-color: #ff6b6b; background: rgba(255, 107, 107, 0.12); }
.a-opt.good { border-color: #2ee68b; background: rgba(46, 230, 139, 0.14); color: #7ff0b8; }
.a-opt:disabled { cursor: default; }
.act-tf .a-options { flex-direction: row; }
.act-tf .a-opt { flex: 1; text-align: center; }
.a-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 12px; border: 1px solid transparent; background: rgba(255, 255, 255, 0.03); }
.a-sort, .a-match { display: flex; flex-direction: column; gap: 6px; }
.a-row.bad { border-color: #ff6b6b; background: rgba(255, 107, 107, 0.08); }
.a-row.good { border-color: rgba(46, 230, 139, 0.35); }
.a-item { font-weight: 600; color: var(--text-light); flex: 1 1 150px; min-width: 0; line-height: 1.4; }
.a-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.a-segb {
  font-family: inherit; font-size: 0.8rem; font-weight: 700; padding: 6px 10px; border-radius: 20px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.16); background: transparent; color: var(--text-muted);
}
.a-segb.on { background: var(--brand-primary); color: #050816; border-color: transparent; }
.a-segb:disabled { cursor: default; }
.a-sel { flex: 1 1 160px; max-width: 100%; margin: 0; }
.a-order { list-style: none; counter-reset: ord; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.a-order .a-row { counter-increment: ord; flex-wrap: nowrap; }
.a-order .a-item::before { content: counter(ord) '. '; color: var(--brand-primary); font-weight: 800; }
.a-moves { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.a-mv { font-family: inherit; width: 38px; height: 34px; border-radius: 10px; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.05); color: var(--text-light); font-size: 0.8rem; }
.a-mv:disabled { opacity: 0.25; cursor: default; }
.a-marker { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center; background: #ffb648; color: #050816; font-weight: 800; font-size: 0.85rem; }
.a-label-pic { margin: 0 0 12px; }
.a-fill { line-height: 2.4; color: var(--text-light); font-size: 1rem; margin: 0; }
.act-end { flex-direction: column; align-items: flex-start; }
/* Lesson navigation inside a chapter */
.lesson-path { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 0.8rem; color: var(--text-muted); margin: 0 0 14px; }
.lesson-path a { color: var(--brand-primary); text-decoration: none; font-weight: 700; }
.lesson-pn { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 4px 0 20px; }
.lesson-pn a { flex: 1 1 200px; padding: 12px 16px; border-radius: 14px; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.12); color: var(--text-light); font-size: 0.88rem; font-weight: 700; background: rgba(255, 255, 255, 0.03); }
.lesson-pn a:hover { border-color: var(--brand-primary); }
.lesson-pn a span { display: block; font-size: 0.72rem; color: var(--text-muted); font-weight: 600; margin-bottom: 2px; }
.lesson-pn a.next { text-align: right; }
/* Visual helpers used inside cards and activities */
.viz text { font-family: inherit; }
.v-box { fill: rgba(0, 212, 255, 0.08); stroke: #7fe3ff; stroke-width: 2; }
.v-box2 { fill: rgba(255, 182, 72, 0.10); stroke: #ffcf85; stroke-width: 2; }
.v-box3 { fill: rgba(46, 230, 139, 0.10); stroke: #7ff0b8; stroke-width: 2; }
.v-line { stroke: rgba(255, 255, 255, 0.55); stroke-width: 2; fill: none; }
.v-arrow { stroke: rgba(255, 255, 255, 0.7); stroke-width: 2; fill: none; marker-end: url(#arr); }
.v-t { fill: var(--text-light); font-size: 13px; font-weight: 700; }
.v-s { fill: var(--text-muted); font-size: 11px; font-weight: 600; }
.v-mk { fill: #ffb648; } .v-mkt { fill: #050816; font-size: 12px; font-weight: 800; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.chips span { padding: 5px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); color: var(--text-light); font-weight: 700; font-size: 0.85rem; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 10px; }
.two-col > div { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); font-size: 0.9rem; }
.two-col b { display: block; margin-bottom: 4px; }
@media (max-width: 480px) { .two-col { grid-template-columns: 1fr; } }
/* Lessons hub: chapters */
.chapters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
details.chapter { border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08); background: var(--card-bg); overflow: hidden; }
details.chapter[open] { border-color: rgba(0, 212, 255, 0.35); }
details.chapter summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; list-style: none; }
details.chapter summary::-webkit-details-marker { display: none; }
details.chapter summary::after { content: '▾'; margin-left: 4px; color: var(--text-muted); transition: transform 0.2s; }
details.chapter[open] summary::after { transform: rotate(180deg); }
.ch-n { flex: 0 0 auto; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--brand-primary); }
.ch-t { flex: 1; font-weight: 800; color: var(--text-light); line-height: 1.35; }
.ch-c { flex: 0 0 auto; font-size: 0.75rem; font-weight: 700; color: var(--text-muted); padding: 2px 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); }
.ch-lessons { list-style: none; margin: 0; padding: 0 10px 10px; display: flex; flex-direction: column; gap: 4px; }
.lrow { position: relative; border-radius: 12px; }
.lrow > a, .lrow.soon { display: flex; align-items: center; gap: 10px; padding: 10px 52px 10px 10px; text-decoration: none; color: var(--text-light); border-radius: 12px; }
.lrow > a:hover { background: rgba(0, 212, 255, 0.08); }
.lrow.soon { color: var(--text-muted); padding-right: 10px; }
.l-n { flex: 0 0 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 800; background: rgba(255, 255, 255, 0.06); color: var(--text-muted); }
.l-t { flex: 1; font-weight: 600; font-size: 0.93rem; line-height: 1.35; min-width: 0; }
.l-k { flex: 0 0 auto; font-size: 0.7rem; font-weight: 800; padding: 3px 8px; border-radius: 10px; white-space: nowrap; }
.l-k.practice { background: rgba(255, 182, 72, 0.15); color: #ffcf85; }
.l-k.activities { background: rgba(0, 212, 255, 0.12); color: #7fe3ff; }
.lrow.soon .l-k { background: rgba(255, 255, 255, 0.05); color: var(--text-muted); }
.row-share { top: 50%; right: 6px; transform: translateY(-50%); padding: 6px 9px; }
.lrow .share-bar { margin: 4px 0 8px; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); }
.lrow[hidden], details.chapter[hidden], .chapters[hidden] { display: none !important; }
@media (max-width: 480px) { .l-k { display: none; } .lrow > a { padding-right: 46px; } }
/* reset the site-wide button padding for small lesson buttons */
.a-mv, .a-segb, .card-share, .wt-dot, .fb-choice, .share-btn, .sw { padding-left: 0; padding-right: 0; }
.a-mv { padding: 0; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.a-segb { padding: 6px 12px; }
.card-share { padding: 6px 10px; }
.row-share { padding: 6px 9px; }
.fb-choice { padding: 10px 18px; }
.share-btn { padding: 8px 14px; }
.sw { padding: 10px 14px; }
.wt-dot { padding: 0; }
.act-label .a-item { flex: 0 0 auto; }
.act-label .a-row { flex-wrap: nowrap; }
.a-order .a-item { flex: 1 1 auto; }