/* Studio layout authority: Setup and Generate share columns; Preview changes only
   its column definition and visible controls. The canvas determines row depth. */
body #appView #templateStudioDialog { --studio-columns:minmax(180px,200px) minmax(0,800px) minmax(230px,250px); }
body #appView #templateStudioDialog .add-elements-more { border-top:1px solid #244350; padding:10px 0 0; margin:0; }
body #appView #templateStudioDialog .add-elements-more > summary { cursor:pointer; color:#54cfdd; font-size:11px; font-weight:700; line-height:1.4; padding:4px 2px; }
body #appView #templateStudioDialog .add-elements-more > summary:focus-visible { outline:2px solid #00d9ed; outline-offset:2px; border-radius:4px; }
body #appView #templateStudioDialog .add-elements-more > p { margin:4px 2px 0; font-size:11px; line-height:1.45; }
body #appView #templateStudioDialog .add-elements-more > .add-elements-group { border-top:0; padding-top:8px; }
body #appView #templateStudioDialog .studio-next-step { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:0 0 10px; padding:10px; border:1px solid #2f7480; border-radius:6px; background:#0b2d36; font-size:12px; line-height:1.45; }
body #appView #templateStudioDialog .studio-next-step[hidden] { display:none; }
body #appView #templateStudioDialog .studio-next-step span { flex:1 1 160px; min-width:0; }
body #appView #templateStudioDialog .studio-next-step button { margin:0; white-space:normal; }
body #appView #templateStudioDialog .studio-readiness-checklist { margin:0 0 10px; padding:9px; border:1px solid #38606a; border-radius:6px; font-size:11px; background:#0b2732; }
/* One inspector rhythm for Setup and temporary Generate editing. */
body #appView #templateStudioDialog #studioInspectorScroll :is(.inspector-card,.style-control-section) { border-radius:7px; margin:0 0 10px; }
body #appView #templateStudioDialog #studioInspectorScroll .style-control-section > summary { padding:10px; font-size:12px; line-height:1.4; }
body #appView #templateStudioDialog #studioInspectorScroll :is(input,select,button) { box-sizing:border-box; max-width:100%; }
body #appView #templateStudioDialog #componentInspectorTabs { display:grid; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); }
body #appView #templateStudioDialog #studioReadinessItems { display:grid; gap:5px; margin-top:8px; }
body #appView #templateStudioDialog #studioReadinessItems button { white-space:normal; text-align:left; font-size:11px; padding:5px; }
body #appView #templateStudioDialog .studio-draft-recovery { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px; margin:10px 0; border:1px solid #a48543; border-radius:7px; background:#302819; color:#f3dbac; font-size:12px; }
body #appView #templateStudioDialog .studio-draft-recovery span { flex:1 1 300px; }
body #appView #templateStudioDialog :is(.studio-draft-recovery,.studio-readiness-checklist)[hidden] { display:none; }
body #appView #templateStudioDialog:not([data-studio-mode="setup"]) .studio-draft-recovery { display:none; }
body #appView #templateStudioDialog[data-studio-mode="preview"] { --studio-columns:minmax(0,1fr) 250px; }
@media (min-width: 1000px) {
  body #appView #templateStudioDialog #studioDesignerGrid {
    grid-template-columns:var(--studio-columns);
    justify-content:center; align-items:stretch; gap:12px;
    height:auto;
  }
  body #appView #templateStudioDialog #studioDesignerGrid > :is(#studioSetupTools,#propertiesPanel,.canvas-stage) {
    height:auto; min-height:0; max-height:none; margin:0; align-self:stretch; box-sizing:border-box;
  }
  body #appView #templateStudioDialog #studioDesignerGrid > :is(#studioSetupTools,#propertiesPanel) {
    height:auto; min-height:0; contain:size; overflow-y:auto; scrollbar-gutter:stable; padding:12px;
  }
  body #appView #templateStudioDialog #studioDesignerGrid > .canvas-stage { display:flex; flex-direction:column; width:100%; max-width:none; }
  body #appView #templateStudioDialog .canvas-stage > #designCanvas { flex:0 0 auto; min-height:0; max-height:none; overflow:visible; }
  body #appView #templateStudioDialog .canvas-stage > :not(#designCanvas) { flex-shrink:0; }
}
body #appView #templateStudioDialog .canvas-stage .v15-canvas,
body #appView #templateStudioDialog .v15-canvas .canvas-scroller { max-height:none; height:auto; overflow:visible; }
body #appView #templateStudioDialog #designerLayerList { display:grid; gap:3px; }
/* Keep layer selection available while long element settings scroll separately. */
body #appView #templateStudioDialog #studioInspectorScroll { min-width:0; }
@media (min-width:1000px) {
  body #appView #templateStudioDialog #studioDesignerGrid > #propertiesPanel {
    display:flex; flex-direction:column; overflow:hidden;
  }
  body #appView #templateStudioDialog #studioInspectorScroll {
    flex:0 1 auto; max-height:55%; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-gutter:stable; padding-right:3px;
  }
  body #appView #templateStudioDialog #propertiesPanel > .layer-panel {
    flex:1 1 0; max-height:none; min-height:180px; min-width:0;
    display:flex; flex-direction:column; overflow:hidden; margin-top:10px;
  }
  body #appView #templateStudioDialog #designerLayerList {
    flex:1 1 auto; min-height:0; overflow-y:auto; align-content:start; scrollbar-gutter:stable;
  }
  body #appView #templateStudioDialog .layer-panel > :not(#designerLayerList) { flex-shrink:0; }
  body #appView #templateStudioDialog #propertiesPanel.layers-expanded > .layer-panel { flex:1 1 auto; max-height:none; }
  body #appView #templateStudioDialog #propertiesPanel.layers-expanded > #studioInspectorScroll { display:none; }
}
body #appView #templateStudioDialog #studioExpandLayers { padding:3px 7px; min-height:26px; font-size:11px; }
body #appView #templateStudioDialog .inspector-selection-title-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-width:0; }
body #appView #templateStudioDialog .inspector-selection-title-row > div { min-width:0; max-width:100%; }
body #appView #templateStudioDialog #selectedElementName { overflow-wrap:anywhere; }
body #appView #templateStudioDialog #selectedElementType { max-width:100%; white-space:normal; overflow-wrap:anywhere; }
body #appView #templateStudioDialog #selectedElementType[hidden] { display:none; }
body #appView #templateStudioDialog .studio-failure-action { padding:10px; margin:0 0 10px; border:1px solid #987b41; border-radius:7px; background:#252619; }
body #appView #templateStudioDialog .studio-failure-action[hidden] { display:none; }
body #appView #templateStudioDialog .studio-failure-action label { display:block; font-size:11px; font-weight:600; margin-bottom:6px; }
body #appView #templateStudioDialog .studio-failure-action label[hidden] { display:none; }
body #appView #templateStudioDialog .studio-failure-action :is(select,input) { width:100%; min-width:0; box-sizing:border-box; margin-top:5px; }
body #appView #templateStudioDialog .studio-failure-action small { display:block; font-size:10px; line-height:1.4; color:#d4c49c; }
/* Preview has two columns; editor-only panels must not occupy its grid. */
body #appView #templateStudioDialog[data-studio-mode="preview"] #studioDesignerGrid {
  grid-template-columns:var(--studio-columns); align-items:stretch; min-height:0; gap:12px;
}
body #appView #templateStudioDialog[data-studio-mode="preview"] :is(#studioSetupTools,.studio-preview-guidance,#studioAlignmentBar,#clearCanvasSelectionBtn,#studioCanvasSize,#studioInspectorScroll > h3,#studioPreviewRowStatus) { display:none !important; }
body #appView #templateStudioDialog[data-studio-mode="preview"] :is(.studio-commandbar,#restorePreviousDesignBtn) { display:none !important; }
body #appView #templateStudioDialog[data-studio-mode="preview"] #studioDesignerGrid > .canvas-stage {
  grid-column:1; min-height:0; padding:10px; align-self:stretch;
}
body #appView #templateStudioDialog[data-studio-mode="preview"] #studioDesignerGrid > #propertiesPanel {
  grid-column:2; min-height:0; height:auto; max-height:none; contain:size; overflow:hidden;
}

body #appView #templateStudioDialog[data-studio-mode="preview"] #studioPreviewInspector :is(strong,span) { display:block; }
body #appView #templateStudioDialog[data-studio-mode="preview"] #studioPreviewInspector .tiny { display:block; font-size:11px; line-height:1.5; margin:8px 0 12px; }
body #appView #templateStudioDialog[data-studio-mode="preview"] #studioPreviewInspector .setup-status-card { padding:10px; margin:10px 0; }
body #appView #templateStudioDialog[data-studio-mode="preview"] #studioPreviewInspector .setup-status-card strong { font-size:12px; margin-bottom:6px; }
body #appView #templateStudioDialog[data-studio-mode="preview"] #studioPreviewInspector .setup-status-card span { font-size:11px; line-height:1.5; }
body #appView #templateStudioDialog[data-studio-mode="preview"] .preview-action-row { display:grid; gap:8px; margin-top:12px; }
@media(max-width:999px) {
  body #appView #templateStudioDialog[data-studio-mode="preview"] #studioDesignerGrid { grid-template-columns:minmax(0,1fr); }
  body #appView #templateStudioDialog[data-studio-mode="preview"] #studioDesignerGrid > #propertiesPanel { grid-column:1; contain:none; }
}
body #appView #templateStudioDialog #studioCanvas { flex:none; max-height:none; max-width:none; object-fit:contain; }
@media(max-width:999px) { body #appView #templateStudioDialog #studioExpandLayers { display:none; } }
body #appView #templateStudioDialog .layer-panel > .card-head { display:flex; justify-content:space-between; align-items:center; gap:6px; margin-bottom:8px; }
body #appView #templateStudioDialog #designerLayerList [data-layer-select] { display:flex; align-items:center; gap:5px; }
body #appView #templateStudioDialog #designerLayerList .layer-label { min-width:0; overflow:hidden; text-overflow:ellipsis; }
body #appView #templateStudioDialog #designerLayerList .layer-role { display:block; font-size:9px; line-height:12px; color:#83c7d3; font-weight:400; }
body #appView #templateStudioDialog #designerLayerList [data-layer-select]:has(.layer-role) { height:34px !important; min-height:34px !important; }
body #appView #templateStudioDialog #designerLayerList .layer-thumbnail { flex:0 0 28px; width:28px; height:22px; object-fit:contain; border-radius:3px; background:#071018; }
body #appView #templateStudioDialog #designerLayerList .layer-row {
  display:grid; grid-template-columns:18px minmax(0,1fr) 24px; gap:5px; align-items:center;
  min-height:30px; padding:2px 6px; margin:0; border-radius:5px;
}
body #appView #templateStudioDialog #designerLayerList .layer-row button {
  min-height:24px !important; height:24px !important; min-width:0; padding:2px 3px; margin:0;
  font-size:11px; font-weight:500; line-height:1.25;
}
body #appView #templateStudioDialog #designerLayerList [data-layer-select] { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }
body #appView #templateStudioDialog #designerLayerList .layer-row > span { font-size:9px; font-weight:400; color:#8ba7b5; }
body #appView #templateStudioDialog #designerLayerList .layer-kind { display:none; }
body #appView #templateStudioDialog #designerLayerList .layer-row { min-height:38px; box-sizing:border-box; }
/* Compact, on-demand record proofs; each opens in the full preview canvas. */
body #appView #templateStudioDialog .studio-record-review { border-top:1px solid #284756; margin-top:10px; padding-top:10px; min-width:0; }
body #appView #templateStudioDialog .studio-record-review-strip { display:flex; gap:8px; overflow-x:auto; padding:3px 0 8px; min-width:0; }
body #appView #templateStudioDialog .studio-record-review-card { flex:0 0 98px; width:98px; padding:6px; white-space:normal; font-size:10px; line-height:1.4; display:flex; flex-direction:column; gap:5px; text-align:left; }
body #appView #templateStudioDialog .studio-record-review-card img { width:84px; height:112px; object-fit:contain; background:#071018; border-radius:3px; }
body #appView #templateStudioDialog #studioInspectorScroll .compact-field { min-width:0; align-content:start; }
body #appView #templateStudioDialog #studioInspectorScroll .compact-control-grid.two-column > label.compact-field { grid-template-rows:minmax(36px,auto) auto; }
body #appView #templateStudioDialog .studio-fitting-fields { align-items:start; }
body #appView #templateStudioDialog .studio-fitting-fields .compact-field > span { min-height:36px; display:flex; align-items:flex-end; }
body #appView #templateStudioDialog .studio-fitting-fields input { width:100%; height:34px; min-height:34px; margin:0; }
body #appView #templateStudioDialog .studio-fitting-options .style-section-body { padding:0; gap:10px; }
body #appView #templateStudioDialog .studio-fitting-help { margin:0; font-size:11px; line-height:1.4; }
body #appView #templateStudioDialog .studio-choice-settings-access { margin-bottom:12px; padding:10px; border:1px solid #326273; border-radius:6px; }
body #appView #templateStudioDialog .studio-choice-settings-access button { width:100%; white-space:normal; }
body #appView #templateStudioDialog .studio-choice-settings-access p { margin:7px 0 0; }
body #appView #templateStudioDialog .element-config-simplified .studio-choice-settings-access { display:none; }
body #appView #templateStudioDialog .element-config-dialog #componentInspectorTabs { display:none; }
body #appView #templateStudioDialog #studioFailureElement { display:block; margin-bottom:8px; font-size:13px; overflow-wrap:anywhere; }
body #appView #templateStudioDialog #studioFailureElement[hidden] { display:none; }
/* Configuration uses aligned fields and compact actions instead of stacked full-width buttons. */
body #appView #templateStudioDialog .element-config-dialog .element-config-columns { align-items:start; }
body #appView #templateStudioDialog .element-config-dialog .element-config-columns > label { align-content:start; }
body #appView #templateStudioDialog .element-config-dialog .element-config-columns :is(select,input) { height:38px; margin:0; }
body #appView #templateStudioDialog .element-config-dialog .studio-failure-action { margin:0; padding:0; border:0; background:transparent; }
body #appView #templateStudioDialog .element-config-dialog .studio-failure-action label { display:grid; gap:6px; margin:0 0 6px; font-size:12px; }
body #appView #templateStudioDialog .element-config-dialog .element-config-options-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
body #appView #templateStudioDialog .element-config-dialog .element-config-options-header button { width:auto; margin:0; min-height:32px; }
body #appView #templateStudioDialog .element-config-dialog #textChoiceOptionList:empty { display:none; }
body #appView #templateStudioDialog .element-config-dialog #textChoiceRuleList { display:grid; gap:8px; min-width:0; }
body #appView #templateStudioDialog .element-config-dialog #textChoiceRuleList .text-choice-rule-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px 12px; }
body #appView #templateStudioDialog .element-config-dialog #textChoiceRuleList .text-choice-rule-value { grid-column:1; grid-row:1; }
body #appView #templateStudioDialog .element-config-dialog #textChoiceRuleList .text-choice-rule-row > button { grid-column:2; grid-row:1; width:auto; min-height:28px; padding:4px 8px; margin:0; font-size:11px; }
body #appView #templateStudioDialog .element-config-dialog #textChoiceRuleList .text-choice-rule-row > select { grid-column:1 / -1; height:36px; font-size:12px; }
body #appView #templateStudioDialog .element-config-dialog #textChoiceRuleList .text-choice-manual-label { grid-column:1 / -1; }
/* Dialog rules have their own geometry; sidebar grid placements must not leak in. */
body #appView #templateStudioDialog .element-config-dialog .element-config-simple .value-asset-option {
  display:grid; grid-template-columns:64px minmax(0,1fr) 32px; gap:10px 12px;
  align-items:start; padding:12px; margin:0 0 10px; border:1px solid #294552;
  border-radius:8px; background:#091c27;
}
body #appView #templateStudioDialog .element-config-dialog .value-asset-option > :is(img,.option-image-empty) {
  grid-column:1; grid-row:1 / 3; align-self:center; width:64px; height:80px; object-fit:contain; border-radius:5px; background:#06141d;
}
body #appView #templateStudioDialog .element-config-dialog .value-asset-option > label:first-of-type { grid-column:2; grid-row:1; }
body #appView #templateStudioDialog .element-config-dialog .value-asset-option > label:nth-of-type(2) { grid-column:2; grid-row:2; }
body #appView #templateStudioDialog .element-config-dialog .value-asset-option > label { width:100%; min-width:0; margin:0; }
body #appView #templateStudioDialog .element-config-dialog .value-asset-option :is(input,select) { width:100%; min-width:0; max-width:100%; height:36px; box-sizing:border-box; }
body #appView #templateStudioDialog .element-config-dialog .value-asset-option > button {
  grid-column:3; grid-row:1; justify-self:end; align-self:end; width:32px; min-width:32px; max-width:32px;
  height:32px; min-height:32px; margin:0; padding:0; flex:none;
}
@media (max-width:480px) {
  body #appView #templateStudioDialog .element-config-dialog .element-config-columns { grid-template-columns:minmax(0,1fr); }
  body #appView #templateStudioDialog .element-config-dialog .element-config-simple .value-asset-option { grid-template-columns:40px minmax(0,1fr) 32px; gap:8px; padding:8px; }
  body #appView #templateStudioDialog .element-config-dialog .value-asset-option > :is(img,.option-image-empty) { width:40px; height:56px; }
}
/* Exact-fit updates must not move typography controls during a drag. */
body #appView #templateStudioDialog .studio-font-fit-numbers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
body #appView #templateStudioDialog .studio-font-fit-numbers > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
body #appView #templateStudioDialog .studio-font-fit-summary #studioTextFitStatus {
  height: 5.6em;
  min-height: 5.6em;
  max-height: 5.6em;
  overflow-y: auto;
  overflow-wrap: anywhere;
}

/* Phone editing: canvas first, then compact tools and full-width settings. */
@media (max-width:999px) {
 body #appView #templateStudioDialog #studioDesignerGrid { display:flex; flex-direction:column; gap:12px; }
 body #appView #templateStudioDialog #studioDesignerGrid > .canvas-stage { order:0; min-width:0; width:100%; box-sizing:border-box; }
 body #appView #templateStudioDialog #studioSetupTools { order:1; }
 body #appView #templateStudioDialog #propertiesPanel { order:2; }
 body #appView #templateStudioDialog .canvas-stage { display:flex; flex-direction:column; }
 body #appView #templateStudioDialog .canvas-toolbar { order:0; }
 body #appView #templateStudioDialog #designCanvas { order:1; }
 body #appView #templateStudioDialog .studio-preview-guidance { order:2; }
 body #appView #templateStudioDialog #studioAlignmentBar { order:3; }
 body #appView #templateStudioDialog :is(#studioGeneratePanel,#generatePrivateFileBtn,.studio-record-review) { order:4; }
 body #appView #templateStudioDialog #studioSetupTools .add-elements-group { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-bottom:10px; }
 body #appView #templateStudioDialog .add-elements-group-label { grid-column:1 / -1; margin:4px 0; }
 body #appView #templateStudioDialog #studioSetupTools .tool-btn { margin:0; min-height:44px; font-size:12px; padding:8px; }
 body #appView #templateStudioDialog :is(button,select,input:not([type=checkbox]):not([type=range])) { min-height:44px; }
 body #appView #templateStudioDialog :is(.studio-preview-guidance,#studioAlignmentBar) { margin-top:10px; }
 body #appView #templateStudioDialog #designerLayerList .layer-row { min-height:44px; }
 body #appView #templateStudioDialog #studioInspectorScroll { max-height:none; overflow:visible; }
}

/* View options retain square controls while their labels provide a touch target. */
body #appView #templateStudioDialog .studio-menu-panel label { display:flex; align-items:center; gap:10px; min-height:36px; }
body #appView #templateStudioDialog .studio-menu-panel input[type="checkbox"] { width:20px; min-width:20px; max-width:20px; height:20px; min-height:20px; max-height:20px; flex:0 0 20px; padding:0; margin:0; }
@media (max-width:999px) { body #appView #templateStudioDialog .studio-menu-panel label { min-height:44px; } }

/* Desktop editing layout follows the space Studio actually has, not the viewport: beside the
   sidebar a 1024-1280px window leaves Studio too narrow for three columns. Below 980px of Studio
   width: tools + canvas, with element settings full width underneath at their natural height.
   From 980px: tools, canvas and settings side by side. Preview mode and phones keep their rules. */
body #appView #templateStudioDialog { container:studio / inline-size; }
@media (min-width:1000px) {
  body #appView #templateStudioDialog:not([data-studio-mode="preview"]) #studioDesignerGrid {
    grid-template-columns:minmax(180px,210px) minmax(0,1fr);
  }
  body #appView #templateStudioDialog:not([data-studio-mode="preview"]) #studioDesignerGrid > #studioSetupTools { grid-column:1; grid-row:1; }
  body #appView #templateStudioDialog:not([data-studio-mode="preview"]) #studioDesignerGrid > .canvas-stage { grid-column:2; grid-row:1; min-width:0; }
  body #appView #templateStudioDialog:not([data-studio-mode="preview"]) #studioDesignerGrid > #propertiesPanel {
    grid-column:1 / -1; grid-row:2; contain:none; height:auto; max-height:none; overflow:visible;
  }
  body #appView #templateStudioDialog:not([data-studio-mode="preview"]) #studioDesignerGrid > #propertiesPanel #studioInspectorScroll { max-height:none; overflow:visible; }
  body #appView #templateStudioDialog .canvas-stage > * { min-width:0; max-width:100%; }
  /* Keep the canvas (and its generate action) directly under the toolbar, so it starts in view;
     canvas-text options and alignment tools follow it. */
  body #appView #templateStudioDialog:not([data-studio-mode="preview"]) .canvas-stage > .canvas-toolbar { order:0; }
  body #appView #templateStudioDialog:not([data-studio-mode="preview"]) .canvas-stage > #designCanvas { order:1; }
  body #appView #templateStudioDialog:not([data-studio-mode="preview"]) .canvas-stage > :is(#studioGeneratePanel,#generatePrivateFileBtn) { order:2; margin-top:10px; }
  body #appView #templateStudioDialog:not([data-studio-mode="preview"]) .canvas-stage > .studio-preview-guidance { order:3; margin-top:10px; }
  body #appView #templateStudioDialog:not([data-studio-mode="preview"]) .canvas-stage > #studioAlignmentBar { order:4; margin-top:10px; }
  body #appView #templateStudioDialog:not([data-studio-mode="preview"]) .canvas-stage > .studio-record-review { order:5; }
  @container studio (min-width:980px) {
    body #appView #templateStudioDialog:not([data-studio-mode="preview"]) #studioDesignerGrid { grid-template-columns:var(--studio-columns); }
    body #appView #templateStudioDialog:not([data-studio-mode="preview"]) #studioDesignerGrid > #propertiesPanel {
      grid-column:3; grid-row:1; contain:size; overflow:hidden;
    }
    body #appView #templateStudioDialog:not([data-studio-mode="preview"]) #studioDesignerGrid > #propertiesPanel #studioInspectorScroll { max-height:55%; overflow-y:auto; }
  }
}
/* Phones and tablets: the stacked tools and element settings use the full width, not their content width. */
@media (max-width:999px) {
  body #appView #templateStudioDialog .add-elements-more > summary { min-height:44px; padding:12px 2px; box-sizing:border-box; }
  body #appView #templateStudioDialog #propertiesPanel :is(#componentProperties > .component-action-row > button, #configureStudioElement, #studioEditScopeToggle) { min-height:44px; }
  /* Stage F: every Studio control is at least 44 px tall on phones (checkbox rows and range sliders included),
     and the layer show/lock icons are 44 px squares. */
  html body #appView #templateStudioDialog :is(button, select, summary, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"])) { min-height:44px; box-sizing:border-box; }
  html body #appView #templateStudioDialog #propertiesPanel :is(button, select, summary, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"])) { min-height:44px; box-sizing:border-box; }
  html body #appView #templateStudioDialog label:has(> input[type="checkbox"]), html body #appView #templateStudioDialog #propertiesPanel label:has(> input[type="checkbox"]) { min-height:44px; display:flex; align-items:center; gap:8px; }
  html body #appView #templateStudioDialog #propertiesPanel input[type="range"] { min-height:44px; }
  html body #appView #templateStudioDialog #designerLayerList .layer-row :is([data-layer-visible], [data-layer-lock]) { min-width:44px !important; min-height:44px !important; height:44px !important; }
  html body #appView #templateStudioDialog #designerLayerList .layer-row [data-layer-select] { min-height:44px !important; height:44px !important; }
  html body #appView #templateStudioDialog #studioTemplateSwitcher { min-height:44px; }
  body #appView #templateStudioDialog #studioDesignerGrid > :is(#studioSetupTools,#propertiesPanel,.canvas-stage) { align-self:stretch; width:auto; max-width:none; box-sizing:border-box; }
}

/* Stage D: the settings panel says what is selected, keeps Duplicate/Delete above the tabs and
   explains Configure element. */
body #appView #templateStudioDialog #propertiesPanel .studio-settings-purpose { margin:-4px 0 10px; line-height:1.4; }
body #appView #templateStudioDialog #propertiesPanel .studio-configure-help { display:block; margin-top:4px; color:#a6bdcc; }
body #appView #templateStudioDialog #componentProperties > .component-action-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 10px; }
/* Stage E: one line under the step bar saying what the current mode does and keeps. */
body #appView #templateStudioDialog .studio-stepbar > .studio-mode-guide { grid-column:1 / -1; margin:0; padding:8px 12px; border-top:1px solid #294554; font-size:13px; line-height:1.4; color:#c5d6e2; }
body #appView #templateStudioDialog .studio-stepbar > .studio-mode-guide[hidden] { display:none; }

/* Stage F: the canvas can be reached with Tab; show where keyboard focus is. */
body #appView #templateStudioDialog #studioCanvas:focus-visible { outline:3px solid #46d4ff; outline-offset:3px; }
/* G-2: why a locked element's position fields can't be edited. */
body #appView #templateStudioDialog #componentLayoutPanel .studio-locked-note { margin:0 0 8px; padding:8px 10px; border:1px solid #6b5a1f; border-radius:8px; background:#2a2410; color:#f3dd8a; font-size:13px; line-height:1.4; }
body #appView #templateStudioDialog #componentLayoutPanel .studio-locked-note[hidden] { display:none; }