:root{
  /* modo escuro (padrão) — paleta G-Nesis: navy profundo + gradiente ciano→azul da marca */
  --bg:#0d1526;
  --topbar-bg:#0a0f1c;
  --panel:#131e34;
  --panel2:#1a2942;
  --border:#28395c;
  --text:#eef1f8;
  --text-dim:#8996b8;
  --accent:#22d3c8;
  --accent-contrast:#04211d;
  --accent-dim:#123331;
  --accent2:#3b82f6;
  --danger:#f0524a;
  --canvas-wrap-bg:#070c16;
  --canvas-bg:#101a2d;
  --scrollbar-thumb:#2c3f61;
  --shadow:rgba(0,0,0,.55);
}
:root[data-theme="light"]{
  /* modo claro — mesma paleta G-Nesis, invertida pra fundo claro */
  --bg:#eef1f6;
  --topbar-bg:#ffffff;
  --panel:#ffffff;
  --panel2:#eef2f8;
  --border:#d8e0ec;
  --text:#141b26;
  --text-dim:#5c6779;
  --accent:#0d9488;
  --accent-contrast:#ffffff;
  --accent-dim:#d6f5f1;
  --accent2:#2563eb;
  --danger:#c9463e;
  --canvas-wrap-bg:#d7dde6;
  --canvas-bg:#f4f6f9;
  --scrollbar-thumb:#c1cad6;
  --shadow:rgba(20,25,35,.12);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{ background:var(--bg); color:var(--text); font-family:'Inter',system-ui,sans-serif; font-size:13px; overflow:hidden; }
.app{display:flex; flex-direction:column; height:100vh}

/* ============================================================================
   TOPBAR — marca, navegação e área de conta/login
   ============================================================================ */
.topbar{
  display:flex; align-items:center; gap:20px; padding:8px 16px; background:var(--topbar-bg);
  border-bottom:1px solid var(--border); flex-shrink:0;
}
.topbar .brand{display:flex; align-items:center; gap:8px}
.topbar .brand .logo{
  width:28px; height:28px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  border-radius:7px; overflow:hidden;
}
.topbar .brand .logo img{ width:100%; height:100%; display:block; object-fit:cover; }
.topbar .brand b{font-size:14px; letter-spacing:.2px}
.topbar-nav{display:flex; align-items:center; gap:2px; margin-left:8px}
.topbar-nav a{
  font-size:12px; color:var(--text-dim); text-decoration:none; padding:6px 10px; border-radius:6px; cursor:default;
}
.topbar-nav a.active{color:var(--text); background:var(--panel2)}
.topbar-nav a.disabled{opacity:.45}
.topbar-nav a:not(.disabled):not(.active){cursor:pointer}
.topbar-nav a:not(.disabled):not(.active):hover{color:var(--text); background:var(--panel2)}
.topbar .spacer{flex:1}

.account{position:relative}
.account-btn{
  display:flex; align-items:center; gap:7px; background:var(--panel2); border:1px solid var(--border);
  color:var(--text); border-radius:20px; padding:5px 12px 5px 6px; font-size:12px; cursor:pointer;
}
.account-btn:hover{border-color:var(--accent)}
.account-avatar{
  width:22px; height:22px; border-radius:50%; background:var(--accent-dim); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600;
}
.account-dropdown{
  position:absolute; top:calc(100% + 8px); right:0; width:260px; background:var(--panel);
  border:1px solid var(--border); border-radius:10px; box-shadow:0 12px 32px var(--shadow);
  padding:14px; display:none; z-index:60;
}
.account-dropdown.open{display:block}
.account-dropdown h4{margin:0 0 3px; font-size:13px}
.account-dropdown .sub{font-size:11px; color:var(--text-dim); margin-bottom:12px}
.account-dropdown label{display:block; font-size:10.5px; color:var(--text-dim); margin-bottom:4px; margin-top:8px}
.account-dropdown input{
  width:100%; background:var(--panel2); border:1px solid var(--border); color:var(--text);
  border-radius:6px; padding:7px 9px; font-size:12px;
}
.account-dropdown .account-submit{
  width:100%; justify-content:center; margin-top:12px;
}
.account-note{
  margin-top:10px; font-size:10.5px; line-height:1.5; color:var(--accent);
  background:var(--accent-dim); border-radius:6px; padding:7px 9px; display:none;
}
.account-note.show{display:block}
.account-note.error{ color:var(--danger); background:rgba(240,82,74,.14); }
.account-dropdown .account-alt{font-size:11px; color:var(--text-dim); text-align:center; margin-top:10px}
.account-dropdown .account-alt a{color:var(--accent2); text-decoration:none; cursor:default}

/* ============================================================================
   SUBHEADER — controles da peça, zoom e ações rápidas
   ============================================================================ */
header{
  display:flex; align-items:center; gap:16px; padding:10px 16px; background:var(--panel);
  border-bottom:1px solid var(--border); flex-shrink:0; flex-wrap:wrap;
}
header .brand{display:flex; flex-direction:column; line-height:1.15; margin-right:4px}
header .brand b{font-size:15px; letter-spacing:.2px}
header .brand span{font-size:10.5px; color:var(--text-dim); font-family:'JetBrains Mono',monospace}
.mode-badge{
  font-size:11px; font-family:'JetBrains Mono',monospace; background:var(--accent-dim); color:var(--accent);
  padding:5px 10px; border-radius:6px; display:none; align-items:center; gap:6px;
}
.mode-badge.show{display:flex}
.field{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-dim)}
.field input{ width:58px; background:var(--panel2); border:1px solid var(--border); color:var(--text);
  border-radius:5px; padding:5px 6px; font-family:'JetBrains Mono',monospace; font-size:12px; }
.field input:focus{outline:1px solid var(--accent)}
.spacer{flex:1}
.zoom-controls{display:flex; align-items:center; gap:4px}
.zoom-controls span{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-dim); width:40px; text-align:center}

.texture-swatches{display:flex; flex-wrap:wrap; gap:8px}
.texture-swatch{
  width:44px; height:44px; padding:0; border-radius:7px; border:2px solid var(--border);
  background-size:cover; background-position:center; cursor:pointer;
}
.texture-swatch:hover{border-color:var(--accent)}
.texture-swatch.selected{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-dim)}
.texture-swatch-none{display:flex; align-items:center; justify-content:center; color:var(--text-dim); font-size:16px; background:var(--panel2)}

.app > footer{
  display:flex; align-items:center; gap:16px; padding:6px 16px; background:var(--panel);
  border-top:1px solid var(--border); flex-shrink:0;
}

button{ background:var(--panel2); border:1px solid var(--border); color:var(--text); border-radius:6px;
  padding:6px 10px; font-size:12px; cursor:pointer; font-family:inherit; display:flex; align-items:center; gap:6px; white-space:nowrap; }
button:hover{border-color:var(--accent)}
button.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-contrast); font-weight:600}
button.primary:hover{filter:brightness(1.08)}
button.ghost{background:transparent}
.lang-select{
  background:transparent; border:1px solid var(--border); color:var(--text); border-radius:6px;
  padding:6px 8px; font-size:12px; cursor:pointer; font-family:inherit;
}
.lang-select:hover{border-color:var(--accent)}
button.ghost.active{background:var(--accent-dim); color:var(--accent); border-color:var(--accent)}
button.icon-btn{padding:6px 8px}
button:disabled{opacity:.35; cursor:default}
button:disabled:hover{border-color:var(--border)}
button.small{padding:5px 8px; font-size:11px}
.btn-row{display:flex; gap:6px; flex-wrap:wrap}

/* ============================================================================
   BARRA DE CAMADAS — múltiplas "páginas" de desenho no mesmo projeto (peça/material e
   o resto da usinagem continuam compartilhados; formas e fresa são independentes por
   camada)
   ============================================================================ */
.tabbar{
  display:flex; align-items:center; gap:4px; padding:6px 12px; background:var(--panel);
  border-bottom:1px solid var(--border); flex-shrink:0; overflow-x:auto;
}
.tabbar-tab{
  display:flex; align-items:center; gap:6px; padding:6px 8px 6px 12px; border-radius:7px 7px 0 0;
  background:transparent; color:var(--text-dim); font-size:12px; cursor:pointer; white-space:nowrap;
  border:1px solid transparent; border-bottom:none;
}
.tabbar-tab:hover{background:var(--panel2); color:var(--text)}
.tabbar-tab.active{background:var(--bg); color:var(--text); border-color:var(--border); font-weight:600}
.tabbar-actions{display:none; align-items:center; gap:2px}
.tabbar-tab:hover .tabbar-actions{display:flex}
.tabbar-icon{
  background:transparent; border:none; color:var(--text-dim); font-size:12px; line-height:1; padding:3px 5px;
  border-radius:4px;
}
.tabbar-icon:hover{background:var(--accent-dim); color:var(--accent)}
.tabbar-close:hover{background:var(--danger); color:#fff}
.tabbar-add{
  background:transparent; border:1px dashed var(--border); color:var(--text-dim); border-radius:7px;
  padding:6px 10px; font-size:12px; cursor:pointer; flex-shrink:0;
}
.tabbar-add:hover{border-color:var(--accent); color:var(--accent)}

main{flex:1; display:flex; overflow:hidden; min-height:0}

.toolbar{ width:52px; background:var(--panel); border-right:1px solid var(--border);
  display:flex; flex-direction:column; align-items:center; padding:10px 0; gap:4px; flex-shrink:0; }
.tool-btn{ width:38px; height:38px; border-radius:8px; border:1px solid transparent; background:transparent;
  color:var(--text-dim); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px; }
.tool-btn:hover{background:var(--panel2); color:var(--text)}
.tool-btn.active{background:var(--accent-dim); color:var(--accent); border-color:var(--accent)}
.tool-sep{width:26px; height:1px; background:var(--border); margin:6px 0}
.toolbar-group{display:flex; flex-direction:column; align-items:center; gap:4px}

.canvas-wrap{ flex:1; overflow:auto; background:var(--canvas-wrap-bg); display:flex; align-items:flex-start;
  justify-content:flex-start; padding:40px; position:relative; }
canvas{background:var(--canvas-bg); box-shadow:0 0 0 1px var(--border), 0 10px 40px var(--shadow); cursor:crosshair}

.canvas-wrap-3d{padding:0}
.viewport3d-wrap{width:100%; height:100%; position:relative}
.viewport3d-wrap canvas{cursor:pointer}

/* ============================================================================
   SIDEBAR — abas por categoria
   ============================================================================ */
.sidebar{ width:300px; background:var(--panel); border-left:1px solid var(--border);
  display:flex; flex-direction:column; flex-shrink:0; overflow:hidden; }
.sidebar-tabs{ display:flex; border-bottom:1px solid var(--border); flex-shrink:0; }
.sidebar-tab{
  flex:1; background:transparent; border:none; border-radius:0; color:var(--text-dim);
  font-size:11.5px; font-weight:600; padding:11px 6px; cursor:pointer; justify-content:center;
  border-bottom:2px solid transparent;
}
.sidebar-tab:hover{color:var(--text)}
.sidebar-tab.active{color:var(--accent); border-bottom-color:var(--accent)}
.sidebar-panels{flex:1; overflow-y:auto}
.tab-panel{display:none}
.tab-panel.active{display:block}

.panel-section{border-bottom:1px solid var(--border); padding:14px 16px}
.panel-section h3{ margin:0 0 10px; font-size:10.5px; text-transform:uppercase; letter-spacing:.09em;
  color:var(--text-dim); font-weight:600; }
.layer-row{ display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:6px; cursor:pointer;
  font-size:12px; color:var(--text-dim); }
.layer-row:hover{background:var(--panel2)}
.layer-row.selected{background:var(--accent-dim); color:var(--text)}
.layer-row .tag{ font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--accent); width:16px; text-align:center; }
.layer-row .name{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.layer-row .row-actions{display:none; gap:2px}
.layer-row:hover .row-actions{display:flex}
.layer-row .row-actions button{padding:2px 5px; font-size:10px; border-radius:4px}
.layer-row.locked .name{font-style:italic; opacity:.75}
.layer-row-child{padding-left:24px; font-size:11px; opacity:.85}
.layer-row-child .tag{color:var(--text-dim)}
.empty-msg{color:var(--text-dim); font-size:11.5px; font-style:italic; padding:4px 2px}

.align-buttons{display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.align-buttons button{padding:6px 4px; font-size:14px; justify-content:center}

.prop-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.prop-grid label{display:flex; flex-direction:column; gap:4px; font-size:10.5px; color:var(--text-dim)}
.prop-grid input, .settings-grid input, .prop-grid select, .settings-grid select,
.machine-row input{ background:var(--panel2); border:1px solid var(--border); color:var(--text);
  border-radius:5px; padding:6px 7px; font-family:'JetBrains Mono',monospace; font-size:12px; width:100%; }
.prop-grid select, .settings-grid select{font-family:'Inter',system-ui,sans-serif; cursor:pointer}
.settings-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px 8px}
.settings-grid label{display:flex; flex-direction:column; gap:4px; font-size:10.5px; color:var(--text-dim)}
.checkbox-row{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text-dim); margin-top:8px}
.time-estimate{
  font-family:'JetBrains Mono',monospace; font-size:18px; font-weight:600; color:var(--accent);
  background:var(--panel2); border:1px solid var(--border); border-radius:8px; padding:10px 12px;
}
.export-buttons{display:flex; flex-direction:column; gap:8px}
.export-buttons button{justify-content:center; padding:9px}
.hint{font-size:11px; color:var(--text-dim); line-height:1.5; margin-top:8px}
.hint b{color:var(--text)}
code.mini{font-family:'JetBrains Mono',monospace; background:var(--panel2); padding:1px 5px; border-radius:4px; font-size:11px}

input[type="color"]{ padding:2px; height:32px; cursor:pointer; }
textarea{ background:var(--panel2); border:1px solid var(--border); color:var(--text);
  border-radius:5px; padding:6px 7px; font-family:'Inter',system-ui,sans-serif; font-size:12px; }
textarea:focus{ outline:1px solid var(--accent); }
.depth-gauge{ height:14px; background:var(--panel2); border:1px solid var(--border); border-radius:7px; margin-top:10px; overflow:hidden; }
.depth-gauge-fill{ height:100%; background:var(--accent); width:0%; transition:width .15s, background .15s; }

.modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; z-index:50; }
.modal-backdrop.open{display:flex}
.modal{ background:var(--panel); border:1px solid var(--border); border-radius:10px; width:640px; max-width:92vw;
  max-height:82vh; display:flex; flex-direction:column; overflow:hidden; }
.modal header{background:var(--panel2)}
.modal pre{ margin:0; padding:14px 16px; overflow:auto; font-family:'JetBrains Mono',monospace; font-size:11.5px;
  color:var(--text-dim); line-height:1.6; flex:1; }
.modal .modal-footer{display:flex; justify-content:flex-end; gap:8px; padding:12px 16px; border-top:1px solid var(--border)}

.popup-modal{width:420px}

.trace-modal{width:520px}
.trace-body{padding:16px; display:flex; flex-direction:column; gap:12px}
.trace-preview{width:100%; max-height:280px; height:auto; object-fit:contain; background:#1a1a1a; border-radius:8px; border:1px solid var(--border); image-rendering:pixelated}
.popup-body{padding:16px; white-space:pre-line; font-size:13px; line-height:1.6; color:var(--text)}

/* TOOLTIPS — botão ⓘ ao lado de um título de seção + balão sob demanda (js/tooltip.js) */
.info-btn{
  display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px;
  border-radius:50%; padding:0; margin-left:6px; font-size:12px; line-height:1;
  background:var(--panel2); border:1px solid var(--border); color:var(--muted, var(--text));
  vertical-align:middle; cursor:pointer;
}
.info-btn:hover{ color:var(--text); border-color:var(--accent, var(--border)); }
.info-tooltip-bubble{
  position:absolute; z-index:1000; width:min(340px, calc(100vw - 20px)); padding:12px 14px;
  background:var(--panel); border:1px solid var(--border); border-radius:8px;
  box-shadow:0 12px 32px var(--shadow); font-size:12.5px; line-height:1.6; color:var(--text);
}

/* CHECKLIST DE PRÉ-USINAGEM (js/jobChecklist.js) */
.checklist-modal{width:440px}
.checklist-body{padding:16px; display:flex; flex-direction:column; gap:10px}
.checklist-info{font-size:12px; line-height:1.5; color:var(--text-dim); background:var(--panel2); border-radius:6px; padding:8px 10px}
.checklist-item{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text)}
.checklist-item .checklist-icon{font-size:14px}
.checklist-item .link-btn{
  margin-left:auto; background:none; border:none; color:var(--accent); font-size:11.5px;
  text-decoration:underline; cursor:pointer; padding:0;
}
.checklist-body .checkbox-row{margin-top:0; font-size:13px; color:var(--text)}

.new-project-body{padding:16px}
.new-project-choices{display:flex; flex-direction:column; gap:10px; margin-top:12px}
.new-project-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left;
  background:var(--panel2); border:1px solid var(--border); border-radius:8px; padding:14px 16px; cursor:pointer;
}
.new-project-card:hover{border-color:var(--accent)}
.new-project-card b{font-size:13px; color:var(--text)}
.new-project-card span{font-size:11.5px; color:var(--text-dim)}
.new-project-card.locked{opacity:.55}
.new-project-card.locked b::after{content:' 🔒'}

.help-modal{width:640px}
.help-content{padding:6px 20px 18px; overflow:auto; font-size:12.5px; line-height:1.6; color:var(--text-dim)}
.help-content h4{margin:16px 0 6px; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--accent)}
.help-content h4:first-child{margin-top:4px}
.help-content p{margin:0 0 4px}
.help-content ul{margin:4px 0; padding-left:18px}
.help-content li{margin-bottom:5px}
.help-content b{color:var(--text)}

.preview3d-modal{width:460px}
.preview3d-body{padding:0}
.preview3d-canvas-wrap{
  width:100%; height:360px; background:var(--canvas-wrap-bg); position:relative; overflow:hidden;
}
.preview3d-canvas-wrap canvas{display:block; width:100%; height:100%}
.preview3d-loading{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--text-dim); font-size:12px;
}

.machine-modal{width:480px}
.machine-modal header{justify-content:space-between}
.machine-body{overflow-y:auto; padding:14px 16px 4px}
.machine-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px}
.machine-row .field{gap:6px}
.machine-row .field input{width:80px}

.grbl-status{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:600; letter-spacing:.03em;
  padding:4px 10px; border-radius:20px; text-transform:uppercase;
  background:var(--panel2); color:var(--text-dim); border:1px solid var(--border);
}
.grbl-status[data-state="idle"]{background:#1c3a2c; color:#5fd68a; border-color:#2c5c42}
.grbl-status[data-state="run"], .grbl-status[data-state="jog"]{background:#3a2c14; color:var(--accent); border-color:#5c4620}
.grbl-status[data-state="hold"], .grbl-status[data-state="door"]{background:#3a3414; color:#e0c93e; border-color:#5c5220}
.grbl-status[data-state="alarm"]{background:#3a1c1c; color:var(--danger); border-color:#5c2c2c}
:root[data-theme="light"] .grbl-status[data-state="idle"]{background:#e1f5e8; color:#1f8a4d; border-color:#bfe8cf}
:root[data-theme="light"] .grbl-status[data-state="run"], :root[data-theme="light"] .grbl-status[data-state="jog"]{background:#fbe9d2; color:#b5711f; border-color:#f3d3a3}
:root[data-theme="light"] .grbl-status[data-state="hold"], :root[data-theme="light"] .grbl-status[data-state="door"]{background:#fbf3d2; color:#a3901a; border-color:#f0e3a3}
:root[data-theme="light"] .grbl-status[data-state="alarm"]{background:#fbdedc; color:#b5342b; border-color:#f0bcb8}

.grbl-pos-row{
  font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-dim); gap:18px;
  background:var(--panel2); border:1px solid var(--border); border-radius:8px; padding:8px 12px;
}
.grbl-pos-row b{color:var(--text)}

.grbl-console{
  margin:0; padding:10px 12px; height:140px; overflow-y:auto; background:var(--panel2);
  border:1px solid var(--border); border-radius:8px; font-family:'JetBrains Mono',monospace;
  font-size:11px; line-height:1.55; color:var(--text-dim); white-space:pre-wrap; word-break:break-all;
}
.grbl-console .tx{color:var(--accent2)}
.grbl-console .err{color:var(--danger)}

.jog-layout{display:flex; align-items:center; justify-content:center; gap:18px}
.jog-grid{display:grid; grid-template-columns:repeat(3,38px); grid-template-rows:repeat(3,38px); gap:4px}
.jog-grid button{width:38px; height:38px; padding:0; justify-content:center}
.jog-z-col{display:flex; flex-direction:column; gap:4px}
.jog-z-col button{width:46px; height:38px; padding:0; justify-content:center}

.probe-indicator{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:600; letter-spacing:.03em;
  padding:3px 10px; border-radius:20px; text-transform:uppercase;
  background:var(--panel2); color:var(--text-dim); border:1px solid var(--border);
}
.probe-indicator[data-state="touching"]{background:#3a1c1c; color:var(--danger); border-color:#5c2c2c}
.probe-indicator[data-state="free"]{background:#1c3a2c; color:#5fd68a; border-color:#2c5c42}
:root[data-theme="light"] .probe-indicator[data-state="touching"]{background:#fbdedc; color:#b5342b; border-color:#f0bcb8}
:root[data-theme="light"] .probe-indicator[data-state="free"]{background:#e1f5e8; color:#1f8a4d; border-color:#bfe8cf}

.shortcuts-modal{width:420px}
.shortcuts-list{padding:6px 16px 16px; overflow:auto}
.shortcuts-list .row{ display:flex; align-items:center; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--border); font-size:12px; color:var(--text-dim); }
.shortcuts-list .row:last-child{border-bottom:none}
.shortcuts-list kbd{
  font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text); background:var(--panel2);
  border:1px solid var(--border); border-radius:5px; padding:2px 7px;
}

::-webkit-scrollbar{width:9px; height:9px}
::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb); border-radius:5px}
::-webkit-scrollbar-track{background:transparent}