* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background: #1a1a1a; color: #d4d4d4; overflow: hidden; height: 100vh; }

header {
  display: flex; justify-content: flex-start; align-items: center; gap: 8px;
  padding: 8px 16px; background: #141414; border-bottom: 1px solid #2a2a2a;
}
header h1 { font-size: 16px; font-weight: 600; letter-spacing: 1px; color: #4ecdc4; white-space: nowrap; }
header h1 .ver { color: #666; font-size: 13px; margin-left: 6px; }
.actions { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
/* grupos de botões por função (Geometria | Malha | CFD | Vista | Projeto) com
   separador sutil entre eles → toolbar limpa em vez de fileira solta de botões */
.tool-group { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; }
.tool-group:first-child { padding-left: 0; }
.tool-group + .tool-group { border-left: 1px solid #333; }
.tool-group .opt {
  font-size: 12px; color: #aaa; display: inline-flex; align-items: center;
  gap: 3px; cursor: pointer; white-space: nowrap;
}
.tool-group select {
  background: #262626; color: #ddd; border: 1px solid #3a3a3a;
  border-radius: 6px; padding: 5px 6px; font-size: 12px; cursor: pointer;
}
.btn.icon { padding: 6px 9px; }   /* botões só-ícone (↩ ⟲ 🗑) mais compactos */

/* Indicador de projeto ativo */
.project-indicator {
  display: flex; align-items: center; gap: 6px;
  background: #1a2a1a; border: 1px solid #2a4a2a; border-radius: 4px;
  padding: 3px 8px 3px 10px; cursor: pointer; white-space: nowrap;
  transition: border-color 0.15s;
}
.project-indicator:hover { border-color: #4ecdc4; }
.proj-icon { font-size: 13px; }
.proj-name { font-size: 12px; color: #8fcf8f; max-width: 160px;
             overflow: hidden; text-overflow: ellipsis; }
.proj-switch-btn {
  background: none; border: none; color: #6a9a6a; font-size: 13px;
  cursor: pointer; padding: 0; line-height: 1;
}
.proj-switch-btn:hover { color: #4ecdc4; }

/* Painel flutuante de projetos — ANCORADO no botão (left/top vêm do JS) */
.projects-panel {
  position: fixed; top: 48px; left: 16px;
  width: 320px; max-width: 96vw; background: #1a1a1a;
  border: 1px solid #2a4a52; border-radius: 6px; z-index: 900;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  display: flex; flex-direction: column;
}
.projects-panel.hidden { display: none; }
.projects-panel-top { padding: 8px 10px; border-bottom: 1px solid #2a2a2a;
  display: flex; flex-direction: column; gap: 6px; }
/* Novo projeto: DESTACADO com cor diferente p/ o cliente perceber */
.btn-new-project {
  width: 100%; background: #4ecdc4; color: #10201c; font-weight: 700;
  border: none; border-radius: 5px; padding: 9px; font-size: 13px; cursor: pointer;
}
.btn-new-project:hover { background: #6fe0d8; }
.btn-import-project {
  width: 100%; background: #1b1b1f; color: #d4d4d4; font-weight: 600;
  border: 1px solid #2a2a2a; border-radius: 5px; padding: 8px; font-size: 13px;
  cursor: pointer; margin-top: 6px;
}
.btn-import-project:hover { border-color: #4ecdc4; color: #fff; }
.projects-search {
  width: 100%; background: #141414; border: 1px solid #2a2a2a; border-radius: 5px;
  color: #d4d4d4; padding: 6px 9px; font-size: 13px;
}
.projects-search:focus { outline: none; border-color: #4ecdc4; }
.projects-panel-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid #2a2a2a;
  font-size: 13px; font-weight: 600; color: #4ecdc4;
}
.proj-close-btn { background: none; border: none; color: #888; font-size: 16px; cursor: pointer; }
.proj-close-btn:hover { color: #ccc; }
.projects-list { padding: 8px 0; max-height: 340px; overflow-y: auto; }
.projects-loading { padding: 16px; text-align: center; color: #666; font-size: 13px; }
.project-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; cursor: pointer; transition: background 0.1s;
}
.project-row:hover { background: #1c2c2c; }
.project-row.active-proj { background: #1a2a1a; border-left: 3px solid #4ecdc4; }
.proj-row-icon { font-size: 18px; flex-shrink: 0; }
.proj-row-info { flex: 1; min-width: 0; }
.proj-row-name { font-size: 13px; color: #d4d4d4; font-weight: 600;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-row-meta { font-size: 11px; color: #666; margin-top: 1px; }
.proj-row-load { background: #1c3035; color: #4ecdc4; border: 1px solid #2a4a52;
                 padding: 3px 10px; border-radius: 3px; font-size: 12px; cursor: pointer;
                 flex-shrink: 0; }
.proj-row-load:hover { background: #253a3a; }
.projects-panel-foot { padding: 10px 14px; border-top: 1px solid #2a2a2a; }

.btn {
  background: #2a2a2a; color: #d4d4d4; border: 1px solid #3a3a3a;
  padding: 6px 12px; border-radius: 3px; font-size: 14px; cursor: pointer;
}
.btn:hover { background: #363636; border-color: #555; }
.btn.primary { background: #1c3520; color: #7ec87e; border-color: #2d5a2d; }
.btn.primary:hover { background: #244a28; }

main { display: flex; height: calc(100vh - 44px); }

#sidebar {
  width: 275px; flex-shrink: 0; background: #141414; border-right: 1px solid #2a2a2a;
  display: flex; flex-direction: column; overflow: hidden;
}

/* Tabs do sidebar */
.sidebar-tabs {
  display: flex; border-bottom: 1px solid #2a2a2a; flex-shrink: 0;
}
.stab {
  flex: 1; background: transparent; color: #666; border: none;
  padding: 7px 4px; font-size: 13px; letter-spacing: 0.5px;
  cursor: pointer; border-bottom: 2px solid transparent; transition: color 0.15s;
}
.stab:hover { color: #aaa; }
.stab.active { color: #4ecdc4; border-bottom-color: #4ecdc4; }

/* Painéis internos do sidebar */
.sidebar-panel { display: none; flex: 1; overflow-y: auto; padding: 10px; }
.sidebar-panel.active { display: flex; flex-direction: column; }

/* ── Browser de Tutoriais ─────────────────────────────────────────────── */
.tut-toolbar {
  display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-shrink: 0;
}
#tut-search {
  flex: 1; background: #1f1f1f; border: 1px solid #333; color: #d4d4d4;
  padding: 4px 7px; border-radius: 3px; font-size: 13px; outline: none;
}
#tut-search:focus { border-color: #4ecdc4; }
.tut-count { font-size: 12px; color: #555; white-space: nowrap; }
.tut-tree { flex: 1; overflow-y: auto; }
.tut-loading { font-size: 13px; color: #555; padding: 8px 0; }
.tut-loading.error { color: #e07070; }

/* Grupos / categorias (details/summary) */
.tut-group {
  margin-bottom: 2px;
}
.tut-summary {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 6px;
  padding-left: calc(6px + var(--depth, 0) * 12px);
  cursor: pointer; border-radius: 3px; list-style: none;
  -webkit-user-select: none; user-select: none; font-size: 13px; color: #aaa;
  transition: background 0.1s;
}
.tut-summary::-webkit-details-marker { display: none; }
.tut-summary::before {
  content: '▸'; font-size: 12px; color: #555; transition: transform 0.15s; flex-shrink: 0;
}
details[open] > .tut-summary::before { transform: rotate(90deg); }
.tut-summary:hover { background: #1f1f1f; color: #ccc; }
.tut-glabel { flex: 1; font-weight: 500; }
.tut-gcnt {
  font-size: 12px; color: #555; background: #1f1f1f;
  padding: 1px 5px; border-radius: 8px; border: 1px solid #2a2a2a;
}
details[open] > .tut-summary { color: #4ecdc4; }
details[open] > .tut-summary .tut-gcnt { color: #4ecdc4; border-color: #2d5a5a; }

/* Itens folha (tutoriais) */
.tut-leaf {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 6px;
  padding-left: calc(18px + var(--depth, 0) * 12px);
  font-size: 13px; font-family: Consolas, monospace;
  color: #999; border-radius: 3px; cursor: default;
  transition: background 0.1s;
}
.tut-leaf:hover { background: #1a2a2a; color: #c8e8e0; }
.tut-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tut-solver {
  font-size: 11px; color: #4ecdc4; background: #0d1e1e;
  padding: 1px 4px; border-radius: 3px; flex-shrink: 0; max-width: 70px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tut-geo { font-size: 12px; flex-shrink: 0; }

/* Tooltip flutuante */
.tut-tooltip {
  position: fixed; z-index: 2000;
  background: #1a1a1a; border: 1px solid #3a3a3a; color: #ccc;
  font-size: 13px; line-height: 1.5; padding: 7px 10px;
  border-radius: 4px; max-width: 280px; pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.tut-tooltip.hidden { display: none; }

#sidebar h2 { font-size: 13px; color: #888; letter-spacing: 1px; margin-bottom: 8px; }
#parts-list { list-style: none; }
#parts-list li {
  padding: 6px 8px; background: #1f1f1f; border: 1px solid #2a2a2a;
  border-radius: 3px; margin-bottom: 4px; font-size: 13px;
  font-family: Consolas, monospace; display: block; cursor: pointer;
}
#parts-list li:hover { background: #252525; border-color: #4ecdc4; }
#parts-list li.selected { background: #1c3035; border-color: #4ecdc4; color: #4ecdc4; }

#parts-list .row-main { display: flex; align-items: center; gap: 6px; }
#parts-list .name { flex: 1; min-width: 0; overflow: hidden;
                    text-overflow: ellipsis; white-space: nowrap; }
#parts-list .pencil { cursor: pointer; font-size: 14px;
                       -webkit-user-select: none; user-select: none;
                       padding: 0 2px; opacity: 0.7; }
#parts-list .pencil:hover { opacity: 1; transform: scale(1.1); }
#parts-list .trans-cell { display: flex; align-items: center; gap: 2px;
                          color: #888; font-size: 13px; }
#parts-list .trans-input {
  width: 36px; background: #141414; border: 1px solid #2a2a2a;
  color: #d4d4d4; font-size: 13px; padding: 1px 3px; border-radius: 2px;
  text-align: right; font-family: Consolas, monospace;
}
#parts-list .trans-input:focus { outline: none; border-color: #4ecdc4; }
#parts-list .trans-suffix { color: #666; }
#parts-list .rm { color: #ff6b6b; cursor: pointer; font-size: 16px; padding: 0 2px; }

/* Editor expansível (Pos/Rot por eixo) */
#parts-list .row-edit {
  display: flex; flex-direction: column; gap: 4px;
  padding: 6px 0 2px 0; margin-top: 6px;
  border-top: 1px dashed #333;
}
#parts-list .row-edit.hidden { display: none; }
#parts-list .edit-row { display: flex; gap: 3px; align-items: center; }
#parts-list .edit-row label { color: #888; width: 28px; font-size: 12px;
                              flex-shrink: 0; }
#parts-list .edit-row input {
  width: 52px; background: #141414; border: 1px solid #2a2a2a;
  color: #d4d4d4; padding: 1px 3px; font-size: 13px;
  font-family: Consolas, monospace; border-radius: 2px;
}
#parts-list .edit-row input:focus { outline: none; border-color: #4ecdc4; }

#hint { margin-top: 14px; font-size: 13px; color: #888; line-height: 1.6; }
#hint .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
#hint .dot.center { background: #ffd700; }
#hint .dot.ext    { background: #4ecdc4; }

#canvas-wrap { flex: 1; position: relative; display: flex; flex-direction: column; min-width: 0; }
#canvas-wrap canvas { display: block; }

/* Stage: área abaixo da barra de abas onde fica o 3D e o editor */
#canvas-stage { flex: 1; position: relative; min-height: 0; }

/* ── Barra de abas estilo VS Code ───────────────────────────────────────── */
#editor-tabs {
  display: flex; align-items: stretch; gap: 1px; flex-shrink: 0;
  background: #141414; border-bottom: 1px solid #2a2a2a;
  min-height: 32px; overflow-x: auto;
}
.editor-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 0 10px; font-size: 12px; color: #999; cursor: pointer;
  background: #1a1a1a; border-right: 1px solid #2a2a2a;
  white-space: nowrap; -webkit-user-select: none; user-select: none;
  border-top: 2px solid transparent;
}
.editor-tab:hover { background: #222; color: #ccc; }
.editor-tab.active {
  background: #0d0d0d; color: #4ecdc4; border-top-color: #4ecdc4;
}
.editor-tab .tab-label { overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.editor-tab .tab-close {
  font-size: 14px; color: #777; border-radius: 3px; padding: 0 3px; line-height: 1;
}
.editor-tab .tab-close:hover { background: #3a1a1a; color: #ff9b9b; }
.editor-tab .tab-dirty { color: #ecc44e; font-size: 10px; }

/* ── Stage da MALHA (viewport próprio, aba Malha) ───────────────────────── */
#mesh-stage {
  position: absolute; inset: 0; z-index: 55;
  display: flex; flex-direction: column; background: #0d0d0d;
}
#mesh-stage.hidden { display: none; }

/* Stage de RESULTADOS (plot CFD) — faltava a regra: sem ela o stage colapsava e
   a canvas ficava no tamanho default (pequena, no topo). Espelha o #mesh-stage. */
#results-stage {
  position: absolute; inset: 0; z-index: 56;
  display: flex; flex-direction: column; background: #0d0d0d;
}
#results-stage.hidden { display: none; }
#results-stage canvas { display: block; }

/* Stage do TERMINAL de geração de malha (aba interna) */
#terminal-stage {
  position: absolute; inset: 0; z-index: 58;
  display: flex; flex-direction: column; background: #0d0d0d;
}
#terminal-stage.hidden { display: none; }
#terminal-bar {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding: 6px 10px; background: #141414; border-bottom: 1px solid #2a2a2a;
  min-height: 36px; box-sizing: border-box; flex-wrap: wrap;
}
.terminal-runtime { font-size: 11px; color: #8fc8c8; flex-shrink: 0; }
.terminal-steps { display: flex; gap: 6px; flex-wrap: wrap; }
/* chips de etapa (clicáveis) — verde/vermelho/rodando */
.term-step {
  display: flex; align-items: center; gap: 5px; font-size: 12px;
  padding: 3px 9px; border-radius: 4px; cursor: pointer;
  background: #1f1f1f; border: 1px solid #333; color: #bbb;
  flex-shrink: 0; white-space: nowrap;   /* não encolher/cortar: quebra p/ a linha de baixo */
}
.term-step:hover { border-color: #555; }
.term-step.active { box-shadow: 0 0 0 1px #4ecdc4 inset; }
.term-step.running { border-color: #4ecdc4; color: #4ecdc4; }
.term-step.done    { border-color: #2d5a2d; color: #7ec87e; background: #16241a; }
.term-step.error   { border-color: #5a2020; color: #ff9b9b; background: #2a1414; }
.term-step .ts-icon { font-size: 11px; }
.term-step .ts-redo {
  margin-left: 4px; background: none; border: none; color: #8a9; cursor: pointer;
  font-size: 13px; line-height: 1; padding: 0 2px; border-radius: 3px;
  opacity: 0.55; transition: opacity .12s;
}
.term-step .ts-redo:hover { opacity: 1; color: #4ecdc4; background: #2a2a2a; }
/* pausar (∥) e parar (■): só aparecem enquanto a etapa RODA; o ↻ refazer some.
   parada/feita/erro: mostra o ↻ e esconde ∥/■. */
.term-step .ts-pause, .term-step .ts-stop {
  display: none; margin-left: 4px; background: none; border: none; cursor: pointer;
  font-size: 13px; line-height: 1; padding: 0 2px; border-radius: 3px;
  opacity: 0.75; transition: opacity .12s;
}
.term-step .ts-pause { color: #e0c060; }
.term-step .ts-stop  { color: #ff5a5a; }
.term-step .ts-pause:hover { opacity: 1; background: #2a2a2a; }
.term-step .ts-stop:hover  { opacity: 1; background: #3a1818; }
.term-step.running .ts-pause, .term-step.running .ts-stop { display: inline-block; }
.term-step.running .ts-redo { display: none; }
/* construtor de pipeline: número de ordem (1)(2)…, × remover, setas */
.term-step .ts-num { color: #6cb; font-size: 11px; font-weight: 600; margin-right: 3px; }
.term-step .ts-rm {
  margin-left: 4px; background: none; border: none; color: #c66; cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0 2px; opacity: .55;
}
.term-step .ts-rm:hover { opacity: 1; color: #ff7070; }
.terminal-steps .term-step:not(:last-child)::after { content: '→'; color: #555; margin-left: 8px; }
/* barra do construtor de pipeline (acima dos chips) */
#pipeline-bar {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  border-bottom: 1px solid #2a2a2a; flex-wrap: wrap;
}
/* Barra de rolagem global: TRILHO escuro + ALÇA clara (evita o look "invertido"). */
* { scrollbar-width: thin; scrollbar-color: #4a4a52 #141417; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #141417; }
::-webkit-scrollbar-thumb { background: #4a4a52; border-radius: 5px; border: 2px solid #141417; }
::-webkit-scrollbar-thumb:hover { background: #7fdbca; }
::-webkit-scrollbar-corner { background: #141417; }
.pl-add-wrap { position: relative; }
.pl-add-menu {
  position: absolute; top: 100%; left: 0; z-index: 60; margin-top: 4px;
  background: #1e1e1e; border: 1px solid #3a3a3a; border-radius: 8px;
  min-width: 340px; max-height: 360px; overflow: auto; padding: 4px;
  box-shadow: 0 6px 24px rgba(0,0,0,.55);
}
.pl-add-menu.hidden { display: none; }   /* não há .hidden global — regra própria */
.pl-fn { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.pl-fn:hover:not(.disabled) { background: #2a2a2a; }
.pl-fn.disabled { opacity: .4; cursor: not-allowed; }
.pl-fn-top { display: flex; align-items: baseline; gap: 6px; }
.pl-fn-num { color: #6cb; font-weight: 700; font-size: 12px; min-width: 22px; }
.pl-fn.disabled .pl-fn-num { color: #777; }
.pl-fn-cat { font-size: 10px; text-transform: uppercase; color: #888; letter-spacing: .5px; }
.pl-fn-desc { font-size: 11px; color: #999; padding-left: 28px; }
.pl-cmd {
  flex: 1; min-width: 180px; background: #161616; color: #ddd; border: 1px solid #333;
  border-radius: 6px; padding: 6px 8px; font-family: ui-monospace, monospace; font-size: 12px;
}
.mesh-tb-btn.primary { background: #1c3520; color: #7ec87e; border-color: #2d5a2d; }
.mesh-tb-btn.primary:hover { background: #244a28; }
/* painéis: 1 por etapa, só o ativo visível */
.terminal-panes { flex: 1; position: relative; overflow: hidden; }
.term-pane {
  position: absolute; inset: 0; overflow: auto; padding: 10px 12px;
  background: #0a0a0a; color: #c8c8c8; font-family: Consolas, monospace;
  font-size: 12px; line-height: 1.45; white-space: pre-wrap;
}
.term-pane.hidden { display: none; }
/* painel de validação dentro de um pane (reusa as cores do mesh-validation) */
.term-pane .mesh-val-row { margin-bottom: 5px; }
#mesh-stage-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-shrink: 0; padding: 6px 10px; background: #141414;
  border-bottom: 1px solid #2a2a2a; height: 36px; box-sizing: border-box;
}
.mesh-info-wrap { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
#mesh-stage-info { font-size: 12px; color: #8fc8c8; font-family: Consolas, monospace;
                   min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mesh-spinner {
  width: 13px; height: 13px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid #234; border-top-color: #4ecdc4;
  animation: meshSpin 0.7s linear infinite;
}
.mesh-spinner.hidden { display: none; }
@keyframes meshSpin { to { transform: rotate(360deg); } }
/* bolinha girando dentro de um botão (ex.: 👁 Ver Malha enquanto carrega) */
.btn-spin {
  display: inline-block; width: 11px; height: 11px; vertical-align: middle;
  border: 2px solid rgba(127, 219, 202, .25); border-top-color: #4ecdc4;
  border-radius: 50%; animation: meshSpin .7s linear infinite;
}
#mesh-stage canvas { display: block; }
#mesh-force-lbl {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: #b8c4d0; cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
#mesh-force-lbl input { cursor: pointer; margin: 0; }

/* ── Overlay de carregamento progressivo de peças ───────────────────────── */
.load-overlay {
  position: absolute; inset: 0; z-index: 30;
  display: flex; align-items: flex-end; justify-content: center;
  pointer-events: none;                       /* deixa orbitar a cena por trás */
  padding-bottom: 28px;
}
.load-overlay.hidden { display: none; }
.load-box {
  pointer-events: auto;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  background: rgba(20, 24, 30, 0.86); color: #dce6f0;
  border: 1px solid #34506a; border-radius: 10px;
  padding: 14px 22px; min-width: 260px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.load-spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid #234; border-top-color: #4ecdc4;
  animation: meshSpin 0.7s linear infinite;
}
.load-title { font-size: 13px; font-weight: 600; }
.load-bar {
  width: 100%; height: 6px; border-radius: 3px;
  background: #21303f; overflow: hidden;
}
.load-bar-fill {
  height: 100%; width: 0%; border-radius: 3px;
  background: linear-gradient(90deg, #4ecdc4, #66ccff);
  transition: width 0.25s ease;
}
.load-count { font-size: 12px; color: #9fb3c4; }

.mesh-view-ctl { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.mesh-tb-btn {
  background: #2a2a2a; color: #d4d4d4; border: 1px solid #3a3a3a;
  padding: 2px 9px; border-radius: 3px; font-size: 12px; cursor: pointer;
}
.mesh-tb-btn:hover  { background: #363636; border-color: #555; }
.mesh-tb-btn.active { background: #1c3035; color: #4ecdc4; border-color: #4ecdc4; }
.mesh-tb-sep { width: 1px; align-self: stretch; background: #3a3a3a; margin: 2px 2px; }
.mesh-cut-ctl { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.mesh-cut-toggle { font-size: 12px; color: #ccc; cursor: pointer; display: flex; align-items: center; gap: 4px; }
.mesh-cut-axis {
  background: #2a2a2a; color: #d4d4d4; border: 1px solid #3a3a3a;
  padding: 2px 8px; border-radius: 3px; font-size: 12px; cursor: pointer;
  font-family: Consolas, monospace; font-weight: 600;
}
.mesh-cut-axis.active { background: #1c3035; color: #4ecdc4; border-color: #4ecdc4; }
.mesh-cut-slider { width: 160px; cursor: pointer; accent-color: #4ecdc4; }
.mesh-cut-slider:disabled { opacity: 0.4; }

/* ── Stage do editor (sobreposto ao 3D) ─────────────────────────────────── */
#editor-stage {
  position: absolute; inset: 0; z-index: 60;
  display: flex; flex-direction: column; background: #0d0d0d;
}
#editor-stage.hidden { display: none; }
#editor-bar {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding: 6px 10px; background: #141414; border-bottom: 1px solid #2a2a2a;
}
#editor-path { font-size: 12px; color: #4ecdc4; font-family: Consolas, monospace; flex: 1;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-status { font-size: 11px; color: #888; }
.editor-status.ok    { color: #76ff03; }
.editor-status.error { color: #ff9b9b; }
.editor-status.readonly { color: #e0a030; }   /* 🔒 somente leitura */
.editor-foam-hint { font-size: 11px; color: #6a8a8a; cursor: default; }
.editor-foam-hint.hidden { display: none; }
/* Wrapper relativo: camada de realce (atrás) + textarea (frente) sobrepostos */
#editor-wrap { position: relative; flex: 1; overflow: hidden; background: #0d0d0d; }

/* Fonte/padding/line-height IDÊNTICOS nos dois para alinhar linha a linha */
#editor-area, #editor-hl-inner {
  font-family: Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.5;
  padding: 12px 14px; tab-size: 4; white-space: pre;
  margin: 0; box-sizing: border-box;
}
#editor-area {
  position: absolute; inset: 0; width: 100%; height: 100%;
  resize: none; border: none; outline: none;
  background: transparent; color: #d4d4d4;   /* fundo transparente → vê o realce */
  overflow: auto;
}
/* Somente leitura: faixa âmbar sutil + cursor default (não-editável) */
#editor-area.readonly { background: rgba(224, 160, 48, 0.04); cursor: default; }

/* Painel de validação foamDictionary */
.editor-validate-panel {
  flex-shrink: 0; background: #0e1a1a; border-top: 1px solid #2a4a52;
  max-height: 160px; display: flex; flex-direction: column;
}
.editor-validate-panel.hidden { display: none; }
.evp-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 12px; background: #0a1414; font-size: 12px; color: #8fc8c8;
  flex-shrink: 0;
}
.evp-close { background: none; border: none; color: #6a8a8a; cursor: pointer;
             font-size: 14px; padding: 0; }
.evp-close:hover { color: #ccc; }
.evp-body {
  overflow-y: auto; padding: 8px 12px; font-family: Consolas, monospace;
  font-size: 12px; line-height: 1.5; flex: 1;
}
.evp-ok  { color: #76ff03; }
.evp-err { color: #ff9b9b; }
.evp-raw { color: #888; white-space: pre-wrap; margin-top: 6px; font-size: 11px; }
/* Camada de realce: clip à área, conteúdo deslocado via transform p/ seguir scroll */
#editor-highlight {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
#editor-hl-inner { will-change: transform; }
.hl-line { color: transparent; }                 /* só o fundo importa */
.hl-line.changed {
  background: rgba(255, 213, 79, 0.14);           /* amarelo suave = linha alterada */
  box-shadow: inset 3px 0 0 #e8b500;              /* barra amarela à esquerda (gutter, estilo VS) */
}

#editor-compare-layout {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  flex: 1;
  min-height: 0;
}
#editor-compare-layout.split {
  grid-template-columns: minmax(280px, 40%) minmax(320px, 60%);
}
.compare-panel {
  display: flex;
  flex-direction: column;
  background: #0b0b0b;
  border-right: 1px solid #222;
  min-height: 0;
}
.compare-panel.hidden { display: none; }
.compare-panel.current-panel { border-right: none; }
.compare-panel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: #111;
  border-bottom: 1px solid #222;
  color: #8fc8c8;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
#editor-compare-close {
  background: #1f1f1f;
  color: #d4d4d4;
  border: 1px solid #333;
  padding: 3px 8px;
  font-size: 12px;
  cursor: pointer;
}
#editor-compare-close:hover { background: #292929; }
/* Só o textarea da versão ANTERIOR (compare) é opaco. O #editor-area atual
   PRECISA ficar transparente (regra acima) para a camada de realce das linhas
   alteradas pela IA aparecer atrás dele — senão o painting some. */
#editor-old-area {
  flex: 1;
  width: 100%;
  height: 100%;
  resize: none;
  border: none;
  outline: none;
  background: #080808;
  color: #c4c4c4;
  font-family: Consolas, 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.5;
  padding: 12px 14px;
  overflow: auto;
  white-space: pre;
}
#editor-old-area::selection,
#editor-area::selection { background: rgba(78, 205, 196, 0.18); }
#editor-current-panel { min-height: 0; display: flex; flex-direction: column; }
#editor-wrap { flex: 1; position: relative; overflow: hidden; background: #0d0d0d; }
#editor-compare-layout.single #editor-compare-panel { display: none; }
#editor-compare-layout.single #editor-current-panel { grid-column: 1 / -1; }
#editor-compare-layout.split #editor-compare-panel { display: flex; }
#editor-compare-layout.split #editor-current-panel { display: flex; }

/* ── Handles de redimensionamento ───────────────────────────────────────── */
.resize-handle {
  width: 5px; flex-shrink: 0; cursor: col-resize; background: transparent;
  transition: background 0.12s;
}
.resize-handle:hover { background: #4ecdc4; }

/* ── Aba Arquivos do projeto ────────────────────────────────────────────── */
.files-toolbar {
  display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-shrink: 0;
}
.files-hint { flex: 1; font-size: 10px; color: #666; line-height: 1.3; }
#files-refresh { padding: 2px 8px; font-size: 13px; }
.files-tree { flex: 1; overflow-y: auto; }
.files-loading { font-size: 12px; color: #555; padding: 8px 0; }
.files-loading.error { color: #e07070; }
.files-group { margin-bottom: 2px; }
.files-group > summary {
  cursor: pointer; font-size: 11px; color: #4ecdc4; padding: 4px 2px;
  list-style: none; -webkit-user-select: none; user-select: none;
  font-family: Consolas, monospace;
}
.files-group > summary::-webkit-details-marker { display: none; }
.files-group > summary::before { content: '▸ '; color: #555; }
.files-group[open] > summary::before { content: '▾ '; }
.files-gcnt { color: #555; font-size: 9px; }
/* Indentação por nível (árvore de pastas aninhadas) */
.files-group > summary { padding-left: calc(var(--depth, 0) * 12px + 2px); }
.files-fwrap > .file-item { padding-left: calc(16px + var(--depth, 0) * 12px); }
.file-item {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 6px 3px 16px; font-size: 11px; color: #bbb; cursor: pointer;
  font-family: Consolas, monospace; border-radius: 3px;
}
.file-item:hover { background: #1a2a2a; color: #c8e8e0; }
.file-item.locked { color: #9a9a9a; }            /* bloqueado: abre só leitura */
.file-item.locked:hover { background: #1a2a2a; }
.file-item .file-lock { cursor: help; flex-shrink: 0; }  /* hover → por que bloqueado */
.file-item .file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-item .file-ai { font-size: 11px; flex-shrink: 0; }   /* 🤖 IA */
/* Arquivo alterado pela IA fica com fundo amarelo até o cliente abrir */
.file-item.ai-pending { background: rgba(255,213,79,0.13); color: #e8c84a; }
.file-item.ai-pending:hover { background: rgba(255,213,79,0.22); }
.file-item .file-new {
  font-size: 9px; font-weight: 700; color: #7CFC8A;   /* verde claro */
  text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0;
}
.file-item .file-size { font-size: 9px; color: #555; }

/* "Piscar" arquivo recém-alterado/criado: laranja escuro 0.5s → original 1.5s →
   0.5s → original. Duas piscadas (total 2.5s), sem transparência. */
@keyframes fileBlink {
  0%,    20%    { background: #b35900; color: #fff; }
  20.01%, 80%   { background: transparent; }
  80.01%, 100%  { background: #b35900; color: #fff; }
}
.file-item.blink { animation: fileBlink 2.5s steps(1, end) 1; }

/* ── Card de revisão de alterações da IA (aceitar/rejeitar) ──────────────── */
.review-card {
  margin-top: 6px; border: 1px solid #3a3a2a; border-radius: 5px;
  background: #181815; padding: 8px; font-size: 12px;
}
.rv-head { color: #ecc44e; font-weight: 600; margin-bottom: 6px; }
.rv-list { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.rv-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rv-tag {
  font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px;
  letter-spacing: 0.5px; flex-shrink: 0;
}
.rv-tag.new  { background: #1c3a1c; color: #7CFC8A; }   /* CRIAR */
.rv-tag.edit { background: #3a2f1c; color: #ecc44e; }   /* EDITAR */
.rv-path { color: #c8e8e0; background: #0d0d0d; padding: 1px 4px; border-radius: 2px; }
.rv-reason { color: #999; font-size: 11px; flex-basis: 100%; padding-left: 4px; }
.rv-actions { display: flex; gap: 8px; justify-content: flex-end; }
.rv-accept, .rv-reject {
  padding: 4px 12px; border-radius: 3px; font-size: 12px; cursor: pointer; border: 1px solid;
}
.rv-accept { background: #1c3520; color: #7ec87e; border-color: #2d5a2d; }
.rv-accept:hover:not(:disabled) { background: #244a28; }
.rv-reject { background: #2a2a2a; color: #ff9b9b; border-color: #5a2020; }
.rv-reject:hover:not(:disabled) { background: #3a1515; }
.rv-accept:disabled, .rv-reject:disabled { opacity: 0.5; cursor: default; }
.rv-status { font-size: 11px; margin-top: 6px; }
.rv-status.ok    { color: #76ff03; }
.rv-status.error { color: #ff9b9b; }

/* Toolbar flutuante no canto superior esquerdo do canvas 3D */
#canvas-toolbar {
  position: absolute; top: 8px; left: 8px; z-index: 50;
  display: flex; gap: 4px; background: rgba(20,20,20,0.85);
  padding: 4px; border: 1px solid #2a2a2a; border-radius: 4px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.tb-btn {
  background: #2a2a2a; color: #d4d4d4; border: 1px solid #3a3a3a;
  padding: 4px 10px; border-radius: 3px; font-size: 13px; cursor: pointer;
}
.tb-btn:hover  { background: #363636; border-color: #555; }
.tb-btn.active { background: #1c3035; color: #4ecdc4; border-color: #4ecdc4; }
/* Separador vertical entre grupos de botoes na toolbar 3D */
.tb-sep {
  width: 1px; align-self: stretch; background: #3a3a3a; margin: 2px 2px;
}

/* Painel de controle do corte (clipping) — flutua sob a toolbar */
.clip-panel {
  position: absolute; top: 46px; left: 8px; z-index: 50;
  display: flex; flex-direction: column; gap: 6px;
  background: rgba(20,20,20,0.9); padding: 8px;
  border: 1px solid #2a2a2a; border-radius: 4px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  width: 230px;
}
.clip-panel.hidden { display: none; }
.clip-axes { display: flex; gap: 4px; }
.clip-axis-btn {
  flex: 1; background: #2a2a2a; color: #d4d4d4; border: 1px solid #3a3a3a;
  padding: 4px 0; border-radius: 3px; font-size: 13px; cursor: pointer;
  font-family: Consolas, monospace; font-weight: 600;
}
.clip-axis-btn:hover  { background: #363636; }
.clip-axis-btn.active { background: #1c3035; color: #4ecdc4; border-color: #4ecdc4; }
.clip-flip-btn {
  background: #2a2a2a; color: #d4d4d4; border: 1px solid #3a3a3a;
  padding: 4px 10px; border-radius: 3px; font-size: 14px; cursor: pointer;
}
.clip-flip-btn:hover  { background: #363636; }
.clip-flip-btn.active { background: #352a1c; color: #ecc44e; border-color: #ecc44e; }
.clip-slider-row { display: flex; align-items: center; gap: 8px; }
.clip-slider { flex: 1; cursor: pointer; accent-color: #4ecdc4; }
.clip-value-label {
  font-size: 12px; color: #8fc8c8; font-family: Consolas, monospace;
  min-width: 52px; text-align: right;
}

/* ── Painel de DETALHE de peça (aba por duplo-clique) ────────────────────── */
.part-detail-panel {
  position: absolute; top: 8px; right: 8px; z-index: 60;
  width: 260px; max-height: calc(100% - 16px); overflow-y: auto;
  background: rgba(18,18,18,0.95); border: 1px solid #2a2a2a; border-radius: 6px;
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  box-shadow: 0 4px 18px rgba(0,0,0,0.5);
  font-size: 13px; color: #d4d4d4;
}
.part-detail-panel.hidden { display: none; }
.pdp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-bottom: 1px solid #2a2a2a;
  background: #1c3035; color: #4ecdc4; border-radius: 6px 6px 0 0;
  font-weight: 600; font-family: Consolas, monospace;
}
.pdp-close {
  background: none; border: none; color: #8fc8c8; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 2px 4px;
}
.pdp-close:hover { color: #fff; }
.pdp-body { padding: 8px 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.pdp-section { display: flex; flex-direction: column; gap: 6px; }
.pdp-section.hidden { display: none; }
.pdp-section-title {
  color: #8fc8c8; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px dashed #333; padding-bottom: 3px;
}
.pdp-ref { display: flex; gap: 12px; font-size: 12px; color: #aaa; }
.pdp-ref label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.pdp-chk { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #aaa; cursor: pointer; }
.pdp-axes { display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr; gap: 4px; align-items: center; }
.pdp-axes span { color: #888; font-size: 12px; font-family: Consolas, monospace; }
.pdp-axes input, .pdp-field input, .pdp-rename input {
  width: 100%; background: #141414; border: 1px solid #2a2a2a;
  color: #d4d4d4; padding: 3px 4px; font-size: 13px;
  font-family: Consolas, monospace; border-radius: 3px;
}
.pdp-axes input:focus, .pdp-field input:focus, .pdp-rename input:focus {
  outline: none; border-color: #4ecdc4;
}
.pdp-axes input:disabled { opacity: 0.45; }
.pdp-btn { width: 100%; padding: 5px 0; font-size: 13px; }
.pdp-prim-fields { display: flex; flex-direction: column; gap: 5px; }
.pdp-field { display: flex; align-items: center; gap: 6px; }
.pdp-field span { color: #888; width: 88px; flex-shrink: 0; font-size: 12px; }
.pdp-rename { display: flex; gap: 5px; align-items: center; }
.pdp-rename input { flex: 1; }
.pdp-hint { font-size: 11px; color: #777; line-height: 1.4; }

/* Botões de ação no topo do painel de peças */
.parts-actions { display: flex; gap: 6px; margin-bottom: 6px; }
.parts-actions .btn { flex: 1; font-size: 12px; padding: 5px 4px; }

/* Linha de rename no editor expansível (lápis) */
#parts-list .edit-name-row .ed-name {
  width: auto; flex: 1; min-width: 0;
}
#parts-list .edit-name-row .ed-rename-btn {
  background: #1c3035; color: #4ecdc4; border: 1px solid #2a4a4a;
  border-radius: 3px; cursor: pointer; padding: 1px 7px; font-size: 13px;
  flex-shrink: 0;
}
#parts-list .edit-name-row .ed-rename-btn:hover { background: #244047; }

/* "Peça" virtual boundary (visualização das condições de contorno) */
#parts-list .boundary-row {
  cursor: pointer; border: 1px dashed #2a4a4a; border-radius: 5px;
  margin-bottom: 6px; background: #141c1c;
}
#parts-list .boundary-row:hover { background: #1c3035; }
#parts-list .boundary-row.bv-on { background: #1c3035; border-color: #4ecdc4; }
#parts-list .boundary-row .row-main { display: flex; align-items: center; gap: 6px; padding: 5px 8px; }
#parts-list .boundary-row .bv-icon { font-size: 14px; }
#parts-list .boundary-row .name { flex: 1; color: #d4d4d4; font-weight: 600; }
#parts-list .boundary-row .bv-eye { color: #8fc8c8; }
#parts-list .boundary-row.bv-on .bv-eye { color: #4ecdc4; }

/* Menu de contexto (clique direito) na árvore de arquivos */
.file-ctx-menu {
  position: fixed; z-index: 9999; min-width: 160px;
  background: #1c1c1c; border: 1px solid #3a3a3a; border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6); padding: 4px; font-size: 13px;
}
.file-ctx-item {
  padding: 7px 10px; border-radius: 4px; cursor: pointer; color: #d4d4d4;
  white-space: nowrap;
}
.file-ctx-item:hover { background: #2a2a2a; }
.file-ctx-item.danger { color: #ff6b6b; }
.file-ctx-item.danger:hover { background: #3a1c1c; }

/* Swatch de cor na árvore de peças */
#parts-list .swatch {
  width: 14px; height: 14px; border-radius: 3px; cursor: pointer;
  border: 1px solid #444; flex-shrink: 0;
}
#parts-list .swatch:hover { border-color: #4ecdc4; }
#parts-list .color-picker { display: none; }

/* Painel de chat com IA — lateral direito, colapsável */
#chat-panel {
  width: 320px; flex-shrink: 0;
  background: #141414; border-left: 1px solid #2a2a2a;
  display: flex; flex-direction: column; min-width: 0;
}
#chat-panel.collapsed { width: 28px; }
#chat-panel.collapsed > :not(#chat-header) { display: none; }
#chat-panel.collapsed #chat-header { writing-mode: vertical-rl; padding: 8px 4px; }
#chat-panel.collapsed .chat-title { font-size: 13px; }
#chat-panel.collapsed #chat-clear { display: none; }
#chat-panel.collapsed #chat-toggle { transform: rotate(180deg); }

#chat-header {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 10px; border-bottom: 1px solid #2a2a2a; background: #1a1a1a;
}
.chat-title { color: #4ecdc4; font-weight: 600; font-size: 13px;
              letter-spacing: 1px; }
.chat-spend { color: #7fdbca; font-weight: 600; font-size: 12px; white-space: nowrap;
              flex: 1; padding-left: 6px; }
#chat-clear, #chat-toggle { padding: 2px 8px; font-size: 14px; }
.chat-status { font-size: 12px; color: #888; padding: 4px 10px;
               background: #181818; border-bottom: 1px solid #2a2a2a; }
.chat-status.ok    { color: #4ecdc4; }
.chat-status.error { color: #ff6b6b; }

#chat-messages {
  flex: 1; overflow-y: auto; padding: 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.chat-msg { padding: 6px 9px; border-radius: 6px; font-size: 14px;
            line-height: 1.4; max-width: 90%; word-wrap: break-word;
            white-space: pre-wrap; }
.chat-msg.user      { align-self: flex-end;   background: #1c3035; color: #c8e8e0;
                      border: 1px solid #2a4a52; }
.chat-msg.assistant { align-self: flex-start; background: #1f1f1f; color: #d4d4d4;
                      border: 1px solid #2a2a2a; }
.chat-msg.error     { align-self: flex-start; background: #3a1a1a; color: #ff9b9b;
                      border: 1px solid #6a2a2a; }
.chat-msg.thinking  { color: #888; font-style: italic; }

/* Botão "Aplicar caso ao disco" embaixo da resposta do assistente quando ela
   contém um bloco json-case detectado. */
.case-apply-wrap {
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed #2a4a52;
  display: flex; flex-direction: column; gap: 6px;
}
.case-apply-btn {
  background: #1c4a3a; color: #c8f0d0; border: 1px solid #2a6a4a;
  padding: 5px 10px; border-radius: 4px; cursor: pointer;
  font-size: 13px; font-family: inherit;
}
.case-apply-btn:hover:not(:disabled) { background: #2a6a4a; }
.case-apply-btn:disabled { opacity: 0.5; cursor: default; }
.case-apply-overwrite {
  font-size: 13px; color: #888; display: flex; align-items: center; gap: 4px;
}
.case-apply-status { font-size: 13px; line-height: 1.5; }
.case-apply-status.ok    { color: #76ff03; }
.case-apply-status.error { color: #ff9b9b; }
.case-apply-status code  { background: #0d0d0d; padding: 1px 4px; border-radius: 2px; }
.case-apply-err  { display: block; margin-top: 3px; }
.case-apply-hint { color: #888; font-style: italic; }

/* Pipeline multi-camada: card de progresso ao vivo */
#chat-pipeline-bar {
  display: flex; gap: 10px; padding: 4px 8px;
  border-top: 1px solid #2a2a2a; background: #181818;
  font-size: 13px; color: #888; align-items: center;
}
.pipeline-toggle { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.pipeline-toggle input { margin: 0; }
.pipeline-iter   { display: flex; align-items: center; gap: 4px; }
.pipeline-iter input {
  width: 38px; background: #0d0d0d; color: #d4d4d4;
  border: 1px solid #2a2a2a; border-radius: 2px;
  font-size: 13px; padding: 1px 3px;
}

/* Seletor de modelo da IA */
#chat-model-bar {
  display: flex; align-items: center; gap: 6px; padding: 4px 8px;
  border-top: 1px solid #2a2a2a; background: #181818;
  font-size: 13px; color: #888;
}
#chat-model {
  flex: 1; background: #0d0d0d; color: #d4d4d4;
  border: 1px solid #2a2a2a; border-radius: 3px;
  font-size: 12px; padding: 3px 5px; cursor: pointer;
}
#chat-model:focus { outline: none; border-color: #4ecdc4; }

.chat-msg.pipeline {
  align-self: stretch; max-width: 100%;
  background: #161e1e; border: 1px solid #2a4a52;
  font-size: 13px; line-height: 1.45; color: #c8e8e0;
  white-space: normal; padding: 8px 9px;
}
/* Bloco recolhível do "raciocínio" — esconde o progresso do pipeline */
.pipeline-thinking { margin-bottom: 2px; }
.pipeline-think-summary {
  cursor: pointer; -webkit-user-select: none; user-select: none; color: #8fb8c0; font-size: 12px;
  padding: 3px 4px; border-radius: 3px; list-style: none;
  display: flex; align-items: center; gap: 6px;
}
.pipeline-think-summary::-webkit-details-marker { display: none; }
.pipeline-think-summary::before { content: '▸'; color: #4ecdc4; font-size: 11px; }
.pipeline-thinking[open] > .pipeline-think-summary::before { content: '▾'; }
.pipeline-think-summary:hover { background: rgba(78,205,196,0.08); }
.pipeline-think-summary .think-hint { color: #5a7a80; font-size: 11px; }
.pipeline-think-body {
  margin-top: 6px; padding: 6px 8px; border-left: 2px solid #2a4a52;
  background: rgba(0,0,0,0.18); border-radius: 0 3px 3px 0;
}
.pipeline-head { font-weight: 600; color: #4ecdc4; margin-bottom: 4px; }
.pipeline-reference {
  font-size: 12px; color: #b8a0e0; margin-bottom: 4px;
  background: rgba(160,120,220,0.08); border-left: 2px solid #8a6abf;
  padding: 3px 8px; border-radius: 3px;
}
.pipeline-reference code { background: #0d0d0d; padding: 0 3px; border-radius: 2px; color: #d0b8f0; }
.pipeline-reference .ref-score { color: #888; font-size: 11px; }
.pipeline-router { color: #aaa; margin-bottom: 6px; }
.pipeline-router code { background: #0d0d0d; padding: 0 3px; border-radius: 2px;
                        color: #c8e8e0; }
.router-missing { background: rgba(255,180,50,0.08); border: 1px solid rgba(255,180,50,0.3);
                  border-radius: 4px; padding: 8px 10px; margin-bottom: 6px; color: #f5c542; }
.router-missing ul { margin: 6px 0 4px 16px; font-size: 13px; color: #f0d070; }
.router-missing li { margin-bottom: 3px; }
.router-missing-hint { font-size: 13px; color: #aaa; font-style: italic; }
.pipeline-files { display: flex; flex-direction: column; gap: 2px;
                  margin-bottom: 6px; }
.pipeline-file { display: flex; gap: 8px; align-items: flex-start;
                 padding: 2px 0; border-bottom: 1px dotted #2a2a2a; }
.pipeline-file:last-child { border-bottom: none; }
.pipeline-file.accepted { background: rgba(76,255,3,0.05); }
.pipeline-file.error    { background: rgba(255,107,107,0.06); }
.pipeline-fp { min-width: 180px; font-family: Consolas, monospace;
                color: #888; flex-shrink: 0; }
.pipeline-st { flex: 1; color: #ccc; }
.pipeline-st .ok   { color: #76ff03; }
.pipeline-st .warn { color: #ffb84d; }
.pipeline-st i     { color: #888; }
/* Review de projeto */
.review-pending { color: #888; font-style: italic; }
.review-list { margin: 3px 0 2px 14px; font-size: 12px; line-height: 1.5; }
.review-list li { margin-bottom: 2px; color: #ff9b9b; }
.review-list.warn li { color: #ffb84d; }
.warn-item { color: #ffb84d; }
.review-heavy {
  font-size: 12px; color: #555; margin: 6px 0 2px 0; padding: 4px 6px;
  border-left: 2px solid #333;
}
.review-heavy code { color: #666; background: #0d0d0d; padding: 0 3px; border-radius: 2px; }

.pipeline-foot { margin-top: 4px; font-weight: 600; }
.pipeline-foot.ok      { color: #76ff03; }
.pipeline-foot.partial { color: #ffb84d; }
.pipeline-foot.error   { color: #ff6b6b; }
.pipe-case-name {
  background: #0d0d0d; color: #d4d4d4; border: 1px solid #2a2a2a;
  padding: 4px 6px; border-radius: 3px; font-size: 13px;
  font-family: Consolas, monospace;
}
/* Linhas de status V4 (cross-file) — visualmente separadas do status por arquivo */
.pipeline-v4-line {
  padding: 4px 8px; margin: 4px 0 2px 0; border-left: 2px solid #ffb84d;
  background: rgba(255,184,77,0.06); font-size: 13px; line-height: 1.5;
}
.pipeline-v4-line.ok    { border-left-color: #76ff03;
                          background: rgba(76,255,3,0.07); color: #c8f0d0; }
.pipeline-v4-line.error { border-left-color: #ff6b6b;
                          background: rgba(255,107,107,0.08); color: #ffb8b8; }
.pipeline-v4-line code  { background: #0d0d0d; padding: 0 3px;
                          border-radius: 2px; color: #c8e8e0; }

#chat-inputrow { display: flex; gap: 4px; padding: 8px;
                  border-top: 1px solid #2a2a2a; background: #181818; }
#chat-input {
  flex: 1; background: #0d0d0d; border: 1px solid #2a2a2a;
  color: #d4d4d4; padding: 6px 8px; border-radius: 3px;
  font-family: 'Segoe UI', system-ui, sans-serif; font-size: 14px;
  resize: none; line-height: 1.4;
}
#chat-input:focus { outline: none; border-color: #4ecdc4; }
#chat-send { padding: 6px 12px; align-self: flex-end; }

/* Hover menu (popover sobre esfera) */
#hover-menu {
  position: absolute;
  background: #1f1f1f;
  border: 1px solid #ff4081;
  border-radius: 4px;
  padding: 6px 8px;
  z-index: 800;
  box-shadow: 0 4px 18px rgba(0,0,0,0.5);
  font-size: 13px;
  pointer-events: auto;
  min-width: 130px;
}
#hover-menu.hidden { display: none; }
#hover-title {
  color: #ff4081; font-weight: 600; letter-spacing: 1px;
  font-size: 13px; margin-bottom: 4px; text-transform: uppercase;
}
#hover-menu .btn { display: block; width: 100%; padding: 4px 8px;
                    font-size: 13px; margin-top: 4px; }

/* Modal — overlay compartilhado */
#modal, #scale-modal, #rotate-modal, #training-modal,
#tut-confirm-modal, #mesh-modal, #delete-part-modal, #describe-modal, #cloud-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
}
#modal.hidden, #scale-modal.hidden, #rotate-modal.hidden,
#training-modal.hidden, #tut-confirm-modal.hidden,
#mesh-modal.hidden, #delete-part-modal.hidden, #describe-modal.hidden,
#cloud-modal.hidden { display: none; }

/* Modal de nuvem (EC2 SSH) */
.cloud-content { width: 640px; max-width: 94vw; max-height: 90vh; overflow-y: auto; }
.cloud-head { display:flex; align-items:center; justify-content:space-between; }
.cloud-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; margin:10px 0; }
.cloud-grid label, .cloud-chk { font-size:12px; color:#aab; display:flex; flex-direction:column; gap:3px; }
.cloud-grid .cloud-wide { grid-column: 1 / -1; }
.cloud-grid input { background:#141414; border:1px solid #2a2a2a; color:#d4d4d4;
  padding:5px 7px; border-radius:4px; font-family:Consolas,monospace; font-size:13px; }
.cloud-grid input:focus { outline:none; border-color:#4ecdc4; }
.cloud-chk { flex-direction:row; align-items:center; gap:6px; margin:4px 0 10px; }
.cloud-actions { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.cloud-log { background:#0a0a0a; border:1px solid #222; border-radius:6px; padding:10px;
  height:240px; overflow:auto; font-family:Consolas,monospace; font-size:12px;
  color:#bcd; white-space:pre-wrap; margin:0; }

/* Modal de descrições das peças */
.describe-modal-content { width: 600px; max-width: 94vw; max-height: 82vh;
  display: flex; flex-direction: column; }
.modal-input { background: #141414; border: 1px solid #3a3a3a; color: #d4d4d4;
  padding: 6px 8px; border-radius: 3px; font-size: 13px; }
.modal-input:focus { outline: none; border-color: #4ecdc4; }
.describe-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column;
  gap: 8px; padding: 4px 2px; max-height: 52vh; }
.describe-row { border-left: 3px solid #2d5a2d; padding: 4px 8px; background: #161616;
  border-radius: 3px; }
.describe-row.unrec { border-left-color: #6a5a20; }
.dr-name { font-size: 12px; color: #8fc8c8; font-family: Consolas, monospace; margin-bottom: 3px; }
.dr-tag { font-size: 11px; }
.dr-desc { width: 100%; background: #0d0d0d; border: 1px solid #2a2a2a; color: #d4d4d4;
  border-radius: 3px; padding: 4px 6px; font-size: 12px; resize: vertical;
  font-family: 'Segoe UI', system-ui, sans-serif; }
.dr-desc:focus { outline: none; border-color: #4ecdc4; }
.edit-desc-row .ed-desc { flex: 1; background: #0d0d0d; border: 1px solid #2a2a2a;
  color: #d4d4d4; border-radius: 3px; padding: 4px 6px; font-size: 12px; resize: vertical;
  font-family: 'Segoe UI', system-ui, sans-serif; }
.edit-desc-row .ed-desc:focus { outline: none; border-color: #4ecdc4; }
.delete-part-modal-content { width: 560px; max-width: 94vw; }

/* Modal de geração de malha */
.mesh-content { width: 760px; max-width: 92vw; display: flex; flex-direction: column; gap: 10px; }
.mesh-header { display: flex; align-items: center; justify-content: space-between;
               border-bottom: 1px solid #2a2a2a; padding-bottom: 8px; }
.mesh-header h3 { color: #4ecdc4; font-size: 14px; letter-spacing: 1px; }
.mesh-runtime { font-size: 11px; color: #888; }
.mesh-steps { display: flex; gap: 8px; flex-wrap: wrap; }
.mesh-step { display: flex; align-items: center; gap: 5px; font-size: 12px;
             padding: 3px 10px; border-radius: 14px; border: 1px solid #2a2a2a;
             background: #1a1a1a; color: #888; font-family: Consolas, monospace; }
.mesh-step.running { border-color: #4ecdc4; color: #4ecdc4; }
.mesh-step.done    { border-color: #2d5a2d; color: #7ec87e; background: #16241a; }
.mesh-step.error   { border-color: #5a2020; color: #ff9b9b; background: #2a1414; }
.mesh-step .ms-icon { font-size: 12px; }
.mesh-log {
  background: #0a0a0a; color: #c8c8c8; font-family: Consolas, monospace;
  font-size: 12px; line-height: 1.45; padding: 10px; border-radius: 4px;
  height: 300px; overflow: auto; white-space: pre-wrap; border: 1px solid #1f1f1f;
}

/* Relatório do validador sistêmico de malha */
.mesh-validation { border: 1px solid #2a2a2a; border-radius: 4px; background: #121212;
  max-height: 200px; overflow: auto; }
.mesh-validation.hidden { display: none; }
.mesh-val-head { font-size: 12px; font-weight: 600; color: #8fc8c8;
  padding: 6px 10px; border-bottom: 1px solid #222; background: #161616; }
.mesh-val-list { padding: 6px 10px; display: flex; flex-direction: column; gap: 5px; }
.mesh-val-row { font-size: 12px; line-height: 1.4; padding: 4px 6px; border-radius: 3px;
  border-left: 3px solid #444; }
.mesh-val-row.fixed { border-left-color: #2d5a2d; background: #14201a; color: #9fd9a0; }
.mesh-val-row.warning { border-left-color: #6a5a20; background: #211e12; color: #e0c87a; }
.mesh-val-row.fatal { border-left-color: #5a2020; background: #221414; color: #ff9b9b; }
.mesh-val-row code { background: #000; padding: 0 4px; border-radius: 2px; color: #d4d4d4; }
.mesh-val-fix { color: #9aa; font-size: 11px; margin-top: 2px; padding-left: 18px; }
.mesh-val-blocked { font-size: 12px; font-weight: 600; color: #ff9b9b;
  padding: 6px; margin-top: 4px; border-top: 1px solid #3a1f1f; }

/* Status de carregamento de tutorial (dentro da árvore) */
.tut-load-status {
  font-size: 12px; padding: 7px 8px; margin-bottom: 8px;
  background: #1a2a1a; border: 1px solid #2d5a2d; border-radius: 3px;
  color: #aaa; line-height: 1.4;
}

/* Startup modal */
.startup-content { min-width: 360px; }
.startup-msg { color: #ccc; font-size: 14px; line-height: 1.6; margin-bottom: 4px; }
.startup-sub { color: #666; font-size: 13px; }
.project-status { font-size: 13px; padding: 4px 0; }
.project-status.ok    { color: #7ec87e; }
.project-status.error { color: #e07070; }

/* Botão perigo (limpar projeto) */
.btn-danger { color: #e07070; border-color: #5a2020; }
.btn-danger:hover { background: #3a1515; border-color: #7a2020; }

/* Modal de treinamento — maior que os outros */
.training-content {
  width: 720px; max-width: 92vw; max-height: 80vh;
  display: flex; flex-direction: column; gap: 8px;
}
.training-header { display: flex; align-items: center; justify-content: space-between;
                   border-bottom: 1px solid #2a2a2a; padding-bottom: 8px; margin-bottom: 4px; }
.training-header h3 { color: #4ecdc4; font-size: 15px; letter-spacing: 1px; }
.training-tabs { display: flex; gap: 4px; border-bottom: 1px solid #2a2a2a; }
.training-tab {
  background: transparent; color: #888; border: none; padding: 6px 12px;
  cursor: pointer; font-size: 13px; border-bottom: 2px solid transparent;
}
.training-tab:hover { color: #d4d4d4; }
.training-tab.active { color: #4ecdc4; border-bottom-color: #4ecdc4; }
.training-count { background: #2a2a2a; color: #888; padding: 1px 6px;
                   border-radius: 8px; font-size: 12px; margin-left: 4px; }
.training-list { flex: 1; overflow-y: auto; padding: 6px 2px; }
.training-loading { color: #666; font-style: italic; text-align: center; padding: 24px; }

.training-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: #1f1f1f; border: 1px solid #2a2a2a;
  border-radius: 3px; margin-bottom: 4px; font-size: 13px;
}
.training-row:hover { background: #252525; border-color: #4ecdc4; }
.training-row .tr-id { color: #87ceeb; font-family: Consolas, monospace;
                        font-size: 13px; min-width: 120px; flex-shrink: 0; }
.training-row .tr-title { flex: 1; color: #d4d4d4; }
.training-row .tr-group { color: #666; font-size: 12px; padding: 1px 6px;
                           background: #141414; border-radius: 3px; }
.training-row .tr-run {
  background: #1c3520; color: #7ec87e; border: 1px solid #2d5a2d;
  padding: 4px 10px; font-size: 13px; border-radius: 3px; cursor: pointer;
}
.training-row .tr-run:hover { background: #244a28; }
.training-row .tr-run:disabled { opacity: 0.5; cursor: wait; }
.training-row .tr-status { color: #ffd700; font-size: 13px; min-width: 100px;
                            text-align: right; }
.training-row.success { border-color: #2d5a2d; background: #182518; }
.training-row.fail    { border-color: #6a2a2a; background: #251818; }

.training-result {
  border-top: 1px solid #2a2a2a; padding-top: 10px; margin-top: 6px;
  max-height: 40vh; overflow-y: auto;
}
.training-result.hidden { display: none; }
.training-result h4 { color: #4ecdc4; font-size: 14px; margin-bottom: 8px; }
.training-result-grid {
  display: grid; grid-template-columns: 110px 1fr; gap: 4px 12px;
  font-size: 13px; margin-bottom: 8px;
}
.training-result-grid .label { color: #888; }
.training-result-grid .value { color: #d4d4d4; font-family: Consolas, monospace; }
.training-result pre {
  background: #0d0d0d; border: 1px solid #2a2a2a; padding: 6px 8px;
  font-size: 13px; color: #c8c8c8; max-height: 200px; overflow: auto;
  border-radius: 3px;
}
.scale-hint { color: #888; font-size: 13px; margin: 6px 0 4px; }
.modal-content {
  background: #1f1f1f; border: 1px solid #4ecdc4; border-radius: 6px;
  padding: 18px 22px; min-width: 280px; box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.modal-content h3 { font-size: 15px; color: #4ecdc4; margin-bottom: 14px; letter-spacing: 1px; }
.modal-content .row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.modal-content label { width: 16px; color: #888; font-family: Consolas, monospace; font-size: 14px; }
.modal-content input {
  flex: 1; background: #141414; border: 1px solid #3a3a3a; color: #d4d4d4;
  padding: 6px 8px; border-radius: 3px; font-family: Consolas, monospace; font-size: 14px;
}
.modal-content input:focus { outline: none; border-color: #4ecdc4; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* ── Agente (tool-use): transcript ao vivo ───────────────────────────────── */
.agent-toggle { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px;
  font-size: 12px; color: #b8b8b8; cursor: pointer;
  -webkit-user-select: none; user-select: none; }
.agent-toggle input { accent-color: #4ecdc4; }
.chat-msg.agent { background: #15201f; border-left: 3px solid #4ecdc4; }
.agent-steps-sum { cursor: pointer; color: #4ecdc4; font-size: 13px; padding: 2px 0; }
.agent-steps-body { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.agent-step { font-family: Consolas, monospace; font-size: 12px; line-height: 1.5;
  color: #cfcfcf; border-left: 2px solid #2c3a39; padding-left: 8px; }
.agent-step.think { color: #9aa7a6; font-style: italic; border-left-color: #344; }
.agent-step.call  { color: #e8e8e8; }
.agent-step.call b { color: #7fdbca; }
.agent-step.err   { color: #ff8a8a; border-left-color: #5a2a2a; }
.agent-step.status { color: #7fb0a8; border-left-color: #2c4a46; }
.agent-status { color: #7fb0a8; }
.agent-arg { color: #888; }
/* ■ Parar — no cabeçalho do card do agente, enquanto ele trabalha */
.agent-stop-btn { float: right; background: #5a1e1e; color: #ffd7d7; border: none;
  border-radius: 5px; padding: 2px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.agent-stop-btn:hover { background: #7a2727; }
.agent-stop-btn:disabled { opacity: .5; cursor: default; }
.agent-result { margin: 2px 0 4px 8px; }
.agent-result summary { cursor: pointer; color: #7a8a89; font-size: 11px; }
.agent-result pre { margin: 4px 0 0; max-height: 220px; overflow: auto;
  background: #0e1413; border: 1px solid #233; border-radius: 3px; padding: 6px 8px;
  font-size: 11px; color: #b8c4c3; white-space: pre-wrap; }
.agent-final { margin-top: 8px; white-space: pre-wrap; line-height: 1.55; }
.agent-thinking { margin-top: 6px; color: #9aa7a6; font-style: italic; font-size: 13px; }
/* Robôzinho do NavStokes no lugar do emoji 🤖 (imagem sem fundo) */
.ns-bot { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -0.28em;
          background: url('bot.png') center/contain no-repeat; }

/* ── Aba Results (plotagem CFD) ───────────────────────────────────────────── */
.res-controls { display: flex; flex-direction: column; gap: 8px; padding: 8px; }
.res-row { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #b8b8b8; }
.res-row select, .res-row input[type=number] {
  background: #141414; border: 1px solid #3a3a3a; color: #d4d4d4;
  padding: 4px 6px; border-radius: 3px; font-size: 13px; }
.res-row-label { font-size: 12px; color: #b8b8b8; margin-bottom: 2px; }
.res-pos-wrap { display: flex; gap: 6px; align-items: center; }
.res-pos-wrap input[type=range] { flex: 1; accent-color: #4ecdc4; }
.res-pos-wrap input[type=number] { width: 90px; }
.res-patches { display: flex; flex-direction: column; gap: 2px; max-height: 160px;
  overflow: auto; background: #111; border: 1px solid #2c2c2c; border-radius: 3px; padding: 5px; }
.res-patch-chk { font-size: 12px; color: #cfcfcf; display: flex; gap: 5px; align-items: center; cursor: pointer; }
.res-patch-chk input { accent-color: #4ecdc4; }
.res-patch-chk.res-allmesh { font-weight: 600; color: #cfe9ff; border-bottom: 1px solid #2c2c2c; padding-bottom: 4px; margin-bottom: 2px; }
.res-status { font-size: 12px; color: #7CFC8A; min-height: 16px; }
.res-status.err { color: #ff8a8a; }
/* Paletas: swatches com PREVIEW do gradiente (não só o nome) */
.res-swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.res-swatch { width: 62px; cursor: pointer; border: 2px solid transparent; border-radius: 4px;
  padding: 2px; background: #111; transition: border-color .12s; }
.res-swatch:hover { border-color: #3a5a66; }
.res-swatch.sel { border-color: #4ecdc4; }
.res-swatch-bar { height: 14px; border-radius: 2px; border: 1px solid #000; }
.res-swatch-name { font-size: 10px; color: #b8b8b8; text-align: center; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-swatch.sel .res-swatch-name { color: #4ecdc4; }
.res-check-row { flex-direction: row; align-items: center; gap: 6px; cursor: pointer; }
.res-check-row input { accent-color: #4ecdc4; }
.res-opacity-val { font-size: 11px; color: #b8b8b8; width: 36px; text-align: right; }
.res-build-bar { display: flex; gap: 6px; margin-top: 6px; }
.res-build-bar .btn { flex: 1; }
#res-cfg-hint { margin: 8px 0; }
.res-times-head { display: flex; justify-content: space-between; align-items: center;
  padding: 6px 8px; border-top: 1px solid #2a2a2a; font-size: 12px; color: #9aa7a6; }
.res-times-state { color: #4ecdc4; font-size: 11px; }
.res-times { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 8px 10px; }
.res-time-chip { background: #1a1a1a; border: 1px solid #3a3a3a; color: #cfcfcf;
  font-family: Consolas, monospace; font-size: 12px; padding: 3px 8px; border-radius: 3px; cursor: pointer; }
.res-time-chip:hover { border-color: #4ecdc4; }
.res-time-chip.sel { background: #16302e; border-color: #4ecdc4; color: #7fdbca; }
.res-empty { font-size: 12px; color: #777; font-style: italic; padding: 4px 0; }

/* Árvore de plots acumulados */
.res-plots-head { display: flex; justify-content: space-between; align-items: center;
  padding: 6px 8px; border-top: 1px solid #2a2a2a; font-size: 12px; color: #9aa7a6; }
.res-mini-btn { background: none; border: 1px solid #3a3a3a; color: #9aa7a6;
  font-size: 11px; padding: 1px 7px; border-radius: 3px; cursor: pointer; }
.res-mini-btn:hover { border-color: #ff6b6b; color: #ff8a8a; }
.res-plots { display: flex; flex-direction: column; gap: 2px; padding: 0 8px 8px; }
.res-plot-item { display: flex; align-items: center; gap: 5px; padding: 3px 5px;
  background: #161616; border: 1px solid #2a2a2a; border-radius: 3px; font-size: 12px; }
.res-plot-item.sel { border-color: #4ecdc4; background: #16302e; }
.res-plot-name { flex: 1; color: #d4d4d4; cursor: pointer; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.res-plot-eye, .res-plot-del { background: none; border: none; cursor: pointer;
  font-size: 12px; padding: 0 2px; line-height: 1; }
.res-plot-del:hover { filter: brightness(1.4); }

/* Colorbar sobre o viewport */
.res-colorbar { position: absolute; right: 14px; top: 60px; display: flex;
  flex-direction: column; align-items: center; gap: 4px; z-index: 5;
  background: rgba(13,13,13,.7); padding: 8px 10px; border-radius: 6px; pointer-events: none; }
.res-cb-grad { width: 18px; height: 180px; border: 1px solid #555; border-radius: 2px;
  background: linear-gradient(to top, #00008f, #0000ff, #00ffff, #00ff00, #ffff00, #ff0000, #800000); }
.res-cb-val { font-family: Consolas, monospace; font-size: 11px; color: #e8e8e8; }
.res-cb-label { font-size: 11px; color: #7fdbca; max-width: 90px; text-align: center; }

/* ── Sync site↔app ───────────────────────────────────────────────────────── */
.sync-dot { display:inline-block; width:9px; height:9px; border-radius:50%;
  vertical-align:middle; margin-right:4px; box-shadow:0 0 0 1px rgba(0,0,0,.4) inset; }
.sync-dot.off { background:#b0413a; }                 /* desconectado (vermelho) */
.sync-dot.on  { background:#3fbf6a; box-shadow:0 0 6px #3fbf6a; }  /* conectado */
.sync-dot.pending { background:#d9a441; }             /* conectando (âmbar) */

.sync-panel { position:fixed; top:64px; right:14px; z-index:200; width:340px;
  background:#1b1b1f; border:1px solid #3a3a42; border-radius:8px;
  box-shadow:0 10px 30px rgba(0,0,0,.5); padding:14px; color:#e8e8e8;
  font-size:13px; }
.sync-panel.hidden { display:none; }
.sync-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.sync-role { font-size:11px; color:#7fdbca; font-weight:600; text-transform:uppercase; }
.sync-explain { font-size:12px; color:#b8b8c0; line-height:1.45; margin:0 0 10px; }
.sync-field { display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
.sync-field span { font-size:11px; color:#9a9aa4; }
.sync-field input { background:#0f0f12; border:1px solid #3a3a42; border-radius:5px;
  color:#e8e8e8; padding:6px 8px; font-size:12px; font-family:Consolas, monospace; }
.sync-status-row { display:flex; align-items:center; gap:6px; margin-bottom:8px; font-size:12px; }
.sync-peer-info { color:#9a9aa4; font-size:11px; }
.sync-error { background:#3a201f; border:1px solid #b0413a; border-radius:5px;
  padding:7px 9px; font-size:12px; color:#f0b8b4; line-height:1.4; margin-bottom:10px; }
.sync-error.hidden { display:none; }
.sync-actions { display:flex; gap:8px; }
.sync-actions .btn { flex:1; }

/* ── Login (Cognito) ─────────────────────────────────────────────────────── */
#auth-overlay { position:fixed; inset:0; z-index:1000; display:flex;
  align-items:center; justify-content:center;
  background:rgba(10,10,12,.82); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
#auth-overlay .auth-card { background:#1b1b1f; border:1px solid #3a3a42;
  border-radius:12px; padding:32px 36px; width:360px; text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.6); color:#e8e8e8; }
#auth-overlay h2 { margin:0 0 6px; color:#7fdbca; font-size:24px; }
#auth-overlay p { color:#b8b8c0; font-size:13px; line-height:1.5; margin:0 0 18px; }
#auth-overlay .btn.primary { width:100%; padding:11px; font-size:14px; }
#auth-overlay .auth-input { width:100%; box-sizing:border-box; margin:6px 0;
  background:#0f0f12; border:1px solid #3a3a42; border-radius:6px; color:#e8e8e8;
  padding:10px 12px; font-size:14px; }
#auth-overlay .auth-input:focus { outline:none; border-color:#7fdbca; }
#auth-overlay .auth-err { background:#3a201f; border:1px solid #b0413a; border-radius:6px;
  padding:8px 10px; font-size:12px; color:#f0b8b4; margin:6px 0; text-align:left; }
#auth-overlay .auth-err.hidden { display:none; }
#auth-overlay .btn.primary { margin-top:8px; }
#auth-overlay .auth-fine { font-size:11px; color:#777; margin:14px 0 0; }
#auth-userchip { position:fixed; top:8px; right:12px; z-index:300;
  display:flex; align-items:center; gap:6px; background:#1b1b1f;
  border:1px solid #3a3a42; border-radius:16px; padding:3px 6px 3px 12px;
  font-size:12px; color:#cfcfd6; box-shadow:0 2px 8px rgba(0,0,0,.4); }
#auth-userchip .auth-email { max-width:200px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
#sync-acct { font-size:12px; color:#cfcfd6; }
.sync-result { font-size:12px; color:#9fdfc0; margin-top:10px; min-height:14px; }
.sync-conflicts { margin-top:10px; background:#2a2620; border:1px solid #d9a441;
  border-radius:6px; padding:8px 10px; }
.sync-conf-head { font-size:12px; color:#f0c674; margin-bottom:4px; }
.sync-conflicts ul { margin:4px 0 8px; padding-left:18px; max-height:120px; overflow:auto; }
.sync-conflicts li { font-family:Consolas, monospace; font-size:11px; color:#d8d8d8; }
.sync-conflicts .btn { width:100%; font-size:12px; }

/* ── Modal "baixe o app" (rodar OpenFOAM só no desktop) ─────────────────────── */
.ns-modal-overlay {
  position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center;
  justify-content: center; background: rgba(6, 6, 10, .72); backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.ns-modal {
  position: relative; width: min(460px, 92vw); background: linear-gradient(180deg, #191922, #14141a);
  border: 1px solid #2a2a34; border-radius: 16px; padding: 30px 30px 26px; text-align: center;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
}
.ns-modal-x { position: absolute; top: 12px; right: 14px; background: none; border: none;
  color: #9a9aa6; font-size: 18px; cursor: pointer; }
.ns-modal-x:hover { color: #e8e8ec; }
.ns-modal-ico { font-size: 42px; margin-bottom: 8px; }
.ns-modal h2 { font-size: 21px; margin-bottom: 10px; color: #e8e8ec; }
.ns-modal p { color: #b8b8c0; font-size: 14.5px; line-height: 1.6; }
.ns-modal p b { color: #e8e8ec; }
.ns-modal-actions { display: flex; gap: 10px; margin: 20px 0 6px; }
.ns-modal-actions .btn { flex: 1; text-align: center; }
.ns-modal .btn.primary { background: linear-gradient(135deg, #4ecdc4, #3aa8a0); color: #06211e; border: none; }
.ns-modal .btn.big { font-size: 15px; padding: 12px 18px; border-radius: 10px; }
.ns-modal-fine { font-size: 12px; color: #9a9aa6; margin-top: 10px; }

/* ── Seletor de idioma (PT/EN) no header ────────────────────────────────────── */
.ns-lang-wrap { display: inline-flex; align-items: center; }
.ns-lang-select {
  background: #1b1b22; color: #e8e8ec; border: 1px solid #333; border-radius: 6px;
  padding: 6px 8px; font-size: 12.5px; cursor: pointer; outline: none;
}
.ns-lang-select:hover { border-color: #4ecdc4; }