/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@6.11.0_webpack@5.89.0_@swc+core@1.12.7_/node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!../node_modules/.pnpm/vue-loader@17.4.2_@vue+compiler-sfc@3.5.17_vue@3.5.17_typescript@4.9.5__webpack@5.89.0_@swc+core@1.12.7_/node_modules/vue-loader/dist/stylePostLoader.js!../node_modules/.pnpm/postcss-loader@6.2.1_postcss@8.5.6_webpack@5.89.0_@swc+core@1.12.7_/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./src/views/blockly-test/BlocklyTestView.css?vue&type=style&index=0&id=55cacb3e&scoped=true&lang=css&external ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.blockly-test[data-v-55cacb3e] {
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: #f4f7f9;
  color: #16202a;
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
  overflow: hidden;
}
.toolbar[data-v-55cacb3e] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 auto 14px;
  max-width: 1440px;
}
h1[data-v-55cacb3e],
h2[data-v-55cacb3e],
p[data-v-55cacb3e] {
  margin: 0;
}
h1[data-v-55cacb3e] {
  font-size: 26px;
  line-height: 1.2;
}
h2[data-v-55cacb3e] {
  margin-bottom: 10px;
  font-size: 15px;
}
p[data-v-55cacb3e] {
  margin-top: 4px;
  color: #5c6875;
}
button[data-v-55cacb3e] {
  min-height: 38px;
  border: 1px solid #8aa0b5;
  border-radius: 6px;
  padding: 0 14px;
  background: #fff;
  color: #17212b;
  cursor: pointer;
  font-weight: 700;
}
button.primary[data-v-55cacb3e] {
  border-color: #087f77;
  background: #087f77;
  color: #fff;
}
button[data-v-55cacb3e]:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.status-grid[data-v-55cacb3e] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 auto 14px;
  max-width: 1440px;
}
.panel[data-v-55cacb3e],
.workspace-panel[data-v-55cacb3e],
.side-tabs-panel[data-v-55cacb3e] {
  border: 1px solid #d4dde7;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.panel[data-v-55cacb3e] {
  border-radius: 8px;
}
.workspace-panel[data-v-55cacb3e],
.side-tabs-panel[data-v-55cacb3e] {
  border-radius: 0;
  box-shadow: none;
}
.panel[data-v-55cacb3e] {
  padding: 14px;
}
.side-tabs-panel[data-v-55cacb3e] {
  display: grid;
  grid-template-rows: 42px minmax(0, 1fr);
  min-height: 0;
  margin: 0;
  overflow: hidden;
}
.side-tabs-header[data-v-55cacb3e] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 42px;
  box-sizing: border-box;
  min-width: 0;
  border-bottom: 1px solid #d4dde7;
  padding: 4px 10px;
  background: #f8fafc;
}
.side-tab-list[data-v-55cacb3e] {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
}
.side-tab[data-v-55cacb3e] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 28px;
  height: 28px;
  box-sizing: border-box;
  border-color: transparent;
  padding: 0 8px;
  background: transparent;
  color: #475569;
  font-size: 12px;
  line-height: 1;
}
.side-tab[data-v-55cacb3e]:hover:not(.active) {
  border-color: #cbd5e1;
  background: #eef2f7;
}
.side-tab.active[data-v-55cacb3e] {
  border-color: #087f77;
  background: #087f77;
  color: #fff;
}
.side-tab-actions[data-v-55cacb3e] {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 72px;
  justify-content: flex-end;
}
.side-tab-actions .icon-btn[data-v-55cacb3e] {
  min-height: 28px;
  width: 28px;
  height: 28px;
  font-size: 13px;
}
.console-details-toggle[data-v-55cacb3e] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  color: #334155;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.console-details-toggle input[data-v-55cacb3e] {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: #087f77;
}
.console-details-toggle-text[data-v-55cacb3e] {
  display: inline-block;
  line-height: 11px;
}
.side-action-btn[data-v-55cacb3e] {
  min-height: 28px;
  padding: 0 8px;
  font-size: 12px;
}

/* Nút RUN/STOP duy nhất của trang. Không dùng chung class .side-action-btn với
   nút Clear: full-screen tab text ép .side-action-btn rộng 96px cho khớp Clear,
   nút này thì giữ nguyên khổ ở mọi tab. */
.digital-twin-run-btn[data-v-55cacb3e] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  min-width: 56px;
  min-height: 28px;
  box-sizing: border-box;
  padding: 0 8px;
  border-color: #087f77;
  background: #087f77;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}
.digital-twin-run-btn[data-v-55cacb3e]:hover:not(:disabled) {
  border-color: #06635d;
  background: #06635d;
}
.digital-twin-run-btn.is-stop[data-v-55cacb3e] {
  border-color: #ef4444;
  background: #ef4444;
}
.digital-twin-run-btn.is-stop[data-v-55cacb3e]:hover:not(:disabled) {
  border-color: #dc2626;
  background: #dc2626;
}
.digital-twin-run-btn[data-v-55cacb3e]:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.digital-twin-pause-btn[data-v-55cacb3e] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  min-width: 64px;
  min-height: 28px;
  box-sizing: border-box;
  padding: 0 8px;
  border-color: #d97706;
  background: #d97706;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}
.digital-twin-pause-btn[data-v-55cacb3e]:hover:not(:disabled) {
  border-color: #b45309;
  background: #b45309;
}
.digital-twin-pause-btn.is-paused[data-v-55cacb3e] {
  border-color: #087f77;
  background: #087f77;
  color: #ffffff;
}
.digital-twin-pause-btn.is-paused[data-v-55cacb3e]:hover:not(:disabled) {
  border-color: #06635d;
  background: #06635d;
}
.digital-twin-pause-btn[data-v-55cacb3e]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  border-color: #cbd5e1;
  background: #94a3b8;
  color: #ffffff;
}

/* SpeedUp slider next to Pause (on the Simulator), shown with it in full screen only: the side panel's header has
   no room for either. The value's width holds every value of the slider, so the header does not move
   while it is dragged. */
.digital-twin-speed-up[data-v-55cacb3e] {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  height: 28px;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.digital-twin-speed-up input[data-v-55cacb3e] {
  width: 120px;
  margin: 0;
  accent-color: #087f77;
  cursor: pointer;
}
.digital-twin-speed-up-value[data-v-55cacb3e] {
  min-width: 30px;
  font-variant-numeric: tabular-nums;
}

/* Actual SpeedUp next to the slider: the simulation speed the run reaches on this machine. Its width holds
   values up to four digits, so the header does not move as it changes. */
.digital-twin-actual-speed-up[data-v-55cacb3e] {
  flex: 0 0 auto;
  min-width: 82px;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  line-height: 28px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.digital-twin-speed-up.is-disabled[data-v-55cacb3e] {
  opacity: 0.5;
}
.digital-twin-speed-up.is-disabled input[data-v-55cacb3e] {
  cursor: not-allowed;
}
.side-tabs-body[data-v-55cacb3e] {
  display: grid;
  box-sizing: border-box;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.side-tab-panel[data-v-55cacb3e] {
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.digital-twin-panel[data-v-55cacb3e] {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}
.digital-twin-frame-wrap[data-v-55cacb3e] {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #0f172a;
}
.digital-twin-frame[data-v-55cacb3e] {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #0f172a;
}
.python-runner-frame[data-v-55cacb3e] {
  position: fixed;
  left: -2px;
  top: -2px;
  width: 1px;
  height: 1px;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.workspace-panel[data-v-55cacb3e]:fullscreen {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  width: 100vw;
  height: 100vh;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #fff;
}
.workspace-panel:fullscreen .workspace[data-v-55cacb3e] {
  width: 100%;
  height: 100%;
}
.side-tabs-panel[data-v-55cacb3e]:fullscreen {
  position: relative;
  display: grid;
  grid-template-rows: 42px minmax(0, 1fr);
  width: 100vw;
  height: 100vh;
  aspect-ratio: auto;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  overflow: hidden;
  box-shadow: none;
  background: #ffffff;
}
.side-tabs-panel:fullscreen.digital-twin-tab-active[data-v-55cacb3e] {
  background: #0f172a;
}
.side-tabs-panel:fullscreen .side-tabs-header[data-v-55cacb3e] {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 42px;
  border-bottom: 1px solid #d4dde7;
  padding: 4px 10px;
  pointer-events: auto;
}
.side-tabs-panel:fullscreen .side-tab-list[data-v-55cacb3e] {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: visible;
  pointer-events: auto;
}
.side-tabs-panel:fullscreen.digital-twin-tab-active .side-tab-digital-twin[data-v-55cacb3e] {
  display: inline-flex;
}
.side-tabs-panel:fullscreen.digital-twin-tab-active .side-tab[data-v-55cacb3e],
.side-tabs-panel:fullscreen.text-tab-active .side-tab[data-v-55cacb3e] {
  min-height: 28px;
  border-radius: 6px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 700;
}
.side-tabs-panel:fullscreen.text-tab-active .text-fullscreen-exit[data-v-55cacb3e] {
  min-height: 28px;
  width: 28px;
  height: 28px;
  border-color: #cbd5e1;
  background: #ffffff;
  color: #334155;
  font-size: 13px;
}
.side-tabs-panel:fullscreen .side-tab-actions[data-v-55cacb3e] {
  gap: 8px;
  min-width: 0;
  pointer-events: auto;
}
.side-tabs-panel:fullscreen .side-tabs-body[data-v-55cacb3e],
.side-tabs-panel:fullscreen .side-tab-panel[data-v-55cacb3e],
.side-tabs-panel:fullscreen .digital-twin-panel[data-v-55cacb3e],
.side-tabs-panel:fullscreen .digital-twin-frame-wrap[data-v-55cacb3e],
.side-tabs-panel:fullscreen .code-panel[data-v-55cacb3e],
.side-tabs-panel:fullscreen .log-panel[data-v-55cacb3e],
.side-tabs-panel:fullscreen .console-panel[data-v-55cacb3e] {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
}
.side-tabs-panel:fullscreen .side-tabs-body[data-v-55cacb3e] {
  display: grid;
  height: auto;
  min-height: 0;
  overflow: hidden;
}
.side-tabs-panel:fullscreen .console-serial[data-v-55cacb3e] {
  padding: 0 16px 16px;
}
.side-tabs-panel:fullscreen .code-panel textarea[data-v-55cacb3e],
.side-tabs-panel:fullscreen .log-panel textarea[data-v-55cacb3e],
.side-tabs-panel:fullscreen .console-panel textarea[data-v-55cacb3e] {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  padding: 16px;
}
.side-tabs-panel:fullscreen .side-tab-actions .icon-btn[data-v-55cacb3e] {
  min-height: 28px;
  width: 28px;
  height: 28px;
  border-color: #cbd5e1;
  background: #ffffff;
  color: #334155;
  font-size: 13px;
}
.side-tabs-panel:fullscreen .side-action-btn[data-v-55cacb3e] {
  min-height: 28px;
  border-color: #cbd5e1;
  background: #ffffff;
  color: #17212b;
}
.side-tabs-panel:fullscreen .side-panel-fullscreen-toggle[data-v-55cacb3e] {
  border-color: #cbd5e1;
  background: #ffffff;
  color: #334155;
}
.side-tabs-panel:fullscreen.text-tab-active .side-tab-actions .icon-btn[data-v-55cacb3e] {
  min-height: 28px;
  width: 28px;
  height: 28px;
  border-color: #cbd5e1;
  background: #ffffff;
  color: #334155;
  font-size: 13px;
}
.side-tabs-panel:fullscreen.text-tab-active .side-tab-actions[data-v-55cacb3e] {
  --text-fullscreen-clear-width: 96px;
  justify-content: flex-end;
}
.side-tabs-panel:fullscreen.text-tab-active .side-action-btn[data-v-55cacb3e] {
  flex: 0 0 var(--text-fullscreen-clear-width);
  width: var(--text-fullscreen-clear-width);
  padding: 0;
  text-align: center;
}
.side-tabs-panel:fullscreen.text-tab-active.code-tab-active .side-tab-actions[data-v-55cacb3e]::before {
  content: "";
  flex: 0 0 var(--text-fullscreen-clear-width);
  width: var(--text-fullscreen-clear-width);
  height: 28px;
}
.side-tabs-panel:fullscreen.text-tab-active .side-action-btn[data-v-55cacb3e] {
  min-height: 28px;
  border-color: #cbd5e1;
  background: #ffffff;
  color: #17212b;
}
.side-tabs-panel:fullscreen.text-tab-active .side-panel-fullscreen-toggle[data-v-55cacb3e] {
  border-color: #cbd5e1;
  background: #ffffff;
  color: #334155;
}
dl[data-v-55cacb3e] {
  display: grid;
  gap: 8px;
  margin: 0;
}
dl div[data-v-55cacb3e] {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 10px;
}
dt[data-v-55cacb3e] {
  color: #64748b;
  font-size: 13px;
}
dd[data-v-55cacb3e] {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}
.ok[data-v-55cacb3e] {
  color: #047857;
  font-weight: 700;
}
.warn[data-v-55cacb3e] {
  color: #b45309;
  font-weight: 700;
}
.workbench[data-v-55cacb3e] {
  --side-panel-width: 420px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(360px, 1fr) 16px minmax(320px, var(--side-panel-width));
  gap: 0;
  margin: 0;
  width: 100%;
  max-width: 100%;
  flex: 1;
  min-height: 0;
}
.workbench.is-resizing[data-v-55cacb3e],
.workbench.is-resizing[data-v-55cacb3e] * {
  cursor: col-resize !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
body.blockly-test-resizing {
  cursor: col-resize !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.workbench.is-resizing[data-v-55cacb3e]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4500;
  cursor: col-resize;
}
.workbench-resizer[data-v-55cacb3e] {
  position: relative;
  z-index: 4600;
  min-width: 16px;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: col-resize;
  touch-action: none;
}
.workbench-resizer[data-v-55cacb3e]::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 6px;
  width: 4px;
  border-radius: 999px;
  background: #cbd5e1;
}
.workbench-resizer[data-v-55cacb3e]:hover::before,
.workbench-resizer[data-v-55cacb3e]:focus-visible::before,
.workbench.is-resizing .workbench-resizer[data-v-55cacb3e]::before {
  left: 5px;
  width: 6px;
  background: #087f77;
}
.workbench-resizer[data-v-55cacb3e]:focus-visible {
  outline: 2px solid #087f77;
  outline-offset: -2px;
}
.workspace-panel[data-v-55cacb3e] {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  --blockly-toolbox-width: 168px;
}
.panel-header[data-v-55cacb3e] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.panel-header h2[data-v-55cacb3e] {
  margin-bottom: 0;
}
.workspace[data-v-55cacb3e] {
  width: 100%;
  min-height: 0;
  height: 100%;
}
.python-editor-host[data-v-55cacb3e] {
  position: absolute;
  top: 42px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1500;
  overflow: hidden;
  background: #272822;
  text-align: left;
}
.workspace-panel.file-tab-active .python-editor-host[data-v-55cacb3e] {
  left: var(--blockly-toolbox-width);
}
.python-editor-host[data-v-55cacb3e] .CodeMirror {
  height: 100%;
  width: 100%;
  font-size: 14px;
  line-height: 1.5;
  font-family: 'Fira Mono', 'Consolas', 'Menlo', monospace;
  text-align: left;
}
.python-editor-host[data-v-55cacb3e] .CodeMirror-lines,
.python-editor-host[data-v-55cacb3e] .CodeMirror-line,
.python-editor-host[data-v-55cacb3e] .CodeMirror-linenumber {
  text-align: left;
}
.left-toolbox-tabs[data-v-55cacb3e] {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  display: grid;
  grid-template-rows: 42px minmax(0, 1fr);
  width: 100%;
  pointer-events: none;
}

/* One separator for File and Blocks: no vertical shadow offset or bleed onto
   the 15px workspace scrollbar at the bottom. */
.left-toolbox-tabs[data-v-55cacb3e]::after {
  content: "";
  position: absolute;
  top: 42px;
  bottom: 15px;
  left: var(--blockly-toolbox-width);
  width: 10px;
  background: linear-gradient(to right, rgba(128, 128, 128, 0.65), transparent);
  pointer-events: none;
}
.left-toolbox-tab-header[data-v-55cacb3e] {
  display: grid;
  grid-template-columns: var(--blockly-toolbox-width) minmax(0, 1fr) auto;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid #d4dde7;
  padding: 0;
  background: #ffffff;
  pointer-events: auto;
}
.left-toolbox-tabs-selector[data-v-55cacb3e] {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-right: 1px solid #d4dde7;
  padding: 5px;
  flex: 0 0 var(--blockly-toolbox-width);
}
.left-toolbox-tab-wrapper[data-v-55cacb3e] {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
}
.left-toolbox-tab-wrapper.is-disabled[data-v-55cacb3e] {
  cursor: not-allowed;
}
.left-toolbox-tab-wrapper > .left-toolbox-tab[data-v-55cacb3e]:disabled {
  pointer-events: none;
}
.left-toolbox-tab[data-v-55cacb3e] {
  flex: 1 1 0;
  box-sizing: border-box;
  min-width: 0;
  min-height: 28px;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0 6px;
  background: transparent;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.left-toolbox-tab[data-v-55cacb3e]:hover:not(:disabled):not(.active) {
  border-color: #cbd5e1;
  background: #eef2f7;
}
.left-toolbox-tab.active[data-v-55cacb3e] {
  background: #087f77;
  color: #fff;
  border-color: #087f77;
}
.left-toolbox-actions[data-v-55cacb3e] {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 100%;
  box-sizing: border-box;
  padding: 5px 8px;
  flex: 1 1 auto;
  justify-content: flex-start;
  min-width: 0;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.left-toolbox-actions[data-v-55cacb3e]::-webkit-scrollbar {
  display: none;
}
.left-toolbox-actions .icon-btn[data-v-55cacb3e] {
  width: 24px;
  height: 24px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 11px;
  flex: 0 0 auto;
  min-height: auto;
}
.left-toolbox-tab-header .run-actions[data-v-55cacb3e] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  height: 100%;
  box-sizing: border-box;
  padding: 5px 8px 5px 4px;
}
.auto-fullscreen-toggle[data-v-55cacb3e] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  margin: 0;
  color: #334155;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.auto-fullscreen-toggle input[data-v-55cacb3e] {
  width: 13px;
  height: 13px;
  margin: 0;
  cursor: pointer;
  accent-color: #087f77;
}
.auto-fullscreen-toggle input[data-v-55cacb3e]:disabled,
.auto-fullscreen-toggle input:disabled + span[data-v-55cacb3e] {
  cursor: not-allowed;
  opacity: 0.65;
}
.left-toolbox-tab-header .run-actions button[data-v-55cacb3e] {
  min-height: 26px !important;
  height: 26px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  transition: all 0.2s ease;
}
.left-toolbox-tab-header .run-actions .blockly-fullscreen-toggle[data-v-55cacb3e] {
  min-width: 26px;
  width: 26px;
  min-height: 26px !important;
  height: 26px;
  padding: 0;
  border-color: #cbd5e1;
  background: #ffffff;
  color: #334155;
  font-size: 12px;
}
.left-toolbox-tab-header .run-actions .blockly-fullscreen-toggle[data-v-55cacb3e]:hover {
  border-color: #94a3b8;
  background: #f1f5f9;
  color: #0f172a;
}
.left-toolbox-body[data-v-55cacb3e] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  box-sizing: border-box;
  border-right: 0;
  background: #ffffff;
  pointer-events: auto;
  width: var(--blockly-toolbox-width);
}
.file-tree-toolbar[data-v-55cacb3e] {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
  border-bottom: 1px solid #d4dde7;
  padding: 6px;
  background: #f8fafc;
}
.file-tree-action-python[data-v-55cacb3e] {
  color: #3776ab;
}
.file-tree-action[data-v-55cacb3e] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  height: 32px;
  border-radius: 5px;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
}
.file-type-icon[data-v-55cacb3e] {
  display: block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  -o-object-fit: contain;
     object-fit: contain;
}
.file-tree-list[data-v-55cacb3e] {
  min-height: 0;
  overflow: auto;
  padding: 6px 4px 8px;
}
.file-tree-list.is-drop-hover[data-v-55cacb3e] {
  outline: 2px solid #087f77;
  outline-offset: -2px;
  background: #ecfdf5;
}

/* Kéo một mục của cây xuống vùng trống = đưa nó xuống cuối cây, ngoài thư mục.
   Viền đứt để phân biệt với nét liền của "thả file từ máy vào". */
.file-tree-list.is-root-drop-hover[data-v-55cacb3e] {
  outline: 2px dashed #087f77;
  outline-offset: -2px;
}
.file-tree-row[data-v-55cacb3e] {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 30px;
  border: 0;
  border-radius: 4px;
  padding-top: 0;
  padding-right: 6px;
  padding-bottom: 0;
  background: transparent;
  color: #17212b;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
}
.file-tree-row[data-v-55cacb3e]:hover {
  background: #eef2f7;
}
.file-tree-row.is-selected[data-v-55cacb3e] {
  background: #dff4f2;
  color: #064e4b;
  font-weight: 700;
}
.file-tree-row.is-focused[data-v-55cacb3e] {
  outline: 1px solid #087f77;
  outline-offset: -1px;
}
.file-tree-row.drop-before[data-v-55cacb3e] {
  box-shadow: inset 0 2px 0 #087f77;
}
.file-tree-row.drop-after[data-v-55cacb3e] {
  box-shadow: inset 0 -2px 0 #087f77;
}
.file-tree-row.drop-inside[data-v-55cacb3e] {
  outline: 1px solid #087f77;
  outline-offset: -2px;
  background: #ecfdf5;
}
.file-tree-arrow[data-v-55cacb3e] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 12px;
  width: 12px;
  color: #64748b;
  font-size: 12px;
}
.file-tree-row:not(.is-folder) .file-tree-arrow[data-v-55cacb3e] {
  display: none;
}
.file-tree-icon[data-v-55cacb3e] {
  flex: 0 0 16px;
  width: 16px;
  color: #64748b;
  text-align: center;
}
.file-tree-row.is-folder .file-tree-icon[data-v-55cacb3e] {
  color: #d97706;
}
.file-tree-name[data-v-55cacb3e] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-tree-rename-input[data-v-55cacb3e] {
  min-width: 0;
  width: 100%;
  height: 24px;
  border: 1px solid #087f77;
  border-radius: 4px;
  padding: 0 6px;
  color: #17212b;
  font: inherit;
}
.file-tree-empty[data-v-55cacb3e] {
  padding: 14px 10px;
  color: #64748b;
  font-size: 13px;
}
.file-tree-context-menu[data-v-55cacb3e] {
  position: fixed;
  z-index: 3200;
  display: grid;
  width: -moz-max-content;
  width: max-content;
  min-width: 76px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 3px;
  background: #fff;
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.18);
}
.file-tree-context-menu button[data-v-55cacb3e] {
  justify-content: flex-start;
  min-height: 30px;
  border: 0;
  padding: 0 8px;
  background: transparent;
  font-size: 13px;
  text-align: left;
}
.file-tree-context-menu button[data-v-55cacb3e]:hover {
  background: #eef2f7;
}
.side-stack[data-v-55cacb3e] {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}
.code-panel[data-v-55cacb3e],
.log-panel[data-v-55cacb3e],
.console-panel[data-v-55cacb3e] {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
}

/* Tab Console có thêm ô "Send Serial Message" dưới đáy: hàng trên co giãn cho
   phần log, hàng dưới vừa đúng chiều cao ô nhập. */
.console-panel[data-v-55cacb3e] {
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
}
.console-serial[data-v-55cacb3e] {
  display: flex;
  gap: 8px;
  align-items: center;
}
.console-serial-input[data-v-55cacb3e] {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  height: 32px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 0 10px;
  color: #0f172a;
  font: 13px/1.45 Consolas, Monaco, monospace;
}
.console-serial-input[data-v-55cacb3e]:focus {
  outline: none;
  border-color: #087f77;
}
.console-serial-input[data-v-55cacb3e]:disabled {
  background: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
}
.console-serial-send[data-v-55cacb3e] {
  flex: none;
  min-height: 32px;
  padding: 0 14px;
  font-size: 12px;
}
.code-panel textarea[data-v-55cacb3e],
.log-panel textarea[data-v-55cacb3e],
.console-panel textarea[data-v-55cacb3e] {
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 10px 12px;
  color: #0f172a;
  font: 13px/1.45 Consolas, Monaco, monospace;
  white-space: pre;
  overflow-x: auto;
  overflow-y: auto;
  overflow-wrap: normal;
  word-break: normal;
  resize: none;
}
.code-panel textarea[data-v-55cacb3e] {
  background: #f8fafc;
}
.console-panel textarea.console-error-output[data-v-55cacb3e] {
  color: #8b0000;
}
.workspace[data-v-55cacb3e] .blocklyToolboxDiv {
  z-index: 100 !important;
  background: #fff !important;
  box-shadow: none !important;
  border-right: 0 !important;
  width: var(--blockly-toolbox-width) !important;
  box-sizing: border-box;
}
.workspace[data-v-55cacb3e] .blocklyToolboxDiv > .blocklyToolboxContents {
  padding: 46px 0 2px;
}
.workspace[data-v-55cacb3e] .blocklyToolboxContents .blocklyToolboxContents {
  padding: 0;
}
.workspace[data-v-55cacb3e] .blocklyMainWorkspaceScrollbar {
  z-index: 1800 !important;
  opacity: 1 !important;
  pointer-events: auto;
}
.workspace[data-v-55cacb3e] .blocklyScrollbarVertical.blocklyMainWorkspaceScrollbar {
  display: block !important;
  width: 15px !important;
  overflow: visible !important;
}
.workspace[data-v-55cacb3e] .blocklyScrollbarHorizontal.blocklyMainWorkspaceScrollbar {
  display: block !important;
  height: 15px !important;
  overflow: visible !important;
}
.workspace[data-v-55cacb3e] .blocklyMainWorkspaceScrollbar .blocklyScrollbarHandle {
  fill: #475569 !important;
  fill-opacity: 0.86 !important;
  stroke: #ffffff;
  stroke-opacity: 0.55;
  stroke-width: 1px;
}
.workspace[data-v-55cacb3e] .blocklyMainWorkspaceScrollbar .blocklyScrollbarBackground {
  fill: #e2e8f0 !important;
  opacity: 0.72 !important;
}
.workspace[data-v-55cacb3e] .blocklyMainWorkspaceScrollbar .blocklyScrollbarBackground:hover + .blocklyScrollbarHandle,
.workspace[data-v-55cacb3e] .blocklyMainWorkspaceScrollbar .blocklyScrollbarHandle:hover {
  fill: #334155 !important;
  fill-opacity: 0.96 !important;
}

/* Khi Python editor phủ đè Blockly: ẩn scrollbar workspace của Blockly.
   Nếu không, các rule trên ép display:block + z-index 1800 (> Python host 1500)
   khiến scrollbar Blockly xuyên lên trên editor .py. */
.workspace-panel.python-editor-active .workspace[data-v-55cacb3e] .blocklyMainWorkspaceScrollbar,
.workspace-panel.python-editor-active .workspace[data-v-55cacb3e] .blocklyScrollbarVertical.blocklyMainWorkspaceScrollbar,
.workspace-panel.python-editor-active .workspace[data-v-55cacb3e] .blocklyScrollbarHorizontal.blocklyMainWorkspaceScrollbar {
  display: none !important;
}
.workspace-panel.file-tab-active .workspace[data-v-55cacb3e] .blocklyToolboxDiv,
.workspace-panel.file-tab-active .workspace[data-v-55cacb3e] .blocklyFlyout,
.workspace-panel.file-tab-active .workspace[data-v-55cacb3e] .blocklyFlyoutScrollbar,
.workspace-panel.file-tab-active .workspace[data-v-55cacb3e] .blocklyFlyoutBackground {
  visibility: hidden !important;
}
.workspace[data-v-55cacb3e] .blocklyToolboxCategory {
  margin-bottom: 4px;
}
.workspace[data-v-55cacb3e] .blocklyTreeRow {
  display: flex;
  align-items: center;
  min-height: 30px;
  height: auto;
  margin: 0 3px 3px;
  border-radius: 5px;
  padding: 2px 6px;
  line-height: 1;
}
.workspace[data-v-55cacb3e] .blocklyTreeRowContentContainer {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 2px;
}
.workspace[data-v-55cacb3e] .blocklyTreeLabel {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
  padding: 0;
}
.workspace[data-v-55cacb3e] .customIcon {
  width: 18px;
  margin: 0;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  text-align: center;
}
.workspace[data-v-55cacb3e] .blocklyTreeRow:has(.leanbot-subcategory-icon) {
  width: calc(100% - 25px);
  box-sizing: border-box;
  margin-right: 3px;
  margin-left: 22px;
  padding-left: 3px;
  padding-right: 6px;
}
.workspace[data-v-55cacb3e] .blocklyTreeRow:has(.leanbot-subcategory-icon) .blocklyTreeRowContentContainer {
  gap: 3px;
  margin-left: -3px;
}
.workspace[data-v-55cacb3e] .leanbot-subcategory-icon {
  width: 14px;
  font-size: 14px;
}
.workspace[data-v-55cacb3e] .blocklyTreeRow:has(.leanbot-subcategory-icon) .blocklyTreeLabel {
  font-size: 16px;
}
.workspace[data-v-55cacb3e] .blocklyTreeSelected {
  background-color: #fff !important;
}
@media (max-width: 960px) {
.blockly-test[data-v-55cacb3e] {
    padding: 0;
    height: auto;
    overflow: visible;
}
.toolbar[data-v-55cacb3e] {
    align-items: flex-start;
    flex-direction: column;
}
.status-grid[data-v-55cacb3e],
  .workbench[data-v-55cacb3e] {
    grid-template-columns: 1fr;
    gap: 0;
}
.workbench-resizer[data-v-55cacb3e] {
    display: none;
}
.workspace-panel[data-v-55cacb3e],
  .workspace[data-v-55cacb3e],
  .side-stack[data-v-55cacb3e],
  .side-tabs-panel[data-v-55cacb3e] {
    min-height: 460px;
}
.workspace[data-v-55cacb3e] {
    height: 100%;
}
.side-stack[data-v-55cacb3e] {
    grid-template-rows: minmax(460px, auto);
}
}

/* Top Toolbar styling */
.top-toolbar[data-v-55cacb3e] {
  position: relative;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  padding: 8px 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  margin-bottom: 6px;
}
.toolbar-left[data-v-55cacb3e] {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 12px;
}
.leanbot-logo[data-v-55cacb3e] {
  height: 36px;
  width: auto;
}
.toolbar-title[data-v-55cacb3e] {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}
.toolbar-center[data-v-55cacb3e] {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: 10px;
  min-width: 0;
  margin-right: 0;
  overflow: visible;
}
.icon-btn[data-v-55cacb3e] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #ffffff;
  color: #334155;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  font-size: 16px;
}
.icon-btn[data-v-55cacb3e]:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}
.toolbar-right[data-v-55cacb3e] {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 10px;
}
.run-actions[data-v-55cacb3e] {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 10px;
}

/* Setup Drawer styling */
.setup-drawer[data-v-55cacb3e] {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  background: #ffffff;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.setup-drawer.open[data-v-55cacb3e] {
  transform: translateX(0);
}
.drawer-header[data-v-55cacb3e] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #ffc000; /* Yellow background matching image 3 */
  color: #000000;
}
.drawer-header h3[data-v-55cacb3e] {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
}
.drawer-header .close-btn[data-v-55cacb3e] {
  background: transparent;
  border: none;
  font-size: 20px;
  color: #0d6e6d; /* Teal close button matching image 3 */
  cursor: pointer;
  padding: 0;
  min-height: auto;
}
.drawer-body[data-v-55cacb3e] {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.category-item[data-v-55cacb3e] {
  display: flex;
  align-items: center;
}
.category-checkbox-container[data-v-55cacb3e] {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  width: 100%;
}
.category-checkbox-container input[type="checkbox"][data-v-55cacb3e] {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid #ef4444; /* Red border */
  border-radius: 4px;
  background-color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background-color 0.2s ease;
  margin: 0;
}
.category-checkbox-container input[type="checkbox"][data-v-55cacb3e]:checked {
  background-color: #ef4444; /* Red background when checked */
}
.category-checkbox-container input[type="checkbox"][data-v-55cacb3e]:checked::after {
  content: "✔";
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
}
.category-name[data-v-55cacb3e] {
  font-size: 16px;
  color: #1e293b;
  font-weight: 500;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.mission-timeout-modal[data-v-55cacb3e] {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.42);
}
.mission-timeout-dialog[data-v-55cacb3e] {
  width: min(420px, 100%);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.24);
}
.mission-timeout-icon[data-v-55cacb3e] {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fee2e2;
  color: #dc2626;
  font-size: 18px;
}
.mission-timeout-content[data-v-55cacb3e] {
  min-width: 0;
}
.mission-timeout-content h3[data-v-55cacb3e] {
  margin: 0 0 6px;
  color: #111827;
  font-size: 17px;
  line-height: 1.25;
}
.mission-timeout-content p[data-v-55cacb3e] {
  margin: 0 0 16px;
  color: #475569;
  font-size: 14px;
  line-height: 1.45;
}
.mission-timeout-ok[data-v-55cacb3e] {
  min-width: 72px;
  height: 34px;
  padding: 0 16px;
  border: 1px solid #0f766e;
  border-radius: 6px;
  background: #0f766e;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.mission-timeout-ok[data-v-55cacb3e]:hover {
  background: #115e59;
}
@media (max-width: 960px) {
.top-toolbar[data-v-55cacb3e] {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 8px;
}
.toolbar-center[data-v-55cacb3e] {
    order: 3;
    flex-basis: 100%;
    flex-wrap: wrap;
}
.toolbar-right[data-v-55cacb3e] {
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: space-between;
}
.run-actions[data-v-55cacb3e] {
    margin-left: auto;
}
}
.custom-tooltip[data-v-55cacb3e] {
  position: fixed;
  z-index: 9999;
  display: inline-block;
  pointer-events: none;
}

/* In the full-screen Digital Twin panel (tooltipFullscreenHost): above its header (z-index
   10000), which the arrow of a tooltip under a header button reaches into. */
.side-tabs-panel:fullscreen .custom-tooltip[data-v-55cacb3e] {
  z-index: 10001;
}
.custom-tooltip-bottom[data-v-55cacb3e] {
  transform: translateX(-50%);
}
.custom-tooltip-left[data-v-55cacb3e] {
  transform: translateX(-100%);
}
.custom-tooltip-bottom-right[data-v-55cacb3e] {
  transform: none;
}
.custom-tooltip-bottom-right-tab[data-v-55cacb3e] {
  transform: none;
}
.custom-tooltip-bottom-left[data-v-55cacb3e] {
  transform: translateX(-100%);
}
.custom-tooltip-bottom-left-tab[data-v-55cacb3e] {
  transform: translateX(-100%);
}
.custom-tooltip .tippy-box[data-v-55cacb3e] {
  position: relative;
  background: #0f172a;
  color: #f1f5f9;
  border-radius: 4px;
  border: 1px solid #334155;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}
.custom-tooltip .tippy-content[data-v-55cacb3e] {
  position: relative;
  z-index: 1;
  padding: 6px 10px;
}
.custom-tooltip .tippy-arrow[data-v-55cacb3e] {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #0f172a;
  border: 1px solid #334155;
  transform: rotate(45deg);
}
.custom-tooltip-bottom .tippy-arrow[data-v-55cacb3e] {
  top: -5px;
  /* Back by as much as the tooltip was moved to stay on the screen: still at the middle of the element. */
  left: calc(50% - var(--tooltip-shift, 0px));
  margin-left: -4px;
  border-right: 0;
  border-bottom: 0;
}
.custom-tooltip-bottom-right .tippy-arrow[data-v-55cacb3e] {
  top: -5px;
  left: 12px;
  border-right: 0;
  border-bottom: 0;
}
.custom-tooltip-bottom-right-tab .tippy-arrow[data-v-55cacb3e] {
  top: -5px;
  left: 34px;
  border-right: 0;
  border-bottom: 0;
}
.custom-tooltip-bottom-left .tippy-arrow[data-v-55cacb3e] {
  top: -5px;
  right: 12px;
  border-right: 0;
  border-bottom: 0;
}
.custom-tooltip-bottom-left-tab .tippy-arrow[data-v-55cacb3e] {
  top: -5px;
  right: 8.5px;
  border-right: 0;
  border-bottom: 0;
}
.custom-tooltip-right .tippy-arrow[data-v-55cacb3e] {
  top: 50%;
  left: -5px;
  margin-top: -4px;
  border-top: 0;
  border-right: 0;
}
.custom-tooltip-left .tippy-arrow[data-v-55cacb3e] {
  top: 50%;
  right: -5px;
  margin-top: -4px;
  border-bottom: 0;
  border-left: 0;
}
.python-field-status[data-v-55cacb3e] { position: fixed; bottom: 16px; left: 16px; z-index: 1000; padding: 8px 12px; border-radius: 6px; background: #fff; color: #334155; box-shadow: 0 2px 12px #0002;
}

/* Switch views in the existing toolbar, without adding a host navigation row. */
.runner-view-link[data-v-55cacb3e] { color: #174ea6; font-size: 12px; white-space: nowrap; text-decoration: none; padding: 4px 6px;
}
.runner-view-link[data-v-55cacb3e]:hover { text-decoration: underline;
}

/* ===== Leanbot toolkit look (PLAN §7.4 tokens) =====
   A light restyle so the Virtual Leanbot toolbar matches the shared toolkit bar: selected tabs in the toolkit blue,
   toolkit borders/hover, a visible focus ring. RUN keeps its teal as the "run" colour. Delete this block to revert. */
.left-toolbox-tab-header[data-v-55cacb3e],
.side-tabs-header[data-v-55cacb3e] {
  border-bottom-color: #DCE5EE;
}
.side-tabs-header[data-v-55cacb3e] {
  background: #F4F7FA;
}
.left-toolbox-tab[data-v-55cacb3e],
.side-tab[data-v-55cacb3e] {
  color: #3F5266;
}
.left-toolbox-tab[data-v-55cacb3e]:hover:not(:disabled):not(.active),
.side-tab[data-v-55cacb3e]:hover:not(.active) {
  border-color: #B5C4D3;
  background: #E6F1FA;
}
.left-toolbox-tab.active[data-v-55cacb3e],
.side-tab.active[data-v-55cacb3e] {
  border-color: #0070C0;
  background: #0070C0;
  color: #FFFFFF;
}
.left-toolbox-tab[data-v-55cacb3e]:focus-visible,
.side-tab[data-v-55cacb3e]:focus-visible,
.blockly-test .icon-btn[data-v-55cacb3e]:focus-visible,
.digital-twin-run-btn[data-v-55cacb3e]:focus-visible,
.runner-view-link[data-v-55cacb3e]:focus-visible {
  outline: 2px solid #FBBF24;
  outline-offset: 1px;
}