/* LadderLab 2D: compact application chrome, full-height work surfaces. */
:root {
  --ink: #233141;
  --muted: #667383;
  --line: #d4dae1;
  --paper: #fff;
  --green: #19765a;
  --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --accent: #2667aa;
}
html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  background: #edf0f4;
  color: var(--ink);
}
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
button,
.button,
input,
select {
  font-family: inherit;
}
button,
.button {
  border-radius: 3px;
  min-height: 26px;
  padding: 3px 8px;
  font-size: 12px;
  box-shadow: none;
}
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
input,
select {
  min-height: 28px;
  border-radius: 3px;
  font-size: 12px;
  padding: 4px 7px;
}
button:hover {
  background: #e7eff8;
}
.primary {
  background: var(--green);
  color: white;
  border-color: var(--green);
}
.app.studio-shell {
  height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.studio-shell .topbar {
  height: 38px;
  min-height: 38px;
  flex: 0 0 38px;
  padding: 0 10px;
  gap: 12px;
  background: #f6f7f9;
  color: #273644;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
.brand {
  gap: 6px;
  flex-shrink: 0;
}
.brand strong {
  font-size: 14px;
  color: #273644;
  letter-spacing: -0.4px;
}
.brand img {
  width: 23px;
  height: 23px;
}
.brand .edition {
  font: 9px var(--mono);
  margin-left: 2px;
  color: #737f8b;
}
.topbar button {
  color: var(--ink);
  border: 1px solid transparent;
  background: transparent;
  min-height: 26px;
  padding: 3px 7px;
}
.topbar button:hover {
  background: #e3e9ee;
}
.topbar .primary {
  background: #187659;
  color: #fff;
  padding: 4px 12px;
}
.file-actions {
  gap: 1px;
  display: flex;
  align-items: center;
}
.file-actions kbd {
  display: none;
}
.project-heading {
  display: flex;
  align-items: center;
  min-width: 80px;
  flex: 1;
  gap: 6px;
}
.project-heading input {
  width: 100%;
  min-width: 50px;
  max-width: 260px;
  font-size: 12px;
  font-weight: 500;
  background: transparent;
  border: 1px solid transparent;
  padding: 3px 6px;
  height: 26px;
}
.project-heading input:focus {
  border-color: #7badd9;
  background: white;
}
.project-heading #save-state {
  font-size: 9px;
  white-space: nowrap;
  color: #7d8992;
}
.run-controls {
  gap: 5px;
  display: flex;
  flex-shrink: 0;
}
.run-controls > span {
  font: 9px var(--mono);
  white-space: nowrap;
  margin: 0;
}
.connection-summary {
  display: none;
}
.run-controls i {
  width: 5px;
  height: 5px;
  margin-right: 3px;
}
.topbar #connect-board {
  border: 1px solid #c7d1dc;
  font-size: 11px;
}
.studio-shell .workspace-tabs {
  height: 34px;
  min-height: 34px;
  flex: 0 0 34px;
  padding: 0 8px;
  gap: 5px;
  align-items: center;
  overflow: visible;
  background: #f6f7f9;
}
.workspace-tabs > button {
  font-size: 11px;
  padding: 3px 7px;
  min-height: 26px;
  border-radius: 3px;
  color: #394956;
}
.view-tabs {
  display: flex;
  align-items: center;
  gap: 1px;
  border-right: 1px solid var(--line);
  padding-right: 6px;
}
.view-tabs button {
  font-size: 11px;
  background: transparent;
  border: 1px solid transparent;
  white-space: nowrap;
}
.view-tabs button.active {
  background: #dceafa;
  border-color: #b6cee6;
  color: #205a91;
}
.history-controls {
  margin: 0 5px 0 0;
  gap: 0;
  border-right: 1px solid var(--line);
  padding-right: 5px;
}
.history-controls button {
  font-size: 18px;
  width: 26px;
  min-height: 26px;
}
.toolbar-spacer {
  flex: 1;
}
#show-board small {
  font-size: 10px;
  color: #798693;
  margin-left: 3px;
}
#show-board {
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.studio-shell .workbench {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--library-width, 156px) minmax(0, 1fr);
  position: relative;
  overflow: hidden;
}
.studio-shell .workbench.hide-library {
  grid-template-columns: minmax(0, 1fr);
}
.studio-shell .sidebar {
  min-width: 0;
  width: auto;
  height: 100%;
  border-right: 1px solid var(--line);
  background: #f5f7f9;
  display: flex;
  overflow: hidden;
  padding: 0 6px;
}
.sidebar .library-tabs {
  margin: 6px 0;
  background: #e7ecf1;
  padding: 2px;
  flex-shrink: 0;
}
.library-tabs button {
  font-size: 11px;
  min-height: 25px;
}
.library-tabs button.active {
  color: var(--accent);
  box-shadow: none;
}
.sidebar #component-search {
  display: block;
  min-height: 27px;
  height: 27px;
  margin: 0 0 4px;
  padding: 4px 7px;
  font-size: 11px;
  flex-shrink: 0;
  width: 100%;
}
.studio-shell .library-section {
  padding: 0;
  overflow: auto;
  flex: 1;
  min-height: 0;
  border: 0;
}
.component-group {
  margin: 12px 5px 4px;
  font: 9px var(--mono);
  letter-spacing: 0.6px;
  color: #61717e;
}
.plant-library-item {
  min-height: 44px;
  padding: 4px 3px;
  gap: 7px;
  font-size: 11px;
  width: 100%;
  max-width: none;
  min-width: 0;
  flex-direction: row;
  text-align: left;
  flex-shrink: 0;
  border: 1px solid transparent;
}
.plant-library-item:hover {
  border-color: #b4cce1;
  background: #e7eff8;
}
.plant-library-item small,
.drag-grip {
  display: none;
}
.component-icon {
  width: 38px;
  height: 32px;
  background: transparent;
  border: 0;
  padding: 0;
  flex-shrink: 0;
  border-radius: 0;
}
.component-icon svg,
.component-icon img {
  width: 36px;
  height: 30px;
  object-fit: contain;
}
.library-program {
  margin-top: 4px;
  flex-shrink: 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  height: 28px;
}
.library-program small {
  font: 9px var(--mono);
  color: #738393;
}
#library {
  display: block;
  width: auto;
}
.library-tool {
  height: 48px;
  min-height: 48px;
  min-width: 0;
  width: 100%;
  padding: 3px 4px;
  display: flex;
  flex-direction: row;
  gap: 7px;
  font-size: 10px;
  margin: 0;
  border: 1px solid transparent;
  background: transparent;
}
.library-tool:hover {
  border-color: #b4cce1;
  background: #e7eff8;
}
.library-symbol {
  width: 44px;
  font: 18px var(--mono);
  flex-shrink: 0;
  color: #34576b;
}
.studio-shell .workspace {
  width: auto;
  display: flex;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.studio-shell .workspace-content {
  flex: 1;
  min-height: 0;
  min-width: 0;
  max-height: none;
  height: auto;
  display: flex;
  overflow: hidden;
  background: #fff;
}
.studio-shell .ladder-pane,
.studio-shell .plant-pane {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  overflow: hidden;
  position: relative;
}
.workspace-content[data-view="ladder"] .plant-pane,
.workspace-content[data-view="plant"] .ladder-pane {
  display: none;
}
.workspace-content:not([data-view="split"]) #canvas-divider {
  display: none;
}
.workspace-content[data-view="split"] {
  flex-direction: row;
}
.workspace-content[data-view="split"] .ladder-pane {
  flex: var(--split-ratio, 50) 1 0;
}
.workspace-content[data-view="split"] .plant-pane {
  flex: calc(100 - var(--split-ratio, 50)) 1 0;
  border: 0;
}
.workbench[data-direction="column"] .workspace-content[data-view="split"] {
  flex-direction: column;
}
#canvas-divider {
  flex: 0 0 5px;
  background: #d5dce4;
  border: 1px solid #c5cfd9;
  cursor: col-resize;
  touch-action: none;
  z-index: 5;
}
#canvas-divider:hover,
#canvas-divider:focus {
  background: #96b9dc;
  outline: 0;
}
.workbench[data-direction="column"] #canvas-divider {
  cursor: row-resize;
}
.studio-shell .canvas-toolbar,
.studio-shell .plant-toolbar {
  height: 34px;
  min-height: 34px;
  flex: 0 0 34px;
  padding: 0 8px;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow: visible;
  z-index: 12;
}
.canvas-toolbar > strong {
  font: 600 10px var(--mono);
  white-space: nowrap;
  color: #426277;
}
.canvas-toolbar > strong span {
  font: 11px Arial;
  color: #536678;
  margin-left: 5px;
}
.ladder-tools,
.zoom-controls {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  margin-left: auto;
  width: auto;
}
.canvas-toolbar button,
.plant-toolbar button,
.plant-toolbar .button {
  min-height: 25px;
  font-size: 10px;
  padding: 3px 6px;
  white-space: nowrap;
}
.ladder-tools span {
  font: 9px var(--mono);
  color: #657a8d;
  padding: 0 3px;
}
.pane-title {
  font: 600 10px var(--mono);
  color: #426277;
  flex-shrink: 0;
}
.editor-modes {
  padding: 1px;
  border-radius: 3px;
  background: #edf1f5;
  gap: 0;
}
.editor-modes button {
  font-size: 10px;
  padding: 3px 6px;
  min-height: 24px;
}
.editor-modes button.active {
  box-shadow: none;
  background: #dceaf7;
  color: #245f92;
}
.zoom-controls select {
  width: 56px;
  min-height: 25px;
  height: 25px;
  padding: 2px;
  font: 10px var(--mono);
}
.zoom-controls > button:not(:last-child) {
  width: auto;
  min-width: 22px;
  font-size: 11px;
}
.tool-menu {
  position: relative;
  flex-shrink: 0;
}
.tool-menu > summary {
  cursor: pointer;
  list-style: none;
  padding: 5px 7px;
  font-size: 10px;
  border-radius: 3px;
}
.tool-menu[open] > summary {
  background: #dceaf7;
}
.tool-popover {
  position: absolute;
  top: 30px;
  left: 0;
  width: 248px;
  padding: 12px;
  background: white;
  border: 1px solid #bdcbd7;
  box-shadow: 0 6px 20px #1a334522;
  border-radius: 4px;
  z-index: 100;
}
.tool-popover label {
  display: block;
  font-size: 11px;
  margin-bottom: 10px;
}
.tool-popover label select {
  width: 100%;
  margin-top: 5px;
}
.tool-popover label input {
  min-height: 0;
  width: auto;
}
.tool-popover p {
  font-size: 11px;
  line-height: 1.5;
  color: #647686;
}
.tool-popover button {
  margin-bottom: 10px;
}
.tool-popover .button {
  display: inline-block;
}
.plant-toolbar:has(.tool-menu[open]) {
  z-index: 90;
}
.studio-shell .plant-viewport {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: #e6ebf0;
  touch-action: none;
  overscroll-behavior: contain;
}
#scene-sizer {
  position: relative;
  margin: 0;
}
#plant-stage {
  background-color: #fff;
  background-image: radial-gradient(#dbe2e8 0.75px, transparent 0.75px);
  background-size: 20px 20px;
  transform-origin: 0 0;
}
#plant-stage[data-mode="operate"] {
  background-color: #fff;
}
.studio-shell .scene-status {
  height: 21px;
  min-height: 21px;
  flex: 0 0 21px;
  padding: 2px 8px;
  gap: 12px;
  background: #f8fafc;
  border-top: 1px solid #e2e6eb;
  font: 9px var(--mono);
  color: #71808d;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}
.scene-status #scene-time {
  margin-left: auto;
}
.scene-status #scene-mode-label {
  font-size: 9px;
  color: #426f82;
}
.studio-shell .statusbar {
  height: 23px;
  min-height: 23px;
  flex: 0 0 23px;
  padding: 2px 8px;
  gap: 12px;
  background: #f3f6f9;
  border-top: 1px solid #cdd7e0;
  font: 10px Arial;
  display: flex;
  align-items: center;
  color: #526574;
  overflow: visible;
  position: relative;
}
.statusbar #status-message {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.statusbar #scan-time {
  font: 9px var(--mono);
  white-space: nowrap;
}
#diagnostics-panel {
  position: static;
  flex-shrink: 0;
  margin: 0;
  font-size: 10px;
}
#diagnostics-summary {
  cursor: pointer;
  font-size: 10px;
  max-width: 235px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #397456;
  list-style: none;
}
#diagnostics-summary::before {
  content: "●";
  margin-right: 5px;
  font-size: 7px;
}
.has-errors #diagnostics-summary {
  color: #ab4938;
}
#diagnostics-list {
  position: absolute;
  right: 8px;
  bottom: 25px;
  width: min(500px, 90vw);
  background: white;
  box-shadow: 0 2px 15px #243e5822;
  border: 1px solid var(--line);
  padding: 12px;
  max-height: 240px;
  overflow: auto;
  z-index: 90;
}
.diagnostic {
  display: block;
  text-align: left;
  width: 100%;
  border: 0;
  background: transparent;
  font-size: 12px;
  padding: 8px;
}
.diagnostic.error {
  color: #b24436;
}
.diagnostic.warning {
  color: #8c6b25;
}
.studio-shell .inspector {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: var(--inspector-width, 280px);
  max-width: 92vw;
  min-width: 0;
  display: block;
  background: #fbfcfd;
  border-left: 1px solid #bac8d6;
  box-shadow: -5px 0 15px #25415f14;
  overflow: auto;
  z-index: 50;
}
.inspector-title {
  height: 33px;
  min-height: 33px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  position: sticky;
  top: 0;
  background: #f1f5f9;
  z-index: 4;
}
.inspector-title button {
  font-size: 18px;
  min-height: 24px;
  padding: 0 6px;
  border: 0;
  background: transparent;
}
#inspector-content {
  padding: 12px;
}
.inspector h2 {
  font-size: 15px;
  margin: 8px 0 10px;
}
.inspector .eyebrow {
  font: 9px var(--mono);
}
.inspector p.hint {
  font-size: 11px;
  line-height: 1.5;
  margin: 5px 0 12px;
}
.inspector label {
  font-size: 11px;
  gap: 4px;
  margin: 8px 0;
  display: block;
}
.inspector input,
.inspector select {
  width: 100%;
  min-height: 28px;
  margin-top: 4px;
  font-size: 12px;
}
.inspector .large-symbol {
  font-size: 24px;
  margin: 4px 0;
}
.inspector .pin-assignment {
  padding: 8px;
  margin: 10px 0;
}
.inspector .full-width {
  margin-top: 6px;
  width: 100%;
}
.inspector .button-row {
  gap: 5px;
  margin-top: 6px;
}
.inspector .check-label input {
  width: auto;
  min-height: 0;
  margin: 0;
}
.inspector .scene-layers,
.inspector .io-monitor {
  padding: 0;
  border: 0;
  border-top: 1px solid var(--line);
  max-height: none;
  display: block;
}
.inspector details > summary {
  padding: 10px 12px;
  cursor: pointer;
  font-size: 11px;
  color: #526d82;
}
.inspector #scene-layers,
.inspector #io-monitor {
  padding: 0 10px 10px;
  max-height: 240px;
  overflow: auto;
}
.panel-grip {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 5px;
  right: 0;
  cursor: col-resize;
  touch-action: none;
  z-index: 8;
}
.inspector .panel-grip {
  left: 0;
  right: auto;
}
.panel-grip:hover {
  background: #96b9dc;
}
.property-dialog {
  width: 560px;
  max-width: 94vw;
}
.property-dialog #inspector-content {
  padding: 0;
}
.property-dialog .large-symbol {
  font: 30px var(--mono);
  color: #31556e;
}
.property-dialog label {
  display: block;
  font-size: 12px;
  margin: 8px 0;
}
.property-dialog input,
.property-dialog select {
  width: 100%;
  margin-top: 4px;
}
.property-dialog .check-label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.property-dialog input[type="checkbox"] {
  width: auto;
  min-height: 0;
}
.property-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 10px;
}
.property-dialog .property-grid {
  grid-template-columns: repeat(3, 1fr);
}
/* Diagram: all geometry is shared with ladder-geometry.js. Symbols have no cards. */
.studio-shell .ladder-sheet {
  padding: 0;
  flex: 1;
  overflow: auto;
  background: white;
  min-height: 0;
  max-height: none;
}
.sheet-heading {
  height: 23px;
  margin: 0;
  padding: 6px 16px;
  display: flex;
  justify-content: space-between;
  font: 8px var(--mono);
  letter-spacing: 0.4px;
  color: #8996a3;
  white-space: nowrap;
}
.rung-block {
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px dashed #d2dce5;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.rung-block.selected {
  border-left: 0;
  background: #fafdff;
}
.rung-header {
  height: 23px;
  min-height: 23px;
  margin: 0;
  padding: 1px 12px;
  gap: 7px;
  background: #f7f9fb;
  border: 0;
  display: flex;
  align-items: center;
}
.rung-number {
  font: 10px var(--mono);
  color: #7790a7;
  background: transparent;
  padding: 0;
  border: 0;
}
.rung-comment {
  font: 10px Arial;
  color: #657785;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.rung-header button {
  min-height: 20px;
  font-size: 10px;
  padding: 1px 6px;
  border: 0;
  background: transparent;
  color: #53708a;
}
.rung-header .wire-mode {
  margin: 0;
  border: 0;
}
.rung-header button:hover {
  background: #deebf7;
}
.graph-circuit {
  display: block;
  padding: 0 !important;
  border: 0;
  overflow: visible;
  background: transparent;
}
.graph-circuit::before,
.graph-circuit::after {
  display: none;
}
.graph-board {
  position: relative;
  min-width: 600px;
  background-image: radial-gradient(#dce5ec 0.65px, transparent 0.65px);
  background-size: 10px 10px;
  touch-action: pan-x pan-y;
}
.graph-wires {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}
.graph-rail {
  fill: none;
  stroke: #8796a3;
  stroke-width: 2;
}
.wire {
  fill: none;
  stroke: #354c60;
  stroke-width: 1.7;
  pointer-events: stroke;
  cursor: pointer;
  stroke-linejoin: round;
}
.wire.selected-wire {
  stroke: #2674b4;
  stroke-width: 3;
}
.wire:hover,
.wire:focus {
  stroke: #2674b4;
  stroke-width: 4;
  outline: 0;
}
.wire.live {
  stroke: #19865b;
  stroke-width: 2.3;
}
.wire-preview {
  fill: none;
  stroke: #3188c3;
  stroke-width: 1.8;
  stroke-dasharray: 5 3;
  pointer-events: none;
}
.graph-node {
  position: absolute;
  width: 100px;
  height: 72px;
}
.graph-node .ladder-cell {
  width: 100px;
  min-width: 100px;
  height: 72px;
  min-height: 72px;
  position: relative;
  display: block;
  border: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  cursor: grab;
  touch-action: none;
  color: #253e51;
}
.graph-node .ladder-cell:hover {
  background: #e4eff750;
}
.graph-node .ladder-cell.selected {
  outline: 1px dashed #3088be;
  outline-offset: 3px;
  background: #dcebf640;
  box-shadow: none;
}
.graph-node .ladder-cell.activo {
  color: #167849;
  background: #e9f8ee66;
}
.graph-node .ladder-cell::before,
.graph-node .ladder-cell::after {
  display: none;
}
.electrical-symbol {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 72px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  overflow: visible;
}
.electrical-symbol text {
  font: 11px var(--mono);
  text-anchor: middle;
  stroke: none;
  fill: currentColor;
}
.cell-address {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  font: 9px var(--mono);
  color: #536d82;
  line-height: 11px;
  text-align: center;
}
.cell-symbol {
  display: none;
}
.cell-tag {
  position: absolute;
  top: 56px;
  left: -10px;
  width: 120px;
  max-width: 120px;
  font: 9px Arial;
  color: #354d60;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  line-height: 11px;
}
.cell-pin {
  display: none;
}
.graph-node .ladder-cell[data-timer="true"] .cell-tag {
  top: 54px;
}
.graph-node .ladder-cell[data-timer="true"] .cell-pin {
  display: block;
  position: absolute;
  top: 66px;
  width: 100%;
  text-align: center;
  font: 8px var(--mono);
}
.timer-progress {
  position: absolute;
  top: 49px;
  left: 24px;
  height: 2px;
  width: calc(var(--timer-progress, 0%) * 0.52);
  background: #2aa069;
}
.port {
  position: absolute;
  width: 10px;
  height: 10px;
  min-height: 0;
  padding: 0;
  border: 1.5px solid #4c7394;
  border-radius: 50%;
  background: white;
  z-index: 5;
  cursor: crosshair;
  touch-action: none;
}
.port::before {
  content: "";
  position: absolute;
  inset: -7px;
}
.port:hover,
.port:focus-visible,
.port.armed,
.port.snap-target {
  background: #3a94ca;
  box-shadow: 0 0 0 5px #3a94ca22;
  outline: 0;
}
.input-port {
  left: -5px;
  top: 31px;
}
.output-port {
  right: -5px;
  top: 31px;
}
.wire-hint {
  display: none;
}
.add-rung-bottom {
  margin: 10px 16px;
  padding: 6px 16px;
  border: 1px dashed #bfcddb;
  border-radius: 3px;
  width: calc(100% - 32px);
  min-height: 30px;
  font-size: 11px;
  color: #557791;
  background: #f8fbfe;
}
#insert-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
#insert-options button {
  text-align: left;
  padding: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
}
#insert-options span {
  font: 15px var(--mono);
}
#panels-dialog label {
  display: block;
  margin: 12px 0;
  font-size: 12px;
}
#panels-dialog input[type="range"] {
  display: block;
  width: 100%;
  padding: 0;
}
#panels-dialog .check-label {
  display: flex;
  gap: 8px;
  align-items: center;
}
.arduino-dialog {
  width: 850px;
  max-width: 94vw;
}
.arduino-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.arduino-dialog textarea {
  display: block;
  width: 100%;
  min-height: 90px;
  font: 12px/1.5 var(--mono);
  margin: 5px 0 12px;
  resize: vertical;
}
.arduino-dialog pre {
  max-height: 250px;
  overflow: auto;
  background: #162a38;
  color: #e2eef4;
  padding: 12px;
  font: 11px/1.6 var(--mono);
}
.arduino-dialog p {
  font-size: 12px;
  line-height: 1.6;
}
.arduino-dialog .dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.top-library .sidebar {
  grid-column: 1/-1;
  max-height: 78px;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  padding: 4px 8px;
}
.studio-shell .workbench.top-library {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 78px minmax(0, 1fr);
}
.top-library.hide-library {
  grid-template-rows: minmax(0, 1fr);
}
.top-library .library-tabs {
  flex-direction: column;
  width: 65px;
  margin: 0;
}
.top-library #component-search {
  width: 100px;
  margin: 0;
}
.top-library .library-section {
  overflow: auto;
}
.top-library #plant-library,
.top-library #library {
  display: flex;
  gap: 3px;
  width: max-content;
}
.top-library .component-group,
.top-library .library-program,
.top-library .sidebar .panel-grip {
  display: none;
}
.top-library .plant-library-item,
.top-library .library-tool {
  width: 98px;
  height: 61px;
  min-height: 61px;
  min-width: 98px;
  max-width: 98px;
  flex-direction: column;
  font-size: 9px;
  text-align: center;
  gap: 1px;
  padding: 1px;
}
.top-library .component-icon {
  height: 32px;
}
.top-library .library-symbol {
  height: 29px;
}
.studio-shell.focus-mode .topbar,
.studio-shell.focus-mode .sidebar,
.studio-shell.focus-mode .inspector {
  display: none !important;
}
.studio-shell.focus-mode .workbench {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.studio-shell.focus-mode .workspace-tabs {
  height: 28px;
  min-height: 28px;
  flex-basis: 28px;
}
.studio-shell.focus-mode .workspace-tabs > button:not(#focus-workspace),
.studio-shell.focus-mode .history-controls {
  display: none;
}
@media (max-width: 1000px) {
  .project-heading #save-state,
  .brand .edition,
  .run-controls > span {
    display: none;
  }
  .canvas-toolbar > strong span,
  .pane-title {
    display: none;
  }
  .studio-shell .topbar {
    gap: 7px;
  }
  .workspace-tabs #show-board small {
    display: none;
  }
  .workbench[data-direction="row"] .plant-toolbar {
    gap: 2px;
    padding: 0 4px;
  }
  .workbench[data-direction="row"] .plant-toolbar #plant-image-add {
    display: none;
  }
  .workbench[data-direction="row"] .canvas-toolbar {
    padding: 0 4px;
  }
  .workbench[data-direction="row"] .canvas-toolbar > strong {
    display: none;
  }
  .workbench[data-direction="row"] .ladder-tools {
    margin-left: 0;
    flex: 1;
    justify-content: flex-end;
  }
}
@media (max-width: 650px) {
  .studio-shell .topbar {
    height: 36px;
    min-height: 36px;
    flex-basis: 36px;
    padding: 0 5px;
    gap: 5px;
  }
  .brand strong,
  .brand .edition,
  .project-heading #save-state,
  #step {
    display: none;
  }
  .brand img {
    width: 21px;
    height: 21px;
  }
  .topbar .file-actions {
    gap: 0;
  }
  .topbar button {
    font-size: 10px;
    padding: 3px 5px;
  }
  .project-heading input {
    font-size: 11px;
  }
  .topbar .primary {
    padding: 4px 7px;
    min-height: 28px;
  }
  .run-controls {
    width: auto;
    margin: 0;
  }
  .studio-shell .workspace-tabs {
    gap: 2px;
    padding: 0 4px;
    height: 34px;
    flex-basis: 34px;
    min-height: 34px;
    overflow-x: auto;
  }
  .workspace-tabs > button,
  .view-tabs button {
    font-size: 10px;
    padding: 3px 5px;
    white-space: nowrap;
  }
  .history-controls,
  .workspace-tabs #open-arduino,
  .workspace-tabs #show-board {
    display: none;
  }
  .workspace-tabs .toolbar-spacer {
    min-width: 0;
  }
  .studio-shell .workbench {
    grid-template-columns: 1fr;
  }
  .studio-shell .sidebar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 166px;
    z-index: 60;
    box-shadow: 4px 0 15px #314d6622;
  }
  .studio-shell .workbench.top-library {
    grid-template-rows: 1fr;
  }
  .top-library .sidebar {
    max-height: none;
    height: 100%;
    flex-direction: column;
  }
  .top-library .library-section {
    width: 100%;
  }
  .top-library #plant-library,
  .top-library #library {
    width: 100%;
    display: block;
  }
  .top-library .plant-library-item {
    flex-direction: row;
    width: 100%;
    max-width: none;
    min-height: 44px;
    height: 44px;
    text-align: left;
  }
  .top-library #component-search {
    width: 100%;
  }
  .top-library .library-tabs {
    width: 100%;
    flex-direction: row;
  }
  .studio-shell .canvas-toolbar,
  .studio-shell .plant-toolbar {
    padding: 0 5px;
    gap: 3px;
  }
  .canvas-toolbar > strong {
    display: none;
  }
  .ladder-tools {
    width: 100%;
    justify-content: flex-end;
  }
  .scene-status #scene-object-count {
    display: none;
  }
  .statusbar #scan-time {
    display: none;
  }
  #diagnostics-summary {
    max-width: 135px;
    font-size: 9px;
  }
  .property-dialog .property-grid {
    grid-template-columns: 1fr 1fr;
  }
  .arduino-columns {
    grid-template-columns: 1fr;
  }
  .tool-popover {
    left: auto;
    right: -80px;
  }
  .library-tabs {
    display: flex !important;
  }
}
@media (pointer: coarse) {
  .port::before {
    inset: -12px;
  }
  .studio-shell .workspace-tabs {
    min-height: 40px;
    flex-basis: 40px;
  }
  .workspace-tabs button {
    min-height: 32px;
  }
  .topbar button {
    min-height: 30px;
  }
  .plant-toolbar button,
  .canvas-toolbar button {
    min-height: 29px;
  }
  .studio-shell .plant-toolbar,
  .studio-shell .canvas-toolbar {
    min-height: 36px;
    flex-basis: 36px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}
/* Flat elevation artwork. No perspective, bevels, cast shadows or depth transforms. */
.scene-object .scene-graphic {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.scene-graphic .flat-art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.equipment-sprite {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.scene-object .object-caption {
  position: absolute;
  top: auto;
  bottom: calc(100% + 5px);
  left: -30px;
  right: -30px;
  font: 11px Arial;
  color: #354b5c;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 15px;
  pointer-events: none;
}
.scene-object .object-signal {
  position: absolute;
  top: calc(100% + 5px);
  bottom: auto;
  left: -20px;
  right: -20px;
  font: 10px var(--mono);
  text-align: center;
  color: #637e93;
  line-height: 13px;
  letter-spacing: 0;
}
.scene-object[data-kind="label"] .object-caption {
  display: none;
}
.scene-text {
  font-family: Arial;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
}
.scene-object[data-kind="cargo"] .object-caption {
  display: none;
}
.scene-object.selected {
  outline: 1px dashed #4a90ba;
  outline-offset: 5px;
}
.scene-object .object-resize {
  width: 10px;
  height: 10px;
  min-height: 0;
  border: 1px solid #418dc0;
  background: white;
  right: -7px;
  bottom: -7px;
  border-radius: 0;
}
.scene-object .control-plate,
.scene-object .pilot-plate,
.scene-object .breaker-case {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.scene-object .plate-screw {
  display: none;
}
.scene-object .physical-control {
  position: absolute;
  left: 27%;
  top: 22%;
  width: 46%;
  height: 46%;
  min-height: 0;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--component-color);
  box-shadow: none;
  color: #fff;
  font: 600 11px Arial;
  cursor: pointer;
  line-height: 1;
}
.scene-object .is-pressed .physical-control {
  filter: brightness(0.8);
}
.scene-object.is-pressed .physical-control {
  background: #612f2d;
  border-color: #9eaeb6;
  box-shadow: none;
  transform: none;
}
.scene-object[data-kind="button_no"].is-pressed .physical-control {
  background: #175541;
}
.scene-object .contact-mark {
  position: absolute;
  bottom: 13%;
  left: 0;
  right: 0;
  font: 7px var(--mono);
  color: #4c6273;
  text-align: center;
}
.scene-object .selector-lever {
  position: absolute;
  left: 42%;
  top: 10%;
  width: 16%;
  height: 80%;
  border: 1px solid #e3ebf2;
  border-radius: 2px;
  background: #d3e0e9;
  transform: rotate(-35deg);
  box-shadow: none;
}
.scene-object.is-active .selector-lever {
  transform: rotate(35deg);
}
.scene-object .breaker-spec {
  position: absolute;
  top: 23%;
  left: 0;
  right: 0;
  font: 8px var(--mono);
  color: #436174;
  text-align: center;
}
.scene-object .breaker-lever {
  left: 24%;
  top: 38%;
  width: 52%;
  height: 23%;
  border-radius: 2px;
  border: 1px solid #273e4d;
  background: #354f61;
  padding: 0;
  font-size: 7px;
}
.scene-object .breaker-lever span {
  display: block;
  background: #93a6b4;
  height: 40%;
  position: absolute;
  left: 8%;
  right: 8%;
  top: 12%;
  border: 0;
  transform: none;
  box-shadow: none;
}
.scene-object.is-active .breaker-lever span {
  background: #bad7c8;
  top: 8%;
}
.scene-object .breaker-lever b {
  position: absolute;
  bottom: 12%;
  left: 0;
  right: 0;
  text-align: center;
  font: 7px var(--mono);
}
.scene-object .breaker-trip-indicator {
  position: absolute;
  top: 64%;
  left: 45%;
  width: 10%;
  height: 3%;
  background: #b0bfc9;
}
.scene-object.is-tripped .breaker-trip-indicator {
  background: #d94936;
}
.scene-object .trip-control {
  position: absolute;
  top: 70%;
  left: 26%;
  width: 48%;
  min-height: 0;
  height: 10%;
  padding: 0;
  font: 6px var(--mono);
  border: 1px solid #99aab7;
  border-radius: 0;
  color: #466071;
  background: #e4eaf0;
}
.scene-object .pilot-lens {
  position: absolute;
  left: 28%;
  top: 21%;
  width: 44%;
  height: 44%;
  border: 0;
  border-radius: 50%;
  background: #8b9da7;
  box-shadow: none;
}
.scene-object.is-active .pilot-lens {
  background: var(--component-color);
  box-shadow: none;
  border: 3px solid #d5f4dd;
}
.scene-object .pilot-state {
  position: absolute;
  bottom: 7%;
  left: 0;
  right: 0;
  text-align: center;
  font: 9px var(--mono);
  color: #546e80;
}
.scene-object .motor-running-indicator {
  position: absolute;
  bottom: 4%;
  left: 48%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid #5a7285;
  background: #c5d1db;
}
.scene-object.is-active .motor-running-indicator {
  background: #28aa76;
}
.scene-object .pump-motion {
  position: absolute;
  left: 46%;
  top: 40%;
  width: 8%;
  height: 12%;
  border: 2px dashed #e6f5ff;
  border-radius: 50%;
  display: none;
}
.scene-object.is-active .pump-motion {
  display: block;
  animation: animacion-girar 1s linear infinite;
}
.scene-object .belt-frame {
  position: relative;
  width: 100%;
  height: 100%;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.scene-object .belt-surface {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 54%;
  border: 2px solid #426275;
  background: #d5dfe6;
  border-radius: 35px;
  overflow: hidden;
}
.scene-object .belt-treads {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    #cad6e0 0 21px,
    #a6b9c7 21px 23px,
    #cad6e0 23px 24px
  );
}
.scene-object .belt-roller {
  position: absolute;
  top: 7%;
  width: 5%;
  height: 40%;
  max-width: 42px;
  background: #fafcfd;
  border: 2px solid #557489;
  border-radius: 50%;
  box-shadow: none;
}
.scene-object .belt-roller:after {
  content: "";
  position: absolute;
  left: 42%;
  top: 42%;
  width: 16%;
  height: 16%;
  background: #6a8699;
  border-radius: 50%;
}
.scene-object .belt-roller.left {
  left: 1%;
}
.scene-object .belt-roller.right {
  right: 1%;
}
.scene-object .belt-leg {
  position: absolute;
  top: 54%;
  width: 9px;
  height: 37%;
  background: #c9d6e0;
  border: 1.5px solid #708a9d;
  z-index: 0;
}
.scene-object .belt-leg:after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: -8px;
  width: 24px;
  border-bottom: 3px solid #708a9d;
}
.scene-object .belt-leg.left {
  left: 15%;
}
.scene-object .belt-leg.right {
  right: 15%;
}
.scene-object .belt-axis {
  position: absolute;
  left: 16%;
  right: 16%;
  height: 2px;
  background: #9baebc;
  top: 79%;
}
.scene-object .cargo-box {
  border: 1.5px solid #8f6e45;
  border-radius: 0;
  box-shadow: none;
  background: #d9b378;
  position: relative;
}
.scene-object .cargo-tape {
  background: #f0d9ad;
  border: 0;
  width: 17%;
  left: 42%;
}
.scene-object .cargo-mark {
  font: 10px var(--mono);
  left: 10%;
  bottom: 12%;
}
.scene-object .cargo-seam {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-top: 3px solid #c2985f;
}
.scene-object .sensor-field {
  background: none;
  border: 1px dashed #ddc89b;
}
.scene-object .proximity-head {
  position: absolute;
  left: 25%;
  top: 0;
  width: 50%;
  height: 27%;
  min-height: 0;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  background: none;
  display: block;
}
.scene-object .proximity-head:after {
  display: none;
}
.scene-object .sensor-beam {
  left: 49%;
  width: 2%;
  top: 25%;
  bottom: 0;
  background: #e9b958;
  border: 0;
  opacity: 0.5;
}
.scene-object .sensor-led {
  position: absolute;
  top: 25%;
  right: 32%;
  width: 5px;
  height: 5px;
  box-shadow: none;
  background: #c4d6df;
}
.scene-object.is-active .sensor-led {
  background: #edc24f;
  box-shadow: none;
}
.scene-object.is-active .sensor-field {
  background: #fff9e3;
  border-color: #c2922c;
}
.scene-object .tank-vessel {
  inset: 5% 8%;
  border: 3px solid #657f94;
  border-radius: 0;
  background: #f4f8fb;
  box-shadow: none;
  overflow: hidden;
}
.scene-object .tank-liquid {
  background: #a6d5e9;
  border-top: 2px solid #4d9bbd;
  transition: none;
}
.scene-object .liquid-surface {
  display: none;
}
.scene-object .tank-scale {
  font: 9px/4.3 var(--mono);
  color: #7794a9;
  top: 5%;
  right: 6%;
}
.scene-object .tank-reading {
  font: 14px var(--mono);
  border: 1px solid #9dbdd0;
  background: #ffffffd9;
  color: #355c76;
  left: 20%;
  top: 44%;
  padding: 5px;
}
.scene-object .level-probe {
  background: #d7e4ed;
  border: 1px solid #7593a7;
  color: #365e79;
  font: 9px var(--mono);
  width: 16px;
  height: 13px;
}
.scene-object .elevator-shaft {
  border: 3px solid #667f95;
  border-bottom-width: 5px;
  background: #f6f9fc;
  box-shadow: none;
}
.scene-object .lift-car {
  border: 2px solid #487391;
  background: #dfebf4;
  box-shadow: none;
}
.scene-object .lift-door {
  background: #d8e7f2;
  border: 1px solid #98b3c9;
}
.scene-object .lift-rail {
  background: #c5d5e2;
  border-left: 1px solid #718da3;
  width: 5px;
}
.scene-object .lift-position {
  font: 10px var(--mono);
  color: #276481;
  background: white;
  border: 1px solid #8aa9bd;
}
.scene-object .lift-floor {
  border-color: #b0c4d3;
}
.scene-object .lift-floor b {
  font: 10px var(--mono);
  border-radius: 0;
}
.scene-object .cylinder-body {
  background: #dce8f0;
  border: 2px solid #597a91;
  border-radius: 1px;
}
.scene-object .cylinder-rod {
  background: #a2bacb;
  border: 1px solid #6a899f;
}
.scene-object .cylinder-end {
  background: #ccdde8;
  border: 1.5px solid #61849d;
}
.process-pipe-border {
  stroke: #7893a6;
  stroke-width: 9;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}
.process-pipe-flow {
  stroke: #d7e3ec;
  stroke-width: 5;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}
.pipe-shell {
  stroke: #7893a6;
  stroke-width: 9;
  stroke-linejoin: miter;
}
.pipe-fluid {
  stroke: #d7e3ec;
  stroke-width: 5;
  stroke-linejoin: miter;
}
@keyframes animacion-girar {
  to {
    transform: rotate(360deg);
  }
}
.garage-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border: 8px solid #849bab;
  border-top: 17px solid #819aad;
  background: #eff4f8;
  box-shadow: none;
}
.garage-space {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #fff;
}
.garage-curtain {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc((1 - var(--travel-position, 0)) * 100%);
  background: repeating-linear-gradient(
    0deg,
    #c9d9e5 0 20px,
    #8aa6ba 20px 22px
  );
  border-bottom: 5px solid #5d7e96;
  overflow: hidden;
}
.garage-curtain span {
  position: absolute;
  bottom: 15px;
  left: 45%;
  width: 10%;
  height: 5px;
  background: #69889e;
}
.garage-drive {
  position: absolute;
  right: -25px;
  top: 15px;
  width: 20px;
  height: 30px;
  background: #426b88;
  border: 2px solid #24455e;
}
.wire-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 12;
  pointer-events: stroke;
  cursor: pointer;
}
@media (max-width: 650px) {
  .workspace-tabs #open-arduino,
  .workspace-tabs #show-board {
    display: block;
  }
  .workspace-tabs > * {
    flex-shrink: 0;
  }
  .workspace-tabs .toolbar-spacer {
    display: none;
  }
}