/* ==========================================================================
   EvoluAI — passos da fase (Introdução · Aula · Código) e a IDE no estilo do VS Code (Dark Modern).
   A IDE NÃO segue o tema pixel do site: fontes do sistema, ícones codicon,
   cores e medidas do VS Code, para quem programa se sentir em casa.
   ========================================================================== */

/* ---------- passos da fase: 1 Introdução · 2 Aula (opcionais) · 3 Código, o desafio (tema pixel) ---------- */
/* A barra de passos é a navegação principal da fase: grande, logo abaixo do título. */

.pl-steps { display: flex; align-items: stretch; gap: 8px; max-width: 1440px; margin-bottom: 18px; }
.pl-step {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; gap: 14px;
  min-height: 72px; padding: 12px 16px;
  border: 2px solid var(--line-2); background: var(--surface); box-shadow: var(--shadow);
  text-align: left; color: var(--text-2);
  transition: border-color 0.15s, background 0.15s;
}
.pl-step.main { flex-grow: 1.3; border-color: var(--accent-dk); }
.pl-step:hover { border-color: var(--line-3); background: var(--surface-2); }
.pl-step.main:hover { border-color: var(--accent); }
.pl-step:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.55); }
.pl-step-no { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 2px solid var(--line-3); font: 400 16px/1 var(--pixel-ui); color: var(--muted); flex: none; }
.pl-step.main .pl-step-no { border-color: var(--accent); color: var(--accent); }
.pl-step-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pl-step-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pl-step-top b { font: 500 19px/1 var(--pixel); color: var(--text); }
.pl-step-top em { padding: 3px 6px; border: 1px solid var(--line-2); font: 400 10px/1 var(--pixel-ui); font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.pl-step.main .pl-step-top em { border-color: var(--accent-line); color: var(--accent); }
.pl-step small { font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.pl-step .stars { margin-left: auto; flex: none; }
.pl-step-arrow { align-self: center; font: 400 24px/1 var(--pixel-ui); color: var(--faint); flex: none; }
/* passo atual */
.pl-step[aria-selected='true'] { background: var(--accent); border-color: #000; box-shadow: 4px 4px 0 0 #000; }
.pl-step[aria-selected='true'] .pl-step-top b,
.pl-step[aria-selected='true'] small,
.pl-step[aria-selected='true'] .pl-step-no,
.pl-step[aria-selected='true'] .pl-step-top em { color: var(--accent-ink); border-color: var(--accent-ink); }
@media (max-width: 760px) {
  .pl-steps { gap: 6px; }
  .pl-step { flex-direction: column; justify-content: center; gap: 6px; min-height: 64px; padding: 8px 6px; text-align: center; }
  .pl-step-text { align-items: center; }
  .pl-step-no { width: 24px; height: 24px; font-size: 12px; }
  .pl-step-top b { font-size: 14px; }
  .pl-step small, .pl-step-top em, .pl-step .stars, .pl-step-arrow { display: none; }
}

.pl-stage-mode[hidden] { display: none !important; }
/* na introdução o placar de pontos das fases some: ela é exploração, não prova */
.pl.has-lab .pl-stage-mode[data-modo='intro'] .sg-score { display: none; }

/* ---------- tokens do VS Code ---------- */

.ide {
  --vs-editor: #1f1f1f;
  --vs-side: #181818;
  --vs-border: #2b2b2b;
  --vs-fg: #cccccc;
  --vs-fg-strong: #ffffff;
  --vs-muted: #9d9d9d;
  --vs-dim: #868686;
  --vs-blue: #0078d4;
  --vs-blue-hover: #026ec1;
  --vs-link: #4daafc;
  --vs-hover: #2a2d2e;
  --vs-select: #37373d;
  --vs-select-focus: #04395e;
  --vs-input: #313131;
  --vs-button2: #313131;
  --vs-button2-hover: #3c3c3c;
  --vs-error: #f85149;
  --vs-warn: #cca700;
  --vs-pass: #73c991;
  --vs-info: #3794ff;
  --vs-ui: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, Ubuntu, 'Droid Sans', sans-serif;
  --vs-mono: Menlo, Monaco, Consolas, 'Courier New', monospace;

  display: grid;
  grid-template-columns: 48px 220px minmax(0, 1fr) 300px;
  grid-template-rows: minmax(0, 1fr) 22px;
  grid-template-areas: 'act side main mission' 'status status status status';
  height: calc(100vh - 150px);
  height: calc(100dvh - 150px);
  min-height: 600px;
  background: var(--vs-editor);
  color: var(--vs-fg);
  font: 400 13px/1.4 var(--vs-ui);
  -webkit-font-smoothing: antialiased;
  border: 1px solid var(--vs-border);
  border-radius: 8px !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  letter-spacing: normal;
}
.ide *, .ide *::before, .ide *::after { letter-spacing: normal; }
.ide button { font: inherit; color: inherit; }
.ide ::selection { background: #264f78; color: inherit; }
.ide :focus-visible { outline: 1px solid var(--vs-blue); outline-offset: -1px; }
.ide .codicon { font-size: 16px; line-height: 1; }
.ide.no-side { grid-template-columns: 48px 0 minmax(0, 1fr) 300px; }
.ide.no-mission { grid-template-columns: 48px 220px minmax(0, 1fr) 0; }
.ide.no-side.no-mission { grid-template-columns: 48px 0 minmax(0, 1fr) 0; }
.ide.no-side .ide-side, .ide.no-mission .ide-mission { display: none; }

.ide ::-webkit-scrollbar { width: 10px; height: 10px; }
.ide ::-webkit-scrollbar-thumb { background: rgba(121, 121, 121, 0.4); }
.ide ::-webkit-scrollbar-thumb:hover { background: rgba(100, 100, 100, 0.7); }
.ide ::-webkit-scrollbar-track { background: transparent; }

/* ---------- barra de atividades ---------- */

.ide-act { grid-area: act; display: flex; flex-direction: column; align-items: center; background: var(--vs-side); border-right: 1px solid var(--vs-border); padding-top: 4px; }
.ide-act button { position: relative; display: grid; place-items: center; width: 48px; height: 48px; color: var(--vs-dim); }
.ide-act button .codicon { font-size: 24px; }
.ide-act button:hover, .ide-act button.active { color: #d7d7d7; }
.ide-act button.active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--vs-blue); }
.ide-act-gap { flex: 1; }

/* ---------- títulos de painéis laterais ---------- */

.ide-pane-title {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 35px; padding: 0 8px 0 20px; flex: none;
  font-size: 11px; text-transform: uppercase; color: var(--vs-fg);
}
.ide-pane-more { color: var(--vs-fg); opacity: 0.8; }
.ide-pane-tag { font-size: 11px; text-transform: none; padding: 2px 8px; border-radius: 11px !important; background: var(--vs-blue); color: #fff; }

/* ---------- explorador ---------- */

.ide-side { grid-area: side; display: flex; flex-direction: column; min-width: 0; background: var(--vs-side); border-right: 1px solid var(--vs-border); }
.ide-tree { flex: 1; overflow: auto; padding-bottom: 8px; }
.ide-section { display: flex; align-items: center; gap: 2px; height: 22px; padding-left: 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--vs-fg); }
.ide-section b { font-weight: 700; }
.ide-folder, .ide-file {
  display: flex; align-items: center; gap: 6px;
  width: 100%; height: 22px; padding: 0 8px 0 20px;
  font-size: 13px; color: var(--vs-fg); text-align: left; white-space: nowrap;
}
.ide-folder { padding-left: 10px; gap: 4px; }
.ide-file.sub { padding-left: 36px; }
.ide-file:hover { background: var(--vs-hover); }
.ide-file.active { background: var(--vs-select); }
.ide-file:focus-visible { background: var(--vs-select-focus); outline: 1px solid var(--vs-blue); }
.ide-fi { font-size: 16px; flex: none; }
.fi-nb { color: #e37933; }
.fi-md { color: #519aba; }
.fi-csv { color: #8dc149; }
.fi-dir { color: #c09553; }
.ide-outline { border-top: 1px solid var(--vs-border); padding: 4px 0 10px; display: flex; flex-direction: column; gap: 4px; }
.ide-outline .ide-link { padding-left: 20px; }
.ide-kernel { display: flex; align-items: center; gap: 8px; padding: 2px 20px; font-size: 12px; color: var(--vs-muted); }
.ide-link { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 12.5px; color: var(--vs-link); text-align: left; }
.ide-link:hover { text-decoration: underline; }

.kdot { display: inline-block; width: 8px; height: 8px; border-radius: 50% !important; background: var(--vs-dim); flex: none; }
.loading .kdot, .busy .kdot { background: var(--vs-warn); }
.idle .kdot { background: var(--vs-pass); }
.error .kdot, .off .kdot { background: var(--vs-error); }

/* ---------- área do editor ---------- */

.ide-main { grid-area: main; display: flex; flex-direction: column; min-width: 0; min-height: 0; container-type: inline-size; container-name: idemain; }
.ide-tabs { display: flex; height: 35px; background: var(--vs-side); border-bottom: 1px solid var(--vs-border); overflow-x: auto; flex: none; scrollbar-width: none; }
.ide-tab { display: flex; align-items: center; min-width: 0; border-right: 1px solid var(--vs-border); color: var(--vs-muted); flex: none; background: var(--vs-side); }
.ide-tab:hover { background: #1f1f1f; }
.ide-tab.active { background: var(--vs-editor); color: var(--vs-fg-strong); box-shadow: inset 0 1px 0 var(--vs-blue); margin-bottom: -1px; }
.ide-tab-open { display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 4px 0 10px; font-size: 13px; }
.ide-tab-close, .ide-tab-pad { display: grid; place-items: center; width: 28px; height: 28px; margin-right: 4px; color: inherit; opacity: 0.8; border-radius: 5px !important; }
.ide-tab-close:hover { background: rgba(255, 255, 255, 0.1); opacity: 1; }

.ide-crumbs { display: flex; align-items: center; gap: 2px; height: 22px; padding: 0 16px; flex: none; font-size: 13px; color: #a9a9a9; background: var(--vs-editor); white-space: nowrap; overflow: hidden; }
.ide-crumbs .ide-fi { margin-right: 4px; font-size: 14px; }
.ide-crumb-sep { font-size: 14px !important; opacity: 0.7; }

.ide-toolbar { display: flex; align-items: center; gap: 2px; min-height: 34px; padding: 3px 16px; flex: none; background: var(--vs-editor); border-bottom: 1px solid var(--vs-border); flex-wrap: wrap; }
.ide-toolbar[hidden] { display: none; }
.ide-tool { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 7px; font-size: 13px; color: var(--vs-fg); border-radius: 5px !important; }
.ide-tool:hover { background: rgba(90, 93, 94, 0.31); }
.ide-tool-sep { width: 1px; height: 16px; margin: 0 6px; background: #454545; }
.ide-kpick { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; font-size: 13px; color: var(--vs-fg); border-radius: 5px !important; margin-right: 6px; }
.ide-kpick.busy .codicon { color: var(--vs-fg); }
.ide-kpick.error .codicon, .ide-kpick.off .codicon { color: var(--vs-error); }
.ide-primary, .ide-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 26px; padding: 0 12px;
  font-size: 13px; line-height: 1;
  border-radius: 2px !important; border: 1px solid transparent;
}
.ide-primary { background: var(--vs-blue); color: #fff !important; border-color: rgba(255, 255, 255, 0.07); }
.ide-primary:hover { background: var(--vs-blue-hover); }
.ide-secondary { background: var(--vs-button2); color: var(--vs-fg) !important; border-color: rgba(255, 255, 255, 0.07); }
.ide-secondary:hover { background: var(--vs-button2-hover); }

.ide-editor { flex: 1; min-height: 0; overflow: auto; position: relative; background: var(--vs-editor); }
.ide-view[hidden] { display: none; }
.ide-boot { display: flex; align-items: center; gap: 8px; padding: 24px; color: var(--vs-muted); }

/* ---------- notebook ---------- */

.nb { max-width: 1000px; margin: 0 auto; padding: 14px 24px 80px 8px; display: flex; flex-direction: column; gap: 6px; }
.nb-cell.md { padding: 6px 12px 2px 56px; }
.nb-md { color: var(--vs-fg); font-size: 14px; line-height: 1.6; }
.nb-md h1 { font-size: 26px; font-weight: 600; line-height: 1.25; color: var(--vs-fg-strong); margin: 4px 0 10px; padding-bottom: 6px; border-bottom: 1px solid #3c3c3c; }
.nb-md h2 { font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--vs-fg-strong); margin: 12px 0 6px; }
.nb-md p + p, .nb-md p + blockquote, .nb-md blockquote + p { margin-top: 8px; }
.ide .md code, .nb-md code { font: 400 12.5px/1 var(--vs-mono); padding: 1px 4px; border-radius: 3px !important; background: rgba(255, 255, 255, 0.08); color: #d7ba7d; }
.nb-md strong, .ide .md strong { color: var(--vs-fg-strong); font-weight: 600; }
.nb-md blockquote, .ide .md blockquote { margin: 10px 0 0; padding: 4px 12px; border-left: 4px solid rgba(0, 122, 204, 0.5); background: rgba(127, 127, 127, 0.1); color: var(--vs-fg); }

.nb-cell.code { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 6px; }
.nb-gutter { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 6px; }
.nb-run { display: grid; place-items: center; width: 26px; height: 26px; color: var(--vs-fg); border-radius: 50% !important; opacity: 0.85; }
.nb-run:hover { background: rgba(90, 93, 94, 0.31); opacity: 1; color: var(--vs-pass); }
.nb-count { font: 400 11px/1 var(--vs-mono); color: var(--vs-dim); }
.nb-body { position: relative; min-width: 0; background: var(--vs-side); border: 1px solid var(--vs-border); border-radius: 4px !important; }
.nb-cell.focus .nb-body { border-color: #3c3c3c; box-shadow: -3px 0 0 var(--vs-blue); }
.nb-cell.err .nb-count { color: var(--vs-error); }
.nb-editor { min-height: 36px; border-radius: 4px 4px 0 0 !important; overflow: hidden; }
.nb-ta { display: block; width: 100%; min-height: 36px; padding: 8px 12px; border: 0; outline: 0; resize: none; background: transparent; color: var(--vs-fg); font: 400 13px/19px var(--vs-mono); tab-size: 4; }
.ide .nb-blank { background: rgba(204, 167, 0, 0.16); border-bottom: 2px dotted var(--vs-warn); }
.ide .nb-err-line { background: rgba(248, 81, 73, 0.12); }
.ide .nb-err-gutter { border-left: 3px solid var(--vs-error); margin-left: 3px; }

.nb-status { display: flex; align-items: center; gap: 4px; height: 22px; padding: 0 10px; font-size: 12px; color: var(--vs-muted); border-top: 1px solid var(--vs-border); }
.nb-status[hidden] { display: none; }
.nb-status .codicon { font-size: 14px; }
.nb-status.ok .codicon { color: var(--vs-pass); }
.nb-status.err .codicon { color: var(--vs-error); }
.nb-status.blank .codicon { color: var(--vs-warn); }

.nb-out { padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 8px; max-height: 520px; overflow: auto; background: var(--vs-editor); border-top: 1px solid var(--vs-border); border-radius: 0 0 4px 4px !important; }
.nb-out[hidden] { display: none; }
.nb-stream, .nb-repr { margin: 0; font: 400 12.5px/1.5 var(--vs-mono); color: var(--vs-fg); white-space: pre-wrap; word-break: break-word; }
.nb-stderr { color: var(--vs-warn); }
.nb-note { margin: 0; font: italic 400 12.5px/1.5 var(--vs-ui); color: var(--vs-muted); }
.nb-html { overflow-x: auto; }
.nb-html table.df { border-collapse: collapse; font: 400 12px/1.4 var(--vs-ui); color: var(--vs-fg); }
.nb-html table.df th, .nb-html table.df td { padding: 4px 12px; text-align: right; white-space: nowrap; border: 0; }
.nb-html table.df thead th { font-weight: 600; border-bottom: 1px solid #555; }
.nb-html table.df tbody tr:nth-child(odd) { background: rgba(255, 255, 255, 0.04); }
.nb-html table.df tbody th { font-weight: 600; }
.nb-chart { margin: 0; }
.nb-chart figcaption { font-size: 12px; font-weight: 600; color: var(--vs-fg); margin-bottom: 6px; text-align: center; max-width: 560px; }
.nb-chart canvas { display: block; width: 100%; max-width: 560px; height: 200px; }
.nb-error { display: flex; flex-direction: column; gap: 8px; }
.nb-error-msg { margin: 0; font: 400 12.5px/1.5 var(--vs-mono); color: var(--vs-fg); white-space: pre-wrap; }
.nb-error-msg b { color: var(--vs-error); font-weight: 400; }
.nb-error-msg span { color: var(--vs-muted); }
.nb-error-hint { display: flex; gap: 8px; padding: 8px 10px; font-size: 13px; line-height: 1.55; color: var(--vs-fg); background: #252526; border: 1px solid #454545; border-radius: 4px !important; }
.nb-error-hint .codicon { color: #ffcc00; margin-top: 2px; flex: none; }

/* ---------- documento e CSV ---------- */

.ide-doc { max-width: 780px; margin: 0 auto; padding: 22px 32px 60px; color: var(--vs-fg); font-size: 14px; line-height: 1.6; }
.ide .md h1 { font-size: 26px; font-weight: 600; color: var(--vs-fg-strong); padding-bottom: 6px; margin-bottom: 14px; border-bottom: 1px solid #3c3c3c; }
.ide .md h2 { font-size: 19px; font-weight: 600; color: var(--vs-fg-strong); margin: 22px 0 8px; padding-bottom: 4px; border-bottom: 1px solid #3c3c3c; }
.ide .md ul, .ide .md ol { padding-left: 22px; display: flex; flex-direction: column; gap: 3px; }
.ide .md ul { list-style: disc; }
.ide .md ol { list-style: decimal; }
.ide .md p + p { margin-top: 8px; }
.ide .md-code { margin: 8px 0; padding: 10px 12px; background: var(--vs-side); border: 1px solid var(--vs-border); border-radius: 4px !important; font: 400 12.5px/1.5 var(--vs-mono); color: var(--vs-fg); overflow-x: auto; }
.ide .md-code code { background: none; padding: 0; color: inherit; }

.ide-csv { display: flex; flex-direction: column; height: 100%; }
.ide-csv-note { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--vs-border); font-size: 12.5px; color: var(--vs-muted); }
.ide-csv-note .codicon { color: var(--vs-info); }
.ide-csv-note b { color: var(--vs-fg); }
.ide-csv-note code { font: 400 12px/1 var(--vs-mono); color: #d7ba7d; }
.ide-csv-wrap { flex: 1; overflow: auto; }
.ide-table { border-collapse: collapse; font: 400 12.5px/1.4 var(--vs-mono); color: var(--vs-fg); }
.ide-table th, .ide-table td { padding: 3px 12px; border-right: 1px solid var(--vs-border); border-bottom: 1px solid var(--vs-border); white-space: nowrap; text-align: right; }
.ide-table thead th { position: sticky; top: 0; background: #252526; color: var(--vs-fg-strong); font-weight: 600; font-family: var(--vs-ui); }
.ide-table td:first-child { color: var(--vs-dim); background: var(--vs-side); }
.ide-table td.label.v1 { color: var(--vs-pass); }
.ide-table td.label.v0 { color: var(--vs-error); }
.ide-table tbody tr:hover td { background: var(--vs-hover); }

/* ---------- painel inferior ---------- */

.ide-panel { flex: none; height: 230px; display: flex; flex-direction: column; border-top: 1px solid var(--vs-border); background: var(--vs-side); }
.ide.no-panel .ide-panel { height: 35px; }
.ide.no-panel .ide-panel-body { display: none; }
.ide-panel-tabs { display: flex; align-items: center; height: 35px; padding: 0 8px 0 12px; gap: 6px; flex: none; }
.ide-panel-tabs [data-ptab] {
  display: inline-flex; align-items: center; gap: 6px;
  height: 100%; padding: 0 6px;
  font-size: 11px; text-transform: uppercase; color: var(--vs-dim);
  border-bottom: 1px solid transparent;
}
.ide-panel-tabs [data-ptab]:hover { color: var(--vs-fg); }
.ide-panel-tabs [data-ptab][aria-selected='true'] { color: #e7e7e7; border-bottom-color: var(--vs-blue); }
.ide-panel-icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 5px !important; color: var(--vs-fg); }
.ide-panel-icon:hover { background: rgba(90, 93, 94, 0.31); }
.ide-badge { font-size: 11px; font-weight: 400; min-width: 18px; padding: 2px 6px; border-radius: 11px !important; background: #616161; color: #fff; text-align: center; text-transform: none; }
.ide-badge.good { background: #2ea043; }
.ide-badge.bad { background: #c72e0f; }
.ide-panel-body { flex: 1; min-height: 0; overflow: auto; }
.ide-panel-body > [hidden] { display: none; }

.ide-log { padding: 4px 20px; font: 400 12px/1.6 var(--vs-mono); color: var(--vs-fg); }
.ide-log-line { display: flex; gap: 10px; }
.ide-log-time { color: var(--vs-dim); flex: none; }
.ide-log-line.good { color: var(--vs-pass); }
.ide-log-line.bad { color: var(--vs-error); }
.ide-log-line.muted { color: var(--vs-muted); }
.ide-empty { display: flex; align-items: center; gap: 8px; padding: 12px 20px; color: var(--vs-muted); font-size: 13px; }
.ide-empty b { color: var(--vs-fg); font-weight: 600; }
.ide-empty.bad { color: var(--vs-error); }

.ide-tests { padding: 6px 12px; }
.ide-tests-sum { display: flex; align-items: center; gap: 8px; padding: 4px 8px 8px; font-size: 13px; }
.ide-tests-sum.good .codicon { color: var(--vs-pass); }
.ide-tests-sum.bad .codicon { color: var(--vs-error); }
.ide-test-list { display: flex; flex-direction: column; }
.ide-test-list li { display: flex; gap: 8px; align-items: flex-start; padding: 4px 8px; }
.ide-test-list li:hover { background: var(--vs-hover); }
.ide-test-list li .codicon { margin-top: 2px; flex: none; }
.ide-test-list li.ok .codicon { color: var(--vs-pass); }
.ide-test-list li.no .codicon { color: var(--vs-error); }
.ide-test-list b { font-weight: 400; color: var(--vs-fg); }
.ide-test-list small { display: block; font-size: 12px; color: var(--vs-muted); }
.ide-test-list li.no small { color: #f48771; }

.ide-beltpane { height: 100%; }
.ide-belt-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 210px; height: 100%; }
.ide-belt-stage { position: relative; min-height: 0; border-right: 1px solid var(--vs-border); background: #0c0b10; }
.ide-belt-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ide-belt-side { padding: 12px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ide-belt-label { font-size: 11px; text-transform: uppercase; color: var(--vs-dim); }
.ide-belt-count { font-size: 13px; color: var(--vs-muted); }
.ide-belt-count b { font-size: 24px; font-weight: 600; color: var(--vs-fg-strong); }
.ide-belt-acc { font-size: 13px; color: var(--vs-muted); }
.ide-belt-acc b { color: var(--vs-pass); font-weight: 600; }

/* ---------- missão (walkthrough do VS Code) ---------- */

.ide-mission { grid-area: mission; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--vs-side); border-left: 1px solid var(--vs-border); }
.ide-mission-body { flex: 1; overflow: auto; padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.ide-wt-title { font-size: 17px; font-weight: 600; color: var(--vs-fg-strong); margin-top: 6px; }
.ide-wt-sub { font-size: 13px; line-height: 1.5; color: var(--vs-muted); }
.ide-wt-sub b { color: var(--vs-fg); font-weight: 600; }
.ide-wt-progress { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--vs-muted); }
.ide-meter { position: relative; flex: 1; height: 4px; border-radius: 2px !important; background: #3c3c3c; overflow: hidden; }
.ide-meter i { position: absolute; inset: 0 auto 0 0; background: var(--vs-blue); border-radius: 2px !important; transition: width 0.3s; }
.ide-wt-goal { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--vs-muted); }
.ide-wt-goal .codicon { color: var(--vs-warn); }
.ide-steps { display: flex; flex-direction: column; gap: 2px; }
.ide-step { border-radius: 6px !important; }
.ide-step.open { background: #252526; border: 1px solid #3c3c3c; }
.ide-step-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; text-align: left; border-radius: 6px !important; }
.ide-step:not(.open) .ide-step-head:hover { background: var(--vs-hover); }
.ide-step-ico { font-size: 18px !important; color: var(--vs-dim); flex: none; }
.ide-step.done .ide-step-ico { color: var(--vs-pass); }
.ide-step.fail .ide-step-ico { color: var(--vs-error); }
.ide-step.warn .ide-step-ico { color: var(--vs-warn); }
.ide-step.open:not(.done):not(.fail):not(.warn) .ide-step-ico { color: var(--vs-blue); }
.ide-step-title { font-size: 13px; color: var(--vs-fg); }
.ide-step.open .ide-step-title { font-weight: 600; color: var(--vs-fg-strong); }
.ide-step-note { font-size: 12px; line-height: 1.45; color: var(--vs-muted); font-family: var(--vs-mono); }
.ide-step-note.short { padding: 0 10px 6px 38px; }
.ide-step.fail .ide-step-note { color: #f48771; }
.ide-step.warn .ide-step-note { color: var(--vs-warn); }
.ide-step-body { padding: 0 12px 12px 38px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--vs-fg); }
.ide-hint { font-size: 12.5px; }
.ide-hint .md-code { margin: 6px 0 0; white-space: pre-wrap; word-break: break-word; }
.ide-concept { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-top: 4px; border-radius: 6px !important; border: 1px solid #3c3c3c; background: #252526; text-align: left; }
.ide-concept:hover { border-color: var(--vs-blue); }
.ide-concept > .codicon:first-child { color: #ffcc00; font-size: 18px; }
.ide-concept > .codicon:last-child { margin-left: auto; color: var(--vs-muted); }
.ide-concept b { display: block; font-size: 13px; font-weight: 600; color: var(--vs-fg-strong); }
.ide-concept small { display: block; margin-top: 2px; font-size: 12px; color: var(--vs-muted); }

/* ---------- barra de status ---------- */

.ide-status {
  grid-area: status;
  display: flex; align-items: center;
  background: var(--vs-side); color: var(--vs-fg);
  border-top: 1px solid var(--vs-border);
  font-size: 12px; white-space: nowrap; overflow: hidden;
}
.ide-st-remote { display: inline-flex; align-items: center; gap: 4px; height: 100%; padding: 0 10px; background: var(--vs-blue); color: #fff; }
.ide-st-remote .codicon { font-size: 14px; }
.ide-st-item { display: inline-flex; align-items: center; gap: 3px; height: 100%; padding: 0 7px; color: var(--vs-fg); }
.ide-st-item .codicon { font-size: 14px; }
button.ide-st-item:hover { background: rgba(255, 255, 255, 0.12); }
.ide-st-kernel .kdot { width: 7px; height: 7px; margin-right: 3px; }

/* ---------- responsivo ---------- */

/* a barra do notebook recolhe os rótulos quando falta espaço, como no VS Code */
@container idemain (max-width: 760px) {
  .ide-tool[data-act='restart'] span, .ide-tool[data-act='clear'] span { display: none; }
}
@container idemain (max-width: 640px) {
  .ide-kpick span { display: none; }
}
@container idemain (max-width: 470px) {
  .ide-tool span { display: none; }
  .ide-tool-sep { display: none; }
}

@media (max-width: 1180px) {
  .ide { grid-template-columns: 48px 220px minmax(0, 1fr) 0; }
  .ide .ide-mission { display: none; }
  .ide:not(.no-mission) { grid-template-columns: 48px 0 minmax(0, 1fr) 300px; }
  .ide:not(.no-mission) .ide-mission { display: flex; }
  .ide:not(.no-mission) .ide-side { display: none; }
}
@media (max-width: 760px) {
  .ide, .ide.no-side, .ide.no-mission, .ide:not(.no-mission) {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr) 22px;
    grid-template-areas: 'act' 'mission' 'main' 'status';
    height: auto; min-height: 0;
  }
  .ide-act { flex-direction: row; padding: 0 4px; border-right: 0; border-bottom: 1px solid var(--vs-border); }
  .ide-act button { height: 40px; }
  .ide-act button.active::before { left: 8px; right: 8px; top: auto; bottom: 0; width: auto; height: 2px; }
  .ide .ide-side { display: none !important; }
  .ide-mission { border-left: 0; border-bottom: 1px solid var(--vs-border); max-height: 340px; }
  .ide.no-mission .ide-mission { display: none; }
  .ide-main { min-height: 70vh; }
  .ide-editor { min-height: 60vh; }
  .nb { padding: 10px 8px 60px 0; }
  .nb-cell.code { grid-template-columns: 34px minmax(0, 1fr); gap: 4px; }
  .nb-cell.md { padding-left: 40px; }
  .ide-belt-wrap { grid-template-columns: 1fr; grid-template-rows: 180px auto; }
  .ide-panel { height: 300px; }
  .ide-tool span, .ide-kpick span { display: none; }
  .hide-narrow { display: none !important; }
}

/* avaliação por casos de teste ocultos (laboratórios sem esteira) */
.ide-belt-stage.cases { overflow: auto; padding: 6px 0; background: transparent; }

/* ajuda "Complete pra mim": botão por célula (aparece ao passar o mouse ou com a célula em foco) */
.nb-help { position: absolute; top: 5px; right: 6px; z-index: 3; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; font-size: 12px; color: #cccccc; background: #2d2d2d; border: 1px solid #3c3c3c; border-radius: 4px !important; opacity: 0; transition: opacity 0.15s; }
.nb-cell:hover .nb-help, .nb-cell.focus .nb-help, .nb-help:focus-visible { opacity: 1; }
@media (hover: none) { .nb-help { opacity: 1; } }
.nb-help:hover { background: #37373d; color: #ffffff; border-color: #c586c0; }
.nb-help .codicon, .ide-help .codicon { color: #c586c0; }
.nb-cell.helped .nb-body { box-shadow: -3px 0 0 #c586c0; }
.nb-cell.helped .nb-gutter::after { content: '✨'; display: block; margin-top: 4px; font-size: 12px; text-align: center; }
.ide-wt-helped { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 4px; padding: 8px 10px; border: 1px solid rgba(197, 134, 192, 0.45); border-radius: 4px !important; background: rgba(197, 134, 192, 0.08); font-size: 12.5px; line-height: 1.45; color: var(--vs-fg); }
.ide-wt-helped .codicon { color: #c586c0; margin-top: 2px; }
.ide-wt-helped b { color: var(--vs-fg-strong); font-weight: 600; }