.empty-state[hidden] {
  display: none;
}
.control-group[hidden], #controlPageNote[hidden] { display:none; }
.field[hidden], #designRecipeReload[hidden], #designRecipeStatus[hidden] { display:none; }
.source-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
.source-choices button { min-height:44px; padding:8px; text-align:left; font:inherit; font-size:11px; border:1px solid #39424f; border-radius:5px; background:#11161d; color:#e4c07c; cursor:pointer; }
.source-choices button[aria-pressed="true"] { border-color:#d9ad5f; background:#28241c; }
.source-choices button:focus-visible { outline:2px solid #f0c875; outline-offset:2px; }
.control-tabs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; margin-top:12px; }
.control-tabs button { min-height:44px; padding:6px 3px; border:1px solid #39424f; border-radius:5px; background:#11161d; color:#d9ad5f; font-size:10px; font-weight:700; cursor:pointer; }
.control-tabs button[aria-selected="true"] { border-color:#d9ad5f; background:#28241c; box-shadow:inset 0 -2px #d9ad5f; }
.control-tabs button:focus-visible { outline:2px solid #f0c875; outline-offset:2px; }
.controls-form { grid-template-columns:1fr; }
.view-toolbar { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:8px; }
.view-toolbar button { min-height:34px; min-width:34px; padding:6px 10px; border:1px solid #655331; border-radius:5px; background:#10151b; color:#e5c47e; cursor:pointer; font:inherit; font-size:11px; }
.view-toolbar button:focus-visible { outline:2px solid #f0c875; outline-offset:2px; }
.view-toolbar button:disabled { opacity:.45; cursor:default; }
.viewport canvas { touch-action:none; cursor:grab; }
.viewport canvas:active { cursor:grabbing; }
@media(min-width:901px) {
  .workspace { height:calc(100dvh - 72px); min-height:0; }
  .controls-panel { min-height:0; max-height:none; }
  .viewport-panel { min-height:0; overflow:hidden; }
  .viewport { min-height:0; }
}

.header-tools { display:flex; align-items:center; justify-content:flex-end; gap:12px; flex-wrap:wrap; }
.language-switch { display:flex; gap:4px; }
.language-switch button { min-width:40px; min-height:36px; border:1px solid #4f4430; border-radius:5px; background:#10151b; color:#d9b76f; cursor:pointer; }
.language-switch button[aria-pressed="true"] { background:#d4ae61; color:#10151b; }
.language-switch button:focus-visible, .source-slider:focus-visible { outline:2px solid #f0c875; outline-offset:3px; }
.controls-form input.source-slider { display:block; width:100%; min-width:0; height:24px; padding:0; margin:2px 0 4px; accent-color:#c69749; cursor:pointer; }
.controls-form input.source-slider:disabled { opacity:.45; cursor:default; }
@media(max-width:700px) { .topbar { flex-wrap:wrap; gap:8px; } .header-tools { justify-content:flex-start; } }
.image-input-panel { border:1px solid #39434e;border-radius:6px;padding:12px;margin:8px 0; }
.image-input-panel[hidden] { display:none; }
.image-input-panel input { max-width:100%;margin:8px 0; }

/* Progressive enhancement: without the controller, both panels remain usable. */
.workspace-switch, #mobilePreviewButton { display:none; }
@media(max-width:900px) {
  .topbar { height:auto; min-height:72px; flex-wrap:wrap; gap:8px; }
  .header-tools { min-width:0; justify-content:flex-start; }
  .badge { overflow-wrap:anywhere; }
  .workspace-switch:not([hidden]) {
    position:sticky; top:0; z-index:10; display:grid; grid-template-columns:1fr 1fr;
    gap:6px; padding:8px; background:#12161d; border-bottom:1px solid #303743;
  }
  .workspace-switch button {
    min-height:44px; border:1px solid #655331; border-radius:5px;
    background:#10151b; color:#e5c47e; cursor:pointer; font:inherit; font-weight:700;
  }
  .workspace-switch button[aria-pressed="true"] { background:#d4ae61; color:#10151b; }
  .workspace-switch button:focus-visible { outline:2px solid #f0c875; outline-offset:2px; }
  .workspace[data-mobile-ready] { display:block; min-height:0; }
  .workspace[data-mobile-ready][data-mobile-view="controls"] .viewport-panel,
  .workspace[data-mobile-ready][data-mobile-view="preview"] .controls-panel { display:none; }
  .workspace[data-mobile-ready] .viewport-panel { height:calc(100dvh - 61px); min-height:480px; }
  .workspace[data-mobile-ready] .viewport { min-height:200px; }
  .viewport-head { height:auto; min-height:52px; flex-wrap:wrap; gap:8px; padding:8px 12px; overflow-wrap:anywhere; }
  #mobilePreviewButton { display:block; min-height:44px; }
  .viewport-foot .view-toolbar button { min-height:44px; min-width:44px; }
  .controls-panel { min-width:0; padding:12px; }
  .controls-panel .form-actions { bottom:0; }
  .control-group { min-width:0; }
}
.controls-form input[aria-invalid="true"] { outline: 2px solid #e5a74f; outline-offset: 2px; }