:root {
  color-scheme: dark;
  --bg: #101814;
  --panel: #151e19;
  --panel-raised: #1b2620;
  --line: #29362f;
  --text: #e9f0e9;
  --muted: #87968b;
  --green: #b6f36b;
  --green-dim: #2c4725;
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --sans: 'Avenir Next', 'Segoe UI', Arial, sans-serif;
  --display: 'Avenir Next', 'Segoe UI', Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { min-width: 340px; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--sans); }
button { color: inherit; font: inherit; }

.topbar { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; background: #131b16; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; gap: 10px; align-items: center; color: var(--text); text-decoration: none; font-family: var(--display); font-weight: 700; letter-spacing: -.04em; font-size: 17px; }
.brand-mark { width: 21px; height: 21px; display: grid; grid-template-columns: repeat(2, 7px); grid-template-rows: repeat(2, 7px); gap: 3px; transform: rotate(-7deg); }
.brand-mark span { display: block; background: var(--green); border-radius: 2px; }
.brand-mark span:nth-child(2), .brand-mark span:nth-child(3) { opacity: .58; }
.brand-dot { color: var(--green); }
.brand-divider { width: 1px; height: 20px; margin: 0 3px 0 5px; background: var(--line); }
.brand-product { color: #a6b2a9; font-size: 13px; letter-spacing: -.015em; font-weight: 500; }
.topbar-right { display: flex; align-items: center; gap: 18px; }
.saved-indicator { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.status-dot, .footer-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px #b6f36b68; }
.button { height: 34px; border: 1px solid transparent; border-radius: 6px; padding: 0 13px; cursor: pointer; font-size: 11px; font-weight: 600; transition: .16s ease; }
.button-quiet { color: #a8b2aa; background: transparent; border-color: var(--line); }
.button-quiet:hover { border-color: #526256; color: var(--text); }
.button-primary { color: #172110; background: var(--green); box-shadow: 0 2px 14px #b6f36b15; }
.button-primary:hover { background: #c7ff83; transform: translateY(-1px); }
.button-primary span { font-size: 15px; vertical-align: -1px; margin-right: 4px; }

.app-shell { height: calc(100% - 64px); display: grid; grid-template-columns: minmax(0, 1fr) 405px; }
.workspace-panel { min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--bg); }
.panel-heading { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; }
.workspace-heading { height: 120px; padding: 23px 30px 18px; }
.eyebrow { display: flex; align-items: center; gap: 8px; color: #8d9d90; font: 500 9px var(--mono); letter-spacing: .115em; }
.eyebrow-line { width: 13px; height: 1px; display: inline-block; background: var(--green); }
h1, h2 { margin: 8px 0 2px; font-family: var(--display); letter-spacing: -.045em; }
h1 { font-size: 24px; line-height: 1.2; }
h2 { font-size: 18px; line-height: 1.2; }
.subheading { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.workspace-tools { display: flex; gap: 16px; align-items: center; padding-top: 25px; }
.tool-hint { color: #758379; font-size: 10px; }
kbd { display: inline-block; margin: 0 2px; padding: 2px 4px; border: 1px solid #354239; border-radius: 3px; background: #1b241f; color: #a3afa5; font: 9px var(--mono); }
.icon-button { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: #aab6ad; cursor: pointer; transition: .16s ease; }
.icon-button:hover { color: var(--green); border-color: #637754; background: #1b251d; }
.blockly-frame { min-height: 0; flex: 1; position: relative; overflow: hidden; background-color: #121a15; background-image: radial-gradient(#344238 0.75px, transparent 0.75px); background-size: 20px 20px; }
#blocklyDiv { position: absolute; inset: 0; width: 100%; height: 100%; }
.workspace-footer { flex: 0 0 37px; display: flex; justify-content: space-between; align-items: center; padding: 0 30px; border-top: 1px solid #222e27; background: #131b16; color: #86948a; font-size: 10px; }
.workspace-footer > span:first-child { display: flex; gap: 8px; align-items: center; }
.live-dot { width: 6px; height: 6px; background: var(--green); border-radius: 50%; }

.output-panel { min-width: 0; display: flex; flex-direction: column; background: #151e19; }
.output-heading { height: 120px; padding: 23px 23px 17px; }
.version-tag { display: inline-block; margin-left: 4px; padding: 2px 5px; border-radius: 3px; background: #263629; color: #b6d797; font: 9px var(--mono); }
.copy-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.code-meta { height: 37px; display: flex; align-items: center; justify-content: space-between; padding: 0 23px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #18211b; color: #7e8c82; font: 9px var(--mono); }
.file-pill { display: inline-flex; align-items: center; gap: 7px; color: #c4cec5; }
.file-icon { display: inline-flex; width: 14px; height: 15px; align-items: center; justify-content: center; border-radius: 2px; background: #435a32; color: #d1f3a5; font: 8px var(--mono); }
.code-window { min-height: 150px; flex: 1; display: grid; grid-template-columns: 36px minmax(0, 1fr); overflow: auto; padding: 14px 13px 18px 5px; background: #111813; font: 10px/1.85 var(--mono); tab-size: 2; }
.line-numbers { padding-right: 10px; text-align: right; color: #536158; user-select: none; white-space: pre; }
.code-window pre { min-width: max-content; margin: 0; color: #c4d1c4; white-space: pre; }
.code-window code { font: inherit; }
.token-comment { color: #748277; }
.token-preproc { color: #c4a9e5; }
.token-keyword { color: #86b9eb; }
.token-string { color: #c9d890; }
.token-number { color: #e8b77d; }
.token-type { color: #78c8bd; }
.build-card { flex: 0 0 auto; margin: 13px 16px 0; padding: 13px 12px 11px; border: 1px solid #304034; border-radius: 7px; background: #1a251d; }
.build-card-title { display: flex; align-items: center; gap: 9px; }
.build-icon { width: 25px; height: 25px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #42543d; border-radius: 5px; background: #253420; color: var(--green); font: 13px var(--mono); }
.build-card-title > div { display: flex; flex-direction: column; gap: 2px; }
.build-card-title strong { font-size: 10px; font-weight: 600; }
.build-card-title > div > span { color: #829086; font-size: 9px; }
.terminal-command { display: block; margin: 10px 0 9px; padding: 8px 9px; overflow-x: auto; border: 1px solid #2b382e; border-radius: 4px; background: #121a15; color: #b9e38e; font: 9px var(--mono); white-space: nowrap; }
.build-note { display: flex; gap: 7px; color: #96a398; font-size: 9px; line-height: 1.5; }
.build-note strong { color: #e5c68d; font-weight: 600; }
.build-note code { color: #e5c68d; font: inherit; }
.info-icon { flex: 0 0 13px; width: 13px; height: 13px; display: inline-flex; justify-content: center; align-items: center; border: 1px solid #748271; border-radius: 50%; color: #b8c5b6; font: 9px var(--mono); }
.output-footer { flex: 0 0 37px; display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding: 0 20px; border-top: 1px solid var(--line); color: #728077; font: 8px var(--mono); letter-spacing: .055em; }
.output-footer > span:last-child { display: flex; gap: 7px; align-items: center; letter-spacing: 0; }
.footer-dot { width: 5px; height: 5px; }
.toast { position: fixed; z-index: 100; right: 22px; bottom: 22px; padding: 11px 15px; border: 1px solid #3d5935; border-radius: 6px; background: #1d2c1b; color: #d5efbb; font-size: 12px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: .2s ease; }
.toast.visible { opacity: 1; transform: translateY(0); }

/* Blockly's built-in SVGs are kept in sync with the editor's dark palette. */
.blocklyToolboxDiv { background: #17201a !important; border-right: 1px solid #29362f !important; }
.blocklyTreeLabel { color: #a8b5a9 !important; font: 11px var(--sans) !important; }
.blocklyTreeRow { height: 34px !important; padding: 5px 8px !important; border-radius: 4px !important; }
.blocklyTreeSelected { background: #263529 !important; }
.blocklyFlyoutBackground { fill: #19231c !important; fill-opacity: .98 !important; }
.blocklyMainBackground { stroke: none !important; }
.blocklyScrollbarHandle { fill: #47564a !important; }
.blocklyZoom > image { opacity: .72; }
.blocklyWidgetDiv .blocklyContextMenu,
.blocklyWidgetDiv .blocklyMenu,
.blocklyWidgetDiv .goog-menu {
  border: 1px solid #3a4a3e !important;
  border-radius: 6px !important;
  background: #1b2620 !important;
  box-shadow: 0 10px 28px #0009 !important;
  color: #e9f0e9 !important;
}
.blocklyWidgetDiv .blocklyMenuItem,
.blocklyWidgetDiv .goog-menuitem,
.blocklyWidgetDiv .blocklyMenuItemContent,
.blocklyWidgetDiv .goog-menuitem-content { color: #e2ebe3 !important; }
.blocklyWidgetDiv .blocklyMenuItemHighlight,
.blocklyWidgetDiv .goog-menuitem-highlight { background: #2d3e31 !important; }
.blocklyWidgetDiv .blocklyMenuItemHighlight .blocklyMenuItemContent,
.blocklyWidgetDiv .goog-menuitem-highlight .goog-menuitem-content { color: #d7ffad !important; }
.blocklyWidgetDiv .blocklyMenuItemDisabled,
.blocklyWidgetDiv .goog-menuitem-disabled { color: #748077 !important; }
.blocklyWidgetDiv .blocklyMenuSeparator,
.blocklyWidgetDiv .goog-menuseparator { border-color: #39473d !important; }
.blocklyWidgetDiv .blocklyDropdownMenu { background: #202b23 !important; color: #e9f0e9 !important; }
.blocklyText { font-family: var(--sans) !important; }

@media (max-width: 920px) {
  body { overflow: auto; }
  .app-shell { height: auto; min-height: calc(100% - 64px); grid-template-columns: minmax(0, 1fr); }
  .workspace-panel { height: min(68vh, 650px); min-height: 480px; border-right: 0; border-bottom: 1px solid var(--line); }
  .output-panel { min-height: 650px; }
  .code-window { min-height: 300px; }
}
@media (max-width: 560px) {
  .topbar { height: 58px; padding: 0 14px; }
  .app-shell { min-height: calc(100% - 58px); }
  .brand { gap: 7px; font-size: 15px; }
  .brand-product { font-size: 11px; }
  .topbar-right { gap: 7px; }
  .saved-indicator, .button-quiet { display: none; }
  .button-primary { padding: 0 9px; font-size: 10px; }
  .workspace-heading { height: 106px; padding: 18px 17px; }
  .workspace-tools { padding-top: 20px; }
  .tool-hint { display: none; }
  h1 { font-size: 21px; }
  .workspace-footer { padding: 0 17px; }
  .output-heading { height: 110px; padding: 18px 17px; }
}