/* Deliberately barebones: correctness first, no visual polish. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: system-ui, sans-serif; }
body { display: flex; flex-direction: column; }

header {
  padding: 6px 10px; background: #222; color: #eee;
  display: flex; gap: 12px; align-items: baseline;
}
header #status { color: #8c8; font-size: 13px; }

main { flex: 1; display: flex; min-height: 0; }

/* left: assets block (upload + /downloads panel) above the example list */
#left { width: 210px; display: flex; flex-direction: column; min-width: 0; border-right: 1px solid #ccc; }
#assets { padding: 6px; border-bottom: 1px solid #ccc; font-size: 13px; }
#assets .upload { cursor: pointer; color: #06c; }
#assets .upload input { display: none; }
#downloads { margin-top: 6px; }
#downloads-hdr {
  font-size: 11px; text-transform: uppercase; color: #888;
  font-family: ui-monospace, Menlo, Consolas, monospace; margin-bottom: 3px;
}
#downloads-list {
  list-style: none; margin: 0; padding: 0; max-height: 140px; overflow: auto;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px;
}
#downloads-list li { display: flex; justify-content: space-between; gap: 8px; padding: 1px 0; }
#downloads-list li .fn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#downloads-list li .sz { color: #888; flex: none; }
#downloads-list li.empty { color: #aaa; font-style: italic; }

#examples { flex: 1; overflow: auto; padding: 4px; }
#examples .cat {
  font-size: 11px; text-transform: uppercase; color: #888; margin: 8px 4px 2px;
}
#examples .item {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 4px 6px; cursor: pointer; font-size: 13px; border-radius: 3px;
}
#examples .item:hover { background: #eee; }
#examples .item.active { background: #d0e4ff; }
#examples .paste { color: #06c; font-weight: bold; margin-bottom: 4px; }

/* center: code + controls */
#center { flex: 1; display: flex; flex-direction: column; min-width: 0; border-right: 1px solid #ccc; }
#controls {
  padding: 4px 6px; display: flex; gap: 10px; align-items: center;
  border-bottom: 1px solid #eee; font-size: 13px;
}
#code {
  flex: 1; width: 100%; border: 0; padding: 8px; resize: none;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px;
  white-space: pre; overflow: auto;
}

/* right: canvas + console */
#right { width: 46%; display: flex; flex-direction: column; min-width: 0; }
#canvas { flex: 1; width: 100%; display: block; background: #000; min-height: 0; }
#rightbar { padding: 4px 6px; border-top: 1px solid #eee; }
#console {
  margin: 0; padding: 6px; height: 130px; overflow: auto;
  background: #111; color: #ddd;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; white-space: pre-wrap;
}
#console.error { color: #f88; }