/* Code Sandbox - first steps to full-stack Python (masterclass) */

:root {
  --bg: #0e1320;
  --bg-2: #131a2b;
  --surface: #182135;
  --surface-2: #1f2a42;
  --border: #2a3650;
  --text: #eef2fb;
  --text-muted: #97a3bd;
  --accent: #00ed64;
  --accent-2: #4cc9f0;
  --purple: #b794f6;
  --pink: #f472b6;
  --amber: #fbbf24;
  --danger: #fb7185;
  --radius: 16px;
  --radius-sm: 10px;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: "Baloo 2", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: var(--sans);
  background:
    radial-gradient(1200px 600px at 12% -10%, rgba(0, 237, 100, 0.07), transparent 60%),
    radial-gradient(1000px 500px at 95% 0%, rgba(76, 201, 240, 0.07), transparent 55%),
    var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------------- Top bar ---------------- */
.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 18px; background: rgba(19, 26, 43, 0.85);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); flex-wrap: wrap;
  z-index: 10;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(0, 237, 100, 0.2), rgba(76, 201, 240, 0.2));
  border: 1px solid rgba(0, 237, 100, 0.3); color: var(--accent);
}
.brand-logo svg { width: 22px; height: 22px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; }
.brand-sub { font-size: 0.72rem; color: var(--text-muted); font-weight: 600; }

.toolbar { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.progress-pill {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: var(--mono); font-weight: 800; font-size: 0.78rem; color: var(--accent);
  background: rgba(0,237,100,0.08); border: 1px solid rgba(0,237,100,0.3);
  border-radius: 100px; padding: 5px 12px; transition: all 0.15s ease;
}
.progress-pill[hidden] { display: none; }
.progress-pill:hover { background: rgba(0,237,100,0.16); }
.progress-pill .pill-trophy { font-size: 0.9rem; filter: grayscale(0.4); }
.progress-pill.complete { color: #04210f; background: linear-gradient(135deg, var(--accent), #00c853); border-color: transparent; }
.progress-pill.complete .pill-trophy { filter: none; }

.btn {
  font-family: var(--sans); font-weight: 800; font-size: 0.86rem;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  padding: 9px 14px; border-radius: var(--radius-sm); cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { background: var(--surface); border-color: #3a4a6a; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 16px; height: 16px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-check {
  background: linear-gradient(135deg, var(--accent-2), #2f9fd6); color: #04212e;
  border-color: transparent; box-shadow: 0 8px 18px -8px rgba(76, 201, 240, 0.7);
}
.btn-check:hover { box-shadow: 0 10px 22px -8px rgba(76, 201, 240, 0.9); }
.btn-ghost { background: transparent; }

/* ---------------- Workspace ---------------- */
.workspace {
  flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 12px; padding: 12px; min-height: 0;
}
.pane {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.pane-left { overflow: hidden; }
.pane-scroll { overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 14px; }

/* ---------------- Lesson panel ---------------- */
.lesson {
  background: linear-gradient(135deg, rgba(76,201,240,0.10), rgba(183,148,246,0.08));
  border: 1px solid var(--border); border-radius: var(--radius); padding: 16px;
}
.lesson-top { display: flex; gap: 13px; align-items: flex-start; }
.lesson-emoji { font-size: 2rem; line-height: 1; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4)); }
.lesson-headings { min-width: 0; }
.lesson-title-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.lesson-title { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; }
.badge {
  font-size: 0.64rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 100px; border: 1px solid var(--border); color: var(--text-muted);
}
.badge.beginner { color: var(--accent); border-color: rgba(0,237,100,0.4); background: rgba(0,237,100,0.08); }
.badge.intermediate { color: var(--accent-2); border-color: rgba(76,201,240,0.4); background: rgba(76,201,240,0.08); }
.badge.advanced { color: var(--purple); border-color: rgba(183,148,246,0.4); background: rgba(183,148,246,0.08); }
.lesson-goal { color: var(--text-muted); font-size: 0.92rem; line-height: 1.5; font-weight: 600; margin-top: 3px; }

.lesson-progress {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--border);
}
.nav-mini {
  font-family: var(--sans); font-weight: 800; font-size: 0.78rem; cursor: pointer;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 11px;
}
.nav-mini:hover { background: var(--surface); border-color: #3a4a6a; }
.nav-mini:disabled { opacity: 0.4; cursor: not-allowed; }
.nav-mini.glow {
  background: linear-gradient(135deg, var(--accent), #00c853); color: #04210f; border-color: transparent;
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(0,237,100,0.5); } 50% { box-shadow: 0 0 0 6px rgba(0,237,100,0); } }
.progress-text { font-size: 0.76rem; font-weight: 700; color: var(--text-muted); }

.lesson-concept { margin-top: 13px; font-size: 0.9rem; line-height: 1.6; }
.lesson-concept p { margin: 0 0 9px; color: #d7deec; }
.lesson-concept p:last-child { margin-bottom: 0; }
.lesson-concept code { font-family: var(--mono); font-size: 0.82em; background: var(--bg-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; color: var(--amber); }
.lesson-concept strong { color: var(--text); font-weight: 800; }
.lesson-concept em { color: var(--accent-2); font-style: normal; font-weight: 700; }
.lesson-concept ul { margin: 4px 0 9px; padding-left: 18px; }
.lesson-concept li { margin: 3px 0; color: #d7deec; }

.lesson-steps { margin: 4px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; }
.lesson-steps li { font-size: 0.86rem; line-height: 1.45; font-weight: 600; color: #cdd6ea; }
.lesson-steps code { font-family: var(--mono); font-size: 0.82em; color: var(--amber); }

.contract {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 13px; padding-top: 13px; border-top: 1px dashed var(--border);
  font-family: var(--mono); font-size: 0.78rem;
}
.contract .pill { padding: 4px 10px; border-radius: 8px; font-weight: 600; white-space: nowrap; border: 1px solid var(--border); background: var(--bg-2); }
.contract .pill.in { color: var(--accent-2); border-color: rgba(76,201,240,0.35); }
.contract .pill.fn { color: var(--amber); border-color: rgba(251,191,36,0.35); }
.contract .pill.out { color: var(--accent); border-color: rgba(0,237,100,0.35); }
.contract .arrow { color: var(--text-muted); font-weight: 800; }
.contract[hidden] { display: none; }

/* ---------------- Lines-saved scoreboard (pipeline lessons) ---------------- */
.scoreboard {
  display: flex; align-items: center; gap: 12px; margin-top: 13px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 12px;
  background: linear-gradient(135deg, rgba(0,237,100,0.07), rgba(76,201,240,0.05));
}
.scoreboard[hidden] { display: none; }
.score-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 58px; }
.score-n { font-family: var(--mono); font-weight: 800; font-size: 1.5rem; line-height: 1; }
.score-l { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.score-cell.mongo .score-n { color: var(--accent); }
.score-cell.python .score-n { color: var(--amber); }
.score-vs { font-weight: 800; color: var(--text-muted); font-size: 0.8rem; }
.score-saved { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding-left: 14px; border-left: 1px dashed var(--border); }
.score-saved .score-n { color: var(--accent-2); font-size: 1.8rem; }
.score-saved .score-l { color: var(--accent-2); }
.scoreboard.pulse { animation: scorePulse 0.7s ease; }
@keyframes scorePulse { 0%, 100% { transform: scale(1); box-shadow: none; } 35% { transform: scale(1.035); box-shadow: 0 0 0 3px rgba(0,237,100,0.25); } }

.analogy { margin-top: 12px; padding: 10px 13px; border-radius: 12px; border-left: 3px solid var(--amber); background: rgba(251,191,36,0.08); font-weight: 600; font-size: 0.92rem; color: #fde9b8; }
.analogy[hidden] { display: none; }
.analogy code { background: rgba(0,0,0,0.28); padding: 1px 6px; border-radius: 6px; font-family: var(--mono); font-size: 0.86em; color: var(--accent); }
.analogy strong { color: #fff; }

.reveals { display: flex; flex-direction: column; gap: 8px; margin-top: 13px; }
.reveal { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-2); overflow: hidden; }
.reveal summary {
  cursor: pointer; padding: 9px 12px; font-weight: 800; font-size: 0.82rem; list-style: none; user-select: none;
}
.reveal summary::-webkit-details-marker { display: none; }
.reveal summary::before { content: "▸ "; color: var(--text-muted); }
.reveal[open] summary::before { content: "▾ "; }
.reveal-list { margin: 0; padding: 0 14px 12px 30px; display: flex; flex-direction: column; gap: 5px; }
.reveal-list li { font-size: 0.84rem; line-height: 1.45; color: #cdd6ea; }
.reveal-list code { font-family: var(--mono); font-size: 0.82em; color: var(--amber); }
.reveal-code {
  margin: 0; padding: 12px 14px; font-family: var(--mono); font-size: 12.5px; line-height: 1.55;
  color: #c8f7da; white-space: pre-wrap; word-break: break-word; border-top: 1px solid var(--border);
}

/* ---------------- Python editor ---------------- */
.code-block { display: flex; flex-direction: column; }
.code-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-weight: 800; font-size: 0.9rem; margin-bottom: 7px; }
.fn-hint { color: var(--text-muted); font-weight: 600; font-size: 0.74rem; }
.fn-hint code { font-family: var(--mono); color: var(--amber); }
.fn-sig {
  font-family: var(--mono); font-size: 13.5px; font-weight: 600;
  background: #0b0f1a; color: #e6edf6; padding: 9px 12px;
  border: 1px solid var(--border); border-bottom: none;
  border-radius: 12px 12px 0 0; user-select: none; display: flex; align-items: center;
}
.fn-sig[hidden] { display: none; }
.fn-sig .kw { color: var(--pink); margin-right: 8px; }
.fn-sig #fn-sig-name { color: var(--accent-2); }
.fn-sig #fn-sig-params { color: var(--amber); }
.fn-sig::after { content: "🔒 locked"; margin-left: auto; font-family: var(--sans); font-size: 0.66rem; color: var(--text-muted); font-weight: 700; }
.fn-editor { border: 1px solid var(--border); border-radius: 0 0 12px 12px; overflow: hidden; }
.fn-editor.full { border-radius: 12px; }
.fn-editor .CodeMirror { height: auto; min-height: 160px; font-family: var(--mono); font-size: 13.5px; line-height: 1.6; background: var(--surface); }
.fn-editor .CodeMirror-lines { padding: 8px 0; }

/* Primary actions, docked under the editor */
.code-actions { display: flex; align-items: center; gap: 10px; margin-top: 11px; flex-wrap: wrap; }
.code-actions-hint { font-size: 0.74rem; color: var(--text-muted); font-weight: 600; }
.code-actions-hint kbd {
  font-family: var(--mono); font-size: 0.72rem; background: var(--bg-2); color: var(--text);
  border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; padding: 1px 5px;
}
.code-actions-btns { display: flex; gap: 8px; margin-left: auto; }
.code-actions .btn { padding: 10px 20px; font-size: 0.92rem; }
.code-actions .btn span.label { display: inline; }

/* ---------------- Checkpoint result ---------------- */
.check-result { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-2); padding: 12px 14px; animation: fadeInUp 0.2s ease; }
.check-result.pass { border-color: rgba(0,237,100,0.5); background: rgba(0,237,100,0.06); }
.check-result.fail { border-color: rgba(251,113,133,0.5); background: rgba(251,113,133,0.06); }
.check-title { font-weight: 800; font-size: 0.92rem; margin-bottom: 8px; display: flex; align-items: center; gap: 7px; }
.check-item { display: flex; align-items: flex-start; gap: 8px; font-size: 0.82rem; line-height: 1.4; padding: 3px 0; font-weight: 600; }
.check-item .ic { flex-shrink: 0; font-weight: 800; }
.check-item.ok { color: #b9f6ca; }
.check-item.no { color: #fecdd3; }
.check-item .why { color: var(--text-muted); font-family: var(--mono); font-size: 0.74rem; }
.next-lesson-btn {
  margin-top: 11px; width: 100%; font-family: var(--sans); font-weight: 800; font-size: 0.86rem;
  cursor: pointer; border: 0; border-radius: 10px; padding: 9px 14px;
  background: linear-gradient(135deg, var(--accent), #00c853); color: #04210f;
  display: flex; align-items: center; justify-content: center; gap: 6px; animation: fadeInUp 0.25s ease;
}
.next-lesson-btn:hover { box-shadow: 0 10px 22px -8px rgba(0,237,100,0.8); transform: translateY(-1px); }

/* ---------------- Full-stack editor (Python / HTML / CSS / JS) ---------------- */
.editor { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.editor-legend {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; flex-wrap: wrap;
  font-size: 0.68rem; font-weight: 800; color: var(--text-muted);
  background: var(--bg-2); border-bottom: 1px solid var(--border);
}
.editor-legend .leg { padding: 2px 9px; border-radius: 100px; border: 1px solid var(--border); }
.editor-legend .leg-be { color: var(--accent); border-color: rgba(0,237,100,0.35); }
.editor-legend .leg-fe { color: var(--accent-2); border-color: rgba(76,201,240,0.35); }
.editor-legend .leg-link { color: var(--text-muted); font-family: var(--mono); letter-spacing: -0.02em; }

.code-tabs { display: flex; gap: 2px; padding: 6px 6px 0; background: var(--surface); flex-wrap: wrap; }
.code-tab {
  font-family: var(--sans); font-weight: 800; font-size: 0.8rem; color: var(--text-muted);
  background: transparent; border: none; border-bottom: 2.5px solid transparent;
  padding: 8px 12px 9px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.code-tab:hover { color: var(--text); }
.code-tab.active { color: var(--text); border-bottom-color: var(--accent-2); }
.code-tab[data-view="py"].active { border-bottom-color: var(--accent); }
.code-tab.editable.active { border-bottom-color: var(--accent); }
.code-tab[hidden] { display: none; }
.code-tab .lock { font-size: 0.66rem; opacity: 0.7; }
.code-tab .tedit { font-size: 0.58rem; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; color: #04210f; background: var(--accent); border-radius: 100px; padding: 1px 6px; }

.wiring {
  font-family: var(--mono); font-size: 0.74rem; color: var(--text-muted); line-height: 1.5;
  padding: 7px 12px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-2);
}
.wiring[hidden] { display: none; }
.wiring .w-id { color: var(--accent-2); }
.wiring .w-fn { color: var(--amber); }
.wiring .w-arrow { color: var(--text-muted); margin: 0 5px; }

.code-views { background: var(--surface); }
.code-view { display: none; padding: 10px; }
.code-view.active { display: block; }
.code-view .CodeMirror { height: auto; min-height: 180px; font-family: var(--mono); font-size: 13px; line-height: 1.55; background: var(--surface); }
.code-view[data-view="html"] .CodeMirror,
.code-view[data-view="css"] .CodeMirror,
.code-view[data-view="js"] .CodeMirror { border: 1px solid var(--border); border-radius: 10px; }
.code-view.readonly .CodeMirror { opacity: 0.82; }
.view-hint { font-size: 0.74rem; color: var(--text-muted); font-weight: 600; margin-top: 7px; }
.view-hint code { font-family: var(--mono); color: var(--amber); }
.view-hint.editable { color: var(--accent); }

/* ---------------- How it works ---------------- */
.howto { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-2); overflow: hidden; }
.howto > summary { cursor: pointer; list-style: none; padding: 11px 14px; font-weight: 800; font-size: 0.86rem; color: var(--text); user-select: none; }
.howto > summary::-webkit-details-marker { display: none; }
.howto > summary::before { content: "\25B8 "; color: var(--text-muted); }
.howto[open] > summary::before { content: "\25BE "; }
.howto-body { padding: 0 14px 13px; font-size: 0.85rem; line-height: 1.55; color: #cdd6ea; }
.howto-body p { margin: 4px 0 8px; }
.howto-body .howto-pipe { margin-top: 8px; padding-top: 9px; border-top: 1px dashed var(--border); color: #bfe9cf; }
.howto-body ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.howto-body li { display: flex; gap: 9px; align-items: baseline; }
.howto-body code { font-family: var(--mono); font-size: 0.85em; color: var(--amber); background: var(--surface); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; }
.howto-tag { flex-shrink: 0; font-size: 0.58rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 100px; border: 1px solid var(--border); }
.howto-tag.be { color: var(--accent); border-color: rgba(0,237,100,0.4); }
.howto-tag.fe { color: var(--accent-2); border-color: rgba(76,201,240,0.4); }

/* ---------------- AI buddy ---------------- */
.ai { border: 1px solid rgba(183,148,246,0.35); border-radius: var(--radius); background: linear-gradient(135deg, rgba(183,148,246,0.10), rgba(244,114,182,0.06)); padding: 14px; }
.ai.disabled { opacity: 0.6; }
.ai-head { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; }
.ai-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 1.05rem; background: linear-gradient(135deg, var(--purple), var(--pink)); flex-shrink: 0; box-shadow: 0 6px 14px -6px rgba(183,148,246,0.7); }
.ai-avatar.sm { width: 26px; height: 26px; font-size: 0.85rem; }
.ai-titles { display: flex; flex-direction: column; line-height: 1.15; }
.ai-titles strong { font-size: 0.98rem; font-weight: 800; }
.ai-titles small { color: var(--text-muted); font-weight: 600; font-size: 0.76rem; }
.ai-row { display: flex; gap: 8px; }
.ai-row input { flex: 1; min-width: 0; font-family: var(--sans); font-size: 0.88rem; font-weight: 600; background: var(--bg-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 13px; }
.ai-row input::placeholder { color: var(--text-muted); }
.ai-row input:focus { outline: none; border-color: var(--purple); }
.btn-ai { font-family: var(--sans); font-weight: 800; font-size: 0.86rem; cursor: pointer; border: none; border-radius: var(--radius-sm); padding: 10px 15px; white-space: nowrap; background: linear-gradient(135deg, var(--purple), var(--pink)); color: #1a0b2e; display: inline-flex; align-items: center; gap: 7px; box-shadow: 0 8px 18px -8px rgba(183,148,246,0.8); transition: transform 0.12s ease, box-shadow 0.15s ease; }
.btn-ai:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(183,148,246,0.95); }
.btn-ai:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.ai-spark { display: inline-block; }
.ai.thinking .ai-spark { animation: spark 0.8s ease-in-out infinite; }
@keyframes spark { 50% { transform: scale(1.35) rotate(15deg); opacity: 0.7; } }
.ai-actions { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.chip-btn { font-family: var(--sans); font-weight: 700; font-size: 0.78rem; cursor: pointer; background: var(--bg-2); color: var(--text); border: 1px solid var(--border); border-radius: 100px; padding: 6px 12px; transition: background 0.15s, border-color 0.15s; }
.chip-btn:hover { background: var(--surface-2); border-color: var(--purple); }
.chip-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ai-output { display: flex; gap: 9px; align-items: flex-start; margin-top: 12px; padding: 11px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; animation: fadeInUp 0.25s ease; }
.ai-output[hidden] { display: none; }
.ai-output p { font-size: 0.86rem; line-height: 1.5; font-weight: 600; color: #e9ddff; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ---------------- Output pane ---------------- */
.output-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--bg-2); }
.output-title { font-weight: 800; font-size: 0.9rem; display: flex; align-items: center; gap: 8px; }
.output-title svg { width: 16px; height: 16px; color: var(--accent-2); }
.status-chip { margin-left: auto; font-size: 0.72rem; font-weight: 800; padding: 4px 11px; border-radius: 100px; background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); display: inline-flex; align-items: center; gap: 6px; max-width: 60%; }
.status-chip span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-chip .pip { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; }
.status-chip.is-loading .pip { background: var(--amber); animation: blink 1s infinite; }
.status-chip.is-ready .pip { background: var(--accent); }
.status-chip.is-running .pip { background: var(--accent-2); animation: blink 0.6s infinite; }
.status-chip.is-error .pip { background: var(--danger); }
@keyframes blink { 50% { opacity: 0.25; } }

/* Request -> response indicator: lights up when the app calls your Python */
.api-indicator {
  display: flex; align-items: center; gap: 9px; padding: 8px 14px;
  background: var(--bg-2); border-bottom: 1px solid var(--border);
  font-family: var(--mono); font-size: 0.78rem; color: var(--text-muted);
}
.api-indicator .api-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); flex-shrink: 0; transition: background 0.15s ease; }
.api-indicator.is-call .api-dot { background: var(--accent-2); animation: blink 0.6s infinite; }
.api-indicator.is-result .api-dot { background: var(--accent); }
.api-indicator .api-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.api-indicator.is-call .api-text { color: var(--accent-2); }
.api-indicator.is-result .api-text { color: #c8f7da; }
.api-indicator .api-req { color: var(--accent-2); }
.api-indicator .api-res { color: var(--accent); }
.api-indicator .api-sep { color: var(--text-muted); margin: 0 6px; }

.preview-wrap { position: relative; flex: 1; min-height: 0; background: #fff; }
#preview { width: 100%; height: 100%; border: 0; background: #fff; display: block; }
.preview-loader { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--surface); color: var(--text); z-index: 4; }
.preview-loader.show { display: flex; }
.spinner { width: 42px; height: 42px; border-radius: 50%; border: 4px solid rgba(76,201,240,0.25); border-top-color: var(--accent-2); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.preview-loader p { font-weight: 700; font-size: 0.9rem; }
.preview-loader small { color: var(--text-muted); font-weight: 600; }
.preview-wrap[hidden] { display: none; }
.api-indicator[hidden] { display: none; }

/* ---------------- Pipeline proof view (aggregation lessons) ---------------- */
.pipeview { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 14px; background: var(--bg); }
.pipeview[hidden] { display: none; }
.pipe-io { display: flex; flex-direction: column; gap: 12px; }
.pipe-results { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pipe-card { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; display: flex; flex-direction: column; }
.pipe-card[hidden] { display: none; }
.pipe-card-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-weight: 800; font-size: 0.8rem; background: var(--bg-2); border-bottom: 1px solid var(--border); }
.pipe-count { color: var(--text-muted); font-weight: 700; font-size: 0.72rem; }
.pipe-truth { margin-left: auto; font-weight: 800; font-size: 0.7rem; color: var(--accent); }
.pipe-json { font-family: var(--mono); font-size: 12px; line-height: 1.5; padding: 10px 12px; white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto; color: #cdd6f4; }
.pipe-json.mongo { color: #c8f7da; }
.pipe-json.empty { color: var(--text-muted); font-style: italic; font-family: var(--sans); font-size: 0.84rem; }
.pipe-json .prow { display: block; padding: 2px 5px; border-radius: 5px; margin: 1px 0; }
.pipe-json .prow.ok { color: #b9f6ca; }
.pipe-json .prow.no { color: #fecdd3; background: rgba(251,113,133,0.12); box-shadow: inset 2px 0 0 var(--danger); }
.pipe-edit { width: 100%; min-height: 130px; resize: vertical; border: 0; padding: 10px 12px; background: #0b0f1a; color: #c8f7da; font-family: var(--mono); font-size: 12px; line-height: 1.5; outline: none; display: block; }
.pipe-edit:focus { box-shadow: inset 0 0 0 2px rgba(0,237,100,0.4); }
.pipe-card.stage .pipe-json { max-height: 170px; }
.pipe-card.out.py .pipe-card-head { color: var(--amber); }
.pipe-card.out.mongo .pipe-card-head { color: var(--accent); }
.pipe-run-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--border); }
.pipe-engine { font-family: var(--mono); font-size: 0.72rem; color: var(--text-muted); }
.btn-pipe { font-family: var(--sans); font-weight: 800; font-size: 0.82rem; cursor: pointer; border: none; border-radius: 9px; padding: 8px 14px; background: linear-gradient(135deg, var(--accent), #00c853); color: #04210f; }
.btn-pipe:hover { box-shadow: 0 10px 22px -8px rgba(0,237,100,0.7); }
.btn-pipe:disabled { opacity: 0.6; cursor: default; box-shadow: none; }

/* stage stepper — watch docs flow through the pipeline, stage by stage */
.pipe-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; border-top: 1px dashed var(--border); }
.pipe-flow[hidden] { display: none; }
.flow-lbl { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.02em; color: var(--text-muted); text-transform: uppercase; margin-right: 2px; }
.flow-pill { font-family: var(--mono); font-size: 0.74rem; font-weight: 700; cursor: pointer; color: var(--text); background: var(--bg-2); border: 1px solid var(--border); border-radius: 100px; padding: 3px 10px; transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease; }
.flow-pill:hover { border-color: rgba(0,237,100,0.5); color: var(--accent); }
.flow-pill.active { background: rgba(0,237,100,0.14); border-color: var(--accent); color: var(--accent); }
.flow-pill b { font-weight: 900; color: var(--accent-2); }
.flow-pill.active b { color: var(--accent); }
.flow-pill b:empty { display: none; }
.flow-arrow { color: var(--text-muted); font-size: 0.78rem; }

/* field-level diff — highlight exactly which key:value is wrong in a row */
.pipe-json .prow.no .kdiff { color: #fff; background: rgba(244,63,94,0.34); border-radius: 3px; padding: 0 2px; font-weight: 700; }
.pipe-json .prow.no .kdiff.kmiss { background: rgba(251,191,36,0.28); color: #ffe6a3; }

/* copy buttons (pipeline outputs + solution) */
.copy-btn { margin-left: auto; font-family: var(--sans); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer; color: var(--text-muted); background: var(--bg-2); border: 1px solid var(--border); border-radius: 100px; padding: 2px 9px; transition: color 0.12s ease, border-color 0.12s ease; }
.copy-btn:hover { color: var(--accent); border-color: rgba(0,237,100,0.5); }
.copy-btn.copied { color: #04210f; background: var(--accent); border-color: transparent; }
.copy-btn[hidden] { display: none; }
.pipe-card.out.mongo .pipe-card-head .copy-btn { margin-left: 6px; }
.reveal-code-wrap { position: relative; }
.solution-copy { position: absolute; top: 8px; right: 8px; margin: 0; z-index: 2; }

@media (max-width: 1020px) { .pipe-results { grid-template-columns: 1fr; } }

/* respect users who prefer fewer animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .confetti { display: none !important; }
}

/* ---------------- Console ---------------- */
.console { height: 150px; border-top: 1px solid var(--border); background: #0b0f1a; display: flex; flex-direction: column; }
.console-head { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-bottom: 1px solid var(--border); }
.console-head > span { font-size: 0.74rem; font-weight: 800; color: var(--text-muted); letter-spacing: 0.05em; text-transform: uppercase; }
.console-fix { margin-left: auto; font-family: var(--sans); font-size: 0.74rem; font-weight: 800; cursor: pointer; background: linear-gradient(135deg, var(--purple), var(--pink)); color: #1a0b2e; border: none; border-radius: 7px; padding: 4px 10px; }
.console-clear { font-size: 0.72rem; font-weight: 800; color: var(--text-muted); background: transparent; border: 1px solid var(--border); border-radius: 7px; padding: 3px 9px; cursor: pointer; }
.console-fix + .console-clear { margin-left: 8px; }
.console-clear:hover { color: var(--text); }
.console-body { flex: 1; overflow-y: auto; padding: 8px 12px; font-family: var(--mono); font-size: 12.5px; line-height: 1.5; }
.log { white-space: pre-wrap; word-break: break-word; padding: 1px 0; }
.log .tag { font-weight: 700; opacity: 0.7; margin-right: 6px; }
.log.log-py { color: #c8f7da; }
.log.log-log { color: #cdd6f4; }
.log.log-warn { color: var(--amber); }
.log.log-error { color: var(--danger); }
.log.log-info { color: var(--accent-2); }
.log.log-sys { color: var(--text-muted); font-style: italic; }

/* ---------------- Lessons drawer ---------------- */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(4,8,16,0.6); backdrop-filter: blur(2px); z-index: 60; }
.drawer-backdrop[hidden] { display: none; }
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: min(360px, 86vw); z-index: 61;
  background: var(--bg-2); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; box-shadow: 0 0 60px -10px rgba(0,0,0,0.8);
  animation: slideIn 0.2s ease;
}
.drawer[hidden] { display: none; }
@keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.drawer-head strong { font-size: 1rem; font-weight: 800; }
.drawer-close { background: transparent; border: none; color: var(--text-muted); font-size: 1.1rem; cursor: pointer; font-weight: 800; }
.drawer-close:hover { color: var(--text); }
.drawer-progress { padding: 10px 16px; border-bottom: 1px solid var(--border); }
.drawer-progress .bar { height: 8px; border-radius: 100px; background: var(--surface-2); overflow: hidden; }
.drawer-progress .bar > div { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 0.4s ease; }
.drawer-progress .lbl { font-size: 0.74rem; font-weight: 700; color: var(--text-muted); margin-top: 6px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.reset-progress { font-family: var(--sans); font-size: 0.72rem; font-weight: 800; color: var(--text-muted); background: transparent; border: 1px solid var(--border); border-radius: 7px; padding: 3px 9px; cursor: pointer; }
.reset-progress:hover { color: var(--danger); border-color: rgba(251,113,133,0.5); }
.drawer-body { flex: 1; overflow-y: auto; padding: 8px 10px 20px; }
.track-group { margin-top: 10px; }
.track-head { display: flex; align-items: center; gap: 8px; padding: 8px 8px 6px; font-weight: 800; font-size: 0.9rem; }
.track-head .t-emoji { font-size: 1.1rem; }
.track-head .t-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-head .t-prog { font-family: var(--mono); font-size: 0.7rem; font-weight: 800; color: var(--text-muted); }
.track-head .badge { margin-left: 0; }
.track-group.track-done .track-head .t-prog { color: var(--accent); }
.track-group.track-done .track-head .t-emoji { filter: drop-shadow(0 0 6px rgba(0,237,100,0.5)); }
.lesson-item {
  width: 100%; display: flex; align-items: center; gap: 9px; text-align: left;
  font-family: var(--sans); font-weight: 700; font-size: 0.84rem; color: var(--text);
  background: transparent; border: 1px solid transparent; border-radius: 9px; padding: 8px 10px; cursor: pointer;
}
.lesson-item:hover { background: var(--surface); }
.lesson-item.current { background: var(--surface-2); border-color: var(--accent-2); }
.lesson-item .li-emoji { font-size: 1rem; flex-shrink: 0; }
.lesson-item .li-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lesson-item .li-tick { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border); display: grid; place-items: center; font-size: 0.7rem; color: transparent; }
.lesson-item.done .li-tick { background: var(--accent); border-color: var(--accent); color: #04210f; }

/* ---------------- Toast + celebrate ---------------- */
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(20px); background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 11px 18px; font-weight: 700; font-size: 0.88rem; box-shadow: 0 18px 40px -18px rgba(0,0,0,0.8); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 70; max-width: min(90vw, 460px); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { border-color: rgba(251,113,133,0.5); }
.toast.win { border-color: rgba(0,237,100,0.6); background: linear-gradient(135deg, rgba(0,237,100,0.15), var(--surface-2)); }

.celebrate { position: fixed; inset: 0; pointer-events: none; z-index: 65; overflow: hidden; }
.confetti { position: absolute; top: -12px; width: 9px; height: 14px; opacity: 0.95; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(105vh) rotate(720deg); opacity: 0.9; } }

/* ---------------- Responsive ---------------- */
@media (max-width: 920px) {
  body { overflow: auto; }
  .workspace { grid-template-columns: 1fr; }
  .pane-left { max-height: none; }
  .pane-right { min-height: 70vh; }
}
@media (max-width: 560px) {
  .brand-sub { display: none; }
  .btn span.label { display: none; }
  .btn { padding: 9px 11px; }
}