/* =========================================================
   LearnFrenchMalta — site.css (clean, single file)
   - Dark UI on screen
   - Simple, ink-friendly print (no dark background, no video)
   ========================================================= */

/* =========================================================
   1) Theme tokens
   ========================================================= */
:root{
  --bg:#0b1220;
  --card:#0f172a;
  --text:#ffffff;
  --muted:rgba(255,255,255,.72);
  --line:rgba(255,255,255,.12);
  --accent:#7c3aed;

  --r-lg:18px;
  --r-md:16px;
  --r-sm:14px;
}

/* =========================================================
   2) Base + accessibility
   ========================================================= */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:linear-gradient(180deg,#0b1220,#0b1220 30%,#0a1020);
  color:var(--text);
}
a{color:inherit}
.muted{color:var(--muted)}

/* Skip link */
.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:12px;
  top:12px;
  width:auto;
  height:auto;
  padding:10px 12px;
  border-radius:12px;
  background:#fff;
  color:#0b1220;
  z-index:10050;
  outline:2px solid rgba(124,58,237,.55);
  outline-offset:2px;
}

/* =========================================================
   3) Tiny utilities
   ========================================================= */
.p0{margin:0}
.mt-6{margin-top:6px}
.mt-10{margin-top:10px}
.mb-10{margin-bottom:10px}

.small{font-size:13px}

.card-tight{margin:0}
.section-gap{margin:12px 0 0}

.print-lines--tall{height:640px}
.write-lines--fill{height:100%}

/* Gap helpers */
.gap-8{gap:8px}
.gap-10{gap:10px}
.gap-12{gap:12px}

/* Tight headings/text */
.h1-tight{margin:0 0 8px}
.h2-tight{margin:0 0 10px}
.p-tight{margin:0}
.p-tight-2{margin:0 0 12px}

/* =========================================================
   4) Layout helpers
   ========================================================= */
.container{max-width:1080px;margin:0 auto;padding:18px}

.grid{display:grid;gap:14px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:860px){.grid.two{grid-template-columns:1fr}}

.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:860px){.row{grid-template-columns:1fr}}

/* Split layout (hero / feature cards) */
.split{
  display:flex;
  gap:18px;
  align-items:stretch;
  flex-wrap:wrap;
}
.split__text{
  flex:1;
  min-width:320px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.split__media{
  flex:1.05;
  min-width:320px;
  display:block;
}
.img-card{
  width:100%;
  height:auto;
  border-radius:16px;
  display:block;
}

/* CTA row used on homepage */
.cta-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* Clean ordered list */
.ol-clean{margin:0;padding-left:18px}

/* =========================================================
   5) Navigation
   ========================================================= */
.nav{
  position:relative; /* ensures burger z-index works */
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.logo{
  display:flex;
  align-items:center;
  justify-content:center;
}
.logo img{
  width:34px;
  height:34px;
  display:block;
  border-radius:10px;
}
.logo span{font-weight:800;color:#c4b5fd}

.brand-text{display:flex;flex-direction:column}
.brand-title{font-weight:800;line-height:1}
.brand-sub{font-size:12px;line-height:1.2}

/* Desktop links */
.navlinks{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.navlinks a{
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  text-decoration:none;
  color:var(--muted);
}
.navlinks a:hover{border-color:rgba(255,255,255,.25);color:#fff}

/* Nav separator */
.nav-sep{
  width:1px;
  height:26px;
  background:var(--line);
  display:inline-block;
  margin:0 6px;
  align-self:center;
}

/* =========================================================
   6) Burger + mobile menu
   ========================================================= */
.burger{
  display:none;
  position:relative;
  z-index:10002; /* above drawer */
  width:42px;
  height:42px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:#fff;
  border-radius:12px;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:10px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.burger span{
  display:block;
  width:18px;
  height:2px;
  background:#fff;
  border-radius:2px;
  opacity:.9;
}

/* Drawer wrapper */
.mobile-menu{
  position:fixed;
  inset:0;
  z-index:10000;
}

/* Backdrop behind panel */
.mobile-menu__backdrop{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(2,6,23,.35);
  z-index:0;
  cursor:pointer;
}

/* Panel above backdrop */
.mobile-menu__panel{
  position:absolute;
  top:0;
  right:0;
  height:100%;
  width:min(86vw, 360px);
  background:rgba(15,23,42,.96);
  border-left:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 40px rgba(0,0,0,.45);
  padding:14px;
  transform:translateX(105%);
  transition:transform .16s ease;
  z-index:1;
  pointer-events:auto;
}

html.menu-open .mobile-menu__panel{ transform:translateX(0); }
html.menu-open{ overflow:hidden; }

.mobile-menu__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px 2px 10px;
}
.mobile-menu__title{ font-weight:800; }
.mobile-menu__close{
  width:40px;
  height:40px;
  border:0;
  background:transparent;
  color:#fff;
  border-radius:12px;
  font-size:22px;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.mobile-menu__close:hover{
  background:rgba(255,255,255,.06);
}

.mobile-menu__links{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-top:6px;
}
.mobile-menu__links a{
  display:block;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  text-decoration:none;
  color:rgba(255,255,255,.88);
  background:rgba(255,255,255,.04);
}
.mobile-menu__links a:hover{
  border-color:rgba(255,255,255,.22);
  color:#fff;
}
.mobile-menu__links .btn{
  width:100%;
  justify-content:center;
}
.mobile-menu__sep{
  height:1px;
  background:rgba(255,255,255,.10);
  margin:6px 2px;
}

/* Responsive */
@media (max-width: 820px){
  .navlinks{ display:none; }
  .burger{ display:flex; }
}
/* When menu is open, hide the burger so it can't sit behind the close button */
html.menu-open .burger{
  visibility:hidden;
}
/* =========================================================
   7) Buttons + forms
   ========================================================= */
.btn{
  appearance:none;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:#fff;
  border-radius:var(--r-sm);
  padding:10px 12px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.btn.primary{background:rgba(124,58,237,.22);border-color:rgba(124,58,237,.45)}
.btn.safe{background:rgba(16,185,129,.16);border-color:rgba(16,185,129,.35)}
.btn.danger{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.35)}
.btn:disabled{opacity:.6;cursor:not-allowed}

label{font-size:13px;color:rgba(255,255,255,.85)}
input,select,textarea{
  width:100%;
  padding:10px 12px;
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  color:#fff;
}
textarea{min-height:120px;resize:vertical}

/* Fix: dropdown options invisible on dark theme (native menus often render white) */
select option,
select optgroup{
  color:#0b1220;
  background:#ffffff;
}

/* Focus polish */
input:focus,
select:focus,
textarea:focus{
  outline:2px solid rgba(124,58,237,.55);
  outline-offset:2px;
}

/* =========================================================
   8) Cards, badges, pills, lists
   ========================================================= */
.card{
  background:rgba(15,23,42,.72);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:14px;
}
.card h2,.card h3{margin:0 0 10px}
.card-h3{margin:0 0 10px}

.badges{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.badge{
  font-size:12px;
  color:rgba(255,255,255,.85);
  border:1px solid var(--line);
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
}

.pill{
  display:inline-flex;
  gap:6px;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  font-size:12px;
  color:rgba(255,255,255,.86);
  background:rgba(255,255,255,.03);
}
.pill.ok{border-color:rgba(16,185,129,.4);background:rgba(16,185,129,.12)}
.pill.danger{border-color:rgba(239,68,68,.45);background:rgba(239,68,68,.12)}

.clean-list{margin:0;padding-left:18px}
.clean-list li{margin:6px 0;color:rgba(255,255,255,.88)}

/* =========================================================
   9) Tables + dashboard tiles
   ========================================================= */
.table{width:100%;border-collapse:collapse}
.table th,.table td{
  border-bottom:1px solid var(--line);
  padding:10px;
  text-align:left;
  vertical-align:top;
}
.table th{color:rgba(255,255,255,.8);font-weight:700}

/* Lessons grid tiles */
.lesson-grid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:10px}
@media (max-width:980px){.lesson-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:680px){.lesson-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

.lesson-tile{
  position:relative;
  display:grid;
  place-items:center;
  height:44px;
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  font-weight:700;
}
.lesson-tile.done{border-color:rgba(16,185,129,.45);background:rgba(16,185,129,.14)}
.lesson-tile small{
  position:absolute;bottom:4px;right:8px;
  font-weight:700;font-size:11px;color:rgba(255,255,255,.75)
}

/* =========================================================
   10) Shared “hero/actions” patterns
   ========================================================= */
.lesson-hero__top{
  display:flex;
  gap:14px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}
.lesson-hero__actions{display:flex;gap:10px;flex-wrap:wrap}

/* Button rows */
.lesson-nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:space-between;
}

/* =========================================================
   11) Lesson widgets (frames, video, exercises, DnD, quiz, audio)
   ========================================================= */
.big-frame{
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:12px;
  background:rgba(255,255,255,.04);
}
.big-frame__fr{font-size:22px;font-weight:800;letter-spacing:.2px}
.big-frame__en{margin-top:6px;font-size:14px}
.big-frame .blank{
  display:inline-block;
  min-width:70px;
  border-bottom:2px solid rgba(255,255,255,.6);
  transform:translateY(-1px);
}

.typed-line{
  margin-top:10px;
  border:1px dashed rgba(255,255,255,.25);
  border-radius:var(--r-sm);
  padding:10px 12px;
  background:rgba(255,255,255,.03);
  font-weight:700;
}

.video-shell{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.video-placeholder{padding:18px;background:rgba(255,255,255,.04)}
.video-embed{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  background:#101425;
}
.video-embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
  background:#101425;
}
.video-caption{
  padding:10px 12px;
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.02);
}

.exercise{background:rgba(15,23,42,.62)}
.exercise-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:12px;
}

/* Drag & Drop */
.dd-item{
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-md);
  padding:12px;
  background:rgba(255,255,255,.03);
  margin:12px 0;
}
.dd-targets{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  min-height:54px;
  padding:10px;
  border:1px dashed rgba(255,255,255,.2);
  border-radius:var(--r-sm);
  background:rgba(0,0,0,.12);
}
.dd-slot{
  min-width:110px;
  min-height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  display:grid;
  place-items:center;
  padding:6px;
}
.dd-slot.filled{border-color:rgba(124,58,237,.5);background:rgba(124,58,237,.12)}

.dd-bank{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.dd-chip{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
  border-radius:999px;
  padding:8px 10px;
  cursor:grab;
  user-select:none;
  touch-action:none;
}
.dd-chip:active{cursor:grabbing}
.dd-chip.is-hidden{display:none !important}

.dd-feedback{margin-top:8px;color:rgba(255,255,255,.82)}
.dd-item.correct .dd-targets{border-color:rgba(16,185,129,.45)}
.dd-item.incorrect .dd-targets{border-color:rgba(239,68,68,.45)}

.dd-ghost{
  position:fixed;
  z-index:9999;
  pointer-events:none;
  border-radius:999px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(15,23,42,.92);
  color:#fff;
  box-shadow:0 12px 32px rgba(0,0,0,.45);
  transform:translate(-50%,-50%);
  white-space:nowrap;
}

/* Pair Match */
.pm-wrap{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:860px){.pm-wrap{grid-template-columns:1fr}}
.pm-col{
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-md);
  padding:12px;
  background:rgba(255,255,255,.03);
}
.pm-head{font-weight:800;margin-bottom:10px;color:rgba(255,255,255,.88)}
.pm-card{
  width:100%;
  text-align:left;
  margin:8px 0;
  padding:10px 12px;
  border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  color:#fff;
  cursor:pointer;
}
.pm-card.is-selected{outline:2px solid rgba(124,58,237,.7)}
.pm-card.is-matched{border-color:rgba(16,185,129,.45);background:rgba(16,185,129,.12);cursor:default}
.pm-card.is-wrong{border-color:rgba(239,68,68,.45);background:rgba(239,68,68,.10)}

/* Quiz */
.q{
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-md);
  padding:12px;
  background:rgba(255,255,255,.03);
  margin:12px 0;
}
.q-text{margin:0 0 10px;font-weight:700}
.opt{
  display:flex;
  gap:10px;
  align-items:center;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  margin:8px 0;
  cursor:pointer;
}
.opt input{width:auto}
.q-result{margin-top:8px;color:rgba(255,255,255,.82)}
.q.correct{border-color:rgba(16,185,129,.45)}
.q.incorrect{border-color:rgba(239,68,68,.45)}

/* Audio Practice */
.audio-grid{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}
.audio-item{padding:0;border:0;background:transparent}
.audio-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:nowrap;
  margin-bottom:6px;
}
.audio-actions .btn{
  padding:10px 14px;
  border-radius:999px;
}

/* Writing lines */
.write-lines{
  border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(to bottom,
      rgba(255,255,255,.00) 0,
      rgba(255,255,255,.00) 20px,
      rgba(255,255,255,.10) 20px,
      rgba(255,255,255,.10) 21px
    );
  background-size:100% 22px;
}

/* Writing Space wrapper */
.print-lines{
  margin-top:12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-md);
  padding:12px;
  background:rgba(255,255,255,.03);
}

/* =========================================================
   12) Contact page helpers
   ========================================================= */
.contact-wrap{margin-top:14px}
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:14px}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}

.contact-form label{display:block;margin:10px 0 6px}
.contact-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px}

.mini-card{margin:0;background:rgba(255,255,255,.03)}
.contact-mini-card{margin-top:12px}

.contact-kv{display:grid;gap:10px}
.kv{border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px;background:rgba(255,255,255,.03)}
.kv .k{font-weight:800;margin-bottom:4px}
.kv .v{color:rgba(255,255,255,.78)}

.contact-status{margin:10px 0 0}

/* Honeypot */
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* =========================================================
   13) Pricing helpers
   ========================================================= */
.price-big{
  font-size:34px;
  font-weight:900;
  line-height:1.05;
  margin:0 0 8px;
}
.price-pill{
  display:inline-flex;
  margin-top:8px;
  font-weight:700;
}

/* =========================================================
   14) Footer (grid)
   ========================================================= */
.footer{
  padding:22px 0;
  border-top:1px solid var(--line);
  margin-top:18px;
  color:rgba(255,255,255,.62);
}

.footer-grid{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:14px;
  align-items:start;
}

/* Links left */
.footer-links{
  display:flex;
  gap:14px;
  flex-wrap:nowrap;          /* one row on desktop */
  overflow-x:auto;           /* scroll if needed on small screens */
  -webkit-overflow-scrolling:touch;
  padding-bottom:2px;
}
.footer-links a{
  white-space:nowrap;
  color:rgba(255,255,255,.72);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.footer-links a:hover{
  color:#fff;
  border-bottom-color:rgba(255,255,255,.25);
}

/* Right column */
.footer-meta{text-align:right}
.footer-sub{
  color:rgba(255,255,255,.62);
  font-size:13px;
  margin:0 0 6px;
}
.footer-sub a{
  color:rgba(255,255,255,.80);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.footer-sub a:hover{
  color:#fff;
  border-bottom-color:rgba(255,255,255,.25);
}
.footer-copy{color:rgba(255,255,255,.62)}

/* Mobile footer */
@media (max-width: 820px){
  .footer-grid{grid-template-columns:1fr}
  .footer-meta{text-align:left}
  .footer-links{
    flex-wrap:wrap;
    overflow:visible;
  }
}

/* =========================================================
   15) Screen/print toggles + print styles
   ========================================================= */
.screen-only{display:block}
.print-only{display:none}

@media print{
  @page{margin:12mm}

  html,body{
    background:#fff !important;
    color:#000 !important;
  }

  .container{
    max-width:none !important;
    padding:0 !important;
  }

  /* Show print-only blocks */
  .print-only{ display:block !important; }

  /* Hide screen-only UI */
  .screen-only,
  [data-heygen],
  .video-shell,
  .video-placeholder,
  .nav,
  .navlinks,
  .burger,
  .mobile-menu,
  .footer,
  .lesson-hero__actions,
  .badges,
  #logoutBtn,
  #logoutBtnMobile{
    display:none !important;
  }

  /* Main printable blocks */
  .card,
  .lesson-hero,
  .exercise{
    background:#fff !important;
    color:#000 !important;
    border-color:#ddd !important;
    border-radius:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    padding:12px !important;
  }

  .muted{color:#333 !important}

  .pill,
  .badge{
    background:#f6f6f6 !important;
    color:#111 !important;
    border-color:#ddd !important;
  }

  .big-frame{
    border-color:#ddd !important;
    background:#fff !important;
  }
  .big-frame__fr{color:#000 !important}
  .big-frame .blank{border-bottom-color:#666 !important}

  .typed-line{
    border-color:#ddd !important;
    background:#fff !important;
    color:#000 !important;
  }

  /* Keep lesson interactions visible in print */
  .dd-item,
  .pm-col,
  .q{
    display:block !important;
    background:#fff !important;
    color:#000 !important;
    border-color:#ccc !important;
  }

  .dd-targets,
  .dd-slot,
  .dd-bank,
  .pm-card,
  .opt{
    background:#fff !important;
    color:#000 !important;
    border-color:#bbb !important;
  }

  .dd-chip{
    display:inline-block !important;
    background:#fff !important;
    color:#000 !important;
    border:1px solid #999 !important;
    box-shadow:none !important;
  }

  .dd-feedback,
  .q-result{
    color:#333 !important;
  }

  .pm-head,
  .q-text,
  .card h1,
  .card h2,
  .card h3{
    color:#000 !important;
  }

  /* Writing space */
  .print-lines,
  .print-lines--tall{
    display:block !important;
    margin-top:12px !important;
    min-height:520px !important;
    height:520px !important;
    border:1px solid #bbb !important;
    border-radius:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    background:#fff !important;
    break-inside:avoid !important;
    page-break-inside:avoid !important;
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
  }

  .write-lines,
  .write-lines--fill{
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-height:520px !important;
    border:0 !important;
    border-radius:0 !important;
    background-color:#fff !important;
    background-image:repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 25px,
      rgba(0,0,0,.24) 25px,
      rgba(0,0,0,.24) 26px
    ) !important;
    background-size:100% 26px !important;
    background-repeat:repeat !important;
    background-position:top left !important;
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
  }

  /* Textareas if used */
  textarea{
    display:block !important;
    min-height:180px !important;
    background:#fff !important;
    color:#000 !important;
    border:1px solid #bbb !important;
    box-shadow:none !important;
  }

  .print-lines textarea,
  .write-lines textarea{
    background:transparent !important;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    color:#000 !important;
    min-height:180px !important;
    resize:none !important;
    padding:0 !important;
    -webkit-appearance:none !important;
    appearance:none !important;
  }

  /* Hide only controls not useful on paper */
  select,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]{
    display:none !important;
  }

  /* Keep these visible if built with buttons */
  button.pm-card,
  button.opt,
  button.dd-chip{
    display:inline-block !important;
    background:#fff !important;
    color:#000 !important;
    border:1px solid #bbb !important;
  }

  /* Bottom navigation — not needed on paper */
  .lesson-nav{
    display:none !important;
  }

  a{
    color:#000 !important;
    text-decoration:none !important;
  }

  /* ─────────────────────────────────────────────
     SVG Illustrations — show on print
  ───────────────────────────────────────────── */
  .lesson-illustration{
    display:block !important;
    break-inside:avoid !important;
    page-break-inside:avoid !important;
    margin-top:12px !important;
  }
  .lesson-illustration svg{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
  }
  /* Render SVG text legibly in black */
  .lesson-illustration svg text{
    fill:#111 !important;
  }
  /* Bubbles and card backgrounds → light grey */
  .lesson-illustration svg rect,
  .lesson-illustration svg circle{
    fill:#f0f0f0 !important;
    stroke:#888 !important;
  }
  /* Decorative paths (hair, arms, body shapes) → grey */
  .lesson-illustration svg path{
    fill:#d8d8d8 !important;
    stroke:#777 !important;
  }
  /* Lines (arms, ground, dividers) → grey */
  .lesson-illustration svg line{
    stroke:#aaa !important;
  }

  /* ─────────────────────────────────────────────
     Audio — hide all Play/Slow buttons on print.
     Audio labels (word names) inside audio-item
     stay visible as a spoken-word reference list.
  ───────────────────────────────────────────── */
  button[data-audio-play],
  button[data-audio-slow],
  .las-audio{
    display:none !important;
  }

  /* ─────────────────────────────────────────────
     Exercise controls — useless on paper
  ───────────────────────────────────────────── */
  .exercise-actions{
    display:none !important;
  }

  /* ─────────────────────────────────────────────
     FIB inputs — hide the box entirely on print.
     .fib-row becomes a visible blank write-on line.
  ───────────────────────────────────────────── */
  .fib-input{
    display:none !important;
  }
  .fib-row{
    display:block !important;
    border-bottom:1.5px solid #444 !important;
    min-height:22px !important;
    width:100% !important;
    max-width:420px !important;
    margin-top:6px !important;
  }

  /* ─────────────────────────────────────────────
     Feedback text — hide on print (nothing scored)
  ───────────────────────────────────────────── */
  .fib-feedback,
  .las-feedback,
  .seq-feedback,
  .tf-feedback,
  .sort-feedback,
  button.fib-hint-btn{
    display:none !important;
  }

  /* ─────────────────────────────────────────────
     LAS items — print prompt + options, no audio
  ───────────────────────────────────────────── */
  .las-item{
    display:block !important;
    background:#fff !important;
    color:#000 !important;
    padding:8px 0 !important;
    border-bottom:1px solid #eee !important;
  }
  .las-prompt{
    color:#000 !important;
    font-weight:600 !important;
  }

  /* ─────────────────────────────────────────────
     Sort & Seq — show chips and columns on paper
  ───────────────────────────────────────────── */
  .sort-cols,
  .sort-col,
  .sort-bank,
  .sort-chip,
  .seq-slots,
  .seq-bank,
  .seq-chip{
    display:block !important;
    background:#fff !important;
    color:#000 !important;
    border-color:#bbb !important;
  }
  .sort-col{
    border:1px solid #ccc !important;
    border-radius:0 !important;
    margin-bottom:8px !important;
    padding:8px !important;
    min-height:60px !important;
  }
  .sort-col-head{
    color:#000 !important;
    font-weight:700 !important;
  }

  /* ─────────────────────────────────────────────
     Number cards (L06) — print-friendly colours
  ───────────────────────────────────────────── */
  .num-card{
    border-color:#ccc !important;
    background:#fff !important;
  }
  .num-card__digit,
  .num-card__word{
    color:#111 !important;
  }
  .num-card__dot{
    background:#666 !important;
  }

  /* ─────────────────────────────────────────────
     Number groups & rule cards (L07)
  ───────────────────────────────────────────── */
  .num-group{
    border-color:#ccc !important;
    background:#fff !important;
  }
  .num-group li{
    border-bottom-color:#e8e8e8 !important;
  }
  .num-group li strong,
  .num-group li span,
  .num-group li em,
  .num-group__title{
    color:#111 !important;
  }
  .rule-card{
    border-color:#bbb !important;
    background:#f7f7f7 !important;
  }
  .rule-card__title,
  .rule-card p{
    color:#111 !important;
  }
}