:root {

  color-scheme: light;

  font-family: "Segoe UI", Arial, sans-serif;

  --blue: var(--dm-blue); --ink: var(--dm-ink); --muted: var(--dm-muted); --border: var(--dm-border);

  background: var(--dm-page); color: var(--ink);

}
* { box-sizing: border-box; }
body { margin: 0; height: 100vh; height: 100dvh; min-height: 580px; display: flex; flex-direction: column; }
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
button, a, input, pre { outline-offset: 3px; }
:is(button, a, input, pre):focus-visible { outline: 3px solid #38bdf8; }
button { min-height: 44px; padding: 10px 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 12px; font-size: 14px; font-weight: 650; white-space: nowrap; cursor: pointer; transition: background .15s, box-shadow .15s; }
button:disabled { opacity: .45; cursor: default; }
button span[aria-hidden] { font-size: 19px; line-height: 1; }
.topbar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 13px 20px; background: linear-gradient(110deg, #1155df, #2869ed); color: #fff; box-shadow: 0 3px 14px #224f991a; z-index: 2; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; letter-spacing: -.6px; flex-shrink: 0; }
.brand strong { display: block; color: #c7edff; font-size: 15px; letter-spacing: 1px; font-weight: 600; }
.brand-symbol { display: grid; place-items: center; width: 43px; height: 43px; background: #fff; color: #175de7; border-radius: 14px 14px 5px 14px; font-size: 23px; font-weight: 800; box-shadow: 0 4px 10px #06309c25; }
.project-label { display: flex; flex-direction: column; gap: 3px; padding: 5px 12px; background: #1249ba; border: 1px solid #7aabff80; border-radius: 11px; }
.project-label>span { font-size: 9px; font-weight: 750; letter-spacing: 1.4px; color: #b9d9ff; }
.project-label input { width: 175px; max-width: 100%; font-size: 14px; font-weight: 650; color: #fff; border: 0; background: transparent; padding: 0 0 2px; }
.actions { display: flex; align-items: center; gap: 6px; }

.actions button svg { width: 20px; height: 20px; flex: none; }

#board-connect .conn-state-on[hidden], #board-connect .conn-state-off[hidden] { display: none; }

.monitor-guidance { margin: 0 0 12px; font-size: 12px; color: #b7c8e5; }

.monitor-guidance[hidden] { display: none; }
.actions button { color: #fff; background: #ffffff12; }
.actions button:hover:not(:disabled) { background: #ffffff2b; }
.actions .button-primary { color: #193457; background: #ffda54; box-shadow: 0 3px 0 #dfac26, 0 6px 12px #14398c28; margin-left: 6px; }
.actions .button-primary:hover:not(:disabled) { background: #ffe780; }
.board-badge { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 12px; white-space: nowrap; }
.board-symbol { color: #a7f3d0; font-size: 25px; }
.demo-badge { padding: 5px 7px; border-radius: 6px; background: #e4d7ff; color: #5b2eb0; font-size: 10px; font-weight: 800; letter-spacing: .5px; }
.ide { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 12px 12px 0; }
.editor-shell { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.editor-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(310px, 28vw, 440px); gap: 12px; }
.editor-grid.code-collapsed { grid-template-columns: minmax(0, 1fr); }
.workspace-panel { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid #cedcf0; border-radius: 18px; overflow: hidden; box-shadow: 0 4px 18px #37548a08; }
.panel-heading { min-height: 67px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; }
.workspace-heading { flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.workspace-title { display: flex; align-items: center; gap: 10px; }
.heading-symbol { width: 35px; height: 35px; display: grid; place-items: center; font-size: 25px; color: #7e45d1; background: #f1e9ff; border-radius: 11px; }
h1, h2 { margin: 0; font-size: 16px; font-weight: 750; }
.workspace-title p { margin: 3px 0 0; font-size: 12px; color: var(--muted); }
.workspace-actions { display: flex; gap: 6px; align-items: center; }
.workspace-actions button { font-size: 12px; min-height: 40px; padding: 9px 11px; border-radius: 10px; }
.button-light { background: #f2f5fb; color: #50637f; }
.button-light:hover:not(:disabled) { background: #e4ecf9; }
.button-code-toggle { background: #eaf2ff; color: #1c5bce; }
.button-code-toggle:hover { background: #dbe9ff; }
.workspace-stage { position: relative; flex: 1; min-height: 180px; background: #f5f7fc; }
#workspace { position: absolute; inset: 0; width: 100%; height: 100%; }
.workspace-tip { display: flex; align-items: center; gap: 9px; padding: 10px 14px; background: #fffdf3; border-top: 1px solid #f0e8c7; font-size: 12px; line-height: 1.5; color: #766038; }
.tip-badge { color: #ac7910; font-size: 22px; }
.code-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-radius: 18px; overflow: hidden; color: #e5edff; background: #142239; border: 1px solid #233650; box-shadow: 0 5px 20px #152b5020; }
.code-panel[hidden] { display: none; }
.code-heading { background: #1d2e49; border-bottom: 1px solid #31435e; }
.code-heading>div { display: flex; align-items: center; gap: 10px; }
.code-heading-icon { color: #b7a0ff; font: bold 20px Consolas, monospace; }
.language-tag { color: #b4cdf5; border: 1px solid #435674; border-radius: 7px; padding: 4px 6px; font-size: 11px; }
.code-toolbar { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 13px 14px 9px; }
.code-file { display: inline-flex; align-items: center; gap: 8px; color: #d5e3fc; font: 13px Consolas, monospace; }
.code-file>span { color: #f8c95d; font-size: 9px; }
#copy-code { min-height: 38px; padding: 7px 10px; font-size: 12px; border: 1px solid #496080; color: #dceaff; background: #243a58; border-radius: 9px; }
#copy-code:hover:not(:disabled) { background: #304c71; }
#copy-code.copied { color: #a5f3cf; border-color: #4d9a83; background: #19483d; }
.code-status { display: flex; align-items: center; gap: 7px; padding: 0 15px 12px; font-size: 10px; color: #a7bfdf; }
.code-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #57d9aa; flex-shrink: 0; }
.read-only { margin-left: auto; color: #a7bfdf; }
.code-panel[data-state="stale"] .code-status-dot { background: #ffd05f; }
.code-panel[data-state="error"] .code-status-dot { background: #ff8a9a; }
.code-panel pre { flex: 1; min-height: 0; overflow: auto; margin: 0; padding: 15px 18px 25px; border-top: 1px solid #293b56; font: 13px/1.85 Consolas, "Courier New", monospace; white-space: pre; tab-size: 2; color: #b9dcff; scrollbar-color: #405777 #142239; }
.code-panel pre::selection, .code-panel code::selection { background: #3f5c95; }
.code-note { display: flex; align-items: center; gap: 12px; padding: 12px 17px; border-top: 1px solid #30415d; background: #1a2a44; }
.code-note>span { color: #b49bff; font-size: 31px; }
.code-note p { margin: 0; color: #b7c8e5; font-size: 12px; line-height: 1.6; }
.code-note strong { font-weight: 600; color: #e1dcff; }
.statusbar { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 10px 7px 7px; font-size: 12px; line-height: 1.4; color: #506581; }
#status::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #2ea57b; }
#status[data-error="true"] { color: #b52f48; }
#status[data-error="true"]::before { background: #ce3959; }
#block-count { white-space: nowrap; border-radius: 20px; padding: 5px 10px; color: #5a43ad; background: #e7e0fc; font-weight: 650; }
.ide-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 7px 10px; font-size: 11px; color: #657690; }
.ide-footer>span:first-child { display: flex; align-items: center; gap: 6px; }
.ide-footer strong { color: #7a4cbd; font-size: 10px; }
.ide-footer a:hover { color: var(--blue); text-decoration: underline; }
.footer-dot { width: 6px; height: 6px; border-radius: 50%; background: #9b74e1; }
.load-error { margin: 20px; color: #b32232; line-height: 1.6; }
/* Classes aplicadas pela configuração pública cssConfig do Blockly. */
#workspace .blocklyToolboxDiv { background: #fff !important; border-right: 1px solid #dce5f3; padding: 14px 8px; }

/* Texto dos blocos: fundos vivos das famílias UI3.1 exigem tinta escura.

   Classes .blocklyText/.blocklyEditableText são estáveis entre versões. */

#workspace .blocklyText { fill: var(--dm-text-block); }
.dm-category { min-width: 147px; min-height: 61px; padding: 8px 13px 8px 9px !important; margin: 0 0 9px; border-radius: 13px; cursor: pointer; border-left: 4px solid var(--category-color) !important; background: var(--category-tint); transition: box-shadow .15s; }
.dm-category:hover { box-shadow: 0 0 0 2px var(--category-color) inset; }
.dm-category-content { min-height: 45px; display: flex; align-items: center; gap: 10px; }
.dm-category-label { font: 650 14px "Segoe UI", Arial, sans-serif; color: #2c3e58; }
.dm-category-icon { display: grid; place-items: center; flex: 0 0 29px; height: 29px; border-radius: 9px; color: #fff; background: var(--category-color); font: 800 18px "Segoe UI", Arial, sans-serif; }
.dm-category-start { --category-color: var(--cat-start-bg); --category-tint: var(--cat-start-tint); }

.dm-category-control { --category-color: var(--cat-control-bg); --category-tint: var(--cat-control-tint); }

.dm-category-logic { --category-color: var(--cat-logic-bg); --category-tint: var(--cat-logic-tint); }

.dm-category-math { --category-color: var(--cat-math-bg); --category-tint: var(--cat-math-tint); }

.dm-category-variables { --category-color: var(--cat-variables-bg); --category-tint: var(--cat-variables-tint); }

.dm-icon-variables::before { content: '📦'; }

.dm-category-board { --category-color: var(--cat-board-bg); --category-tint: var(--cat-board-tint); }

.dm-category-placa { --category-color: var(--cat-board-bg); --category-tint: var(--cat-board-tint); }

.dm-icon-placa::before { content: '🔌'; }

.dm-category-outputs { --category-color: var(--cat-outputs-bg); --category-tint: var(--cat-outputs-tint); }

.dm-icon-start::before { content: '⭐'; }

.dm-icon-control::before { content: '🔁'; }

.dm-icon-logic::before { content: '🔀'; }

.dm-icon-math::before { content: '➗'; }

.dm-icon-board::before { content: '✦'; }

.dm-icon-outputs::before { content: '💡'; }
.dm-category.blocklyTreeSelected .dm-category-label,
.dm-category.blocklyToolboxSelected .dm-category-label { color: #fff !important; }
.dm-category.blocklyTreeSelected .dm-category-icon,
.dm-category.blocklyToolboxSelected .dm-category-icon { background: #ffffff30; }
#workspace .blocklyMainBackground { stroke: none; }
#workspace .blocklyFlyoutLabelText { fill: #536682; font-size: 13px; }
@media (max-width: 1250px) {
  .topbar { gap: 12px; padding: 11px 15px; }
  .brand { font-size: 18px; }
  .project-label input { width: 148px; }
  .actions button { padding: 10px 12px; }
  .board-badge { font-size: 11px; }
  .workspace-title p { display: none; }
}
@media (max-width: 1000px) {
  .board-badge { margin-left: 0; }
  .topbar { column-gap: 15px; row-gap: 10px; }
  .actions { margin-left: auto; }
  .editor-grid { grid-template-columns: minmax(0, 1fr) 310px; }
  .workspace-actions { flex-wrap: wrap; }
  .workspace-tip { font-size: 11px; }
  .ide-footer>span:nth-child(2) { display: none; }
}
@media (max-width: 760px) {
  body { min-height: 700px; }
  .topbar { padding: 10px 12px; gap: 10px; }
  .brand { font-size: 17px; }
  .brand-symbol { width: 36px; height: 36px; font-size: 20px; }
  .brand strong { font-size: 12px; }
  .project-label { margin-left: auto; }
  .project-label input { width: 135px; }
  .actions { order: 3; width: 100%; margin: 0; gap: 5px; }
  .actions button { flex: 1; padding: 10px 8px; font-size: 13px; }
  .actions .button-primary { flex: 1.5; margin-left: 0; }
  .board-badge { width: 100%; font-size: 12px; }
  .ide { padding: 8px 8px 0; }
  .editor-grid { display: flex; flex-direction: column; gap: 8px; overflow: auto; }
  .workspace-panel { flex: 1 0 390px; }
  .editor-grid.code-collapsed .workspace-panel { flex: 1; min-height: 0; }
  .code-panel { flex: 0 0 360px; }
  .workspace-heading { padding: 9px 10px; gap: 7px; }
  .workspace-title { gap: 7px; }
  h1, h2 { font-size: 14px; }
  .workspace-actions { gap: 4px; }
  .workspace-actions button { padding: 8px; font-size: 11px; }
  .workspace-tip { padding: 7px 10px; }
  .dm-category { min-width: 123px; padding-left: 6px !important; min-height: 55px; }
  .dm-category-content { gap: 7px; min-height: 39px; }
  .dm-category-label { font-size: 12px; }
  .dm-category-icon { flex-basis: 25px; height: 25px; font-size: 16px; }
  #workspace .blocklyToolboxDiv { padding: 10px 5px; }
  .statusbar { font-size: 11px; align-items: flex-start; }
  .ide-footer { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }