/* ── Reset & Theme Variables ────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ══ LIGHT MODE (default) ══════════════════════════════════ */
:root {
  /* Brand / zone colours — same in both modes */
  --gold:    #f59e0b;
  --gold2:   #fbbf24;
  --indigo:  #6366f1;
  --sky:     #0ea5e9;
  --emerald: #10b981;
  --violet:  #8b5cf6;
  --orange:  #f97316;
  --green:   #22c55e;
  --red:     #ef4444;
  --font:    'Nunito', sans-serif;
  --display: 'Fredoka One', 'Nunito', sans-serif;

  /* Light surfaces */
  --bg-page:    #f0f4f8;
  --bg-nav:     #ffffff;
  --bg-sidebar: #f8fafc;
  --bg-card:    #ffffff;
  --bg-card2:   #f1f5f9;
  --bg-opt:     #ffffff;
  --bg-bubble:  #eff6ff;
  --bg-code:    #f0f9ff;
  --bg-pip:     #f8fafc;
  --bg-done-lv: #fffbeb;

  /* Light text */
  --text-h:      #0f172a;
  --text-body:   #1e293b;
  --text-muted:  #475569;
  --text-subtle: #64748b;
  --text-faint:  #94a3b8;
  --text-code:   #0369a1;

  /* Light borders */
  --bdr:        #dbeafe;
  --bdr-card:   #e2e8f0;
  --bdr-zone:   #e2e8f0;
  --bdr-strong: #cbd5e1;

  /* Feedback colours */
  --bg-correct:   #f0fdf4;
  --bdr-correct:  #22c55e;
  --txt-correct:  #166534;
  --bg-wrong:     #fef2f2;
  --bdr-wrong:    #ef4444;
  --txt-wrong:    #991b1b;
}

/* ══ DARK MODE (:root.dark) ═════════════════════════════════ */
:root.dark {
  --bg-page:    #080e1a;
  --bg-nav:     #0d1b2e;
  --bg-sidebar: #0f1f3d;
  --bg-card:    #111827;
  --bg-card2:   #1f2937;
  --bg-opt:     #1f2937;
  --bg-bubble:  #1e3a5f;
  --bg-code:    #0f172a;
  --bg-pip:     #0d1b2e;
  --bg-done-lv: #1c1917;

  --text-h:      #f1f5f9;
  --text-body:   #e2e8f0;
  --text-muted:  #94a3b8;
  --text-subtle: #64748b;
  --text-faint:  #475569;
  --text-code:   #7dd3fc;

  --bdr:        #1e3a5f;
  --bdr-card:   #374151;
  --bdr-zone:   #1f2937;
  --bdr-strong: #374151;

  --bg-correct:   #052e16;
  --bdr-correct:  #22c55e;
  --txt-correct:  #86efac;
  --bg-wrong:     #450a0a;
  --bdr-wrong:    #ef4444;
  --txt-wrong:    #fca5a5;
}

/* ── Base ─────────────────────────────────────────────────── */
html, body {
  height: 100%; font-family: var(--font);
  overflow: hidden;
  background: var(--bg-page);
  color: var(--text-body);
  transition: background 0.25s, color 0.25s;
}

/* ── Screen system ────────────────────────────────────────── */
.screen { height: 100vh; display: flex; flex-direction: column; }
.screen.hidden { display: none !important; }
.hidden { display: none !important; }

/* ── Overlay ──────────────────────────────────────────────── */
#screen-overlay {
  position: fixed; inset: 0; background: #000; z-index: 9990;
  opacity: 0; pointer-events: none; transition: opacity 0.22s;
}

/* ═══════════════════════════════════════════════════════════
   TOP BAR
═══════════════════════════════════════════════════════════ */
.top-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px;
  background: var(--bg-nav);
  border-bottom: 3px solid var(--gold);
  flex-shrink: 0; gap: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-owl {
  font-size: 2.2rem; line-height: 1;
  animation: owlBob 3s ease-in-out infinite;
  display: block;
}
@keyframes owlBob { 0%,100%{transform:rotate(-5deg) scale(1)} 50%{transform:rotate(5deg) scale(1.08)} }

.brand-name {
  font-family: var(--display); font-size: 1.5rem;
  color: var(--text-h); letter-spacing: 0.04em; line-height: 1.1;
}
.brand-name span { color: var(--gold); }
.brand-tag { font-size: 0.68rem; color: var(--text-subtle); font-weight: 700; letter-spacing: 0.03em; }

.top-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }

.tbtn {
  border: none; border-radius: 10px;
  padding: 7px 13px;
  font-family: var(--font); font-size: 0.82rem; font-weight: 800;
  cursor: pointer; transition: transform 0.12s, opacity 0.12s; white-space: nowrap;
}
.tbtn:hover { transform: scale(1.06); }
.tbtn.lab    { background: #6366f1; color: #fff; }
.tbtn.cyan   { background: #0e7490; color: #a5f3fc; border: 2px solid #0891b2; }
.tbtn.dark   { background: var(--bg-card2); color: var(--text-muted); border: 2px solid var(--bdr-card); }
.tbtn.mute   { background: #1e3a5f; color: #93c5fd; border: 2px solid #2d5986; }
.tbtn.report { background: #14532d; color: #86efac; border: 2px solid #166534; }
.tbtn.reset  { background: #450a0a; color: #fca5a5; border: 2px solid #7f1d1d; }
.tbtn.hamburger { background: var(--bg-card2); color: var(--text-muted); border: 2px solid var(--bdr-card); font-size: 1.1rem; padding: 6px 12px; }

.star-count {
  background: var(--bg-card2); border: 2px solid var(--gold);
  border-radius: 999px; padding: 5px 14px;
  font-weight: 900; font-size: 0.95rem; color: var(--gold);
  min-width: 65px; text-align: center;
}
.brand-tv-logo { width: 36px; height: 36px; border-radius: 8px; }
.brand-tv-link { margin-left: 6px; }

/* ═══════════════════════════════════════════════════════════
   MAP SCREEN
═══════════════════════════════════════════════════════════ */
.map-body { display: flex; flex: 1; overflow: hidden; }

/* Sidebar */
.panel {
  width: 215px; min-width: 195px;
  display: flex; flex-direction: column;
  padding: 12px 10px; gap: 8px;
  overflow-y: auto; flex-shrink: 0;
}
.side-panel {
  background: var(--bg-sidebar);
  border-right: 3px solid var(--bdr);
  transition: width 0.25s ease, min-width 0.25s ease, padding 0.25s ease;
}
.map-body.sidebar-hidden .side-panel {
  width: 0 !important; min-width: 0 !important;
  padding: 0 !important; overflow: hidden !important; border: none !important;
}
.side-panel-divider {
  height: 2px; background: linear-gradient(90deg, var(--gold), var(--indigo));
  margin: 6px 0; border-radius: 999px;
}

/* Ace area */
.pip-area {
  display: flex; flex-direction: column; align-items: center;
  padding-bottom: 10px; border-bottom: 2px dashed var(--bdr-card); margin-bottom: 4px;
}
.pip-char { font-size: 4rem; line-height: 1; animation: owlBob 2.5s ease-in-out infinite; }
.pip-label {
  font-family: var(--display); font-size: 0.72rem; letter-spacing: 0.1em;
  background: var(--gold); color: #78350f;
  border-radius: 999px; padding: 2px 10px;
  margin-top: -4px; margin-bottom: 8px;
}
.pip-bubble {
  background: var(--bg-bubble); border: 2.5px solid var(--gold);
  border-radius: 14px; padding: 9px 11px;
  font-size: 0.8rem; font-weight: 700; color: var(--text-body);
  text-align: center; line-height: 1.5; position: relative;
}
.pip-bubble::before {
  content:''; position:absolute; top:-12px; left:50%;
  transform:translateX(-50%);
  border:6px solid transparent; border-bottom-color:var(--gold);
}

/* Info cards */
.info-card {
  background: var(--bg-card); border-radius: 14px;
  border: 2px solid var(--bdr-card); padding: 10px 12px;
}
.card-title {
  font-size: 0.68rem; font-weight: 900; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--gold); margin-bottom: 7px;
}
.card-title.orange { color: #fb923c; }
.how-ul { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.how-ul li { font-size: 0.79rem; font-weight: 700; color: var(--text-muted); }

/* Progress */
.prog-outer { height: 13px; background: var(--bg-card2); border-radius: 999px; overflow: hidden; border: 2px solid var(--bdr-card); margin-bottom: 4px; }
.prog-inner { height: 100%; background: linear-gradient(90deg, var(--gold), var(--green)); border-radius: 999px; transition: width 0.7s ease; }
.prog-nums  { font-size: 0.74rem; font-weight: 800; color: var(--text-subtle); text-align: right; }
.prog-cheer { font-size: 0.79rem; font-weight: 800; color: var(--text-muted); text-align: center; margin-top: 4px; }

/* Profile card */
.profile-card {
  background: linear-gradient(135deg, #1e1b4b, var(--indigo));
  border-radius: 16px; padding: 14px; text-align: center; margin-bottom: 4px;
}
.prof-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,0.15); display: flex;
  align-items: center; justify-content: center;
  font-size: 1.8rem; margin: 0 auto 6px; border: 3px solid var(--gold);
}
.prof-name { font-size: 0.78rem; font-weight: 900; color: #fff; letter-spacing: 0.07em; }
.prof-stats { display: flex; gap: 14px; justify-content: center; margin-top: 6px; font-size: 0.82rem; font-weight: 800; color: #c7d2fe; }

/* Badge items */
.badge-item { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.badge-icon { font-size: 1.2rem; }
.badge-name { font-size: 0.74rem; font-weight: 700; color: #a5b4fc; }
.no-badges  { font-size: 0.76rem; color: var(--text-faint); font-style: italic; }

/* Day streak */
.day-streak-card .day-streak-body { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.day-streak-fire { font-size: 1.5rem; }
.day-streak-val  { font-size: 2rem; font-weight: 900; color: var(--orange); }
.day-streak-label { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); }

/* Mission */
.mission-text { font-size: 0.77rem; font-weight: 700; color: #818cf8; line-height: 1.4; }
.mission-prog { font-size: 0.76rem; font-weight: 800; color: var(--gold); margin-top: 4px; }

/* ── MAP CENTER ─────────────────────────────────────── */
.map-center {
  flex: 1; overflow-y: auto; padding: 16px 20px;
  background: var(--bg-page);
}
.level-grid { display: flex; flex-direction: column; gap: 12px; }

/* ── ZONE ACCORDION ──────────────────────────────────── */
.skill-zone {
  border-radius: 16px; overflow: hidden;
  background: var(--bg-card); border: 2px solid var(--bdr-zone);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.zone-hdr-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; cursor: pointer; user-select: none;
  background: var(--bg-card); gap: 12px; transition: background 0.15s;
}
.zone-hdr-row:hover { background: var(--bg-card2); }

.zone-hdr-left { display: flex; align-items: center; gap: 12px; }
.zone-badge {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; flex-shrink: 0;
}
.zone-title { font-size: 0.98rem; font-weight: 900; color: var(--text-h); }
.zone-desc  { font-size: 0.72rem; color: var(--text-subtle); font-weight: 600; margin-top: 2px; }
.zone-hdr-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.zone-stars  { font-size: 0.8rem; font-weight: 800; color: var(--gold); }
.zone-coming { font-size: 0.78rem; font-weight: 700; color: var(--text-faint); }
.zone-arrow  { font-size: 0.75rem; color: var(--text-subtle); }

.zone-body {
  padding: 14px; display: grid;
  grid-template-columns: repeat(4, 1fr); gap: 10px;
  background: var(--bg-page);
}
.coming-soon-msg {
  grid-column: 1 / -1; text-align: center;
  padding: 24px; color: var(--text-faint); font-size: 0.9rem; font-weight: 700;
}

/* ── LEVEL CARDS ───────────────────────────────────── */
.lv-card {
  background: var(--bg-card); border: 2px solid var(--bdr-card); border-radius: 14px;
  padding: 12px 10px; display: flex; flex-direction: column; align-items: center;
  gap: 6px; cursor: pointer; position: relative;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
  min-height: 100px;
}
.lv-card:not(.locked):hover {
  transform: translateY(-5px) scale(1.04);
  box-shadow: 0 8px 24px rgba(99,102,241,0.25);
  border-color: var(--zone-color, var(--indigo));
}
.lv-card.locked { opacity: 0.55; cursor: not-allowed; }
.lv-card.done   { border-color: var(--gold); background: var(--bg-done-lv); }
.lv-card.boss   { border-color: var(--red); background: var(--bg-wrong); }
.lv-card.theory { border-style: dashed; }

.lv-icon  { font-size: 1.8rem; line-height: 1; }
.lv-name  { font-size: 0.62rem; font-weight: 900; color: var(--text-body); text-align: center; letter-spacing: 0.03em; line-height: 1.3; }
.lv-stars { font-size: 0.72rem; }
.lv-lock  { position: absolute; top: 6px; right: 6px; font-size: 0.8rem; }
.lv-admin-eye { position: absolute; top: 6px; left: 6px; font-size: 0.75rem; }

/* ── START BUTTON ──────────────────────────────────── */
.start-adv-btn {
  display: block; margin: 20px auto; padding: 14px 36px;
  background: linear-gradient(135deg, var(--indigo), var(--violet));
  color: #fff; font-family: var(--display); font-size: 1.1rem;
  border: none; border-radius: 16px; cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 20px rgba(99,102,241,0.35);
}
.start-adv-btn:hover { transform: scale(1.04); box-shadow: 0 8px 28px rgba(99,102,241,0.45); }

/* ═══════════════════════════════════════════════════════════
   CHALLENGE SCREEN
═══════════════════════════════════════════════════════════ */
#screen-challenge { background: var(--bg-page); }

.chall-ribbon {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px; background: var(--bg-nav);
  border-bottom: 3px solid var(--gold); flex-shrink: 0; gap: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.ribbon-back {
  background: var(--bg-card2); color: var(--indigo);
  border: 2px solid var(--bdr-card); border-radius: 10px; padding: 7px 14px;
  font-family: var(--font); font-size: 0.82rem; font-weight: 800; cursor: pointer;
}
.ribbon-center { flex: 1; text-align: center; }
.ribbon-level { font-size: 0.9rem; font-weight: 900; color: var(--text-h); }
.ribbon-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ribbon-stars { font-size: 1rem; letter-spacing: 2px; }
.ribbon-voice-btn, .ribbon-stop-btn {
  background: var(--bg-card2); color: var(--indigo);
  border: 2px solid var(--bdr-card); border-radius: 8px;
  padding: 5px 10px; font-size: 0.75rem; font-weight: 800; cursor: pointer;
}
.streak-badge {
  background: linear-gradient(135deg, #b45309, #f59e0b);
  color: #fff; border-radius: 999px; padding: 4px 12px;
  font-size: 0.82rem; font-weight: 900;
}

/* Challenge split */
.chall-split { display: flex; flex: 1; overflow: hidden; gap: 0; }
.chall-pip-col {
  width: 220px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; padding: 20px 14px;
  background: var(--bg-pip); border-right: 3px solid var(--bdr);
}
.chall-pip-emoji { font-size: 5rem; line-height: 1; }
.chall-pip-bubble {
  background: var(--bg-bubble); border: 2.5px solid var(--gold);
  border-radius: 16px; padding: 12px 14px;
  font-size: 0.82rem; font-weight: 700; color: var(--text-body);
  text-align: center; line-height: 1.6; max-width: 180px;
}

/* Question column */
.chall-q-col {
  flex: 1; overflow-y: auto; padding: 20px;
  display: flex; align-items: flex-start; justify-content: center;
  background: var(--bg-page);
}
.q-card {
  background: var(--bg-card); border: 2px solid var(--bdr-card);
  border-radius: 20px; padding: 22px 24px;
  width: 100%; max-width: 680px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

/* Timer */
.q-num-bar {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.q-progress-dots { display: flex; gap: 8px; }
.q-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bdr-card); border: 2px solid var(--bdr-strong);
  transition: all 0.3s;
}
.q-dot.dot-done    { background: var(--green); border-color: var(--green); }
.q-dot.dot-current { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 8px rgba(245,158,11,0.6); }
.q-type-tag {
  flex: 1; font-size: 0.76rem; font-weight: 900;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em;
}
.q-timer-badge {
  font-size: 0.82rem; font-weight: 900; color: var(--gold);
  background: var(--bg-card2); border-radius: 8px; padding: 3px 9px;
  border: 1px solid var(--bdr-card);
}
.q-timer-track {
  height: 6px; background: var(--bdr-card); border-radius: 999px;
  overflow: hidden; margin-bottom: 16px;
}
.q-timer-fill {
  height: 100%; background: var(--gold); border-radius: 999px;
  transition: width 1s linear, background 0.5s;
}
.q-timer-fill.warn   { background: #fb923c; }
.q-timer-fill.danger { background: var(--red); animation: pulse 0.5s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

/* Question */
.q-question {
  font-size: 1.05rem; font-weight: 800; color: var(--text-h);
  margin-bottom: 14px; line-height: 1.5;
}
.q-code {
  background: var(--bg-code); border: 2px solid var(--bdr);
  border-radius: 10px; padding: 12px 16px;
  font-family: 'Courier New', monospace; font-size: 0.9rem;
  color: var(--text-code); white-space: pre; overflow-x: auto;
  margin-bottom: 14px;
}

/* Options */
.q-opts { display: flex; flex-direction: column; gap: 10px; }
.opt-btn {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-opt); border: 2px solid var(--bdr-card);
  border-radius: 14px; padding: 12px 16px;
  cursor: pointer; text-align: left; transition: all 0.15s;
  font-family: var(--font);
}
.opt-btn:not([disabled]):hover { background: var(--bg-card2); border-color: var(--indigo); }
.opt-label {
  min-width: 28px; height: 28px; border-radius: 8px;
  background: var(--bg-card2); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 900; flex-shrink: 0;
  border: 1px solid var(--bdr-card);
}
.opt-emoji { font-size: 1.2rem; flex-shrink: 0; }
.opt-text  { font-size: 0.88rem; font-weight: 700; color: var(--text-body); line-height: 1.4; }
.opt-btn.opt-correct { background: var(--bg-correct); border-color: var(--bdr-correct); }
.opt-btn.opt-correct .opt-label { background: var(--green); color: #fff; border-color: var(--green); }
.opt-btn.opt-wrong   { background: var(--bg-wrong); border-color: var(--bdr-wrong); }
.opt-btn.opt-wrong   .opt-label { background: var(--red); color: #fff; border-color: var(--red); }

/* Fill in */
.fill-inp {
  width: 100%; padding: 12px 16px;
  background: var(--bg-opt); border: 2px solid var(--bdr-card);
  border-radius: 14px; color: var(--text-h);
  font-family: var(--font); font-size: 1rem; font-weight: 700;
  outline: none; margin-bottom: 10px;
}
.fill-inp:focus { border-color: var(--indigo); }
.check-btn {
  width: 100%; padding: 12px; background: var(--indigo);
  color: #fff; border: none; border-radius: 14px;
  font-family: var(--font); font-size: 0.95rem; font-weight: 900; cursor: pointer;
}

/* Result */
.q-result { margin-top: 14px; }
.result-body {
  padding: 14px 16px; border-radius: 14px;
  font-size: 0.88rem; font-weight: 700; line-height: 1.5;
  margin-bottom: 10px;
}
.result-correct { background: var(--bg-correct); border: 2px solid var(--bdr-correct); color: var(--txt-correct); }
.result-wrong   { background: var(--bg-wrong);   border: 2px solid var(--bdr-wrong);   color: var(--txt-wrong); }
.result-action-btn {
  width: 100%; padding: 13px; border: none; border-radius: 14px;
  background: linear-gradient(135deg, var(--indigo), var(--violet));
  color: #fff; font-family: var(--font); font-size: 0.95rem; font-weight: 900; cursor: pointer;
  transition: transform 0.12s;
}
.result-action-btn:hover { transform: scale(1.02); }

/* Pip animations */
.pip-correct { animation: pipBounce 0.5s ease-in-out; }
.pip-wrong   { animation: pipShake 0.5s ease-in-out; }
@keyframes pipBounce { 0%,100%{transform:scale(1)} 40%{transform:scale(1.3) rotate(10deg)} 70%{transform:scale(0.95)} }
@keyframes pipShake  { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }

/* ═══════════════════════════════════════════════════════════
   WIN SCREEN
═══════════════════════════════════════════════════════════ */
#screen-win { background: var(--bg-page); }
.win-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px; }
.win-card {
  background: var(--bg-card); border: 3px solid var(--gold);
  border-radius: 24px; padding: 36px 40px; text-align: center;
  max-width: 480px; width: 100%;
  box-shadow: 0 0 60px rgba(245,158,11,0.2);
}
.win-pip      { font-size: 5rem; margin-bottom: 12px; }
.win-headline { font-family: var(--display); font-size: 2.2rem; color: var(--gold); margin-bottom: 8px; }
.win-stars    { font-size: 2rem; letter-spacing: 4px; margin-bottom: 12px; }
.win-sub      { font-size: 1rem; font-weight: 800; color: var(--text-body); margin-bottom: 10px; }
.win-fact     {
  font-size: 0.83rem; font-weight: 700; color: var(--text-muted);
  line-height: 1.6; margin-bottom: 20px;
  background: var(--bg-card2); border-radius: 12px;
  padding: 12px 16px; border: 1px solid var(--bdr-card);
}
.win-buttons  { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.win-btn-next {
  padding: 12px 24px; background: linear-gradient(135deg, var(--green), #059669);
  color: #fff; border: none; border-radius: 14px;
  font-family: var(--font); font-size: 0.95rem; font-weight: 900; cursor: pointer;
}
.win-btn-main {
  padding: 12px 24px; background: var(--indigo); color: #fff;
  border: none; border-radius: 14px;
  font-family: var(--font); font-size: 0.95rem; font-weight: 900; cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════
   WRITING LAB SCREEN  — 3-panel layout
   [Templates | Textarea | Structure+Phrases]
═══════════════════════════════════════════════════════════ */
#screen-lab { background: var(--bg-page); }

.lab-ribbon {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 20px; background: var(--bg-nav);
  border-bottom: 3px solid var(--gold); flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.lab-ribbon-title { font-family: var(--display); font-size: 1.1rem; color: var(--gold); }
.lab-ribbon-sub   { font-size: 0.75rem; color: var(--text-subtle); font-weight: 700; }

.lab-body {
  display: flex; flex: 1; overflow: hidden;
}

/* ─ LEFT: Template selector ─ */
.lab-sidebar {
  width: 190px; min-width: 170px; flex-shrink: 0;
  background: var(--bg-sidebar); border-right: 3px solid var(--bdr);
  overflow-y: auto; padding: 16px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.lab-section-title {
  font-size: 0.66rem; font-weight: 900; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--gold);
  margin-bottom: 2px; margin-top: 4px;
  padding: 4px 4px 2px;
  border-bottom: 1px solid var(--bdr-card);
}
.lab-section-title:first-child { margin-top: 0; }
.lab-type-btn {
  width: 100%; padding: 10px 12px; border: 2px solid var(--bdr-card);
  border-radius: 10px; background: var(--bg-card); color: var(--text-muted);
  font-family: var(--font); font-size: 0.78rem; font-weight: 800;
  cursor: pointer; text-align: left; transition: all 0.15s;
  line-height: 1.3;
}
.lab-type-btn:hover  { border-color: var(--indigo); color: var(--text-body); background: var(--bg-card2); }
.lab-type-btn.active { border-color: var(--gold); background: var(--bg-done-lv); color: #92400e; }
:root.dark .lab-type-btn.active { background: #1c1a00; color: var(--gold); }

/* ─ CENTER: Writing area ─ */
.lab-main {
  flex: 1; display: flex; flex-direction: column;
  padding: 14px 16px; gap: 10px; overflow: hidden;
  background: var(--bg-page);
}
.lab-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
  background: var(--bg-card); border: 1px solid var(--bdr-card);
  border-radius: 12px; padding: 10px 14px;
}
.lab-wc-wrap {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.84rem; font-weight: 800; color: var(--text-subtle);
}
.lab-word-count { font-size: 1.3rem; font-weight: 900; }
.lab-word-count.wc-ok  { color: var(--green); }
.lab-word-count.wc-low { color: var(--red); }
.lab-wc-track { width: 120px; height: 8px; background: var(--bdr-card); border-radius: 999px; overflow: hidden; }
.lab-wc-bar   { height: 100%; border-radius: 999px; transition: width 0.4s; }
.lab-wc-bar.wc-bar-ok  { background: var(--green); }
.lab-wc-bar.wc-bar-low { background: var(--red); }

.lab-textarea {
  flex: 1; width: 100%; resize: none; padding: 18px 20px;
  background: var(--bg-card); border: 2px solid var(--bdr-card);
  border-radius: 14px; color: var(--text-h);
  font-family: var(--font); font-size: 0.95rem; font-weight: 600;
  outline: none; line-height: 1.8;
}
.lab-textarea:focus { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
.lab-textarea::placeholder { color: var(--text-faint); }

.lab-clear-btn {
  padding: 8px 16px; background: #450a0a; color: #fca5a5;
  border: none; border-radius: 10px; font-family: var(--font);
  font-size: 0.8rem; font-weight: 800; cursor: pointer;
}

/* ─ RIGHT: Structure guide ─ */
.lab-right {
  width: 230px; min-width: 200px; flex-shrink: 0;
  background: var(--bg-sidebar); border-left: 3px solid var(--bdr);
  overflow-y: auto; padding: 16px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.lab-struct-box {
  background: var(--bg-code); border: 2px solid var(--bdr);
  border-radius: 12px; padding: 12px;
  font-size: 0.72rem; font-family: 'Courier New', monospace;
  color: var(--text-code); line-height: 1.7; white-space: pre-wrap; overflow-y: auto;
  max-height: 260px; flex-shrink: 0;
}
.phrase-btn {
  display: block; width: 100%; padding: 7px 10px;
  background: var(--bg-card); border: 1px solid var(--bdr-card);
  border-radius: 8px; color: #818cf8;
  font-size: 0.72rem; font-weight: 700; cursor: pointer;
  text-align: left; transition: all 0.12s; line-height: 1.4;
}
.phrase-btn:hover { background: var(--bg-bubble); border-color: var(--indigo); color: var(--indigo); }

/* ═══════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--bg-nav); border-top: 2px solid var(--bdr-card);
  padding: 10px 20px; flex-shrink: 0;
}
.footer-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
}
.footer-brand    { display: flex; align-items: center; gap: 8px; }
.footer-tv-logo  { width: 24px; height: 24px; border-radius: 6px; }
.footer-brand-name { font-size: 0.82rem; font-weight: 900; color: var(--text-muted); }
.footer-tagline  { font-size: 0.72rem; color: var(--text-faint); }
.footer-sep      { color: var(--bdr-card); margin: 0 4px; }
.footer-projects { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.footer-proj {
  display: flex; align-items: center; gap: 5px;
  color: var(--text-subtle); font-size: 0.76rem; font-weight: 700;
  text-decoration: none; transition: color 0.15s;
}
.footer-proj:hover { color: var(--gold); }
.fp-logo { width: 18px; height: 18px; border-radius: 4px; }
.footer-legal { display: flex; align-items: center; gap: 4px; font-size: 0.72rem; color: var(--text-faint); flex-wrap: wrap; }
.footer-legal-link { color: var(--text-subtle); text-decoration: none; }
.footer-legal-link:hover { color: var(--gold); }
.admin-footer-btn { background: none; border: none; cursor: pointer; font-size: 0.82rem; }

/* ═══════════════════════════════════════════════════════════
   MODALS
═══════════════════════════════════════════════════════════ */
.modal-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 9000; padding: 16px;
}
.modal-card {
  background: var(--bg-card); border: 2px solid var(--bdr-card);
  border-radius: 20px; padding: 28px 32px;
  max-width: 500px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
}
.modal-x {
  position: absolute; top: 14px; right: 14px;
  background: var(--bg-card2); border: 1px solid var(--bdr-card); border-radius: 8px;
  color: var(--text-muted); font-size: 0.9rem; cursor: pointer; padding: 4px 10px;
}
.modal-title { font-family: var(--display); font-size: 1.4rem; color: var(--gold); margin-bottom: 16px; }

/* Name modal */
.name-card { text-align: center; }
.name-pip   { font-size: 4rem; margin-bottom: 8px; }
.name-title { font-size: 1.3rem; font-weight: 900; color: var(--text-h); margin-bottom: 6px; }
.name-sub   { font-size: 0.88rem; color: var(--text-muted); font-weight: 700; margin-bottom: 16px; }
.name-inp {
  width: 100%; padding: 12px 16px; border-radius: 14px;
  background: var(--bg-card2); border: 2px solid var(--bdr-card); color: var(--text-h);
  font-family: var(--font); font-size: 1rem; font-weight: 800; outline: none; text-align: center;
}
.name-inp:focus { border-color: var(--gold); }
.name-btn {
  margin-top: 12px; width: 100%; padding: 13px;
  background: linear-gradient(135deg, var(--indigo), var(--violet));
  color: #fff; border: none; border-radius: 14px;
  font-family: var(--font); font-size: 0.95rem; font-weight: 900; cursor: pointer;
}
.name-skip { background: none; border: none; color: var(--text-faint); font-size: 0.78rem; cursor: pointer; margin-top: 8px; }

/* Avatar modal */
.avatar-card { text-align: center; }
.avatar-modal-title { font-size: 1.2rem; font-weight: 900; color: var(--gold); margin-bottom: 4px; }
.avatar-modal-sub   { font-size: 0.82rem; color: var(--text-subtle); margin-bottom: 14px; }
.avatar-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 16px; }
.avatar-opt {
  padding: 8px; font-size: 1.5rem; border: 2px solid var(--bdr-card);
  border-radius: 12px; background: var(--bg-card2); cursor: pointer; transition: all 0.15s;
}
.avatar-opt:hover    { border-color: var(--gold); background: var(--bg-done-lv); }
.avatar-opt.selected { border-color: var(--gold); background: var(--bg-done-lv); box-shadow: 0 0 12px rgba(245,158,11,0.3); }
:root.dark .avatar-opt:hover    { background: #1c1a00; }
:root.dark .avatar-opt.selected { background: #1c1a00; }
.avatar-modal-btns { display: flex; gap: 10px; }
.avatar-save-btn   { flex: 1; padding: 11px; background: var(--indigo); color: #fff; border: none; border-radius: 12px; font-family: var(--font); font-weight: 900; cursor: pointer; }
.avatar-cancel-btn { padding: 11px 16px; background: var(--bg-card2); color: var(--text-muted); border: 1px solid var(--bdr-card); border-radius: 12px; font-family: var(--font); font-weight: 800; cursor: pointer; }

/* Reset modal */
.reset-card { text-align: center; }
.reset-icon  { font-size: 3rem; margin-bottom: 8px; }
.reset-title { font-size: 1.2rem; font-weight: 900; color: var(--red); margin-bottom: 8px; }
.reset-body  { font-size: 0.86rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 18px; }
.reset-btns  { display: flex; gap: 10px; }
.reset-confirm-btn { flex: 1; padding: 11px; background: var(--red); color: #fff; border: none; border-radius: 12px; font-family: var(--font); font-weight: 900; cursor: pointer; }
.reset-cancel-btn  { padding: 11px 16px; background: var(--bg-card2); color: var(--text-muted); border: 1px solid var(--bdr-card); border-radius: 12px; font-family: var(--font); font-weight: 800; cursor: pointer; }

/* Certificate */
.cert-card { text-align: center; background: linear-gradient(135deg, #0f0a1a, #1a1232); border-color: var(--gold); color: #e2e8f0; }
.cert-top          { font-size: 3rem; margin-bottom: 8px; }
.cert-title-big    { font-family: var(--display); font-size: 1.6rem; color: var(--gold); margin-bottom: 6px; }
.cert-sub          { font-size: 0.85rem; color: #94a3b8; margin-bottom: 6px; }
.cert-student-name { font-size: 1.4rem; font-weight: 900; color: #fff; margin-bottom: 6px; }
.cert-course-name  { font-family: var(--display); font-size: 1.1rem; color: var(--indigo); margin-bottom: 4px; }
.cert-detail       { font-size: 0.8rem; color: #64748b; margin-bottom: 8px; }
.cert-stars-row    { font-size: 1.4rem; letter-spacing: 4px; margin-bottom: 8px; }
.cert-date         { font-size: 0.8rem; color: #64748b; margin-bottom: 12px; }
.cert-footer-row   { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 16px; }
.cert-logo         { width: 32px; height: 32px; border-radius: 8px; }
.cert-org          { font-size: 0.8rem; color: #64748b; }
.cert-actions      { display: flex; gap: 10px; justify-content: center; }
.cert-print-btn { padding: 10px 20px; background: var(--gold); color: #78350f; border: none; border-radius: 12px; font-family: var(--font); font-weight: 900; cursor: pointer; }
.cert-close-btn { padding: 10px 16px; background: #374151; color: #9ca3af; border: none; border-radius: 12px; font-family: var(--font); font-weight: 800; cursor: pointer; }

/* Admin */
.admin-login-card { text-align: center; max-width: 360px; }
.adm-login-icon  { font-size: 2.5rem; margin-bottom: 6px; }
.adm-login-title { font-size: 1.1rem; font-weight: 900; color: var(--text-h); margin-bottom: 4px; }
.adm-login-sub   { font-size: 0.82rem; color: var(--text-subtle); margin-bottom: 12px; }
.adm-pw-inp {
  width: 100%; padding: 11px 14px; border-radius: 12px;
  background: var(--bg-card2); border: 2px solid var(--bdr-card); color: var(--text-h);
  font-family: var(--font); font-size: 0.95rem; outline: none; text-align: center; margin-bottom: 8px;
}
.adm-pw-inp:focus { border-color: var(--indigo); }
.adm-pw-error { font-size: 0.78rem; color: var(--red); margin-bottom: 8px; font-weight: 700; }
.adm-enter-btn  { width: 100%; padding: 11px; background: var(--indigo); color: #fff; border: none; border-radius: 12px; font-family: var(--font); font-weight: 900; cursor: pointer; margin-bottom: 8px; }
.adm-cancel-btn { background: none; border: none; color: var(--text-faint); font-size: 0.82rem; cursor: pointer; }

.adm-panel-card {
  background: var(--bg-card); border: 2px solid var(--bdr-card); border-radius: 20px;
  padding: 24px; max-width: 600px; width: 100%; max-height: 90vh; overflow-y: auto;
}
.adm-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.adm-title  { font-family: var(--display); font-size: 1.3rem; color: var(--gold); }
.adm-close-btn { background: var(--bg-card2); border: 1px solid var(--bdr-card); color: var(--text-muted); padding: 6px 12px; border-radius: 8px; cursor: pointer; font-family: var(--font); font-weight: 800; }
.adm-stats { display: flex; gap: 16px; margin-bottom: 16px; }
.adm-stat { flex: 1; background: var(--bg-card2); border-radius: 12px; padding: 12px; text-align: center; border: 1px solid var(--bdr-card); }
.adm-stat-val { font-size: 1.3rem; font-weight: 900; color: var(--gold); }
.adm-stat-lbl { font-size: 0.72rem; color: var(--text-subtle); font-weight: 700; }
.adm-section-title { font-size: 0.78rem; font-weight: 900; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 8px; }
.adm-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; margin-bottom: 16px; }
.adm-table th { color: var(--text-subtle); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--bdr-card); text-align: left; }
.adm-table td { color: var(--text-body); padding: 6px 8px; border-bottom: 1px solid var(--bdr-zone); }
.adm-reset-btn { width: 100%; padding: 11px; background: #450a0a; color: #fca5a5; border: 2px solid #7f1d1d; border-radius: 12px; font-family: var(--font); font-weight: 900; cursor: pointer; }

/* Report */
.rp-card { background: var(--bg-card); border: 2px solid var(--bdr-card); border-radius: 20px; padding: 24px; max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; }
.rp-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.rp-title  { font-family: var(--display); font-size: 1.3rem; color: var(--gold); }
.rp-close  { background: var(--bg-card2); border: 1px solid var(--bdr-card); color: var(--text-muted); padding: 6px 12px; border-radius: 8px; cursor: pointer; }
.rp-student { font-size: 1rem; font-weight: 900; color: var(--text-h); }
.rp-date    { font-size: 0.78rem; color: var(--text-subtle); margin-bottom: 12px; }
.rp-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.rp-bar-outer { flex: 1; height: 12px; background: var(--bdr-card); border-radius: 999px; overflow: hidden; }
.rp-bar-inner { height: 100%; background: var(--gold); border-radius: 999px; transition: width 0.7s; }
.rp-pct { font-size: 0.88rem; font-weight: 900; color: var(--gold); min-width: 36px; text-align: right; }
.rp-summary { font-size: 0.82rem; color: var(--text-subtle); margin-bottom: 12px; }
.rp-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; margin-bottom: 12px; }
.rp-table td { padding: 6px 8px; border-bottom: 1px solid var(--bdr-zone); color: var(--text-body); }
.rp-done    { color: var(--green); font-weight: 900; }
.rp-partial { color: var(--gold);  font-weight: 800; }
.rp-zero    { color: var(--text-faint); font-weight: 700; }
.rp-print   { padding: 10px 20px; background: var(--indigo); color: #fff; border: none; border-radius: 12px; font-family: var(--font); font-weight: 900; cursor: pointer; }

/* ═══════════════════════════════════════════════════════════
   CONFETTI
═══════════════════════════════════════════════════════════ */
#confetti-box { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 9999; }
.confetti-piece {
  position: absolute; top: -20px;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════
   ARABIC RTL SUPPORT
═══════════════════════════════════════════════════════════ */
:root[dir="rtl"] .side-panel       { border-right: none; border-left: 3px solid var(--bdr); }
:root[dir="rtl"] .zone-hdr-row     { border-left: none !important; border-right: 4px solid var(--zone-color, var(--indigo)); }
:root[dir="rtl"] .chall-pip-col    { border-right: none; border-left: 3px solid var(--bdr); }
:root[dir="rtl"] .pip-bubble::before { left: auto; right: 50%; transform: translateX(50%); }
:root[dir="rtl"] .lab-sidebar      { border-right: none; border-left: 3px solid var(--bdr); }
:root[dir="rtl"] .lab-right        { border-left: none; border-right: 3px solid var(--bdr); }
:root[dir="rtl"] .lv-lock          { right: auto; left: 6px; }
:root[dir="rtl"] .lv-admin-eye     { left: auto; right: 6px; }

/* ═══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .lab-right { display: none; }
}
/* ══════════════════════════════════════════════════════════
   LISTENING LAB
══════════════════════════════════════════════════════════ */
.tbtn.listen { background: #0c4a6e; color: #7dd3fc; border: 2px solid #0369a1; }

.ls-lab-body {
  display: flex; flex: 1; overflow: hidden;
}

/* ── Sidebar ────────────────────────────────────────────── */
.ls-lab-sidebar {
  width: 220px; min-width: 220px; overflow-y: auto;
  background: var(--bg-nav); border-right: 2px solid var(--bdr);
  padding: 12px 8px; display: flex; flex-direction: column; gap: 4px;
}
.ls-sec-label {
  font-size: 0.7rem; font-weight: 900; color: var(--text-muted);
  padding: 10px 8px 4px; letter-spacing: .06em; text-transform: uppercase;
}
.ls-ex-btn {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: var(--bg-card2); border: 1px solid var(--bdr-card);
  border-radius: 10px; padding: 9px 10px; cursor: pointer;
  font-family: var(--font); font-size: 0.78rem; font-weight: 700;
  color: var(--text-body); text-align: left; transition: all .15s;
}
.ls-ex-btn:hover  { background: var(--bg-opt); border-color: var(--indigo); }
.ls-ex-btn.active { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.ls-ex-icon { font-size: 1rem; flex-shrink: 0; }
.ls-ex-btn-title { flex: 1; line-height: 1.3; }
.ls-ex-done { font-size: 0.85rem; flex-shrink: 0; }

/* ── Main ────────────────────────────────────────────────── */
.ls-lab-main {
  flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 18px;
}

/* ── Welcome ─────────────────────────────────────────────── */
.ls-welcome { text-align: center; padding: 60px 24px; margin: auto; }
.ls-welcome-icon  { font-size: 4rem; margin-bottom: 12px; }
.ls-welcome-title { font-family: var(--display); font-size: 1.6rem; color: var(--text-h); margin-bottom: 8px; }
.ls-welcome-sub   { color: var(--text-muted); font-size: 0.9rem; font-weight: 700; margin-bottom: 20px; }
.ls-welcome-types { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ls-welcome-types span {
  background: var(--bg-card2); border: 1px solid var(--bdr-card);
  border-radius: 20px; padding: 6px 14px; font-size: 0.8rem; font-weight: 700; color: var(--text-muted);
}

/* ── Player card ─────────────────────────────────────────── */
.ls-player-card {
  background: var(--bg-card); border: 2px solid var(--bdr-card);
  border-radius: 18px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px;
}
.ls-ex-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ls-section-tag {
  padding: 3px 10px; border-radius: 20px; font-size: 0.72rem; font-weight: 900;
  border: 1px solid; letter-spacing: .04em;
}
.ls-ex-type { font-size: 0.75rem; color: var(--text-muted); font-weight: 700; }
.ls-ex-diff {
  margin-left: auto; font-size: 0.72rem; font-weight: 900; color: var(--text-subtle);
  background: var(--bg-card2); border-radius: 20px; padding: 2px 10px; border: 1px solid var(--bdr-card);
}
.ls-ex-title-h { font-family: var(--display); font-size: 1.25rem; color: var(--text-h); }
.ls-player-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ls-play-btn {
  padding: 10px 22px; background: linear-gradient(135deg,#0ea5e9,#0284c7);
  color: #fff; border: none; border-radius: 12px;
  font-family: var(--font); font-size: 0.9rem; font-weight: 900; cursor: pointer; transition: opacity .2s;
}
.ls-play-btn:hover { opacity: .88; }
.ls-btn-replay {
  padding: 10px 16px; background: var(--bg-card2); border: 2px solid var(--bdr-card);
  border-radius: 12px; font-family: var(--font); font-size: 0.88rem; font-weight: 800;
  color: var(--text-h); cursor: pointer;
}
.ls-speed-sel {
  padding: 8px 10px; background: var(--bg-card2); border: 2px solid var(--bdr-card);
  border-radius: 10px; font-family: var(--font); font-size: 0.82rem; font-weight: 800;
  color: var(--text-h); cursor: pointer;
}
.ls-play-count {
  margin-left: auto; font-size: 0.78rem; font-weight: 900; color: var(--text-subtle);
  background: var(--bg-card2); border-radius: 20px; padding: 4px 12px; border: 1px solid var(--bdr-card);
}
.ls-player-tip { font-size: 0.78rem; color: var(--text-muted); font-weight: 700; }

/* ── Question blocks ─────────────────────────────────────── */
.ls-q-block {
  background: var(--bg-card); border: 2px solid var(--bdr-card);
  border-radius: 18px; padding: 20px;
}
.ls-q-instruction {
  font-size: 0.82rem; font-weight: 700; color: var(--text-muted);
  background: var(--bg-card2); border-radius: 10px; padding: 10px 14px;
  margin-bottom: 16px; border-left: 3px solid var(--indigo);
}
.ls-q-num  { font-size: 0.72rem; font-weight: 900; color: var(--text-subtle); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.ls-q-text { font-size: 0.9rem; font-weight: 800; color: var(--text-h); margin-bottom: 10px; }

/* ── Form completion ─────────────────────────────────────── */
.ls-form-table { width: 100%; border-collapse: collapse; }
.ls-form-caption {
  font-family: var(--display); font-size: 1rem; font-weight: 900;
  color: var(--text-h); text-align: left; padding-bottom: 12px;
}
.ls-form-table tr { border-bottom: 1px solid var(--bdr-card); }
.ls-form-label {
  padding: 10px 14px 10px 0; font-size: 0.82rem; font-weight: 800;
  color: var(--text-muted); white-space: nowrap; width: 40%;
}
.ls-fill-inp {
  padding: 8px 12px; background: var(--bg-card2); border: 2px solid var(--bdr-card);
  border-radius: 10px; font-family: var(--font); font-size: 0.88rem; font-weight: 800;
  color: var(--text-h); width: 100%; outline: none; transition: border-color .2s;
}
.ls-fill-inp:focus { border-color: var(--indigo); }
.ls-fill-inp:disabled { opacity: .85; }
.ls-fill-inp.ls-inp-ok  { border-color: var(--green); background: var(--bg-correct); }
.ls-fill-inp.ls-inp-err { border-color: var(--red);   background: var(--bg-wrong);  }

/* ── Note completion ─────────────────────────────────────── */
.ls-note-card {
  background: var(--bg-card2); border: 1px solid var(--bdr-card);
  border-radius: 14px; padding: 16px 18px;
}
.ls-note-title {
  font-family: var(--display); font-size: 0.95rem; color: var(--text-h);
  margin-bottom: 14px; border-bottom: 2px dashed var(--bdr-card); padding-bottom: 8px;
}
.ls-note-body  { display: flex; flex-direction: column; gap: 10px; }
.ls-note-item  { font-size: 0.88rem; font-weight: 700; color: var(--text-body); line-height: 2; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ls-inline-inp { width: 120px; padding: 4px 10px; font-size: 0.85rem; }

/* ── Multiple choice ─────────────────────────────────────── */
.ls-mc-item { margin-bottom: 18px; }
.ls-mc-item:last-child { margin-bottom: 0; }
.ls-mc-opts { display: flex; flex-direction: column; gap: 8px; }
.ls-mc-btn {
  display: flex; align-items: center; gap: 10px; padding: 11px 16px;
  background: var(--bg-opt); border: 2px solid var(--bdr-card);
  border-radius: 12px; font-family: var(--font); font-size: 0.86rem;
  font-weight: 700; color: var(--text-body); cursor: pointer; text-align: left; transition: all .15s;
}
.ls-mc-btn:not([disabled]):hover { background: var(--bg-card2); border-color: var(--indigo); }
.ls-mc-btn.ls-mc-sel  { background: #1e3a5f; border-color: #0ea5e9; color: #7dd3fc; }
.ls-mc-btn.ls-mc-ok   { background: var(--bg-correct); border-color: var(--bdr-correct); color: var(--green); font-weight: 900; }
.ls-mc-btn.ls-mc-err  { background: var(--bg-wrong);   border-color: var(--bdr-wrong);   color: var(--red); }

/* ── Short answer ────────────────────────────────────────── */
.ls-short-item { margin-bottom: 18px; }
.ls-short-item:last-child { margin-bottom: 0; }
.ls-short-inp {
  width: 100%; padding: 10px 14px; margin-top: 6px;
  background: var(--bg-card2); border: 2px solid var(--bdr-card);
  border-radius: 12px; font-family: var(--font); font-size: 0.88rem;
  font-weight: 800; color: var(--text-h); outline: none; transition: border-color .2s;
}
.ls-short-inp:focus { border-color: var(--indigo); }
.ls-short-inp.ls-inp-ok  { border-color: var(--green); background: var(--bg-correct); }
.ls-short-inp.ls-inp-err { border-color: var(--red);   background: var(--bg-wrong);  }

/* ── Hint (correct answer reveal) ───────────────────────── */
.ls-hint {
  font-size: 0.78rem; font-weight: 900; color: var(--green);
  background: var(--bg-correct); border-radius: 8px; padding: 2px 8px; white-space: nowrap;
}

/* ── Action bar ──────────────────────────────────────────── */
.ls-action-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ls-check-btn {
  padding: 13px 28px; background: linear-gradient(135deg,var(--indigo),var(--violet));
  color: #fff; border: none; border-radius: 14px;
  font-family: var(--font); font-size: 0.95rem; font-weight: 900; cursor: pointer; transition: opacity .2s;
}
.ls-check-btn:hover { opacity: .88; }
.ls-transcript-btn {
  padding: 11px 20px; background: var(--bg-card2); border: 2px solid var(--bdr-card);
  border-radius: 14px; font-family: var(--font); font-size: 0.88rem;
  font-weight: 800; color: var(--text-h); cursor: pointer;
}

/* ── Score card ──────────────────────────────────────────── */
.ls-score-card {
  border-radius: 16px; padding: 18px 22px; border: 2px solid;
  display: flex; flex-direction: column; gap: 6px;
}
.ls-score-great { background: var(--bg-correct); border-color: var(--bdr-correct); }
.ls-score-ok    { background: #1c2340; border-color: #3b5bdb; }
.ls-score-low   { background: var(--bg-wrong);   border-color: var(--bdr-wrong);   }
.ls-score-top { display: flex; align-items: center; gap: 12px; }
.ls-score-num { font-family: var(--display); font-size: 1.5rem; color: var(--text-h); }
.ls-score-pct { font-size: 0.88rem; font-weight: 900; color: var(--text-muted); }
.ls-score-msg { font-size: 0.85rem; font-weight: 700; color: var(--text-muted); }

/* ── Transcript ──────────────────────────────────────────── */
.ls-transcript-box {
  background: var(--bg-card2); border: 2px solid var(--bdr-card);
  border-radius: 16px; padding: 18px 20px;
}
.ls-transcript-title { font-family: var(--display); font-size: 0.95rem; color: var(--text-h); margin-bottom: 12px; }
.ls-transcript-text  { font-size: 0.84rem; font-weight: 700; color: var(--text-body); line-height: 1.8; }

/* ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  html, body { overflow: auto; height: auto; }
  .screen { height: auto; min-height: 100dvh; }
  .map-body { flex-direction: column; overflow: visible; }
  .map-body.sidebar-hidden .side-panel { display: none !important; }
  .side-panel { width: 100% !important; min-width: unset !important; max-height: 340px; border-right: none; border-bottom: 3px solid var(--bdr); }
  .map-center { padding: 12px; }
  .zone-body  { grid-template-columns: repeat(2, 1fr); }
  .chall-split { flex-direction: column; }
  .chall-pip-col { width: 100%; flex-direction: row; justify-content: flex-start; padding: 12px 16px; gap: 12px; border-right: none; border-bottom: 3px solid var(--bdr); }
  .chall-pip-emoji { font-size: 3rem; }
  .chall-pip-bubble { max-width: none; font-size: 0.8rem; }
  .lab-body   { flex-direction: column; }
  .lab-sidebar { width: 100%; max-height: 220px; min-width: unset; border-right: none; border-bottom: 3px solid var(--bdr); flex-direction: row; flex-wrap: wrap; padding: 10px; gap: 6px; overflow-x: auto; }
  .lab-sidebar .lab-section-title { width: 100%; margin-top: 6px; }
  .lab-sidebar .lab-type-btn { width: auto; white-space: nowrap; }
  .lab-right  { display: none; }
  .top-right  { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  .tbtn       { padding: 6px 10px; font-size: 0.76rem; }
  :root[dir="rtl"] .map-body      { flex-direction: column; }
  :root[dir="rtl"] .side-panel    { border-left: none; border-bottom: 3px solid var(--bdr); }
  :root[dir="rtl"] .chall-pip-col { border-left: none; border-bottom: 3px solid var(--bdr); }
  :root[dir="rtl"] .lab-sidebar   { border-left: none; border-bottom: 3px solid var(--bdr); }
  .ls-lab-body    { flex-direction: column; }
  .ls-lab-sidebar { width: 100%; min-width: unset; max-height: 180px; border-right: none; border-bottom: 2px solid var(--bdr); flex-direction: row; flex-wrap: nowrap; overflow-x: auto; padding: 8px; gap: 6px; }
  .ls-sec-label   { display: none; }
  .ls-ex-btn      { min-width: 130px; }
  .ls-lab-main    { padding: 12px 14px; }
  .ls-inline-inp  { width: 80px; }
}
@media (max-width: 480px) {
  .zone-body { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 10px; }
  .lv-card   { padding: 10px 8px; min-height: 86px; }
  .lv-name   { font-size: 0.56rem; }
  .brand-name { font-size: 1.15rem; }
  .win-card  { padding: 24px 18px; }
  .win-headline { font-size: 1.6rem; }
}