/* =====================================================
   OMEGA LIGHT — Configurador Sistema JU
   Paleta oficial: #1D7192 · #186077 · #144E5B · #0F363E
   Tipografia: Roboto
   ===================================================== */

:root {
  --ol-1:       #0e6279;   /* petróleo principal */
  --ol-2:       #186077;   /* intermediário */
  --ol-3:       #144E5B;   /* escuro */
  --ol-4:       #0F363E;   /* quase preto azulado */

  --bg-scene:   #c8d8dc;   /* fundo da cena — azul acinzentado claro */
  --bg:         #0F363E;   /* superfície dos painéis */
  --surface:    #0F363E;
  --surface2:   #144E5B;
  --border:     #1D7192;
  --border-sub: #186077;

  --text:       #ffffff;
  --text-muted: #a8ccd4;
  --text-hud:   #e0f0f4;

  --accent:     #1D7192;
  --accent-h:   #167a93;   /* hover — versão clara do petróleo principal */

  --danger:     #c0392b;
  --danger-h:   #a93226;
  --success:    #1D7192;
  --success-h:  #186077;

  --radius:     6px;
  --shadow:     0 4px 20px rgba(0,0,0,0.5);
  --font:       'Roboto', sans-serif;
}

/* ── Base ── */
body {
  margin: 0;
  overflow: hidden;
  font-family: var(--font);
  background: var(--bg-scene);
  color: var(--text);
}

/* ── Menus / painéis ── */
.menu {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--border-sub);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 230px;
  box-sizing: border-box;
  font-size: 13px;
  overflow: hidden;
}

.menuHeader {
  background: var(--ol-4);
  padding: 10px 14px;
  cursor: move;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  border-bottom: 1px solid var(--border);
  user-select: none;
}

.menuContent {
  padding: 10px 10px 12px;
  max-height: 90vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* ── Seções internas do painel ── */
.panelSection { margin-bottom: 4px; }
.panelDivider {
  height: 1px;
  background: var(--border-sub);
  margin: 8px 0;
  opacity: 0.4;
}
.sectionLabel {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ol-1);
  margin: 8px 0 5px;
}

/* ── Botões gerais dos painéis ── */
.menu .menuContent button {
  display: block;
  width: 100%;
  margin: 4px 0;
  padding: 7px 10px;
  border: 1px solid var(--border-sub);
  border-radius: var(--radius);
  background: var(--surface2);
  color: var(--text);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  text-align: left;
}
.menu .menuContent button:hover {
  background: var(--ol-2);
  border-color: var(--ol-1);
  color: #fff;
}

/* ── Botões de ação (inserir / aplicar) ── */
#addStraightFinal,
#addCurve,
.apply-btn,
#generateRandom,
#customInsertBtn {
  background: var(--ol-1) !important;
  color: #fff !important;
  border-color: var(--ol-1) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
}
#addStraightFinal:hover,
#addCurve:hover,
.apply-btn:hover,
#generateRandom:hover,
#customInsertBtn:hover {
  background: var(--accent-h) !important;
  border-color: var(--accent-h) !important;
}

#addStraightFinal[disabled],
#customInsertBtn[disabled] {
  background: var(--ol-4) !important;
  color: var(--text-muted) !important;
  border-color: var(--border-sub) !important;
  cursor: not-allowed !important;
  opacity: 0.5;
}

/* ── Desfazer / Remover ── */
#undo, .remove-btn {
  background: var(--danger) !important;
  color: #fff !important;
  border-color: var(--danger) !important;
}
#undo:hover, .remove-btn:hover {
  background: var(--danger-h) !important;
}

/* ── Limpar ── */
#clearAll {
  background: var(--ol-3) !important;
  color: #fff !important;
  border-color: var(--ol-3) !important;
}
#clearAll:hover { background: var(--ol-2) !important; }

/* ── Voltar ── */
.backBtn {
  background: transparent !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border-sub) !important;
  font-size: 11px !important;
}
.backBtn:hover {
  background: var(--surface2) !important;
  color: #fff !important;
}

/* ── Aleatório toggle ── */
#toggleRandomPanel {
  background: var(--ol-3) !important;
  border-color: var(--ol-2) !important;
}

/* ── hidden ── */
.hidden { display: none !important; }

/* ── Tutorial Wizard ── */
#tutorialOverlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 30, 35, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.4s ease;
  backdrop-filter: blur(4px);
}
#tutorialOverlay.hidden { opacity: 0; pointer-events: none; }

#tutorialCard {
  background: var(--ol-4);
  border: 1px solid var(--ol-2);
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7);
  width: 90%;
  max-width: 540px;
  max-height: 88vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#tutorialHeader, #tutorialProgress, #tutorialFooter {
  flex-shrink: 0;
}

#tutorialStepWrapper {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

#tutorialHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--ol-3);
}
#tutorialLogo {
  height: 56px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
#tutorialSkip {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 11px;
  cursor: pointer;
  letter-spacing: 0.05em;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.2s;
}
#tutorialSkip:hover { color: #fff; }

#tutorialProgress {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px 0 8px;
}
.tutorialDot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ol-3);
  transition: background 0.3s, transform 0.3s;
  cursor: pointer;
}
.tutorialDot.active {
  background: var(--ol-1);
  transform: scale(1.3);
}

.tutorialStep {
  display: none;
  padding: 0 24px 16px;
}
.tutorialStep.active { display: block; }

.tutorialStepTitle {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ol-1);
  margin: 12px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ol-3);
}

.tutorialList {
  list-style: none;
  padding: 0; margin: 0;
}
.tutorialList li {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.7;
  padding: 5px 0 5px 16px;
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.tutorialList li::before {
  content: "›";
  position: absolute;
  left: 2px;
  color: var(--ol-1);
  font-weight: 700;
}
.tutorialList li strong { color: #6dd1db; font-weight: 600; }

#tutorialHighlight {
  margin: 14px 0 10px;
  background: rgba(29,113,146,0.15);
  border: 1px solid var(--ol-2);
  border-left: 3px solid var(--ol-1);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
}
#tutorialHighlightIcon { font-size: 18px; flex-shrink: 0; }
#tutorialHighlight strong { color: #6dd1db; }

#tutorialNoShow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  margin-top: 10px;
}
#tutorialNoShow input { accent-color: var(--ol-1); cursor: pointer; }

#tutorialFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid var(--ol-3);
  gap: 8px;
}
.tutorialNavBtn {
  padding: 8px 18px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  border: 1px solid var(--ol-2);
  border-radius: var(--radius);
  background: var(--ol-3);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}
.tutorialNavBtn:hover:not(:disabled) { background: var(--ol-2); }
.tutorialNavBtn:disabled { opacity: 0.35; cursor: not-allowed; }

#closeTutorial {
  padding: 8px 22px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  border: none;
  border-radius: var(--radius);
  background: var(--ol-1);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}
#closeTutorial:hover { background: var(--accent-h); }


/* ── Posicionamento painel lateral ── */
#sidePanel {
  position: fixed;
  left: 16px;
  top: 96px;
  z-index: 100;
  max-height: calc(100vh - 104px);
  display: flex;
  flex-direction: column;
}
#sidePanel .menuContent {
  padding: 8px 10px 12px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  max-height: none;
  scrollbar-width: thin;
  scrollbar-color: var(--ol-2) transparent;
  padding-bottom: 16px;
}

/* ── HUD ── */
#hud {
  position: fixed;
  top: 220px;
  right: 16px;
  z-index: 1000;
  width: 380px;
  max-height: calc(90vh - 220px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: top 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Modo demo: HUD sobe para o topo (ribbon recolhido) mas segue clicável */
body.demo-mode #hud {
  top: 96px;
}
#hud .menuHeader { color: #6dd1db; cursor: pointer; display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; }
#hud .menuHeader .hudCollapseIcon { font-size: 11px; transition: transform 0.2s; }
#hud.collapsed .menuContent { display: none; }
#hud.collapsed .hudCollapseIcon { transform: rotate(-90deg); }
#hud .menuContent {
  color: var(--text-hud);
  font-size: 12px;
  line-height: 1.6;
  padding: 10px 12px;
  overflow-x: hidden;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
#hud .bomTable { table-layout: auto; }
#hud .bomTable .bomDesc { width: 1%; padding-right: 12px; }
#hud .menuContent * { color: #ffffff !important; }
#hud .menuContent .hudGroup { color: #6dd1db !important; font-weight: 700; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 6px; }
#hud .menuContent .hudItem { color: #e8f4f7 !important; padding-left: 8px; }

/* ── Tabela da lista de módulos (BOM) ── */
.bomTable {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font);
  margin-top: 4px;
}
.bomTable .bomHead th {
  position: sticky;
  top: 0;
  background: var(--ol-4) !important;
  color: #cfe8ee !important;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 5px;
  border-bottom: 1px solid var(--border);
}
.bomTable .bomGroupRow {
  color: #6dd1db !important;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 5px 3px;
}
.bomTable .bomRow td { padding: 3px 5px; vertical-align: top; }
.bomTable .bomRow:nth-child(even) td { background: rgba(255,255,255,0.03); }
#hud .bomCode {
  color: #9ec7d0 !important;
  font-size: 11px;
  font-family: var(--font);
  white-space: nowrap;
}
#hud .bomDesc { color: #e8f4f7 !important; font-size: 11px; white-space: nowrap; }
#hud .bomQty {
  color: #6dd1db !important;
  font-weight: 700;
  font-size: 11px;
  text-align: right;
  white-space: nowrap;
}
#hud .bomHead th { color: #cfe8ee !important; }
#hud .bomGroupRow { color: #6dd1db !important; }

/* ── Faixa de topo ── */
#topBar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 80px;
  background: var(--ol-4);
  border-bottom: 2px solid var(--ol-1);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  z-index: 2000;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
#appLogo {
  height: 64px;
  object-fit: contain;
}
#topBarDivider {
  width: 1px;
  height: 28px;
  background: var(--ol-2);
}
#appSubtitle {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── Botões em linha (comprimento / qty) ── */
.lengthBtn,
.qtyBtn,
.editMaterialBtn {
  display: inline-block !important;
  width: auto !important;
  margin: 2px !important;
  padding: 4px 9px !important;
  font-size: 11px !important;
}
#qtyBtnRow { display: flex; flex-wrap: wrap; gap: 2px; margin: 4px 0; }
#qtyBtnRow button { display: inline-block !important; width: auto !important; flex: 1; }

.lengthBtn.selected,
.qtyBtn.selected,
.editMaterialBtn.selected {
  background: var(--ol-1) !important;
  color: #fff !important;
  border-color: var(--ol-1) !important;
  font-weight: 500 !important;
}

/* ── Inputs e selects ── */
input[type="number"],
select {
  background: var(--ol-4);
  color: #fff;
  border: 1px solid var(--border-sub);
  border-radius: var(--radius);
  padding: 6px 8px;
  font-family: var(--font);
  font-size: 12px;
  width: 100%;
  box-sizing: border-box;
  margin: 3px 0 6px;
}
input[type="number"]:focus,
select:focus {
  outline: none;
  border-color: var(--ol-1);
}
select option { background: var(--ol-4); }
label {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-top: 6px;
  margin-bottom: 1px;
}

/* ── Sliders ── */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--ol-3);
  outline: none;
  border: none;
  margin: 6px 0;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--ol-1);
  cursor: pointer;
  border: 2px solid #fff;
}
input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--ol-1);
  cursor: pointer;
  border: 2px solid #fff;
}

/* ── Checkboxes de paredes ── */
.wall-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text);
  margin: 5px 0;
  cursor: pointer;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.wall-check input[type="checkbox"] {
  accent-color: var(--ol-1);
  width: 13px; height: 13px;
  cursor: pointer;
}

/* ── Modais ── */
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--ol-4);
  padding: 24px 28px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  z-index: 10000;
  font-family: var(--font);
  text-align: center;
  color: #fff;
  min-width: 280px;
}
.modal.hidden { display: none; }
.modal-msg { margin: 0 0 16px; font-size: 14px; }
.modal-actions { display: flex; gap: 12px; justify-content: center; align-items: stretch; }
.modal-btn {
  box-sizing: border-box; /* bordas (ex.: Cancelar) não desalinham o tamanho do botão */
  padding: 8px 18px;
  border: 1.5px solid transparent; /* reserva o espaço da borda mesmo quando invisível */
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.modal-btn--confirm { background: var(--ol-1); color: #fff; }
.modal-btn--confirm:hover { background: var(--accent-h); }
.modal-btn--cancel  { background: var(--danger); color: #fff; }
.modal-btn--cancel:hover  { background: var(--danger-h); }
.modal-btn--ok      { background: var(--ol-1); color: #fff; }
.modal-btn--ok:hover      { background: var(--accent-h); }

/* ── Painel de edição ── */
#editModuleMenu {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1500;
}
#editModuleMenu .menuContent > div:not([id]):not(.hidden) {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ol-1);
  margin: 8px 0 4px;
}
#editModuleMenu button#editCurveCCW,
#editModuleMenu button#editCurveCW {
  display: inline-block !important;
  width: 48% !important;
  margin: 3px 1% !important;
  text-align: center;
}

/* ── Cubo de vistas ── */
#viewCube {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 100px;
  height: 100px;
  z-index: 1000;
  cursor: pointer;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-sub); border-radius: 3px; }

/* ── Seta de orientação ── */
#rotationArrow {
  display: block;
  margin: 4px auto;
  border-radius: 50%;
  background: rgba(29,113,146,0.12);
}

/* ── ViewCube ── */
#viewCube {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 120px;
  height: 130px;
  z-index: 1000;
  cursor: pointer;
}

/* ── Cotas overlay ── */
#cotasCanvas {
  position: fixed;
  top: 56px; left: 0;
  width: 100%; height: calc(100% - 56px);
  pointer-events: none;
  z-index: 500;
}

/* ── Seletor de cores ── */
.colorPicker {
  display: grid;
  grid-template-columns: repeat(5, 18px);
  gap: 4px;
  margin: 4px 0 8px;
  justify-content: start;
}
/* Picker do menu principal em uma única linha de 10, preenchendo a largura */
#globalColorPicker,
#junctionColorPicker {
  grid-template-columns: repeat(10, 1fr);
  gap: 3px;
}
#globalColorPicker .colorSwatch,
#junctionColorPicker .colorSwatch {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
}
.colorSwatch {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.15s, border-color 0.15s;
  box-sizing: border-box;
}
.colorSwatch:hover { transform: scale(1.2); border-color: #6dd1db; }
.colorSwatch.selected {
  border-color: #6dd1db !important;
  transform: scale(1.15);
  box-shadow: 0 0 0 1px #1D7192;
}

/* ── Botões do painel de edição ── */
#editApply, #editRemove, #editCancel {
  display: block !important;
  width: calc(100% - 16px) !important;
  margin: 5px 8px !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: var(--radius) !important;
  cursor: pointer !important;
  text-align: center !important;
}
#editApply {
  background: var(--ol-1) !important;
  color: #fff !important;
  border: none !important;
}
#editRemove {
  background: var(--danger) !important;
  color: #fff !important;
  border: none !important;
}
#editCancel {
  background: transparent !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border-sub) !important;
}

/* ── Seletor de idioma no tutorial ── */
#langSelector {
  display: flex;
  gap: 4px;
  flex: 1;
  justify-content: center;
}
.langBtn {
  background: var(--ol-3);
  border: 1px solid var(--ol-2);
  color: var(--text-muted);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11px;
  cursor: pointer;
  font-family: var(--font);
  transition: background 0.2s;
}
.langBtn:hover { background: var(--ol-2); color: #fff; }
.langBtn.active {
  background: var(--ol-1);
  color: #fff;
  border-color: var(--ol-1);
}

/* ── Seletor de idioma na barra de topo ── */
#topBarLang {
  margin-left: auto;
  display: flex;
  gap: 4px;
}
#topBarLang .langBtn {
  background: var(--ol-3);
  border: 1px solid var(--ol-2);
  color: var(--text-muted);
  border-radius: 4px;
  padding: 3px 7px;
  font-size: 10px;
  cursor: pointer;
  font-family: var(--font);
  transition: background 0.2s;
}
#topBarLang .langBtn:hover { background: var(--ol-2); color: #fff; }
#topBarLang .langBtn.active {
  background: var(--ol-1);
  color: #fff;
  border-color: var(--ol-1);
}

/* ── Painel flutuante arrastável (composição aleatória) ── */
.floatingPanel {
  position: fixed;
  top: 130px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1200;
  width: 230px;
  background: var(--surface);
  border: 1px solid var(--border-sub);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  box-sizing: border-box;
  overflow: hidden;
}
.floatingPanel.hidden { display: none; }
.floatingPanelHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--ol-4);
  padding: 10px 14px;
  cursor: move;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  border-bottom: 1px solid var(--border);
  user-select: none;
}
.floatingPanelClose {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius);
  width: auto;
  margin: 0;
  line-height: 1;
}
.floatingPanelClose:hover { background: rgba(255,255,255,0.18); }
.floatingPanelBody { padding: 10px 10px 12px; }
.floatingPanelBody label {
  display: block;
  margin: 8px 0 3px;
  font-size: 11px;
  color: var(--text-muted);
}
.floatingPanelBody input,
.floatingPanelBody select {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 9px;
  border-radius: var(--radius);
  border: 1px solid var(--border-sub);
  background: var(--surface2);
  color: var(--text);
  font-family: var(--font);
  font-size: 12px;
}
.floatingPanelActions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.floatingPanelActions button {
  flex: 1;
  margin: 0;
  padding: 7px 10px;
  border: 1px solid var(--border-sub);
  border-radius: var(--radius);
  background: var(--surface2);
  color: var(--text);
  font-family: var(--font);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.floatingPanelActions button:hover {
  background: var(--ol-2);
  border-color: var(--ol-1);
  color: #fff;
}
#generateRandom {
  background: var(--ol-1) !important;
  border-color: var(--ol-1) !important;
  color: #fff !important;
  font-weight: 600;
}
#generateRandom:hover { background: var(--ol-2) !important; }

/* ── Botões de facho 30/60 (Darklight) ── */
#beamBtnRow { display: flex; gap: 6px; margin-bottom: 6px; }
#beamBtnRow .beamBtn {
  flex: 1;
  display: inline-block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 7px 0 !important;
  text-align: center !important;
}
#beamBtnRow .beamBtn.selected {
  background: var(--ol-1) !important;
  border-color: var(--ol-1) !important;
  color: #fff !important;
  font-weight: 600;
}

/* ── Controle de altura do cabo (− input +) ── */
#cableHeightControl {
  display: flex;
  align-items: stretch;
  gap: 5px;
  margin: 4px 0 8px;
}
#cableHeightControl input[type="number"] {
  flex: 1;
  margin: 0;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
#cableHeightControl input[type="number"]::-webkit-inner-spin-button,
#cableHeightControl input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#cableHeightMinus, #cableHeightPlus {
  width: 34px;
  flex: 0 0 34px;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--border-sub);
  border-radius: var(--radius);
  background: var(--surface2);
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  line-height: 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center !important;
}
#cableHeightMinus:hover, #cableHeightPlus:hover {
  background: var(--ol-2);
  border-color: var(--ol-1);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════
   RIBBON SUPERIOR COMPLETO (estilo SolidWorks) — versão ribbon
   ═══════════════════════════════════════════════════════════ */
#fullscreenBtn {
  margin-left: 8px;
  padding: 6px 12px;
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border-sub);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s;
}
#fullscreenBtn:hover { background: var(--ol-2); border-color: var(--ol-1); color: #fff; }

/* Esconde o painel lateral nesta versão (tudo migrou para o ribbon) */
#sidePanel { display: none !important; }

#ribbon {
  position: fixed;
  top: 112px;
  left: 0; right: 0;
  z-index: 1500;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  background: linear-gradient(180deg, #f4f7f9 0%, #e3eaee 100%);
  border-bottom: 1px solid #c4d2d9;
  box-shadow: 0 2px 10px rgba(0,0,0,0.14);
  padding: 5px 8px 2px;
  overflow: hidden;            /* nunca rola — sempre largura total */
  font-family: var(--font);
  flex-wrap: nowrap;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}
/* Modo demo: recolhe o ribbon para cima (animado) para tela limpa */
body.demo-mode #ribbon {
  transform: translateY(-130%);
  opacity: 0;
  pointer-events: none;
}
#ribbonTabs { transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s; }
body.demo-mode #ribbonTabs {
  transform: translateY(-300%);
  opacity: 0;
  pointer-events: none;
}
.ribbonGroup {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 6px;
  min-width: 0;                /* permite encolher para caber */
  flex: 0 1 auto;
}
.ribbonBtns { display: flex; gap: 2px; flex: 1; align-items: stretch; }
.ribbonGroupLabel {
  font-size: 9.5px;
  color: #6b7c85;
  text-align: center;
  padding-top: 3px;
  margin-top: 2px;
  border-top: 1px solid #d4dfe4;
  width: 100%;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ribbonBtn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  min-width: 48px;
  max-width: 76px;
  padding: 5px 5px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #2a3b44;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.1;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, border-color 0.15s;
}
.ribbonBtn--big { min-width: 56px; }
.ribbonBtn span:last-child {
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
}
.ribbonBtn:hover { background: #d8e8f0; border-color: #9fc2d4; }
.ribbonBtn:active, .ribbonBtn.active { background: #c2dcea; border-color: #7fb0cb; }
.ribbonBtn--big[data-flyout]::after {
  content: "\25be";
  font-size: 9px;
  color: #6b7c85;
  margin-top: 1px;
}
.ribbonIco { font-size: 19px; line-height: 1; color: var(--ol-1); display: inline-flex; align-items: center; justify-content: center; }
.ribbonIco svg, .ribbonIco i { width: 20px; height: 20px; stroke-width: 2; }
.ribbonBtn--big .ribbonIco svg { width: 22px; height: 22px; }
/* ícones lucide nos botões do rodapé da lista */
#hudFooter button svg { width: 15px; height: 15px; vertical-align: -2px; stroke-width: 2; }
.ribbonSep { width: 1px; background: #cdd9df; margin: 2px 3px 17px; flex: 0 0 auto; }

/* ── Flyouts (estilo Word: mesma tonalidade clara do ribbon) ── */
#ribbonFlyouts { position: fixed; top: 190px; left: 0; right: 0; z-index: 1600; pointer-events: none; }
#ribbonFlyouts .flyout { pointer-events: auto; }
.flyout {
  position: absolute;
  top: 0;
  background: #f4f7f9;
  border: 1px solid #c4d2d9;
  border-top: none;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 6px 18px rgba(20,40,50,0.20);
  padding: 8px;
  min-width: 230px;
  max-width: 320px;
  font-family: var(--font);
  color: #2a3b44;
}
.flyout.hidden { display: none; }
.flyout label { display: block; margin: 8px 0 3px; font-size: 11.5px; color: #5a6b73; }
.flyout .sectionLabel { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6b7c85; margin: 8px 0 4px; }
.flyout button {
  display: flex; align-items: center; gap: 8px;
  width: 100%; margin: 1px 0; padding: 8px 10px;
  border: 1px solid transparent; border-radius: 4px;
  background: transparent; color: #2a3b44; font-family: var(--font);
  font-size: 12px; cursor: pointer; text-align: left;
  transition: background 0.15s, border-color 0.15s;
}
.flyout button:hover { background: #d8e8f0; border-color: #9fc2d4; color: #1a2b33; }
.flyout button:active, .flyout button.selected { background: #c2dcea; border-color: #7fb0cb; }
.flyout input, .flyout select {
  width: 100%; box-sizing: border-box; padding: 7px 9px; border-radius: 4px;
  border: 1px solid #b9cdd5; background: #ffffff; color: #2a3b44;
  font-family: var(--font); font-size: 12px;
}
.flyout .flyoutTitle {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ol-1); margin: 2px 0 8px; padding-bottom: 6px; border-bottom: 1px solid #cdd9df;
}

/* HUD e painéis flutuantes descem bem abaixo do ribbon */
.floatingPanel { top: 200px; left: 20px; transform: none; }

/* ── Grade de vistas no flyout ── */
#flyViews { min-width: 210px; }
.viewGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.viewBtn {
  display: block; width: 100%; margin: 0; padding: 8px 8px;
  border: 1px solid transparent; border-radius: 4px;
  background: transparent; color: #2a3b44; font-family: var(--font);
  font-size: 11.5px; cursor: pointer; text-align: left;
  transition: background 0.15s, border-color 0.15s;
}
.viewBtn:hover { background: #d8e8f0; border-color: #9fc2d4; }

/* ── Ícone de exportar CSV no cabeçalho do HUD ── */
.hudHeaderActions { display: flex; align-items: center; gap: 8px; }
.hudIconBtn {
  background: transparent; border: none; color: #6dd1db;
  font-size: 15px; cursor: pointer; padding: 0 2px; line-height: 1;
  width: auto; margin: 0; transition: color 0.2s;
}
.hudIconBtn:hover { color: #fff; }

/* Garante fonte Omega em todos os selects/inputs do ribbon e flyouts */
#ribbon, #ribbonFlyouts, .flyout, .flyout * { font-family: var(--font); }

/* ═══ Composição aleatória — estética clara do ribbon (versão ribbon) ═══ */
.floatingPanel {
  background: #f4f7f9 !important;
  border: 1px solid #c4d2d9 !important;
  color: #2a3b44 !important;
  box-shadow: 0 8px 24px rgba(20,40,50,0.25) !important;
}
.floatingPanelHeader {
  background: linear-gradient(180deg, #f4f7f9 0%, #e3eaee 100%) !important;
  color: #2a3b44 !important;
  border-bottom: 1px solid #cdd9df !important;
}
.floatingPanelClose { color: #5a6b73 !important; border: none !important; background: transparent !important; }
.floatingPanelClose:hover { background: #d8e8f0 !important; color: #1a2b33 !important; }
.floatingPanelBody label { color: #5a6b73 !important; }
.floatingPanelBody input,
.floatingPanelBody select {
  background: #ffffff !important;
  border: 1px solid #b9cdd5 !important;
  color: #2a3b44 !important;
}
.floatingPanelActions button {
  background: transparent !important;
  border: 1px solid #b9cdd5 !important;
  color: #2a3b44 !important;
}
.floatingPanelActions button:hover {
  background: #d8e8f0 !important;
  border-color: #9fc2d4 !important;
  color: #1a2b33 !important;
}
#generateRandom {
  background: var(--ol-1) !important;
  border-color: var(--ol-1) !important;
  color: #fff !important;
}
#generateRandom:hover { background: var(--ol-2) !important; }

/* ═══ Refinos finais dos flyouts (estética Word, uniforme) ═══ */
/* Selects e inputs do flyout sempre claros (inclui o driver) */
.flyout select,
.flyout input[type="number"],
.flyout input[type="text"] {
  background: #ffffff !important;
  color: #2a3b44 !important;
  border: 1px solid #b9cdd5 !important;
  margin: 3px 0 8px !important;
}
.flyout select option { background: #ffffff !important; color: #2a3b44 !important; }
.flyout select:focus,
.flyout input:focus { border-color: var(--ol-1) !important; }

/* TODOS os botões dos flyouts: borda fina azul petróleo + fundo do menu,
   hover ligeiramente mais escuro. Uniformiza qualquer botão herdado. */
.flyout button,
.flyout .lengthBtn,
.flyout .qtyBtn,
.flyout .beamBtn,
.flyout .stepBtn,
.viewBtn {
  background: #f4f7f9 !important;
  color: #2a3b44 !important;
  border: 1px solid var(--ol-1) !important;
  border-radius: 4px !important;
  font-family: var(--font) !important;
  font-size: 12px !important;
  cursor: pointer;
  transition: background 0.15s !important;
}
.flyout button:hover,
.flyout .lengthBtn:hover,
.flyout .qtyBtn:hover,
.flyout .beamBtn:hover,
.flyout .stepBtn:hover,
.viewBtn:hover {
  background: #dce8ee !important;   /* ligeiramente mais escuro */
  color: #1a2b33 !important;
}
.flyout button.selected,
.flyout .lengthBtn.selected,
.flyout .qtyBtn.selected,
.flyout .beamBtn.selected {
  background: #c2dcea !important;
  border-color: var(--ol-1) !important;
  color: #143b44 !important;
  font-weight: 600;
}

/* Botões relacionados na mesma linha (comprimentos, quantidades, facho) */
.flyout .lengthRow,
.flyout #qtyBtnRow,
.flyout #beamBtnRow,
.flyout .btnRow {
  display: flex !important;
  flex-wrap: wrap;
  gap: 5px !important;
  margin: 4px 0 8px;
}
.flyout .lengthRow button,
.flyout #qtyBtnRow button,
.flyout #beamBtnRow button,
.flyout .btnRow button {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 52px;
  margin: 0 !important;
  display: inline-flex !important;
  justify-content: center;
}

/* ═══════════ AJUSTES FINOS (rodada ribbon) ═══════════ */

/* Slider claro nos flyouts: trilho cinza-claro, preenchido petróleo via thumb */
.flyout input[type="range"] {
  height: 5px;
}
.flyout input[type="range"]::-webkit-slider-thumb {
  background: var(--ol-1) !important;
  border: 2px solid #fff !important;
}
.flyout input[type="range"]::-moz-range-thumb {
  background: var(--ol-1) !important;
  border: 2px solid #fff !important;
}

/* flyCable: botões − + com a MESMA altura da caixa de texto, lado a lado */
#flyCable #cableHeightControl {
  display: flex !important;
  align-items: stretch !important;
  gap: 6px;
  margin: 4px 0 8px;
}
#flyCable #cableHeightControl input[type="number"] {
  flex: 1; height: auto; margin: 0 !important;
}
#flyCable #cableHeightMinus,
#flyCable #cableHeightPlus {
  flex: 0 0 38px;
  align-self: stretch;
  height: auto !important;
  background: #f4f7f9 !important;
  border: 1px solid var(--ol-1) !important;
  color: #2a3b44 !important;
  display: flex !important; align-items: center; justify-content: center;
}
#flyCable #cableHeightMinus:hover,
#flyCable #cableHeightPlus:hover { background: #dce8ee !important; }

/* ── Menus flutuantes secundários (composição aleatória, editar) no padrão claro ── */
.floatingPanel,
#editModuleMenu, #randomPanel {
  background: #f4f7f9 !important;
  border: 1px solid #c4d2d9 !important;
  color: #2a3b44 !important;
}
#editModuleMenu .menuHeader, #randomPanel .menuHeader,
.floatingPanelHeader {
  background: linear-gradient(180deg, #f4f7f9 0%, #e3eaee 100%) !important;
  color: #14424c !important;
  border-bottom: 1px solid #cdd9df !important;
}
#editModuleMenu .menuContent, #editModuleMenu .menuContent * { color: #2a3b44 !important; }
#editModuleMenu label, #randomPanel label { color: #5a6b73 !important; }
#editModuleMenu button, #randomPanel button, .floatingPanel button {
  background: #f4f7f9 !important; border: 1px solid var(--ol-1) !important;
  color: #2a3b44 !important;
}
#editModuleMenu button:hover, #randomPanel button:hover, .floatingPanel button:hover {
  background: #dce8ee !important;
}
/* botão selecionado no menu editar: azul petróleo, peso de texto normal */
#editModuleMenu .editMaterialBtn.selected,
#editModuleMenu .lengthBtn.selected {
  background: var(--ol-1) !important;
  color: #fff !important;
  border-color: var(--ol-1) !important;
  font-weight: 500 !important;
}
/* cor selecionada: só a borda mais forte (não sobrepõe a cor real) */
#editModuleMenu .colorSwatch.selected,
#editCurveColorPicker .colorSwatch.selected,
#editColorPicker .colorSwatch.selected {
  border: 3px solid var(--ol-1) !important;
  box-shadow: 0 0 0 2px #fff inset !important;
  transform: scale(1.12);
}
#editModuleMenu .apply-btn {
  background: var(--ol-1) !important; color: #fff !important; border-color: var(--ol-1) !important;
}
#editModuleMenu .apply-btn:hover { background: var(--ol-2) !important; }
/* Selects e inputs claros no edit e no aleatório (corrige o verde petróleo) */
#editModuleMenu select, #editModuleMenu input[type="number"],
#randomPanel select, #randomPanel input[type="number"],
.floatingPanelBody select, .floatingPanelBody input[type="number"] {
  background: #ffffff !important; color: #2a3b44 !important; border: 1px solid #b9cdd5 !important;
}
#editModuleMenu select option, #randomPanel select option,
.floatingPanelBody select option { background: #ffffff !important; color: #2a3b44 !important; }


/* ── BOM (HUD) no padrão claro do ribbon ── */
#hud {
  background: #f4f7f9 !important;
  border: 1px solid #c4d2d9 !important;
  color: #2a3b44 !important;
}
#hud .menuHeader {
  background: linear-gradient(180deg, #f4f7f9 0%, #e3eaee 100%) !important;
  color: #14424c !important;
  border-bottom: 1px solid #cdd9df !important;
  padding: 10px 12px;
}
#hud .menuContent { color: #2a3b44 !important; }
#hud .menuContent * { color: #2a3b44 !important; }
#hud .bomHead th { background: #e3eaee !important; color: #14424c !important; }
#hud .bomGroupRow { color: var(--ol-1) !important; }
#hud .bomCode { color: #4a6670 !important; }
#hud .bomDesc { color: #2a3b44 !important; }
#hud .bomQty { color: var(--ol-1) !important; }
#hud .hudIconBtn { color: var(--ol-1) !important; }
#hud .hudIconBtn:hover { color: #14424c !important; }
#hud .hudCollapseIcon { color: #5a6b73 !important; }

/* Grade de vistas: 2 colunas, ordem definida no HTML */
#flyViews { min-width: 230px; }

/* ── Rodapé do HUD com botão Exportar BOM ── */
#hudFooter {
  flex: 0 0 auto;
  padding: 8px 12px 10px;
  border-top: 1px solid #cdd9df;
}
#hud.collapsed #hudFooter { display: none; }
#hudFooter button {
  width: 100%;
  padding: 8px 10px;
  background: #f4f7f9;
  border: 1px solid var(--ol-1);
  border-radius: 4px;
  color: var(--ol-1);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
#hudFooter button:hover { background: #dce8ee; }

/* Cursor de mover (cruz 4 setas) ao arrastar a BOM */
#hud .menuHeader { cursor: move !important; }
.floatingPanelHeader { cursor: move !important; }

/* ── Modais (projetor finalizar, confirmações) no padrão claro ── */
.modal {
  background: #f4f7f9 !important;
  border: 1px solid #c4d2d9 !important;
  color: #2a3b44 !important;
  box-shadow: 0 12px 36px rgba(20,40,50,0.30) !important;
}
.modal-msg { color: #2a3b44 !important; }
.modal-btn--confirm { background: var(--ol-1) !important; color: #fff !important; }
.modal-btn--confirm:hover { background: var(--ol-2) !important; }
.modal-btn--cancel { background: #cc4433 !important; color: #fff !important; }
.modal-btn--cancel:hover { background: #b33b2c !important; }
.modal-btn--ok { background: var(--ol-1) !important; color: #fff !important; }
/* "Other end" / botão neutro */
#projectorOtherEnd { background: var(--ol-2) !important; color: #fff !important; }
#projectorOtherEnd:hover { background: var(--ol-1) !important; }

/* ── Indicador de posição (modo posicionar) ── */
#positionIndicator {
  position: fixed;
  top: 168px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1550;
  display: flex;
  align-items: center;
  gap: 16px;
  background: #f4f7f9;
  border: 1px solid var(--ol-1);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(20,40,50,0.20);
  padding: 8px 16px;
  font-family: var(--font);
  font-size: 13px;
  color: #2a3b44;
}
#positionIndicator.hidden { display: none; }
#positionIndicator .posLabel { font-weight: 600; color: var(--ol-1); }
#positionIndicator .posCoords b { color: #14424c; font-variant-numeric: tabular-nums; }
#positionIndicator .posOrigin { font-size: 11px; color: #6b7c85; }

/* ── OK button e linha do indicador de posição ── */
#positionIndicator { flex-direction: column; align-items: stretch; gap: 6px; }
#positionIndicator .posRow { display: flex; align-items: center; gap: 14px; justify-content: space-between; }
#positionOk {
  padding: 5px 18px;
  background: var(--ol-1);
  border: 1px solid var(--ol-1);
  border-radius: 4px;
  color: #fff;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
#positionOk:hover { background: var(--ol-2); }

/* ── HUD de coordenadas que segue o cursor ── */
#dragCoordHud {
  position: fixed;
  z-index: 1600;
  pointer-events: none;
  background: rgba(15,54,62,0.92);
  color: #fff;
  font-family: var(--font);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  padding: 4px 9px;
  border-radius: 5px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
  white-space: nowrap;
}
#dragCoordHud.hidden { display: none; }
#dragCoordHud b { color: #6dd1db; }

/* ═══════════════════════════════════════════════════════════
   MODO ESCURO — alterna ribbon, menus, flyouts, BOM, modais e cena
   Ativado por body.dark (toggle sol/lua na barra superior)
   ═══════════════════════════════════════════════════════════ */
:root {
  --rib-bg-1: #f4f7f9;   /* fundo claro do ribbon (degradê topo) */
  --rib-bg-2: #e3eaee;   /* fundo claro do ribbon (degradê base) */
  --rib-border: #c4d2d9;
  --rib-text: #2a3b44;
  --rib-text-strong: #14424c;
  --rib-text-muted: #6b7c85;
  --rib-hover: #d8e8f0;
  --rib-hover-border: #9fc2d4;
  --rib-active: #c2dcea;
  --rib-input-bg: #ffffff;
  --rib-input-border: #b9cdd5;
  --rib-sep: #cdd9df;
}
body.dark {
  --rib-bg-1: #14333b;
  --rib-bg-2: #0f2a31;
  --rib-border: #1d5562;
  --rib-text: #d6e8ed;
  --rib-text-strong: #ffffff;
  --rib-text-muted: #7fa6b0;
  --rib-hover: #1c4a55;
  --rib-hover-border: #2a7184;
  --rib-active: #226072;
  --rib-input-bg: #0c2329;
  --rib-input-border: #1d5562;
  --rib-sep: #1a4651;
}

/* Aplica as variáveis nos elementos do ribbon (claro e escuro usam as mesmas regras) */
#ribbon { background: linear-gradient(180deg, var(--rib-bg-1) 0%, var(--rib-bg-2) 100%) !important; border-bottom-color: var(--rib-border) !important; }
.ribbonBtn { color: var(--rib-text) !important; }
.ribbonBtn:hover { background: var(--rib-hover) !important; border-color: var(--rib-hover-border) !important; }
.ribbonBtn:active, .ribbonBtn.active { background: var(--rib-active) !important; border-color: var(--rib-hover-border) !important; }
.ribbonGroupLabel { color: var(--rib-text-muted) !important; border-top-color: var(--rib-sep) !important; }
.ribbonSep { background: var(--rib-sep) !important; }

.flyout { background: var(--rib-bg-1) !important; border-color: var(--rib-border) !important; color: var(--rib-text) !important; }
.flyout label, .flyout .sectionLabel { color: var(--rib-text-muted) !important; }
.flyout button, .viewBtn, .flyout .lengthBtn, .flyout .qtyBtn, .flyout .beamBtn, .projBeamBtn {
  background: var(--rib-bg-1) !important; color: var(--rib-text) !important; border-color: var(--ol-1) !important;
}
.flyout button:hover, .viewBtn:hover, .flyout .lengthBtn:hover, .flyout .qtyBtn:hover, .flyout .beamBtn:hover, .projBeamBtn:hover {
  background: var(--rib-hover) !important; color: var(--rib-text-strong) !important;
}
.flyout select, .flyout input[type="number"], .flyout input[type="text"] {
  background: var(--rib-input-bg) !important; color: var(--rib-text) !important; border-color: var(--rib-input-border) !important;
}
.flyout select option { background: var(--rib-input-bg) !important; color: var(--rib-text) !important; }

/* BOM */
#hud { background: var(--rib-bg-1) !important; border-color: var(--rib-border) !important; color: var(--rib-text) !important; }
#hud .menuHeader { background: linear-gradient(180deg, var(--rib-bg-1) 0%, var(--rib-bg-2) 100%) !important; color: var(--rib-text-strong) !important; border-bottom-color: var(--rib-sep) !important; }
#hud .menuContent, #hud .menuContent * { color: var(--rib-text) !important; }
#hud .bomHead th { background: var(--rib-bg-2) !important; color: var(--rib-text-strong) !important; }
#hud .bomGroupRow, #hud .bomQty { color: var(--ol-1) !important; }
#hud .bomCode { color: var(--rib-text-muted) !important; }
body.dark #hud .bomGroupRow, body.dark #hud .bomQty { color: #4db3cc !important; }
#hudFooter { border-top-color: var(--rib-sep) !important; }
#hudFooter button { background: var(--rib-bg-1) !important; color: var(--ol-1) !important; border-color: var(--ol-1) !important; }
#hudFooter button:hover { background: var(--rib-hover) !important; }
body.dark #hudFooter button { color: #4db3cc !important; }

/* Painéis flutuantes (aleatório, editar) e modais */
.floatingPanel, #editModuleMenu, #randomPanel {
  background: var(--rib-bg-1) !important; border-color: var(--rib-border) !important; color: var(--rib-text) !important;
}
.floatingPanelHeader, #editModuleMenu .menuHeader, #randomPanel .menuHeader {
  background: linear-gradient(180deg, var(--rib-bg-1) 0%, var(--rib-bg-2) 100%) !important;
  color: var(--rib-text-strong) !important; border-bottom-color: var(--rib-sep) !important;
}
#editModuleMenu .menuContent, #editModuleMenu .menuContent *, #randomPanel * { color: var(--rib-text) !important; }
.floatingPanelBody label, #editModuleMenu label, #randomPanel label { color: var(--rib-text-muted) !important; }
.floatingPanel button, #editModuleMenu button, #randomPanel button {
  background: var(--rib-bg-1) !important; color: var(--rib-text) !important; border-color: var(--ol-1) !important;
}
.floatingPanel button:hover, #editModuleMenu button:hover, #randomPanel button:hover { background: var(--rib-hover) !important; }
.floatingPanelBody select, .floatingPanelBody input[type="number"],
#editModuleMenu select, #editModuleMenu input[type="number"],
#randomPanel select, #randomPanel input[type="number"] {
  background: var(--rib-input-bg) !important; color: var(--rib-text) !important; border-color: var(--rib-input-border) !important;
}
.floatingPanelClose { color: var(--rib-text-muted) !important; }
.modal { background: var(--rib-bg-1) !important; border-color: var(--rib-border) !important; color: var(--rib-text) !important; }
.modal-msg { color: var(--rib-text) !important; }

/* Botão de tema na topbar */
/* ── Topbar: altura uniforme dos controles (idioma, tema, tela cheia) ── */
#topBarLang { align-items: center; }
#topBarLang .langBtn {
  height: 32px; display: inline-flex; align-items: center; box-sizing: border-box;
}
#fullscreenBtn { height: 32px; display: inline-flex; align-items: center; box-sizing: border-box; margin-left: 8px; }

/* ── Toggle sol/lua (modo claro/escuro) ── */
#themeToggleBtn.themeSwitch {
  margin-left: 8px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.themeSwitchTrack {
  position: relative;
  width: 62px;
  height: 30px;
  border-radius: 15px;
  background: var(--ol-4);
  border: 1px solid var(--ol-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 7px;
  box-sizing: border-box;
  transition: background 0.25s;
}
.themeSwitchIcon { display: inline-flex; align-items: center; justify-content: center; z-index: 1; }
.themeSwitchIcon svg { width: 15px; height: 15px; }
.themeSun { color: #f5c542; }
.themeMoon { color: #9fb4c0; }
.themeSwitchThumb {
  position: absolute;
  top: 50%;
  left: 3px;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  transition: left 0.25s;
  z-index: 0;
}
#themeToggleBtn.is-dark .themeSwitchThumb { left: 35px; }
#themeToggleBtn.is-dark .themeSwitchTrack { background: var(--ol-3); }

/* ═══════════ MODO VISUALIZAÇÃO (aberto por link/QR) ═══════════ */
/* Esconde o ribbon e a topbar de edição; mostra a barra de visualização */
body.viewer-mode #ribbonTabs,
body.viewer-mode #ribbon,
body.viewer-mode #ribbonFlyouts,
body.viewer-mode #topBar { display: none !important; }
body.viewer-mode #hud { top: 72px !important; }

#viewerBar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 60px;
  z-index: 1700;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  background: var(--ol-4);
  border-bottom: 2px solid var(--ol-1);
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
  font-family: var(--font);
}
#viewerBar.hidden { display: none; }
#viewerLogo { height: 40px; object-fit: contain; }
#viewerBar .viewerTitle {
  font-size: 12px; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted);
}
#viewerBar .viewerSpacer { flex: 1; }
#viewerBar button {
  background: var(--ol-3);
  color: #fff;
  border: 1px solid var(--ol-2);
  border-radius: 6px;
  padding: 8px 13px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}
#viewerBar button:hover { background: var(--ol-2); }
#viewerEdit { background: var(--ol-1) !important; border-color: var(--ol-1) !important; }
#viewerEdit:hover { background: var(--ol-2) !important; }
@media (max-width: 640px) {
  #viewerBar { height: 52px; gap: 8px; padding: 0 10px; }
  #viewerLogo { height: 32px; }
  #viewerBar .viewerTitle { display: none; }
  #viewerBar button { padding: 7px 9px; font-size: 11px; }
}

/* ── Modal de compartilhamento (link + QR) ── */
#shareModal { text-align: center; min-width: 280px; }
#shareModal .shareTitle {
  font-size: 15px; font-weight: 700; color: var(--ol-1);
  margin-bottom: 4px;
}
body.dark #shareModal .shareTitle { color: #4db3cc; }
#shareModal .shareSub {
  font-size: 12px; color: var(--rib-text-muted); margin-bottom: 14px; line-height: 1.4;
}
#qrBox {
  display: flex; justify-content: center;
  padding: 10px; background: #fff; border-radius: 8px;
  width: 200px; height: 200px; margin: 0 auto 14px;
}
#qrBox img, #qrBox canvas { display: block; }
.shareLinkRow { display: flex; gap: 6px; margin-bottom: 12px; }
#shareLinkInput {
  flex: 1; padding: 8px 10px; font-size: 12px;
  border: 1px solid var(--rib-input-border); border-radius: 5px;
  background: var(--rib-input-bg); color: var(--rib-text);
  font-family: var(--font);
}
#copyLinkBtn {
  padding: 8px 14px; background: var(--ol-1); color: #fff;
  border: none; border-radius: 5px; cursor: pointer; font-family: var(--font);
  font-size: 12px; font-weight: 600;
}
#copyLinkBtn:hover { background: var(--ol-2); }

/* ── Modo auto-construção (vídeo) ── */
#autoBuildBar {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1650;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(15,54,62,0.92);
  backdrop-filter: blur(6px);
  border: 1px solid var(--ol-1);
  border-radius: 10px;
  padding: 10px 18px;
  color: #fff;
  font-family: var(--font);
  font-size: 13px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
#autoBuildBar.hidden { display: none; }
#autoBuildBar .abInfinity {
  font-size: 20px; font-weight: 700; color: #6dd1db;
  animation: abInfPulse 1.6s ease-in-out infinite;
}
@keyframes abInfPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
#autoBuildStop {
  background: var(--ol-1); color: #fff; border: none; border-radius: 5px;
  padding: 5px 12px; font-family: var(--font); font-size: 12px; font-weight: 600; cursor: pointer;
}
#autoBuildStop:hover { background: var(--ol-2); }
.autoBuildBtn {
  width: 100%; margin-top: 6px; padding: 7px 10px;
  background: var(--ol-1) !important; color: #fff !important;
  border: 1px solid var(--ol-1) !important; border-radius: var(--radius);
  font-family: var(--font); font-size: 12px; font-weight: 600; cursor: pointer;
}
.autoBuildBtn:hover { background: var(--ol-2) !important; }

/* Botão loop (vitrine) */
.autoBuildBtn--loop {
  background: var(--ol-3) !important;
  border-color: var(--ol-2) !important;
  margin-top: 6px;
}
.autoBuildBtn--loop:hover { background: var(--ol-2) !important; }



/* ── Plataforma de desafio (game) ── */
#challengeBar {
  position: fixed;
  top: 92px;
  left: 18px;
  z-index: 1650;
  width: 250px;
  background: rgba(15,54,62,0.96);
  backdrop-filter: blur(6px);
  border: 1px solid var(--ol-1);
  border-radius: 12px;
  color: #fff;
  font-family: var(--font);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  overflow: hidden;
}
#challengeBar.hidden { display: none; }
#challengeBar .chHeader {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(180deg, var(--ol-3), var(--ol-4));
  border-bottom: 1px solid var(--ol-2);
}
#challengeBar .chTrophy { font-size: 18px; }
#challengeBar .chLabel { flex: 1; font-size: 12px; font-weight: 600; line-height: 1.2; }
#challengeExit {
  background: transparent; border: none; color: var(--text-muted);
  font-size: 15px; cursor: pointer; padding: 2px 6px; border-radius: 4px;
}
#challengeExit:hover { background: rgba(255,255,255,0.12); color: #fff; }
#challengeBar .chBody { padding: 12px; }
.chTargetBox {
  position: relative;
  background: radial-gradient(ellipse at 50% 30%, #15414c 0%, #0c2329 75%);
  border: 1px solid var(--ol-3);
  border-radius: 8px;
  margin-bottom: 10px;
  height: 170px;
  overflow: hidden;
}
#challengeTargetViewer {
  width: 100%; height: 100%;
  --poster-color: transparent;
  background: transparent;
}
.chTargetEmpty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--text-muted); text-align: center; padding: 12px;
}
.chProgress {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; margin-bottom: 10px;
}
.chProgress b { color: #6dd1db; font-variant-numeric: tabular-nums; font-size: 15px; }
.chCheckBtn {
  width: 100%; padding: 10px; border: none; border-radius: 7px;
  background: var(--ol-1); color: #fff; font-family: var(--font);
  font-size: 14px; font-weight: 700; cursor: pointer; transition: background 0.15s;
}
.chCheckBtn:hover { background: var(--ol-2); }
.challengeResult {
  margin-top: 10px; padding: 9px; border-radius: 7px;
  font-size: 13px; font-weight: 600; text-align: center; line-height: 1.3;
}
.challengeResult.hidden { display: none; }
.challengeResult.win { background: #14613a; color: #b6f0c8; }
.challengeResult.lose { background: #5a2420; color: #f0c0b6; }
.autoBuildBtn--challenge { background: #b8860b !important; border-color: #b8860b !important; }
.autoBuildBtn--challenge:hover { background: #9c7209 !important; }

@media (max-width: 640px) {
  #challengeBar { width: 210px; left: 8px; top: 84px; }
}

/* largura maior para a janela do alvo em 3D */
#challengeBar { width: 280px; }
.autoBuildBtn--define { background: var(--ol-3) !important; border-color: var(--ol-2) !important; margin-top: 6px; }
.autoBuildBtn--define:hover { background: var(--ol-2) !important; }

/* ── Modo jogador: esconde botões de autor ── */
body.player-mode #challengeDefineBtn,
body.player-mode [data-act="sharelink"],
body.player-mode #challengeStartBtn { display: none !important; }

/* HUD do desafio recolhível */
#challengeBar #challengeMin {
  background: transparent; border: none; color: var(--text-muted);
  font-size: 12px; cursor: pointer; padding: 2px 6px; border-radius: 4px;
}
#challengeBar #challengeMin:hover { background: rgba(255,255,255,0.12); color: #fff; }
#challengeBar.collapsed .chBody { display: none; }
#challengeBar.collapsed { width: 230px; }

/* Modal de desafio reusa shareModal — nada extra necessário */

/* Botão Iniciar do desafio */
.chStartBtn {
  width: 100%; padding: 9px; margin-bottom: 8px; border: none; border-radius: 7px;
  background: var(--ol-3); color: #fff; font-family: var(--font);
  font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.15s;
}
.chStartBtn:hover { background: var(--ol-2); }

/* ═══════════ Tela de seleção de modo (evento) ═══════════ */
#modeSelectCard {
  text-align: center; padding: 40px 32px; max-width: 720px; width: 92%;
}
#modeSelectLogo { height: 64px; margin-bottom: 14px; }
#modeSelectBrand {
  color: #fff; font-size: 30px; font-weight: 700; letter-spacing: 0.16em;
  margin-bottom: 18px;
}
#modeSelectTitle {
  color: var(--text-muted); font-size: 16px; font-weight: 400; letter-spacing: 0.04em;
  margin-bottom: 32px;
}
#modeSelectOptions {
  display: flex; gap: 22px; justify-content: center; flex-wrap: wrap;
}
.modeCard {
  flex: 1 1 260px; max-width: 300px;
  background: rgba(15,54,62,0.7);
  border: 1.5px solid var(--ol-2);
  border-radius: 16px;
  padding: 30px 24px;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
  font-family: var(--font);
}
.modeCard:hover {
  transform: translateY(-4px);
  border-color: var(--ol-1);
  background: rgba(29,113,146,0.25);
}
.modeCardIcon { font-size: 48px; margin-bottom: 14px; }
.modeCardName { color: #fff; font-size: 19px; font-weight: 700; margin-bottom: 8px; }
.modeCardDesc { color: var(--text-muted); font-size: 13px; line-height: 1.5; }
@media (max-width: 640px) {
  #modeSelectOptions { flex-direction: column; align-items: center; }
  #modeSelectTitle { font-size: 18px; }
}

/* ── Cronômetro no HUD do desafio ── */
.chTimer {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 15px; margin-bottom: 10px; color: #fff;
}
.chTimer b { color: #6dd1db; font-variant-numeric: tabular-nums; }

/* ── Modal de vitória ── */
#winModal {
  position: fixed; inset: 0; z-index: 3500;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8,24,28,0.82); backdrop-filter: blur(4px);
  font-family: var(--font);
}
#winModal.hidden { display: none; }
#winCard {
  background: linear-gradient(180deg, #14424c, #0c2329);
  border: 1.5px solid var(--ol-1);
  border-radius: 18px;
  padding: 32px 30px;
  width: 92%; max-width: 420px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
#winConfetti { font-size: 52px; margin-bottom: 6px; animation: winPop 0.5s ease; }
@keyframes winPop { 0% { transform: scale(0.3); opacity: 0; } 70% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
#winTitle { color: #fff; font-size: 30px; font-weight: 700; margin-bottom: 6px; }
#winSubtitle { color: var(--text-muted); font-size: 14px; margin-bottom: 14px; line-height: 1.4; }
#winTime {
  display: inline-block; background: rgba(29,113,146,0.25);
  border: 1px solid var(--ol-1); border-radius: 30px;
  padding: 6px 18px; font-size: 18px; color: #6dd1db; font-weight: 700;
  font-variant-numeric: tabular-nums; margin-bottom: 20px;
}
#winForm { display: flex; flex-direction: column; gap: 10px; }
#winForm input {
  padding: 11px 13px; border-radius: 8px;
  border: 1px solid var(--ol-2); background: rgba(255,255,255,0.95);
  color: #14424c; font-family: var(--font); font-size: 14px;
}
#winForm input:focus { outline: none; border-color: var(--ol-1); }
#winError {
  background: #5a2420; color: #f0c0b6; border-radius: 6px;
  padding: 8px; font-size: 12px;
}
#winError.hidden { display: none; }
#winSubmit {
  margin-top: 4px; padding: 12px; border: none; border-radius: 8px;
  background: var(--ol-1); color: #fff; font-family: var(--font);
  font-size: 15px; font-weight: 700; cursor: pointer; transition: background 0.15s;
}
#winSubmit:hover { background: var(--ol-2); }
#winThanks {
  color: #b6f0c8; font-size: 16px; font-weight: 600; padding: 16px 0;
}
#winThanks.hidden { display: none; }
#winClose {
  margin-top: 14px; background: transparent; border: none;
  color: var(--text-muted); font-family: var(--font); font-size: 13px;
  cursor: pointer; text-decoration: underline;
}
#winClose:hover { color: #fff; }

/* Logo no modal de vitória */
#winLogo { height: 40px; margin-bottom: 14px; opacity: 0.95; }

/* Botão tela cheia na seleção de modo */
#modeFullscreen {
  margin-top: 30px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--ol-2);
  border-radius: 8px;
  padding: 9px 20px;
  font-family: var(--font);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
#modeFullscreen:hover { background: var(--ol-3); color: #fff; }

/* ── Menu inserir reto: medidas em linha única + Avançar full width ── */
.flyout .lengthMenuWrap { display: block !important; }
.flyout .lengthRow--single {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 5px !important;
  margin: 4px 0 6px;
}
.flyout .lengthRow--single .lengthBtn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 9px 4px !important;
  font-size: 12px !important;
  white-space: nowrap;
  margin: 0 !important;
}
.flyout .lengthAdvanceBtn {
  display: block !important;
  width: 100% !important;
  padding: 9px 10px !important;
  font-size: 12px !important;
  margin: 0 0 4px !important;
  box-sizing: border-box;
}

/* ═══════════ Tutorial dedicado do visualizador (obra) ═══════════ */
#viewerTutorial {
  position: fixed; inset: 0; z-index: 2500;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8,24,28,0.72); backdrop-filter: blur(4px);
  font-family: var(--font);
}
#viewerTutorial.hidden { display: none; }
#viewerTutorialCard {
  background: linear-gradient(180deg, #14424c, #0c2329);
  border: 1.5px solid var(--ol-1);
  border-radius: 16px;
  padding: 28px 26px;
  width: 92%; max-width: 380px;
  text-align: center;
  box-shadow: 0 18px 50px rgba(0,0,0,0.5);
}
#viewerTutLogo { height: 38px; margin-bottom: 16px; }
#viewerTutTitle { color: #fff; font-size: 18px; font-weight: 700; margin-bottom: 18px; }
.viewerTutStep { display: none; }
.viewerTutStep.active { display: block; animation: vtFade 0.3s ease; }
@keyframes vtFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.vtIcon { font-size: 44px; margin-bottom: 10px; }
.vtStepTitle { color: #6dd1db; font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.vtStepText { color: var(--text-muted); font-size: 13px; line-height: 1.5; min-height: 60px; }
#viewerTutDots { display: flex; gap: 7px; justify-content: center; margin: 18px 0; }
.vtDot { width: 8px; height: 8px; border-radius: 50%; background: var(--ol-2); transition: background 0.2s; }
.vtDot.active { background: var(--ol-1); }
#viewerTutActions { display: flex; gap: 8px; justify-content: center; }
#viewerTutActions button {
  padding: 9px 16px; border-radius: 8px; border: 1px solid var(--ol-2);
  background: var(--ol-3); color: #fff; font-family: var(--font);
  font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s;
}
#viewerTutActions button:hover:not(:disabled) { background: var(--ol-2); }
#viewerTutActions button:disabled { opacity: 0.4; cursor: default; }
#viewerTutActions button.hidden { display: none; }
#viewerTutStart { background: var(--ol-1) !important; border-color: var(--ol-1) !important; }

/* ── Menu editar: cabeçalho com código + descrição do módulo ── */
#editModuleMenu #editModuleInfo { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #cdd9df; }
#editModuleMenu #editModuleCode {
  color: var(--ol-1) !important; font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
}
#editModuleMenu #editModuleDesc {
  color: #2a3b44 !important; font-size: 13px; margin-top: 2px;
}

/* ── Menu editar: cores em linha única ── */
#editColorPicker, #editCurveColorPicker {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  overflow: visible;
}
#editColorPicker .colorSwatch,
#editCurveColorPicker .colorSwatch {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  aspect-ratio: 1 / 1;
  height: auto;
}

/* ── HUD flutuante de hover sobre módulo ── */
#hoverModuleHud {
  position: fixed;
  z-index: 1800;
  pointer-events: none;
  background: rgba(15,54,62,0.96);
  border: 1px solid var(--ol-1);
  border-radius: 8px;
  padding: 7px 11px;
  font-family: var(--font);
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  max-width: 240px;
}
#hoverModuleHud.hidden { display: none; }
#hoverModuleHud .hmCode { color: #6dd1db; font-size: 12px; font-weight: 700; }
#hoverModuleHud .hmDesc { color: #fff; font-size: 12px; margin-top: 1px; }
#hoverModuleHud .hmLen { color: var(--text-muted); font-size: 11px; margin-top: 1px; }

/* ── Menu editar: comprimentos em grade alinhada (3 colunas) ── */
#editLengthBtns {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin: 4px 0 6px;
}
#editLengthBtns .lengthBtn {
  width: 100% !important;
  margin: 0 !important;
  padding: 7px 4px !important;
  text-align: center;
  white-space: nowrap;
}

/* ── Modal de etiquetas ── */
.labelsForm { display: flex; flex-direction: column; gap: 9px; margin: 6px 0 14px; }
.labelsForm input {
  padding: 9px 11px; border-radius: 6px; border: 1px solid var(--rib-input-border);
  background: var(--rib-input-bg); color: var(--rib-text);
  font-family: var(--font); font-size: 13px;
}
.labelsForm input:focus { outline: none; border-color: var(--ol-1); }
#hudFooter { display: flex; gap: 8px; }
#hudFooter button { flex: 1; }
#exportLabels {
  background: var(--ol-3); color: #fff; border: none; border-radius: 6px;
  padding: 8px; font-family: var(--font); font-size: 12px; cursor: pointer;
}
#exportLabels:hover { background: var(--ol-2); }

/* ── Coluna Nº (balões) na BOM ── */
.bomTable .bomNum { text-align: center; width: 34px; padding-right: 4px; }
.bomNumBadge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(240,240,240,0.9);
  border: 1.5px solid #0F363E;
  color: #0F363E; font-size: 11px; font-weight: 700;
  font-family: var(--font);
  box-sizing: border-box;
}

/* HUD mais largo quando a coluna Nº (balões) está ativa */
#hud.hud-numbered { width: 440px; }
@media (max-width: 720px) {
  #hud.hud-numbered { width: 92vw; }
}

/* HUD footer com 3 botões (BOM, Etiquetas, Gabarito) */
#hudFooter { flex-wrap: wrap; }
#hudFooter button { flex: 1 1 auto; min-width: 90px; }
#exportGabarito {
  background: var(--ol-3); color: #fff; border: none; border-radius: 6px;
  padding: 8px; font-family: var(--font); font-size: 12px; cursor: pointer;
}
#exportGabarito:hover { background: var(--ol-2); }

/* Botões de toggle marcados quando ativos (cotas, numeração, explodida, ambiente, gabarito) */
.ribbonBtn.is-active {
  background: var(--ol-1) !important;
  border-radius: 8px;
}
.ribbonBtn.is-active,
.ribbonBtn.is-active .ribbonIco,
.ribbonBtn.is-active .ribbonIco svg {
  color: #fff !important;
  stroke: #fff !important;
}

/* ═══════════ Visualizador: ícones nos botões + menu lateral mobile ═══════════ */
#viewerBar button i { display: inline-flex; align-items: center; }
#viewerBar button svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 5px; stroke-width: 2; }
#viewerTheme svg { margin-right: 0; }
#viewerBar button { display: inline-flex; align-items: center; }

/* Botão hambúrguer do visualizador — oculto no desktop */
#viewerMenuToggle {
  position: fixed; top: 14px; left: 14px; z-index: 2100;
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--ol-1); border: none; color: #fff;
  display: none; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,0.3);
}
#viewerMenuToggle svg { width: 22px; height: 22px; }
#viewerMenuToggle.hidden { display: none !important; }

/* No mobile, o visualizador vira menu lateral deslizante */
@media (max-width: 820px) {
  body.viewer-mode #viewerMenuToggle { display: inline-flex; }
  body.viewer-mode #viewerBar {
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 250px;
    height: 100%;
    padding: 68px 12px 16px;
    gap: 8px;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.28s ease;
    box-shadow: 4px 0 18px rgba(0,0,0,0.35);
    z-index: 2050;
  }
  body.viewer-mode #viewerBar.viewer-open { transform: translateX(0); }
  #viewerBar .viewerSpacer { display: none; }
  #viewerBar #viewerLogo { max-width: 130px; margin-bottom: 6px; }
  #viewerBar .viewerTitle { font-size: 12px; margin-bottom: 8px; }
  #viewerBar button {
    width: 100%; justify-content: flex-start;
    padding: 11px 12px; font-size: 14px; border-radius: 8px;
  }
  #viewerBar button svg { width: 18px; height: 18px; margin-right: 9px; }
}

/* Toggle sol/lua dentro do visualizador (mesmo estilo da topbar) */
#viewerBar #viewerTheme.themeSwitch { background: transparent; border: none; padding: 0; }
#viewerBar #viewerTheme .themeSwitchIcon svg { width: 15px; height: 15px; margin-right: 0; vertical-align: middle; }
#viewerBar #viewerTheme .themeSun svg { color: #f5c542; }
#viewerBar #viewerTheme .themeMoon svg { color: #9fb4c0; }
@media (max-width: 820px) {
  body.viewer-mode #viewerBar #viewerTheme.themeSwitch { width: 100%; justify-content: flex-start; padding: 6px 12px; }
}

/* ═══════ Controles de múltiplas composições (painel Posicionar) ═══════ */
#compRotRow, #compSwitcherRow { margin-top: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; }
#compRotInput { padding: 3px 5px; border: 1px solid var(--border-sub, #b6c8ce); border-radius: 4px; font-family: var(--font); }
.rotQuick, #compPrev, #compNext, #removeCompBtn {
  padding: 3px 8px; border: 1px solid var(--ol-2); background: #fff; color: var(--ol-2);
  border-radius: 4px; cursor: pointer; font-family: var(--font); font-size: 11px;
}
.rotQuick:hover, #compPrev:hover, #compNext:hover { background: var(--ol-1); color: #fff; }
#removeCompBtn { border-color: #CC2200; color: #CC2200; }
#removeCompBtn:hover { background: #CC2200; color: #fff; }
#activeCompLabel { min-width: 30px; text-align: center; color: var(--ol-3); }

/* ═══════════ RIBBON EM ABAS ═══════════ */
#ribbonTabs {
  position: fixed;
  top: 80px;
  left: 0; right: 0;
  height: 34px;
  z-index: 1501;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  background: var(--ol-4); /* contínuo com a topbar, sem tom intermediário */
  padding: 0 12px;
  box-sizing: border-box;
}
/* Orelhas estilo fichário/navegador: a ativa é da cor do ribbon */
.ribbonTab {
  padding: 7px 20px 7px;
  background: rgba(255,255,255,0.13);
  border: none;
  border-radius: 8px 8px 0 0;
  color: #cfdde3;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.ribbonTab:hover { background: rgba(255,255,255,0.24); color: #fff; }
.ribbonTab.active {
  background: var(--rib-bg-1); /* mesma cor do topo do ribbon — orelha conectada nos 2 temas */
  color: var(--rib-text-strong);
}
/* Botão Exportar fixo à direita da barra de abas */
#exportMenuBtn {
  margin-left: auto;
  margin-bottom: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: var(--ol-1);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
#exportMenuBtn:hover { background: var(--ol-2); }
#exportMenuBtn svg { width: 14px; height: 14px; }
/* grupos escondidos quando a aba não está ativa */
.ribbonGroup[data-tab], .ribbonSep { display: none; }
#ribbon[data-active-tab="build"] .ribbonGroup[data-tab="build"],
#ribbon[data-active-tab="build"] .ribbonSep[data-tab="build"],
#ribbon[data-active-tab="view"]   .ribbonGroup[data-tab="view"],
#ribbon[data-active-tab="export"] .ribbonGroup[data-tab="export"],
#ribbon[data-active-tab="export"] .ribbonSep[data-tab="export"] {
  display: flex;
  animation: ribbonTabIn 0.22s ease-out;
}
@keyframes ribbonTabIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ═══════ Modal Exportar / Compartilhar ═══════ */
.exportModalGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0 4px;
}
.exportModalBtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 10px;
  background: #f4f7f9;
  border: 1px solid #c4d2d9;
  border-radius: 10px;
  color: var(--ol-3);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.exportModalBtn:hover { background: var(--ol-1); border-color: var(--ol-1); color: #fff; }
.exportModalBtn:hover svg { stroke: #fff; }
.exportModalBtn svg { width: 26px; height: 26px; stroke: var(--ol-1); }

/* Ícone lucide da dica do tutorial */
#tutorialHighlightIcon svg { width: 22px; height: 22px; stroke: var(--ol-1); }

/* ═══════ Painel de camadas (composições) ═══════ */
#compLayersPanel {
  position: fixed;
  top: 210px;
  left: 16px;
  z-index: 1200;
  width: 190px;
  background: var(--rib-bg-1, #f4f7f9);
  border: 1px solid var(--rib-border, #c4d2d9);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  padding: 10px 10px 8px;
  font-family: var(--font);
}
#compLayersPanel.hidden { display: none; }
#compLayersTitle {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ol-2); margin-bottom: 6px;
}
.compRow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; padding: 6px 8px; border-radius: 7px; cursor: pointer;
  color: var(--rib-text, #2a3b44); font-size: 12.5px;
}
.compRow:hover { background: rgba(29,113,146,0.12); }
.compRow.active { background: var(--ol-1); color: #fff; font-weight: 600; }
.compRow.isHidden .compRowName { opacity: 0.45; text-decoration: line-through; }
.compRowName { flex: 1; }
.compRowEye {
  background: transparent; border: none; cursor: pointer; padding: 2px;
  display: inline-flex; align-items: center; color: inherit;
}
.compRowEye svg { width: 15px; height: 15px; stroke: currentColor; }

/* Toggle de escopo da BOM */
#bomScopeRow { display: flex; gap: 6px; margin-bottom: 8px; }
.bomScopeBtn {
  flex: 1; padding: 5px 8px; font-size: 11px; font-weight: 600;
  font-family: var(--font); cursor: pointer;
  background: transparent; color: var(--ol-1);
  border: 1px solid var(--ol-1); border-radius: 6px;
}
.bomScopeBtn.active { background: var(--ol-1); color: #fff; }
.bomCompHeader {
  margin: 10px 0 4px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ol-1);
  border-bottom: 1px solid var(--rib-border, #c4d2d9); padding-bottom: 3px;
}
.bomCompHidden { font-weight: 400; opacity: 0.6; text-transform: none; }

/* Código curto no modal de compartilhar */
#shareCodeInfo {
  margin: 8px 0 2px; font-size: 13px; color: var(--ol-2);
  font-family: var(--font); letter-spacing: 0.02em;
}
#shareCodeInfo b { color: var(--ol-1); font-size: 15px; letter-spacing: 0.12em; }
#shareCodeInfo.hidden { display: none; }

/* ═══════ Interruptor de escopo da lista (Consolidada ⇄ Por composição) ═══════ */
#bomScopeRow { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.bomScopeLbl { font-size: 11px; color: var(--rib-text-muted, #6b7c85); font-family: var(--font); transition: color 0.15s; }
.bomScopeLbl.on { color: var(--ol-1); font-weight: 700; }
.bomScopeSwitch {
  position: relative; width: 40px; height: 20px; flex: 0 0 auto;
  border-radius: 10px; border: 1px solid var(--ol-2);
  background: var(--ol-1); cursor: pointer; padding: 0;
}
.bomScopeThumb {
  position: absolute; top: 50%; left: 2px; transform: translateY(-50%);
  width: 15px; height: 15px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
  transition: left 0.22s;
}
.bomScopeSwitch.is-per .bomScopeThumb { left: 22px; }

/* Modal do código único */
#codeModalValue {
  margin: 16px 0 10px; text-align: center;
  font-size: 30px; font-weight: 800; letter-spacing: 0.18em;
  color: var(--ol-1); font-family: var(--font);
  user-select: all;
}

/* Corrige o interruptor de escopo esticado dentro do HUD */
#hud .bomScopeSwitch, .bomScopeSwitch {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px;
  height: 20px !important;
  flex: 0 0 40px !important;
  padding: 0 !important;
  display: inline-block;
  box-sizing: border-box;
}

/* Formulário do ambiente (flyRoom) organizado, sem encavalar */
#flyRoom { min-width: 280px; max-height: 60vh; overflow-y: auto; padding: 14px 16px; }
#flyRoom label { display: block; margin: 8px 0 3px; font-size: 12px; }
#flyRoom input[type="number"] { width: 100%; box-sizing: border-box; padding: 5px 7px; margin-bottom: 2px; }
#flyRoom #roomWallsPanel { margin-top: 8px; }
#flyRoom #roomWallsPanel label { display: inline-flex; align-items: center; gap: 4px; margin: 4px 10px 4px 0; }

/* Interruptor da lista no formato oblongo (igual ao do modo escuro) */
#hud .bomScopeSwitch, .bomScopeSwitch {
  width: 52px !important; min-width: 52px !important; max-width: 52px;
  height: 26px !important; flex: 0 0 52px !important;
  border-radius: 13px; background: var(--ol-4); border: 1px solid var(--ol-2);
  position: relative; cursor: pointer;
}
.bomScopeThumb {
  width: 20px !important; height: 20px !important;
  left: 3px; transition: left 0.25s;
}
.bomScopeSwitch.is-per .bomScopeThumb { left: 28px !important; }

/* Alça de arraste dos painéis flutuantes */
.panelGrip {
  cursor: grab;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ol-2);
  padding: 2px 0 6px; margin-bottom: 4px;
  border-bottom: 1px solid var(--rib-border, #c4d2d9);
  user-select: none;
}
.panelGrip:active { cursor: grabbing; }
#compLayersTitle.panelGrip { margin-bottom: 6px; }

/* Campos X/Y digitáveis do posicionar */
#positionIndicator .posCoords input[type="number"] {
  width: 74px; padding: 3px 5px; font-family: var(--font); font-size: 12px;
  border: 1px solid var(--rib-border, #b6c8ce); border-radius: 4px;
  font-weight: 700; color: var(--ol-3);
}

/* ═══════ Campo de código + Terminal de Expedição ═══════ */
.loadCodeField {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px; margin: 10px 0 4px;
  font-family: var(--font); font-size: 18px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; text-align: center;
  color: var(--ol-1); background: #f4f7f9;
  border: 2px solid var(--ol-1); border-radius: 8px;
}
.loadCodeField:focus { outline: none; border-color: var(--ol-2); background: #fff; box-shadow: none !important; }
#loadCodeStatus, #expStatus { margin: 6px 0 2px; font-size: 12.5px; font-family: var(--font); }

#expedicaoPanel {
  position: fixed; inset: 0; z-index: 4000;
  background: linear-gradient(160deg, #0F363E 0%, #144E5B 100%);
  display: flex; flex-direction: column; align-items: center;
  padding-top: 6vh; padding-bottom: 70px; font-family: var(--font);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
#expedicaoPanel.hidden { display: none; }
#expedicaoPanel > * { width: min(520px, 92vw); }
.expTitle { color: #fff; font-size: 22px; font-weight: 800; letter-spacing: 0.02em; margin-bottom: 6px; text-align: center; }
.expSub { color: #b9d2da; font-size: 13.5px; text-align: center; margin: 0 0 18px; }
#expedicaoPanel .expRow { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
#expedicaoPanel .expRow .loadCodeField { flex: 1; margin: 0; }
#expedicaoPanel .expRow input[type="text"]:not(.loadCodeField) {
  flex: 1; padding: 9px 11px; border-radius: 7px; border: none;
  font-family: var(--font); font-size: 13px;
}
#expContent {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px; padding: 16px 18px; margin-top: 14px;
}
#expContent.hidden { display: none; }
#expInfo { color: #eaf3f6; font-size: 13.5px; margin-bottom: 12px; line-height: 1.5; }
.expScopeRow .bomScopeLbl { color: #9fbec8; }
.expScopeRow .bomScopeLbl.on { color: #fff; }
.expActions { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.expActions .modal-btn { flex: none; width: 100%; box-sizing: border-box; }
#expStatus { color: #fff; }

/* ═══════ Scanner de QR ═══════ */
#qrScanOverlay {
  position: fixed; inset: 0; z-index: 5000;
  background: rgba(6,20,24,0.96);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; font-family: var(--font);
}
#qrScanOverlay.hidden { display: none; }
#qrScanVideo {
  width: min(420px, 92vw); aspect-ratio: 1; object-fit: cover;
  border-radius: 14px; background: #000;
}
.qrScanFrame {
  position: absolute; width: min(260px, 62vw); height: min(260px, 62vw);
  border: 3px solid rgba(255,255,255,0.85); border-radius: 18px;
  box-shadow: 0 0 0 4000px rgba(6,20,24,0.35);
  pointer-events: none;
}
.qrScanHint { color: #cfe2e8; font-size: 13.5px; }
#qrScanClose { min-width: 140px; }
.expScanBtn { font-size: 18px; padding: 8px 14px; flex: 0 0 auto; }

/* ═══════ Terminal de expedição — responsivo (celular) ═══════ */
@media (max-width: 640px) {
  #expedicaoPanel { padding-top: 4vh; padding-left: 4vw; padding-right: 4vw; }
  #expedicaoPanel > * { width: 100%; }
  .expTitle { font-size: 18px; }
  .expSub { font-size: 12.5px; }
  #expedicaoPanel .expRow { flex-wrap: wrap; }
  #expedicaoPanel .expRow .loadCodeField { flex: 1 1 100%; font-size: 22px; padding: 14px 12px; }
  .expScanBtn { flex: 1 1 46% !important; font-size: 22px; padding: 13px 0; }
  #expLoadBtn { flex: 1 1 46%; padding: 13px 0; font-size: 15px; }
  #expedicaoPanel .expRow input[type="text"]:not(.loadCodeField) { flex: 1 1 100%; padding: 12px 11px; font-size: 15px; }
  .expActions { flex-direction: column; }
  .expActions .modal-btn { padding: 14px 0; font-size: 15px; }
  #expContent { padding: 14px; }
  .expScopeRow { justify-content: center; }
}
/* alvos de toque maiores no terminal em qualquer tela touch */
@media (pointer: coarse) {
  #expedicaoPanel .modal-btn { min-height: 46px; }
}

/* Cursor de arraste UNIFORME em todos os painéis (cruz de mover) */
.panelGrip, #hud .menuHeader, .menu .menuHeader { cursor: move !important; }
.panelGrip:active { cursor: move; }

/* Campos X/Y/rotação claros, com contraste */
#positionIndicator input[type="number"],
#compRotInput {
  background: #ffffff !important;
  color: var(--ol-3) !important;
  border: 1px solid #b6c8ce !important;
  border-radius: 4px;
  font-weight: 700;
}
body.dark #positionIndicator input[type="number"],
body.dark #compRotInput {
  background: #f2f6f8 !important;
  color: #14424c !important;
}

/* Botão Vistas fixo à direita do ribbon (todas as abas) */
#ribbonFixedRight {
  margin-left: auto;
  display: flex;
  align-items: stretch;
  padding-right: 10px;
  border-left: 1px solid var(--rib-sep, #cdd9df);
}

/* 🔔 Toast do sistema */
#juToast {
  position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%) translateY(20px);
  background: #0F363E; color: #fff;
  padding: 12px 22px; border-radius: 10px;
  font-family: var(--font); font-size: 13.5px; font-weight: 600;
  box-shadow: 0 6px 22px rgba(0,0,0,0.35);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 6000; max-width: min(560px, 90vw); text-align: center;
}
#juToast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Modal de confirmação do sistema */
#sysConfirmModal .shareTitle { font-size: 15px; line-height: 1.45; }

/* 🔒 Botões de construção travados (composição encerrada) */
.ribbonBtn.locked { opacity: 0.35; pointer-events: none; }

/* Facho na edição do Darklight */

/* Folga do divisor do botão Vistas fixo */
#ribbonFixedRight { padding: 0 10px 0 14px; margin-left: auto; }

/* HUD da lista mais largo — todas as colunas sem scroll horizontal */
#hud { width: 520px; max-width: calc(100vw - 40px); }
#hud.hud-numbered { width: 560px; }
#hud .bomTable { table-layout: auto; }
#hud .bomTable td, #hud .bomTable th { white-space: normal; word-break: normal; }

/* Modal do DXF — grade de vistas */
.dxfViewGrid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;
  margin: 12px 0 4px; text-align: left;
}
.dxfViewGrid label {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font); font-size: 13px; color: var(--ol-3);
  cursor: pointer; user-select: none;
}
.dxfViewGrid input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--ol-1); }
body.dark .dxfViewGrid label { color: #d7e5ea; }

/* Lista de módulos: larguras por CLASSE (estável com/sem coluna de numeração) */
#hud .bomTable .bomNum { white-space: nowrap; width: 1%; }
#hud .bomTable .bomCode { white-space: nowrap; width: 1%; padding-right: 14px; }
#hud .bomTable .bomDesc { width: auto; }
#hud .bomTable .bomQty { white-space: nowrap; width: 1%; text-align: right; }

/* HUD lista: títulos de grupo à esquerda, texto unificado, cor em linha própria */
#hud .bomTable .bomGroupRow td, #hud .bomTable td[colspan] { text-align: left !important; }
#hud .bomTable td { color: var(--ol-3); }
body.dark #hud .bomTable td { color: #d7e5ea; }
.bomColorName { display: block; opacity: 0.62; font-size: 0.92em; margin-top: 1px; }

/* Modal etiquetas: botões empilhados com larguras iguais */
#labelsModal .modal-actions { flex-direction: column; align-items: stretch; gap: 8px; }
#labelsModal .modal-actions .modal-btn { width: 100%; }

/* Opções extras do DXF */
.dxfOptGrid {
  display: flex; flex-direction: column; gap: 7px;
  margin: 4px 0 6px; padding-top: 10px;
  border-top: 1px solid var(--rib-border, #cdd9df);
  text-align: left;
}
.dxfOptGrid label {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font); font-size: 13px; color: var(--ol-3); cursor: pointer;
}
.dxfOptGrid input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--ol-1); }
body.dark .dxfOptGrid label { color: #d7e5ea; }

/* Código na mesma cor da descrição (unificado) */
#hud .bomCode { color: var(--ol-3) !important; }
body.dark #hud .bomCode { color: #d7e5ea !important; }

/* Picker de cor do driver no flyout de configuração */
#driverColorPicker { margin: 4px 0 8px; }

/* Coluna de altura dos cabos no painel de camadas */
.compRowHeight {
  font-size: 11px; font-weight: 600; color: var(--ol-2);
  opacity: 0.85; margin-left: auto; padding: 0 8px;
  white-space: nowrap;
}
.compRow.active .compRowHeight { color: #fff; }

/* Lista de códigos por linha no modal Gerar código */
.codeListHint {
  font-size: 11.5px; opacity: 0.7; margin: 10px 0 6px;
  font-family: var(--font); text-align: left;
}
.codeListRow {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px; border-radius: 6px; margin-bottom: 4px;
  background: rgba(29,113,146,0.08);
  font-family: var(--font); font-size: 13px;
}
.codeListRow strong { font-size: 14.5px; letter-spacing: 0.5px; }
body.dark .codeListRow { background: rgba(255,255,255,0.07); }

/* Terminal de expedição: logo + grupos de ações */
#expLogo { display: block; height: 34px; margin: 0 auto 14px; }
.expActGroup {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--ol-1); opacity: 0.85;
  margin: 12px 0 2px; text-align: left;
}
.expActGroup:first-child { margin-top: 0; }

/* 📏 Medida desejada (módulo reto) */
#customLenWrap { margin-top: 10px; }
#customLenInput {
  width: 100%; box-sizing: border-box; padding: 8px 10px;
  border: 1px solid #b6c8ce; border-radius: 6px;
  background: #fff; color: var(--ol-3);
  font-family: var(--font); font-size: 14px; font-weight: 600;
}
#customLenSuggestions { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.customLenSug {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 6px; cursor: pointer;
  border: 1.5px solid var(--ol-1); background: #fff; color: var(--ol-3);
  font-family: var(--font); font-size: 12.5px; text-align: left;
}
.customLenSug .clsTotal { font-weight: 700; white-space: nowrap; }
.customLenSug .clsTotal em { font-style: normal; opacity: 0.6; font-weight: 600; }
.customLenSug .clsCombo { opacity: 0.8; text-align: right; }
.customLenSug.selected { background: var(--ol-1); color: #fff; }
.customLenSug.selected .clsTotal em { opacity: 0.85; }
body.dark #customLenInput { background: #f2f6f8; color: #14424c; }
body.dark .customLenSug { background: transparent; color: #d7e5ea; }
body.dark .customLenSug.selected { background: var(--ol-1); color: #fff; }

/* Picker da caixa/canopla numa linha só (mesmo padrão dos demais) */
#driverColorPicker { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; }

/* Painel de camadas: um pouco mais largo, nome sem quebrar */
#compLayersPanel { min-width: 300px; }
#compLayersPanel .compRow > span:first-child,
#compLayersPanel .compRowName { white-space: nowrap; }
.compRowHeight { font-size: 10.5px; padding: 0 6px; }

/* Terminal de expedição: coluna sempre + grupos + logo em chip branco */
.expActions { flex-direction: column !important; gap: 8px; }
.expActions .modal-btn { width: 100%; flex: none; }
#expLogo {
  display: block; height: 40px; width: auto; object-fit: contain;
  margin: 0 auto 14px; background: #fff; padding: 6px 14px;
  border-radius: 8px; box-sizing: content-box;
}

/* Botão "?" (tutorial guiado) na barra superior */
#tutorialHelpBtn {
  background: transparent; border: none; cursor: pointer;
  color: #fff; padding: 4px 8px; display: inline-flex; align-items: center;
}
#tutorialHelpBtn svg { width: 19px; height: 19px; stroke: currentColor; }

/* Quadradinhos da cor da caixa/canopla no MESMO tamanho (sem encolher) */
#driverColorPicker > * { flex: 0 0 auto; }

/* 🎓 Tour guiado */
#juTourHL {
  position: fixed; z-index: 7000; pointer-events: none;
  box-sizing: border-box; /* borda dentro da caixa → destaque centralizado no botão */
  border: 2.5px solid #f2ba00; border-radius: 10px;
  box-shadow: 0 0 0 4000px rgba(10, 35, 42, 0.18); /* dim suave: não parece desabilitado */
  transition: all 0.28s ease;
}
#juTourBubble {
  position: fixed; z-index: 7001;
  background: #fff; color: var(--ol-3);
  border-radius: 12px; padding: 14px 16px 12px;
  box-shadow: 0 10px 34px rgba(0,0,0,0.35);
  font-family: var(--font); font-size: 13.5px; line-height: 1.45;
  transition: all 0.28s ease;
}
#juTourBubble .tourNav {
  display: flex; align-items: center; gap: 8px; margin-top: 12px;
}
#juTourBubble .tourCount { font-size: 11.5px; opacity: 0.6; margin-right: auto; }
.tourBtn {
  border: 1.5px solid var(--ol-1); background: #fff; color: var(--ol-1);
  border-radius: 6px; padding: 5px 12px; cursor: pointer;
  font-family: var(--font); font-size: 13px; font-weight: 700;
}
.tourBtn:disabled { opacity: 0.35; cursor: default; }
.tourBtn--main { background: var(--ol-1); color: #fff; }
.tourBtn--x { border-color: transparent; color: #999; padding: 5px 6px; }
body.dark #juTourBubble { background: #14343c; color: #e6f0f3; }
body.dark .tourBtn { background: transparent; color: #7fc4d8; }
body.dark .tourBtn--main { background: var(--ol-1); color: #fff; }

/* Resumo da combinação escolhida (medida desejada) na etapa final */
#planInfo {
  background: rgba(29,113,146,0.10);
  border: 1.5px solid var(--ol-1);
  border-radius: 6px; padding: 8px 10px; margin-bottom: 8px;
  font-family: var(--font); font-size: 12.5px; font-weight: 700;
  color: var(--ol-3);
}
body.dark #planInfo { color: #d7e5ea; background: rgba(255,255,255,0.07); }

/* Facho inline da medida desejada (Darklight) */
#customBeamRow { margin-top: 8px; }
.customBeamBtn {
  flex: 1; padding: 8px 0; border-radius: 6px;
  border: 1.5px solid var(--ol-1); background: #fff; color: var(--ol-1);
  font-family: var(--font); font-size: 13px; font-weight: 700; cursor: pointer;
}
.customBeamBtn:hover { background: var(--ol-1); color: #fff; }
body.dark .customBeamBtn { background: transparent; }

/* 📖 Central de ajuda */
#helpModal { width: min(560px, 92vw); max-height: 82vh; overflow-y: auto; }
.helpActions { display: flex; gap: 12px; margin: 16px 0 8px; }
.helpActions .modal-btn { flex: 1; }
#helpSearch {
  width: 100%; box-sizing: border-box; margin: 10px 0 8px;
  padding: 10px 12px; border: 1.5px solid var(--ol-1); border-radius: 8px;
  background: #fff; color: var(--ol-3);
  font-family: var(--font); font-size: 14px;
}
#helpTopics { text-align: left; max-height: 46vh; overflow-y: auto; padding-right: 4px; }
.helpGroup {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--ol-1); margin: 12px 0 4px;
}
.helpItem {
  border: 1px solid #d5e0e5; border-radius: 8px;
  padding: 8px 12px; margin-bottom: 6px; cursor: default;
}
.helpItem.open { border-color: var(--ol-1); }
.helpItemTitle {
  font-family: var(--font); font-size: 13.5px; font-weight: 700;
  color: var(--ol-3); cursor: pointer;
}
.helpItemTitle::before { content: "▸ "; color: var(--ol-1); }
.helpItem.open .helpItemTitle::before { content: "▾ "; }
.helpItemBody {
  font-family: var(--font); font-size: 13px; line-height: 1.5;
  color: var(--ol-3); opacity: 0.9; margin-top: 6px;
}
.helpEmpty { font-family: var(--font); font-size: 13px; opacity: 0.6; padding: 14px 4px; }
body.dark .helpItem { border-color: #2c4d57; }
body.dark .helpItemTitle, body.dark .helpItemBody { color: #d7e5ea; }
body.dark #helpSearch { background: #f2f6f8; color: #14424c; }

/* Lixeira nas camadas */
.compRowTrash {
  background: transparent; border: none; cursor: pointer;
  color: #b23a2a; opacity: 0.6; padding: 2px 4px; display: inline-flex;
}
.compRowTrash:hover { opacity: 1; }
.compRowTrash svg { width: 14px; height: 14px; }
.compRow.active .compRowTrash { color: #ffd9d2; }

/* PRO / BASIC */
#proModeBtn {
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.4);
  color: #fff; border-radius: 12px; padding: 3px 12px; cursor: pointer;
  font-family: var(--font); font-size: 11px; font-weight: 800; letter-spacing: 0.5px;
}
body.basic-mode .ribbonBtn:not(.basicKeep) { display: none !important; }
body.basic-mode .ribbonGroup:not(:has(.basicKeep)) { display: none !important; }

/* X do HUD */
#hudCloseX {
  float: right; background: transparent; border: none; cursor: pointer;
  color: inherit; font-size: 13px; padding: 0 2px; opacity: 0.7;
}
#hudCloseX:hover { opacity: 1; }

/* 🏷 Badge do projeto no canto superior esquerdo do canvas */
#projectBadge {
  position: fixed; left: 16px; top: 118px; z-index: 900;
  background: rgba(15,54,62,0.88); color: #fff;
  padding: 7px 14px; border-radius: 8px;
  font-family: var(--font); font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.3px; box-shadow: 0 3px 12px rgba(0,0,0,0.25);
  pointer-events: none; max-width: 46vw;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Nome do projeto no modal de código */
#projNameWrap { margin: 10px 18px 6px; }
#projNameInput {
  width: 100%; box-sizing: border-box; padding: 13px 14px;
  border: 1.5px solid var(--ol-1); border-radius: 8px;
  background: #fff; color: var(--ol-3);
  font-family: var(--font); font-size: 14px; text-align: center;
}

/* Inserir da medida específica */
#customInsertBtn {
  width: 100%; margin-top: 8px; padding: 10px 0;
  border-radius: 6px; border: none; cursor: pointer;
  background: var(--ol-1); color: #fff;
  font-family: var(--font); font-size: 14px; font-weight: 700;
}
#customInsertBtn:disabled { opacity: 0.4; cursor: default; }

/* Espaçamento vertical equilibrado no flyout do módulo reto */
#flyStraight .backBtn, #flyStraight #addStraightFinal { margin-top: 8px; }

/* Pílula PRO/BASIC alinhada com o toggle claro/escuro */
#proModeBtn { height: 26px; line-height: 1; display: inline-flex; align-items: center; }

/* X do painel de camadas */
#layersCloseX {
  position: absolute; top: 6px; right: 8px;
  background: transparent; border: none; cursor: pointer;
  color: inherit; font-size: 13px; opacity: 0.7; z-index: 2;
}
#layersCloseX:hover { opacity: 1; }
#compLayersPanel { position: relative; }

/* Extras do editor da alimentação */
#editAlimExtras { margin-top: 10px; }
.alimTypeBtns, .alimOrientBtns { display: flex; gap: 6px; margin-bottom: 4px; }
.alimTypeBtn, .alimOrientBtn {
  flex: 1; padding: 7px 4px; border-radius: 6px; cursor: pointer;
  border: 1.5px solid var(--ol-1); background: #fff; color: var(--ol-1);
  font-family: var(--font); font-size: 11.5px; font-weight: 700;
}
.alimTypeBtn.selected, .alimOrientBtn.selected { background: var(--ol-1); color: #fff; }
#alimPositionBtn {
  width: 100%; margin-top: 8px; padding: 9px 0; border-radius: 6px; cursor: pointer;
  border: 1.5px solid var(--ol-1); background: transparent; color: var(--ol-1);
  font-family: var(--font); font-size: 13px; font-weight: 700;
}
#alimPositionBtn:hover { background: var(--ol-1); color: #fff; }
body.dark .alimTypeBtn, body.dark .alimOrientBtn { background: transparent; color: #7fc4d8; }
body.dark .alimTypeBtn.selected, body.dark .alimOrientBtn.selected { background: var(--ol-1); color: #fff; }

/* Modal de nome do projeto */
#askNameModal .askNameHint { font-family: var(--font); font-size: 12.5px; opacity: 0.75; margin: 6px 0 10px; }
#askNameModal #askNameInput,
#askNameModal #askOrderInput {
  width: calc(100% - 36px); box-sizing: border-box; padding: 13px 14px; margin-bottom: 12px;
  border: 1.5px solid var(--ol-1); border-radius: 8px;
  background: #fff; color: var(--ol-3);
  font-family: var(--font); font-size: 14px; text-align: center;
}

/* Badge do projeto: abaixo do ribbon, acima do canvas */
#projectBadge { top: 158px !important; z-index: 450; }

#genCodeGoBtn { width: 100%; margin: 8px 0 10px; }

/* ── Painel de camadas no padrão visual do HUD (lista de módulos) ── */
#compLayersPanel.menu { padding: 0; min-width: 300px; }
#compLayersPanel .menuHeader { cursor: grab; user-select: none; }
#compLayersPanel .menuContent { padding: 10px 12px; }
#compLayersPanel.collapsed .menuContent { display: none; }
#compLayersPanel .hudCollapseIcon { transition: transform 0.2s; }
#compLayersPanel.collapsed .hudCollapseIcon { transform: rotate(-90deg); }

/* ── Modal de carregar código no padrão do HUD ── */
#loadCodeModal { padding: 0; overflow: hidden; }
#loadCodeModal .shareTitle {
  background: #0F363E; color: #fff; margin: 0;
  padding: 11px 16px; font-size: 13.5px; text-align: left;
  border-radius: 10px 10px 0 0;
}
#loadCodeModal .loadCodeField, #loadCodeModal #loadCodeStatus { margin-left: 16px; margin-right: 16px; }
#loadCodeModal .loadCodeField { width: calc(100% - 32px); margin-top: 16px; }
#loadCodeModal .modal-actions { padding: 0 16px 16px; }
#loadCodeModal .loadCodeField::placeholder {
  font-size: 12.5px; font-weight: 400; letter-spacing: 0.3px;
  color: #9ab2ba; text-transform: none;
}
body.dark #loadCodeModal .loadCodeField::placeholder { color: #6d8891; }

/* Badge do projeto: canto INFERIOR esquerdo */
#projectBadge {
  top: auto !important; bottom: 16px !important; left: 16px;
  z-index: 450;
}

/* ── Terminal Operacional: identidade do configurador ── */
.expSubOp {
  color: #7fc4d8 !important; font-size: 15px !important; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1.5px; margin: 0 0 4px !important;
}
.expHint { color: #b9d2da; font-size: 12.5px; text-align: center; margin: 0 0 18px; }
.expActions .modal-btn {
  display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 11px 14px;
}
.expActions .modal-btn svg {
  width: 18px; height: 18px; flex-shrink: 0;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.expGoConfig {
  margin-top: 14px !important;
  background: #F07800 !important; border-color: #F07800 !important; color: #fff !important;
  font-weight: 800;
}
.expGoConfig:hover { filter: brightness(1.08); }

/* Canvas 3D fixo na viewport, atrás de toda a UI (sem faixa no topo) */
#scene3d { position: fixed; inset: 0; z-index: 0; display: block; }

/* Camadas: olhinho e lixeira SEM caixa de botão — só o ícone */
#compLayersPanel .compRow button,
#compLayersPanel .compRowEye, #compLayersPanel .compRowTrash {
  background: transparent !important; border: none !important;
  box-shadow: none !important; padding: 2px 4px;
}
#compLayersPanel .compRowEye svg, #compLayersPanel .compRowTrash svg { width: 15px; height: 15px; }

/* Terminal: logo sem pílula */
#expLogo { background: transparent !important; padding: 0 !important; border-radius: 0 !important; height: 44px; }

/* Terminal: caixa, câmera e Carregar na mesma altura */
#expedicaoPanel .expRow { align-items: stretch; }
#expedicaoPanel .expRow .loadCodeField,
#expedicaoPanel .expRow .modal-btn { height: 46px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }

/* Vistas: botões quadrados com ícone + rótulo */
.viewGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.viewBtn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; width: 74px; height: 62px; border-radius: 8px; cursor: pointer;
  border: 1.5px solid var(--ol-1); background: #fff; color: var(--ol-1);
  font-family: var(--font); font-size: 9.5px; font-weight: 700;
}
.viewBtn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.viewBtn:hover { background: var(--ol-1); color: #fff; }
body.dark .viewBtn { background: transparent; color: #7fc4d8; }
body.dark .viewBtn:hover { background: var(--ol-1); color: #fff; }

/* Versão / atualizar na ajuda */
.helpVersionRow {
  margin-top: 12px; font-family: var(--font); font-size: 11.5px; opacity: 0.8;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.helpVersionRow button {
  border: 1px solid var(--ol-1); background: transparent; color: var(--ol-1);
  border-radius: 6px; padding: 4px 10px; cursor: pointer;
  font-family: var(--font); font-size: 11.5px; font-weight: 700;
}
.helpVersionRow button:hover { background: var(--ol-1); color: #fff; }

/* ── Terminal: logo maior, subtítulo menor, coluna equilibrada ── */
#expLogo { height: 60px !important; max-width: min(400px, 90vw); object-fit: contain; }
#expedicaoPanel .expTitle { font-size: 21px; margin-top: 4px; }
.expSubOp { font-size: 11.5px !important; letter-spacing: 2.2px; opacity: 0.9; }
#expedicaoPanel .expRow, #expedicaoPanel .expActions, #expedicaoPanel #expInfo, #expedicaoPanel #expStatus {
  width: min(400px, 90vw); box-sizing: border-box;
}

/* Seções do terminal em BRANCO */
.expActGroup { color: #fff !important; opacity: 0.92; }

/* ── Camadas: cabeçalho no padrão exato do HUD (✕ | título centralizado | ▼) ── */
#compLayersPanel .menuHeader, #hudHeader {
  display: flex; align-items: center; gap: 8px;
}
#compLayersPanel .menuHeader > span[data-i18n],
#compLayersPanel .menuHeader > span:not(.hudCollapseIcon) { flex: 1; text-align: center; }
#hudHeader > span[data-i18n] { flex: 1; text-align: center; }
#layersCloseX {
  position: static !important; float: none;
  background: transparent; border: none; cursor: pointer;
  color: #fff; font-size: 13px; opacity: 0.8; padding: 0 2px;
}
#layersCloseX:hover { opacity: 1; }

/* Olho e lixeira visíveis nos DOIS temas */
#compLayersPanel .compRowEye { color: var(--ol-1) !important; }
#compLayersPanel .compRowTrash { color: #b23a2a !important; opacity: 0.75; }
#compLayersPanel .compRow.active .compRowEye { color: #fff !important; }
#compLayersPanel .compRow.active .compRowTrash { color: #ffd0c8 !important; }
body.dark #compLayersPanel .compRowEye { color: #7fc4d8 !important; }
body.dark #compLayersPanel .compRowTrash { color: #ff9c8f !important; }

/* Faixa inteira clicável com hover */
#compLayersPanel .compRow { cursor: pointer; transition: background 0.15s; }
#compLayersPanel .compRow:not(.active):hover { background: rgba(29,113,146,0.12); }
body.dark #compLayersPanel .compRow:not(.active):hover { background: rgba(255,255,255,0.08); }

/* Botão de atualizar com ícone */
.helpVersionRow button { display: inline-flex; align-items: center; gap: 6px; }
.helpVersionRow button svg { width: 13px; height: 13px; }

/* ══ Camadas = clone visual do Lista de módulos ══ */
#compLayersPanel.menu {
  background: #f4f7f9 !important;
  border: 1px solid #c4d2d9 !important;
  color: #2a3b44 !important;
}
#compLayersPanel .menuHeader {
  background: linear-gradient(180deg, #f4f7f9 0%, #e3eaee 100%) !important;
  color: #14424c !important;
  border-bottom: 1px solid #cdd9df !important;
  padding: 10px 12px;
  cursor: grab;
}
#layersCloseX { color: #14424c !important; }
#compLayersPanel .hudCollapseIcon { color: #14424c; }
body.dark #compLayersPanel.menu {
  background: var(--rib-bg-1) !important;
  border-color: var(--rib-border) !important;
  color: var(--rib-text) !important;
}
body.dark #compLayersPanel .menuHeader {
  background: linear-gradient(180deg, var(--rib-bg-1) 0%, var(--rib-bg-2) 100%) !important;
  color: var(--rib-text) !important;
  border-bottom-color: var(--rib-border) !important;
}
body.dark #layersCloseX, body.dark #compLayersPanel .hudCollapseIcon { color: var(--rib-text) !important; }

/* linhas: espaçamento equilibrado nome | cabo | olho | lixeira */
#compLayersPanel .compRow { gap: 10px; padding: 7px 10px; }
#compLayersPanel .compRowName { flex: 0 0 auto; }
#compLayersPanel .compRowHeight { flex: 1; text-align: left; font-size: 11px; opacity: 0.75; padding: 0; }
#compLayersPanel .compRowEye, #compLayersPanel .compRowTrash { padding: 2px 3px; }
#compLayersPanel .compRowEye svg, #compLayersPanel .compRowTrash svg { width: 16px; height: 16px; }

/* ══ Editor da alimentação: textos e larguras sem estouro ══ */
#editAlimExtras .alimTypeBtns, #editAlimExtras .alimOrientBtns {
  display: flex; gap: 6px; width: 100%;
}
.alimTypeBtn, .alimOrientBtn {
  flex: 1 1 0; min-width: 0; padding: 7px 2px;
  font-size: 10.5px; line-height: 1.15; white-space: normal;
}
#editAlimExtras { overflow: hidden; }
#alimPositionBtn { font-size: 12.5px; }

/* ══ Edição da ALIMENTAÇÃO: painel dedicado (sem Tipo/Comprimento de módulo) ══ */
#editModuleMenu.alimEdit .editMaterialBtn,
#editModuleMenu.alimEdit #editLengthBtns,
#editModuleMenu.alimEdit #editStraightControls > .sectionLabel:nth-of-type(1),
#editModuleMenu.alimEdit #editStraightControls > .sectionLabel:nth-of-type(2) {
  display: none !important;
}

/* Tipo de driver: EMPILHADOS, largura total, selecionado escuro */
#editAlimExtras .alimTypeBtns { flex-direction: column; gap: 6px; }
.alimTypeBtn {
  width: 100%; padding: 9px 8px; font-size: 12.5px; white-space: nowrap;
  text-align: center;
}
.alimTypeBtn.selected, .alimOrientBtn.selected {
  background: var(--ol-1) !important; color: #fff !important;
  border-color: var(--ol-1) !important;
}
#alimPositionBtn { text-align: center; justify-content: center; display: flex; align-items: center; }

/* ══ Camadas: tipografia do cabeçalho e cantos idênticos aos demais huds ══ */
#compLayersPanel.menu { overflow: hidden; }  /* header respeita o raio da caixa */
#compLayersPanel .menuHeader {
  font-size: 10px !important; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
}
/* olho + lixeira juntos, alinhados à DIREITA */
#compLayersPanel .compRowHeight { flex: 0 1 auto; }
#compLayersPanel .compRowEye { margin-left: auto; }
#compLayersPanel .compRowEye + .compRowTrash,
#compLayersPanel .compRowTrash { margin-left: 2px; }

/* ══ Terminal: botões alinhados com a coluna (sem deriva à direita) ══ */
#expedicaoPanel .expActions .modal-btn { margin: 0; }
#expedicaoPanel .expActions { align-items: stretch; }

/* Picker da caixa/canopla IGUAL aos outros (quebra de linha, sem scroll) */
#driverColorPicker { flex-wrap: wrap !important; overflow: visible !important; }

/* Camadas: GRID fixo — nome | cabo | olho | lixeira (alinhamento estável) */
#compLayersPanel .compRow {
  display: grid !important;
  grid-template-columns: auto 1fr auto auto;
  align-items: center; column-gap: 10px;
}
#compLayersPanel .compRowEye { margin-left: 0; justify-self: end; }
#compLayersPanel .compRowTrash { justify-self: end; }

/* Quadradinhos da caixa/canopla NO MESMO padrão dos outros pickers */
#driverColorPicker {
  display: grid !important;
  grid-template-columns: repeat(10, 1fr);
  gap: 3px;
}
#driverColorPicker .colorSwatch { width: 100%; aspect-ratio: 1; height: auto; }

/* Terminal: botões cravados na largura total da coluna */
#expedicaoPanel .expActions .modal-btn { width: 100% !important; margin: 0 !important; box-sizing: border-box; }
.helpActions--3 { flex-wrap: nowrap; }
.helpActions .modal-btn { flex: 1 1 45%; }

/* 🎲 Painel aleatório do evento: só o dado + Demo */
.randHiddenParams { display: none !important; }
.randomBodyEvent { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 16px; }
#randomDiceBtn {
  width: 92px; height: 92px; border-radius: 20px; cursor: pointer;
  border: 2px solid var(--ol-1); background: #fff; color: var(--ol-1);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s, background 0.2s;
}
#randomDiceBtn svg { width: 52px; height: 52px; }
#randomDiceBtn:hover { background: var(--ol-1); color: #fff; transform: scale(1.05); }
#randomDiceBtn.rolling { animation: diceRoll 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes diceRoll {
  0%   { transform: rotate(0) scale(1); }
  25%  { transform: rotate(-18deg) scale(1.12); }
  50%  { transform: rotate(14deg) scale(0.95); }
  75%  { transform: rotate(-8deg) scale(1.06); }
  100% { transform: rotate(0) scale(1); }
}
.randDiceHint { font-family: var(--font); font-size: 11.5px; opacity: 0.7; text-align: center; }
.randomBodyEvent .autoBuildBtn { margin: 4px auto 0; display: block; }
body.dark #randomDiceBtn { background: transparent; color: #7fc4d8; }
body.dark #randomDiceBtn:hover { background: var(--ol-1); color: #fff; }

/* 📖 Central de ajuda no padrão Lista de módulos */
#helpModal { padding: 0 !important; overflow: hidden; }
#helpModal .shareTitle {
  background: linear-gradient(180deg, #f4f7f9 0%, #e3eaee 100%);
  color: #14424c; margin: 0; padding: 11px 16px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  text-align: center; border-bottom: 1px solid #cdd9df;
}
#helpModal .helpActions, #helpModal #helpDoc, #helpModal .helpVersionRow { margin-left: 16px; margin-right: 16px; }
#helpModal .modal-actions { padding: 0 16px 16px; }
body.dark #helpModal .shareTitle {
  background: linear-gradient(180deg, var(--rib-bg-1) 0%, var(--rib-bg-2) 100%);
  color: var(--rib-text); border-bottom-color: var(--rib-border);
}

/* "alea jacta est" — quase um easter egg */
.randDiceHint {
  font-size: 8.5px !important; font-style: italic; letter-spacing: 1.5px;
  opacity: 0.4 !important; text-transform: lowercase;
}

/* X do painel aleatório sem moldura */
.floatingPanelClose {
  background: transparent !important; border: none !important;
  box-shadow: none !important; padding: 2px 6px;
}

/* ══ Padrão visual HUD para TODOS os modais de compartilhamento ══ */
.hudStyleModal { padding: 0 !important; overflow: hidden; }
.hudStyleModal > .shareTitle, .hudStyleModal .shareTitle:first-child {
  background: linear-gradient(180deg, #f4f7f9 0%, #e3eaee 100%) !important;
  color: #14424c !important; margin: 0 !important; padding: 11px 16px !important;
  font-size: 10px !important; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: 0.12em;
  text-align: center; border-bottom: 1px solid #cdd9df; border-radius: 0;
}
.hudStyleModal > *:not(.shareTitle):not(.modal-actions) { margin-left: 18px; margin-right: 18px; }
.hudStyleModal > .modal-actions { padding: 4px 18px 20px; margin: 12px 0 0; }
.hudStyleModal > *:nth-child(2) { margin-top: 16px; }
.hudStyleModal input[type="text"],
.hudStyleModal input[type="email"],
.hudStyleModal input[type="tel"] { margin-bottom: 12px; padding-top: 12px; padding-bottom: 12px; }
body.dark .hudStyleModal > .shareTitle, body.dark .hudStyleModal .shareTitle:first-child {
  background: linear-gradient(180deg, var(--rib-bg-1) 0%, var(--rib-bg-2) 100%) !important;
  color: var(--rib-text) !important; border-bottom-color: var(--rib-border);
}
.bomScopeBtns { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }

/* 🔒 BASIC: menu de vistas só ortogonais + isométrica */
body.basic-mode .viewBtn[data-view="atual"] { display: none !important; }

/* 🔢 Teclado numérico virtual */
#juNumpad {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 8000; background: #f4f7f9; border: 1px solid #c4d2d9;
  border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  padding: 12px; width: 264px; font-family: var(--font);
}
#juNumpad .npDisplay {
  text-align: center; font-size: 22px; font-weight: 800; color: #14424c;
  padding: 6px 0 10px; letter-spacing: 1px; min-height: 30px;
}
#juNumpad .npGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.npKey {
  height: 54px; border-radius: 10px; border: 1.5px solid var(--ol-1);
  background: #fff; color: var(--ol-3); font-size: 20px; font-weight: 700;
  cursor: pointer; font-family: var(--font);
}
.npKey:active { background: var(--ol-1); color: #fff; }
.npKey--back { font-size: 18px; }
.npKey--ok { background: var(--ol-1); color: #fff; }
body.dark #juNumpad { background: var(--rib-bg-1); border-color: var(--rib-border); }
body.dark #juNumpad .npDisplay { color: var(--rib-text); }
body.dark .npKey { background: transparent; color: #d7e5ea; }
body.dark .npKey--ok { background: var(--ol-1); color: #fff; }

/* 🖐 Grips arrastáveis no touch */
.panelGrip, .menuHeader, #hudHeader { touch-action: none; }

/* 🔘 Ocultar grid: mesmo padrão dos botões de visualização */

/* Botões de tipo no editar: mesmo tamanho dos demais */
.editMaterialBtn { font-size: 13px !important; padding: 8px 10px !important; }

/* 🚪 Seletor inicial */
#startChooser {
  position: fixed; inset: 0; z-index: 9000;
  background: linear-gradient(160deg, #0F363E 0%, #144E5B 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font);
}
#startChooser.hidden { display: none; }
.scBox { width: min(560px, 94vw); text-align: center; padding: 20px; }
#scLogo { height: 46px; margin-bottom: 10px; }
.scTitle { color: #fff; font-size: 24px; font-weight: 800; letter-spacing: 0.5px; }
.scSub { color: #9fc4d0; font-size: 13px; margin: 4px 0 18px; }
.scGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.scCard {
  background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: 14px; padding: 18px 14px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: #fff; transition: background 0.18s, transform 0.15s;
  font-family: var(--font);
}
.scCard:hover { background: rgba(255,255,255,0.14); transform: translateY(-2px); }
.scCard svg {
  width: 34px; height: 34px; stroke: #7fc4d8; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.scCardTitle { font-size: 14px; font-weight: 800; }
.scCardText { font-size: 11px; opacity: 0.75; line-height: 1.35; }
.scSkip {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
  color: #9fc4d0; font-size: 11.5px; cursor: pointer;
}
@media (max-width: 560px) { .scGrid { grid-template-columns: 1fr; } }


/* Ícone de missão da construção guiada */
.tourMissionIco {
  width: 15px; height: 15px; vertical-align: -2px; margin-right: 4px;
  color: #F07800;
}

/* Balão da missão no rodapé — ribbon e flyouts livres para clicar */
#juTourBubble.tourBubble--mission {
  top: auto !important; left: 50% !important; bottom: 26px !important;
  transform: translateX(-50%) !important; max-width: min(430px, 92vw);
}

/* Idiomas no seletor inicial */
.scLangRow { display: flex; justify-content: center; gap: 8px; margin-bottom: 12px; }
.scLang {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.3);
  color: #fff; border-radius: 8px; padding: 5px 10px; cursor: pointer;
  font-family: var(--font); font-size: 11.5px; font-weight: 700;
}
.scLang.active, .scLang:hover { background: rgba(255,255,255,0.22); }

#customInsertBtn { width: 100%; margin-top: 8px; box-sizing: border-box; }
#customInsertBtn.hidden { display: none !important; }

/* ✚ Menu em cruz (botão direito) */
#quadMenu { position: fixed; z-index: 8500; width: 0; height: 0; }
#quadMenu.hidden { display: none; }
.qmDot {
  position: absolute; left: -5px; top: -5px; width: 10px; height: 10px;
  border-radius: 50%; background: #F07800; box-shadow: 0 0 0 3px rgba(240,120,0,0.3);
}
.qmBtn {
  position: absolute; transform: translate(-50%, -50%);
  min-width: 84px; padding: 9px 12px; border-radius: 999px;
  background: var(--ol-1); color: #fff; border: none; cursor: pointer;
  font-family: var(--font); font-size: 12px; font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.qmBtn:hover { filter: brightness(1.15); }
.qm-n { left: 0; top: -58px; }
.qm-s { left: 0; top: 58px; }
.qm-e { left: 96px; top: 0; }
.qm-w { left: -96px; top: 0; }

/* 👁 Vistas inline no ribbon (só BASIC) */
#basicViews { display: none; }
body.basic-mode #basicViews { display: flex; gap: 5px; align-items: center; margin-right: 6px; }
body.basic-mode #ribbonFixedRight > .ribbonBtn[data-flyout="flyViews"] { display: none !important; }
#basicViews .viewBtn { width: 56px; height: 52px; font-size: 8.5px; gap: 3px; }
#basicViews .viewBtn svg { width: 17px; height: 17px; }
#ribbonFixedRight { display: flex; align-items: center; }

/* Slot fixo do logo no seletor (sem pulo quando a imagem chega) */
.scLogoSlot { height: 88px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
#scLogo { height: 46px; margin: 0; }
.scLangRow { margin: 16px 0 0; }

/* Facho legado escondido (substituído pela UI inline) */

/* X do gerar aleatório: só o ícone, sem qualquer moldura */
#randomPanel .floatingPanelClose {
  background: transparent !important; border: none !important;
  box-shadow: none !important; outline: none !important;
}
#randomPanel .floatingPanelClose:hover { background: transparent !important; opacity: 0.7; }
#basicViews .viewBtn { width: 52px; }

/* Vistas do BASIC: tipografia igual à dos botões do ribbon */
#basicViews .viewBtn {
  font-size: 10px; font-weight: 500; line-height: 1.1; letter-spacing: 0;
  color: #2a3b44; width: 54px;
}
#basicViews .viewBtn span { font-weight: 500; }
body.dark #basicViews .viewBtn { color: var(--rib-text); }
#basicViews .viewBtn:hover { color: #fff; }

/* ══ Foco de inputs em modais/HUDs: anel petróleo, nunca o outline preto do navegador ══ */
.modal input[type="text"]:focus,
.modal input[type="email"]:focus,
.modal input[type="tel"]:focus,
.modal input[type="number"]:focus,
.loadCodeField:focus,
#askNameModal input:focus {
  outline: none !important;
  border-color: var(--ol-1) !important;
  box-shadow: 0 0 0 3px rgba(29,113,146,0.22) !important;
}

/* ══ Ações dos modais: linhas com 2-3 botões distribuem o espaço igualmente ══ */
.modal-actions--even { display: flex; gap: 10px; }
.modal-actions--even .modal-btn { flex: 1; }

/* Todos os botões dos HUDs de compartilhamento no MESMO padrão preenchido (petróleo) */
.hudStyleModal .modal-actions .modal-btn,
.modal-actions--even .modal-btn {
  background: var(--ol-1) !important;
  color: #fff !important;
  border-color: var(--ol-1) !important;
  flex: 1; /* larguras iguais → linha sempre centralizada, nunca desbalanceada */
}
.hudStyleModal .modal-actions .modal-btn:hover,
.modal-actions--even .modal-btn:hover {
  background: var(--accent-h) !important;
  border-color: var(--accent-h) !important;
}

/* Logo do splash/seletor: mesmo tamanho do logo da barra superior */
#scLogoSplash, #scLogo { height: 83px; object-fit: contain; }

/* Campo "carregar código" na tela inicial */
.scLoadRow { display: flex; gap: 8px; margin-top: 16px; }
#scLoadInput {
  flex: 1; box-sizing: border-box; padding: 10px 12px;
  border: 1.5px solid rgba(255,255,255,0.35); border-radius: 8px;
  background: rgba(255,255,255,0.08); color: #fff;
  font-family: var(--font); font-size: 12.5px; text-align: center;
}
#scLoadInput::placeholder { color: rgba(255,255,255,0.55); }
#scLoadInput:focus { outline: none; border-color: #fff; background: rgba(255,255,255,0.16); }
#scLoadBtn {
  padding: 10px 18px; border-radius: 8px; cursor: pointer;
  border: 1.5px solid rgba(255,255,255,0.45); background: rgba(255,255,255,0.14); color: #fff;
  font-family: var(--font); font-size: 12.5px; font-weight: 700;
}
#scLoadBtn:hover { background: rgba(255,255,255,0.26); }

/* Aviso e botão de e-mail no modal do código */
#codeSaveHint {
  font-family: var(--font); font-size: 12px; line-height: 1.4;
  opacity: 0.75; text-align: center; margin: 10px 0 4px;
}
#codeMailBtn { display: block; width: calc(100% - 36px); margin: 10px auto 0; box-sizing: border-box; }

/* Quantidade agora vive no passo dos comprimentos */
#lengthBtns #qtyBtnRow { margin-bottom: 2px; }

/* Botão "Gerar código" e lista com o mesmo respiro lateral dos campos */
#genCodeGoBtn { display: block; width: calc(100% - 36px); margin: 0 auto 4px; box-sizing: border-box; }

/* Resumo do comprimento total no passo das medidas */
#lenTotalInfo {
  font-family: var(--font); font-size: 11.5px; line-height: 1.35;
  opacity: 0.7; text-align: center; margin: 6px 0 2px;
}
#lenTotalInfo:empty { display: none; }

/* Tela cheia na tela inicial */
#scFullBtn {
  position: absolute; top: 18px; right: 18px;
  width: 38px; height: 38px; border-radius: 9px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.10); color: #fff;
}
#scFullBtn svg { width: 18px; height: 18px; }
#scFullBtn:hover { background: rgba(255,255,255,0.24); }
#startChooser .scBox { position: relative; }

/* ══ 🔧 MODO INSTALADOR ══
   PRO reduzido: só Visualização (sem Ambiente) + Compartilhamento */
body.installer-mode .ribbonTab[data-tab="build"] { display: none !important; }
body.installer-mode .ribbonGroup[data-tab="build"],
body.installer-mode .ribbonSep[data-tab="build"] { display: none !important; }
body.installer-mode .ribbonBtn[data-flyout="flyRoom"] { display: none !important; }

/* Cartão horizontal do Instalador na tela inicial */
.scCard--wide {
  width: 100%; box-sizing: border-box;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  padding: 14px 18px !important;
  text-align: left;
  margin-top: 8px;
}
.scCard--wide svg { width: 28px; height: 28px; flex-shrink: 0; }
.scCard--wide .scCardTitle { flex: 0 0 auto; }
.scCard--wide .scCardText { flex: 1; }

/* o campo de código e o cartão do instalador compartilham a largura do bloco */
.scLoadRow + .scCard--wide { margin-top: 10px; }

/* "Avançar" aceso quando comprimento + quantidade estão escolhidos */
.flyout .lengthAdvanceBtn.ready {
  background: var(--ol-1) !important;
  color: #fff !important;
  border-color: var(--ol-1) !important;
  font-weight: 700 !important;
}
.flyout .lengthAdvanceBtn.ready:hover {
  background: var(--accent-h) !important;
  border-color: var(--accent-h) !important;
}

/* Código destacado no aviso de limpar tudo */
#clearCodeBox {
  text-align: center; margin: 4px 18px 10px;
  font-family: var(--font); font-size: 26px; font-weight: 800;
  letter-spacing: 0.16em; color: var(--ol-1); user-select: all;
}
#clearCodeBox.hidden { display: none; }

/* 👆 Gestos de toque: o canvas precisa receber os eventos (sem isto o navegador
   captura o gesto para rolar/ampliar a página e pan/zoom param no touch) */
#scene3d, canvas { touch-action: none; }
html, body { overscroll-behavior: none; }