:root {
  --bg: #f4f6f2;
  --panel: #ffffff;
  --text: #1f2a1d;
  --muted: #5d6b59;
  --green: #3a9a3a;
  --green-dark: #2b7a2b;
  --red: #d64541;
  --red-dark: #b0322f;
  --yellow: #f2c94c;
  --border: #d8ded3;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); }
[hidden] { display: none !important; }

.button {
  border: 0;
  border-radius: 10px;
  padding: 10px 22px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
}
.button:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
.button:disabled { opacity: 0.5; cursor: default; }
.go { background: var(--green); }
.go:hover:not(:disabled) { background: var(--green-dark); }
.stop { background: var(--red); }
.stop:hover:not(:disabled) { background: var(--red-dark); }
.link { background: none; border: 0; color: var(--muted); cursor: pointer; text-decoration: underline; font-size: 14px; }

/* Login */
.login { display: grid; place-items: center; height: 100%; padding: 16px; }
.login-card {
  background: var(--panel);
  padding: 32px;
  border-radius: 16px;
  width: min(380px, 100%);
  display: grid;
  gap: 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.login-card h1 { margin: 0; font-size: 32px; color: var(--green-dark); }
.login-card p { margin: 0; color: var(--muted); }
.login-card label { display: grid; gap: 4px; font-weight: 600; }
.login-card input { font-size: 18px; padding: 10px; border: 2px solid var(--border); border-radius: 8px; }
.login-error { color: var(--red); min-height: 1.2em; }

/* Editor */
.editor { display: flex; flex-direction: column; height: 100%; }
.bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.logo { font-weight: 800; font-size: 20px; color: var(--green-dark); }
.project { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.project select { font-size: 16px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border); }
.saved { color: var(--muted); font-size: 14px; min-width: 60px; }
.spacer { flex: 1; }
.who { color: var(--muted); font-size: 14px; }

.status { font-weight: 700; padding: 6px 12px; border-radius: 999px; font-size: 15px; }
.status.idle { background: #e6e9e3; color: var(--muted); }
.status.ready { background: #dff3df; color: var(--green-dark); }
.status.changed { background: #fff4cc; color: #7a5b00; }
.status.running { background: var(--yellow); color: #4a3800; }

.message { padding: 0 16px; font-size: 17px; }
.message:not(:empty) { padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--panel); }
.message.good { color: var(--green-dark); }
.message.bad { color: var(--red-dark); background: #fdeceb; }
.message code { background: #eef1ec; padding: 1px 6px; border-radius: 4px; font-size: 16px; }

.workspace { flex: 1; min-height: 0; }

/* Bigger toolbox for young readers */
.blocklyToolboxCategoryLabel { font-size: 18px; padding: 4px 8px; }
.blocklyToolboxCategory { padding: 4px 0; }