/* =========================================================
   Likkle Coders — CODE LAB (v445)
   Scoped to .lab-zone so nothing here can leak into the rest
   of the app. Dark editor surface: this is a real IDE, and it
   should feel like one.
   ========================================================= */

.lab-zone{
  --lab-bg:#0f1420; --lab-panel:#161d2c; --lab-line:#243049;
  --lab-ink:#e8edf7; --lab-dim:#9aa8c2;
  --lab-lime:#c6f24e; --lab-purple:#8b5cf6; --lab-cyan:#4dd4f5;
  --lab-good:#34d399; --lab-bad:#fb7185;
  max-width:1100px; margin:0 auto; padding:0 14px 60px;
}

/* ---------- back ---------- */
.lab-zone .lab-back{
  display:inline-block; margin:14px 0 10px; padding:8px 14px;
  background:#eef1f7; color:#33405c; border-radius:999px;
  font-weight:700; font-size:.86rem; text-decoration:none;
}
.lab-zone .lab-back:hover{ background:#e2e7f1; }

/* ---------- hero ---------- */
.lab-zone .lab-hero{
  display:flex; align-items:center; gap:18px; margin:16px 0 22px;
  background:linear-gradient(135deg,#161d2c 0%,#1e2942 60%,#2b1f4d 100%);
  border-radius:24px; padding:26px 28px; color:#fff; overflow:hidden;
}
.lab-zone .lab-hero-txt{ flex:1; min-width:0; }
.lab-zone .lab-kicker{
  font-size:.7rem; letter-spacing:.18em; font-weight:800;
  color:var(--lab-lime); margin-bottom:6px;
}
.lab-zone .lab-hero h1{ margin:0 0 8px; font-size:2rem; line-height:1.1; color:#fff; }
.lab-zone .lab-hero p{ margin:0 0 14px; color:#c3cde0; font-size:.95rem; line-height:1.5; max-width:56ch; }
.lab-zone .lab-hero-art{ font-size:4rem; line-height:1; flex:0 0 auto; }
.lab-zone .lab-prog{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.lab-zone .lab-prog-bar{
  flex:1; min-width:140px; height:9px; background:rgba(255,255,255,.16);
  border-radius:999px; overflow:hidden;
}
.lab-zone .lab-prog-bar i{
  display:block; height:100%; background:linear-gradient(90deg,var(--lab-lime),var(--lab-cyan));
  border-radius:999px; transition:width .4s ease;
}
.lab-zone .lab-prog span{ font-size:.82rem; font-weight:700; color:#dbe4f2; }

/* ---------- level cards ---------- */
.lab-zone .lab-levels{ display:grid; gap:12px; }
.lab-zone .lab-lv{
  display:flex; gap:14px; align-items:center; text-decoration:none;
  background:#fff; border:2px solid #e6eaf2; border-radius:18px; padding:16px 18px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.lab-zone .lab-lv:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(28,40,70,.12); border-color:#c9d3e6; }
.lab-zone .lab-lv.locked{ opacity:.55; cursor:not-allowed; background:#f6f7fb; }
.lab-zone .lab-lv.locked:hover{ transform:none; box-shadow:none; }
.lab-zone .lab-lv.complete{ border-color:var(--lab-good); background:#f2fdf8; }
.lab-zone .lab-lv-ico{ font-size:2rem; flex:0 0 auto; width:52px; text-align:center; }
.lab-zone .lab-lv-body{ min-width:0; }
.lab-zone .lab-lv-body h3{ margin:0 0 3px; font-size:1.05rem; color:#1b2438; }
.lab-zone .lab-lv-body p{ margin:0 0 5px; font-size:.87rem; color:#5b6880; line-height:1.4; }
.lab-zone .lab-lv-meta{ font-size:.76rem; font-weight:800; color:#8290ab; letter-spacing:.02em; }
.lab-zone .lab-tick{ color:var(--lab-good); }

.lab-zone .lab-sandbox-cta{
  display:flex; flex-direction:column; gap:3px; margin-top:16px; padding:16px 18px;
  border-radius:18px; text-decoration:none; color:#fff;
  background:linear-gradient(135deg,#5b21b6,#7c3aed);
}
.lab-zone .lab-sandbox-cta b{ font-size:1rem; }
.lab-zone .lab-sandbox-cta span{ font-size:.85rem; color:#e2d9fb; }

/* ---------- level page ---------- */
.lab-zone .lab-lv-head{ display:flex; gap:14px; align-items:center; margin:6px 0 18px; }
.lab-zone .lab-lv-head-ico{ font-size:2.6rem; }
.lab-zone .lab-lv-head h1{ margin:0 0 3px; font-size:1.6rem; color:#1b2438; }
.lab-zone .lab-lv-head p{ margin:0; color:#5b6880; font-size:.92rem; }

.lab-zone .lab-ex-list{ display:grid; gap:10px; }
.lab-zone .lab-ex{
  display:flex; gap:14px; align-items:center; text-decoration:none;
  background:#fff; border:2px solid #e6eaf2; border-radius:14px; padding:14px 16px;
  transition:transform .15s ease, border-color .15s ease;
}
.lab-zone .lab-ex:hover{ transform:translateX(3px); border-color:#c9d3e6; }
.lab-zone .lab-ex.locked{ opacity:.5; cursor:not-allowed; }
.lab-zone .lab-ex.locked:hover{ transform:none; }
.lab-zone .lab-ex.done{ border-color:var(--lab-good); background:#f4fdf9; }
.lab-zone .lab-ex-n{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; font-weight:800; font-size:.95rem;
  background:#eef1f7; color:#4a5670;
}
.lab-zone .lab-ex.done .lab-ex-n{ background:var(--lab-good); color:#fff; }
.lab-zone .lab-ex-body h4{ margin:0 0 2px; font-size:1rem; color:#1b2438; }
.lab-zone .lab-ex-body p{ margin:0; font-size:.85rem; color:#5b6880; }

/* ---------- teaching panel ---------- */
.lab-zone .lab-teach{
  background:#fff; border:2px solid #e6eaf2; border-radius:20px;
  padding:20px 22px; margin-bottom:16px;
}
.lab-zone .lab-teach-head{ margin-bottom:12px; }
.lab-zone .lab-chip{
  display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.06em;
  background:#eef1f7; color:#5b6880; padding:5px 12px; border-radius:999px; margin-bottom:8px;
}
.lab-zone .lab-teach h1{ margin:0; font-size:1.5rem; color:#1b2438; }
.lab-zone .lab-teach-body{ color:#3c4761; font-size:.95rem; line-height:1.65; }
.lab-zone .lab-teach-body p{ margin:0 0 10px; }
.lab-zone .lab-teach-body code{
  background:#eef1f7; padding:2px 6px; border-radius:5px;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:.88em;
}
.lab-zone .lab-example{ margin:12px 0; }
.lab-zone .lab-example-lab{
  font-size:.72rem; font-weight:800; letter-spacing:.08em; color:#8290ab; margin-bottom:5px;
}
.lab-zone .lab-example pre{
  margin:0; background:var(--lab-bg); color:#d7e2f5; border-radius:12px;
  padding:14px 16px; overflow-x:auto; font-size:.88rem; line-height:1.6;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
.lab-zone .lab-task{
  background:linear-gradient(135deg,#fff7e6,#fdeccd); border-left:5px solid #f59e0b;
  border-radius:0 12px 12px 0; padding:13px 16px; margin-top:12px;
}
.lab-zone .lab-task b{ display:block; font-size:.75rem; letter-spacing:.08em; color:#92610a; margin-bottom:4px; }
.lab-zone .lab-task p{ margin:0; color:#42341a; font-weight:600; font-size:.95rem; }

/* ---------- the working area ---------- */
.lab-zone .lab-work{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
@media(max-width:820px){ .lab-zone .lab-work{ grid-template-columns:1fr; } }

.lab-zone .lab-editor-wrap,
.lab-zone .lab-out-wrap{
  background:var(--lab-panel); border-radius:16px; overflow:hidden;
  border:1px solid var(--lab-line);
}
.lab-zone .lab-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 14px; background:#1b2334; border-bottom:1px solid var(--lab-line);
}
.lab-zone .lab-bar span{
  font-size:.76rem; font-weight:700; letter-spacing:.05em; color:var(--lab-dim);
  font-family:ui-monospace,Menlo,Consolas,monospace;
}
.lab-zone .lab-reset{
  background:transparent; border:1px solid var(--lab-line); color:var(--lab-dim);
  font-size:.74rem; font-weight:700; padding:4px 10px; border-radius:7px; cursor:pointer;
}
.lab-zone .lab-reset:hover{ color:#fff; border-color:#3a4a6b; }

.lab-zone .lab-editor{ display:flex; background:var(--lab-bg); }
.lab-zone .lab-gutter{
  flex:0 0 auto; padding:14px 8px 14px 14px; text-align:right;
  color:#4b5b7a; font-size:.86rem; line-height:1.65; white-space:pre;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  user-select:none; overflow:hidden;
}
.lab-zone #labCode{
  flex:1; min-height:240px; resize:vertical; border:0; outline:0;
  background:transparent; color:#e6eefb; padding:14px 14px 14px 8px;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:.86rem; line-height:1.65; tab-size:4; white-space:pre;
  caret-color:var(--lab-lime);
}

.lab-zone .lab-input{ padding:10px 14px 0; background:var(--lab-panel); }
.lab-zone .lab-input label{
  display:block; font-size:.74rem; color:var(--lab-dim); margin-bottom:5px; font-weight:600;
}
.lab-zone .lab-input textarea{
  width:100%; box-sizing:border-box; background:var(--lab-bg); color:#e6eefb;
  border:1px solid var(--lab-line); border-radius:9px; padding:8px 10px;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.82rem; resize:vertical;
}

.lab-zone .lab-actions{ display:flex; gap:9px; padding:12px 14px 14px; }
.lab-zone .lab-run,
.lab-zone .lab-check{
  flex:1; border:0; border-radius:11px; padding:12px 14px; cursor:pointer;
  font-weight:800; font-size:.92rem; transition:transform .12s ease, filter .12s ease;
}
.lab-zone .lab-run{ background:var(--lab-lime); color:#182207; }
.lab-zone .lab-check{ background:var(--lab-purple); color:#fff; }
.lab-zone .lab-run:hover,.lab-zone .lab-check:hover{ transform:translateY(-1px); filter:brightness(1.06); }
.lab-zone .lab-run:active,.lab-zone .lab-check:active{ transform:translateY(0); }

/* ---------- output ---------- */
.lab-zone .lab-out{ min-height:180px; padding:14px 16px; background:var(--lab-bg); }
.lab-zone .lab-out-empty{ color:#6b7b9c; font-size:.86rem; line-height:1.6; }
.lab-zone .lab-out-pre{
  margin:0; color:#e6eefb; white-space:pre-wrap; word-break:break-word;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:.86rem; line-height:1.7;
}

/* real, readable errors */
.lab-zone .lab-err{
  background:rgba(251,113,133,.09); border-left:4px solid var(--lab-bad);
  border-radius:0 10px 10px 0; padding:12px 14px;
}
.lab-zone .lab-err-head{ display:flex; align-items:center; gap:9px; margin-bottom:6px; }
.lab-zone .lab-err-line{
  background:var(--lab-bad); color:#fff; font-size:.7rem; font-weight:800;
  padding:2px 8px; border-radius:6px;
}
.lab-zone .lab-err-head b{ color:#ffb3bf; font-size:.85rem; font-family:ui-monospace,Menlo,monospace; }
.lab-zone .lab-err-msg{ color:#ffe4e8; font-size:.9rem; line-height:1.55; }
.lab-zone .lab-err-hint{
  margin-top:8px; padding-top:8px; border-top:1px solid rgba(251,113,133,.25);
  color:#c9d6ee; font-size:.85rem; line-height:1.5;
}

/* ---------- verdict ---------- */
.lab-zone .lab-verdict:empty{ display:none; }
.lab-zone .lab-pass{
  background:#f2fdf8; border-top:2px solid var(--lab-good); padding:16px;
}
.lab-zone .lab-pass-top{ font-size:1.15rem; color:#0f7a55; margin-bottom:5px; }
.lab-zone .lab-pass p{ margin:0 0 10px; color:#2b6350; font-size:.9rem; }
.lab-zone .lab-compare{ margin-bottom:12px; }
.lab-zone .lab-compare summary{
  cursor:pointer; font-weight:700; font-size:.85rem; color:#3c6f5c; padding:5px 0;
}
.lab-zone .lab-compare pre{
  background:var(--lab-bg); color:#d7e2f5; border-radius:10px; padding:12px 14px;
  overflow-x:auto; font-size:.83rem; line-height:1.6; margin:6px 0 6px;
  font-family:ui-monospace,Menlo,Consolas,monospace;
}
.lab-zone .lab-compare small{ color:#6b8a7d; font-size:.78rem; }
.lab-zone .lab-next{
  display:block; text-align:center; background:#0f7a55; color:#fff;
  padding:12px; border-radius:11px; font-weight:800; text-decoration:none; font-size:.92rem;
}
.lab-zone .lab-next:hover{ background:#0c6446; }

.lab-zone .lab-fail{ background:#fff5f6; border-top:2px solid var(--lab-bad); padding:16px; }
.lab-zone .lab-fail b{ color:#9f1239; font-size:.98rem; }
.lab-zone .lab-fail p{ margin:6px 0 0; color:#6b3a46; font-size:.88rem; line-height:1.55; }
.lab-zone .lab-with code{
  background:#ffe4e8; padding:2px 7px; border-radius:5px;
  font-family:ui-monospace,Menlo,monospace; font-size:.85em;
}
.lab-zone .lab-diff{
  width:100%; border-collapse:collapse; margin:10px 0 4px; font-size:.84rem;
  font-family:ui-monospace,Menlo,Consolas,monospace;
}
.lab-zone .lab-diff th{
  text-align:left; padding:6px 9px; background:#ffe4e8; color:#9f1239;
  font-size:.74rem; letter-spacing:.05em;
}
.lab-zone .lab-diff td{ padding:6px 9px; border-top:1px solid #ffd7dd; color:#4a3238; }
.lab-zone .lab-diff tr.bad td{ background:#fff0f2; color:#9f1239; font-weight:700; }
.lab-zone .lab-tip{ font-size:.83rem; color:#8b5a66; }

/* ---------- hints ---------- */
.lab-zone .lab-help{ margin-top:16px; }
.lab-zone .lab-hint-btn{
  width:100%; background:#fff; border:2px dashed #d5b8f5; color:#6d28d9;
  border-radius:13px; padding:13px; font-weight:800; font-size:.9rem; cursor:pointer;
}
.lab-zone .lab-hint-btn:hover:not(:disabled){ background:#faf5ff; }
.lab-zone .lab-hint-btn:disabled{ opacity:.6; cursor:default; border-style:solid; }
.lab-zone .lab-hints{ display:grid; gap:9px; margin-top:10px; }
.lab-zone .lab-hint{
  background:#faf5ff; border-left:4px solid var(--lab-purple);
  border-radius:0 11px 11px 0; padding:11px 14px;
}
.lab-zone .lab-hint b{
  display:block; font-size:.72rem; letter-spacing:.07em; color:#6d28d9; margin-bottom:3px;
}
.lab-zone .lab-hint p{ margin:0; color:#3f2a5c; font-size:.88rem; line-height:1.5; }

/* ---------- dark scheme ---------- */
@media (prefers-color-scheme: dark){
  .lab-zone .lab-lv, .lab-zone .lab-ex, .lab-zone .lab-teach{ background:#1a2130; border-color:#2a3446; }
  .lab-zone .lab-lv-body h3, .lab-zone .lab-ex-body h4,
  .lab-zone .lab-teach h1, .lab-zone .lab-lv-head h1{ color:#e8edf7; }
  .lab-zone .lab-teach-body{ color:#c3cde0; }
  .lab-zone .lab-lv-body p, .lab-zone .lab-ex-body p, .lab-zone .lab-lv-head p{ color:#93a1bd; }
  .lab-zone .lab-back{ background:#1f2838; color:#c3cde0; }
}

/* =========================================================
   Academy entry point — the Code Lab banner. Lives outside
   .lab-zone because it sits on the Academy page.
   ========================================================= */
.lc-lab-cta{
  display:flex; align-items:center; gap:18px; text-decoration:none;
  margin:1.1rem 0 1.4rem; padding:20px 24px; border-radius:22px;
  background:linear-gradient(135deg,#0f1420 0%,#222c47 55%,#4c1d95 100%);
  color:#fff; box-shadow:0 12px 30px rgba(20,28,55,.22);
  transition:transform .16s ease, box-shadow .16s ease;
}
.lc-lab-cta:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(20,28,55,.3); }
.lc-lab-cta-ico{ font-size:3rem; line-height:1; flex:0 0 auto; }
.lc-lab-cta-txt{ flex:1; min-width:0; display:block; }
.lc-lab-cta-kick{
  display:block; font-size:.68rem; font-weight:800; letter-spacing:.16em;
  color:#c6f24e; margin-bottom:3px;
}
.lc-lab-cta strong{ display:block; font-size:1.45rem; line-height:1.15; margin-bottom:4px; color:#fff; }
.lc-lab-cta-sub{ display:block; font-size:.88rem; color:#c3cde0; line-height:1.5; }
.lc-lab-cta-go{
  flex:0 0 auto; background:#c6f24e; color:#182207; font-weight:800;
  font-size:.86rem; padding:11px 18px; border-radius:999px; white-space:nowrap;
}
@media(max-width:640px){
  .lc-lab-cta{ flex-wrap:wrap; gap:12px; padding:18px; }
  .lc-lab-cta-ico{ font-size:2.4rem; }
  .lc-lab-cta strong{ font-size:1.2rem; }
  .lc-lab-cta-go{ width:100%; text-align:center; }
}