/* HK-PC-WORKBENCH-RATIO-V1: desktop only; H5 keeps its existing layout. */
.workbench-assist-toggle, .workbench-assist-close { display: none; }
@media (min-width: 851px) {
  body.h5-workspace { overflow: auto; }
  body.h5-workspace .app-shell,
  body.h5-workspace .app-shell.ai-theme-panel-expanded {
    display: grid;
    grid-template-columns: minmax(0, 63fr) minmax(0, 16fr) minmax(0, 21fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 14px 16px;
    height: 100dvh;
    min-height: 540px;
    padding: 14px 20px 30px;
    overflow: visible;
    transition: none;
  }
  body.h5-workspace .workspace,
  body.h5-workspace .preview-band { display: contents; }
  body.h5-workspace .topbar {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 64px;
    margin: 0;
    padding: 0 0 8px;
    gap: 16px;
    flex-wrap: wrap;
  }
  body.h5-workspace .topbar .brand-lockup { min-width: 0; flex: 1 1 360px; }
  body.h5-workspace .topbar .brand-copy { min-width: 0; }
  body.h5-workspace .topbar .brand-copy h1 { white-space: normal; }
  body.h5-workspace .topbar .status-strip { min-width: 0; flex-wrap: wrap; gap: 8px; }
  body.h5-workspace .topbar .brand-entity-summary { display: none; }
  body.h5-workspace .product-preview {
    grid-column: 1; grid-row: 2;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-width: 0; min-height: 0 !important;
    width: 100%; height: 100%;
    padding: 12px 16px;
    gap: 8px;
    overflow: visible;
    box-sizing: border-box;
  }
  body.h5-workspace .product-preview .preview-controls {
    position: relative; inset: auto;
    grid-row: 1;
    justify-self: center;
    max-width: 100%;
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 6px; padding: 5px;
    transform: none;
  }
  body.h5-workspace .product-preview .preview-controls .icon-button { min-width: 0; padding-inline: 12px; }
  body.h5-workspace #frameStage {
    grid-row: 2;
    width: 100%; height: 100%;
    min-width: 0; min-height: 0 !important;
    margin: 0;
  }
  body.h5-workspace .product-preview .preview-caption {
    position: relative; inset: auto;
    grid-row: 3; width: auto;
    margin: 0; padding: 0;
    text-align: center;
    transform: none;
  }
  body.h5-workspace .output-panel.professional-settings,
  body.h5-workspace .editor,
  body.h5-workspace .editor.ai-fun-expanded {
    position: relative; inset: auto;
    grid-row: 2;
    width: 100%; max-width: none;
    height: 100%; max-height: none;
    min-width: 0; min-height: 0;
    box-sizing: border-box;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding: 10px;
    animation: none; transform: none;
  }
  body.h5-workspace .output-panel.professional-settings { grid-column: 2; }
  body.h5-workspace .editor,
  body.h5-workspace .editor.ai-fun-expanded { grid-column: 3; box-shadow: none; z-index: auto; container-type: inline-size; container-name: workbench-editor; }
  /* Match the middle .professional-settings shell; keep its existing scroll owner. */
  body.h5-workspace .editor {
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 24px;
  }
  body.h5-workspace .editor > *,
  body.h5-workspace .output-panel > * { min-width: 0; max-width: 100%; flex-shrink: 0; }
  body.h5-workspace :is(.editor, .output-panel) :is(div, section, label, button, input, select, textarea, h2, h3, p, strong, span) { min-width: 0; overflow-wrap: anywhere; }
  body.h5-workspace :is(.editor, .output-panel) :is(input, select, textarea, img, canvas) { max-width: 100%; box-sizing: border-box; }
  body.h5-workspace .output-panel :is(.workbench-banner, .user-showcase, .ai-work-edit-card, .new-user-benefit-card) { padding: 10px; }
  body.h5-workspace .output-panel :is(.workbench-banner, .user-showcase-header, .user-showcase-profile, .ai-work-edit-secondary) { flex-wrap: wrap; }
  body.h5-workspace .output-panel .workbench-banner { display: flex; }
  body.h5-workspace .output-panel .workbench-banner-copy { flex: 1 1 100px; }
  body.h5-workspace .output-panel .workbench-banner button { white-space: normal; }
  body.h5-workspace .output-panel .user-showcase-profile > div { flex: 1 1 75px; }
  body.h5-workspace .output-panel .user-showcase-rating { margin-left: 0; }
  body.h5-workspace .output-panel .ai-work-primary-actions { grid-template-columns: minmax(0, 1fr); }
  body.h5-workspace .output-panel .ai-work-edit-secondary button { flex: 1 1 60px; }
  body.h5-workspace .editor .panel { padding: 12px; }
  body.h5-workspace .editor :is(.ai-tool-grid, .ai-fun-theme-grid, .ai-fun-theme-grid.is-list-view) {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }
  body.h5-workspace .editor :is(.ai-creation-heading, .ai-group-heading, .ai-fun-creation-heading, .ai-fun-theme-filter-row) { flex-wrap: wrap; gap: 8px; }
  body.h5-workspace .editor .ai-creation-heading > div { flex: 1 1 140px; }
  body.h5-workspace .editor .ai-fun-theme-toggle { min-width: 0; max-width: 100%; }
  body.h5-workspace .editor .ai-creation-copy small { white-space: normal; }
  body.h5-workspace .editor .ai-fun-filter-controls { flex-wrap: wrap; }
  body.h5-workspace .editor .ai-fun-creation-block.is-expanded :is(.ai-fun-theme-category-row, .ai-fun-theme-filter-row) { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  body.h5-workspace .editor .ai-fun-creation-block.is-expanded .ai-fun-theme-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  body.h5-workspace .editor .ai-fun-filter-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.h5-workspace .editor .ai-fun-theme-sorts { display: flex; flex-wrap: wrap; width: 100%; gap: 8px; }
  body.h5-workspace .editor .ai-fun-creation-block.is-expanded .ai-fun-theme-sorts button { white-space: normal; min-height: 36px; padding: 4px 0; gap: 4px; }
  body.h5-workspace .editor .ai-fun-theme-categories { flex-wrap: wrap; }
  body.h5-workspace .editor .ai-fun-theme-categories button { white-space: normal; }
  body.h5-workspace .editor.ai-fun-expanded #aiImageCreationPanel {
    position: relative; inset: auto;
    width: 100%; height: auto; min-height: 0;
    padding: 0; box-shadow: none;
  }
  body.h5-workspace .editor .ai-fun-creation-block.is-expanded { height: auto; min-height: 0; padding: 8px; }
  body.h5-workspace .editor .ai-fun-creation-block.is-expanded :is(.ai-fun-theme-viewport, .ai-fun-theme-grid) { height: auto; max-height: none; }
  body.h5-workspace .app-shell.ai-theme-panel-expanded .ai-theme-panel-backdrop { display: none; }
  body.h5-workspace .creation-toolbar {
    position: relative; inset: auto;
    grid-column: 1; grid-row: 3;
    justify-self: center;
    width: max-content; max-width: 100%;
    min-width: 0; margin: 0;
    box-sizing: border-box;
    overflow-x: auto;
    transform: none;
    z-index: 20;
  }
  body.h5-workspace .creation-toolbar button { flex-shrink: 0; }
  body.h5-workspace .editor .address-region-fields { grid-template-columns: minmax(0, 1fr); }
  @container workbench-editor (min-width: 450px) {
    body.h5-workspace .editor :is(.ai-tool-grid, .ai-fun-theme-grid:not(.is-list-view)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.h5-workspace .editor .address-region-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
}
@media (min-width: 851px) and (max-width: 1199px) {
  body.h5-workspace .app-shell,
  body.h5-workspace .app-shell.ai-theme-panel-expanded { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); padding-inline: 14px; gap: 12px; }
  body.h5-workspace .editor,
  body.h5-workspace .editor.ai-fun-expanded { grid-column: 2; }
  body.h5-workspace .topbar .brand-copy .eyebrow { display: none; }
  body.h5-workspace .topbar .brand-lockup { flex-basis: 300px; }
  body.h5-workspace .topbar .cloud-mobile-entry small { display: none; }
  body.h5-workspace .output-panel.professional-settings { display: none; }
  body.h5-workspace .workbench-assist-toggle,
  body.h5-workspace .workbench-assist-close { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 6px 12px; border: 1px solid #d4c5b6; border-radius: 12px; background: #fffaf3; color: #513e2e; cursor: pointer; }
  body.h5-workspace .workbench-assist-toggle:focus-visible,
  body.h5-workspace .workbench-assist-close:focus-visible { outline: 2px solid #396d9b; outline-offset: 3px; }
  body.h5-workspace .output-panel.professional-settings.is-assist-open {
    display: block; position: fixed; z-index: 500;
    inset: 100px auto 92px 14px;
    width: min(340px, calc(100vw - 28px)); height: auto;
    background: #fffaf5; box-shadow: 0 16px 60px #33271d40;
  }
  body.h5-workspace .workbench-assist-close { margin-bottom: 10px; }
}

/* HK-PC-TOOLBAR-V1: bottom belongs to the preview; column tracks stay unchanged. */
.workbench-product-summary { display: none; }
@media (min-width: 851px) {
  body.h5-workspace .app-shell,
  body.h5-workspace .app-shell.ai-theme-panel-expanded {
    grid-template-rows: auto minmax(0, 1fr);
    padding-bottom: 36px;
  }
  body.h5-workspace .workbench-preview-bottom {
    grid-row: 3; display: flex; flex-direction: column; align-items: center;
    gap: 5px; min-width: 0; width: 100%;
  }
  body.h5-workspace .workbench-preview-bottom .preview-caption {
    padding: 0; border: 0; background: none; box-shadow: none; backdrop-filter: none;
    font-size: 12px; line-height: 18px;
  }
  body.h5-workspace .workbench-preview-bottom .preview-caption > :not(.workbench-product-summary) { display: none; }
  body.h5-workspace .workbench-product-summary { display: inline; color: #806248; font-size: 12px; line-height: 18px; }
  body.h5-workspace .product-preview .creation-toolbar {
    position: relative; inset: auto; grid-column: auto; grid-row: auto;
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    width: max-content; max-width: 100%; min-height: 56px; padding: 6px;
    gap: 4px; margin: 0; overflow: visible; transform: none;
    border: 1px solid #e5dcd1; border-radius: 13px; background: #fffaf3;
    box-shadow: 0 3px 10px #604b3410; backdrop-filter: none; z-index: auto;
  }
  body.h5-workspace .product-preview .creation-toolbar button {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 0; height: 42px; min-height: 42px; padding: 0 12px;
    gap: 6px; border: 1px solid transparent; border-radius: 8px;
    background: transparent; color: #4e3a2b; font-size: 14px; font-weight: 600;
    box-shadow: none; line-height: 1.2; white-space: nowrap;
  }
  body.h5-workspace .product-preview .creation-toolbar button > span { font-size: inherit; }
  body.h5-workspace .product-preview .creation-toolbar button svg { width: 18px; height: 18px; flex: 0 0 18px; stroke-width: 1.65; }
  body.h5-workspace .product-preview .creation-toolbar .compare-toolbar-button small { display: none; }
  body.h5-workspace .product-preview .creation-toolbar button:hover:not(:disabled) { background: #f3ebe0; border-color: #e0d2c0; box-shadow: none; }
  body.h5-workspace .product-preview .creation-toolbar button:active:not(:disabled) { background: #e7d7bf; border-color: #c8ad89; }
  body.h5-workspace .product-preview .creation-toolbar #toolCompare[aria-pressed="true"] { color: #fffaf3; background: #705036; border-color: #705036; }
  body.h5-workspace .product-preview .creation-toolbar button:focus-visible,
  body.h5-workspace .workbench-product-summary:focus-visible { outline: 2px solid #29867f; outline-offset: 2px; }
  body.h5-workspace .site-record-footer { bottom: 5px; }
  body.h5-workspace .site-record-footer a { padding: 3px 7px; background: transparent; box-shadow: none; border-color: transparent; font-size: 11px; }
  body.h5-workspace .ai-advisor { bottom: 3px; right: 20px; }
  body.h5-workspace .ai-advisor .ai-advisor-launcher {
    width: auto; min-width: 26px; min-height: 26px; height: 26px; padding: 2px 7px;
    gap: 5px; border-radius: 8px; box-shadow: none; transition: none;
  }
  body.h5-workspace .ai-advisor .ai-advisor-launcher-icon { width: 20px; height: 20px; flex-basis: 20px; border-radius: 5px; }
  body.h5-workspace .ai-advisor .ai-advisor-launcher span:last-child { max-width: 110px; opacity: 1; transform: none; }
  body.h5-workspace .ai-advisor .ai-advisor-launcher strong { font-size: 11px; }
  body.h5-workspace .ai-advisor .ai-advisor-launcher small { display: none; }
}
.workbench-tool-icon { display: none; }
@media (min-width: 851px) {
  body.h5-workspace .product-preview .creation-toolbar .workbench-tool-icon { display: block; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
}