/* Adopted design R01, source: 华威未来工厂智慧系统.md, lines 1–590.
 * One UI layer replaces gallery-v2/apple-system/tablet-workbench overrides.
 * Canvas transforms, source media, business data and task handlers are unchanged.
 * Shared values are supplied by vantis-tokens-r07.css. */
html { background: #fff; scroll-padding-top: calc(var(--header-height, 0px) + 16px); }
body.vts-theme {
  margin: 0; background: var(--vts-surface); color: var(--vts-text);
  font: 16px/24px var(--vts-font); text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}
.vts-theme :is(h1,h2,h3,h4) { font-family: var(--vts-font); letter-spacing: 0; color: var(--vts-text); font-weight: 600; }
.vts-theme h1 { font-size: 32px; line-height: 40px; }
.vts-theme h2 { font-size: 24px; line-height: 32px; }
.vts-theme h3 { font-size: 18px; line-height: 26px; }
.vts-theme :is(.small,.helper,.sim-note,small) { font-size: 14px; line-height: 22px; }
.vts-theme :is(p,td,dd,figcaption,.small,.helper,.notice) { overflow-wrap: anywhere; }
.vts-theme :is(.card,.panel,.preview-shell,.render-card,.summary-card,.source-product,.catalog-tile,.reference-image) {
  border-radius: 0; box-shadow: none; background: var(--vts-surface);
}
.vts-theme :is(button,input,select,textarea,.choice,.primary,.secondary,.soft,.danger) {
  font-family: var(--vts-font); border-radius: var(--vts-radius-control);
}
.vts-theme :is(button,input:not([type=checkbox]):not([type=radio]),select,.file-button) { min-height: 48px; }
.vts-theme :is(input,select,textarea) { font-size: 16px; line-height: 24px; }
.vts-theme :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible {
  outline: 3px solid var(--vts-brand); outline-offset: 3px; box-shadow: 0 0 0 2px var(--vts-surface);
}
.vts-theme button:active:not(:disabled) { transform: none; }
.vts-theme :is(button:disabled,[aria-disabled=true]) { cursor: not-allowed; }
.vts-theme .primary { background: var(--vts-brand); border-color: var(--vts-brand); color: #fff; }
.vts-theme .primary:hover:not(:disabled) { background: var(--vts-brand-hover); border-color: var(--vts-brand-hover); }
.vts-theme .primary:active:not(:disabled) { background: var(--vts-brand-pressed); border-color: var(--vts-brand-pressed); }
.vts-theme :is(.secondary,.choice) { border-color: var(--vts-control-border); background: var(--vts-surface); }
.vts-theme :is(.choice.active,.choice.selected) { border-color: var(--vts-brand); box-shadow: inset 0 0 0 1px var(--vts-brand); }
.vts-theme .color-chip { border-radius: 50%; }
.vts-theme .avatar { border-radius: 50%; }
.vts-theme :is(.brand-symbol,.brand-wordmark) { filter: none; }
.vts-theme :is(input[type=checkbox],input[type=radio],input[type=range]) { accent-color: var(--vts-brand); }
.vts-theme input[type=range] { padding: 0; width: 100%; }
.vts-theme .consent { min-height: 48px; align-items: flex-start; }
.vts-theme .consent input { width: 22px; height: 22px; flex: 0 0 22px; margin-top: 2px; }
.vts-theme .text { font-size: 14px; line-height: 22px; }
.vts-theme .icon-button { width: 48px; height: 48px; min-width: 48px; }
.vts-theme #app { max-width: var(--vts-content-max); padding: 32px 48px 64px; }
.vts-theme #app[data-page=custom] { max-width: none; }
.vts-theme .topbar { box-shadow: none; backdrop-filter: none; background: var(--vts-surface); }
.vts-theme .brand strong { font-size: 20px; line-height: 28px; }
.vts-theme .home-start h1 { font-size: 40px; line-height: 48px; }
.vts-theme .section-head { align-items: flex-start; }
.vts-theme .journey-context { font-size: 14px; line-height: 22px; }
.vts-theme .journey-context .row { flex-wrap: wrap; }
.vts-theme .journey-nav { gap: 8px 24px; }
.vts-theme .source-product { padding: 24px 0; border: 0; border-bottom: 1px solid var(--vts-divider); }
.vts-theme .source-product img { object-fit: contain; }
.vts-theme .source-finishes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; font-size: 14px; line-height: 22px; }
.vts-theme .source-finishes dd { margin: 0; }

/* Current configuration stays non-modal beside the scene. */
.vts-theme .studio { grid-template-columns: minmax(0,1fr) minmax(360px,400px); gap: 32px; }
.vts-theme .visual { min-width: 0; }
.vts-theme .panel { border-left: 1px solid var(--vts-divider); padding-left: 24px; }
.vts-theme .panel-top { gap: 16px; padding: 0 0 24px; }
.vts-theme .panel-top h2 { font-size: 24px; line-height: 32px; }
.vts-theme .panel-top .text { margin-right: 12px; }
.vts-theme .param-tabs { background: var(--vts-surface); }
.vts-theme .param-tabs button { font-size: 16px; line-height: 24px; }
.vts-theme .param-tabs button.active { color: var(--vts-brand); background: var(--vts-surface); }
.vts-theme .layout-toggle { display: inline-flex; align-items: center; justify-content: flex-end; width: 100%; }
.vts-theme .panel.collapsed > :not(.panel-toggle) { display: none !important; }
.vts-theme .studio.panel-collapsed { grid-template-columns: minmax(0,1fr) 128px; }
.vts-theme .visual-toolbar { background: var(--vts-surface); padding: 8px; gap: 8px; flex-wrap: wrap; }
.vts-theme .segmented { background: var(--vts-surface); gap: 0; border-radius: 0; }
.vts-theme .segmented button { min-height: 48px; font-size: 16px; line-height: 24px; padding: 10px 12px; }
.vts-theme .segmented button.active { background: var(--vts-brand-subtle); color: var(--vts-brand); border-bottom-color: var(--vts-brand); }
.vts-theme .preview-footer { flex-wrap: wrap; gap: 8px 16px; padding: 12px; min-height: 48px; }
.vts-theme .preview-footer span { font-size: 14px; line-height: 22px; }
.vts-theme .preview-status { flex-basis: 100%; color: var(--vts-text); }
.vts-theme .preview-footer .view-scale { padding: 0; min-height: 0; border: 0; width: auto; color: var(--vts-text-secondary); background: none; }
.vts-theme .float-tools { opacity: 1; gap: 8px; }
.vts-theme .float-tools button { border-radius: 4px; }
.vts-theme .image-tools { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.vts-theme .image-tools button { text-align: left; font-size: 14px; line-height: 22px; }
.vts-theme .option-section { margin-bottom: 24px; }
.vts-theme :is(.option-section,.hardware-section) summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; font-size: 16px; font-weight: 600; }
.vts-theme :is(.option-section,.hardware-section) summary span { font-size: 14px; font-weight: 400; color: var(--vts-text-secondary); }
.vts-theme .option-section .choice { display: flex; flex-direction: column; align-items: stretch; }
.vts-theme .choice small { display: block; font-size: 14px; line-height: 22px; font-weight: 400; }
.vts-theme :is(.option-section .options,.pack-hardware) { max-height: 320px; overflow: auto; overscroll-behavior: contain; padding: 4px; }
.vts-theme .current-scene { padding: 24px 0; border-top: 1px solid var(--vts-divider); }
.vts-theme .current-scene canvas { width: 100%; max-height: 160px; object-fit: contain; }
.vts-theme .current-scene p { font-size: 14px; line-height: 22px; margin-top: 8px; }
.vts-theme :is(.component-editor,.photo-transform) .inline-fields { grid-template-columns: 1fr; }
.vts-theme .render-card { padding: 24px 0; }
.vts-theme .render-settings { grid-template-columns: 1fr; }
.vts-theme .render-actions > button { flex: 1 1 140px; }
.vts-theme .candidate-tile { min-width: 0; }
.vts-theme .summary-face canvas { width: 100%; max-height: 360px; object-fit: contain; }
.vts-theme .summary-face h3 { margin-top: 24px; }
.vts-theme .summary-hardware { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.vts-theme .summary-hardware figure { margin: 0; }
.vts-theme .summary-hardware img { width: 100%; height: 120px; object-fit: contain; }
.vts-theme .summary-hardware figcaption { font-size: 14px; line-height: 22px; }

/* Embedded engine uses the host navigation; the professional canvas uses its full frame. */
body.embedded-v2 { --header-height: 0px; padding: 0; }
.embedded-v2 > :is(.topbar,.mobile-nav) { display: none; }
.embedded-v2 .studio-heading { display: none; }
.embedded-v2 #app { max-width: none; padding: 24px; min-height: 0; }
body.embedded-v2:has(#app[data-page=custom]) { height: 100dvh; overflow: hidden; }
.embedded-v2 #app[data-page=custom] {
  height: 100dvh; padding: 16px; min-height: 0; display: grid;
  grid-template-rows: minmax(0,1fr); gap: 16px;
}
.embedded-v2 #app[data-page=custom]:has(> .step-task) { grid-template-rows: auto minmax(0,1fr); }
.embedded-v2 #app[data-page=custom] > .journey-context { display: none; }
.embedded-v2 .step-task { padding: 0; min-height: 0; }
.embedded-v2 .step-task > span { font-size: 12px; line-height: 18px; color: var(--vts-text-secondary); }
.embedded-v2 .step-task h2 { margin: 4px 0; font-size: 24px; line-height: 32px; }
.embedded-v2 .step-task p { font-size: 14px; line-height: 22px; color: var(--vts-text-secondary); }
.embedded-v2 #app[data-page=custom] > .studio {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(360px,400px);
  grid-template-rows: minmax(0,1fr); height: 100%; min-height: 0; overflow: hidden; align-items: stretch; gap: 24px;
}
.embedded-v2 #app[data-page=custom] :is(.visual,.panel) { height: 100%; min-height: 0; max-height: none; }
.embedded-v2 #app[data-page=custom] .visual { display: block; position: relative; top: auto; overflow: hidden; padding: 0; }
.embedded-v2 #app[data-page=custom] .preview-shell { position: relative; top: auto; height: 100%; display: flex; flex-direction: column; border: 1px solid var(--vts-divider); }
.embedded-v2 #app[data-page=custom] .canvas-wrap { flex: 1 1 0; height: auto; min-height: 0; border-radius: 0; touch-action: none; }
.embedded-v2 #app[data-page=custom] .canvas-wrap canvas { touch-action: none; }
.embedded-v2 #app[data-page=custom] :is(.visual-toolbar,.preview-footer) { flex: none; }
.embedded-v2 #app[data-page=custom] .panel {
  overflow-y: auto; padding: 0 8px 64px 24px; overscroll-behavior-y: contain;
  scroll-padding-block: 56px 80px; scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.embedded-v2 .panel > .panel-toggle { position: sticky; top: 0; z-index: 8; background: var(--vts-surface); margin-bottom: 8px; }
.embedded-v2 .param-tabs { position: sticky; top: 48px; z-index: 5; background: var(--vts-surface); }
.embedded-v2 .panel-top { padding-bottom: 16px; }
.embedded-v2 .panel-top h2 { font-size: 22px; line-height: 30px; }
.embedded-v2 .panel :is(button,input,select,textarea) { scroll-margin-top: 112px; }
.embedded-v2 .photo-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.embedded-v2 #app[data-page=custom] > .studio.panel-collapsed { grid-template-columns: minmax(0,1fr) 128px; }
/* Keep the existing task-specific visibility, with an always reachable parameter toggle. */
body.embedded-v2:is([data-flow-step="2"],[data-flow-step="11"]) #app[data-page=custom] .panel > :not(.photo-transform):not(.photo-actions):not(.panel-toggle) { display: none; }
body.embedded-v2:is([data-flow-step="3"],[data-flow-step="12"]) #app[data-page=custom] .panel > :not(.render-card):not(.panel-toggle) { display: none; }
body.embedded-v2:is([data-flow-step="8"],[data-flow-step="16"]) #app[data-page=custom] .panel > .price-bar { display: none; }

/* Shared components retain distinct task layouts across the existing routes. */
.vts-theme #app[data-page=compare] .cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 24px; align-items: start; }
.vts-theme #app[data-page=mine] .cards { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; }
.vts-theme #app[data-page=mine] .project-card { border-bottom: 1px solid var(--vts-divider); border-top: 0; }
.vts-theme #app[data-page=cart] .cart-row { align-items: start; }
.vts-theme #app[data-page=cart] .cart-row > strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.vts-theme #app[data-page=community] .journey-grid { gap: 32px; }
.vts-theme #app[data-page=community] .card > :is(h2,h3) { margin-top: 16px; }
.vts-theme #app:is([data-page=professional],[data-page=sales]) .journey-grid { grid-template-columns: 1fr; }
.vts-theme #app:is([data-page=professional],[data-page=sales]) .order-row { align-items: flex-start; }
.vts-theme :is(.table-scroll,.reference-grid) { max-width: 100%; min-width: 0; }
.vts-theme .reference-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 24px; }
.vts-theme .admin-table :is(th,td) { height: 56px; line-height: 22px; font-size: 14px; }
.vts-theme dialog { border-radius: 4px; background: var(--vts-surface); box-shadow: 0 16px 64px #0002; }
.vts-theme dialog::backdrop { background: var(--vts-scrim); backdrop-filter: none; }
.vts-theme dialog.task-drawer { width: var(--vts-drawer-width); max-width: 100vw; border-radius: 0; }
.vts-theme .shop-row { padding: 24px 0; }
.vts-theme .dialog-head { background: var(--vts-surface); }
.vts-theme .dialog-head h2 { font-size: 24px; line-height: 32px; }
.vts-theme .shop-media { background: var(--vts-surface-secondary); }
.vts-theme .pack-library { gap: 24px; }
.vts-theme .pack-asset :is(small,.small) { font-size: 14px; line-height: 22px; }

@media (min-width: 1500px) {
  .vts-theme .studio,.embedded-v2 #app[data-page=custom] > .studio { grid-template-columns: minmax(0,1fr) 440px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .vts-theme #app { padding: 24px; }
  .vts-theme .studio,.embedded-v2 #app[data-page=custom] > .studio { grid-template-columns: minmax(0,1fr) 360px; gap: 24px; }
  .vts-theme #app[data-page=mine] .cards { grid-template-columns: 1fr; }
  .vts-theme .topbar { flex-wrap: wrap; }
}
@media (max-width: 899px) {
  .embedded-v2 #app[data-page=custom] { padding: 12px; gap: 12px; }
  .embedded-v2 #app[data-page=custom] > .studio {
    grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,.48fr) minmax(0,.52fr); gap: 12px;
  }
  .embedded-v2 #app[data-page=custom] .visual { grid-row: 1; grid-column: 1; }
  .embedded-v2 #app[data-page=custom] .panel { grid-row: 2; grid-column: 1; padding: 0 8px 64px; border-left: 0; border-top: 1px solid var(--vts-divider); }
  .embedded-v2 #app[data-page=custom] > .studio.panel-collapsed { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr) 56px; }
  .embedded-v2 #app[data-page=custom] .panel.collapsed { padding: 0 8px; }
  .embedded-v2 .step-task > span { display: none; }
  .embedded-v2 .step-task h2 { font-size: 22px; line-height: 30px; }
  .embedded-v2 .step-task p { display: none; }
  .embedded-v2 .float-tools { flex-direction: row; top: 8px; right: 8px; gap: 4px; }
  .embedded-v2 .preview-footer { padding: 8px; gap: 4px 12px; }
  .embedded-v2 .preview-footer span { font-size: 12px; line-height: 18px; }
  .embedded-v2 .preview-footer .preview-status { font-size: 14px; line-height: 22px; }
}
/* Short frames (browser chrome or an open keyboard) retain independent scrolling
 * instead of enforcing a 432px minimum inside a smaller host iframe. */
@media (max-width: 899px) and (max-height: 560px) {
  .embedded-v2 #app[data-page=custom] .visual { overflow-y: auto; overscroll-behavior-y: contain; }
  .embedded-v2 #app[data-page=custom] .preview-shell { min-height: 220px; }
  .embedded-v2 #app[data-page=custom] .canvas-wrap { min-height: 104px; }
  .embedded-v2 #app[data-page=custom] .panel { min-height: 0; overflow-y: auto; }
}
@media (max-width: 767px) {
  .vts-theme .primary { min-height: var(--vts-control-height-important,52px); }
  .vts-theme #app { padding: 24px 16px 104px; }
  .embedded-v2 #app { padding: 24px 16px; }
  .vts-theme h1,.vts-theme .studio-heading h1 { font-size: 24px; line-height: 32px; }
  .vts-theme h2 { font-size: 22px; line-height: 30px; }
  .vts-theme h3 { font-size: 17px; line-height: 25px; }
  .vts-theme .home-start h1 { font-size: 28px; line-height: 36px; }
  .vts-theme .brand strong { font-size: 18px; line-height: 26px; }
  .vts-theme .studio { display: flex; flex-direction: column; gap: 24px; }
  .vts-theme .panel { padding-left: 0; border-left: 0; border-top: 1px solid var(--vts-divider); }
  .vts-theme .panel-top h2 { font-size: 22px; line-height: 30px; }
  .vts-theme #app:is([data-page=mine],[data-page=compare]) .cards { grid-template-columns: 1fr; }
  .vts-theme .journey-grid,.vts-theme .dual-confirm { grid-template-columns: 1fr; }
  .vts-theme .source-finishes { grid-template-columns: 1fr; }
  .vts-theme :is(.section-head,.source-actions,.order-row) { flex-wrap: wrap; }
  .vts-theme .section-head .row { flex-wrap: wrap; }
  .vts-theme .modal-actions { flex-wrap: wrap; }
  .vts-theme dialog:not(.task-drawer) { width: calc(100vw - 24px); max-height: 92dvh; border-radius: 8px 8px 0 0; }
  .vts-theme dialog.task-drawer { width: 100vw; }
  .vts-theme .dialog-head,.vts-theme #dialog-body { padding: 16px; }
  .vts-theme .dialog-head h2 { font-size: 22px; line-height: 30px; }
  .vts-theme .mobile-nav { border-radius: 0; background: var(--vts-surface); box-shadow: none; backdrop-filter: none; }
}
@media (max-width: 480px) {
  .embedded-v2 #app[data-page=custom] { padding: 8px; gap: 8px; }
  .embedded-v2 .visual-toolbar { padding: 4px; gap: 4px; }
  .embedded-v2 .segmented { flex: 1; }
  .embedded-v2 .segmented button { flex: 1; padding: 10px 8px; font-size: 14px; }
  .vts-theme .candidate-grid,.vts-theme .source-products { grid-template-columns: 1fr; }
  .vts-theme .project-card { gap: 16px; }
  .vts-theme .project-card canvas { width: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  .vts-theme *, .vts-theme *::before, .vts-theme *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (prefers-contrast: more) {
  .vts-theme :is(.muted,.small,.helper,.sim-note) { color: #363636; }
  .vts-theme :is(.card,.panel,.preview-shell,.admin-table th,.admin-table td) { border-color: var(--vts-control-border); }
}
@media print {
  body.vts-theme { background: #fff; }
  .vts-theme :is(.topbar,.mobile-nav,#app,#toast) { display: none; }
  .vts-theme dialog { box-shadow: none; border: 0; width: 100%; max-height: none; }
}

/* Shared semantic icon stroke; original SVG source assets stay unchanged. */
.vts-theme .v-icon svg,.vts-theme .v-icon svg [stroke-width]{stroke-width:var(--vts-icon-stroke,1.75)}

/* R07 viewport readback: single-column editors scroll inside the engine.
   The complete scene precedes its controls; host navigation/footer stay in place. */
@media (max-width: 899px) {
  .embedded-v2 #app[data-page=custom] {
    display: block; height: 100dvh; min-height: 0;
    overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch; scroll-padding-block: 16px 32px;
  }
  .embedded-v2 #app[data-page=custom] > .step-task { margin-bottom: 16px; }
  .embedded-v2 #app[data-page=custom] > .studio,
  .embedded-v2 #app[data-page=custom] > .studio.panel-collapsed {
    display: flex; flex-direction: column; height: auto; min-height: 0;
    overflow: visible; gap: 24px;
  }
  .embedded-v2 #app[data-page=custom] .visual {
    display: block; position: static; width: 100%; height: auto;
    min-height: 0; max-height: none; overflow: visible;
  }
  .embedded-v2 #app[data-page=custom] .preview-shell {
    position: static; height: auto; min-height: 0; overflow: visible;
  }
  .embedded-v2 #app[data-page=custom] .canvas-wrap {
    flex: none; height: clamp(320px,56dvh,560px); min-height: 320px;
    margin-bottom: 64px; overflow: visible;
  }
  /* Reserve a separate tool row below the canvas, without changing its bitmap,
     event handlers, coordinate rectangle or product material pixels. */
  .embedded-v2 #app[data-page=custom] .float-tools {
    position: absolute; inset: auto 0 -64px; height: 64px;
    display: flex; flex-direction: row; align-items: center; justify-content: flex-end;
    gap: 8px; padding: 8px; border-top: 1px solid var(--vts-divider);
    background: var(--vts-surface);
  }
  .embedded-v2 #app[data-page=custom] .preview-footer { position: static; flex: none; }
  .embedded-v2 #app[data-page=custom] .panel {
    display: block; width: 100%; height: auto; min-height: 0; max-height: none;
    overflow: visible; padding: 16px 0 48px; border-left: 0;
    border-top: 1px solid var(--vts-divider);
  }
  .embedded-v2 #app[data-page=custom] .panel.collapsed { padding: 8px 0; }
  .embedded-v2 #app[data-page=custom] .panel > .panel-toggle { position: static; }
  .embedded-v2 #app[data-page=custom] .param-tabs { position: static; }
}

/* R08: continuous workspace, no numbered task frame. */
body[data-workspace="realtime"] .step-task { display:none; }
body.embedded-v2[data-workspace="realtime"] .visual-toolbar .segmented:has([data-face]) { display:none; }
body.embedded-v2[data-workspace="realtime"] #app[data-page="custom"] > .studio .visual { display:grid; grid-template-rows:minmax(280px,1fr) auto auto; gap:12px; overflow:auto; }
body.embedded-v2[data-workspace="realtime"] #app[data-page="custom"] .preview-shell { min-height:280px; height:100%; }
body.embedded-v2[data-workspace="realtime"] .image-tools { grid-template-columns:repeat(3,minmax(0,1fr)); }
body.embedded-v2[data-workspace="realtime"] .image-tools button { min-height:44px; padding:8px; justify-content:center; }
body[data-workspace="realtime"] .hardware-selection-preview { border-top:1px solid var(--vts-divider); padding-top:12px; }
@media (max-width:899px){
 body.embedded-v2[data-workspace="realtime"] #app[data-page="custom"] > .studio .visual { display:block; height:auto; overflow:visible; }
 body.embedded-v2[data-workspace="realtime"] #app[data-page="custom"] .preview-shell { height:auto; min-height:0; }
 body.embedded-v2[data-workspace="realtime"] .image-tools { margin-top:12px; grid-template-columns:repeat(2,minmax(0,1fr)); }
}

.render-access-summary{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0;padding:16px 0;border-block:1px solid var(--vts-divider)}
.render-access-summary dt{font-size:12px;line-height:18px;color:var(--vts-text-secondary)}
.render-access-summary dd{margin:4px 0 0;font-size:14px;line-height:22px;font-weight:600}

.hardware-preview-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.hardware-preview-heading h3{margin:0;font-size:14px}.hardware-preview-heading p{margin:0}.hardware-preview-items{display:flex;gap:16px;flex-wrap:wrap}.hardware-preview-item{display:flex;align-items:center;gap:12px;margin:8px 0 0;flex:1;min-width:220px}.hardware-preview-item img{width:64px;height:80px;object-fit:contain;background:#f7f7f5;border:1px solid #e4e5e7}.hardware-preview-item figcaption strong{font-size:13px}.hardware-preview-item figcaption p{margin:5px 0 0;max-width:32em}

/* R09: keep the actual scene visible while the properties pane scrolls.
   This stylesheet is the active iframe consumer; no legacy tablet sheet is loaded. */
body.embedded-v2[data-workspace="realtime"] #app[data-page="custom"] {
  display:grid; grid-template-rows:minmax(0,1fr); height:100dvh;
  overflow:hidden; padding:12px; gap:12px;
}
body.embedded-v2[data-workspace="realtime"] #app[data-page="custom"] > .studio {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,360px);
  grid-template-rows:minmax(0,1fr); height:100%; min-height:0; overflow:hidden; gap:16px;
}
body.embedded-v2[data-workspace="realtime"] #app[data-page="custom"] > .studio .visual {
  display:block; height:100%; min-height:0; overflow:hidden;
}
body.embedded-v2[data-workspace="realtime"] #app[data-page="custom"] .preview-shell {
  display:flex; flex-direction:column; height:100%; min-height:0; overflow:hidden;
}
body.embedded-v2[data-workspace="realtime"] #app[data-page="custom"] .canvas-wrap {
  flex:1 1 0; height:auto; min-height:0; margin-bottom:0; overflow:hidden;
}
body.embedded-v2[data-workspace="realtime"] #app[data-page="custom"] .float-tools {
  position:static; flex:none; height:56px; display:flex; flex-direction:row;
  align-items:center; justify-content:flex-end; gap:8px; padding:4px 8px;
  border-top:1px solid var(--vts-divider); background:var(--vts-surface);
}
/* Tools are outside the photo bitmap and stay outside pointer-coordinate calculations. */
body.embedded-v2[data-workspace="realtime"] #app[data-page="custom"] .preview-footer {
  position:static; flex:none; flex-wrap:wrap; min-height:40px; padding:8px 12px; gap:4px 12px;
}
body.embedded-v2[data-workspace="realtime"] #app[data-page="custom"] .panel {
  display:block; height:100%; min-height:0; max-height:100%; overflow-x:hidden; overflow-y:auto;
  padding:0 8px calc(48px + env(safe-area-inset-bottom)) 16px; border-top:0;
  overscroll-behavior:contain; scroll-padding-block:112px 48px; -webkit-overflow-scrolling:touch;
}
body.embedded-v2[data-workspace="realtime"] #app[data-page="custom"] .panel > .panel-toggle {
  position:sticky; top:0; width:100%; margin-bottom:8px; justify-content:flex-end; min-height:48px;
}
body.embedded-v2[data-workspace="realtime"] #app[data-page="custom"] .param-tabs {
  position:sticky; top:48px; margin-block:8px; background:var(--vts-surface); z-index:5;
}
body.embedded-v2[data-workspace="realtime"] #app[data-page="custom"] .image-tools {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;
  margin:24px 0 16px; padding-top:16px; border-top:1px solid var(--vts-divider);
}
body.embedded-v2[data-workspace="realtime"] #app[data-page="custom"] .photo-transform input[type="range"] {
  width:100%; min-height:48px; touch-action:pan-y;
}
body.embedded-v2[data-workspace="realtime"] #app[data-page="custom"] > .studio.panel-collapsed {
  grid-template-columns:minmax(0,1fr) 128px;
}
@media(max-width:899px) {
  body.embedded-v2[data-workspace="realtime"] #app[data-page="custom"] { padding:8px; }
  body.embedded-v2[data-workspace="realtime"] #app[data-page="custom"] > .studio {
    grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,.48fr) minmax(0,.52fr); gap:8px;
  }
  body.embedded-v2[data-workspace="realtime"] #app[data-page="custom"] .panel {
    padding:0 8px calc(48px + env(safe-area-inset-bottom)); border-left:0; border-top:1px solid var(--vts-divider);
  }
  body.embedded-v2[data-workspace="realtime"] #app[data-page="custom"] .visual-toolbar { padding:4px 8px; }
  body.embedded-v2[data-workspace="realtime"] #app[data-page="custom"] .float-tools { height:48px; gap:8px; padding:2px 8px; }
  body.embedded-v2[data-workspace="realtime"] #app[data-page="custom"] .float-tools button { width:44px; min-height:44px; }
  body.embedded-v2[data-workspace="realtime"] #app[data-page="custom"] .preview-footer { font-size:12px; line-height:18px; padding:4px 8px; min-height:26px; }
  body.embedded-v2[data-workspace="realtime"] #app[data-page="custom"] > .studio.panel-collapsed {
    grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) 56px;
  }
  body.embedded-v2[data-workspace="realtime"] #app[data-page="custom"] .panel.collapsed { padding:4px 8px; }
}
/* In landscape or with the software keyboard open, retain a usable scroll pane. */
@media(min-width:600px) and (max-width:899px) and (max-height:520px) {
  body.embedded-v2[data-workspace="realtime"] #app[data-page="custom"] > .studio {
    grid-template-columns:minmax(0,1fr) minmax(220px,.9fr); grid-template-rows:minmax(0,1fr);
  }
  body.embedded-v2[data-workspace="realtime"] #app[data-page="custom"] .visual { grid-row:1; grid-column:1; }
  body.embedded-v2[data-workspace="realtime"] #app[data-page="custom"] .panel { grid-row:1; grid-column:2; border-top:0; border-left:1px solid var(--vts-divider); }
  body.embedded-v2[data-workspace="realtime"] #app[data-page="custom"] .visual-toolbar { display:none; }
  body.embedded-v2[data-workspace="realtime"] #app[data-page="custom"] .float-tools { gap:2px; padding-inline:2px; }
  body.embedded-v2[data-workspace="realtime"] #app[data-page="custom"] .float-tools button { width:36px; min-width:36px; }
  body.embedded-v2[data-workspace="realtime"] #app[data-page="custom"] > .studio.panel-collapsed {
    grid-template-columns:minmax(0,1fr) 80px; grid-template-rows:minmax(0,1fr);
  }
}