*{box-sizing:border-box}
body{margin:0;font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial}
header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#111;color:#fff;gap:12px;flex-wrap:wrap}
h1{font-size:20px;margin:0}
.actions{display:flex;gap:8px;flex-wrap:wrap}
button{border:0;padding:8px 12px;border-radius:6px;background:#eee;cursor:pointer}
button:hover{filter:brightness(0.95)}
main{display:grid;grid-template-columns:1fr 420px;gap:10px;height:calc(100vh - 64px);padding:10px}
#blocklyDiv{width:100%;height:100%;border:1px solid #ddd;border-radius:8px;overflow:hidden}
#codeArea{margin:0;border:1px solid #ddd;border-radius:8px;background:#0b1020;color:#cfe3ff;padding:12px;overflow:auto;white-space:pre}
@media (max-width:980px){ main{grid-template-columns:1fr;grid-template-rows:60vh 40vh} }

/* === Sensors-only styling === */
/* Colored, underlined subsection titles */
.blocklyTreeLabel.sensor-label{
  font-weight: bold;
  text-decoration: underline;
  padding: 3px 5px;
  border-radius: 4px;
  display: inline-block;
  margin: 2px 0 4px 0;
  border-bottom: 1px solid rgba(0,0,0,0.15); /* thin separator */
}

/* Different background colors for each Sensors subsection */
.blocklyTreeLabel.basic{background-color:#e0f7fa;}         /* light cyan */
.blocklyTreeLabel.environmental{background-color:#e8f5e9;}  /* light green */
.blocklyTreeLabel.motion{background-color:#fff3e0;}         /* light orange */
.blocklyTreeLabel.security{background-color:#fce4ec;}       /* light pink */
.blocklyTreeLabel.positioning{background-color:#ede7f6;}    /* light purple */

/* Compact spacing for blocks under Sensors subsections only */
.blocklyToolboxDiv .blocklyTreeRow:has(.sensor-label){
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

/* Slight gap after the separator line before first block */
.blocklyToolboxDiv .blocklyTreeRow:has(.sensor-label) + .blocklyTreeRow{
  margin-top: 2px !important;
}

/* Make subsequent block entries tighter after a sensor label.
   Note: This scopes to rows that follow a sensor label in the open toolbox tree. */
.blocklyToolboxDiv .blocklyTreeRow:has(.sensor-label) ~ .blocklyTreeRow{
  margin: 0 !important;
  padding: 2px 4px !important;
}