.blocks-editor { height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--md-surface-container-low); }
.blocks-palette { padding: 12px; border-bottom: 1px solid var(--md-outline-variant); background: var(--md-surface-container-lowest); }
.panel-section-title { margin-bottom: 9px; justify-content: space-between; }
.panel-section-title small { color: var(--md-on-surface-variant); font-size: 8px; font-weight: 500; }
.block-palette-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.palette-block {
  min-height: 50px;
  padding: 7px 5px;
  display: grid;
  place-items: center;
  gap: 3px;
  color: var(--block-accent);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-md);
  background: var(--md-surface-container-lowest);
  font-size: 7px;
  font-weight: 600;
}
.palette-block:hover { background: color-mix(in srgb, var(--block-accent) 7%, var(--md-surface-container-lowest)); border-color: color-mix(in srgb, var(--block-accent) 35%, var(--md-outline-variant)); }
.palette-block .material-symbols-rounded { font-size: 19px; }
.blocks-program { min-height: 0; padding: 12px; overflow: auto; }
.blocks-program-header { min-height: 38px; margin-bottom: 8px; }
.blocks-program-header strong { display: block; font-size: 11px; font-weight: 600; }
.blocks-program-header small { color: var(--md-on-surface-variant); font-size: 8px; }
.block-list { min-height: 60px; display: grid; gap: 7px; }
.block-list.is-drop-target { outline: 2px solid var(--md-primary); outline-offset: 3px; border-radius: var(--md-radius-md); }
.program-block { overflow: hidden; border: 1px solid var(--md-outline-variant); border-left: 4px solid var(--block-accent); border-radius: var(--md-radius-md); background: var(--md-surface-container-lowest); cursor: grab; }
.program-block.is-dragging { opacity: .45; }
.block-blue { --block-accent: #2e6de6; } .block-green { --block-accent: #14845a; } .block-orange { --block-accent: #b85d00; } .block-purple { --block-accent: #7352b8; } .block-red { --block-accent: #b3261e; } .block-teal { --block-accent: #0e756b; } .block-pink { --block-accent: #a84278; } .block-yellow { --block-accent: #946b00; } .block-amber { --block-accent: #9a6500; } .block-slate { --block-accent: #475467; } .block-cyan { --block-accent: #087e95; } .block-indigo { --block-accent: #4f46a5; }
.program-block-head { min-height: 38px; padding: 0 7px; display: flex; align-items: center; gap: 5px; color: color-mix(in srgb, var(--block-accent) 76%, var(--md-on-surface)); background: color-mix(in srgb, var(--block-accent) 6%, var(--md-surface-container-lowest)); }
.program-block-head > .material-symbols-rounded:first-child { color: var(--md-outline); cursor: grab; }
.program-block-head > .material-symbols-rounded { font-size: 15px; }
.program-block-head strong { min-width: 0; flex: 1; font-size: 8.5px; font-weight: 600; }
.program-block-actions { display: flex; align-items: center; gap: 1px; }
.program-block-actions button { width: 27px; height: 27px; padding: 0; display: grid; place-items: center; color: var(--md-on-surface-variant); border: 0; border-radius: 50%; background: transparent; }
.program-block-actions button:hover { color: var(--md-primary); background: var(--md-surface-container-high); }
.program-block-actions button:last-child:hover { color: var(--md-error); background: var(--md-error-container); }
.program-block-actions .material-symbols-rounded { font-size: 14px; }
.program-block-fields { padding: 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.program-block-fields:empty { display: none; }
.block-field { min-width: 0; display: grid; gap: 4px; color: var(--md-on-surface-variant); font-size: 7px; font-weight: 600; }
.block-field-control { min-height: 32px; padding-inline: 7px; border-radius: var(--md-radius-sm); font-size: 8px; }
.nested-block-list { min-height: 54px; margin: 0 7px 7px 13px; padding: 7px; border-left: 2px solid color-mix(in srgb, var(--block-accent) 38%, var(--md-outline-variant)); border-radius: 0 var(--md-radius-sm) var(--md-radius-sm) 0; background: var(--md-surface-container-low); }
.nested-label { margin-bottom: 4px; color: var(--md-on-surface-variant); font-size: 7px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.blocks-empty { min-height: 70px; padding: 12px; border: 1px dashed var(--md-outline); border-radius: var(--md-radius-md); background: transparent; font-size: 8px; }
.blocks-empty .material-symbols-rounded { color: var(--md-outline); font-size: 20px; }