/* RoCode Online's approved artwork header, category colors and light workspace.
   Source mapping: docs/rocode-source-audit.md and docs/rocode-icon-audit.md.
   These are editor surfaces only; compiled websites keep the student's design. */
:root {
  --ui-paper:#fff; --ui-desk:#f7fcff; --ui-line:#d2e5ef;
  --ui-ink:#294b61; --ui-muted:#5f7482; --ui-blue:#4f80ff;
  --ui-blue-soft:#eef4ff; --rocode-action:#4f80ff;
  --rocode-focus:#1f4fbf; --rocode-family-header:60px;
  --rocode-art-x:max(240px,calc(50% - 392px));
  --rocode-tool-size:28px; --rocode-tool-height:68px; --rocode-tool-label:14px;
  --rocode-tab-height:48px; --rocode-page-add-size:44px;
  --rocode-glass-fill:rgba(255,255,255,.26); --rocode-glass-border:rgba(255,255,255,.58);
  --rocode-glass-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 3px rgba(22,61,121,.1);
}
html[data-editor-size=compact] {
  --rocode-family-header:52px; --rocode-tool-size:26px;
  --rocode-tool-height:64px; --rocode-tool-label:13px;
  --rocode-tab-height:40px; --rocode-page-add-size:36px;
}
html[data-editor-size=large] {
  --rocode-family-header:68px; --rocode-tool-size:32px;
  --rocode-tool-height:80px; --rocode-tool-label:16px;
  --rocode-tab-height:56px; --rocode-page-add-size:48px;
}

/* The same artwork continues through the project row and page tabs. */
html:root .rocodeHeader {
  border:0; color:#fff; background-color:#4f95ff;
  background-image:url('/assets/brand/header-artwork.png');
  background-repeat:no-repeat; background-size:auto 90px;
  background-position:var(--rocode-art-x) top;
}
html:root .rocodeAppHeader { height:var(--rocode-family-header); gap:8px; padding-inline:16px; }
html:root .rocodeProjectIdentity {
  flex-basis:220px; min-width:112px; height:calc(var(--rocode-family-header) - 8px);
  border:0; margin-left:10px; padding:2px 8px; gap:3px;
}
html:root .rocodeProjectName { color:#fff; font-size:16px; height:26px; font-weight:700; }
html[data-editor-size=compact] .rocodeProjectName { font-size:14px; height:23px; }
html[data-editor-size=large] .rocodeProjectName { font-size:18px; }
html:root .rocodeProjectName:hover { color:#fff; border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.12); }
html:root .rocodeProjectName:focus { color:#173452; background:#f7faff; outline:2px solid #163d79; outline-offset:-2px; }
html:root .rocodeProjectSaveState { font-size:11px; line-height:14px; font-weight:650; color:#fff; }
html:root .save-dot { background:#ffffffa6; box-shadow:0 0 0 1px #ffffffd9; }
html:root .rocodeHeaderButton {
  color:#fff; border:1px solid var(--rocode-glass-border); border-radius:9px;
  background:var(--rocode-glass-fill); -webkit-backdrop-filter:blur(5px) saturate(115%); backdrop-filter:blur(5px) saturate(115%); box-shadow:var(--rocode-glass-shadow);
  font-size:14px; font-weight:600;
}
html[data-editor-size=compact] .rocodeHeaderButton { font-size:13px; }
html[data-editor-size=large] .rocodeHeaderButton { font-size:16px; }
html:root .rocodeHeaderButton:hover,html:root .rocodeHeaderButton[aria-expanded=true] {
  background:rgba(255,255,255,.48); border-color:rgba(255,255,255,.85); color:#fff;
}
html:root .rocodeHeaderButton.publish-button { color:#fff; border-color:var(--rocode-glass-border); background:var(--rocode-glass-fill); }
html:root .rocodeHeaderButton.publish-button:hover { background:rgba(255,255,255,.48); }
html:root .rocodeHeaderButton:focus-visible { outline-color:#fff; outline-offset:3px; }
html:root .rocodeHeaderMenu { background:#fff; color:var(--ui-ink); border-color:#c9dbe8; }
html:root .rocodeHeaderMenu button { font-weight:600; }

html:root :is(.builder-pages,#code-pages) {
  background:#4f95ff url('/assets/brand/header-artwork.png') no-repeat var(--rocode-art-x) calc(-1 * var(--rocode-family-header));
  background-size:auto 90px;
}
html:root :is(.builder-workspace,#code-pages) .site-pages {
  display:flex; flex-wrap:nowrap; align-items:flex-end; gap:12px;
  min-height:calc(var(--rocode-tab-height) + 8px);
  background:transparent; border:0; padding:8px 16px 0;
}
html:root .site-pages .pages-label { display:none; }
html:root :is(.builder-workspace,#code-pages) .site-pages button {
  color:#fff; font-weight:600; border-color:var(--rocode-glass-border); background:var(--rocode-glass-fill);
  border-radius:6px; box-shadow:none;
}
html:root :is(.builder-workspace,#code-pages) .site-pages button:where(:not(.page-tab)):hover { color:#173f68; background:#ffffffe0; border-color:#fff; }
html:root .site-pages .page-chips {
  display:flex; flex:0 1 auto; align-items:flex-end; gap:0; min-width:0;
  padding:0; overflow-x:auto; scrollbar-width:none; scroll-behavior:auto;
}
html:root .site-pages .page-chips::-webkit-scrollbar { display:none; }
html:root .site-pages .page-tabs { display:flex; flex:none; align-items:flex-end; gap:4px; }
html:root :is(.builder-workspace,#code-pages) .site-pages .page-tab {
  position:relative; isolation:isolate; flex:none; min-width:76px;
  height:var(--rocode-tab-height); min-height:var(--rocode-tab-height);
  margin-bottom:0; padding:7px 14px 11px;
  border:1px solid transparent; border-radius:9px 9px 0 0;
  background:transparent; font-size:var(--editor-font,16px); font-weight:700;
  scale:1; transform:none;
}
/* The inactive surface is inset; hit boxes and labels stay still on selection. */
html:root .site-pages .page-tab::before {
  content:''; position:absolute; z-index:-1; inset:1px 0 3px;
  border:1px solid var(--rocode-glass-border); border-radius:8px; background:var(--rocode-glass-fill);
  transition:background-color 150ms ease;
}
html:root .site-pages .page-tab:hover::before { background:rgba(255,255,255,.48); border-color:rgba(255,255,255,.85); }
html:root .site-pages .page-tab[aria-selected=true]::before { display:none; }
html:root .site-pages .page-tab>span { display:block; max-width:180px; overflow:hidden; text-overflow:ellipsis; }
html:root :is(.builder-workspace,#code-pages) .site-pages .page-tab[aria-selected=true] {
  border-color:#d4e3ef; border-bottom-color:#fff;
  border-radius:9px 9px 0 0; color:#245fc7; background:#fff; font-weight:700; box-shadow:none;
}
html:root :is(.builder-workspace,#code-pages) .site-pages .new-page-control {
  position:sticky; right:0; z-index:1; align-self:flex-end; flex:none;
  width:var(--rocode-page-add-size); height:var(--rocode-page-add-size);
  min-width:var(--rocode-page-add-size); min-height:var(--rocode-page-add-size);
  margin:0 2px 4px 6px; padding:0; border:1px solid #f7faff; border-radius:8px;
  color:#3568e6; background:#f7faff; box-shadow:none;
}
html:root .site-pages .new-page-control .ui-icon { width:20px; height:20px; }
html:root :is(.builder-workspace,#code-pages) .site-pages .new-page-control:hover:not(:disabled) { background:#e8f0ff; border-color:#e8f0ff; color:#245fc7; }
html:root :is(.builder-workspace,#code-pages) .site-pages .new-page-control:disabled { background:#dbe7f7; border-color:#dbe7f7; color:#8297b2; opacity:1; }
html:root :is(.builder-workspace,#code-pages) .site-pages .page-settings-control {
  flex:none; margin:0 0 4px auto; min-height:var(--rocode-page-add-size);
  height:var(--rocode-page-add-size); padding:6px 10px; font-size:var(--editor-small,14px);
}
html:root .site-pages button:focus-visible { outline:2px solid #173f9b; outline-offset:-3px; }
@media(max-width:600px) {
  html:root :is(.builder-workspace,#code-pages) .site-pages { gap:8px; padding-inline:12px; }
  html:root .site-pages .page-chips { flex:1; }
  html:root .site-pages .page-tab>span { max-width:130px; }
  html:root .site-pages .page-settings-label { display:none; }
  html:root :is(.builder-workspace,#code-pages) .site-pages .page-settings-control { width:var(--rocode-page-add-size); min-width:var(--rocode-page-add-size); padding:0; }
}
@media(pointer:coarse) {
  html:root[data-editor-size=compact] { --rocode-tab-height:48px; --rocode-page-add-size:44px; }
}
@media(prefers-reduced-motion:reduce) { html:root .site-pages .page-tab::before { transition:none; } }

/* Flat outlined actions and joined blue/white mode controls, like RoCode. */
html:root .builder-workspace .builder-toolbar { background:#fff; background-image:none; border-color:#d2e5ef; }
html:root .builder-workspace .builder-views { background:transparent; border:0; padding:0; gap:0; border-radius:4px; }
html:root .builder-workspace .builder-views button { font-weight:600; border:1px solid #4f80ff; color:#245ac2; background:#fff; border-radius:4px 0 0 4px; }
html:root .builder-workspace .builder-views button+button { border-radius:0 4px 4px 0; border-left:0; }
html:root .builder-workspace .builder-views button[aria-selected=true] { color:#fff; background:#3568e6; border-color:#3568e6; box-shadow:none; }
html:root .builder-workspace .builder-history button { font-weight:600; border:1px solid #4f80ff; border-radius:4px; background:#fff; color:#245ac2; }
html:root .builder-workspace .builder-history button:disabled { color:#8494a6; border-color:#d9e3ec; background:#fff; }
html:root .builder-workspace .builder-preview-action .try-site-button { background:#3568e6; border-color:#3568e6; border-radius:4px; box-shadow:none; }
html:root .builder-workspace .builder-toolbar .try-site-button:hover:not(:disabled):not([aria-selected=true]):not([aria-pressed=true]) { background:#2854c7; border-color:#2854c7; }
html:root .builder-workspace :is(.builder-code-tools,.builder-preview-tools) button,
html:root .builder-workspace .block-inspector :is(.inspector-wide,.inspector-tabs button,.block-move-controls button,.inspector-block-actions button),
html:root .builder-workspace .block-palette :is(.canvas-media-toggle,.my-pictures-button,.add-section) {
  color:#245ac2; background:#fff; border:1px solid #4f80ff; border-radius:4px; box-shadow:none;
}
html:root .builder-workspace :is(.builder-code-tools,.builder-preview-tools) button[aria-pressed=true],
html:root .builder-workspace .inspector-tabs button[aria-selected=true] { color:#fff; background:#3568e6; border-color:#3568e6; }
html:root .builder-workspace .inspector-tabs { background:transparent; border:0; padding:0; gap:0; }
html:root .builder-workspace .block-inspector .inspector-tabs button { border-radius:0; }
html:root .builder-workspace .block-inspector .inspector-tabs button:first-child { border-radius:4px 0 0 4px; }
html:root .builder-workspace .block-inspector .inspector-tabs button:last-child { border-radius:0 4px 4px 0; }
html:root .builder-workspace .block-inspector .inspector-tabs button+button { border-left:0; }
html:root .builder-workspace .block-inspector button:is(.remove-block,.remove-section-button) { color:#a23739; border-color:#db9b9e; background:#fff; }
html:root dialog :is(.dialog-actions,.page-dialog-footer,.upload-actions) button:not(.primary):not([data-remove]) { border:1px solid #4f80ff; color:#245ac2; background:#fff; border-radius:4px; box-shadow:none; }
html:root dialog :is(button.primary,.checkpoint-save button,.checkpoint-restore,.media-use),
html:root .builder-workspace .builder-code>.primary { background:#3568e6; border:1px solid #3568e6; color:#fff; border-radius:4px; box-shadow:none; }
html:root dialog :is(button.primary,.checkpoint-save button,.checkpoint-restore,.media-use):hover:not(:disabled),
html:root .builder-workspace .builder-code>.primary:hover:not(:disabled) { background:#2854c7; border-color:#2854c7; color:#fff; }
html:root dialog :is(button.primary,.checkpoint-save button,.checkpoint-restore,.media-use):disabled { background:#e8eef7; color:#67788e; border-color:#d4deed; opacity:1; box-shadow:none; }

/* Direct building blocks keep their existing tap/drag behavior, with the
   original category rail's small colored symbols and pale blue cells. */
html:root .builder-workspace .block-palette { background:#eaf8ff; border-color:#cce5f3; }
html:root .builder-workspace .block-palette h2 { font-size:17px; letter-spacing:0; font-weight:700; }
html:root .toolbox-heading p { font-size:13px; margin-bottom:12px; }
html:root .builder-workspace .block-palette-items { gap:1px; padding:0; border:1px solid #cfe6f3; background:#cfe6f3; border-radius:5px; overflow:hidden; }
html:root .builder-workspace .palette-block {
  --tool-active-ink:#102030;
  min-height:var(--rocode-tool-height); padding:7px 4px; gap:5px;
  font-size:var(--rocode-tool-label); font-weight:600; color:#525c64;
  background:#ecf8ff; background-image:none;
  border:0; border-radius:0; box-shadow:none;
}
html:root .builder-workspace .toolbox-symbol { width:var(--rocode-tool-size); height:var(--rocode-tool-size); }
html:root .builder-workspace .paper-tool-icon { color:var(--tool-color,#20aaff); width:100%; height:100%; }
html:root .builder-workspace .block-palette .palette-block:hover:not(:disabled):not([aria-selected=true]):not([aria-pressed=true]) {
  background:#ecf8ff;
  border:0;
  box-shadow:none;
}
html:root .builder-workspace .palette-block:focus-visible { outline:2px solid #1f4fbf; outline-offset:-3px; }
html:root .builder-workspace .block-palette .palette-block:not(:disabled):not([aria-selected=true]):not([aria-pressed=true]):is(:active,.is-tool-dragging) {
  background:var(--tool-active-color,var(--tool-color));
  box-shadow:none; color:var(--tool-active-ink);
}
html:root .builder-workspace .block-palette .palette-block:is(:active,.is-tool-dragging) :is(.paper-tool-icon,small) {
  color:var(--tool-active-ink);
}
/* Darker hues use white artwork; lighter hues keep dark labels readable. */
html:root .builder-workspace .palette-block:is(.tool-title,.tool-picture,.tool-compare,.tool-divider,.tool-quiz) {
  --tool-active-ink:#fff;
  --tool-active-color:color-mix(in srgb,var(--tool-color) 92%,black);
}
html:root .builder-workspace .tool-title { --tool-color:#e43500; }
html:root .builder-workspace .tool-text { --tool-color:#17a6d1; }
html:root .builder-workspace .tool-picture { --tool-color:#ad3efb; }
html:root .builder-workspace .tool-sticker { --tool-color:#ff3a61; }
html:root .builder-workspace .tool-sound { --tool-color:#67b100; }
html:root .builder-workspace .tool-button { --tool-color:#ff9b00; }
html:root .builder-workspace .tool-divider { --tool-color:#4562f5; }
html:root .builder-workspace .tool-gallery { --tool-color:#20aaff; }
html:root .builder-workspace .tool-compare { --tool-color:#ad3efb; }
html:root .builder-workspace .tool-card { --tool-color:#fc7e01; }
html:root .builder-workspace .tool-quiz { --tool-color:#4562f5; }
html:root .builder-workspace .tool-timer { --tool-color:#ff3a61; }
html:root .builder-workspace .tool-meter { --tool-color:#00b400; }
html:root .builder-workspace .tool-poster { --tool-color:#dd47d8; }
html:root .builder-workspace .tool-counter { --tool-color:#f4af18; }
html:root .builder-workspace .tool-collection { --tool-color:#00b6b1; }
html:root .builder-workspace .more-blocks { background:#edf9ff; border-color:#c9e2f0; border-radius:5px; }
html:root .builder-workspace .more-blocks .block-palette-items { margin:0 8px 12px; padding:0; gap:1px; grid-auto-rows:1fr; }
html:root .builder-workspace .more-blocks .palette-block { display:grid; grid-template-columns:var(--rocode-tool-size) minmax(0,1fr); align-items:center; width:100%; min-width:0; min-height:calc(var(--rocode-tool-height) + 12px); font-size:var(--rocode-tool-label); padding:12px 10px; gap:10px; text-align:left; }
html:root .builder-workspace .more-blocks .toolbox-symbol { width:var(--rocode-tool-size); height:var(--rocode-tool-size); flex-shrink:0; }
html:root .builder-workspace .canvas-media { border-color:#c9e2f0; }
html:root .builder-workspace .canvas-media .canvas-media-friend,
html:root .builder-workspace .canvas-media .canvas-media-friend:hover:not(:disabled):not([aria-selected=true]):not([aria-pressed=true]),
html:root .builder-workspace .canvas-media .canvas-media-friend:active {
  background:#f6fcff; border-color:#c9e2f0; box-shadow:none;
  transform:none; translate:none; scale:1;
}

/* RoCode's dot-grid is the desk; the student's website remains a white sheet. */
html:root .builder-workspace .builder-stage,
html:root .studio-layout .preview-canvas {
  background-color:#f7fcff;
  background-image:url('/assets/controls/rocode/workspace-grid.svg');
  background-size:48px 48px; box-shadow:none;
}
html:root .builder-workspace .canvas-document {
  outline:1px solid #d1e1eb; border-radius:2px; box-shadow:0 2px 8px #264b6112;
}
html:root .builder-workspace .block-inspector { background:#fff; background-image:none; border-color:#cce0ed; }
html:root .builder-workspace .inspector-context-nav { background:#f3faff; backdrop-filter:none; border-color:#cce0ed; }
html:root .builder-workspace .inspector-context-nav button { border-radius:4px; border-color:#4f80ff; color:#245ac2; background:#fff; }
html:root .builder-workspace .inspector-context-nav button[aria-pressed=true] { color:#fff; background:#3568e6; border-color:#3568e6; }
html:root .builder-workspace .inspector-welcome { background:#f0f9ff; border-color:#d0e8f5; border-radius:6px; }
html:root .builder-workspace .inspector-welcome p { color:#5f7482; }
html:root .builder-workspace :is(.inspector-context-heading h2,.inspector-heading h2) { letter-spacing:0; }
html:root .builder-workspace .choice-tile { border-radius:5px; }
html:root .builder-workspace .choice-tile[aria-pressed=true] { color:#215cbe; background:#eef4ff; border-color:#4f80ff; box-shadow:inset 0 0 0 1px #4f80ff; }
html:root .builder-workspace :is(.inspector-wide,.font-picker,.block-more-options,.column-width-settings,.shared-design,.rich-item) { border-radius:4px; }
html:root .builder-bottom-bar,html:root .studio-status:has(.editor-size-control) { background:#eff8fc; border-color:#d2e5ef; }

@media(min-width:721px) {
  html:root .builder-workspace .palette-block.tool-divider { min-height:var(--editor-control,44px); height:var(--editor-control,44px); }
}
@media(max-width:1000px) and (min-width:721px) {
  html:root .rocodeProjectIdentity { margin-left:0; padding-inline:5px; flex-basis:180px; }
  html:root .builder-workspace .more-blocks .palette-block { align-items:center; text-align:center; }
}
@media(max-width:1100px) and (min-width:721px) {
  html:root .rocodeHeader {
    background-image:linear-gradient(90deg,transparent 42%,#4f95ff 68%),url('/assets/brand/header-artwork.png');
    background-size:100% 100%,auto 90px;
    background-position:0 0,var(--rocode-art-x) 0;
  }
  html:root :is(.builder-pages,#code-pages) {
    background-image:linear-gradient(90deg,transparent 42%,#4f95ff 68%),url('/assets/brand/header-artwork.png');
    background-size:100% 100%,auto 90px;
    background-position:0 0,var(--rocode-art-x) calc(-1 * var(--rocode-family-header));
  }
}
@media(max-width:720px) {
  html:root .rocodeHeader { background-image:none; }
  html:root .rocodeAppHeader { height:auto; padding:8px 12px; }
  html:root .rocodeProjectIdentity { height:44px; margin:0; padding-left:8px; }
  html:root .rocodeHeaderButton { font-size:13px; }
  html:root :is(.builder-pages,#code-pages) { background-image:none; }
  html:root .builder-workspace .more-blocks .palette-block { align-items:center; text-align:center; }
  html:root .builder-workspace .block-palette h2 { font-size:18px; }
}
@media(any-pointer:coarse) {
  html:root .rocodeHeaderButton { min-height:44px; }
}

/* The toolbox has three jobs: individual blocks, artwork, and page structure.
   Keep its category switcher visible while just the chosen collection scrolls. */
html:root .builder-workspace .block-palette {
  display:flex; flex-direction:column; min-height:0; padding:0; overflow:hidden;
}
html:root .builder-workspace:is([data-view=preview],[data-view=code]) .block-palette { display:none; }
html:root .builder-workspace .toolbox-heading { flex:none; padding:8px 12px 0; }
html:root .toolbox-categories { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; border-bottom:1px solid #c9e2f0; }
html:root .builder-workspace .toolbox-categories button {
  min-width:0; min-height:44px; padding:8px 2px; border:0; border-bottom:3px solid transparent;
  border-radius:4px 4px 0 0; background:transparent; color:#496174;
  font-size:var(--editor-small,14px); font-weight:650; line-height:1.3; white-space:nowrap;
  box-shadow:none; scale:1; transform:none;
}
html:root .builder-workspace .toolbox-categories button:hover:not([aria-selected=true]) { background:#ffffff80; color:#245fc7; }
html:root .builder-workspace .toolbox-categories button[aria-selected=true] { background:#fff; color:#245fc7; border-bottom-color:#3568e6; }
html:root .builder-workspace .toolbox-categories button:focus-visible { outline:2px solid #1f4fbf; outline-offset:-3px; }
html:root .toolbox-panel { flex:1; min-height:0; overflow:auto; scrollbar-width:thin; padding:14px 12px 20px; }
html:root .toolbox-panel[hidden] { display:none!important; }
html:root .toolbox-panel-tip { margin:0 0 14px; color:#5f7482; font-size:var(--editor-small,14px); line-height:1.5; }
html:root .toolbox-block-group h3 { margin:14px 10px 8px; font-size:var(--editor-small,14px); line-height:1.4; color:#496174; }
html:root .builder-workspace .toolbox-block-group .palette-block { text-align:left; }
html:root .builder-workspace .tool-rocode { --tool-color:#00a8dc; }
html:root .toolbox-panel .canvas-media { margin:0; padding:0; border:0; }
html:root .toolbox-panel .canvas-media-heading,
html:root .toolbox-own-pictures h3 { font-size:var(--editor-font,16px); line-height:1.35; margin:0 0 5px; color:#294b61; }
html:root .toolbox-panel .canvas-media-tip,
html:root .toolbox-own-pictures p { display:block; font-size:var(--editor-small,14px); line-height:1.5; color:#5f7482; margin:0 0 12px; }
html:root .builder-workspace .toolbox-panel .canvas-media-featured {
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:0; overflow:visible; margin-bottom:12px;
}
html:root .builder-workspace .toolbox-panel .canvas-media-toggle {
  width:100%; max-width:none; display:flex; justify-content:space-between; margin:0; padding:9px 10px;
}
html:root .toolbox-own-pictures { margin-top:20px; padding-top:16px; border-top:1px solid #c9e2f0; }
html:root .builder-workspace .toolbox-panel .toolbox-action {
  display:grid; grid-template-columns:20px minmax(0,1fr) 14px; align-items:center; gap:8px;
  width:100%; min-width:0; min-height:44px; margin:0 0 12px; padding:12px 10px;
  border:1px solid #b9d2eb; border-radius:5px; background:#fff; color:#245ac2;
  font-size:var(--editor-font,16px); line-height:1.35; text-align:left; box-shadow:none;
}
html:root .toolbox-action strong { display:block; font-size:var(--editor-font,16px); font-weight:650; }
html:root .toolbox-action small { display:block; margin-top:5px; font-size:var(--editor-small,14px); line-height:1.4; font-weight:400; color:#5f7482; }
html:root .toolbox-action .ui-icon { width:20px; height:20px; }
html:root .toolbox-action>.ui-icon:last-child { width:14px; height:14px; }
html:root .toolbox-action-icon { align-self:start; padding-top:1px; }
html:root .builder-workspace .toolbox-panel .my-pictures-button { grid-template-columns:minmax(0,1fr) 14px; }
@media(max-width:720px) {
  html:root .builder-workspace .block-palette { overflow:visible; }
  html:root .builder-workspace .toolbox-block-group .palette-block { grid-template-columns:minmax(0,1fr); justify-items:center; text-align:center; padding:12px 8px; gap:6px; }
  html:root .builder-workspace .toolbox-heading { padding:8px 16px 0; }
  html:root .toolbox-panel { flex:none; overflow:visible; padding:14px 16px 20px; }
  html:root .builder-workspace .toolbox-panel .canvas-media-featured { grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* Project actions anchor to the outer edge; page settings belong to the editor. */
html:root { --site-preview-slot:152px; --site-publish-slot:104px; }
html:root[data-editor-size=compact] { --site-preview-slot:140px; --site-publish-slot:96px; }
html:root[data-editor-size=large] { --site-preview-slot:166px; --site-publish-slot:116px; }
html:root .blocks-mode .code-publish { display:none; }
html:root .rocodeAppHeader>.file-control { flex:none; margin:0; }
html:root .file-control>.rocodeHeaderButton { background:var(--rocode-glass-fill); border-color:var(--rocode-glass-border); }
html:root .file-control>.rocodeHeaderButton .ui-icon-chevron-down { display:block; width:12px; height:12px; }
html:root .file-control>.rocodeHeaderButton:hover,
html:root .file-control>.rocodeHeaderButton[aria-expanded=true] { background:rgba(255,255,255,.48); border-color:rgba(255,255,255,.85); }
html:root .rocodeHeaderMenu { left:auto; right:0; width:min(292px,calc(100vw - 24px)); max-height:calc(100dvh - 110px); overflow-y:auto; }
html:root .project-menu-label { margin:8px 12px 4px; color:#62798e; font-size:12px; line-height:1.4; font-weight:600; }
html:root :is(.builder-workspace,#code-pages) .site-pages { gap:8px; }
html:root .site-pages .page-chips { flex:0 1 auto; }
html:root .builder-workspace .inspector-header {
  position:sticky; top:0; z-index:20; margin:0 calc(-1 * var(--editor-side-pad,18px)) var(--editor-section-gap,20px);
  padding:8px; border-bottom:1px solid #cce0ed; background:#f3faff;
}
html:root .builder-workspace .inspector-header .inspector-context-nav {
  position:static; margin:8px 0 0; padding:0; border:0; background:transparent;
}
html:root :is(.inspector-page-settings,.builder-page-tools,.code-page-settings) .page-settings-control {
  display:grid; grid-template-columns:20px minmax(0,1fr) 14px; gap:2px 8px; align-items:center;
  width:100%; min-width:0; min-height:44px; margin:0; padding:6px 8px;
  text-align:left; border:1px solid transparent; border-radius:4px; background:transparent;
  color:#294b61; font-size:var(--editor-small,14px); line-height:1.3; box-shadow:none;
}
html:root :is(.inspector-page-settings,.builder-page-tools,.code-page-settings) .page-settings-control:hover { background:#e7f1fc; border-color:#ccdef0; }
html:root :is(.inspector-page-settings,.builder-page-tools,.code-page-settings) .page-settings-control>.ui-icon { grid-row:1 / 3; width:18px; height:18px; }
html:root :is(.inspector-page-settings,.builder-page-tools,.code-page-settings) .page-settings-control>.ui-icon:first-child { grid-column:1; }
html:root :is(.inspector-page-settings,.builder-page-tools,.code-page-settings) .page-settings-control>.ui-icon:last-child { grid-column:3; width:14px; height:14px; }
html:root .page-settings-control .page-settings-label { grid-column:2; font-weight:650; }
html:root .page-settings-control .page-settings-name { grid-column:2; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:400; color:#5f7482; }
html:root .builder-page-tools { flex:none; display:flex; justify-content:flex-end; margin-bottom:12px; }
html:root .builder-page-tools .page-settings-control { width:220px; max-width:100%; background:#fff; border-color:#d2e5ef; }
/* Code tools share one row; the active page is already identified by its tab. */
html:root .builder-workspace[data-view=code] .builder-code-tools>.builder-page-tools { flex:none; min-width:0; max-width:100%; margin:0; }
html:root .builder-workspace[data-view=code] .builder-page-tools .page-settings-control {
  grid-template-columns:18px minmax(0,1fr) 14px; grid-template-rows:minmax(0,1fr);
  width:auto; min-height:var(--editor-control,44px); height:var(--editor-control,44px);
  padding:var(--editor-pad,10px) 10px; gap:8px; border:1px solid #4f80ff;
  border-radius:4px; background:#fff; color:#245ac2; font-size:var(--editor-font,15px); line-height:1.3;
}
html:root .builder-workspace[data-view=code] .page-settings-control .page-settings-name { display:none; }
html:root .builder-workspace[data-view=code] .page-settings-control .page-settings-label { grid-row:1; white-space:nowrap; }
html:root .builder-workspace[data-view=code] .page-settings-control>.ui-icon { grid-row:1; }
html:root .code-page-settings { min-width:0; flex:1; max-width:240px; }
html:root .code-page-toolbar { height:auto; min-height:56px; flex-wrap:wrap; }
html:root .code-page-toolbar .editor-actions { margin-left:auto; }
html:root .builder-workspace .builder-toolbar {
  grid-template-columns:auto auto minmax(12px,1fr) auto; gap:var(--editor-gap,12px);
}
html:root .builder-workspace .builder-preview-action {
  display:grid; grid-template-columns:var(--site-preview-slot) var(--site-publish-slot); align-items:center;
  grid-column:4; width:auto; gap:8px;
}
html:root .builder-workspace .builder-preview-action button { order:0; width:100%; min-width:0; box-shadow:none; border-radius:4px; }
html:root .builder-workspace .builder-preview-action .publish-site-button {
  color:#245ac2; background:#fff; border:1px solid #4f80ff; font-weight:600;
}
html:root .builder-workspace .builder-preview-action .publish-site-button:hover { color:#245ac2; background:#eef4ff; border-color:#3568e6; }
@media(max-width:800px) {
  html:root .builder-workspace .builder-toolbar { height:auto; min-height:0; grid-template-columns:auto minmax(0,1fr); padding:8px 12px; gap:8px; }
  html:root .builder-workspace .builder-views { grid-column:1; }
  html:root .builder-workspace .builder-history { grid-column:2; justify-self:end; }
  html:root .builder-workspace .builder-preview-action { grid-column:1 / -1; justify-self:end; }
}
@media(max-width:720px) {
  html:root .rocodeAppHeader { grid-template-columns:70px minmax(0,1fr) auto; height:auto; padding:8px 12px; gap:8px; }
  html:root .rocodeProjectIdentity { grid-column:2; width:auto; min-width:0; height:44px; padding-inline:0; }
  html:root .rocodeAppHeader>.file-control { grid-column:3; }
  html:root .file-control>.rocodeHeaderButton { min-height:44px; height:44px; width:auto; padding-inline:9px; }
  html:root .rocodeHeaderMenu { top:50px; left:auto; right:0; }
  html:root .rocodeAppHeader>.code-publish { grid-column:2 / -1; justify-self:end; width:auto; padding-inline:12px; }
}
@media(max-width:600px) {
  html:root .builder-workspace .builder-toolbar { grid-template-columns:minmax(0,1fr); }
  html:root .builder-workspace .builder-views { grid-column:1; }
  html:root .builder-workspace .builder-history { grid-column:1; justify-self:start; }
  html:root .builder-workspace .builder-preview-action { grid-column:1; width:100%; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}

/* Original RoCode history arrows and round controls, grouped on the blue header. */
html:root .header-history-slot { flex:none; display:flex; align-items:center; gap:6px; margin-left:2px; padding-left:11px; border-left:1px solid rgba(255,255,255,.6); }
html:root .block-header-history { display:none; }
html:root .blocks-mode .block-header-history { display:flex; }
html:root .blocks-mode .code-header-history { display:none; }
html:root .builder-history { display:flex; align-items:center; gap:6px; }
html:root .header-history-slot .builder-history { padding:0; border:0; }
html:root :is(.builder-history,.code-header-history) .rocode-history-button {
  display:grid; place-items:center; flex:none; width:var(--editor-control,44px); min-width:var(--editor-control,44px);
  height:var(--editor-control,44px); min-height:var(--editor-control,44px); padding:0; gap:0;
  border:1px solid rgba(167,185,199,.72); border-radius:50%; color:#4f6c7e;
  background:rgba(255,255,255,.72); box-shadow:none;
}
html:root :is(.builder-history,.code-header-history) .rocode-history-button>.ui-icon { width:19px; height:19px; stroke-width:2.15; }
html:root .history-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
html:root .header-history-slot .rocode-history-button {
  color:#fff; border-color:var(--rocode-glass-border); background:var(--rocode-glass-fill);
  -webkit-backdrop-filter:blur(5px) saturate(115%); backdrop-filter:blur(5px) saturate(115%); box-shadow:var(--rocode-glass-shadow);
}
html:root .header-history-slot .rocode-history-button:hover:not(:disabled) {
  color:#fff; border-color:rgba(255,255,255,.85); background:rgba(255,255,255,.48);
}
html:root .header-history-slot .rocode-history-button:disabled {
  color:rgba(255,255,255,.48); border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.14); opacity:1;
}
html:root .header-history-slot .rocode-history-button:focus-visible { outline:2px solid #163d79; outline-offset:2px; }
html:root .builder-workspace[data-header-history=true] .builder-toolbar { grid-template-columns:auto minmax(12px,1fr) auto; }
html:root .builder-workspace[data-header-history=true] .builder-preview-action { grid-column:3; }
@media(max-width:720px) {
  html:root .rocodeAppHeader { grid-template-columns:70px minmax(0,1fr) auto auto; }
  html:root .header-history-slot { grid-column:4; padding-left:8px; margin-left:0; }
  html:root .rocodeAppHeader>.code-publish { grid-column:3; grid-row:2; }
  html:root .code-header-history { grid-row:2; }
}
@media(max-width:460px) {
  html:root .rocodeAppHeader { grid-template-columns:70px minmax(0,1fr) auto; }
  html:root .rocodeAppHeader>.file-control { grid-column:2; grid-row:2; justify-self:end; position:static; }
  html:root .rocodeHeaderMenu { top:calc(100% - 4px); right:12px; }
  html:root .header-history-slot { grid-column:3; grid-row:2; }
  html:root .rocodeProjectIdentity { grid-column:2 / -1; }
  html:root .rocodeAppHeader>.code-publish { grid-column:1; grid-row:2; justify-self:start; padding-inline:8px; }
}
@media(max-width:600px) {
  html:root .builder-workspace[data-header-history=true] .builder-toolbar { grid-template-columns:minmax(0,1fr); }
  html:root .builder-workspace[data-header-history=true] .builder-preview-action { grid-column:1; }
}
@media(any-pointer:coarse) {
  html:root :is(.builder-history,.code-header-history) .rocode-history-button { min-width:44px; min-height:44px; width:max(44px,var(--editor-control,44px)); height:max(44px,var(--editor-control,44px)); }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  html:root :is(.rocodeHeaderButton,.header-history-slot .rocode-history-button) { background:#7db1ff; }
}
@media(prefers-reduced-transparency:reduce) {
  html:root :is(.rocodeHeaderButton,.header-history-slot .rocode-history-button) { background:#7db1ff; -webkit-backdrop-filter:none; backdrop-filter:none; }
}

/* Give the original frosted glass a gentle sheen over the plain blue header. */
html:root .rocodeHeader :is(.rocodeHeaderButton,.rocode-history-button) {
  background-image:linear-gradient(165deg,rgba(255,255,255,.30),rgba(255,255,255,.04) 46%,rgba(255,255,255,0) 64%,rgba(255,255,255,.09));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.58),inset 0 -1px 0 rgba(255,255,255,.12),0 2px 5px rgba(22,61,121,.12);
}
html:root .rocodeHeader :is(.rocodeHeaderButton,.rocode-history-button):is(:hover,[aria-expanded=true]):not(:disabled) {
  background-color:rgba(255,255,255,.38); border-color:rgba(255,255,255,.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82),inset 0 -1px 0 rgba(255,255,255,.20),0 2px 7px rgba(22,61,121,.16);
}
html:root .rocodeHeader :is(.rocodeHeaderButton,.rocode-history-button):active:not(:disabled) {
  box-shadow:inset 0 1px 2px rgba(22,61,121,.12),inset 0 1px 0 rgba(255,255,255,.40);
}
html:root .rocodeHeader .rocode-history-button:disabled {
  background-image:linear-gradient(165deg,rgba(255,255,255,.10),rgba(255,255,255,0) 60%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
@media(prefers-reduced-transparency:reduce) {
  html:root .rocodeHeader :is(.rocodeHeaderButton,.rocode-history-button) { background-image:none; }
}