html, body { height: 100%; overflow: hidden; }
.connect { display: flex; align-items: center; justify-content: center; height: 100%; }
.connect .card { width: min(560px, 92vw); text-align: center; }
#app { display: flex; flex-direction: column; height: 100%; }
.toolbar { display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: var(--panel); border-bottom: 1px solid var(--border); }
.toolbar .logo { width: 22px; image-rendering: pixelated; }
.toolbar .file { font-family: var(--mono); font-weight: 600; }
.toolbar .spacer { flex: 1; }
.toolbar .tabs { border: none; margin: 0; }
.small { font-size: 13px; }
.workspace { flex: 1; display: flex; min-height: 0; }
.pane { flex: 1; min-width: 0; }
#blocks { background: #111923; }
/* Blockly's theme controls blocks and fields; CSS only supplies the dark editor shell. */
#blocks .blocklySvg { background: #111923 !important; }
#blocks .blocklyMainBackground { fill: #111923 !important; stroke: none !important; }
#blocks .blocklyToolboxDiv {
  background: #19232f !important;
  color: #edf5ff !important;
  border-right: 1px solid #2d3b4b;
  padding: 8px 6px;
}
#blocks .blocklyToolboxCategory,
#blocks .blocklyTreeRow {
  border-radius: 8px;
  margin: 2px 4px;
  min-height: 34px;
}
#blocks .blocklyToolboxCategory .blocklyTreeLabel,
#blocks .blocklyTreeLabel,
#blocks .blocklyToolboxCategoryLabel,
#blocks .blocklyToolboxCategoryLabel > span {
  color: #edf5ff !important;
  fill: #edf5ff !important;
  font: 600 13px/1.3 system-ui, sans-serif !important;
  opacity: 1 !important;
}
#blocks .blocklyToolboxCategoryContainer { background: #19232f !important; }
#blocks .blocklyToolboxCategoryLabel { padding: 8px 10px !important; }
#blocks .blocklyToolboxCategory:hover,
#blocks .blocklyTreeRow:hover { background: #28384a !important; }
#blocks .blocklyToolboxCategory.blocklyTreeSelected,
#blocks .blocklyTreeSelected { background: #30445a !important; }
#blocks .blocklyFlyout { filter: drop-shadow(4px 0 12px #0005); }
#blocks .blocklyScrollbarHandle { fill: #52677e !important; }
#blocks .blocklyZoom > image { opacity: .9; }
.side { width: 380px; border-left: 1px solid var(--border); background: var(--panel); overflow: auto; padding: 14px; }
.side h3 { margin-top: 0; }
.problems { max-height: 140px; overflow: auto; border-top: 1px solid var(--border); background: var(--panel); font-size: 13px; }
.problems div { padding: 3px 12px; cursor: pointer; font-family: var(--mono); }
.problems div:hover { background: var(--panel2); }
.problems .hint { font-family: var(--font); color: var(--muted); padding-left: 28px; }
.status.ok { color: var(--ok); } .status.err { color: var(--err); } .status.warn { color: var(--warn); }
.lesson-text p { margin: 6px 0; }
.lesson-nav { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.check-result { margin-top: 10px; padding: 8px; border-radius: 6px; background: var(--bg); }