* { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Courier New', monospace; }
    #app { display: flex; height: 100vh; background: #1a1a2e; color: #e0e0e0; overflow: hidden; font-size: 13px; }
 
    /* ── LEFT PANEL ── */
    #left { width: 220px; min-width: 220px; background: #161b22; border-right: 1px solid #373838; display: flex; flex-direction: column; }
    #left-header { padding: 14px 14px 8px; border-bottom: 1px solid #34D399; }
    #left-header h2 { font-size: 14px; color: #34D399; letter-spacing: 2px; font-weight: 700; }
    #blocks-list { flex: 1; overflow-y: auto; padding: 0 10px 10px; display: flex; flex-direction: column; gap: 6px; }
    #blocks-list::-webkit-scrollbar { width: 4px; }
    #blocks-list::-webkit-scrollbar-thumb { background: #373838; border-radius: 2px; }
 
    .cat-label { font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: 1.5px; padding: 8px 4px 4px; }
 
    .block {
      padding: 8px 12px; border-radius: 6px; cursor: grab; user-select: none;
      font-size: 12px; font-weight: 600; line-height: 1.3; border-left: 3px solid transparent;
      transition: transform 0.1s, opacity 0.1s;
    }
    .block:active { cursor: grabbing; transform: scale(0.97); }
    .block .sub { font-size: 10px; font-weight: 400; opacity: 0.7; margin-top: 2px; }
 
    /* ── Block colours ── */
.block.b-pin, .placed.b-pin {
  background: #102a43; /* deep blue */
  border-left-color: #3b82f6;
  color: #dbeafe;
}

.block.b-digital, .placed.b-digital {
  background: #052e16; /* deep green */
  border-left-color: #22c55e;
  color: #bbf7d0;
}

.block.b-analog, .placed.b-analog {
  background: #3b1d0f; /* burnt orange */
  border-left-color: #f97316;
  color: #ffedd5;
}

.block.b-wait, .placed.b-wait {
  background: #2e1065; /* purple */
  border-left-color: #a855f7;
  color: #ede9fe;
}

.block.b-serial, .placed.b-serial {
  background: #422006; /* amber/brown */
  border-left-color: #eab308;
  color: #fef9c3;
}

.block.b-math, .placed.b-math {
  background: #0c4a6e; /* cyan-blue */
  border-left-color: #06b6d4;
  color: #cffafe;
}

.block.b-control, .placed.b-control {
  background: #064e3b; /* teal green */
  border-left-color: #14b8a6;
  color: #ccfbf1;
}

.block.b-global, .placed.b-global {
  background: #1e1b4b; /* indigo */
  border-left-color: #6366f1;
  color: #e0e7ff;
}

.block.b-sensor, .placed.b-sensor {
  background: #500724; /* magenta */
  border-left-color: #ec4899;
  color: #fce7f3;
}

.block.b-var, .placed.b-var {
  background: #3f0a0a; /* red */
  border-left-color: #ef4444;
  color: #fee2e2;
}
 
    /* Placed blocks use darker tones */
    .placed.b-pin    { background: #0d1f30; }
    .placed.b-write  { background: #0d2015; }
    .placed.b-read   { background: #201508; }
    .placed.b-wait   { background: #180d25; }
    .placed.b-serial { background: #201a08; }
    .placed.b-math   { background: #0d1a25; }
    .placed.b-control{ background: #0d2018; }
 
    /* ── RIGHT PANEL ── */
    #right { flex: 1; display: flex; flex-direction: column; background: #0d1117; }
 
    #right-top { display: flex; justify-content: flex-end; align-items: center; padding: 10px 14px; background: #161b22; border-bottom: 1px solid #373838; gap: 10px; }
    #btn-clear { font-size: 11px; background: #34D399; border: 1px solid #2ea043; color: #fff; padding: 5px 10px; border-radius: 5px; cursor: pointer; font-family: 'Courier New', monospace; }
    #btn-clear:hover { background: #30363d; color: #e0e0e0; }
    #btn-download { font-size: 11px; background: #34D399; border: 1px solid #2ea043; color: #fff; padding: 5px 12px; border-radius: 5px; cursor: pointer; font-weight: 600; font-family: 'Courier New', monospace; }
    #btn-download:hover { background: #5aeeb8; }
 
    /* ── SECTIONS ── */
    #sections { flex: 1; display: flex; overflow: hidden; }
    .section { flex: 1; display: flex; flex-direction: column; border-right: 1px solid #21262d; overflow: hidden; }
    .section:last-child { border-right: none; }
 
    .section-head { padding: 8px 12px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; display: flex; align-items: center; gap: 6px; }
    .section-head.globals { background: #0d1117; color: #34D399; border-bottom: 1px solid #373838;  }
    .section-head.setup { background: #0d1117; color: #34D399; border-bottom: 1px solid #373838; }
    .section-head.loop  { background: #0d1117; color: #34D399; border-bottom: 1px solid #373838; padding-bottom: 11px; }
 
    .drop-zone { flex: 1; padding: 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; min-height: 0; }
    .drop-zone::-webkit-scrollbar { width: 4px; }
    .drop-zone::-webkit-scrollbar-thumb { background: #21262d; border-radius: 2px; }
    .drop-zone.drag-over { background: rgba(88,166,255,0.07); outline: 2px dashed #58a6ff44; outline-offset: -4px; border-radius: 6px; }
 
    .drop-hint { text-align: center; color: #444; font-size: 12px; margin: auto; padding: 20px; }
    .drop-hint i { font-size: 28px; display: block; margin-bottom: 8px; color: #333; font-style: normal; }
 
    /* ── Placed blocks ── */
    .placed {
      padding: 7px 10px; border-radius: 5px; font-size: 12px; font-weight: 600;
      display: flex; flex-direction: column; gap: 4px;
      cursor: default; position: relative; border-left: 3px solid transparent;
    }
 
    .placed-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
 
    .placed .inline-input {
      background: transparent; border: none; border-bottom: 1px dashed currentColor; color: inherit;
      font-family: 'Courier New', monospace; font-size: 12px; font-weight: 700;
      text-align: center; outline: none;
    }
    .placed .inline-select {
      background: transparent; border: none; border-bottom: 1px dashed currentColor; color: inherit;
      font-family: 'Courier New', monospace; font-size: 12px; font-weight: 700;
      outline: none; cursor: pointer;
    }
    .placed .inline-select option { background: #161b22; }
 
    .placed .del-btn { margin-left: auto; background: none; border: none; color: #555; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; flex-shrink: 0; }
    .placed .del-btn:hover { color: #ff5555; }
 
    /* ── Nested / control blocks ── */
    .nested-body {
      margin-left: 12px;
      padding: 4px 4px 4px 8px;
      border-left: 2px solid rgba(52, 211, 153, 0.25);
      min-height: 32px;
    }
 
    .nested-drop {
      min-height: 30px;
      border-radius: 4px;
      border: 1px dashed rgba(52, 211, 153, 0.2);
      padding: 4px;
      display: flex;
      flex-direction: column;
      gap: 5px;
      transition: background .12s, border-color .12s;
    }
    .nested-drop.drag-over {
      background: rgba(52, 211, 153, 0.07);
      border-color: rgba(52, 211, 153, 0.5);
      outline: 1px dashed #34D39966;
      outline-offset: -2px;
    }
 
    .nested-hint { text-align: center; color: #2a4a3a; font-size: 10px; padding: 4px; letter-spacing: 1px; }
 
    .close-brace { font-size: 11px; color: #34D399; opacity: 0.5; padding-top: 2px; font-family: 'Courier New', monospace; }
 
    /* ── PREVIEW ── */
    #preview { height: 300px; background: #0d1117; border-top: 1px solid #21262d; overflow: hidden; display: flex; flex-direction: column; }
    #preview-head { padding: 6px 14px; font-size: 10px; color: #8b949e; text-transform: uppercase; letter-spacing: 1px; background: #0d1117; border-bottom: 1px solid #21262d; }
    #code-out { flex: 1; overflow-y: auto; padding: 10px 14px; font-family: 'Courier New', monospace; font-size: 11px; line-height: 1.6; color: #8b949e; white-space: pre; }
    #code-out::-webkit-scrollbar { width: 4px; }
    #code-out::-webkit-scrollbar-thumb { background: #21262d; }
 
    .ck { color: #ff7b72; } .cv { color: #79c0ff; } .cn { color: #f8c555; } .cs { color: #a5d6ff; } .cc { color: #8b949e; }